/* 日本語の大見出し用フォント：原本の Shippori Mincho SemiBold から見出しの字だけを切り出したもの（字詰め情報 palt 入り。Google Fonts 版には palt が無い）。作り方＝scripts/facility_pages/make_heading_font.py・手動カーニング＝kerning.json */
@font-face{font-family:'TTC Heading JP';src:url(../fonts/heading-jp-600-v1.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* 元ファイルの表示ランタイムが足していた指定（見た目を元と同じにするため） */
html,body{height:100%;margin:0}
.ac{align-items:center}.w100{width:100%}.wrap{flex-wrap:wrap}
:root{--bg:#0c0b09;--bg2:#141210;--surf:#1a1713;--cream:#ece5d6;--muted:#b6ab97;--line:rgba(236,229,214,.15);--accent:#c9a86a;--pool:#7fb8b2}
.accent-teal{--accent:#7fb8b2}.accent-bone{--accent:#d8ccb6}
*{box-sizing:border-box}
.site{background:var(--bg);color:var(--cream);font-family:'Jost','Shippori Mincho',system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lang-jp{font-family:'Shippori Mincho',serif}
.jp{display:none}.lang-jp .jp{display:inline}.lang-jp .en{display:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.disp{font-family:'Bodoni Moda','Shippori Mincho',serif;font-weight:500;line-height:1;letter-spacing:-.01em}
.lang-jp .disp{font-family:'TTC Heading JP','Shippori Mincho',serif;font-weight:600;letter-spacing:0;font-feature-settings:"palt"}
/* 金色・斜体の部分も、英字と数字は Cormorant、日本語は見出し用フォント（字ごとの幅）にそろえる */
.lang-jp .disp .qserif{font-family:'Cormorant Garamond','TTC Heading JP','Shippori Mincho',serif}
.d1{font-size:clamp(58px,10vw,168px)}.d2{font-size:clamp(38px,5.2vw,84px)}.d3{font-size:clamp(26px,3.2vw,46px)}
.ey{font-family:'Jost','Shippori Mincho';font-weight:400;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--accent)}
.lang-jp .ey{font-family:'Shippori Mincho';letter-spacing:.28em}
.qserif{font-family:'Cormorant Garamond','Shippori Mincho',serif;font-style:italic}
.lede{font-size:clamp(17px,1.45vw,21px);line-height:1.75;color:#cec5b2;font-weight:350}
.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,'Shippori Mincho',monospace}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Jost','Shippori Mincho';font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:none;transition:.4s;border-radius:1px}
.btn:hover{background:var(--accent);color:var(--bg)}
.btn-solid{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-solid:hover{filter:brightness(1.12)}
.lang-jp .btn{font-family:'Shippori Mincho';letter-spacing:.1em}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.5s}
.nav-bd{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,9,.85),rgba(12,11,9,.15));backdrop-filter:blur(3px)}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;height:82px}
.brand{font-family:'Bodoni Moda','Shippori Mincho',serif;font-weight:500;font-size:20px;letter-spacing:.34em;padding-left:.34em}
.nav-links{display:flex;gap:34px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:300}
.nav-links a{color:var(--cream);opacity:.92;transition:.3s;position:relative;padding-bottom:3px}
.nav-links a:hover{opacity:1;color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:20px}
.lang-btn{background:none;border:1px solid var(--line);color:var(--cream);font-family:'Jost','Shippori Mincho';font-size:11px;letter-spacing:.14em;padding:8px 12px;cursor:pointer;border-radius:1px;transition:.3s}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.nav-book{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:11px 20px;transition:.4s;border-radius:1px}
.nav-book:hover{background:var(--accent);color:var(--bg)}
@supports (animation-timeline:scroll()){.nav{animation:navshrink both;animation-timeline:scroll(root);animation-range:60px 220px}}
@keyframes navshrink{to{box-shadow:0 1px 0 var(--line)}}
/* hero */
.hero{position:relative;height:100vh;min-height:660px;overflow:hidden;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background-color:#0c0b09;background-image:url("../img/top-01b.avif");background-position:center;background-size:cover;background-repeat:no-repeat}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:heroFade 70s infinite;will-change:opacity,transform}
/* トップ画像＝7枚・各10秒・一巡70秒（枚数を変えたら 70s・delay・下の％を合わせる） */.hero-bg img:nth-child(1){animation-delay:0s}.hero-bg img:nth-child(2){animation-delay:10s}.hero-bg img:nth-child(3){animation-delay:20s}.hero-bg img:nth-child(4){animation-delay:30s}.hero-bg img:nth-child(5){animation-delay:40s}.hero-bg img:nth-child(6){animation-delay:50s}.hero-bg img:nth-child(7){animation-delay:60s}
@keyframes heroFade{0%{opacity:0;transform:scale(1.04)}1.714%{opacity:1}14.286%{opacity:1}16%{opacity:0;transform:scale(1.0736)}100%{opacity:0;transform:scale(1.0736)}}
.scrim{position:absolute;inset:0;background:radial-gradient(65% 55% at 18% 90%,rgba(12,11,9,.62),transparent 62%),linear-gradient(180deg,rgba(12,11,9,.45) 0%,rgba(12,11,9,.14) 30%,rgba(12,11,9,.5) 58%,rgba(12,11,9,.88) 84%,rgba(12,11,9,.97) 100%)}
.shimmer{position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(160,210,220,.09) 47%,rgba(255,255,255,.05) 52%,transparent 66%);background-size:280% 280%;animation:shimmer 11s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
.no-shimmer .shimmer{display:none}
@keyframes shimmer{0%{background-position:8% 0%}50%{background-position:92% 100%}100%{background-position:8% 0%}}
.hero-c{position:relative;z-index:3;padding-bottom:8vh;width:100%;text-shadow:0 2px 20px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5)}
.hero-loc{margin:0 0 26px;color:#f3e9d2;text-shadow:0 2px 14px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.85)}
.hero-t{margin:0;color:#fff;font-family:'Bodoni Moda','Shippori Mincho',serif;font-weight:500}
.hero-t .sm{display:block;font-size:.34em;letter-spacing:.02em;color:var(--accent);font-weight:400;margin-top:.35em}
.hero-sub{margin:26px 0 38px;font-size:clamp(22px,2.5vw,34px);color:#f3ecdd;max-width:36ch;line-height:1.4}
.hero-sub .ac{color:var(--accent)}
.hero-meta{margin:0 0 34px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#cfc6b3}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hu{animation:heroUp 1.5s both cubic-bezier(.16,.7,.2,1)}
.hu2{animation-delay:.18s}.hu3{animation-delay:.34s}.hu4{animation-delay:.5s}.hu5{animation-delay:.66s}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scrollcue{position:absolute;right:40px;bottom:34px;z-index:3;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#cfc6b3;text-shadow:0 2px 10px rgba(0,0,0,.6);writing-mode:vertical-rl;display:flex;align-items:center;gap:14px}
.scrollcue::after{content:"";width:1px;height:52px;background:linear-gradient(var(--accent),transparent);animation:cue 2.4s infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
/* reveal */
.rev.in{animation:rise .95s cubic-bezier(.16,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* statement */
.sect{padding:clamp(90px,13vh,180px) 0}
.state-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.state-big{margin:0;color:var(--cream)}
.state-big .ac{color:var(--accent)}
/* 見出しの中の強調（金色・斜体）はどの区画でも同じ色にする（2026-11-10 ヒロさん：予約・口コミ・空間・トンネル・ホスピタリティも「世界が変わる」とそろえる） */
.disp .ac{color:var(--accent)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);margin-top:0}
.stat{background:var(--bg);padding:26px 24px}
.stat b{font-family:'Bodoni Moda','Shippori Mincho',serif;font-weight:500;font-size:34px;display:block;color:var(--cream)}
/* 評価の星：4 つは全部塗り、5 つ目は「満点ではない」と目で分かるよう星の形の 80% まで塗る（4.95 の正確な比率ではなく、欠けが見える最小に誇張＝2026-11-10 ヒロさん）。星の形は字の幅の 7.5%〜94.5%（system-ui の ★ を実測）→ 80% は字の幅の 77% */
.stat .stars,.host-badge .stars{display:block;width:max-content;margin-top:8px;font-style:normal;font-family:system-ui,sans-serif;font-size:16px;line-height:1;letter-spacing:0;color:var(--accent)}
.stat .stars em,.host-badge .stars em{font-style:normal;background:linear-gradient(90deg,var(--accent) 77%,rgba(255,255,255,.18) 77%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block}
/* spaces gallery */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{margin:14px 0 0;max-width:16ch}
.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:205px;gap:14px}
.tile{position:relative;overflow:hidden;background:var(--surf);cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.7,.2,1);filter:brightness(.82) saturate(.95)}
.tile:hover img{transform:scale(1.07);filter:brightness(.62)}
.tile-o{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(0deg,rgba(12,11,9,.88),rgba(12,11,9,.15) 55%,transparent 75%);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.tile-n{font-family:'Jost','Shippori Mincho';font-size:11px;letter-spacing:.28em;color:var(--accent);margin-bottom:auto}
.tile-t{font-family:'Bodoni Moda','Shippori Mincho',serif;font-weight:500;font-size:26px;color:#fff}
.tile-d{font-size:13.5px;line-height:1.5;color:#d8d0c0;max-width:34ch;margin-top:9px;max-height:0;opacity:0;overflow:hidden;transition:.55s}
.tile:hover .tile-d{max-height:120px;opacity:1}
.t-tall{grid-column:span 2;grid-row:span 2}.t-wide{grid-column:span 4;grid-row:span 2}.t-sq{grid-column:span 2;grid-row:span 2}.t-tri{grid-column:span 3;grid-row:span 2}
/* tunnel */
.tunnel{position:relative;background:var(--bg2);overflow:hidden}
.tunnel-in{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:82vh}
.tunnel-txt{padding:clamp(70px,10vh,150px) clamp(40px,5vw,90px);display:flex;flex-direction:column;justify-content:center}
.tunnel-media{position:relative;overflow:hidden;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.tunnel-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.tunnel-steps{display:flex;flex-direction:column;gap:22px;margin-top:40px}
.tstep{display:flex;gap:18px;align-items:baseline}
.tstep b{font-family:'Bodoni Moda','Shippori Mincho',serif;color:var(--accent);font-size:15px;min-width:34px}
.tstep span{color:var(--muted);font-size:15px;line-height:1.5}
/* host */
.host{display:grid;grid-template-columns:.55fr 1.45fr;gap:56px;align-items:center}
.host-photo{position:relative;max-width:230px;display:flex;flex-direction:column;gap:22px}
.host-photo img{width:230px;height:230px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.host-badge{position:static;background:none;border:none;border-left:2px solid var(--accent);padding:4px 0 4px 18px}
.host-badge b{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;font-size:22px;display:block}
.host-badge span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.host-sign{font-family:'Cormorant Garamond','Shippori Mincho';font-style:italic;font-size:26px;color:var(--accent);margin-top:24px}
/* reviews */
.reviews{background:var(--bg2)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.rcard{border:1px solid var(--line);padding:34px 30px;background:var(--bg);display:flex;flex-direction:column;gap:18px}
.rcard .stars{color:var(--accent);letter-spacing:.3em;font-size:13px}
.rcard p{margin:0;font-family:'Cormorant Garamond','Shippori Mincho';font-style:italic;font-size:22px;line-height:1.45;color:var(--cream)}
/* 日本語の口コミ本文：改行（<br>）の位置だけで折り返すよう、いちばん長い行（15 字）がカードの幅に収まる大きさに合わせる（上限 22px・3 件とも同じ式＝同じ大きさ） */
.lang-jp .rcard{container-type:inline-size}
.lang-jp .rcard p{font-size:min(22px,calc(100cqi / 15.6))}
.rcard .who{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:auto}
.themes{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.chip{border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.chip b{color:var(--accent);font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;font-style:normal}
/* book */
.book{background:linear-gradient(180deg,var(--bg),#08080699)}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.perks{display:flex;flex-direction:column;gap:2px;margin-top:44px;background:var(--line);border:1px solid var(--line)}
.perk{background:var(--bg);padding:22px 24px;display:flex;gap:18px;align-items:flex-start}
.perk .k{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;color:var(--accent);font-size:14px;min-width:26px}
.perk b{display:block;font-weight:400;font-size:16px;color:var(--cream);letter-spacing:.02em}
.perk span{font-size:13.5px;color:var(--muted);line-height:1.5}
.engine{border:1px solid var(--line);background:var(--surf);padding:34px}
.eng-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px}
.eng-head .t{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;font-size:22px}
.airhost{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(201,168,106,.18)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head .m{font-family:'Jost','Shippori Mincho';font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.dow span{text-align:center;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cell{aspect-ratio:1;border:none;background:var(--bg);color:var(--muted);font-family:'Jost','Shippori Mincho';font-size:13px;cursor:default;position:relative;transition:.2s;border-radius:1px}
.cell.blank{background:transparent}
.cell.taken{color:rgba(236,229,214,.4);text-decoration:line-through}
.cell.open{color:var(--cream);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.cell.open:hover{background:rgba(201,168,106,.16);color:#fff}
.cell.range{background:rgba(201,168,106,.14);color:#fff}
.cell.sel{background:var(--accent);color:var(--bg);font-weight:500;box-shadow:none}
.leg{display:flex;gap:18px;margin-top:14px;font-size:11px;color:var(--muted)}
.leg i{width:10px;height:10px;display:inline-block;margin-right:6px;vertical-align:middle;border-radius:1px}
.guests{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.guests .lab{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.step{display:flex;align-items:center;gap:16px}
.step button{width:38px;height:38px;border:1px solid var(--line);background:none;color:var(--cream);font-size:18px;cursor:pointer;border-radius:1px;transition:.3s}
.step button:hover{border-color:var(--accent);color:var(--accent)}
.step b{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;font-size:22px;min-width:26px;text-align:center}
.quote{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.qrow{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.qrow b{color:var(--cream);font-weight:400}
.qtot{border-top:1px solid var(--line);padding-top:14px;margin-top:3px;font-size:16px}
.qtot b{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;font-size:24px;color:var(--cream)}
.save{color:var(--accent);font-size:13px;letter-spacing:.04em}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input{background:var(--bg);border:1px solid var(--line);color:var(--cream);padding:13px 14px;font-family:'Jost','Shippori Mincho';font-size:15px;border-radius:1px}
.field input:focus{outline:none;border-color:var(--accent)}
.confirmed{text-align:center;padding:20px 6px}
.confirmed .ok{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;font-size:44px;color:var(--accent)}
.conf-no{font-family:ui-monospace,'SFMono-Regular',Menlo,'Shippori Mincho',monospace;letter-spacing:.14em;color:var(--cream);margin-top:8px;font-size:15px}
.link-back{background:none;border:none;color:var(--muted);font-family:'Jost','Shippori Mincho';font-size:12px;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;margin-top:8px}
.link-back:hover{color:var(--accent)}
.muted-note{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:16px}
/* footer */
.foot{background:var(--bg);border-top:1px solid var(--line);padding:80px 0 50px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;font-weight:400}
.foot p,.foot a{color:var(--muted);font-size:14px;line-height:1.9}
.foot .fbrand{font-family:'Bodoni Moda','Shippori Mincho';font-weight:600;font-size:26px;letter-spacing:.3em;color:var(--cream)}
.foot-bottom{display:flex;justify-content:space-between;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);flex-wrap:wrap;gap:12px}
@media(max-width:900px){.wrap{padding:0 22px}.nav-links{display:none}.state-grid,.tunnel-in,.host,.book-grid{grid-template-columns:1fr;gap:40px}.rev-grid{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}.t-wide,.t-tall,.t-sq,.t-tri{grid-column:span 2;grid-row:span 1}.foot-grid{grid-template-columns:1fr 1fr}.tunnel-media{min-height:52vh}}
/* 段階C（2026-11-10）：予約欄＝見本カレンダーを外し、AirHost の予約ページへ移る案内に置き換え */
.book-go{width:100%;padding:18px 30px;font-size:14px}
.book-steps{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.book-steps li{display:flex;gap:16px;align-items:baseline;font-size:14.5px;color:var(--cream);line-height:1.5}
.book-steps .n{font-family:'Bodoni Moda','Shippori Mincho';font-weight:500;color:var(--accent);font-size:13px;min-width:26px;letter-spacing:.06em}
/* 段階C（2026-11-10）：予約欄の左の文（英語は元のまま 42ch。日本語の級数は下で列幅に合わせる） */
.book-copy{container-type:inline-size}
.book-lede{max-width:42ch}
.lang-jp .book-lede{max-width:none}
/* 日本語：指定の改行位置（<br>）だけで折れるよう、級数を列幅（cqi）に合わせる。係数＝各行の実測幅（em）＋余白 */
.lang-jp .book-copy h2.d2{font-size:min(clamp(38px,5.2vw,84px),11.9cqi)}
.lang-jp .book-copy .book-lede{font-size:min(24px,3.9cqi)}
.lang-jp .book-copy .perk b .jp{font-size:min(20px,calc((100cqi - 96px)/12.2))}
.lang-jp .book-copy .perk div>span .jp{font-size:max(11px,min(15px,calc((100cqi - 96px)/28.2)))}
/* 日本語の見出しをなるべく大きくするため、パソコン幅では左の列を広げる（スマホ幅は 1 列のまま） */
@media(min-width:901px){.lang-jp .book-grid{grid-template-columns:1.5fr 1fr}}
/* 段階C（2026-11-10）：ヴィラ本文。英語は元のまま 44ch。日本語は縦に伸びないよう列幅いっぱい・対応ブラウザでは文節の切れ目で折り返す */
.villa-lede{max-width:44ch}
.lang-jp .villa-lede{max-width:none;word-break:auto-phrase}
/* 段階C（2026-11-10）：日本語の特典欄。見出しを 20px に上げたので、✦ を見出し 1 行目の文字の高さにそろえる（ベースライン揃え＋✦ を 0.2 字上げる＝Chrome で目視確認） */
.lang-jp .book-copy .perk{align-items:baseline}
.lang-jp .book-copy .perk .k{position:relative;top:-.2em}
/* 段階C（2026-11-10）：空間の見出しまわりを英語版の釣り合いにそろえる（英語＝見出し 2 行と本文 4 行がほぼ同じ高さ・間の余白 約 190px）。
   日本語は見出し 2 行のまま、本文を 1 行 29 字に広げて 4 行に（本文 115 字・1 字≒1.06em を実測）。英語の本文は元のまま 38ch */
.spaces-lede{max-width:38ch}
.lang-jp .spaces-lede{max-width:31em}
/* 段階C（2026-11-10）：空間（日本語・パソコン幅）＝見出しのかたまり（2 行）と本文のかたまりの上下の中心をそろえる（ヒロさん指定・前の「上端そろえ」から変更）。
   区画は下端そろえ＝見出しの下端が行の下端。本文の下余白を 0 にして下端を合わせ、本文自身の高さの半分（50%）だけ下げてから見出し 1 行分（見出しの大きさ）上げる＝本文の行数が変わっても中心は見出しの中心。見出しの字面は行の枠の中で 0.058 字ぶん下寄り（Chrome 実測 4.6px/78.6px）なので、その分だけ本文も下げて見た目の中心をそろえる（0.942） */
@media(min-width:901px){
.lang-jp #spaces .spaces-lede{margin-bottom:0;transform:translateY(calc(50% - .942 * clamp(38px,5.2vw,84px)))}
}
/* 段階C（2026-11-10）：ゲストの声「Airbnbで『ゲストチョイス』に選ばれています。」（日本語）を 1 行で。英語は元のまま 34ch。
   1 行＝22.31 字分を実測。スマホ幅は 1 行に収まる級数まで下げる（左右の余白 22px×2） */
.reviews-lede{max-width:34ch}
.lang-jp .reviews-lede{max-width:none;white-space:nowrap}
@media(max-width:900px){.lang-jp .reviews-lede{font-size:min(clamp(17px,1.45vw,21px),calc((100vw - 44px) / 22.6))}}
/* 同上：1 行にすると下端そろえで 1 行分下がるので、元の 1 行目の高さに留めるため、段落の元の下余白 1 字に 1 行分（行の高さ 1.75 字）を足す（パソコン幅のみ） */
@media(min-width:901px){.lang-jp .reviews-lede{margin-bottom:2.75em}}
/* 段階C（2026-11-10）：予約欄（日本語・パソコン幅）＝右の「ご予約」の枠を、左のかたまりの見えている範囲（小見出しの字の上端〜特典の枠の下端）の上下の中心にそろえる（ヒロさん指定）。
   左の箱の上には小見出しの固定の余白 12px＋字の上の空き 3.9px があるので、右の枠の上にも同じ 15.9px を足す（中央そろえで中心が半分＝7.9px 下がる・Chrome 実測）。枠は .rev の動き（transform）を持つので余白で調整 */
@media(min-width:901px){.lang-jp .book-grid{align-items:center}.lang-jp .book-grid .engine{margin-top:15.9px}}
/* 段階C（2026-11-10）：ヴィラ（日本語・パソコン幅）＝右の数字の枠を、左のかたまりの見えている範囲（小見出しの字の上端〜本文の最後の行の字の下端）の上下の中心にそろえる（ヒロさん指定・予約欄と同じ考え方）。
   左の見えない空き＝上 16.2px（小見出しの余白 12px＋字の上の空き）・下 1.414 字（本文の段落の余白＋行間の半分＋字の下の空き）を Chrome で実測。差のぶん枠の下に余白を足す（中心は半分上がる）。枠は .rev の動きを持つので余白で調整 */
@media(min-width:901px){.lang-jp .state-grid{align-items:center}.lang-jp .state-grid .stats{margin-bottom:calc(1.414 * clamp(17px,1.45vw,21px) - 16.2px)}}
/* 段階C（2026-11-10）：海への道の見出し（日本語）「海へと続く、／ひそやかな小径。」を 2 行に収める。長い方の行＝8.16 字分を実測。
   列の中身の幅（cqi）の 12% を上限にして、ほかの見出しと同じ大きさ（clamp）を超えない */
.lang-jp #tunnel .tunnel-txt{container-type:inline-size}
.lang-jp #tunnel .tunnel-txt h2{font-size:min(clamp(38px,5.2vw,84px),12cqi)}
/* 段階C（2026-11-10）：海への道の本文（日本語）をヒロさん指定の 4 行（<br>）で。英語は元のまま 40ch。日本語は上限を外し、列が狭いときは列の幅に合わせて級数を下げる（長い行＝22 字・1 字≒1.06 字分） */
.tunnel-lede{max-width:40ch}
.lang-jp #tunnel .tunnel-lede{max-width:none;font-size:min(clamp(17px,1.45vw,21px),calc(100cqi / 23.8))}

/* ホスト欄の本文：英語は従来どおり 48ch／日本語はヒロさん指定の 5 行（最長 32 字）。PC は列幅に収まるよう字の大きさを自動調整、スマホは改行を効かせず自然に折り返す */
.host-lede{max-width:48ch}
.lang-jp .host-copy{container-type:inline-size}
.lang-jp .host-lede{max-width:none;font-size:min(clamp(17px,1.45vw,21px),calc(100cqi / 34))}
@media(max-width:900px){.lang-jp .host-lede{font-size:clamp(17px,1.45vw,21px)}.lang-jp .host-lede br{display:none}}

/* 数字の注釈（※出典・時点）。PC では左右の中央合わせを崩さないよう、ヴィラ欄・予約欄の注釈は枠の下に重ねて置く（列の高さを変えない）。スマホは普通に並べる */
.fig-note{font-size:11.5px;color:var(--muted);line-height:1.6;letter-spacing:.02em;margin:14px 0 0}
.rev-grid+.fig-note{margin-top:18px}
/* ホスト欄の評価の星：「レビュー · 4.93」の右に、小さな文字の高さで並べる（作りはヴィラ欄の星と共通） */
.host-badge .stars{display:inline-block;margin:0 0 0 8px;font-size:12px;vertical-align:-1px}
.host-badge .fig-note{display:block;margin-top:8px;font-size:11px;letter-spacing:.04em;text-transform:none}
.stats,.perks{position:relative}
@media(min-width:901px){.fig-abs{position:absolute;left:0;right:0;top:100%;margin-top:10px}}
.host-badge .fig-note span{font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* 予約ボックスのクーポンコード（AirHost のクーポン＝予約画面で入力すると 5% 引き。2026-11-10 斉藤さんとの打ち合わせで決定） */
.coupon{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:1px dashed var(--accent);padding:18px 16px;margin-bottom:22px}
.coupon .c-lbl{font-family:'Jost','Shippori Mincho';font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.lang-jp .coupon .c-lbl{letter-spacing:.18em}
.coupon .c-code{font-family:ui-monospace,'SFMono-Regular',Menlo,'Shippori Mincho',monospace;font-weight:500;font-size:24px;letter-spacing:.18em;color:var(--cream);user-select:all}
.coupon .c-hint{font-size:12.5px;color:var(--muted);line-height:1.5}
/* クーポンのコピー（TypeUI 無料「Copy confirm」に沿う）：印と文字を 0.25 秒で入れ替え・約 1.6 秒で戻す。
   3 つの文言は同じ升目に重ねる＝いちばん長い文言の幅で固定（切り替えてもボタンの大きさが変わらない） */
.coupon .c-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px}
.c-copy{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);color:var(--accent);font-family:'Jost','Shippori Mincho';font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;cursor:pointer;border-radius:1px;transition:border-color .3s,color .3s}
.c-copy:hover{border-color:var(--accent)}
.lang-jp .c-copy{letter-spacing:.08em}
.c-ico{position:relative;width:14px;height:14px;flex:none}
.c-ico svg{position:absolute;inset:0;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s ease}
/* 印は各文言の中に持たせ、印＋文字のかたまりごと升目の中央に置く（2026-11-11 ヒロさん要望＝コピーの文字をボタンの中央に） */
.c-say{display:grid;justify-items:center}
.c-say>span{grid-area:1/1;display:flex;align-items:center;gap:7px;transition:opacity .25s ease,visibility 0s linear .25s;opacity:0;visibility:hidden}
.c-copy[data-state=idle] .s-idle,.c-copy[data-state=done] .s-done,.c-copy[data-state=fail] .s-fail{opacity:1;visibility:visible;transition:opacity .25s ease}
.c-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* キーボードで選んでいる場所＝金の細い枠（マウスで押したときは出ない） */
a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
/* 端末の「視差効果を減らす」設定の人には動きを止める（普通の設定の人の見た目は変わらない）。
   トップ画像は 1 枚目を止めて見せる・ふわっと出る表示は最初から出しておく */
@media (prefers-reduced-motion:reduce){
.hero-bg img{animation:none;transform:none}
.hero-bg img:first-child{opacity:1}
.shimmer,.hu,.rev.in,.scrollcue::after{animation:none}
.tile img{transition:filter .3s}
.tile:hover img{transform:none}
}
/* 言語の出し分けを最優先にする（.stat span{display:block} のような個別の指定に負けて、英語版に日本語が出ていた＝2026-11-10 ヴィラ欄 4 か所） */
.site:not(.lang-jp) .jp{display:none!important}.lang-jp .en{display:none!important}
/* 画面の幅 901〜1140px：メニューとボタンが 1 行に収まるよう間隔を詰め、それでも収まらない幅ではメニューの項目を隠す（900px 以下と同じ扱い・右上の EN／ご予約は残す）。収まる最小幅の実測（2026-11-10）＝詰めた後で 日本語 907px／英語 1076px。口コミのカードは 1120px 以下で縦 1 列（3 列だと字が 13〜15px まで小さくなるため） */
@media(min-width:901px) and (max-width:1140px){.nav-links{gap:20px;letter-spacing:.1em}.nav-right{gap:14px}}
@media(min-width:901px) and (max-width:906px){.nav-links{display:none}}
@media(min-width:901px) and (max-width:1075px){.site:not(.lang-jp) .nav-links{display:none}}
@media(min-width:901px) and (max-width:1120px){.rev-grid{grid-template-columns:1fr}}
/* 空間のタイル（900px 以下）：説明文（最大 3 行）とタイル名が切れない高さ。画面が狭いほど折り返しが増えるので段階で高くする（必要な高さの実測 2026-11-10＝390px 以上 179px／360〜389px 218px／359px 以下 238px・日英の大きい方） */
@media(max-width:389px){.gal{grid-auto-rows:230px}}
@media(max-width:359px){.gal{grid-auto-rows:250px}}