/*========= ボタンのための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: #fff;
		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 {
		background-color: #222;
}
.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%;
}
/*==768px以下の形状*/
@media screen and (max-width:1199px) {
		#gNav ul {
				display: block;
		}
		/**/
		/*========= 右からメニュー ===============*/
		#gNav {
				/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
				position: fixed;
				z-index: 999;
				/*ナビのスタート位置と形状*/
				top: 0;
				right: -120%;
				width: 100%;
				height: 100vh; /*ナビの高さ*/
				background: #eee;
				/*動き*/
				transition: all 0.6s;
		}
		/*アクティブクラスがついたら位置を0に*/
		#gNav.panelactive {
				right: 0;
		}
		/*ナビゲーションの縦スクロール*/
		#gNav.panelactive #gNav-list {
				/*ナビの数が増えた場合縦スクロール*/
				position: fixed;
				z-index: 999;
				width: 100%;
				height: 100vh; /*表示する高さ*/
				overflow: auto;
				-webkit-overflow-scrolling: touch;
		}
		/*ナビゲーション*/
		#gNav ul {
				/*ナビゲーション天地中央揃え*/
				position: absolute;
				z-index: 999;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
		}
		#gNav li.has-child ul {
				transform: none;
				background: none;
		}
		/*リストのレイアウト設定*/
		#gNav li {
				list-style: none;
				text-align: center;
		}
		#gNav li a {
				color: #333;
				text-decoration: none;
				padding: 10px;
				display: block;
				text-transform: uppercase;
		}
		#gNav ul li {
				padding: 0;
		}
		/*contactBtn*/
		#gNav ul li.contactBtn a {
				border: none;
				background: none;
		}
		/*fixed*/
		#header.fixed #gNav ul li.contactBtn a {
				border: none;
				background: none;
				color: #ffffff;
		}
		#header.fixed #gNav a::after {
				background: #ffffff;
		}
		#header.fixed #gNav li.has-child ul {
				background: none;
		}
		#header.fixed .openbtn span {
				background-color: #282828;
		}
}