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-homeHero { position: relative; height: 100svh; @media (min-width: 521px) { min-height: 60rem; } .p-homeHero-inner { position: relative; } .p-homeHero__bgs { position: absolute; inset: 0; overflow: hidden; z-index: -1; & > span { position: absolute; inset: 0; background-size: cover; background-position: 65% 50%; background-repeat: no-repeat; animation-duration: 50600ms; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: slideIn; z-index: 0; transition: opacity 600ms ease-in-out; &.is-passed { z-index: 2; opacity: 0; } &.is-current { z-index: 1; } &:nth-of-type(2) { animation-delay: 10000ms; } &:nth-of-type(3) { animation-delay: 20000ms; } &:nth-of-type(4) { animation-delay: 30000ms; } } } .p-homeHero__title { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--spc-6); width: 100%; height: 100%; transform: translateY(-10%); & > * { width: 100%; } .p-homeHero__title-head { & > svg { width: 12rem; margin-inline: auto; fill: var(--c-white); } } .p-homeHero__title-content { display: flex; justify-content: center; align-items: start; flex-direction: row-reverse; gap: var(--spc-2); & > h1 { writing-mode: vertical-rl; letter-spacing: .25em; color: var(--c-white); } & > img { width: 2.8rem; } } }} @keyframes slideIn { 0% { background-position: 65% 50%; } 100% { background-position: 35% 50%; }} .p-homeIntroduction { padding: var(--spc-9) var(--spc-4); @media (min-width: 835px) { padding: var(--spc-20) 0; } .p-homeIntroduction-content, .p-homeIntroduction__description { display: flex; flex-direction: row-reverse; justify-content: space-between; } .p-homeIntroduction-content { & + * { margin-top: var(--spc-6); } } .p-homeIntroduction-bottom { max-width: 25.6rem; @media (min-width: 835px) { max-width: 36rem; } p { & + p { margin-top: var(--spc-2); } } } .p-homeIntroduction__title, .p-homeIntroduction__description p { writing-mode: vertical-rl; } .p-homeIntroduction__title { letter-spacing: .25em; } .p-homeIntroduction__description { gap: var(--spc-2); p { line-height: var(--line-height); } }} .p-homeConcept { padding-bottom: var(--spc-4); @media (min-width: 835px) { padding-bottom: var(--spc-20); } .p-homeConcept-head { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: 16 / 9; max-width: 96rem; margin-inline: auto; background-size: cover; background-position: center; background-repeat: no-repeat; & + * { margin-top: var(--spc-6); @media (min-width: 835px) { margin-top: var(--spc-20); } } } .p-homeConcept-content { padding-inline: var(--spc-4); @media (min-width: 835px) { padding-inline: 0; } & + * { margin-top: var(--spc-6); @media (min-width: 835px) { margin-top: var(--spc-12); } } } .p-homeConcept__copy, .p-homeConcept__copyEn { text-align: center; color: var(--c-white); } .p-homeConcept__copyEn { position: absolute; inset: auto 0 0 0; padding: var(--spc-4); @media (min-width: 835px) { padding: var(--spc-8); } } .p-homeConcept__title { & + * { margin-top: var(--spc-2); } } .p-homeConcept__description { p { & + p { margin-top: var(--spc-2); } } } .p-homeConcept__section { display: flex; & > li { flex: 1; position: relative; &.-sauna { & > a { svg { width: calc(9.2rem * .25); } } } &.-tjh { & > a { svg { width: calc(22.9rem * .25); } } } &.-location { & > a { svg { width: calc(14.2rem * .25); } } } & + li { &:before, &:after { content: ""; position: absolute; inset: 0 auto 0 -.1rem; width: .1rem; height: 1.6rem; margin: auto; background-color: var(--c-white); z-index: var(--z-10); } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } } & > a { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; gap: var(--spc-1); aspect-ratio: 3 / 2; overflow: hidden; &:hover { opacity: 1; & > span { scale: 1.1; } } & > * { position: relative; } & > span { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } h3 { width: 100%; text-align: center; color: var(--c-white); } svg { fill: var(--c-white); } } } }} .p-homeSauna { background-color: var(--c-black); .p-homeSauna__grid { display: grid; gap: var(--spc-1); & > section { display: flex; flex-wrap: wrap; gap: var(--spc-1); .fb-thumb01 { flex: 1fr; width: calc((100% - var(--spc-1)) / 2); } .fb-thumb02 { flex: 1fr; width: calc((100% - var(--spc-1)) / 2); } .fb-capacity { flex-grow: 1; } .fb-option { flex-grow: 2; } .fb-temperature { flex-grow: 2; } .fb-tv { flex-grow: 2; } .fb-thumb03 { width: calc((100% - var(--spc-1)) / 2); } .fb-thumb04 { width: calc((100% - var(--spc-1)) / 2); } .fb-description { width: 100%; } .fb-box { flex-grow: 1; } .fb-chair { flex-grow: 1; } .fb-time { flex-grow: 1; } } }} .p-homeTjh { background-color: var(--c-black-100); .p-homeTjh__thumb { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-repeat: no-repeat; & + * { margin-top: var(--spc-6); } } .p-homeTjh__floor { .p-homeTjh__floor-head { padding-inline: var(--spc-4); @media (min-width: 835px) { padding-inline: var(--spc-6); } & + * { margin-top: var(--spc-2); @media (min-width: 835px) { margin-top: var(--spc-6); } } } & + * { margin-top: var(--spc-4); } } .p-homeTjh__grid { display: flex; flex-wrap: wrap; gap: var(--spc-1); .fb-check { grid-area: check; flex-grow: 2; } .fb-bed { grid-area: bed; flex-grow: 1; } .fb-bbq { grid-area: bbq; flex-grow: 2; } .fb-equipment { grid-area: equipment; width: 100%; } .fb-amenity { grid-area: amenity; width: 100%; } }} .p-homeLocation { .p-homeLocation-content { position: relative; & + * { margin-top: var(--spc-6); } } .p-homeLocation__map { position: absolute; inset: 0; overflow: hidden; z-index: -1; & > span { display: block; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; transform: translateX(15.2rem); } } .p-homeLocation__address { display: inline-block; padding: var(--spc-4); background-color: var(--c-black); @media (min-width: 835px) { display: block; width: 32rem; padding: var(--spc-6); } * { color: var(--c-white); } .p-homeLocation__address-head { svg { width: 6.1rem; fill: var(--c-white); } & + * { margin-top: var(--spc-2); } } .p-homeLocation__address-content { & + * { margin-top: var(--spc-3); } } .p-homeLocation__address-bottom { & > * { & + * { margin-top: var(--spc-1); } } } } .p-homeLocation__places { & > li { max-width: 15.2rem; padding: var(--spc-4); @media (min-width: 835px) { max-width: 32rem; } & + li { border-top: solid .1rem var(--c-black-100); } } .p-homeLocation__places-head { & + * { margin-top: var(--spc-1); } } } .p-homeLocation__howto { padding: var(--spc-3) var(--spc-4) var(--spc-4); background-color: var(--c-black-100); @media (min-width: 835px) { padding: var(--spc-6) var(--spc-8) var(--spc-8); } & + .p-homeLocation__howto { margin-top: var(--spc-1); } .p-homeLocation__howto-head { & + * { margin-top: var(--spc-3); } h3 { & + * { margin-top: var(--spc-1); } } } .p-homeLocation__howto-content { & > section { display: flex; flex-wrap: wrap; column-gap: var(--spc-2); row-gap: var(--spc-1); padding: var(--spc-2) var(--spc-3) var(--spc-3); background-color: var(--c-white); @media (min-width: 835px) { column-gap: var(--spc-6); row-gap: var(--spc-4); padding: var(--spc-5) var(--spc-6) var(--spc-6); } & + section { margin-top: var(--spc-1); } & > h4 { width: 100%; & + * { margin-top: var(--spc-1); @media (min-width: 835px) { margin-top: 0; } } } & > section { display: flex; flex-wrap: wrap; align-content: space-between; max-width: 40rem; @media (min-width: 835px) { flex: 1; } &.-only { @media (min-width: 835px) { flex: none; width: calc(50% - (var(--spc-6) / 2)); } } & > * { width: 100%; } & > h5 { & + * { margin-top: var(--spc-1); } } & > img { & + * { margin-top: var(--spc-1); } } & > p { color: var(--c-black-600); } } } } }} .p-homeAi { background-color: var(--c-black-600); .p-homeAi__section { & + .p-homeAi__section { margin-top: var(--spc-2); } &.-outline { border: solid .1rem var(--c-white); .p-homeAi__section-head, .p-homeAi__section-content { background-color: transparent; } * { color: var(--c-white); } .p-homeAi__section-head { & + * { margin-top: 0; border-top: solid .1rem var(--c-white); } } .p-homeAi__section-content { & > ul { & > li { & + li { border-color: var(--c-black-300); } } } } } .p-homeAi__section-head, .p-homeAi__section-content { padding: var(--spc-4); background-color: var(--c-white); } .p-homeAi__section-head { & + * { margin-top: .1rem; } } .p-homeAi__section-content { & > ul { & > li { & > h4 { margin-top: calc(var(--spc-1) * -1); & + * { margin-top: var(--spc-2); } } & + li { margin-top: var(--spc-4); padding-top: var(--spc-4); border-top: solid .1rem var(--c-black-100); } } } } }} .p-homeGallery { position: relative; overflow: hidden; & > * { position: relative; } .p-homeGallery-content { .p-homeGallery-content-inner { position: relative; aspect-ratio: 16 / 9; } } .p-homeGallery-bottom { padding-block: var(--spc-4); .p-homeGallery-bottom-inner { display: flex; justify-content: center; } } .p-homeGallery__bg { position: absolute; inset: -8rem; background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(4rem); &:after { content: ""; position: absolute; inset: 0; background-color: var(--c-black); opacity: .1; } } .p-homeGallery__selected { display: grid; grid-template-columns: 1fr auto; gap: var(--spc-3); position: absolute; inset: 0; .p-homeGallery__selected-content { background-size: cover; background-position: center; background-repeat: no-repeat; } .p-homeGallery__selected-bottom { padding-bottom: var(--spc-2); writing-mode: vertical-rl; color: var(--c-white); } } .p-homeGallery__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--spc-2); margin-top: var(--spc-2); & > li { aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; } }}