@charset "utf-8";
/* # =================================================================
#### 多階層メニュー
# ================================================================= */
nav.global{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #FFF;
	line-height : 1;
}
nav.global.fixed{
	position : fixed;
	top : 0;
	left : 0;
	padding-top : 20px;
	box-shadow : 0 4px 0 #00000014;
	z-index : 1000;
}
/* 最上階 */
.global .menu{
	position : relative;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-ms-flex-wrap : wrap;
	flex-wrap : wrap;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	width : 100%;
	height : auto;
	margin : 0 auto;
}
.global .menu > li{
	position : relative;
	width : auto;
	height : auto;
	cursor : pointer;
}
.global .menu > li:hover{
	transition : all .5s;
}
.global .menu > li::after{
	content : "";
	position : absolute;
	display : block;
	width : 1px;
	height : 25px;
	margin : auto auto;
	top : 5px;
	right : 0;
	bottom : 0;
	left : auto;
	border-right : 1px solid  var(--key-color);
}
.global .menu > li:last-child::after{
	content : none;
}
.global .menu > li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	padding : 0 25px 20px;
}
.global .menu > li a img{
	position : relative;
	display : block;
	width : 36px;
	height : 36px;
	margin : 0 auto 15px;
}
.global .menu > li a p{
	font-size : var(--17px);
	font-weight : bold;
	transition : all .5s;
}
.global .menu > li a:hover p{
	color : var(--key-color);
	transition : all .5s;
}
/* 単階層 */
.global .menu > li > ul{
	position : absolute;
	top  : 88px;
	left  : 50%; /* 親の真ん中を起点にする */
	right : auto;
	bottom : auto;
	margin : auto auto;
	width : 300px;
	background-color : #FFF;
	border-radius : 15px;
	border : 4px solid  var(--key-color);
	padding : 30px;
	pointer-events: none;
	transform : translateX(-50%) scaleY(0);
	transform-origin : center top;
	transition : all .3s;
	z-index : 100;
}
.global .menu > li:hover > ul{
	pointer-events : auto;
	transform : translateX(-50%) scaleY(1);
}
.global .menu > li > ul::before{
	content : "";
	position : absolute;
	bottom : 100%;
	left : 50%;
	transform : translateX(-50%);
	border : 15px solid transparent;
	border-bottom : 20px solid  var(--key-color);
}
.global .menu > li > ul::after{
	content : "";
	position : absolute;
	bottom : 100%;
	left : 50%;
	transform : translateX(-50%);
	border : 15px solid transparent;
	border-bottom : 20px solid #FFF;
	margin-bottom : -6px; 
}
.global .menu > li > ul > li{
	position : relative;
	margin-bottom :20px;
}
.global .menu > li > ul > li:last-child{
	margin-bottom : 0;
}
.global .menu > li > ul > li a{
	text-align : justify;
	font-size : var(--15px);
	font-weight : bold;
	padding : 0;
	padding-left : 1em;
}
.global .menu > li > ul > li a:hover{
	color : var(--key-color);
}
.global .menu > li > ul > li a:before{
	content : "";
	position : absolute;
	top : 0;
	bottom : 0;
	left : 0;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-top : 5px solid transparent;
	border-bottom : 5px solid transparent;
	border-left : 8px solid  var(--key-color);
}
/* # =================================================================
#### drawer button（SP用ハンバーガー）
# ================================================================= */
.drawer-hamburger{
	position : fixed;
	box-sizing : border-box;
	top : 0;
	right : 0;
	width : 60px;
	height : 60px;
	border-radius : 0 0 0 20px;
	border : 2px solid var(--key-color);
	background-color : var(--key-color);
	padding : 0 15px;
	cursor : pointer;
	z-index : 1100;
}
.drawer-hamburger:hover{

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

/* 開閉時アニメーション */
.drawer-hamburger.is-active .drawer-hamburger-icon{
	background-color : transparent;
}
.drawer-hamburger.is-active .drawer-hamburger-icon::before{
	transform : translateY(10px) rotate(45deg);
}
.drawer-hamburger.is-active .drawer-hamburger-icon::after{
	transform : translateY(-10px) rotate(-45deg);
}
/* 開いた時 body スクロール禁止 */
.drawer-open{
	overflow : hidden;
	position : fixed;
	width : 100%;
}

/* # =================================================================
#### drawer-nav menu（SPメニュー本体）
# ================================================================= */
.drawer-nav{
	position : fixed;
	top : 72.37px;
	right : 0;
	width : 100%;
	height : calc(100% - 72.37px); 
	background : #F5F3EB;
	transform : translateX(100%);
	transition : transform 0.3s ease;
	padding : 30px;
	z-index : 1000;
	overflow-y : auto; 
}
.drawer-nav.is-active{
	transform : translateX(0);
}
.drawer-nav .drawer-menu{
	list-style : none;
	background-color : #FFF;
	border-radius : 15px;
	margin : 0;
}
.drawer-nav .drawer-menu li{
	position : relative;
}
.drawer-nav .drawer-menu li.single-layer::after{
	content : "";
	position : absolute;
	top : 0;
	bottom : 0;
	left : auto;
	right : 40px;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-top : 6px solid transparent;
	border-bottom : 6px solid transparent;
	border-left : 9px solid  var(--key-color);
}
.drawer-nav .drawer-menu li a{
	position : relative;
	display : block;
	color : var(--font-color);
	font-size : var(--16px);
	font-weight : bold;
	text-decoration : none;
	padding : 20px 30px;
	border-bottom : 1px solid #EFF2F4;
}
.drawer-nav ul li a:hover{

}
/* # =================================================================
#### アコーディオン
# ================================================================= */
/* コンテナ */
.accordion{
	width : 100%;
	overflow : hidden;
	border-bottom : 1px solid #EFF2F4;
}
/* ヘッダー */
.accordion-header{
	width : 100%;
	color : var(--font-color);
	font-size : var(--16px);
	font-weight : bold;
	cursor : pointer;
	position : relative;
	transition : background 0.3s;
	text-align : left;
	border : none;
	background : #FFF;
	padding : 20px 30px;
}
.accordion-header::before{
	content : "";
	position : absolute;
	right : 38px;
	top : 50%;
	width : 15px;
	height : 3px;
	background-color : var(--key-color);
	transform : translateY(-50%);
	transition : all 0.3s ease;
}
.accordion-header::after{
	content : "";
	position : absolute;
	right : 44.5px; /* (15pxの幅の中心に合わせる) */
	top : 50%;
	width : 3px;
	height : 15px;
	background-color : var(--key-color);
	transform : translateY(-50%);
	transition : all 0.3s ease;
}
.accordion-header.active::before{

}
.accordion-header.active::after{
	transform : translateY(-50%) rotate(90deg);
	opacity : 0;
}
/*  */
.drawer-nav .drawer-menu  .accordion-content a{
	padding : 0 0 0 1.2em;
	border-bottom : none;
	font-size : var(--13px);
	font-weight : normal;
}
.drawer-nav .drawer-menu .accordion-content a::before{
	content : "";
	position : absolute;
	top : 0;
	bottom : 0;
	left : 0;
	right : auto;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-top : 5px solid transparent;
	border-bottom : 5px solid transparent;
	border-left : 8px solid  var(--key-color);
}
/* コンテンツ */
.accordion-content{
	max-height : 0;
	overflow : hidden;
	transition : max-height 0.4s ease,opacity 0.3s ease;
	opacity : 0;
}
.accordion-content li{
	padding : 0 30px 0;
	margin-bottom : 15px;
}
.accordion-content li:last-child{
	margin-bottom : 20px;
}
.accordion-content.open{
	opacity : 1;
}


/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){
.drawer-nav .drawer-menu{
	width : 70%;

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

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.drawer-nav .drawer-menu{
	width : 80%;
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.drawer-nav .drawer-menu{
	width : 100%;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){
.drawer-nav .drawer-menu li a{
	padding : 15px 15px;
}
.accordion-header{
	padding : 15px 15px;
}
.accordion-content li{
	padding : 0 15px 0;
}
.drawer-nav .drawer-menu li.single-layer::after{
	right : 20px;
}
.accordion-header::before{
	right : 18px;
}
.accordion-header::after{
	right : 23.5px;
}

}/*** 320px ***/