@charset "UTF-8";

/*=========================================================================================================
HEADER
=========================================================================================================*/

/*【 HEADER ALL SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■*/
header{
	width: 340px;
	font-family:"ヒラギノ角ゴ ProN W4","游ゴシック体 ミディアム", "メイリオ", Verdana, "sans-serif" ;
	text-align: center;
	box-sizing: border-box;
	background: #FFEBE6;
	
	position: fixed;
	top: 0;
	z-index: 1000;
}
/*■■■■■■■■■■■■■■■■■■■■■【 HEADER ALL SETTING / END 】*/


/*【 LOGO AREA SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■■*/
#MENU{
	width: 100%;
	margin: 0 auto;
	/*
	position: sticky;
	top: 0;
	z-index: 999;
	*/
}
#LOGO a{
	max-width: 280px;
	min-width: 200px;
	margin: 0 auto;
	padding: 25px 15% 20px 15%;
	display: block;
	background: #6B2723;
}
.LGO{
	fill:#FFFFFF;
}
/*■■■■■■■■■■■■■■■■■■■■■■【 LOGO AREA SETTING / END 】*/


/*【 MENU AREA SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width: 1101px) {
/*.【 1st LIST SETTING 】======================================■*/
#MENU_1{
	width: 80%;
	height: 100vh;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
	background: #FFEBE6;
	box-sizing: border-box;	
	z-index: 999;
	
}
#MENU_1 li{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#MENU_1 li a{
	padding: 0;
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	font-weight: bold;
	color:  #6B2723;
	text-align: center;
	text-decoration: none;
	line-height: clamp(3.438rem, 3.324rem + 0.57vw, 3.75rem);
	display: block;
	transition: all 500ms;
	background: #FFEBE6;
	border-bottom: solid 1px #934F4B;
	/*【 VALUES 】min: 16px & max:  18px */
	/*【 VALUES 】min: 55px & max:  60px 	＜line-height＞ */  
	/*【VIEWPORT】min:320px & max:1200px */	
}
/*..《《 1st LIST HOVER SETTING 》》___________________________●*/
#MENU_1 > li:hover > a{
	font-size: clamp(1.25rem, 1.205rem + 0.23vw, 1.375rem);/*
	line-height: clamp(4.063rem, 3.949rem + 0.57vw, 4.375rem);*/
	font-weight: bold;
	border-left: solid 5px #B16D69;
	
	background: #FFE1DC;
	
	transition: 500ms;
	/*【 VALUES 】min: 20px & max:  22px */
	/*【 VALUES 】min: 65px & max:  70px 	＜line-height＞ */  
	/*【VIEWPORT】min:320px & max:1200px */	
}
/*____________________________《《 1st LIST HOVER  / END 》》..●*/

/*..《《 1st ▶︎ SETTING 》》____________________________________●*/
#MENU_1 li ul::before{
	content: "";
	border: 8px solid transparent;
	position: absolute;
    top: clamp(1.25rem, 1.182rem + 0.34vw, 1.438rem);
    left: -30px;
	border-left: 8px solid #6B2723;
	
	transition: all 500ms;
	/*【 VALUES 】min: 17px & max:  22px */
	/*【VIEWPORT】min:320px & max:1200px */	
}
/*...［ 1st ▶︎ HOVER SETTING ］.................................★*/
#MENU_1 > li:hover > ul::before{/*
	top: clamp(1.313rem, 1.222rem + 0.45vw, 1.563rem);*/
	left: -15px;
	border-left: 10px solid #B16D69;
	transition: all 500ms;
	/*【 VALUES 】min: 21px & max:  25px */
	/*【VIEWPORT】min:320px & max:1200px */	
}
/*...........................［ 1st ▶︎ HOVER SETTING / END ］...★*/
/*______________________________《《 1st ▶︎ SETTING / END 》》..●*/
/*================================【 1st LIST SETTING / END 】.■*/


/*.【 2st LIST SETTING 】======================================■*/
#MENU_1 li ul{
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
    top: 0;
    left: 100%;
	}
#MENU_1 li li {
	height: 0;
    opacity: 0;
	text-align: center;
    overflow: hidden;	
	transition: all 500ms;
	}
#MENU_1 li li a{
	padding: 0;
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	color:  #000000;
	text-align: center;
	line-height: clamp(3.438rem, 3.324rem + 0.57vw, 3.75rem);
	text-decoration: none;
	display: block;
	border-bottom: dotted 1px #A7635F;
	background: #FFE1DC;
	position: relative;
	transition: all 500ms;
	box-sizing: content-box;
}
#MENU_1 li li:last-of-type > a{
	border-bottom: solid 8px #A7635F;
	transition: all 500ms;
}
/*..《《 2nd LIST HOVER SETTING 》》___________________________●*/
#MENU_1 li:hover > ul > li,
#MENU_1 li:hover > ul > li > li{
	height: clamp(3.438rem, 3.324rem + 0.57vw, 3.75rem);
	padding: 0 0 0.05em 0;
    overflow: visible;
	border-left: solid 0px;
	opacity: 1;
	transition: all 500ms;
}
#MENU_1 li li a:hover{
	font-size: clamp(1.25rem, 1.205rem + 0.23vw, 1.375rem);
	font-weight: bold;
	box-sizing: border-box;
	border-left: solid 5px #A7635F;
	background: #FFD7D2;
	transition: 500ms;
}
#MENU_1 > li > ul > li:hover > a{
	font-size: clamp(1.25rem, 1.205rem + 0.23vw, 1.375rem);
	border-left: solid 5px #A7635F;
	background: #FFD7D2;
}
/*_____________________《《 2nd LIST HOVER SETTING / END 》》..●*/

/*..《《 2nd ▶︎ SETTING 》》____________________________________●*/
#MENU_1 > li > ul > li > ul::before,
#MENU_1 > li > ul > li > ul > li > ul::before{
    top: clamp(1.313rem, 1.222rem + 0.45vw, 1.563rem);
    border-left: 10px solid #6B2723;
	/*【 VALUES 】min: 21px & max:  25px */
	/*【VIEWPORT】min:320px & max:1200px */	
}
/*...［ 2nd ▶︎ HOVER SETTING ］.................................★*/
#MENU_1 > li > ul > li:hover > ul::before,
#MENU_1 > li > ul > li > ul li:hover > ul::before{
	top: clamp(1.313rem, 1.222rem + 0.45vw, 1.563rem);
	left: -15px;
	border-left: 10px solid #B16D69;
	transition: all 500ms;
	/*【 VALUES 】min: 21px & max:  25px */
	/*【VIEWPORT】min:320px & max:1200px */	
}
/*...........................［ 2nd ▶︎ HOVER SETTING / END ］...★*/
/*______________________________《《 2nd ▶︎ SETTING / END 》》..●*/
/*================================【 2nd LIST SETTING / END 】.■*/


/*.【 3rd LIST SETTING 】======================================■*/
#MENU_1 li li li a{
	background: #FFD7D2;
}
/*..《《 3rd LIST HOVER SETTING 》》___________________________●*/
#MENU_1 li li li:hover a{
	background: #FFCDC8;
}
/*_____________________《《 3rd LIST HOVER SETTING / END 》》..●*/
/*================================【 3rd LIST SETTING / END 】.■*/
/*■■■■■■■■■■■■■■■■■■■■■■【 MENU AREA SETTING / END 】*/


/*【 MENU UNIFORM AREA SETTING 】■■■■■■■■■■■■■■■■■■■■■*/
#UNF{
	display: none;
	}
/*■■■■■■■■■■■■■■■■■■【 MENU UNIFORM AREA SETTING / END 】*/


/*【 LANGUAGE AREA SETTING 】■■■■■■■■■■■■■■■■■■■■■■■*/
#LNG{
	width: 100px;
	height: 20px;
	margin: 70px auto;
	display: flex;
}
#LNG div{
	width: 50px;
	height: 20px;
}
#LNG div a{
	color: #6B2723;
	display: block;
	text-decoration: none;
	/*
	background: red;*/
}
#JP{
	border-bottom: solid 2px #6B2723;
	pointer-events: none;
}
#JP a::before{
	content: "JP";
}
#EN{
	border-bottom: solid 2px #B16D69;
}
#EN a::before{
	content: "EN";
	color: #B16D69;
}

/*.【 LANGUAGE HOVER SETTING 】================================■*/
#EN:hover{
	border-bottom: solid 4px #B16D69;
	transition: all 500ms;
}
#LNG div a:hover::before{
	color: #FFFFFF;
	font-weight: bold;
	-webkit-text-stroke: 3px #B16D69;
	paint-order: stroke; 
	transition: all 500ms;
}
/*==========================【 LANGUAGE HOVER SETTING / END 】.■*/
/*■■■■■■■■■■■■■■■■■■■■【 LANGUAGE AREA SETTING / END 】*/

}
/*=========================================================================================================
HEADER / END
=========================================================================================================*/