html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset;}@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }} body { margin: 0;} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block;} audio,canvas,progress,video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0;} [hidden],template { display: none;} a { background-color: transparent;} a:active,a:hover,input[type="text"], input[type="password"], textarea, select,button { outline: 0;} abbr[title] { border-bottom: 1px dotted;} b,strong { font-weight: bold;} dfn { font-style: italic;} h1 { font-size: 2em; margin: 0.67em 0;} mark { background: #ff0; color: #000;} small { font-size: 80%;} sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} img { border: 0;} svg:not(:root) { overflow: hidden;} figure { margin: 1em 40px;} hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre { overflow: auto;} code,kbd,pre,samp { font-family: monospace, monospace; font-size: 1em;} button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; background: none;} button,select { text-transform: none;} button,html input[type="button"], input[type="reset"],input[type="submit"] { appearance: button; -webkit-appearance: button; cursor: pointer; } button[disabled],html input[disabled] { cursor: default;} button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0;} input { line-height: normal;} input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto;} input[type="search"] { appearance: textfield; -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend { border: 0; padding: 0; } textarea { overflow: auto;} optgroup { font-weight: bold;} table { border-collapse: collapse; border-spacing: 0;} td,th { padding: 0;}
:root { --c-black: #000000; --c-black-rgb: 0,0,0; --c-white: #FFFFFF; --c-white-rgb: 255,255,255; --c-black-600: #5F6368; --c-black-300: #88989E; --c-black-100: #F0F0F0; --c-red: #E50914; --c-blue: #00BFFF; --c-green: #00EB4E; --c-link: #2DA5EE; --c-danger: #D90004; --fs-3xl: 2.8rem; --fs-2xl: 2.4rem; --fs-xl: 2.4rem; --fs-lg: 2rem; --fs-md: 1.6rem; --fs-sm: 1.4rem; --fs-xs: 1.2rem; --fs-3xl-sp: 2.4rem; --fs-2xl-sp: 2rem; --fs-xl-sp: 1.8rem; --fs-lg-sp: 1.6rem; --fs-md-sp: 1.4rem; --fs-sm-sp: 1.2rem; --fs-xs-sp: 1rem; --fw-default: 500; --ff-sans-selif: YakuHanJPs, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif; --line-height: 1.6em; --p-line-height: 1.8em; --spc: .4rem; --spc-1: calc(var(--spc) * 1); --spc-2: calc(var(--spc) * 2); --spc-3: calc(var(--spc) * 3); --spc-4: calc(var(--spc) * 4); --spc-5: calc(var(--spc) * 5); --spc-6: calc(var(--spc) * 6); --spc-7: calc(var(--spc) * 7); --spc-8: calc(var(--spc) * 8); --spc-9: calc(var(--spc) * 9); --spc-10: calc(var(--spc) * 10); --spc-11: calc(var(--spc) * 11); --spc-12: calc(var(--spc) * 12); --spc-14: calc(var(--spc) * 14); --spc-16: calc(var(--spc) * 16); --spc-20: calc(var(--spc) * 20); --spc-24: calc(var(--spc) * 24); --spc-28: calc(var(--spc) * 28); --spc-32: calc(var(--spc) * 32); --spc-36: calc(var(--spc) * 36); --spc-40: calc(var(--spc) * 40); --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50;} * { box-sizing: border-box; word-wrap: break-word; line-height: var(--line-height); color: var(--c-wb-blue-dark); transition: .2s ease; &:before, &:after { transition: .2s ease; }} html,body { overflow-x: hidden;} html { background-color: var(--c-white); font-size: 62.5%; font-family: var(--ff-sans-selif); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; scroll-behavior: smooth;}@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }} body,h1,h2,h3,h4,h5,h6,ul,li,a,p,blockquote { margin: 0; font-weight: var(--fw-default);} body,h1,h2,h3,h4,h5,h6,ul,li,p,blockquote { color: var(--c-black);} img,svg { display: block; width: 100%; height: auto;} input,label,select,button,textarea { padding: 0; border:0;} h1,h2,h3,h4,h5,h6,p,li,th,td { a { color: var(--c-link); }} h1 { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); }} h2 { font-size: var(--fs-xl); @media (max-width: 834px) { font-size: var(--fs-xl-sp); }} h3 { font-size: var(--fs-lg); @media (max-width: 834px) { font-size: var(--fs-lg-sp); }} h4 { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-sp); }} h5 { font-size: var(--fs-sm); @media (max-width: 834px) { font-size: var(--fs-sm-sp); }} h6 { font-size: var(--fs-xs); @media (max-width: 834px) { font-size: var(--fs-xs-sp); }} ul { padding: 0; list-style: none;} p,li { font-size: var(--fs-md);} p { line-height: var(--p-line-height);} a { color: var(--c-link); text-decoration: none; &:hover { text-decoration: none; cursor: pointer; opacity: .8; }} button,textarea,select { display: block; appearance: none; -webkit-appearance: none; -moz-appearance: none;} textarea { resize: none;}
 .fs-3xl { font-size: var(--fs-3xl); @media (max-width: 834px) { font-size: var(--fs-3xl-sp); }}.fs-2xl { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); }} .fs-xl { font-size: var(--fs-xl); @media (max-width: 834px) { font-size: var(--fs-xl-sp); }} .fs-lg { font-size: var(--fs-lg); @media (max-width: 834px) { font-size: var(--fs-lg-sp); }} .fs-md { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-sp); }} .fs-sm { font-size: var(--fs-sm); @media (max-width: 834px) { font-size: var(--fs-sm-sp); }} .fs-xs { font-size: var(--fs-xs); @media (max-width: 834px) { font-size: var(--fs-xs-sp); }} .fw-bold { font-weight: var(--fw-bold);}
.l-container { max-width: 80rem; margin-inline: auto; padding-inline: var(--spc-6); container: layoutContainer / inline-size; @media (max-width: 520px) { padding-inline: var(--spc-4); } &.-narrow { max-width: 64rem; } &.-slim { max-width: 88rem; } &.-wide { max-width: 96rem; }} html:has(.is-noscroll) { overflow: hidden;} .l-body { display: grid; grid-template-rows: 1fr auto; position: relative; min-height: 100vh; &.is-noscroll { overflow: hidden; } .l-body__main { grid-row: 1/2; position: relative; &.-stretch { display: grid; grid-template-rows: auto 1fr; } &.-pf404 { display: flex; align-content: center; justify-content: center; flex-wrap: wrap; & > * { width: 100%; text-align: center; & + aside { margin-top: var(--spc-4); } } } } .l-body__footer { grid-row: 2/3; position: relative; } .l-body__bg { position: fixed; inset: 0; background-size: cover; background-position: top; background-repeat: no-repeat; }} .l-section { padding-block: var(--spc-4); @media (min-width: 835px) { padding-block: var(--spc-20); } &.-white { .l-section-head { .l-section-head-inner { h2, p { color: var(--c-white); } svg { fill: var(--c-white); } } } } .l-section-head { padding-block: var(--spc-4); @media (min-width: 835px) { padding-block: 0 var(--spc-8); } .l-section-head-inner { padding-inline: var(--spc-4); @media (min-width: 835px) { padding-inline: 0; } h2 { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--spc-4); @media (min-width: 835px) { column-gap: var(--spc-6); } &.-sauna { & > svg { width: 9.2rem; @media (min-width: 835px) { width: calc(9.2rem * 1.2); } } } &.-tjh { & > svg { width: 22.9rem; @media (min-width: 835px) { width: calc(22.9rem * 1.2); } } } &.-location { & > svg { width: 14.2rem; @media (min-width: 835px) { width: calc(14.2rem * 1.2); } } } &.-ai { & > svg { width: 19.4rem; @media (min-width: 835px) { width: calc(19.4rem * 1.2); } } } &.-gallery { & > svg { width: 12.3rem; @media (min-width: 835px) { width: calc(12.3rem * 1.2); } } } & + * { margin-top: var(--spc-2); } } } }} .l-footer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: var(--spc-4); row-gap: var(--spc-8); padding: var(--spc-9) var(--spc-4) var(--spc-40); background-color: var(--c-black); @media (min-width: 835px) { padding: var(--spc-9) var(--spc-9) var(--spc-40); } * { fill: var(--c-black-600); color: var(--c-black-600); } & > .g-head { grid-column: 1 / 3; grid-row: 1 / 2; & > a { display: block; width: 9.6rem; margin-inline: auto; } } & > .g-content { grid-column: 1 / 2; grid-row: 2 / 3; & > * { & + * { margin-top: var(--spc-2); } } } & > .g-bottom { grid-column: 2 / 3; grid-row: 2 / 3; align-self: flex-end; & > a { display: block; & > img { width: 2.4rem; margin-inline: auto; } } }} .l-gnav { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: var(--spc-5) var(--spc-10); z-index: var(--z-40); &.-reverse, &.is-scrolled { padding: var(--spc-4) var(--spc-6); background-color: rgba(var(--c-white-rgb), .5); backdrop-filter: blur(.8rem); .l-gnav__sns, .l-gnav__nav { & > svg { fill: var(--c-black); } } .l-gnav__logo { width: 8rem; visibility: visible; opacity: 1; } } &.is-hidden { transform: translateY(-100%) } .l-gnav__sns, .l-gnav__logo, .l-gnav__nav { display: block; cursor: pointer; &:hover { opacity: .8; } } .l-gnav__sns, .l-gnav__nav { width: 2.4rem; & > svg { fill: var(--c-white); } } .l-gnav__logo { width: 10.8rem; visibility: hidden; opacity: 0; & > svg { fill: var(--c-black); } }} .l-bnav { position: fixed; inset: auto 5.6vw 5.6vw 5.6vw; max-width: 56rem; margin-inline: auto; padding: var(--spc-2); background-color: rgba(var(--c-white-rgb), .1); backdrop-filter: blur(.8rem); @media (min-width: 521px) { inset: auto var(--spc-6) var(--spc-6) var(--spc-6); padding: var(--spc-4) var(--spc-6) var(--spc-6); } &.is-scrolled { inset: auto 0 0 0; padding: 3.2vw 5.6vw 5.6vw; background-color: rgba(var(--c-black-rgb), .95); @media (min-width: 521px) { padding: var(--spc-4) var(--spc-6) var(--spc-6); } } &.is-hidden { transform: translateY(100%) } .l-bnav-head { padding-block: var(--spc-1); h2 { text-align: center; color: var(--c-white); & + * { margin-top: var(--spc-1); } } img { width: 6.4rem; margin-inline: auto; } & + * { margin-top: var(--spc-2); } } .l-bnav-content { display: flex; gap: var(--spc-2); & > a { flex: 1; } }} .l-nav { display: grid; grid-template-rows: auto 1fr auto; position: fixed; inset: 0 0 0 auto; width: 100%; max-width: 60rem; padding: var(--spc-5) var(--spc-6) var(--spc-6); background-color: var(--c-white); transform: translateX(100%); z-index: var(--z-50); &.is-active { transform: translateX(0); box-shadow: 0 0 .8rem rgba(var(--c-black-rgb), .2); } .l-nav-head, .l-nav-content { & + * { border-top: solid .1rem var(--c-black-100); } } & > .l-nav-head { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--spc-2) var(--spc-4); } & > .l-nav-content { display: grid; grid-template-rows: 1fr auto; padding: var(--spc-10) var(--spc-2) var(--spc-8); @media (max-height: 768px) { padding: var(--spc-6) var(--spc-2); } } & > .l-nav-bottom { display: grid; grid-template-columns: 1fr auto; padding-top: var(--spc-4); column-gap: var(--spc-4); * { fill: var(--c-black); color: var(--c-black); } & > .g-content { & > * { & + * { margin-top: var(--spc-2); } } } & > .g-bottom { align-self: flex-end; & > a { display: block; & > img { width: 2.4rem; margin-inline: auto; } } } } .l-nav__sns, .l-nav__logo, .l-nav__close { display: block; cursor: pointer; &:hover { opacity: .8; } } .l-nav__sns, .l-nav__close { width: 3.4rem; & > svg { fill: var(--c-black); } } .l-nav__sns { & > svg { width: 2.4rem; } } .l-nav__logo { width: 8rem; & > svg { fill: var(--c-black); } } .l-nav__list { & > li { &.-heads { display: flex; & + * { margin-top: var(--spc-10); @media (max-height: 768px) { margin-top: var(--spc-6); } } & > span { display: block; & + span { position: relative; margin-left: var(--spc-4); padding-left: var(--spc-4); &:before { content: ""; position: absolute; inset: 0 auto 0 0; width: .1rem; height: 150%; margin: auto; background-color: var(--c-black-100); transform: translateX(-50%) rotate(45deg); } } & > a { display: block; &.w-110 { width: 11rem; } &.w-67 { width: 6.7rem; } } } } &.-devide { display: grid; grid-template-columns: auto 1fr auto; gap: var(--spc-4); & > * { align-self: self-start; } & > span { display: block; height: .1rem; margin-top: .6rem; background-color: var(--c-black-100); & + a { line-height: 1em; } } } & + li { margin-top: var(--spc-6); @media (max-height: 768px) { margin-top: var(--spc-4); } } & > a { display: block; color: var(--c-black); &.-sauna { & > svg { width: calc(9.2rem * .8); @media (max-height: 768px) { width: calc(9.2rem * .6); } } } &.-tjh { & > svg { width: calc(22.9rem * .8); @media (max-height: 768px) { width: calc(22.9rem * .6); } } } &.-location { & > svg { width: calc(14.2rem * .8); @media (max-height: 768px) { width: calc(14.2rem * .6); } } } &.-ai { & > svg { width: calc(19.4rem * .8); @media (max-height: 768px) { width: calc(19.4rem * .6); } } } &.-gallery { & > svg { width: calc(12.3rem * .8); @media (max-height: 768px) { width: calc(12.3rem * .6); } } } & > * { color: var(--c-black); & + * { margin-top: var(--spc-1); } } } } } .l-nav__reservation { .l-nav__reservation-head { h2 { text-align: center; } img { width: 4.8rem; margin-inline: auto; } & + * { margin-top: var(--spc-2); } } .l-nav__reservation-content { display: flex; gap: var(--spc-2); & > a { flex: 1; } } }} .l-galleryNav { position: fixed; inset: 0; height: 100svh; background-color: var(--c-white); z-index: var(--z-50); .l-galleryNav-inner { display: grid; grid-template-rows: auto 1fr auto; height: 100svh; padding-block: var(--spc-4); } .l-galleryNav-head { display: flex; justify-content: center; position: relative; padding-inline: var(--spc-4); & + * { margin-top: var(--spc-3); padding-top: var(--spc-4); border-top: solid .1rem var(--c-black-100); } } .l-galleryNav-content { overflow-y: scroll; .l-galleryNav-content-inner { display: flex; justify-content: center; flex-wrap: wrap; padding-inline: var(--spc-4); } } .l-galleryNav-bottom { padding: var(--spc-4); } .l-galleryNav__contents { width: 100%; img { max-width: 55svh; margin-inline: auto; } } .l-galleryNav__logo { width: 8rem; } .l-galleryNav__close { position: absolute; inset: 0 var(--spc-5) 0 auto; width: 3.4rem; height: 3.1rem; margin: auto; } .l-galleryNav__text { padding-inline: var(--spc-10); writing-mode: vertical-rl; }}
.c-btn { display: inline-block; padding: 1em; border: solid .1rem var(--c-black); text-align: center; color: var(--c-black); &.-white { color: var(--c-white); border-color: var(--c-white); } &.-bgWhite { background-color: var(--c-white); border-color: var(--c-white); &.-mark { & > span { border-color: var(--c-black); } } } &.-bgBlack { color: var(--c-white); background-color: var(--c-black); &.-mark { & > span { border-color: var(--c-white); color: var(--c-white); } } } &.-block { display: block; } &.-mark { display: inline-grid; grid-template-columns: auto 1fr; @media (max-width: 520px) { padding: 1em .5em; } &.-block { display: grid; } & > span { align-self: center; padding-inline: .5em; border: solid .1rem var(--c-black); border-radius: 3em; } } &:hover { opacity: 1; animation: blur-anime .5s linear; }}@keyframes blur-anime { 0% {filter: blur(0);} 50% {filter: blur(.1rem);} 100% {filter: blur(0);}} .c-btnGmap { display: block; width: 10rem; padding: var(--spc-1) var(--spc-2); border-radius: .4rem; background-color: var(--c-white);} .c-btnCopy { display: flex; align-items: center; gap: var(--spc-2); padding: .25em .5em; border: solid .1rem var(--c-black); border-radius: .4rem; cursor: pointer; .c-btnCopy-bottom { width: 1.6rem; }}
.c-floor { @container layoutContainer (min-width: 600px) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "thumbs map-sf" "thumbs map-ff" "thumbs ."; column-gap: var(--spc-4); row-gap: var(--spc-2); } & > * { & + * { margin-top: var(--spc-2); @container layoutContainer (min-width: 600px) { margin-top: 0; } } } .c-floor__thumbs { padding: var(--spc-2) var(--spc-2) var(--spc-2); background-color: var(--c-black); grid-area: thumbs; @container layoutContainer (min-width: 600px) { padding: var(--spc-3) var(--spc-3) var(--spc-2); } & > li { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: var(--spc-2); row-gap: var(--spc-1); @container layoutContainer (min-width: 600px) { display: block; } & > * { & + * { @container layoutContainer (min-width: 600px) { margin-top: var(--spc-2); } } } & > .g-thumb { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-repeat: no-repeat; &.-thumb01 { grid-column: 1 / 2; grid-row: 1 / 2; } &.-thumb02 { grid-column: 2 / 3; grid-row: 1 / 2; } } & > .g-description { grid-column: 1 / 3; grid-row: 2 / 3; color: var(--c-black-300); } } } .c-floor__map { position: relative; max-width: 48rem; &.-sf { grid-area: map-sf; align-self: flex-end; & > span { & + * { margin-top: var(--spc-1); } } & > svg { width: 70%; } } &.-ff { grid-area: map-ff; & > span { position: absolute; inset: 0 auto auto 0; } } & > span { display: block; } }} .c-floorBtn { fill: var(--c-black-100); mix-blend-mode: multiply; cursor: pointer; &.is-active { fill: var(--c-black-300); }}
.c-grid { display: flex; align-items: center; flex-wrap: wrap; padding: var(--spc-2) var(--spc-3); background-color: var(--c-white); @media (min-width: 835px) { padding: var(--spc-4) var(--spc-6); } &.-thumb { background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 3 / 2; } &.-devide { display: grid; grid-template-columns: 12.8rem 1fr; @media (min-width: 835px) { grid-template-columns: 16rem 1fr; } &.-half { grid-template-columns: 1fr 1fr; } .c-grid-content { border-left: solid .1rem var(--c-black-100); padding-left: var(--spc-4); .c-grid-content-inner { display: flex; gap: var(--spc-4); section { span { line-height: 1em; } } } } } &.-description { padding: 0; color: var(--c-black-300); background-color: transparent; } &.-option { .c-grid-content { display: flex; gap: var(--spc-3); & + * { margin-top: var(--spc-1); } & > section { display: flex; align-items: center; gap: var(--spc-1); &:before { content: ""; display: block; width: .8rem; height: .8rem; border: solid .2rem var(--c-green); border-radius: 100%; } } } } .c-grid__description { margin-top: var(--spc-1); color: var(--c-black-600); } .c-grid__services { display: flex; gap: var(--spc-1); & > li { width: 3.2rem; } }} .c-gridIconWrap { display: flex; align-items: center; gap: var(--spc-3); @media (min-width: 835px) { gap: var(--spc-4); } span { line-height: 1em; } &.-sauna, &.-water { .c-gridIconWrap-head { white-space: nowrap; img { transform: translateY(.2rem); } } } &.-sauna { .c-gridIconWrap-head { & > * { color: var(--c-red); } } } &.-water { .c-gridIconWrap-head { & > * { color: var(--c-blue); } } } &.-iconTop { align-items: flex-start; } .c-gridIconWrap-head { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--spc-1) / 2); width: 2.4rem; flex-shrink: 0; & > * { line-height: 1em; } }}
.p-gallery { padding-top: var(--spc-36); .p-gallery__title { text-align: center; & + * { margin-top: var(--spc-3); @media (min-width: 835px) { margin-top: var(--spc-6); } } & > svg { width: 12.3rem; margin-inline: auto; @media (min-width: 835px) { width: calc(12.3rem * 1.2); } & + * { margin-top: var(--spc-2); } } } .p-gallery__description { max-width: 32rem; margin-inline: auto; @media (min-width: 835px) { max-width: 40rem; } & + * { margin-top: var(--spc-6); @media (min-width: 835px) { margin-top: var(--spc-8); } } & > p { & + p { margin-top: var(--spc-1); } } } .p-gallery__sns { display: flex; justify-content: center; gap: var(--spc-3); & + * { margin-top: var(--spc-3); @media (min-width: 835px) { margin-top: var(--spc-6); } } & > li { & > a { display: block; width: 2.4rem; margin-inline: auto; & + * { margin-top: var(--spc-2); } } } } .p-gallery__contents { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--spc-2); padding-block: var(--spc-4); @media (min-width: 835px) { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } & > li { cursor: pointer; } }}