@charset "utf-8";


.pcnav {
	display:none;
}

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

#g-nav {
	font-size: 14px;
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:fixed;
	z-index: 999;
	/*ナビのスタート位置と形状*/
	top:0;
	right: -120%;
	width:100%;
	height: 100vh;/*ナビの高さ*/
	background:#fff;
	/*動き*/
	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: 45%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 88%;
}

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

#g-nav ul {
	border-top: 1px solid #598b00;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
#g-nav ul > li {
	width: 50%;
	color: #598b00;
	list-style: none;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid #598b00;
}
#g-nav ul > li:nth-child(1) {
	padding: 16px;
	width: 100%;
}

#g-nav ul > li > a {
	color: #598b00;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 16px;
	position: relative;
	padding-left: 1.2em;
	text-decoration: none;
}
#g-nav ul > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

#g-nav ul li ol {
	padding: 0 6px;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
#g-nav ul li ol li {
	width: 50%;
}
#g-nav ul li ol li a {
	color: #262626;
	padding: 8px;
	display: block;
	position: relative;
	padding-left: 1.2em;
	text-decoration: none;
}
#g-nav ul li ol li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid #262626;
	border-right: 2px solid #262626;
	transform: translateY(-50%) rotate(45deg);
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top: 15px;
	right: 0;
	cursor: pointer;
	width: 60px;
	height:60px;
}
  
/*×に変化*/  
.openbtn1 span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #262626;
	width: 45%;
}

.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%;
}

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

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

@media screen and (min-width: 1100px) {

	.pcnav {
		display:block;
	}
	.spnav {
		display:none;
	}


	/*========= ドロップダウンのためのCSS ===============*/

	/*==ナビゲーション全体の設定*/

	nav#g-nav-pc {
		color: #262626;
		font-weight: bold;
		background:#f1f1f1;
		text-align: center;
	}

	/*ナビゲーションを横並びに*/
	nav#g-nav-pc ul{
		/*2階層目の基点にするためrelativeを指定*/
		position: relative;
		list-style: none;
		display: flex;
		justify-content: center;
	}

	/*2階層目以降は横並びにしない*/
	nav#g-nav-pc ul ul{
		display: block;
	}

	/*ナビゲーションのリンク設定*/
	nav#g-nav-pc ul li a {
		/*矢印の基点にするためrelativeを指定*/
		position: relative;
		display: block;
		text-decoration: none;
		color: #262626;
		padding:20px 35px;
		transition:all .3s;
	}
	nav#g-nav-pc ul li span {
		position: relative;
		display: block;
		text-decoration: none;
		padding: 20px 35px;
		cursor: pointer;
	}

	nav#g-nav-pc ul li li a {
		padding:20px;
	}

	nav#g-nav-pc ul li a:hover{
		color:#598b00; 
	}

	/*==矢印の設定*/

	/*2階層目を持つliの矢印の設定*/

	nav#g-nav-pc ul li.has-child > span::before{
		content:'';
		position: absolute;
		left:15px;
		top:25px;
		width:6px;
		height:6px;
		border-top: 2px solid #598b00;
		border-right:2px solid #598b00;
		transform: rotate(135deg);
	}

	/*==2階層目以降の画像設定*/

	nav#g-nav-pc ul li.has-child img{
		max-width: 90%;
		height: auto;
		transition: all .5s;
		vertical-align: bottom;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	/*hoverしたら画像拡大*/
	nav#g-nav-pc ul li.has-child img:hover{
		transform: scale(1.2);
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	nav#g-nav-pc ul li.has-child dt{
		overflow: hidden;
		margin: 0 0 6px 0;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	/*== 2層目の設定 */

	nav#g-nav-pc li.has-child ul{
		/*絶対配置で位置を指定*/
		position: absolute;
		left:10%;
		top:58px;
		z-index: 4;
		/*子要素を横並びに*/
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		/*形状を指定*/
		background:#edfcd2;
		width:80%;
		/*はじめは非表示*/
		display: none;
		visibility: hidden;
		opacity: 0;
		/*アニメーション設定*/
		transition: all .3s;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	/*hoverしたら表示*/
	nav#g-nav-pc li.has-child:hover > ul{
		visibility: visible;
		opacity: 1;
		display: flex;
	}

	/*各ナビゲーション横幅*/
	nav#g-nav-pc li.has-child ul li{
		width:20%;
	}

	/*ナビゲーションaタグの形状*/
	nav#g-nav-pc li.has-child ul li a {
		color: #598b00;
	}

	nav#g-nav-pc li.has-child ul li a:hover,
	nav#g-nav-pc li.has-child ul li a:active{
		background: #edfcd2;
	}


}