@charset "utf-8";
/* CSS Document */

@media screen and (max-width:420px){
	/*========= ナビゲーションのためのCSS ===============*/

	#g-nav{
			/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
			position:fixed;
			z-index: 999;
			/*ナビのスタート位置と形状*/
		top:0;
			right: -120%;
		width:100%;
			height: 100vh;/*ナビの高さ*/
		background:linear-gradient(#a1c4fd,#c2e9fb);
			/*動き*/
		transition: all 0.6s;
	}

	/*アクティブクラスがついたら位置を0に*/
	#g-nav.panelactive{
			right: 0;
	}

	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list{
			/*ナビの数が増えた場合縦スクロール*/
			position: fixed;
			z-index: 999; 
			width: 100%;
			height: 100vh;/*表示する高さ*/
			overflow: auto;
			-webkit-overflow-scrolling: touch;
	}

	/*ナビゲーション*/
	#g-nav ul {
			/*ナビゲーション天地中央揃え*/
			position: absolute;
			z-index: 999;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
	}

	/*リストのレイアウト設定*/

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

	#g-nav li a{
		color: #333;
		text-decoration: none;
		padding:10px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		font-size: 18px;
	}

	/*========= ボタンのためのCSS ===============*/
	.openbtn{
		position:fixed;
			z-index: 9999;/*ボタンを最前面に*/
		top:10px;
		right: 10px;
		cursor: pointer;
			width: 50px;
			height:50px;
	}

	/*×に変化*/	
	.openbtn span{
			display: inline-block;
			transition: all .4s;
			position: absolute;
			left: 14px;
			height: 3px;
			border-radius: 2px;
		background-color: #666;
			width: 45%;
		}

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

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

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

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

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

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