/* 一日三組の宿 汀（制作の見本）
   色：夜の森の地・和紙の字・苔・灯りの金。朝の節だけ和紙の地。
   字：Zen Antique／Noto Serif JP／Cinzel。端末の字：ヒラギノ明朝・游明朝。
   しるし：霧が晴れ、時が移る。 */
:root{
  --night:#0F1A17; --face:#16241F; --washi:#EFEAE0; --mute:#A9B0A6; --moss:#6F7F5E; --lamp:#D9B36C;
  --ink:#1C241F; --ink2:#4F5852; --lamp-d:#8A6A2E; --hair:rgba(239,234,224,.13); --hair-d:rgba(28,36,31,.14);
  --ff-h:"Zen Antique","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --ff-b:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --ff-l:"Cinzel","Trajan Pro","Times New Roman",serif;
  --slow:cubic-bezier(.3,.02,.12,1); --soft:cubic-bezier(.45,.05,.25,1);
  --gut:clamp(24px,6.4vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--washi);font-family:var(--ff-b);font-weight:400;font-size:14.5px;line-height:2.1;letter-spacing:.08em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-break:strict;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
h1,h2,h3{font-weight:400}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
::selection{background:var(--lamp);color:var(--ink)}
:focus-visible{outline:1px solid var(--lamp);outline-offset:4px}
.wrap{overflow-x:hidden}
@supports (overflow:clip){.wrap{overflow-x:clip}}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- 共通 ---------- */
.lbl{font-family:var(--ff-l);font-size:12px;font-weight:400;letter-spacing:.36em;line-height:1;text-transform:uppercase;color:var(--lamp)}
.lbl span{margin-left:.9em;letter-spacing:.14em;color:var(--mute)}
.vh{writing-mode:vertical-rl;font-family:var(--ff-h);font-size:clamp(27px,7.6vw,42px);line-height:1.6;letter-spacing:.2em;white-space:nowrap}
.vt{writing-mode:vertical-rl;font-size:14.5px;line-height:2.4;letter-spacing:.26em;white-space:nowrap;color:var(--mute)}
.note{font-size:12px;line-height:1.9;letter-spacing:.06em;color:var(--mute)}
.ph{position:relative}
.ph__z{display:block;position:relative;overflow:hidden;background:var(--face)}
.ph__z img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;will-change:transform}

/* 出てくる動き（プログラムが動く時だけ）：にじんで、はっきりする */
html.js [data-r=""],html.js [data-r="fade"]{opacity:0;filter:blur(7px);transform:translateY(10px);transition:opacity 1.8s var(--soft) var(--d,0s),filter 2s var(--soft) var(--d,0s),transform 2.2s var(--slow) var(--d,0s)}
html.js [data-r=""].is-in,html.js [data-r="fade"].is-in{opacity:1;filter:none;transform:none}
html.js [data-r="fade"]{transform:none}
html.js [data-r="v"]{clip-path:inset(-24px -24px 100% -24px);opacity:0;transition:clip-path 2.6s var(--slow) var(--d,0s),opacity 1.4s var(--soft) var(--d,0s)}
html.js [data-r="v"].is-in{clip-path:inset(-24px -24px -24px -24px);opacity:1}
html.js .ph[data-r="img"] .ph__z img{opacity:0;filter:blur(18px);scale:1.08;transition:opacity 2s var(--soft) var(--d,0s),filter 2.6s var(--soft) var(--d,0s),scale 3.4s var(--slow) var(--d,0s)}
html.js .ph[data-r="img"].is-in .ph__z img{opacity:1;filter:none;scale:1}

/* ---------- 始まりの幕：白い霧が、左右へ流れて晴れる ---------- */
.veil{display:none}
html.js .veil{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden;visibility:visible;transition:visibility 0s 3.6s}
html.js.is-loaded .veil{visibility:hidden}
.veil__base{position:absolute;inset:0;background:#E9E6E1;opacity:1;transition:opacity 1.6s var(--soft) .1s}
.veil__l,.veil__r{position:absolute;top:-12%;bottom:-12%;width:76%;transform:translate3d(0,0,0);opacity:1;transition:transform 3.4s var(--slow) .05s,opacity 2.8s var(--soft) .6s;
  background:radial-gradient(42% 30% at 46% 34%,rgba(250,249,246,.95),rgba(250,249,246,0) 70%),radial-gradient(48% 26% at 58% 70%,rgba(214,209,204,.8),rgba(214,209,204,0) 70%),radial-gradient(30% 22% at 30% 56%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%),#E6E3DE}
.veil__l{left:-8%;-webkit-mask-image:linear-gradient(to right,#000 58%,transparent 100%);mask-image:linear-gradient(to right,#000 58%,transparent 100%)}
.veil__r{right:-8%;-webkit-mask-image:linear-gradient(to left,#000 58%,transparent 100%);mask-image:linear-gradient(to left,#000 58%,transparent 100%)}
html.js.is-loaded .veil__base{opacity:0}
html.js.is-loaded .veil__l{transform:translate3d(-82%,0,0);opacity:0}
html.js.is-loaded .veil__r{transform:translate3d(82%,0,0);opacity:0}
.veil__mark{position:absolute;left:50%;top:50%;display:grid;justify-items:center;color:var(--ink);transform:translate(-50%,-54%);opacity:0;filter:blur(8px);animation:inkIn 1.6s var(--soft) .25s forwards}
.veil__ja{font-family:var(--ff-h);font-size:58px;line-height:1}
.veil__sub{margin-top:22px;writing-mode:vertical-rl;font-size:12px;letter-spacing:.46em;line-height:1;color:var(--ink2)}
.veil__en{margin-top:18px;font-family:var(--ff-l);font-size:12px;letter-spacing:.5em;padding-left:.5em;line-height:1;color:var(--ink2)}
html.js.is-loaded .veil__mark{animation:none;opacity:0;filter:blur(10px);transition:opacity 1s var(--soft),filter 1.2s var(--soft)}
@keyframes inkIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}

/* ---------- 上の帯 ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;height:64px;padding-inline:var(--gut);color:var(--ink);transition:transform 1s var(--slow),background-color .8s,color .8s,opacity 1.6s var(--soft)}
.hd.is-solid{background:rgba(15,26,23,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--washi)}
.hd.is-hide{transform:translateY(-102%)}
html.js .hd{opacity:0}
html.js.is-loaded .hd{opacity:1;transition-delay:0s,0s,0s,2.4s}
html.is-menu .hd{transform:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--washi)}
.hd__logo{display:flex;align-items:center;gap:12px;min-height:44px;line-height:1}
.hd__ja{font-family:var(--ff-h);font-size:25px}
.hd__en{font-family:var(--ff-l);font-size:12px;letter-spacing:.38em}
.hd__nav,.hd__rsv{display:none}
.hd__btn{display:grid;place-items:center;min-width:60px;height:44px;margin:0 -10px 0 auto;font-family:var(--ff-l);font-size:12px;letter-spacing:.32em;padding-left:.32em}
.hd__btn span{position:relative;padding-bottom:7px}
.hd__btn span::after{content:"";position:absolute;left:12%;right:calc(12% + .32em);bottom:0;height:1px;background:currentColor;opacity:.7;transition:transform .8s var(--slow)}
html.is-menu .hd__btn span::after{transform:scaleX(.3)}

/* 目次（縦書きで並べる） */
.gm{position:fixed;z-index:40;inset:0;overflow:auto;background:var(--night);visibility:hidden;opacity:0;transition:opacity 1s var(--soft),visibility 0s 1s}
html.is-menu .gm{visibility:visible;opacity:1;transition:opacity 1s var(--soft)}
html.is-menu,html.is-menu body{overflow:hidden}
.gm__in{display:flex;flex-direction:column;align-items:center;min-height:100%;padding:110px var(--gut) 90px}
.gm__list{writing-mode:vertical-rl;display:flex;gap:6px;margin:4vh auto 0}
.gm__list li{opacity:0;filter:blur(6px);transition:opacity .6s,filter .6s}
html.is-menu .gm__list li{opacity:1;filter:none;transition:opacity 1.2s var(--soft) calc(.15s + var(--i,0)*.08s),filter 1.4s var(--soft) calc(.15s + var(--i,0)*.08s)}
.gm__list li:nth-child(2){--i:1}.gm__list li:nth-child(3){--i:2}.gm__list li:nth-child(4){--i:3}.gm__list li:nth-child(5){--i:4}.gm__list li:nth-child(6){--i:5}.gm__list li:nth-child(7){--i:6}.gm__list li:nth-child(8){--i:7}
.gm__list a{display:block;padding:6px 8px;font-family:var(--ff-h);font-size:19px;line-height:1.4;letter-spacing:.32em;white-space:nowrap}
.gm__rsv{display:flex;align-items:center;justify-content:center;width:100%;max-width:340px;min-height:54px;margin-top:56px;background:var(--lamp);color:var(--ink);font-size:14px;letter-spacing:.2em}
.gm__info{margin-top:22px;font-size:13px;line-height:2;letter-spacing:.12em;color:var(--mute);text-align:center}

/* ---------- 1. 最初の画面 ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#D9D3D3}
.hero::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:44%;background:linear-gradient(to bottom,rgba(15,26,23,0),rgba(15,26,23,.42) 55%,rgba(15,26,23,.86));pointer-events:none}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__media picture,.hero__media img{display:block;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:50% 50%}
html.js .hero__media img{scale:1.1;filter:blur(10px);transition:scale 4.4s var(--slow) .1s,filter 3.2s var(--soft) .2s}
html.js.is-loaded .hero__media img{scale:1;filter:none}
.hero__ttl{position:absolute;z-index:3;top:calc(64px + 3.2svh);right:calc(var(--gut) - 2px);display:block;writing-mode:vertical-rl;color:var(--ink);text-shadow:0 0 22px rgba(240,236,232,.75),0 0 2px rgba(240,236,232,.5)}
.hero__l1{display:block;font-family:var(--ff-h);font-size:clamp(34px,9.6vw,58px);line-height:1.2;letter-spacing:.18em;white-space:nowrap}
.hero__l2{display:block;margin-block-start:.9em;font-size:clamp(15.5px,4.3vw,21px);line-height:2.15;letter-spacing:.34em}
.hero__l2>span{display:block;white-space:nowrap}
html.js .hero__l1,html.js .hero__l2>span{clip-path:inset(-20px -20px 100% -20px);opacity:0;transition:clip-path 2.8s var(--slow),opacity 1.6s var(--soft)}
html.js .hero__l1{transition-delay:1.2s}
html.js .hero__l2>span:nth-child(1){transition-delay:1.9s}
html.js .hero__l2>span:nth-child(2){transition-delay:2.3s}
html.js.is-loaded .hero__l1,html.js.is-loaded .hero__l2>span{clip-path:inset(-20px -20px -20px -20px);opacity:1}
.hero__foot{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 var(--gut) calc(70px + env(safe-area-inset-bottom,0px))}
.hero__lead{font-size:16px;line-height:1.95;letter-spacing:.04em;color:rgba(239,234,224,.92)}
.hero__facts{display:flex;gap:26px;margin-top:16px}
.hero__facts div{display:flex;flex-direction:column;gap:7px}
.hero__facts dt{font-size:12px;line-height:1;letter-spacing:.26em;color:var(--mute)}
.hero__facts dd{font-family:var(--ff-l);font-size:21px;line-height:1;letter-spacing:.06em}
html.js .hero__foot,html.js .hero__scroll{opacity:0;filter:blur(6px);transition:opacity 1.8s var(--soft) 2.8s,filter 2s var(--soft) 2.8s}
html.js.is-loaded .hero__foot,html.js.is-loaded .hero__scroll{opacity:1;filter:none}
.hero__scroll{position:absolute;z-index:3;right:calc(var(--gut) - 4px);bottom:calc(72px + env(safe-area-inset-bottom,0px));writing-mode:vertical-rl;font-family:var(--ff-l);font-size:12px;letter-spacing:.34em;line-height:1;color:rgba(239,234,224,.8)}
html.js.is-loaded .hero__scroll{animation:breathe 4.8s var(--soft) 4.6s infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.25}}

/* 流れ続ける薄い霧（半透明のぼかしの帯） */
.mist{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.mist__b{position:absolute;left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;will-change:transform;animation:mistL 96s linear infinite}
.mist__b--1{top:31%;height:30%;opacity:.62;background-image:radial-gradient(24% 46% at 26% 52%,rgba(255,255,255,.78),rgba(255,255,255,0) 72%),radial-gradient(20% 38% at 70% 44%,rgba(255,255,255,.6),rgba(255,255,255,0) 72%)}
.mist__b--2{top:45%;height:26%;opacity:.5;animation:mistR 128s linear infinite;background-image:radial-gradient(28% 44% at 36% 50%,rgba(250,248,244,.7),rgba(250,248,244,0) 72%),radial-gradient(18% 36% at 80% 56%,rgba(250,248,244,.55),rgba(250,248,244,0) 72%)}
.mist__b--3{top:57%;height:22%;opacity:.38;animation-duration:74s;background-image:radial-gradient(22% 44% at 20% 50%,rgba(255,255,255,.6),rgba(255,255,255,0) 72%),radial-gradient(24% 40% at 64% 46%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%)}
@keyframes mistL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mistR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
html.js .mist--hero{opacity:0;transition:opacity 4s var(--soft) 1.6s}
html.js.is-loaded .mist--hero{opacity:1}
.mist--dim .mist__b{opacity:.07}
.mist--dim .mist__b--2{top:38%;height:34%}
.mist--low .mist__b--1{top:52%}
.mist--low .mist__b--3{top:70%}

/* ---------- 2. 宿の約束 ---------- */
.promise{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:120px var(--gut) 110px;overflow:hidden;background:var(--night)}
.promise__lbl{position:absolute;z-index:1;top:76px;left:var(--gut)}
.promise__v{position:relative;z-index:1;writing-mode:vertical-rl}
.promise__v p{font-size:16px;line-height:2.9;letter-spacing:.32em;white-space:nowrap}
.promise__v .promise__last{margin-block-start:1.6em;font-family:var(--ff-h);font-size:21px;line-height:2.4;letter-spacing:.28em;color:var(--lamp)}

/* ---------- 3. 過ごし方（止めた姿・プログラムなしは一覧） ---------- */
.flow{position:relative;padding:110px var(--gut) 100px;background:var(--face)}
.flow__head{margin-bottom:46px}
.flow__h{margin-top:20px;font-family:var(--ff-h);font-size:22px;line-height:1.85;letter-spacing:.14em}
.flow__list{display:grid;gap:30px}
.flow__step{display:grid;grid-template-columns:44% 1fr;gap:22px;align-items:center}
.flow__ph{aspect-ratio:4/5;overflow:hidden;background:var(--night)}
.flow__ph img{width:100%;height:100%;object-fit:cover}
.flow__time{font-family:var(--ff-l);font-size:30px;line-height:1;letter-spacing:.04em;color:var(--lamp)}
.flow__ttl{margin-top:14px;font-family:var(--ff-h);font-size:21px;line-height:1.5;letter-spacing:.2em}
.flow__say{margin-top:8px;font-size:13px;line-height:2;letter-spacing:.04em;color:var(--mute)}
.flow__say span{display:block}
.flow__fog,.flow__clock,.flow__dots{display:none}

/* 過ごし方（動く姿）：画面を止め、スクロールで時刻が進む */
html.js .flow{height:calc(100svh + 6.7 * 74svh);padding:0;background:var(--night)}
html.js .flow__pin{--g:#33362B;--fog:rgba(236,233,228,.9);position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--g);color:var(--washi);transition:color 1.2s var(--soft)}
html.js .flow__pin.is-light{color:var(--ink)}
html.js .flow__pin::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:30%;background:linear-gradient(to bottom,var(--g) 18%,transparent);pointer-events:none}
html.js .flow__head{position:absolute;z-index:6;top:82px;left:var(--gut);margin:0}
html.js .flow__head .lbl{color:inherit;opacity:.75}
html.js .flow__h{margin-top:14px;font-size:15px;line-height:1.95;letter-spacing:.2em}
html.js .flow__list{position:absolute;inset:0;display:block}
html.js .flow__step{position:absolute;inset:0;display:block;pointer-events:none}
html.js .flow__ph{position:absolute;left:0;right:0;top:0;height:69%;aspect-ratio:auto;background:none;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 66%,transparent 100%)}
html.js .flow__ph img{opacity:0;filter:blur(20px) brightness(1.2);scale:1.07;transition:opacity 1.5s var(--soft),filter 1.9s var(--soft),scale 3.2s var(--slow)}
html.js .flow__step.is-on .flow__ph img{opacity:1;filter:none;scale:1;transition-delay:.4s}
html.js .flow__time{display:none}
html.js .flow__txt{position:absolute;z-index:6;right:calc(var(--gut) - 6px);top:57%;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:14px;opacity:0;filter:blur(8px);transition:opacity 1s var(--soft),filter 1.2s var(--soft)}
html.js .flow__step.is-on .flow__txt{opacity:1;filter:none;transition:opacity 1.6s var(--soft) .75s,filter 1.8s var(--soft) .75s}
html.js .flow__ttl{margin:0;writing-mode:vertical-rl;font-size:27px;line-height:1;letter-spacing:.24em;white-space:nowrap;text-shadow:0 0 16px var(--g),0 0 30px var(--g)}
html.js .flow__say{margin:0;writing-mode:vertical-rl;font-size:13.5px;line-height:2.25;letter-spacing:.26em;white-space:nowrap;color:inherit;opacity:.82;text-shadow:0 0 14px var(--g),0 0 26px var(--g)}
html.js .flow__fog{display:block;position:absolute;z-index:2;left:-35%;right:-35%;top:2%;height:72%;opacity:0;pointer-events:none;
  background:radial-gradient(26% 38% at 30% 44%,var(--fog),transparent 72%),radial-gradient(24% 32% at 58% 62%,var(--fog),transparent 72%),radial-gradient(20% 30% at 80% 36%,var(--fog),transparent 72%)}
html.js .flow__fog.go{animation:fogGo 2.6s var(--soft)}
html.js .flow__fog.back{animation:fogBack 2.6s var(--soft)}
@keyframes fogGo{0%{opacity:0;transform:translate3d(-26%,0,0)}42%{opacity:.92}100%{opacity:0;transform:translate3d(26%,0,0)}}
@keyframes fogBack{0%{opacity:0;transform:translate3d(26%,0,0)}42%{opacity:.92}100%{opacity:0;transform:translate3d(-26%,0,0)}}
html.js .flow__clock{display:block;position:absolute;z-index:6;left:calc(var(--gut) - 3px);bottom:calc(92px + 2svh);font-family:var(--ff-l);font-size:clamp(60px,17.5vw,150px);font-weight:400;line-height:.9;letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 30px var(--g)}
html.js .flow__dots{display:flex;gap:11px;position:absolute;z-index:6;left:var(--gut);bottom:calc(70px + 2svh)}
html.js .flow__dots li{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity .9s var(--soft),background-color .9s var(--soft),transform .9s var(--slow)}
html.js .flow__dots li.is-on{opacity:1;background:var(--lamp);transform:scale(1.25)}

/* ---------- 4. 三つの部屋 ---------- */
.rooms{position:relative;padding:120px 0 120px;background:var(--night)}
.rooms__head{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 20px;padding:0 var(--gut) 46px}
.rooms__head .lbl{grid-column:1;grid-row:1}
.rooms__ttl{grid-column:2;grid-row:1/3}
.rooms__lead{grid-column:1;grid-row:2;align-self:end;max-width:15em;font-size:16px;line-height:1.95;letter-spacing:.06em;color:var(--mute)}
.rooms__vis{position:relative;overflow:hidden;background:var(--face)}
.rooms__ph{position:relative;aspect-ratio:4/5;overflow:hidden}
.rooms__ph img{width:100%;height:100%;object-fit:cover}
.rooms__ph:nth-child(3) img{object-position:50% 62%}
:is(html.js,html.static) .rooms__vis{height:66vh;height:66svh;min-height:440px;max-height:640px}
:is(html.js,html.static) .rooms__ph{position:absolute;inset:0;aspect-ratio:auto}
:is(html.js,html.static) .rooms__ph img{opacity:0;filter:blur(18px) brightness(1.1);scale:1.05;transition:opacity 1.4s var(--soft),filter 1.8s var(--soft),scale 2.6s var(--slow)}
:is(html.js,html.static) .rooms__ph.is-on img{opacity:1;filter:none;scale:1;transition-delay:.15s}
.rooms__vis::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to bottom,rgba(15,26,23,0),rgba(15,26,23,.78));pointer-events:none}
.rooms__tabs{display:none}
:is(html.js,html.static) .rooms__tabs{position:absolute;z-index:2;right:calc(var(--gut) - 12px);bottom:18px;display:flex;flex-direction:row-reverse;gap:2px}
.rooms__tabs button{position:relative;display:flex;justify-content:center;min-width:46px;min-height:120px;padding:18px 6px 10px;writing-mode:vertical-rl;font-family:var(--ff-h);font-size:19px;line-height:1;letter-spacing:.3em;color:rgba(239,234,224,.5);transition:color .8s var(--soft)}
.rooms__tabs button::before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--lamp);opacity:0;transform:scale(.4);transition:opacity .8s var(--soft),transform .9s var(--slow)}
.rooms__tabs button[aria-selected="true"]{color:var(--washi)}
.rooms__tabs button[aria-selected="true"]::before{opacity:1;transform:none}
.rooms__info{position:relative;padding:40px var(--gut) 0}
.room+.room{margin-top:44px}
:is(html.js,html.static) .room{display:none}
:is(html.js,html.static) .room+.room{margin-top:0}
:is(html.js,html.static) .room.is-on{display:block;animation:roomIn 1.4s var(--soft)}
@keyframes roomIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.room__name{font-family:var(--ff-h);font-size:24px;line-height:1.4;letter-spacing:.22em}
.room__name small{margin-left:1em;font-family:var(--ff-b);font-size:12px;letter-spacing:.24em;color:var(--mute)}
.room__say{margin-top:14px;font-size:16px;line-height:2;color:rgba(239,234,224,.86)}
.room__spec{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:30px}
.room__spec div{display:flex;flex-direction:column;gap:6px}
.room__spec dt{font-size:12px;line-height:1;letter-spacing:.28em;color:var(--mute)}
.room__spec dd{font-size:14px;line-height:1.7;letter-spacing:.1em}
.room__spec b{margin-right:.2em;font-family:var(--ff-l);font-weight:400;font-size:25px;line-height:1;letter-spacing:.03em;color:var(--lamp)}
.rooms__info .note{margin-top:28px}

/* ---------- 5. 食事 ---------- */
.dinner{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--night)}
.dinner__ph{position:absolute;inset:0}
.dinner__ph .ph__z{position:absolute;inset:0}
.dinner__ph .ph__z img{object-position:44% 50%}
.dinner::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to bottom,rgba(15,26,23,0),rgba(15,26,23,.66) 38%,rgba(15,26,23,.95));pointer-events:none}
.dinner__txt{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto 1fr;gap:0 18px;padding:0 var(--gut) 92px}
.dinner__txt .lbl{grid-column:1/-1;margin-bottom:26px}
.dinner__txt .vh{grid-column:3;grid-row:2}
.dinner__txt .vt{grid-column:2;grid-row:2;color:rgba(239,234,224,.82)}
.dinner__body{grid-column:1;grid-row:2;align-self:end;font-size:16px;line-height:1.95;letter-spacing:.06em;color:rgba(239,234,224,.78)}

.morning{background:var(--washi);color:var(--ink)}
.morning .lbl{color:var(--lamp-d)}
.morning .lbl span{color:var(--ink2)}
.morning .vt{color:var(--ink2)}
.morning .note{color:var(--ink2)}
.breakfast{position:relative;padding:120px 0 110px;overflow:hidden}
.breakfast__in{position:relative}
.breakfast__ph{width:80%;margin-left:auto}
.breakfast__ph .ph__z{aspect-ratio:3/4}
.breakfast__txt{display:grid;grid-template-columns:1fr auto;gap:0 20px;margin-top:40px;padding:0 var(--gut)}
.breakfast__txt .lbl{grid-column:1/-1;grid-row:1;margin-bottom:30px}
.breakfast__txt .vh{position:absolute;left:var(--gut);top:6px}
.breakfast__txt .vt{grid-column:2;grid-row:2}
.breakfast__body{grid-column:1;grid-row:2;align-self:end;font-size:16px;line-height:1.95;letter-spacing:.06em;color:var(--ink2)}

/* ---------- 6. 湯 ---------- */
.bath{position:relative;padding:0 0 120px;background:var(--night);overflow:hidden}
.bath__ph .ph__z{aspect-ratio:3/4}
.bath__txt{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:0 18px;padding:44px var(--gut) 0}
.bath__txt .lbl{grid-column:1/-1;grid-row:1;margin-bottom:28px}
.bath__ttl{grid-column:3;grid-row:2;writing-mode:vertical-rl;font-family:var(--ff-h);font-size:84px;line-height:1;color:var(--washi)}
.bath__txt .vt{grid-column:2;grid-row:2;color:rgba(239,234,224,.82)}
.bath__body{grid-column:1/-1;grid-row:3;margin-top:34px;font-size:16px;line-height:1.95;letter-spacing:.06em;color:rgba(239,234,224,.78)}
.bath__time{grid-column:1;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:8px;font-family:var(--ff-l);font-size:15px;line-height:1.4;letter-spacing:.1em;color:var(--lamp)}

/* ---------- 7. 料金と空き ---------- */
.stay{padding:120px 0 110px}
.stay__in{padding:0 var(--gut)}
.stay__head{display:grid;grid-template-columns:1fr auto;gap:0 20px}
.stay__head .lbl{grid-column:1;grid-row:1}
.stay__head .vh{grid-column:2;grid-row:1/4}
.fee{grid-column:1;grid-row:2;margin-top:34px}
.fee li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0}
.fee span{font-family:var(--ff-h);font-size:16px;letter-spacing:.2em}
.fee b{font-family:var(--ff-l);font-weight:400;font-size:21px;letter-spacing:.04em}
.fee__note{grid-column:1/-1;grid-row:4;margin-top:26px;font-size:12px;line-height:2;letter-spacing:.06em;color:var(--ink2)}
.cal{margin-top:54px}
.cal__top{display:flex;align-items:center;justify-content:space-between}
.cal__month{font-family:var(--ff-l);font-size:24px;line-height:1;letter-spacing:.06em}
.cal__month small{margin:0 .3em 0 .15em;font-family:var(--ff-b);font-size:12px;letter-spacing:.1em}
.cal__nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background-color .5s,opacity .5s}
.cal__nav:hover{background:rgba(28,36,31,.06)}
.cal__nav:disabled{opacity:.2;cursor:default}
.cal__nav i{position:relative;width:9px;height:9px;border-top:1px solid currentColor;border-left:1px solid currentColor}
.cal__nav--prev i{transform:translateX(2px) rotate(-45deg)}
.cal__nav--next i{transform:translateX(-2px) rotate(135deg)}
.cal__week,.cal__grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal__week{margin-top:20px}
.cal__week span{font-size:12px;line-height:2;letter-spacing:0;text-align:center;color:var(--ink2)}
.cal__week span:first-child{color:#9A5A48}
.cal__week span:last-child{color:#4F6273}
.cal__grid{margin-top:4px;row-gap:2px}
.cal__d{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:50px;border-radius:2px;font-family:var(--ff-l);font-size:15px;line-height:1;letter-spacing:0;transition:background-color .5s var(--soft),color .5s var(--soft)}
.cal__d i{display:block;width:6px;height:6px;border-radius:50%}
.cal__d.ok i{background:var(--lamp-d)}
.cal__d.one i{border:1px solid var(--lamp-d)}
.cal__d.full,.cal__d.off{color:rgba(28,36,31,.3);cursor:default}
.cal__d.full i{width:8px;height:1px;border-radius:0;background:rgba(28,36,31,.35)}
.cal__d.off i{width:auto;height:auto;font-family:var(--ff-b);font-style:normal;font-size:12px;line-height:1}
.cal__d.ok:hover,.cal__d.one:hover{background:rgba(28,36,31,.06)}
.cal__d[aria-pressed="true"]{background:var(--ink);color:var(--washi)}
.cal__d[aria-pressed="true"] i{background:var(--lamp);border-color:var(--lamp)}
.cal__d.one[aria-pressed="true"] i{background:none}
.cal__nojs{display:none;padding:20px 0;font-size:12.5px;color:var(--ink2)}
html:not(.js):not(.static) .cal__nojs{display:block}
.cal__key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:12px;line-height:1.8;letter-spacing:.08em;color:var(--ink2)}
.cal__key li{display:flex;align-items:center;gap:7px}
.cal__key i{display:inline-block;width:6px;height:6px;border-radius:50%}
.cal__key .k-ok{background:var(--lamp-d)}
.cal__key .k-one{border:1px solid var(--lamp-d)}
.cal__key .k-full{width:8px;height:1px;border-radius:0;background:rgba(28,36,31,.35)}
.cal__key .k-off{width:auto;height:auto;font-style:normal;font-size:12px;line-height:1;color:rgba(28,36,31,.45)}
.cal__pick{display:grid;grid-template-columns:3.4em 1fr;align-items:start;gap:14px 10px;margin-top:34px}
.cal__lb{padding-top:12px;font-size:12px;line-height:1.6;letter-spacing:.24em;color:var(--ink2)}
.cal__ppl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cal__ppl button,.cal__rooms button{min-height:46px;border-radius:2px;background:rgba(28,36,31,.06);font-size:13px;letter-spacing:.12em;transition:background-color .5s var(--soft),color .5s var(--soft)}
.cal__ppl button[aria-checked="true"],.cal__rooms button[aria-checked="true"]{background:var(--ink);color:var(--washi)}
.cal__rooms{display:grid;gap:4px}
.cal__rooms button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px;text-align:left}
.cal__rooms button b{font-family:var(--ff-h);font-weight:400;font-size:15px;letter-spacing:.2em}
.cal__rooms button span{font-size:12px;letter-spacing:.02em;opacity:.8}
.cal__rooms button em{font-family:var(--ff-l);font-style:normal;font-size:15px;letter-spacing:.04em}
.cal__rooms button:disabled{background:none;color:rgba(28,36,31,.34);cursor:default;box-shadow:inset 0 0 0 1px rgba(28,36,31,.08)}
.cal__sum{margin-top:34px;padding:26px 0 0}
.cal__date{font-size:13.5px;line-height:1.8;letter-spacing:.12em}
.cal__total{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:6px;line-height:1.2}
.cal__total span{font-size:12px;letter-spacing:.14em;color:var(--ink2)}
.cal__total b{font-family:var(--ff-l);font-weight:400;font-size:46px;letter-spacing:.02em;line-height:1.05}
.cal__calc{min-height:1.9em;font-size:12px;line-height:1.9;letter-spacing:.06em;color:var(--ink2)}
.cal__go{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;margin-top:22px;padding:0 20px;background:var(--ink);color:var(--washi);font-size:13.5px;letter-spacing:.16em;transition:background-color .6s var(--soft)}
.cal__go i,.btn i{position:relative;flex:none;width:30px;height:1px;background:currentColor;transition:width .8s var(--slow)}
.cal__go i::after,.btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.cal__go:hover i,.btn:hover i{width:44px}
.cal .note{margin-top:14px}

/* ---------- 8. 道のり ---------- */
.access{position:relative;padding:120px 0 110px;background:var(--night)}
.access__in{position:relative}
.access__ph{width:84%}
.access__ph .ph__z{aspect-ratio:4/5}
.access__txt{display:grid;grid-template-columns:1fr auto auto;gap:0 18px;padding:46px var(--gut) 0}
.access__txt .lbl{grid-column:1;grid-row:1}
.access__txt .vh{grid-column:3;grid-row:1}
.access__txt .vt{grid-column:2;grid-row:1;color:rgba(239,234,224,.82)}
.tt{grid-column:1/-1;grid-row:2;display:grid;gap:18px;margin-top:40px}
.tt div{display:flex;flex-direction:column;gap:6px}
.tt dt{font-size:12px;line-height:1;letter-spacing:.28em;color:var(--mute)}
.tt dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;font-size:13px;line-height:1.5;letter-spacing:.06em}
.tt b{font-family:var(--ff-l);font-weight:400;font-size:18px;letter-spacing:.04em;color:var(--lamp)}
.tt i{display:inline-block;width:16px;height:1px;margin:0 2px;background:var(--mute);transform:translateY(-4px)}
.access__body{grid-column:1/-1;grid-row:3;margin-top:30px;font-size:16px;line-height:1.95;letter-spacing:.06em;color:rgba(239,234,224,.78)}

/* ---------- 9. よくある質問 ---------- */
.faq{padding:110px 0 110px;background:var(--face)}
.faq__in{padding:0 var(--gut)}
.faq__head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:40px}
.faq__list{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{display:grid;grid-template-columns:1fr 14px;align-items:center;gap:18px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font-size:16px;line-height:1.8;letter-spacing:.06em}
.faq summary span{text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:14px;height:14px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--lamp);transition:transform .8s var(--slow)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details>p{padding:0 32px 24px 0;font-size:16px;line-height:1.95;letter-spacing:.06em;color:var(--mute)}
.faq details[open]>p{animation:roomIn 1.2s var(--soft)}

/* ---------- 10. 予約 ---------- */
.reserve{position:relative;padding:130px 0 120px;overflow:hidden;background:var(--night)}
.reserve__in{position:relative;z-index:1;padding:0 var(--gut)}
.reserve__head{display:flex;justify-content:space-between;align-items:flex-start}
.letter{margin-top:46px;padding:30px 24px 30px;background:var(--face)}
.letter__lb{font-size:12px;line-height:1;letter-spacing:.28em;color:var(--mute)}
.letter__v{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:4px;min-height:290px;margin-top:24px;writing-mode:horizontal-tb}
.letter__v p{writing-mode:vertical-rl;font-size:17px;line-height:2.1;letter-spacing:.24em;white-space:nowrap}
.letter__v.is-new p{animation:roomIn 1.4s var(--soft) both}
.letter__v.is-new p:nth-child(2){animation-delay:.18s}
.letter__v.is-new p:nth-child(3){animation-delay:.36s}
.reserve__act{margin-top:40px}
.reserve__body{font-size:16px;line-height:1.95;letter-spacing:.06em;color:rgba(239,234,224,.8)}
.btn{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px;margin-top:30px;padding:0 24px;background:var(--lamp);color:var(--ink);font-size:15px;letter-spacing:.2em;transition:background-color .6s var(--soft)}
.btn:hover{background:#E4C37F}
.reserve__note{margin-top:18px;font-size:12px;line-height:2;letter-spacing:.08em;color:var(--mute)}

/* ---------- 下の帯 ---------- */
.ft{position:relative;background:var(--night);border-top:1px solid var(--hair)}
.ft__in{display:flex;align-items:flex-end;gap:26px;padding:64px var(--gut) 56px}
.ft__logo{font-family:var(--ff-h);font-size:84px;line-height:.9;color:rgba(239,234,224,.16)}
.ft__addr{font-size:12px;line-height:2.05;letter-spacing:.08em;color:var(--mute)}
.ft__addr b{font-family:var(--ff-h);font-weight:400;font-size:15px;letter-spacing:.22em;color:var(--washi)}
.sample{padding:22px var(--gut) calc(92px + env(safe-area-inset-bottom,0px));background:var(--face);font-size:12px;line-height:1.95;letter-spacing:.04em;color:var(--mute)}
.sample__lnk{margin-top:10px}
.sample__lnk a{display:inline-block;padding:6px 0;color:var(--washi);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lamp)}

/* 左下の札・右下の入口 */
.pill{position:fixed;z-index:30;left:10px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:0;padding:5px 10px 5px 10px;border-radius:999px;background:rgba(15,26,23,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--washi);font-size:12px;letter-spacing:0;line-height:1.7;box-shadow:0 0 0 1px rgba(239,234,224,.1)}
.pill span{color:var(--lamp)}
.pill span::after{content:"｜";margin:0 .15em;color:rgba(239,234,224,.4)}
.pill a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(239,234,224,.4)}
.float{position:fixed;z-index:30;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--lamp);color:var(--ink);font-size:12px;letter-spacing:.16em;opacity:0;filter:blur(6px);pointer-events:none;transition:opacity 1s var(--soft),filter 1.2s var(--soft)}
.float.is-on{opacity:1;filter:none;pointer-events:auto}
html.is-menu .pill,html.is-menu .float{opacity:0;pointer-events:none}

/* 止めた姿（確かめ用） */
html.static .float{opacity:1;filter:none}

/* 幅の狭い携帯（320px など）：最初の画面の説明が、変な所で折れないように */
@media (max-width:359px){
  .hero__lead{font-size:15px;letter-spacing:0}
}

/* ================= 広い画面 ================= */
@media (min-width:900px){
  body{font-size:15px}
  .lbl{font-size:12px}
  .vh{font-size:clamp(34px,2.9vw,46px)}
  .vt{font-size:15.5px}

  .hd{height:88px}
  .hd__ja{font-size:28px}
  .hd__en{font-size:12px}
  .hd__btn{display:none}
  .hd__nav{display:flex;gap:clamp(22px,2.6vw,42px);margin-left:auto;margin-right:clamp(26px,3vw,48px);font-size:13px;letter-spacing:.26em}
  .hd__nav a{position:relative;padding:10px 0}
  .hd__nav a::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--lamp);opacity:0;transition:opacity .6s var(--soft)}
  .hd__nav a:hover::after{opacity:1}
  .hd__rsv{display:flex;align-items:center;min-height:46px;padding:0 24px;background:var(--lamp);color:var(--ink);font-size:13px;letter-spacing:.2em;transition:background-color .6s}
  .hd__rsv:hover{background:#E4C37F}

  .hero__media img{object-position:50% 60%}
  .hero__ttl{top:17vh;right:auto;left:9vw}
  .hero__l1{font-size:clamp(46px,5.4vh,66px)}
  .hero__l2{font-size:clamp(17px,2.2vh,22px)}
  .hero::after{height:38%}
  .hero__foot{display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--gut) 80px 9vw}
  .hero__lead{font-size:13.5px}
  .hero__facts{gap:46px;margin:0 70px 0 0}
  .hero__facts dd{font-size:26px}
  .hero__scroll{bottom:80px}

  .promise__lbl{top:120px;left:9vw}
  .promise__v p{font-size:17px;line-height:3.2}
  .promise__v .promise__last{font-size:24px}

  .flow{padding:140px 9vw 140px}
  .flow__list{grid-template-columns:repeat(2,1fr);gap:40px 6%}
  html.js .flow{height:calc(100vh + 6.7 * 82vh);padding:0}
  html.js .flow__pin::before{height:24%}
  html.js .flow__head{top:130px;left:9vw}
  html.js .flow__h{font-size:15.5px}
  html.js .flow__ph{left:auto;right:0;top:0;bottom:0;height:auto;width:54%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%);mask-image:linear-gradient(to right,transparent 0,#000 24%)}
  html.js .flow__fog{left:30%;right:-20%;top:0;height:100%}
  html.js .flow__txt{right:auto;left:39vw;top:31vh;gap:18px}
  html.js .flow__ttl{font-size:40px}
  html.js .flow__say{font-size:15px;line-height:2.4}
  html.js .flow__clock{left:calc(9vw - 6px);bottom:auto;top:50%;transform:translateY(-38%);font-size:clamp(110px,10.4vw,168px)}
  html.js .flow__dots{left:9vw;bottom:13vh}

  .rooms{display:grid;grid-template-columns:62fr 38fr;grid-template-rows:auto 1fr;padding:0;min-height:100vh}
  .rooms__vis{grid-column:1;grid-row:1/3}
  :is(html.js,html.static) .rooms__vis{height:100vh;max-height:none;min-height:640px}
  .rooms__vis::after{height:30%}
  .rooms__head{grid-column:2;grid-row:1;padding:150px 5vw 0 4.6vw}
  .rooms__info{grid-column:2;grid-row:2;padding:48px 5vw 90px 4.6vw}
  :is(html.js,html.static) .rooms__tabs{right:auto;left:4vw;bottom:44px;flex-direction:row-reverse;gap:10px}
  .rooms__tabs button{min-width:56px;min-height:150px;font-size:24px}
  .room__name{font-size:28px}
  .room__say{font-size:14.5px}

  .dinner{min-height:100vh}
  .dinner::after{left:0;right:auto;top:0;bottom:0;width:58%;height:auto;background:linear-gradient(to right,rgba(15,26,23,.92),rgba(15,26,23,.62) 55%,rgba(15,26,23,0))}
  .dinner__txt{position:absolute;left:9vw;top:50%;transform:translateY(-50%);width:min(560px,40vw);padding:0;grid-template-columns:1fr auto auto}
  .dinner__ph .ph__z img{object-position:50% 50%}
  .dinner__body{font-size:13.5px;max-width:15em}

  .breakfast{padding:170px 0 170px}
  .breakfast__in{display:grid;grid-template-columns:44fr 56fr;align-items:center;max-width:1440px;margin:0 auto;padding:0 9vw}
  .breakfast__ph{grid-column:2;grid-row:1;width:min(90%,620px);margin:0 0 0 auto}
  .breakfast__txt{position:relative;grid-column:1;grid-row:1;margin:0;padding:0;grid-template-columns:1fr auto auto;gap:0 26px}
  .breakfast__txt .vh{position:static;grid-column:3;grid-row:2}
  .breakfast__txt .vt{grid-column:2}
  .breakfast__body{grid-column:1;font-size:13.5px}
  .breakfast__body{max-width:22em}

  .bath{padding:0}
  .bath__in{display:grid;grid-template-columns:46fr 54fr;align-items:center;min-height:100vh}
  .bath__ph{height:100vh}
  .bath__ph .ph__z{height:100%;aspect-ratio:auto}
  .bath__txt{padding:0 9vw 0 7vw;grid-template-columns:1fr auto auto;gap:0 26px}
  .bath__ttl{font-size:150px}
  .bath__body{font-size:13.5px;max-width:26em}

  .stay{padding:170px 0 160px}
  .stay__in{display:grid;grid-template-columns:38fr 62fr;gap:7vw;max-width:1440px;margin:0 auto;padding:0 9vw;align-items:start}
  .stay__head{position:sticky;top:150px}
  .cal{margin-top:0;padding:46px 48px 40px;background:rgba(28,36,31,.035)}
  .cal__d{height:58px;font-size:16px}
  .cal__pick{grid-template-columns:4em 1fr}
  .cal__rooms{grid-template-columns:repeat(3,1fr)}
  .cal__rooms button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:78px}
  .cal__total b{font-size:56px}

  .access{padding:0}
  .access__in{display:grid;grid-template-columns:40fr 60fr;align-items:center;min-height:100vh}
  .access__ph{width:100%;height:100vh}
  .access__ph .ph__z{height:100%;aspect-ratio:auto}
  .access__txt{padding:0 9vw 0 7vw;grid-template-columns:1fr auto auto;gap:0 30px}
  .tt dd{font-size:12.5px}
  .tt b{font-size:22px}
  .access__body{max-width:30em}

  .faq{padding:160px 0}
  .faq__in{display:grid;grid-template-columns:30fr 70fr;gap:7vw;max-width:1440px;margin:0 auto;padding:0 9vw}
  .faq__head{position:sticky;top:150px;align-self:start;flex-direction:column;gap:30px}
  .faq summary{min-height:78px;font-size:16px}
  .faq details>p{font-size:14px;padding-right:80px}

  .reserve{padding:170px 0 160px;min-height:100vh}
  .reserve__in{display:grid;grid-template-columns:auto auto 1fr;gap:6vw;align-items:center;max-width:1440px;margin:0 auto;padding:0 9vw}
  .reserve__head{flex-direction:column;gap:34px;align-self:stretch}
  .reserve__head .vh{order:2}
  .letter{margin:0;padding:40px 46px}
  .letter__v{min-height:330px}
  .letter__v p{font-size:19px}
  .reserve__act{margin:0;max-width:30em}
  .btn{max-width:420px}

  .ft__in{max-width:1440px;margin:0 auto;padding:90px 9vw 70px;gap:44px}
  .ft__logo{font-size:120px}
  .sample{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:24px 9vw 26px 260px}
  .sample br{display:none}
  .sample__lnk{margin:0;flex:none}
  .pill{left:24px;bottom:22px}
  .float{right:24px;bottom:22px;min-height:50px;padding:0 24px;font-size:13px}
}