@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;400;700&family=Noto+Serif+JP:wght@300;500;700&display=swap');


/* reset */
/* -------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
html {width:100%; height:100%; overflow-y:scroll;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:bold;}
p, ul, ol, dl, address, blockquote, table, div {font-size:100%;}
p {margin:0 0 0 0;}
ol,ul {list-style:none;}
fieldset,img {border:0; vertical-align:top;}
table {border-collapse:collapse; border-spacing:0;}
caption,th {text-align:left;}
th {vertical-align:top; font-weight:normal; text-align:left;}
td {vertical-align:top;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}



/* common */
/* -------------------------------------------------------- */
html,body {font-variant-ligatures:none;}
html {font-size:62.5%;}
body {font-size:16px; font-size:1.6rem; font-family:'Noto Serif JP', serif; font-weight:300; color:#000; text-align:center; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:none;}

h1, h2, h3, h4, h5, h6, h7 {line-height:1.2;}
p, li, dt, dd, th, td, address, blockquote, div {line-height:1.6;}
input, select, textarea, button {font-size:16px; font-size:1.6rem; font-family:'Noto Serif JP', serif; line-height:1.4; vertical-align:middle;}
input[type='submit'],input[type='reset'],input[type='button'], button {cursor:pointer; -ms-appearance:none; -webkit-appearance:none; appearance:none;}
:placeholder-shown {color:#ccc;}
::-webkit-input-placeholder {color:#ccc;}
:-moz-placeholder {color:#ccc; opacity:1;}
::-moz-placeholder {color:#ccc; opacity:1;}
:-ms-input-placeholder {color:#ccc;}

strong {font-weight:900;}
ol {list-style-type:decimal; margin-left:2.2em;}
img {max-width:100%; width:auto; height:auto; line-height:0; vertical-align:top; border:0; display:inline;}

a {color:#33; text-decoration:underline;}
a:hover {color:#333; text-decoration:none;}

/*
body::before {content:''; width:100%; height:100%; background-color:#fff; position:fixed; top:0; left:-50%; z-index:350; transition:left 0.8s ease-in-out;}
body::after {content:''; width:100%; height:100%; background-color:#000; position:fixed; top:0; left:0; z-index:360; transition:left 0.8s ease;}
body.load::before {left:100%;}
body.load::after {left:100%;}
*/


/* decision */
/* -------------------------------------------------------- */
#bpCheck {display:none;}

body .pc {display:block;}
br.pc, span.pc, img.pc {display:inline;}
body .sp, br.sp, span.sp, img.sp {display:none;}

a.off {pointer-events:none; cursor:default; opacity:0.3;}
a.tel {pointer-events:none; cursor:default;}
body.mobile a.tel {pointer-events:auto; cursor:pointer;}

.cfix::before,
.cfix::after {display:table; content:" ";}
.cfix::after {clear:both;}

@media screen and (max-width:1000px){
	#bpCheck {display:block;}

	body .pc, br.pc, span.pc, img.pc {display:none;}
	body .sp {display:block;}
	br.sp, span.sp, img.sp {display:inline;}
}


/* container */
/* -------------------------------------------------------- */
#container {width:100%; overflow:hidden;}


/* header */
/* -------------------------------------------------------- */
#header {width:272px; height:100%; background-color:#000; position:fixed; top:0; left:0; z-index:310;}
#header .logo {font-size:1.5rem; font-weight:300; text-align:center; color:#fff; padding:40px 0 0 0;}
#header .logo a {text-decoration:none; color:#fff; padding:125px 0 0 0; display:inline-block; position:relative;}
#header .logo a::before {content:''; width:116px; height:116px; margin:0 0 0 -58px; background:url(../img/common/logo.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:0; left:50%;}

#header .nav1 {margin:36px 0 0 0; border-bottom:solid 1px rgba(255,255,255,0.2);}
#header .nav1 > li {font-family:'Noto Sans JP', sans-serif; font-size:1.6rem; font-weight:200; line-height:1; letter-spacing:0.1em; text-align:left; color:#fff; border-top:solid 1px rgba(255,255,255,0.2); position:relative;}
#header .nav1 > li > a {text-decoration:none; color:#fff; padding:20px 0 20px 18%; display:block;}
#header .nav1 > li > a::before {content:''; width:0; height:100%; background-color:rgba(255,255,255,0.1); display:block; position:absolute; top:0; left:0; transition:width 0.3s ease;}
#header .nav1 > li > a:hover::before {width:100%;}
#header .nav1 > li > a.off {opacity:0.4;}
#header .nav1 > li > a > span {padding:0 0 0 55px; display:block; position:relative; z-index:10;}
#header .nav1 > li > a > span::before {content:''; width:30px; height:30px; margin:-15px 0 0 0; background-repeat:no-repeat; background-position:center center; background-size:cover; display:block; position:absolute; top:50%; left:0;}
#header .nav2 {width:272px; position:fixed; bottom:0; left:0; z-index:310;}
#header .nav2 > li {font-size:1.8rem; font-weight:400; line-height:1; text-align:center; color:#fff;}
#header .nav2 > li > a {text-decoration:none; color:#fff; padding:20px 0 30px 0; display:block; position:relative;}
#header .nav2 > li > a::before {content:''; width:0; height:100%; background-color:rgba(0,0,0,0.2); display:block; position:absolute; top:0; left:0; transition:width 0.3s ease;}
#header .nav2 > li > a:hover::before {width:100%;}
#header .nav2 > li > a.off {opacity:0.4;}
#header .nav2 > li > a > span {padding:28px 0 0 0; display:block; position:relative; z-index:10;}
#header .nav2 > li > a > span::before {content:''; width:30px; height:30px; margin:0 0 0 -15px; background-repeat:no-repeat; background-position:center center; background-size:cover; display:block; position:absolute; top:0; left:50%;}
#header .nav2 > li.request {letter-spacing:0.2em; background-color:#004a8f;}
#header .nav2 > li.reservation {letter-spacing:0; background-color:#998d5a;}

#header a.icon01 > span::before {background-image:url(../img/common/icon_01.svg);}
#header a.icon02 > span::before {background-image:url(../img/common/icon_02.svg);}
#header a.icon03 > span::before {background-image:url(../img/common/icon_03.svg);}
#header a.icon04 > span::before {background-image:url(../img/common/icon_04.svg);}
#header a.icon05 > span::before {background-image:url(../img/common/icon_05.svg);}
#header a.icon06 > span::before {background-image:url(../img/common/icon_06.svg);}
#header a.icon07 > span::before {background-image:url(../img/common/icon_07.svg);}
#header a.icon08 > span::before {background-image:url(../img/common/icon_08.svg);}
#header a.icon09 > span::before {background-image:url(../img/common/icon_09.svg);}
#header a.icon10 > span::before {background-image:url(../img/common/icon_10.svg);}
#header a.icon09 {width:100%; display:block; position:relative; overflow:hidden;}
#header a.icon09::after {content: ''; width:90%; height:100%; position:absolute; top:0; left:-100%; background-image:linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%); animation-name:shiny; animation-duration:2s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:normal; animation-fill-mode:none; animation-play-state:running; cursor:pointer;}


#gNavBtn {width:38px; height:38px; position:fixed; top:15px; right:10px; z-index:320; cursor:pointer; display:none; transition-property:opacity;}
#gNavBtn > span {width:100%; height:2px; margin:-1px 0 0 0; background-color:rgba(255,255,255,1); display:block; position:absolute; top:50%; left:0; transition-property:background-color;}
#gNavBtn > span::before,
#gNavBtn > span::after {content:''; width:100%; height:2px; background-color:rgba(255,255,255,1); display:block; position:absolute; left:0;}
#gNavBtn > span::before {top:-13px; transition-property:top;}
#gNavBtn > span::after {bottom:-13px; transition-property:bottom;}
#gNavBtn:hover {opacity:0.7;}
body.load #gNavBtn,
body.load #gNavBtn > span::before,
body.load #gNavBtn > span::after {transition-duration:0.3s; transition-delay:0s; transition-timing-function:ease;}

#gNavCheck {display:none;}
#gNavCheck:checked + #header #gNavBtn > span {background-color:rgba(255,255,255,0);}
#gNavCheck:checked + #header #gNavBtn > span::before {top:0; transform:rotate(45deg); transition-property:transform;}
#gNavCheck:checked + #header #gNavBtn > span::after {bottom:0; transform:rotate(-45deg); transition-property:transform;}

@media screen and (max-width:1000px){
	#header {width:100%; height:70px;}
	#header .logo {width:100%; height:70px; font-size:1.4rem; padding:0 15px; background-color:#000; box-sizing:border-box; display:flex; align-items:center; position:relative; z-index:310;}
	#header .logo a {padding:0 0 0 60px; display:block;}
	#header .logo a::before {width:46px; height:46px; margin:-23px 0 0 0; top:50%; left:0;}

	#header .nav1 {margin:70px 0 0 0; border-bottom:solid 1px rgba(51,51,51,1); display:flex; flex-wrap:wrap;}
	#header .nav1 > li {width:50%; font-size:1.4rem; margin:0 0 -1px 0; border-top:solid 1px rgba(51,51,51,1); border-bottom:solid 1px rgba(51,51,51,1); box-sizing:border-box;}
	#header .nav1 > li:nth-of-type(odd) {border-right:solid 1px rgba(51,51,51,1);}
	#header .nav1 > li > a {padding:1.5em 10px;}
	#header .nav1 > li > a > span {padding:0 0 0 40px;}
	#header .nav2 {width:100%; position:relative;}
	#header .nav2 > li {max-width:100%; width:100%; font-size:1.8rem; margin:20px auto 0 auto;}
	#header .nav2 > li > a {padding:10px 0 20px 0;}
	#header .nav2 > li > a > span {padding:34px 0 0 0;}
	#header .nav2 > li > a > span::before {width:36px; height:36px; margin:0 0 0 -18px;}

	#header #gNavBtn {display:block;}
	#gNav {width:100%; height:100vh; background-color:rgba(0,0,0,0.95); position:fixed; top:0; left:100%; overflow:auto; transition:left 0.6s ease; z-index:300;}
	#gNavCheck:checked + #header #gNav {left:0; overflow:auto;}
}


/* footer */
/* -------------------------------------------------------- */
#footer {padding:0 0 0 272px;}
#footer .sec {max-width:1090px; padding:0 45px;}
#footer .inr {color:#fff; padding:70px 0 30px 0; background:#000 url(../img/common/bg_footer.jpg) center top no-repeat; background-size:100% auto;}
#footer .contact {text-align:center;}
#footer .contact .sec {max-width:1090px; padding:0;}
#footer .contact .ttl {font-family:'Noto Sans JP', sans-serif; font-size:4.0rem; font-weight:400; letter-spacing:0.3em;}
#footer .contact .catch {font-size:1.7rem; line-height:1.8; letter-spacing:0.1em; margin:1.5em 0 0 0;}
#footer .contact .clm {margin:50px 0 0 0; display:flex;}
#footer .contact .clm > div {width:33.33%; padding:0 45px 30px 45px; border-left:solid 1px #898989; box-sizing:border-box;}
#footer .contact .clm > div:first-of-type {border-left:none;}
#footer .contact .clm > div:nth-of-type(3) dt span {letter-spacing:0;}
#footer .contact .clm dl {width:100%; margin:0 auto; box-sizing:border-box; position:relative;}
/* 
#footer .contact .clm dl.cell3 dt,
#footer .contact .clm dl.cell3 dd {opacity:0.4; pointer-events:none;}
#footer .contact .clm dl.cell3 dd a {opacity:1;}
#footer .contact .clm dl.cell3::before {content:"COMING\ASOON"; width:152px; height:152px; white-space:pre; font-family:'Noto Sans JP', sans-serif; font-size:2.2rem; font-weight:500; line-height:1.2; letter-spacing:0.1em; color:#000; margin:-76px 0 0 -76px; background-color:rgba(255,255,255,0.8); display:flex; justify-content:center; align-items:center; position:absolute; top:50%; left:50%; z-index:10;}
 */
#footer .contact .clm dt {padding:70px 0 0 0; position:relative;}
#footer .contact .clm dt::before {content:''; width:60px; height:60px; margin:10px 0 0 -30px; background-repeat:no-repeat; background-position:center center; background-size:cover; display:block; position:absolute; top:0; left:50%;}
#footer .contact .clm dt::after {content:''; width:36px; height:2px; margin:0 0 0 -18px; background-color:#998d5a; display:block; position:absolute; bottom:0; left:50%;}
#footer .contact .clm dt.icon1::before {background-image:url(../img/common/icon_08.svg);}
#footer .contact .clm dt.icon2::before {background-image:url(../img/common/icon_10.svg);}
#footer .contact .clm dt.icon3::before {background-image:url(../img/common/icon_09.svg);}
#footer .contact .clm dt span {height:4em; font-size:2.2rem; line-height:1.3; letter-spacing:0.1em; display:flex; justify-content:center; align-items:center;}
#footer .contact .clm dd {font-size:1.6rem; line-height:1.4; letter-spacing:0.1em; margin:1.5em 0 0 0;}
#footer .contact .btn {width:100%; height:4em; font-size:1.8rem; line-height:1.2; letter-spacing:0.1em; text-decoration:none; color:#fff; margin:0 auto; background-color:rgba(153,141,90,0.4); border:1px solid rgba(153,141,90,1); box-sizing:border-box; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease;}
#footer .contact .btn:hover {background-color:rgba(153,141,90,0.7);}
#footer .contact .tel {padding:15px 0 0 0; display:block;}
#footer .contact .tel + span {font-size:1.2rem; letter-spacing:0; text-align:center; margin:1.0em 0 0 0; display:block;}
#footer .info {font-size:1.2rem; line-height:1.3; text-align:left; margin:50px 0 0 0;}
#footer .note {margin:15px 0 0 0;}
#footer .note > li {font-size:1.1rem; line-height:1.3;}
#footer .logo {text-align:left; margin:50px auto 0 auto; display:inline-block;}
#footer .logo dt {font-size:1.2rem; line-height:1.3;}
#footer .logo dd {margin:5px 0 0 0;}
#footer .logo a {text-decoration:none; color:#fff; display:flex; align-items:center;}
#footer .logo a > span {font-size:1.1rem; line-height:1.4; display:block;}
#footer .logo a > span:nth-of-type(1) {max-width:368px; width:100%;}
#footer .logo a > span:nth-of-type(2) {width:100%; padding:0 0 0 20px; box-sizing:border-box;}
#footer .copy {font-size:1.1rem; text-align:center; margin:20px 0 0 0;}

@media screen and (max-width:1000px){
	#footer {padding:0;}
	#footer .sec {padding:0 6.0vw;}
	#footer .inr {padding:30px 0;}
	#footer .contact .sec {padding:0 6.0vw;}
	#footer .contact .ttl {font-size:3.0rem;}
	#footer .contact .catch {font-size:1.2rem;}
	#footer .contact .clm {margin:30px 0 0 0; display:block;}
	#footer .contact .clm > div {width:auto; padding:0 0 30px 0; border-top:solid 1px #898989; border-left:none;}
	#footer .contact .clm > div:first-of-type {border-top:none;}
	#footer .contact .clm > div:last-of-type {padding-bottom:0;}
	#footer .contact .clm dl {max-width:320px;}
	#footer .contact .clm dl.cell3::before {font-size:2.0rem;}
	#footer .contact .clm dt span {height:auto; font-size:2.0rem; padding:0 0 0.5em 0;}
	#footer .contact .clm dd {font-size:1.4rem; margin:1.0em 0 0 0;}
	#footer .contact .btn {max-width:320px; font-size:1.6rem;}
	#footer .contact .tel {padding:0;}
	#footer .contact .tel + span {font-size:1.0rem; letter-spacing:0.1em; text-align:center; margin:1.0em 0 0 0;}
	#footer .info {font-size:1.0rem; margin:30px 0 0 0;}
	#footer .note {margin:20px 0 0 0;}
	#footer .note > li {font-size:1.0rem;}
	#footer .logo {margin:30px auto 0 auto;}
	#footer .logo dt {font-size:1.0rem;}
	#footer .logo dd {margin:5px 0 0 0;}
	#footer .logo a {display:block;}
	#footer .logo a > span {font-size:1.0rem;}
	#footer .logo a > span:nth-of-type(2) {padding:10px 0 0 0;}
	#footer .copy {font-size:1.0rem; margin:30px 0 0 0;}
}

/* contents */
/* -------------------------------------------------------- */
#contents {padding:0 0 0 272px;}

.sec {max-width:1090px; margin:0 auto; padding:0 30px; box-sizing:border-box;}

.page-head {width:100%; position:relative; overflow:hidden;}
.page-head .ttl {width:100%; height:100%; font-family:'Noto Sans JP', sans-serif; font-size:4.0rem; font-weight:400; letter-spacing:0.4em; color:#fff; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0;}
.page-head .img img {width:100%;}

.note {text-align:left;}
.note > li {padding:0 0 0 1.2em; position:relative;}
.note > li::before {content:'※'; display:block; position:absolute; top:0; left:0;}

.shiny {width:100%; display:block; position:relative; overflow:hidden;}
.shiny::after {content: ''; width:90%; height:100%; position:absolute; top:0; left:-100%; background-image:linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%); animation-name:shiny; animation-duration:2s; animation-timing-function:linear; animation-delay:0s; animation-iteration-count:infinite; animation-direction:normal; animation-fill-mode:none; animation-play-state:running; cursor:pointer;}
@keyframes shiny {
	0% {left:-100%; transform:scale(1); opacity:0;}
	50% {opacity:1; transform:scale(2);}
	85% {opacity:0.6; transform:scale(4);}
	100% {left:300%; transform:scale(1); opacity:0;}
}

@media screen and (max-width:1000px){
	#contents {padding:70px 0 0 0;}

	.sec {padding:0 6.0vw;}

	.page-head .ttl {font-size:3.0rem; letter-spacing:0.3em;}
}

.parallax.on {transition:opacity 0.8s 0.3s ease, transform 0.8s 0.3s ease;}
.parallax {opacity:0;}
.parallax.on {opacity:1;}
.parallax.up {transform:translate3d(0,30px,0);}
.parallax.up.on {transform:translate3d(0,0,0);}
.parallax.down {transform:translate3d(0,-30px,0);}
.parallax.down.on {transform:translate3d(0,0,0);}
.parallax.left {transform:translate3d(30px,0,0);}
.parallax.left.on {transform:translate3d(0,0,0);}
.parallax.right {transform:translate3d(-30px,0,0);}
.parallax.right.on {transform:translate3d(0,0,0);}