@charset "utf-8";

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

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

/*丸の拡大*/
.circle-bg{
	position: fixed;
	z-index: 10;	/*header9より数多*/
	/*丸の形*/
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.1);/*円の色*/
	/*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	right: -50px;
	top: -50px;
	transition: all .8s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
		background-color: rgba(255,255,255,1);/*円の色*/

}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/ display: none;/*====クリック防止追加=====*/
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:45%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1; display: block;/*====クリック防止追加のため=====*/
}

/* 背景が出現後にナビゲーション li を表示*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li:first-child{margin-bottom: 2rem;}


#g-nav li{
	text-align: center;
	list-style: none;
}

#g-nav li a{
	color: rgba(0,0,0,1.00);		/*文字色*/
	padding: 0.5rem;				/*行間*/
	display: block;	
	text-transform: uppercase;
}
#g-nav li a:hover{
	color: rgba(0,0,0,0.60);	/*マウスオーバ色*/
}

#g-nav  {
	font-size: 1.6rem;
	
}

#g-nav img {
	width: 50px;
}

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

/*ボタン外側 box*/

.openbtn{	/*追従するナビゲーションの場合　fixed＋top、right*/
	position: fixed;
			z-index: 9999;/*ボタンを最前面に*/
			/*top:30px;*/
			right: 20px;
	
	cursor: pointer;
    width: 50px;
    height:50px;
	

}
	
/* 変化 ボタン内側*/	
.openbtn span{
	display: inline-block;
    transition: all .4s;
    position: absolute;
	
		/*横軸中央*/
		left :50%;
		transform: translateX(-50%);
  		-webkit-transform: translateX(-50%);
	
  }

.openbtn span:nth-of-type(1){ /*◯*/	

 }


.openbtn span:nth-of-type(2) { /*Menu*/
	top: 2rem;
	font-size: 1.2rem;

	
	font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

}



/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
.openbtn.active span:nth-of-type(1) { /*◯*/
			
		color: #666;

}

.openbtn.active span:nth-of-type(2) { /*Menu*/
	
		color: #666;

}