@charset "utf-8";

#header
{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index: 9;
}
#header #header-contents .btnMenu
{
	position:absolute;
	top:0;
	right:20px;
	
	width:100px;
	height:120px;
	
	border:0px solid transparent;
	border-radius:0;
	
	background-color:#000000;
	color:#FFFFFF;
}
#header #header-contents .btnMenu > span
{
	display:block;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#header #header-contents .btnMenu > span:nth-child(1)
{
	position:absolute;
	top:calc(50% - 22px);
	left:25px;
	right:25px;
	
	height:0;
	width:auto;
	border-bottom:1px solid #FFFFFF;
}
#header #header-contents .btnMenu > span:nth-child(2)
{
	position:absolute;
	top:calc(50% - 12px);
	left:25px;
	right:25px;
	
	height:0;
	width:auto;
	border-bottom:1px solid #FFFFFF;
}
#header #header-contents .btnMenu > span:nth-child(3)
{
	position:absolute;
	top:calc(50% - 2px);
	left:25px;
	right:25px;
	
	height:0;
	width:auto;
	border-bottom:1px solid #FFFFFF;
}
#header #header-contents .btnMenu > span:nth-child(4)
{
	position:absolute;
	top:calc(50% + 0px);
	left:20px;
	right:20px;
	
	width:auto;
	
}
#header #header-contents.show .btnMenu > span:nth-child(1){transform:rotate(35deg);top:calc(40%);}
#header #header-contents.show .btnMenu > span:nth-child(2){opacity:0.0;}
#header #header-contents.show .btnMenu > span:nth-child(3){transform:rotate(-35deg);top:calc(40%);}
#header #header-contents .btnMenu .lbl-menu{
display: inline;
    font-size: 1.0rem;
    letter-spacing: -0.2em;
    padding-left: 0.3em;
}
#header #header-contents .btnMenu .lbl-close{
	display:none;
}
#header #header-contents.show .btnMenu .lbl-menu{
	display:none;
}
#header #header-contents.show .btnMenu .lbl-close{
display: inline;
    font-size: 1.0rem;
    letter-spacing: -0.2em;
}
#header #header-contents .btnMenu:hover > *
{
	opacity:0.7;
}
#header #header-contents .navi
{
	display:none;
	opacity:0.0;
	
	/*
	padding:20px;
	background-color:#FFFFFF;
	*/
	border:20px solid #FFFFFF;
	background-color:rgba(0,0,0,0.9);
	height:100vh;
	/*
	transition-duration:0.3s;
	transition-property:opacity;
	transition-timing-function:ease;
	*/
}
#header #header-contents.show .navi
{
	display:block;
}
#header #header-contents.hide .navi
{
	display:block;
}
#header #header-contents .navi .navi-contents
{
	position:absolute;
	/*position:relative;*/
	top:50%;transform:translateY(-50%);
	left:0;
	right:0;
	color:#FFFFFF;
}
#header #header-contents .navi .navi-contents .main-menu
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center ;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col
{
	width:280px;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col.main-menu-logo img
{
	width:300px;
	height:auto;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul
{
	margin:0;
	padding:0;
	list-style:none;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li
{
	margin:0;
	padding:0;
	list-style:none;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li a
{
	display:block;
	color:#FFFFFF;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
	text-decoration: none;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li a:hover
{
	text-decoration:none;
	opacity:0.6;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li a > span
{
	display:block;
	line-height:1;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a
{
	margin-bottom:2.0em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a .main
{
	font-size:2.0rem;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a .sub
{
	margin-top:0.5em;
	font-size:1.2rem;
	color:#777777;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-middle a
{
	margin-bottom:2.0em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-middle a .main
{
	font-size:1.4rem;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form
{
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li
{
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a
{
	width:140px;
	padding:1em 1em 0.8em 1.7em;
	border-bottom:1px solid #FFFFFF;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a.reservation
{
	margin-top:0.3em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a.contact:before
{
	content:"";
	
	position:absolute;
	top:54%;
	left:3px;
	
	transform:translateY(-50%);
	
	width:18px;
	height:14px;
	
	background-image:url(../../../_img/icon/mail.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a.reservation:before
{
	content:"";
	
	position:absolute;
	top:54%;
	left:5px;
	
	transform:translateY(-50%);
	
	width:17px;
	height:17px;
	
	background-image:url(../../../_img/icon/reservation.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a:after
{
	content:"";
	
	position:absolute;
	top:55%;
	right:5px;
	
	transform:translateY(-50%);
	
	width:12px;
	height:10px;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a span
{
	font-size:1.4rem;
	line-height:1;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-contact
{
	position:absolute;
	bottom:2.0em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .contact
{
	line-height:1;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .contact .label
{
	font-size:1.6rem;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .contact .tel-no
{
	font-size:2.4rem;
	letter-spacing: 0.1em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .reception
{
	margin-top:0.2em;
	line-height:1;
	color:#777777;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .reception .label
{
	font-size:1.2rem;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .reception .time
{
	font-size:1.4rem;
}
#header #header-contents .navi .sub-menu
{
	position:absolute;
	bottom:40px;
	left:0;
	right:0;
}
#header #header-contents .navi .sub-menu ul
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	
	margin:0;
	padding:0;
	list-style:none;
}
#header #header-contents .navi .sub-menu ul li
{
	margin:0 20px;
	padding:0;
	list-style:none;
}
#header #header-contents .navi .sub-menu ul li a
{
	font-size:1.4rem;
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#header #header-contents .navi .sub-menu ul li a:hover
{
	text-decoration:none;
	opacity:0.6;
}

@media screen and (max-width:767px) {
#header #header-contents .navi .navi-contents
{
	/*position:absolute;*/
	position:relative;
	top:unset;transform:unset;
	left:0;
	right:0;
	color:#FFFFFF;
}
	#header #header-contents .logo
	{
		display:none;
		/*background-color:#460e25;*/
	}
	#header #header-contents.show .logo
	{
		display:block;
		position:relative;/*absolute*/
		top:0;
		left:0;
		
		width:calc(100vw - 19.33333vw);
		
		height:24vw;
		
		padding: 2vw 6vw;
		text-align: center;
	}
	#header #header-contents .btnMenu
	{
		position:absolute;
		top:0;
		right:0;
		
		width:19.33333vw;
		height:24vw;
		
		border:0px solid transparent;
		border-radius:0;
		
		background-color:#000000;
		color:#FFFFFF;
	}
	#header #header-contents .btnMenu > span
	{
		display:block;
		
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}
	#header #header-contents .btnMenu > span:nth-child(1)
	{
		position:absolute;
		top:calc(50% - 4.5vw);
		left:4.66666vw;
		right:4.66666vw;
		
		height:0;
		width:auto;
		border-bottom:1px solid #FFFFFF;
	}
	#header #header-contents .btnMenu > span:nth-child(2)
	{
		position:absolute;
		top:calc(50% - 2.5vw);
		left:4.66666vw;
		right:4.66666vw;
		
		height:0;
		width:auto;
		border-bottom:1px solid #FFFFFF;
	}
	#header #header-contents .btnMenu > span:nth-child(3)
	{
		position:absolute;
		top:calc(50% - 0.5vw);
		left:4.66666vw;
		right:4.66666vw;
		
		height:0;
		width:auto;
		border-bottom:1px solid #FFFFFF;
	}
	#header #header-contents .btnMenu > span:nth-child(4)
	{
		position:absolute;
		top:calc(50% + 1.5vw);
		left:4.66666vw;
		right:4.66666vw;
		
		width:auto;
		
		font-size:2.0rem;
		letter-spacing:0.25em;
	}
	#header #header-contents.show .btnMenu > span:nth-child(1){transform:rotate(35deg);top:calc(45%);}
	#header #header-contents.show .btnMenu > span:nth-child(2){opacity:0.0;}
	#header #header-contents.show .btnMenu > span:nth-child(3){transform:rotate(-35deg);top:calc(45%);}
	#header #header-contents .btnMenu .lbl-menu{
		display:inline;
		font-size:2.0rem;
		padding-left: 0.0em;
	}
	#header #header-contents .btnMenu .lbl-close{
		display:none;
	}
	#header #header-contents.show .btnMenu .lbl-menu{
		display:none;
	}
	#header #header-contents.show .btnMenu .lbl-close{
		display:inline;
		font-size:2.0rem;
		padding-left: 0.0em;
	}
	#header #header-contents .navi
	{
		border:0;
		
		top:23vw;
		padding:0px;
		background-color:transparent;
		
		/*height:calc(100vh - 23vw);*/
	}
	#header #header-contents.show .navi
	{
		display:block;
	}
	#header #header-contents .navi .navi-contents
	{
		padding-top:0px;
		padding-bottom:0px;
		background-color:rgba(0,0,0,0.9);
		color:#FFFFFF;
		/*overflow-y:scroll;*/
		/*height:calc(100vh - 71vw);calc(100vh - 24vw)*/
	}
	#header #header-contents .navi .navi-contents .main-menu
	{
		flex-wrap: wrap;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col
	{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center ;
		
		width:100%;
		
		padding:0vw 6vw;
		margin-bottom:1em;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul
	{
		width:50%;
		margin:0;
		padding:0;
		list-style:none;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li
	{
		margin:0;
		padding:0;
		list-style:none;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li a
	{
		display:block;
		color:#FFFFFF;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul li a:hover
	{
		text-decoration:none;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a
	{
		margin-bottom:1.8em;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-large li a > span
	{
		display:block;
		line-height:1;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a .main
	{
		font-size:3.0rem;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a .sub
	{
		margin-top:0.5em;
		font-size:2.0rem;
		color:#777777;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-middle a
	{
		margin-bottom:1.6em;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-middle a .main
	{
		font-size:2.0rem;
	}
	
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact
{
	width:100%;
	padding:3vw 0;
	margin-bottom:2em;
	border-bottom:1px solid #868480;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center ;
	
	margin:0;
	padding:0;
	list-style:none;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li
{
	margin:0;
	padding:0;
	list-style:none;
	/*width:33.33333%;*/
	width:50%;
	line-height:1;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li:nth-child(2)
{
	border-left:1px solid #868480;
	/*border-right:1px solid #868480;*/
}
	
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li a
{
	display:block;
	padding:2vw 0 3vw 0;
	text-align:center;
}

#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li a .main
{
	font-size:2.4rem;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li a .sub
{
	font-size:1.8rem;
}
}