@charset "utf-8";

/*
************************************************************************
* ヘッダー
* @copyright Revolme Inc.
************************************************************************
*/
#header
{
	position:sticky;
	top:0;
	left:0;
	right:0;
}
#header #header-contents
{
	border-bottom:1px solid #e3e3e3;
}
#header #header-contents .header-title
{
	display: flex;
	justify-content: center;
	align-items: center;
	
	height:85px;
	
	background-color:#FFFFFF;
}
#header #header-contents .header-title > *
{
	flex:1 0 33.33333%;
}
#header #header-contents .header-title > .header-logo
{
	flex:0 1 30%;
	text-align:center;
}
#header #header-contents .header-title > .header-logo img
{
	width:189px;
}
#header #header-contents .header-title > .header-contact
{
	line-height:1;
	letter-spacing:0.0em;
	padding-left:40px;
}
#header #header-contents .header-title > .header-contact .tel
{
	font-size:2.6rem;
}
#header #header-contents .header-title > .header-contact .tel .label
{
	font-size:1.8rem;
	letter-spacing:0.1em;
	margin-right:0.25em;
}
#header #header-contents .header-title > .header-contact .time
{
	font-size:1.4rem;
	letter-spacing:0.15em;
}

#header #header-contents .btnMenu
{
	position:absolute;
	top:0;
	right:20px;
	
	width:100px;
	height:85px;
	
	border:0px solid transparent;
	border-radius:0;
	
	background-color:#FFFFFF;
	color:#222222;
}
#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 #222222;
}
#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 #222222;
}
#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 #222222;
}
#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.2rem;
	letter-spacing: 0.3em;
	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.2rem;
	letter-spacing: 0.3em;
}
#header #header-contents .btnMenu:hover > *
{
	opacity:0.7;
}
#header #header-contents .navi
{
	display:none;
	opacity:0.0;
	
	border:20px solid #FFFFFF;
	background-color:rgba(255,255,255,1.0);
	height:100vh;
	
	margin-top:-85px;
}
#header #header-contents.show .navi
{
	display:block;
}
#header #header-contents.hide .navi
{
	display:block;
}
#header #header-contents .navi .navi-contents
{
	position:absolute;
	top:50%;
	left:0;
	right:0;
	
	transform:translateY(-50%);
	
	color:#222222;
}
#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:189px;
	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: flex;
	align-items: center;
	
	color:#222222;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#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.6em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a:before
{
	content:"";
	
	width:0.5em;
	height:1px;
	
	background-color:#bbbbbb;
	
	margin-right:1.0em;
}

#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-large a .main
{
	font-size:1.8rem;
}
#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
{
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	
	width:fit-content;
	padding:0.5em 0em 0.5em 0.0em;
	border-bottom:1px solid #222222;
}
#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:"";
	
	width:18px;
	height:14px;
	
	background-image:url(../../../_img/icon/mail.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	
	margin-right:0.5em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-form li a.reservation:before
{
	content:"";
	
	width:18px;
	height:17px;
	
	background-image:url(../../../_img/icon/reservation.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;

	margin-right:0.5em;
}
/*
#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;
	
	background-image:url(../../../_img/icon/link.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 span
{
	font-size:1.6rem;
	line-height:1;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-col .menu-contact
{
	position:absolute;
	bottom:2.5em;
}
#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 .header-title
	{
		height:18vw;
	}
	#header #header-contents .header-title > *
	{
		flex:0 0 18vw;
	}
	#header #header-contents .header-title > .header-logo
	{
		flex:1 0 auto;
		text-align:center;
	}
	#header #header-contents .header-title > .header-logo img
	{
		width:33vw;
	}
	
	#header #header-contents .header-title > .header-contact
	{
		line-height:1;
		letter-spacing:0.0em;
		padding-left:1vw;
		flex: 0 0 18vw;
	}
	#header #header-contents .header-title > .header-contact .tel
	{
		font-size:2.6rem;
	}
	#header #header-contents .header-title > .header-contact .tel .tel-no
	{
		display:inline-block;
		width:100%;
		height:2.2em;
		
		background-image:url(../../../_img/icon/tel.svg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:5.3vw;
	}
	#header #header-contents .header-title > .header-contact .time
	{
		text-align:center;
		font-size:1.6rem;
		letter-spacing: 0.00em;
	}

	#header #header-contents.show
	{
		background-color:#FFFFFF;
	}
	#header #header-contents .logo
	{
		display:none;
		background-color:#FFFFFF;
	}
	#header #header-contents.show .logo
	{
		display:block;
		position:absolute;
		top:0;
		left:0;
		
		width:calc(70vw);
		
		height:21.33333vw;
	}
	#header #header-contents .btnMenu
	{
		position:absolute;
		top:0;
		right:0;
		
		width:19.33333vw;
		height:18.00000vw;
		
		border:0px solid transparent;
		border-radius:0;
		
		background-color:#FFFFFF;
		color:#222222;
	}
	#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 #222222;
	}
	#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 #222222;
	}
	#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 #222222;
	}
	#header #header-contents .btnMenu > span:nth-child(4)
	{
		position:absolute;
		top:calc(50% + 1.5vw);
		left:0;
		right:0;
		
		width:100%;
		
		text-align:center;
		
		font-size:2.0rem;
		letter-spacing:0.25em;
		
		margin-right:-0.25em;
		padding-left:0.125em;
	}
	#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:1.8rem;
		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:1.8rem;
		padding-left: 0.0em;
	}
	#header #header-contents .navi
	{
		border:0;
		padding:0px;
		background-color:transparent;
		height:calc(100vh - 18.00vw);
		margin:0;
	}
	#header #header-contents.show .navi
	{
		display:block;
		border-top:1px solid #e3e3e3;
	}
	#header #header-contents .navi .navi-contents
	{
		padding-top:0px;
		padding-bottom:0px;
		background-color:#FFFFFF;
		color:#222222;
		overflow-y:scroll;
		height:calc(100vh - 21.33333vw);
	}
	#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: flex-start ;
		
		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: flex;
		align-items: center;
		color:#222222;
	}
	#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:2.0em;
	}
	#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:2.6rem;
	}
	#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
	{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start ;
		
		width:auto;
	}
	#header #header-contents .navi .navi-contents .main-menu .main-menu-col ul.menu-middle li
	{
		margin-right:2em;
	}
	#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;
}
#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;

	margin-bottom:2.0em;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li
{
	margin:0;
	padding:0;
	list-style:none;
	width:33.33333%;
	line-height:1.2;
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li:nth-child(2)
{
	border-left:1px solid #e3e3e3;
	border-right:1px solid #e3e3e3;
}
#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:before
{
	content:"";
	display:inline-block;
	width:100%;
	
	height:2.2em;
	margin-bottom:0.5em;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:5.3vw;
	background-image:url(../../../_img/icon/contact.png);
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li:nth-child(1) a:before
{
	background-image:url(../../../_img/icon/pdf.png);
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li:nth-child(2) a:before
{
	background-image:url(../../../_img/icon/mail.svg);
}
#header #header-contents .navi .navi-contents .main-menu .main-menu-cantact .menu-cantact li:nth-child(3) a:before
{
	background-image:url(../../../_img/icon/reservation.svg);
}

#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;
}
}