@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;800&display=swap');

/* common */
/* -------------------------------------------------------- */
html, body {font-variant-ligatures:none;}
html {font-size:62.5%; width:100%; height:100%; overflow-y:scroll; scroll-behavior:smooth;}
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%; margin:0; padding:0; background:none;}

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

strong {font-weight:bold;}
img {max-width:100%; width:auto; height:auto; line-height:0; vertical-align:top; border:0; display:inline;}
ol, ul, dl {list-style:none; margin:0; padding:0;}
iframe {width:100%;}
pre {font-size:12px; text-align:left; padding:50px 0 0 0;}

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

body::before {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.7); display:block; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:998;}
body::after {content:''; width:50px; height:50px; margin:-25px 0 0 -25px; background:url(../img/loading.png) no-repeat center center; background-size:cover; display:block; position:fixed; top:50%; left:50%; opacity:0; pointer-events:none; z-index:999;}
body.loading::before {opacity:1; pointer-events:auto; transition:opacity 0.3s ease;}
body.loading::after {opacity:1; pointer-events:auto; transition:opacity 0.3s ease; animation:spinner 1.5s linear infinite;}
@keyframes spinner {
	to {transform:rotate(360deg);}
}


/* 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;}
button.off {pointer-events:none; opacity:0.7;}

@media screen and (max-width:767px){
	#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 {position:relative; z-index:300;}
#header > div {width:100%; position:absolute; top:0; left:0;}
#header .clm {display:flex; justify-content:space-between;}
#header .logo {font-size:3.0rem; font-weight:600; line-height:1; text-align:left; color:#000; text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; padding:15px 15px 10px 15px;}
#header .logo span:nth-of-type(1) {font-size:70%; white-space:nowrap; padding:0 0.5em 0 0; display:inline-block;}
#header .logo span:nth-of-type(2) {white-space:nowrap;}
#header .logo a {text-decoration:none; color:#000;}

#gNav {width:100%; height:100%; background-color:rgba(0,0,0,0.9); position:fixed; top:0; left:0; opacity:0; overflow:auto; pointer-events:none; z-index:301; transition:opacity 0.6s ease;}
#gNav .nav {padding:30px 0 50px 0; display:block;}
#gNav .nav > li {font-size:1.6rem; color:#fff; padding:0; border-bottom:solid 1px rgba(255,255,255,0.2);}
#gNav .nav > li a {text-align:center; text-decoration:none; color:#fff; padding:10px; display:block; opacity:0; transform:translate3d(0,15px,0); transition:opacity 0.3s ease, transform 0.6s ease;}
#gNav .nav a::before {content:''; width:0%; height:1px; background-color:#fff; display:block; position:absolute; bottom:0; left:50%; transition:width 0.3s ease, left 0.3s ease;}
#gNav .nav a:hover::before {width:100%; left:0;}

#gNavBtn {width:60px; height:60px; background-color:rgba(255,255,255,0); border-radius:3px; position:fixed; top:0; right:5px; z-index:310; cursor:pointer; display:block; transition-property:opacity;}
#gNavBtn > span {width:80%; height:2px; margin:-1px 0 0 0; background-color:rgba(0,0,0,1); display:block; position:absolute; top:50%; left:10%; transition-property:background-color;}
#gNavBtn > span::before,
#gNavBtn > span::after {content:''; width:100%; height:2px; background-color:rgba(0,0,0,1); display:block; position:absolute; left:0;}
#gNavBtn > span::before {top:-11px; transition-property:top;}
#gNavBtn > span::after {bottom:-11px; transition-property:bottom;}
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 {background-color:rgba(255,255,255,0.5); top:0; transform:rotate(45deg); transition-property:transform;}
#gNavCheck:checked + #header #gNavBtn > span::after {background-color:rgba(255,255,255,0.5); bottom:0; transform:rotate(-45deg); transition-property:transform;}
#gNavCheck:checked + #header #gNav {opacity:1; pointer-events:auto;}
#gNavCheck:checked + #header #gNav .nav > li a {opacity:1; transform:translate3d(0,0,0);}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(1) a {transition-delay:0.2s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(2) a {transition-delay:0.3s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(3) a {transition-delay:0.4s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(4) a {transition-delay:0.5s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(5) a {transition-delay:0.6s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(6) a {transition-delay:0.7s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(7) a {transition-delay:0.8s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(8) a {transition-delay:0.9s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(9) a {transition-delay:1.0s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(10) a {transition-delay:1.1s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(11) a {transition-delay:1.2s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(12) a {transition-delay:1.3s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(13) a {transition-delay:1.4s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(14) a {transition-delay:1.5s;}
#gNavCheck:checked + #header #gNav .nav > li:nth-of-type(15) a {transition-delay:1.6s;}

@media screen and (max-width:767px){
	#header .logo {font-size:clamp(1.7rem, 3.9vw, 3.9vw); padding:15px 50px 10px 15px;}
	#gNavBtn {width:40px; height:40px; top:5px;}
	#gNavBtn > span::before {top:-9px;}
	#gNavBtn > span::after {bottom:-9px;}
}


/* footer */
/* -------------------------------------------------------- */
#footer {padding:50px 0; background-color:rgba(255,255,255,0.8); box-shadow:0 0 5px rgba(0,0,0,0.1); border-top:solid 1px #ccc; position:relative; z-index:10;}
#footer .sns {display:flex; justify-content:center;}
#footer .sns > div {padding:0 10px;}
#footer .sns img {width:40px;}
#footer .sns a {transition:opacity 0.3s ease;}
#footer .sns a:hover {opacity:0.7;}
#footer .nav {margin:30px 0 0 0;}
#footer .nav ul {display:flex; flex-wrap:wrap; justify-content:center;}
#footer .nav ul > li {font-size:1.4rem; padding:5px 20px;}
#footer .nav a {text-decoration:none; position:relative;}
#footer .nav a:hover {text-decoration:underline;}

#footer .copy {font-size:1.0rem; font-weight:normal; letter-spacing:0.1em; margin:30px 0 0 0;}

@media screen and (max-width:767px){
	#footer {padding:30px 0 50px 0;}
	#footer .sns img {width:30px;}
	#footer .nav {margin:20px 0 0 0;}
	#footer .nav ul > li {padding:5px 10px;}
}


/* contents */
/* -------------------------------------------------------- */
#contents {padding:100px 0; position:relative; z-index:10;}

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

.fix-btn {position:fixed; top:65px; right:0; z-index:300;}
.fix-btn a {width:2.6em; line-height:1.2; text-decoration:none; color:#fff; padding:0.6em 0.6em 0.6em 0; background-color:rgba(0,0,0,0.8); box-shadow:0 0 3px rgba(0,0,0,0.3); border-radius:5px 0 0 5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:relative; left:0.6em; transition:left 0.3s ease, background-color 0.3s ease;}
.fix-btn a:hover {left:0; background-color:rgba(0,0,0,1);}
body.entry .fix-btn {display:none;}

.page-nav {padding:30px 0;}
.page-nav ul {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.page-nav li {padding:4px 2px 0 2px;}
.page-nav a,
.page-nav span {width:2.5em; padding:2px 0; text-align:center; display:block; border-radius:2px;}
.page-nav a {color:#333; text-decoration:none; border:solid 1px #ccc;}
.page-nav a:hover,
.page-nav span {color:#333; text-decoration:none; background:#eee; border:solid 1px #999;}
.page-nav li.prev {padding-right:10px;}
.page-nav li.next {padding-left:10px;}
.page-nav li.prev a,
.page-nav li.next a {width:auto; color:#333; text-decoration:none; border:0;}
.page-nav li.prev a:hover,
.page-nav li.next a:hover {width:auto; color:#333; text-decoration:underline; background:none; border:0;}
.page-nav li.prev span,
.page-nav li.next span {width:auto; color:#ccc; text-decoration:none; background:none; border:0;}

.ttl-01 {font-size:3.6rem; letter-spacing:0.3em; text-align:center; padding:30px 0;}
.ttl-02 {font-size:2.6rem; letter-spacing:0.2em; text-align:center;}

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

	.sec {padding:0 4.0vw;}

	.fix-btn {width:100%; position:fixed; top:auto; bottom:0; z-index:310;}
	.fix-btn a {width:100%; height:40px; font-size:1.8rem; letter-spacing:0.2em; padding:0; border-radius:0; position:static;}
	.fix-btn a br {display:none;}

	.page-nav a,
	.page-nav span {width:2.0em;}
	
	.ttl-01 {font-size:2.4rem; letter-spacing:0.2em; padding:15px 0 30px 0;}
	.ttl-02 {font-size:1.8rem; letter-spacing:0.2em;}
}

/* modal */
.modal-win {width:100%; height:100%; background-color:rgba(0,0,0,0); box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; z-index:310; pointer-events:none; transition:background-color 0.6s ease;}
.modal-win > div {background-color:#fff; border-radius:10px; box-sizing:border-box; opacity:0; transition:opacity 0.6s ease;}
.modal-win > div::before {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.7); display:block; position:absolute; top:0; left:0; opacity:0; pointer-events:none; z-index:10;}
.modal-win > div::after {content:''; width:50px; height:50px; margin:-25px 0 0 -25px; background:url(../img/loading.png) no-repeat center center; background-size:cover; display:block; position:absolute; top:50%; left:50%; opacity:0; pointer-events:none; z-index:10;}
.modal-win.on {background-color:rgba(0,0,0,0.7); pointer-events:auto;}
.modal-win.on > div {opacity:1;}
.modal-win.on #calendarObj.on {opacity:1; pointer-events:auto;}
.modal-win .close.fix {width:60px; height:60px; background-color:#333; box-shadow:0 0 3px #333; border-radius:0 0 0 10px; position:absolute; top:0; right:0; cursor:pointer;}
.modal-win .close.fix::before,
.modal-win .close.fix::after {content:''; width:2px; height:70%; margin:0 0 0 -1px; background-color:#fff; border-radius:2px; display:block; position:absolute; top:15%; left:50%;}
.modal-win .close.fix::before {transform:rotate(45deg);}
.modal-win .close.fix::after {transform:rotate(-45deg);}
.modal-win .form input,
.modal-win .form select,
.modal-win .form textarea {width:100%; font-size:1.6rem; padding:5px 10px; background:#fff; border-radius:3px; border:solid 1px #666; box-sizing:border-box;}
.modal-win .form select {width:auto; padding:3px 0;}
.modal-win .form textarea {height:6em;}
.modal-win .form option {font-size:1.6rem; padding:0;}
.modal-win .form input.off,
.modal-win .form select.off {pointer-events:none; opacity:0.3;}
.modal-win .form input.error,
.modal-win .form select.error {background-color:#fee;}
.modal-win .form select option.off {display:none;}
.modal-win .cert-code {margin:15px 0 0 0;}
.modal-win .cert-code input {font-size:1.8rem; font-weight:bold; letter-spacing:0.4em; text-align:center;}
.modal-win .btn {text-align:center; margin:20px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center;}
.modal-win .btn button,
.modal-win .btn .close {width:120px; height:40px; font-size:1.4rem; font-weight:normal; letter-spacing:0.1em; text-align:center; text-decoration:none; color:#fff; margin:0 10px; background-color:rgba(0,0,139,1); border:none; border-radius:5px; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:background-color 0.3s ease;}
.modal-win .btn button:hover,
.modal-win .btn .close:hover {background-color:rgba(0,0,139,0.7);}
.modal-win .btn button[name="cancel"] {height:25px; font-size:1.4rem; color:#000; background-color:rgba(0,0,0,0.2);}
.modal-win .btn1 {margin:5px 0 0 0;}
.modal-win .btn1 button {font-size:1.4rem; padding:0; background:none; border:none;}
.modal-win .btn1 button:hover {text-decoration:underline;}
.modal-win .inputCheck {display:none;}
.modal-win .error-txt {font-size:1.4rem; color:#c00; margin:5px 0 0 0;}
.modal-win .info {font-size:1.4rem; text-align:center;}
.modal-win.loading > div::before {opacity:1; pointer-events:auto; transition:opacity 0.3s ease;}
.modal-win.loading > div::after {opacity:1; pointer-events:auto; transition:opacity 0.3s ease; animation:spinner 1.5s linear infinite;}

.modal-rsv > div {min-width:360px; max-height:90.0vh; overflow:auto;}
.modal-rsv > div > div {padding:20px;}
.modal-rsv .form dl {text-align:left;}
.modal-rsv .form > dl:first-of-type dt {margin-top:0;}
.modal-rsv .form dt {font-size:1.4rem; margin:10px 0 0 0; color:#fff; padding:0 0.5em; background-color:#333; border-radius:3px;}
.modal-rsv .form dd {margin:5px 0 0 0;}
.modal-rsv .clm1 {display:flex; flex-wrap:wrap; align-items:center;}
.modal-rsv .clm1 > div {margin:5px 0 0 0; display:flex; align-items:center; box-sizing:border-box;}
.modal-rsv .clm1 > div > div {box-sizing:border-box;}
.modal-rsv .clm1 > div:nth-of-type(2) {padding:0 0.5em;}
.modal-rsv .clm1 > div > div:nth-of-type(1) {width:8em; padding:0 0.3em 0 0;}
.modal-rsv .clm1 :placeholder-shown {color:#000; text-align:center; padding-left:0; padding-right:0;}
.modal-rsv .clm1 ::-webkit-input-placeholder {color:#000; text-align:center; padding-left:0; padding-right:0;}
.modal-rsv .clm1 :-moz-placeholder {color:#000; text-align:center; padding-left:0; padding-right:0; opacity:1;}
.modal-rsv .clm1 ::-moz-placeholder {color:#000; text-align:center; padding-left:0; padding-right:0; opacity:1;}
.modal-rsv .clm1 :-ms-input-placeholder {color:#000; text-align:center; padding-left:0; padding-right:0;}
.modal-rsv .clm1 select {border:none; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.modal-rsv .clm1 select.error {background:none;}
.modal-rsv .clm2 {display:flex; flex-wrap:wrap; align-items:center;}
.modal-rsv .clm2 > div {display:flex; align-items:center; padding:0 0 0 1em; box-sizing:border-box;}
.modal-rsv .clm2 > div:first-of-type {padding-left:0;}
.modal-rsv .clm2 > div > div {white-space:nowrap; box-sizing:border-box;}
.modal-rsv .clm2 > div > div:nth-of-type(2) {width:4em; padding:0 0.3em;}
.modal-rsv .clm3 {display:flex; flex-wrap:wrap; align-items:center;}
.modal-rsv .clm3 > div {margin:5px 0 0 0; display:flex; align-items:center; padding:0 0 0 1em; box-sizing:border-box;}
.modal-rsv .clm3 > div:first-of-type {padding-left:0;}
.modal-rsv .clm3 > div > div:nth-of-type(2) {padding:0 0.3em;}
.modal-rsv .address-clm > div {margin:5px 0 0 0;}
.modal-rsv .address-clm > div:first-of-type {width:8em; margin-top:0;}

.modal-reconfirm > div {min-width:320px; padding:20px;}
.modal-reconfirm .form > div {margin:10px 0 0 0;}
.modal-reconfirm .form > div:first-of-type {margin-top:0;}
.modal-reconfirm .txt {height:50.0vh; text-align:left; overflow:auto;}
.modal-reconfirm .txt > dl {text-align:left; padding:5px 0;}
.modal-reconfirm .txt > dl dt {font-size:1.4rem; line-height:1.4; padding:0 5px; background-color:#eee;}
.modal-reconfirm .txt > dl dt span {font-size:1.2rem;}
.modal-reconfirm .txt > dl dd {font-size:1.4rem; line-height:1.4; margin:0 5px;}
.modal-reconfirm .txt > dl dd.btn {margin-top:10px;}
.modal-reconfirm .info_txt {font-size:1.2rem; text-align:center; color:#c00; margin:10px 0 0 0;}

@media screen and (max-width:767px){
	.modal-win {padding:4.0vw;}
	.modal-win .close {width:30px; height:30px;}

	.modal-rsv > div > div {padding:4.0vw;}
}

.splide__slide {padding:0 1px; box-sizing:border-box;}
.splide__slide .box {width:100%; padding:100% 0 0 0; display:block; overflow:hidden; position:relative;}
.splide__slide img,
.splide__slide video {width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0;}
.splide__slide.is-prev img,
.splide__slide.is-prev video,
.splide__slide.is-next img,
.splide__slide.is-next video,
.splide__slide.is-visible img,
.splide__slide.is-visible video {opacity:1;}
.splide__arrows {width:100%; position:absolute; top:50%; left:0;}
.splide__arrow {width:40px; height:40px; background-color:rgba(255,255,255,0.3); border:none; border-radius:100%; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:absolute; top:-20px; z-index:10;}
.splide__arrow--prev {left:10px; transform:scale(-1,1);}
.splide__arrow--next {right:10px;}
.splide__pagination {width:100%; position:absolute; top:100%; left:0;}
.splide__pagination > li {padding:5px 5px 0 5px; box-sizing:border-box;}
.splide__pagination > li button {width:10px; height:10px; padding:0; background-color:#999; border:none; border-radius:100%; box-sizing:border-box; display:block; overflow:hidden; transition:background-color 0.3s ease;}
.splide__pagination > li button.is-active {background-color:#000;}


.modalBtn {cursor:pointer;}
#modalWindow {width:100%; height:100%; background-color:rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; z-index:400; opacity:0; pointer-events:none; transition:opacity 0.6s ease;}
#modalWindow.on {opacity:1; pointer-events:auto;}
#modalWindow img,
#modalWindow video {max-width:100vw; max-height:100vh; width:auto; height:auto; display:block; object-fit:contain;}
#modalWindow img {pointer-events:none; user-select:none;}
#modalClose {width:70px; height:70px; position:absolute; top:20px; right:20px; z-index:100; cursor:pointer;}
#modalClose::before,
#modalClose::after {content:''; width:100%; height:2px; margin:-1px 0 0 0; background-color:#fff; display:block; position:absolute; top:50%; left:0;}
#modalClose::before {transform:rotate(45deg);}
#modalClose::after {transform:rotate(-45deg);}

@media screen and (max-width:767px){
	#modalClose {width:30px; height:30px; top:10px; right:10px;}
}

.opening-soon {width:100%; height:50.0vh; font-size:clamp(2.0rem, 10vw, 8.0rem); letter-spacing:0.4em; color:#666; display:flex; justify-content:center; align-items:center;}