@charset "utf-8";
header{
position: relative;
width: 100%;
z-index: 10;/*下から2番目に表示*/
display: flex;
}
#header{
  position: fixed;/*header固定*/
  height: 100px;/*Headerの高さ設定*/
  width:100%;
  justify-content: center;
  align-items: center;
padding-left: 0%;
padding-right: 0%;
padding-top: 2%;
padding-bottom: 2%;
background: rgba(145, 42, 125, 1);
text-align: center;
}
#header-logo{
width:30%;
}

#header-logo img{
padding-left: 10%;
padding-right: 10%;
width:60%;
}
#g-nav{
margin-right:auto;
}
#g-nav_left{
margin-left:10%;
}
#g-nav_right{
margin-right:10%;
}

@media screen and (max-width:768px){
	
#header-logo{
text-align: center;
width:100%;
}	
	

#header-logo img{
padding-left: 10%;
padding-right: 10%;
width:60%;
}	
	
#header{
  position: fixed;/*header固定*/
  height: 100px;/*Headerの高さ設定*/
  width:100%;
	justify-content: center;
  align-items: center;
text-align: center;
padding-left: 0%;
padding-right: 0%;
padding-top: 2%;
padding-bottom: 2%;
background: rgba(145, 42, 125, 1);
}
#g-nav{
display: none;
}	
#g-nav_left{
display: none;
}
#g-nav_right{
display: none;
}	
}
@media screen and (max-width:768px){
header{
position: relative;
width: 100%;
}
}

section#area-1{
  padding-top:100px;
}
#navi_header.UpMove{
  position: fixed;
  width:100%;
  animation: UpAnime 0.5s forwards;
	z-index: 9;/*下から2番目に表示*/
}
@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-100px);
  }
}
/*　下に下がる動き　*/

#navi_header.DownMove{
  position: fixed;
  width:100%;
  animation: DownAnime 0.5s forwards;
	z-index: 9;/*下から2番目に表示*/
}
@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/*========= レイアウトのためのCSS ===============*/

#g-navi{
padding-left: 0px;
z-index: 5;/*下から2番目に表示*/
}

#g-navi li a{
color: #fff!important;
}
nav ul{
  list-style: none;
  display: flex;
  justify-content: left;
}

nav ul li a{
  display: block;
  text-decoration: none;
color: #fff !important;
	margin: 15px;
  transition:all 0.3s;
font-size: 1.6rem;
    font-size: 16px;
	font-weight: bold;
	font-family: "Karla", serif;
    -webkit-letter-spacing: 1.5px;
    -moz-letter-spacing: 1.5px;
    -ms-letter-spacing: 1.5px;
    letter-spacing: 0.03em;	
	font-family: "Kaisei Opti", serif;
  font-weight: 500;
}
@media screen and (max-width:768px){
	
#g-navi{
display: none;
}	
	
	
 nav ul li a{
    display: none;
}
	
nav ul li a{
display: none;
margin: 7px;
}	
	
	
}

nav ul li.current a,
nav ul li a:hover,
nav ul li a:active{
  color:#912a7d; 
}










/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#sp-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;/*下から2番目に表示*/
  top: 0;
	left: 0;
opacity: 1;
    visibility: visible;
  width:100%;
    height: 100vh;
	color: #fff;
	
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
  z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #912a7d;
	opacity: 1;
    visibility: visible;
    /*丸のスタート位置と形状*/
  transform: scale(0);/*scaleをはじめは0に*/
  right:-50px;
    top:-50px;
    transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
  transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#sp-nav-list{
    
    /*ナビの数が増えた場合縦スクロール*/
    position: absolute;
    z-index: 1;
	width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#sp-nav.panelactive #sp-nav-list{
     display: block; /*クラスが付与されたら出現*/
	z-index: 999;/*下から2番目に表示*/
	position: absolute;
}

/*ナビゲーション*/
#sp-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 9;/*下から2番目に表示*/
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
	display: block;
}

/*背景が出現後にナビゲーションを表示*/
#sp-nav.panelactive ul {
    opacity:1;
	padding: 0;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#sp-nav.panelactive ul li{

animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
color: #fff!important;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#sp-nav li{
  text-align: center; 
  list-style: none;
	display: block!important;
	width: 100%;
	line-height:0.5em;
}

#sp-nav li a{
	
  color: #ffffff!important;
  text-decoration: none;
  padding:7px;
  letter-spacing: 0.1em;
  font-weight: bold;
}



	

#sp-nav li.copylightnavi{
	color: #ffffff!important;
    font-size: 50%;
	font-weight: 800;
    line-height: 2.9090909091;
    letter-spacing: .1em;
    font-feature-settings: "palt";
	line-height:20px;
	padding-top: 15%;
}	
	




@media only screen and (max-width: 768px){

	
#sp-nav-list img{
/*padding-left: 15px;*/
width: 50%;
}	
	
	
	
/*ナビゲーション*/
#sp-nav ul {
  opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 9;/*下から2番目に表示*/
    top:40%;
    left:35%;
    transform: translate(-30%,-40%);
	display: block;
}	
	
	
#sp-nav li{
text-align: left; 

}	
	
#sp-nav li{
  text-align: left; 
  list-style: none;
	display: block!important;
	width: 100%;
	line-height:1.8em;
}

	
	
#sp-nav li a{
font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.1em;
  font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
color: #ffffff!important;
}	
	
	
	
#sp-nav li.copylightnavi{
	color: #ffffff!important;
    font-size: 50%;
	font-weight: 800;
    line-height: 2.9090909091;
    letter-spacing: .1em;
    font-feature-settings: "palt";
	line-height:20px;
	padding-top: 15%;
}	
	

	
	
}

/*========= ボタンのためのCSS ===============*/


.sns_icon{
  position: absolute;
  z-index: 1;/*ボタンを最前面に*/
    width: 50px;
    height:50px;
	right: 50px;
	top:33px;
}


.sns_icon img{
width: 60%;
}

.openbtn1{
  position: absolute;
  z-index: 9999;/*ボタンを最前面に*/
  cursor: pointer;
    width: 50px;
    height:50px;
	right: 10px;
	top:25px;
	color: #ffffff!important;
}	

@media screen and (max-width:768px){
	
	
.sns_icon{
  position: absolute;
  z-index: 1;/*ボタンを最前面に*/
    width: 50px;
    height:50px;
	right: 50px;
}
	
	
	
	
.openbtn1{
  position: absolute;
top:25px;
padding-top: 1%;
  z-index: 9999;/*ボタンを最前面に*/
  cursor: pointer;
    width: 50px;
    height:50px;
	right: 10px;
}		
	
 }	
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
	z-index: 9999;/*ボタンを最前面に*/
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #ffffff;
    width: 45%;
	padding-top: 1%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;background-color: #fff;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
	background-color: #fff;
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
	background-color: #fff;
}


.lang_box{
  display: flex;
  justify-content: center; /* 中央寄せ */
}
.lang_box .item{
  box-sizing: border-box;
	padding: 3%;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 85%;
}

.lang_box .item a{
color: #ffffff;
}

.lang_box_sns{
  display: flex;
  justify-content: center; /* 中央寄せ */
	position: absolute;
}
.lang_box_sns .item{
  box-sizing: border-box;
	padding: 3%;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 85%;
}



.lang_box_sns .item{
color: #912a7d;
text-decoration: none;
}

.lang_box_sns .item a{
color: #912a7d;
text-decoration: none;
}


.lang_box_sns .item a:hover {
color: #d4bba6;
}
.lang_box_sns .item a:visited {
color: #bf9879;
}

.lang_box_sns .item a:active {
color: #c6a488;
}


@media screen and (max-width:768px){

.lang_box{
  display: flex;
  justify-content: left; /* 中央寄せ */
}	
	
.lang_box_sns{
display: none;
}


	
}