@charset "UTF-8";
@media screen and (max-width: 1100px) {
/*=========================================================================================================
HEADER 【 SMART PHONE 】
=========================================================================================================*/

/*《 LOGO SCREEN SIZE SETTING 》□□□□□□□□□□□□□□□□□□□□□□□□□□*/
@media screen  and (min-width: 320px) and (max-width: 819px){
	#LOGO a{
		width: 50%;
		max-width: 300px;
		min-width: 170px;
		margin: 3px 0 0 0;
		padding: 0;
		box-sizing: border-box;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}
@media screen and (min-width: 820px) and (max-width: 1100px){
	#LOGO a{
		width: 50%;
		max-width: 300px;
		min-width: 170px;
		margin: 3px 0 0 0;
		padding: 0;
		box-sizing: border-box;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}
/*□□□□□□□□□□□□□□□□□□□□□□□《 LOGO SCREEN SIZE SETTING / END 》*/


/*【 HEADER ALL SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■*/
header{
	width: 100%;/*
	max-width: auto;
	min-width: 100%;*/
	
	height: 60px;
	background: #6B2723;
	position: fixed;
	z-index: 1000;
	}
	
/*■■■■■■■■■■■■■■■■■■■■■【 HEADER ALL SETTING / END 】*/


/*【 LOGO AREA SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■■*/
#MENU{
	width: 100%;
	margin: 0 auto;
}

.LGO{
	fill:#FFFFFF;
}
/*■■■■■■■■■■■■■■■■■■■■■■【 LOGO AREA SETTING / END 】*/


/*【 MENU AREA SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*.【 MENU BOTTON SETTING 】===================================■*/
#MENU_BTN{
	width: 70px;
	height: 60px;
	border-radius: 5px;
	cursor: pointer;
	overflow: hidden;
	background: rgba(0,0,0,0);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	transition: all 300ms;
	}
#BTN{
	width: 40px;
	height: 5px;
	border-radius: 5px;
	position: absolute;
	top: 48%;
	left: 23%;
	background: #FFFFFF;
	transition: all 300ms;
	}
#BTN::before,
#BTN::after{
	content: "";
	width: 40px;
	height: 5px;
	border-radius: 5px;
	position: absolute;
	left: 0;
	z-index: 1;
	background: #FFFFFF;
	transition: all 300ms;
	}
#BTN::before{
	content: "MENU";
	font-family:Arial, Helvetica, "sans-serif";
	font-size: 12px;
	line-height: 10px;
	letter-spacing: 0.15em;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	top: -16px;
	background: none;
	}
#BTN::after{
	top: 12px;
	}
/*..《 BOTTON MOVE SETTING 》__________________________________●*/
#MENU_BTN.ON{
	background: rgba(255,130,130,0.6);
	transition: all 300ms;
	}
#BTN.ON{
	background: #FFFFFF;
	top: 35px;
	transform: rotate(45deg);
	transition: all 300ms;
	}
#BTN.ON::before{
	content: "CLOSE";
	top: -15px;
	left: -22px;
	transform: rotate(-45deg);
	background: none;
	}
#BTN.ON::after{
	transform: rotate(-90deg) translate(12px,0);
	}
/*____________________________《 BOTTON MOVE SETTING / END 》..●*/
/*=============================【 MENU BOTTON SETTING / END 】.■*/


/*.【 CLOSED BACK SHADOW 】====================================■*/
#SDW {
	width: 100%;
    height: 100vh;
    display: none;
    position: fixed;
    top: 60px;
    right: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5);
	transition: ease-out 500ms;
    }
/*..《 CLOSED BACK SHADOW【MOVE】SETTING 》____________________●*/
#SDW.MOVE{
    display: block;
    overflow: hidden;
	backdrop-filter: blur(3px);
	transition: ease-in-out 500ms;
	}
/*______________《 CLOSED BACK SHADOW【MOVE】SETTING / END 》..●*/
/*==============================【 CLOSED BACK SHADOW / END 】.■*/


/*.【 1st MENU AREA SETTING 】=================================■*/
#MENU_1 {
    width: 100%;
    max-width: 300px;
    height: 100%;
    padding: 10px 0 0 0;
	display: inline;
	background: #FFEBE6;
	background-size: 200%;
	background-repeat: repeat-y;
	position: fixed;
    top: 60px;
    right: 0px;
    z-index: 99;
    transition: 0.3s ease-in-out;
    transform: translateX(105%);
    -webkit-transform: translateX(105%);
	
	overflow-y: scroll;
	box-sizing: border-box;
	}
/*..《 1st MENU SLIDE【MOVE】SETTING 》________________________●*/
#MENU_1.Slide{
	transform: translateX(0%);
	transition: 0.3s ease-in-out;
	}
#MAIN.blur{
	filter: blur(0px);
	transition: all 300ms;
	overflow: visible;
	}
/*__________________《 1st MENU SLIDE【MOVE】SETTING / END 》..●*/


/*..《 1st MENU LIST SETTING 》________________________________●*/
#MENU_1 li a{
	padding: 0px 0.5em;
	color: #934F4B;
	display: block;
	text-decoration: none;
	font-weight: bold;
	box-sizing: border-box;
	position: relative;
	}
#MENU_1 > li{
	width: 90%;
	margin: 0 auto;
	padding: 5px 0;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
	color: #FFFFFF;
	line-height: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);
	display: block;
	border-bottom: solid 2px #934F4B;
	box-sizing: border-box;
	position: relative;
	/*【 VALUES 】min: 16px & max:  20px */
	/*【 VALUES 】min: 40px & max:  50px 	＜line-height＞ */  
	/*【VIEWPORT】min:320px & max:1200px */
}
/*__________________________《 1st MENU LIST SETTING / END 》..●*/
/*===========================【 1st MENU AREA SETTING / END 】.■*/


/*.【 2nd_3rd MENU PULL DOWN BOTTON SETTING 】=================■*/
.js_2,.js_3{
	width: clamp(2.188rem, 2.074rem + 0.57vw, 2.5rem);
	height: clamp(2.188rem, 2.074rem + 0.57vw, 2.5rem);
	color: #FFFFFF;
	line-height: clamp(2.5rem, 2.273rem + 1.14vw, 3.125rem);
	border-radius: 10px;
	position: absolute;
	top: clamp(0.5rem, 0.477rem + 0.11vw, 0.563rem);
	right: 0;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	background: rgba(147,79,75,0.5);
	/*【 VALUES 】min:  8px & max:   9px  ＜top＞*/
	/*【 VALUES 】min: 35px & max:  40px  ＜widht & height＞*/
	/*【 VALUES 】min: 40px & max:  50px 	＜line-hight＞ */  
	/*【VIEWPORT】min:320px & max:1200px */
}
.js_3{
	top: 5px;
	}
	
/*..《 2nd_3rd MENU PULL DOWN BOTTON ▲ SETTING 》_____________●*/
.js_2::before,.js_2::after,
.js_3::before,.js_3::after{
	content: "";
	border: clamp(0.375rem, 0.307rem + 0.34vw, 0.563rem) solid transparent;
    position: absolute;
	left: 12px;
	transition: all 300ms;
	/*【 VALUES 】min:  6px & max:   9px  ＜border＞*/
	/*【VIEWPORT】min:320px & max:1200px */
	}
.js_2::before,.js_3::before{
	transform: translateY(0) rotate(135deg);
	border-top: clamp(0.375rem, 0.307rem + 0.34vw, 0.563rem) solid #934F4B;
	}
.js_2::after,.js_3::after{
	transform: translateY(0) rotate(-135deg);
	border-top: clamp(0.375rem, 0.307rem + 0.34vw, 0.563rem) solid #934F4B;
	}
/*...［ 2nd_3rd MENU PULL DOWN BTN ▲【MOVE】SETTING ］........★*/
.js_2.TAG::before,.js_3.TAG::before{
	transform: translateY(23px) rotate(45deg);
	}
.js_2.TAG::after,.js_3.TAG::after{
	transform: translateY(23px) rotate(-45deg);
	}
/*..［ 2nd_3rd MENU PULL DOWN BTN ▲【MOVE】SETTING / END ］...★*/
/*_______《 2nd_3rd MENU PULL DOWN BOTTON ▲ SETTING / END 》..●*/
/*===========【 2nd_3rd MENU PULL DOWN BOTTON SETTING / END 】.■*/


/*.【 2nd_3rd MENU AREA SETTING 】=============================■*/
.MENU_2,.MENU_3{
	width: 95%;
	margin: 0 0 10px 0;
	padding: 0;
	position: relative;
	left: 5%;
	background: rgba(255,255,255,0.6);
	border-top: dotted 3px #C5827D;
	border-left: solid 2px #C5827D;
	border-bottom: solid 5px #C5827D;
	display: none;
	}
.MENU_3{
	background: rgba(255,255,255,0.6);
	border-top: dotted 3px #D9A09B;
	border-left: solid 2px #D9A09B;
	border-bottom: solid 5px #D9A09B;
	}

/*..《 2nd 3rd MENU LIST SETTING 》____________________________●*/
.MENU_2 > li,
.MENU_3 > li{
	width: 95%;
	font-size: 20px;
	line-height: 20px;
	display: block;
	margin: 0 auto;
	
	position: relative;
	border-bottom: dotted 2px #C5827D;
	}
.MENU_2 > li:last-child,
.MENU_3 > li:last-child{
	border-bottom: none;
	}
.MENU_2 > li a{
	height: 50px;
	line-height: 50px;
	}
.MENU_3 > li a{ 
	height: 40px;
	line-height: 40px;
	}
/*______________________《 2nd 3rd MENU LIST SETTING / END 》..●*/
/*=======================【 2nd_3rd MENU AREA SETTING / END 】.■*/

/*.【 MENU AREA〈UNIFORM〉SETTING 】===========================■*/
#UNF{
	width: 90%;
	margin: 50px auto;
	padding: 0 10px;
	display: block;
	box-sizing: border-box;
	background: #FFFFFF;
	position: relative;
	}
#UNF div{
	border-bottom: dotted 2px #8E7062;
	}
#UNF div:last-child{
	border-bottom: none;
	}
#UNF div a{
	font-size: 14px;
	line-height: 40px;
	text-decoration: none;
	display: block;
	color: #595757;
	}

/*..《《 LINK SVG SETTING 》》_________________________________●*/	
#UNF span > svg{
	width: 16px;
	/*【 VALUES 】min: 18px & max:  20px */
	/*【VIEWPORT】min:320px & max:1200px */
	}
.LNK_B{
	fill: #595757;
	}
/*___________________________《《 LINK SVG SETTING / END 》》..●*/
/*=====================【 MENU AREA〈UNIFORM〉SETTING / END 】.■*/


/*.【 LANGUAGE AREA SETTING 】=================================■*/
#LNG{
	width: 100px;
	height: 100px;
	margin: 0 auto;
	padding: 50px 0;
	display: flex;
}
#LNG div{
	width: 50px;
	height: 20px;
}
#LNG div a{
	color: #6B2723;
	display: block;
	text-decoration: none;
}
#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 AREA SETTING / END 】.■*/
/*■■■■■■■■■■■■■■■■■■■■■■【 MENU AREA SETTING / END 】*/

}
/*=========================================================================================================
HEADER 【 SMART PHONE 】/ END
=========================================================================================================*/