@charset "utf-8";
/* # =================================================================
#### 多階層メニュー（PC用）
# ================================================================= */

/* 最上階 */
.global .menu{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : start;
	-ms-flex-pack : start;
	justify-content : flex-start;
	width : 100%;
	height : auto;
	margin : 0 auto;
}
.global .menu > li{
	position : relative;
	width : auto;
	height : auto;
	background : rgb(29, 33, 19);
}
.global .menu > li:hover{
	background : #072A24;
	-webkit-transition : all .5s;
	transition : all .5s;
}
.global .menu > li a{
	display : block;
	color : #fff;
	padding : 10px 20px;
	text-decoration : none;
}
.global .menu > li a:hover{
	color : #999;
}

/* 単階層（ドロップダウン） */
.global .menu > li > ul{
	position : absolute;
	top : 100%;
	left : 0;
	width : 100%;
	background : #072A24;
	pointer-events : none;
	transform : scaleY(0);
	transform-origin : center top;
	transition : all .3s;
	z-index : 1;
}
.global .menu > li:hover > ul{
	transform : scaleY(1);
	pointer-events : auto;
}
.global .menu > li > ul > li{
	position : relative;
	border-top : 1px solid #111;
}
.global .menu > li > ul > li:hover{
	background : #111;
}
.global .menu > li > ul > li a:hover{
	background : #111;
}

/* 2階層 */
.global .menu > li > ul > li > ul{
	visibility : hidden;
	opacity : 0;
}
.global .menu > li > ul > li > ul{
	position : absolute;
	top : -1px;
	left : 100%;
	width : 100%;
	background : #111;
	transition : all .2s ease;
}
.global .menu > li > ul > li:hover > ul{
	visibility : visible;
	opacity : 1;
}
.global .menu > li > ul > li > ul > li{
	position : relative;
	border-top : 1px solid #111;
}
.global .menu > li > ul > li > ul > li:hover{
	background : #2a1f1f;
}
.global .menu > li > ul > li > ul > li a:hover{
	background : #2a1f1f;
}

/* 3階層 */
.global .menu > li > ul > li > ul > li > ul{
	visibility : hidden;
	opacity : 0;
}
.global .menu > li > ul > li > ul > li > ul{
	position : absolute;
	top : -1px;
	left : 100%;
	width : 100%;
	background : #2a1f1f;
	transition : all .2s ease;
}
.global .menu > li > ul > li > ul > li:hover > ul{
	visibility : visible;
	opacity : 1;
}
.global .menu > li > ul > li > ul > li > ul > li{
	position : relative;
	border-top : 1px solid #111;
}
.global .menu > li > ul > li > ul > li > ul > li:hover{
	background : #2a1f1f;
}
.global .menu > li > ul > li > ul > li > ul > li a:hover{
	background : #1d0f0f;
}

/* # =================================================================
#### drawer button（SP用ハンバーガー）
# ================================================================= */
.drawer-hamburger{
	position : absolute;
	box-sizing : border-box;
	top : 0;
	right : 0;
	width : 60px;
	height : 68px;
	background-color : #C8BB9B;
	padding : 10px 15px;
	cursor : pointer;
	z-index : 1100;
	border : none;
}
.drawer-hamburger:hover{
	background-color : #C8BB9B;
}

/* ハンバーガー3本線 */
.drawer-hamburger-icon{
	position : relative;
	display : block;
	width : 30px;
	height : 3px;
	background-color : #575757;
	transition : all 0.3s ease;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
	content : "";
	position : absolute;
	left : 0;
	width : 30px;
	height : 3px;
	background-color : #575757;
	transition : all 0.3s ease;
}
.drawer-hamburger-icon::before{ top : -8px; }
.drawer-hamburger-icon::after { top :  8px; }

/* 開閉時アニメーション */
.drawer-hamburger.is-active .drawer-hamburger-icon{
	background-color : transparent;
}
.drawer-hamburger.is-active .drawer-hamburger-icon::before{
	transform : translateY(8px) rotate(45deg);
}
.drawer-hamburger.is-active .drawer-hamburger-icon::after{
	transform : translateY(-8px) rotate(-45deg);
}
/* 開いた時 body スクロール禁止
.drawer-open{
	overflow : hidden;
}
/* # =================================================================
#### drawer-nav menu（SPメニュー本体）
# ================================================================= */
body.drawer-open{
	overflow : hidden;
	height : 100vh; /* 画面の高さに固定 */
	position : fixed; /* iOSなどで確実に止める場合 */
	width : 100%;
}
.drawer-nav{
	position : fixed;
	top : 0;
	right : 0;
	width : 100%;
	height : 100%;
	background : #000000CC;
	transform : translateY(-100%);
	transition : transform 0.3s ease;
	overflow-y : auto; 
	-webkit-overflow-scrolling : touch;
	z-index : 1000;
}
.drawer-nav.is-active{
	transform : translateY(0);
}
.drawer-nav .nav_wrap{
	padding : 60px 20px;
}
.drawer-nav ul{
	list-style : none;
	text-align : center;
	margin : 0;
	padding : 45px 0 0;
}
.drawer-nav ul li{
	margin-bottom : 20px;
}
.drawer-nav ul li a{
	display : block;
	padding : 12px 10px;
	color : #FFF;
	font-size : var(--20px);
	text-decoration : none;
}
.drawer-nav ul li a:hover{

}


/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){

}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){

}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){

}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/