/* ヒノキの家 ― 設計トークン
   障子 #F7F3EA / 白木 #E0D2B8 / 濡れ縁 #7A6A50 / 苔 #43533F / 墨 #201E1B
   色は main.js が「小豆島の時刻」に合わせて書き換える（写真は変えない）。下は 9:00 の値。 */
:root{
  --paper:#F7F3EA; --paper-2:#EFE9DC; --paper-rgb:247,243,234;
  --ink:#201E1B; --ink-2:#5C564C; --ink-3:#6E685C; --ink-rgb:32,30,27;
  --wood:#E0D2B8; --wood-dark:#7A6A50; --moss:#43533F;
  --sky-1:#9DBAD2; --sky-2:#D9E2E0; --sky-3:#F3EEE0; --sky-ink:#201E1B; --sun:#F2D9A6;
  --line:rgba(var(--ink-rgb),.14); --line-strong:rgba(var(--ink-rgb),.32);

  --foot-bg:#43533F; --foot-ink:#F7F3EA;          /* 時刻に関係なく固定 */

  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;

  --w:1120px;
  --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --tone:.9s;                                      /* 色が移る時間 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.9;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color var(--tone) var(--ease),color var(--tone) var(--ease);
}
/* 空の描画層（sky.js が描く）。ページの一番奥 */
.sky-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* 和紙の目：うっすらした粒子を全面に重ねる */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:var(--mincho);font-weight:400;margin:0;text-wrap:balance;line-height:1.5}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,dt,figure{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--moss);outline-offset:4px}
/* マウス／タップ操作中は、開閉した直後に枠が残らないように（キーボード操作では表示） */
body.pointer summary:focus-visible,body.pointer .zoomable:focus-visible{outline:none}

.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}
.skip:focus{left:8px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;font-size:13.5px;letter-spacing:.08em;font-weight:500;
  border:1px solid transparent;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  white-space:nowrap;cursor:pointer;font-family:var(--sans);
}
.btn:hover{transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:var(--moss);border-color:var(--moss);color:var(--paper)}
.btn.is-disabled{opacity:.45;cursor:default;pointer-events:none}
.btn-paper{background:#F7F3EA;color:#201E1B;border-color:#F7F3EA}
.btn-paper:hover{background:#fff}
.btn-ghost{background:transparent;color:#F7F3EA;border-color:rgba(247,243,234,.55)}
.btn-ghost:hover{border-color:#F7F3EA;background:rgba(247,243,234,.08)}

/* ---------- ヘッダー ---------- */
.top{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
  padding:0 var(--gutter);height:76px;color:var(--ink);
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease),height .4s var(--ease),color var(--tone) var(--ease);
  animation:fade-down 1.2s var(--ease) .2s both;
}
.top::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(var(--paper-rgb),.6),rgba(var(--paper-rgb),0));
  opacity:1;transition:opacity .5s var(--ease);
}
.top.solid{background:rgba(var(--paper-rgb),.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);height:64px;box-shadow:0 1px 0 var(--line)}
.top.solid::before{opacity:0}
.brand{display:flex;align-items:baseline;gap:10px}
.brand-name{font-family:var(--mincho);font-size:19px;letter-spacing:.14em}
.brand-sub{font-size:11px;letter-spacing:.24em;color:var(--ink-2)}
.nav{display:flex;justify-content:center;gap:28px;font-size:13px;letter-spacing:.08em}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.top-right{display:flex;align-items:center;gap:22px}
.top-cta{display:none}
.lang{display:flex;gap:12px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
.lang [aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
.lang a:hover{color:var(--ink)}
.lang-soon{opacity:.55;cursor:default}
.tel{font-family:var(--mincho);font-size:14.5px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.menu-btn{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.menu-btn span{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:40;background:rgba(var(--paper-rgb),.96);
  padding:100px var(--gutter) 40px;display:flex;flex-direction:column;gap:2px;
}
.mobile-nav[hidden]{display:none}
.mobile-nav a{font-family:var(--mincho);font-size:22px;letter-spacing:.1em;padding:9px 0;border-bottom:1px solid var(--line);animation:fade-up .6s var(--ease) both}
.mobile-nav a:nth-child(2){animation-delay:.05s}.mobile-nav a:nth-child(3){animation-delay:.1s}.mobile-nav a:nth-child(4){animation-delay:.15s}
.mobile-nav a:nth-child(5){animation-delay:.2s}.mobile-nav a:nth-child(6){animation-delay:.25s}.mobile-nav a:nth-child(7){animation-delay:.3s}.mobile-nav a:nth-child(8){animation-delay:.35s}
.mobile-lang{display:flex;gap:18px;margin-top:24px;font-size:13px;color:var(--ink-3)}
.mobile-lang span{color:var(--ink);border-bottom:1px solid var(--ink)}
.mobile-lang a{font:inherit;padding:0;border:0;animation:none}

/* ---------- 歩いて入る ---------- */
.walk{position:relative;height:400vh;background:#201E1B;z-index:2}
.walk-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.walk-canvas,.walk-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walk-canvas{opacity:0;transition:opacity .6s var(--ease)}
.walk.ready .walk-canvas{opacity:1}
.walk.ready .walk-poster{opacity:0;transition:opacity .6s var(--ease)}
.walk-loading{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(247,243,234,.18);opacity:1;transition:opacity .6s}
.walk-loading i{display:block;height:100%;width:0;background:#F7F3EA;transition:width .3s}
.walk.ready .walk-loading{opacity:0}

.stage{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.stage.on{opacity:1;pointer-events:auto}

/* 短冊 ― 縦書きの見出しに障子色の帯。行は span ごとに1列 */
.tate{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--mincho);color:var(--ink);
  background:rgba(var(--paper-rgb),.86);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 14px 44px rgba(32,30,27,.14);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;gap:.35em;   /* 縦書きでは column が横方向。1つ目の行が右列になる */
  transition:background-color var(--tone),color var(--tone);
}
.tate span{display:block;white-space:nowrap}
.tate-hero{
  position:absolute;right:clamp(24px,9vw,140px);top:14vh;
  font-size:clamp(26px,3.6vw,44px);letter-spacing:.2em;line-height:1.25;
  padding:36px 20px 40px;
}
.stage-0.on .tate-hero{animation:brush 1.4s var(--ease) .3s both}
@keyframes brush{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.stage-sub{
  position:absolute;left:var(--gutter);bottom:clamp(90px,14vh,140px);
  display:flex;flex-direction:column;gap:4px;max-width:calc(100% - 2*var(--gutter));color:var(--ink);
  background:rgba(var(--paper-rgb),.9);padding:16px 18px;
  transition:background-color var(--tone),color var(--tone);
}
.stage-sub b{font-family:var(--mincho);font-weight:400;font-size:18px;letter-spacing:.16em;line-height:1.3}
.stage-sub span{font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.stage-sub a{display:flex;align-items:center;min-height:44px;font-size:13px;text-decoration:underline;text-underline-offset:5px}
.stage-0.on .stage-sub{animation:fade-up 1s var(--ease) 1.2s both}
.stage-line{
  position:absolute;font-size:clamp(20px,2.4vw,30px);letter-spacing:.18em;line-height:1.3;
  padding:28px 16px 32px;
}
.stage-1 .stage-line{left:clamp(24px,10vw,160px);top:12vh}
.stage-2 .stage-line{right:clamp(24px,12vw,200px);top:10vh}
.stage.on .stage-line{animation:brush 1s var(--ease) both}

.stage-3{
  background:linear-gradient(to top,rgba(32,30,27,.84) 0%,rgba(32,30,27,.55) 40%,rgba(32,30,27,0) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:0 var(--gutter) clamp(56px,10vh,110px);color:#F7F3EA;
}
.stage-end-eyebrow{font-size:11.5px;letter-spacing:.32em;opacity:.75;margin-bottom:14px}
.stage-end{font-family:var(--mincho);font-size:clamp(28px,4.4vw,52px);letter-spacing:.1em;line-height:1.4;text-wrap:balance}
.stage-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.stage-3.on .stage-end-eyebrow,.stage-3.on .stage-end,.stage-3.on .stage-actions{animation:fade-up .9s var(--ease) both}
.stage-3.on .stage-end{animation-delay:.1s}.stage-3.on .stage-actions{animation-delay:.25s}

@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- セクション共通 ---------- */
.sec{padding:120px 0;position:relative;z-index:2;background:rgba(var(--paper-rgb),.9);transition:background-color var(--tone)}
.sec-inner{
  max-width:var(--w);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:clamp(20px,4vw,56px);
}
.sec-inner > *:not(.label){grid-column:2}
.label{
  grid-column:1;grid-row:1 / span 20;
  writing-mode:vertical-rl;font-size:12px;letter-spacing:.34em;color:var(--moss);
  padding-top:6px;justify-self:start;
  border-left:1px solid var(--moss);padding-left:10px;height:fit-content;
  transition:color var(--tone),border-color var(--tone);
}
.sec h2{font-size:clamp(28px,3vw,38px);letter-spacing:.06em;line-height:1.42;margin-bottom:18px}
.lead{color:var(--ink-2);max-width:56ch;margin-bottom:clamp(36px,5vw,64px)}

/* ---------- 飾り ---------- */
/* ロゴ */
.logo{display:block;flex:none;border-radius:50%;object-fit:cover}
.logo-sm{width:36px;height:36px;margin-right:2px}
.logo-sign{width:56px;height:56px}
.logo-foot{width:120px;height:120px;margin-bottom:18px}

/* ロゴマーク：縁側の月 */
.mark{display:block;flex:none;color:var(--moss);transition:color var(--tone)}
.mark-sm{width:30px;height:30px;margin-right:2px;color:var(--ink)}
.brand{align-items:center}
.sign{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:8px 0 0;max-width:46ch}
.sign-text{font-family:var(--mincho);font-size:13.5px;letter-spacing:.14em;color:var(--ink-2)}
.mark-sign{width:34px;height:34px}
.mark-foot{width:56px;height:56px;color:#F7F3EA;margin-bottom:16px}

/* 章の番号：右上にうっすら大きな漢数字 */
.sec-num{
  position:absolute;right:var(--gutter);top:clamp(40px,6vw,72px);
  font-family:var(--mincho);font-size:clamp(100px,11vw,150px);line-height:1;
  color:var(--ink);opacity:.035;pointer-events:none;user-select:none;
  transition:color var(--tone);
}
.cap-mark{display:inline-block;width:14px;height:1px;background:var(--moss);vertical-align:middle;margin-right:8px}

/* 決まりごとの見出しに角の印 */
.rules dt{position:relative;padding-left:16px}
.rules dt::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border:1px solid var(--moss);transform:rotate(45deg)}
/* ボタン：触れると内側にもう一本線 */
/* フッターの縦書きの一行 */
.foot-tate{writing-mode:vertical-rl;font-family:var(--mincho);font-size:13px;letter-spacing:.3em;opacity:.55;margin:22px 0 28px;height:auto;white-space:nowrap}

/* スクロールで現れる */
.rv{opacity:0;transform:translateY(12px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
h2.rv{opacity:1;transform:none;overflow:hidden}
h2.rv span{display:inline-block;transform:translateY(115%);transition:transform 1.1s var(--ease)}
h2.rv span + br + span,h2.rv span + span{transition-delay:.12s}
h2.rv.in span{transform:none}
.img-mask{overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease)}
.img-mask img{transform:scale(1.04);transition:transform .9s var(--ease)}
.rv-img.in .img-mask{clip-path:inset(0 0 0 0)}
.rv-img.in .img-mask img{transform:none}
.rv-img .pano,.rv-img iframe{opacity:0;transition:opacity 1s var(--ease)}
.rv-img.in .pano,.rv-img.in iframe{opacity:1}

/* 事実の一覧 */
.facts{display:flex;flex-direction:column;border-top:1px solid var(--line-strong)}
.facts > div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts dt{color:var(--ink-3);letter-spacing:.1em;font-size:12.5px;padding-top:2px}
.facts dd{line-height:1.8}
.facts dd small{display:inline;font-size:12.5px;color:var(--ink-3)}
.nb{white-space:nowrap}
.sub{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:8px 0 0;padding:8px 0 0;border-top:1px dashed var(--line);font-size:13px;line-height:1.7}
.sub dt{color:var(--ink-3);letter-spacing:0;font-size:13px;padding:0}
.sub dd{margin:0}
dd,figcaption,.plan-note,.kf span,.fig-legend,.faq-list summary,.terms-title,.terms-lead{word-break:auto-phrase}
figcaption small{font-size:11.5px;opacity:.75}

/* ---------- 基本情報の帯 ---------- */
.keyfacts{position:relative;z-index:2;background:var(--ink);color:var(--paper);transition:background-color var(--tone),color var(--tone)}
.keyfacts-inner{display:flex;align-items:center;gap:clamp(20px,4vw,48px);padding-top:26px;padding-bottom:26px}
.keyfacts .sec-inner{display:flex}
.kf-h1{flex-basis:100%;font-family:var(--mincho);font-size:17px;letter-spacing:.14em;font-weight:400;margin:0}
.keyfacts-inner{flex-wrap:wrap;row-gap:12px}
.kf{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;flex:1}
.kf li{display:flex;flex-direction:column;gap:3px}
.kf b{font-family:var(--mincho);font-weight:400;font-size:17px;letter-spacing:.06em;line-height:1.3}
.kf > li > span{font-size:12px;letter-spacing:.04em;opacity:.85}
.kf-cta{background:var(--paper);color:var(--ink);border-color:var(--paper);flex:none}
.kf-cta:hover{opacity:.9}
.mid-cta{margin-top:40px}
.terms{margin-top:24px;padding:clamp(22px,3vw,34px) clamp(20px,3vw,32px);background:color-mix(in srgb,var(--paper-2) 70%,transparent);border:1px solid var(--line-strong);border-left:3px solid var(--moss)}
.terms-title{font-family:var(--mincho);font-weight:400;font-size:19px;letter-spacing:.1em;margin:0 0 6px}
.terms-lead{font-size:13.5px;color:var(--ink-2);margin:0 0 6px;line-height:1.8}
.terms .rules{border-top:0}
.fig-legend{font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin-bottom:10px;line-height:1.7}
.zoomable{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;font:inherit}
.lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:96vh}
.lightbox::backdrop{background:rgba(32,30,27,.82)}
.lightbox img{display:block;max-width:min(96vw,1100px);max-height:92vh;width:auto;height:auto;background:#fff}
.lightbox-close{position:fixed;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:#F7F3EA;color:#201E1B;font-size:24px;cursor:pointer}
.foot-lang{display:flex;gap:18px;margin-top:40px;font-size:12px;opacity:.9}
.foot-lang .lang-soon{opacity:.85}

/* ---------- この家について ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(36px,6vw,88px);align-items:start}
.about-text h2{margin-bottom:24px}
.about-text p{margin-bottom:18px;max-width:46ch}
.about-text .facts{margin-top:36px}
.about-figs{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);margin-top:clamp(40px,8vw,120px)}
.about-fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
.about-fig-tall img{aspect-ratio:3/4}
.about-fig.about-fig-wide img{aspect-ratio:4/3}
.about-fig .img-mask img{transform:none}
figcaption{font-size:12px;letter-spacing:.06em;color:var(--ink-3);margin-top:12px}

/* 家主について・屋号のこと */
.host{border-left:2px solid var(--moss);padding:6px 0 6px 18px;margin:8px 0 18px;max-width:46ch}
.host-photo{float:right;position:relative;display:block;width:128px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 0 10px 16px}
.host-photo img{position:absolute;width:150%;max-width:none;height:auto;left:-25%;top:-12%}
.host p{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin:0}
.host p+p{margin-top:10px}

.naming{border-left:2px solid var(--moss);padding:6px 0 6px 18px;margin:8px 0 22px;max-width:46ch;transition:border-color var(--tone)}
.naming-title{font-family:var(--mincho);font-size:13px;letter-spacing:.24em;color:var(--moss);margin-bottom:6px}
.naming p:last-child{font-size:14.5px;line-height:1.9;color:var(--ink-2);margin:0}

/* ---------- 部屋と設備 ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.5vw,28px);margin-bottom:clamp(56px,7vw,96px)}
.g{display:flex;flex-direction:column}
.g .img-mask{flex:1;min-height:0}
.g img{width:100%;height:100%;object-fit:cover}
.g-a{grid-column:1 / 8;grid-row:1 / 3}
.g-a img{aspect-ratio:4/5}
.g-b{grid-column:8 / 13;grid-row:1}
.g-c{grid-column:8 / 13;grid-row:2}
.g-b img,.g-c img{aspect-ratio:16/11}
.g.rv-img.in:hover img{transform:scale(1.035);transition-duration:.9s}
.g figcaption{transition:color .4s}
.g:hover figcaption{color:var(--ink)}

.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-strong)}
.spec{padding:28px 28px 32px 0;border-right:1px solid var(--line)}
.spec + .spec{padding-left:28px}
.spec:last-child{border-right:0;padding-right:0}
.spec h3{font-size:18px;letter-spacing:.14em;margin-bottom:16px}
.spec li{font-size:14px;line-height:1.8;padding:7px 0 7px 16px;position:relative;color:var(--ink-2)}
.spec li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:1px;background:var(--wood-dark)}
.spec-none h3{color:var(--wood-dark)}
.spec-none li::before{width:6px;height:6px;top:15px;border:1px solid var(--wood-dark);background:none}

/* ---------- 泊まり方と料金 ---------- */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-bottom:0}
.plan{display:flex;flex-direction:column}
.plan .plan-fig{margin-top:auto;padding-top:22px}
.plan{border-top:1px solid var(--line-strong);padding-top:22px}
.plan-eyebrow{font-size:11.5px;letter-spacing:.28em;color:var(--moss);margin-bottom:8px}
.plan h3{font-size:22px;letter-spacing:.1em;margin-bottom:12px}
.plan-price{margin:0 0 18px;line-height:1.2}
.plan-price b i{font-style:normal;font-size:.42em;margin-left:.15em;letter-spacing:.06em}
.plan-price b{font-family:var(--mincho);font-weight:400;font-size:38px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.plan-price small{display:block;font-size:14px;line-height:1.7;letter-spacing:.08em;color:var(--ink-2);margin-top:6px}
.plan-note{font-size:12.5px;color:var(--ink-3);margin:-8px 0 16px}
.plan .facts > div{grid-template-columns:96px 1fr}
.plan-fig{margin-top:22px}
.plan-fig img{aspect-ratio:16/10;object-fit:cover;width:100%}
.plan-fig.floorplan img{aspect-ratio:auto;object-fit:contain;background:#fff}
.floorplan-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,48px);align-items:center;margin:clamp(36px,5vw,56px) 0 clamp(40px,6vw,72px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.floorplan-title{font-family:var(--mincho);font-size:20px;letter-spacing:.1em;margin:0 0 14px}
.floorplan-row .fig-legend{margin:0 0 14px}
.floorplan-row figcaption{margin:0}
.floorplan-row .zoomable{display:block;width:100%;background:#fff;padding:12px}
.floorplan-row img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;transform:none}

/* ---------- 体験 ---------- */
.sunset{margin-bottom:clamp(36px,5vw,64px)}
.sunset img{width:100%;aspect-ratio:16/9;object-fit:cover}
.opts b{font-size:18px}

/* ---------- 食事 ---------- */
.meals-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:start}
.meals-figs{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.meals-fig img{aspect-ratio:4/3;object-fit:cover;width:100%}
.meals-text h2{margin-bottom:24px}
.meals-text p{margin-bottom:18px;max-width:46ch}
.meals-text .facts{margin-top:32px}
.meals-text .facts > div{grid-template-columns:90px 1fr}

/* ---------- 部屋を見回す ---------- */
.look{padding-top:0}
.pano-wrap{position:relative;background:#201E1B}
.pano{width:100%;aspect-ratio:16/9;max-height:72vh;background:#201E1B}
.pano .pnlm-container{background:#201E1B;outline:none}
.pano .pnlm-load-box,.pano .pnlm-about-msg{display:none !important}
.pano-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  color:#F7F3EA;font-size:11px;letter-spacing:.24em;background:rgba(32,30,27,.55);padding:6px 14px;
  transition:opacity .6s;pointer-events:none;
}
.pano-wrap.touched .pano-hint{opacity:0}
.pano-note{font-size:12.5px;color:var(--ink-3);margin-top:12px;letter-spacing:.04em}
.pano-tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 0 14px;margin-bottom:6px;scrollbar-width:thin}
.pano-tabs button{flex:0 0 auto;width:112px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink-2);text-align:left}
.pano-tabs img{display:block;width:112px;height:76px;object-fit:cover;border:2px solid transparent;transition:border-color .3s}
.pano-tabs span{display:block;font-size:11.5px;letter-spacing:.04em;margin-top:6px;line-height:1.5}
.pano-tabs button[aria-selected="true"] img{border-color:var(--moss)}
.pano-tabs button[aria-selected="true"] span{color:var(--ink)}
.pano-fallback{display:none;width:100%;height:auto}
.pano-wrap.static .pano{display:none}
.pano-wrap.static .pano-fallback{display:block}
.pano-wrap.static .pano-hint{display:none}
.pano-rotate{position:absolute;right:16px;top:14px;font:inherit;font-size:12px;letter-spacing:.08em;color:#fff;background:rgba(32,30,27,.7);border:0;padding:8px 12px;min-height:36px;cursor:pointer}
.pano-wrap.static .pano-rotate{display:none}
.pano-title{position:absolute;left:16px;top:14px;margin:0;font-family:var(--mincho);font-size:14px;letter-spacing:.14em;color:#fff;background:rgba(32,30,27,.7);padding:6px 12px;pointer-events:none}

/* ---------- 一日（空の帯と日・月） ---------- */
.day{
  position:relative;overflow:hidden;
  padding:clamp(300px,40vh,400px) 0 clamp(64px,9vw,110px);
  background:transparent;z-index:2;
  color:var(--sky-ink);
  transition:color var(--tone) var(--ease);
}
.day::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;
  background:linear-gradient(rgba(var(--paper-rgb),.9),rgba(var(--paper-rgb),0));transition:background var(--tone)}   /* 障子色から空へ、ゆるやかに開く */
.day .label{color:var(--sky-ink);border-color:var(--sky-ink);opacity:.8}
.day .lead{color:var(--sky-ink);opacity:.85;margin-bottom:28px}
.sky{position:absolute;inset:0;pointer-events:none;z-index:2}
.orbit{pointer-events:none;touch-action:pan-y;outline:none;border-radius:8px}
.orbit .sun,.orbit .moon{pointer-events:auto;touch-action:none}
.orbit:focus-visible{outline:2px solid #F7F3EA;outline-offset:6px}
.orbit.dragging{cursor:grabbing}
.orbit:focus-visible .orbit-path{stroke:rgba(255,255,255,.7)}
.orbit:focus-visible .disc{scale:1.35}
.orbit .hit{fill:transparent;r:56px}
.sun,.moon{cursor:pointer}
.orbit{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1200px,120vw);height:auto;overflow:visible}
.orbit-path{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:2 6}
.sun .disc{fill:var(--sun);stroke:rgba(247,243,234,.85);stroke-width:1.5;filter:drop-shadow(0 0 18px var(--sun)) drop-shadow(0 0 40px rgba(255,220,160,.5));transition:fill var(--tone)}
.moon .disc{fill:#F3EEE0}
.sun.hidden,.moon.hidden{opacity:0;pointer-events:none}
.sun .disc,.moon .disc{transition:scale .25s var(--ease)}
.sun.grabbed .disc,.moon.grabbed .disc{scale:1.35}
.orbit.dragging .orbit-path{stroke:rgba(255,255,255,.6)}
.sun,.moon{transition:opacity .6s}
/* いまの時刻の表示 */
.day-now{
  display:flex;align-items:baseline;gap:12px;white-space:nowrap;margin-top:-8px;
}
.day-now-time{font-family:var(--mincho);font-size:clamp(26px,3vw,36px);letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1}
.day-now-label{font-size:11px;letter-spacing:.22em;opacity:.75}
.day-now-reset{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 1px;font:inherit;font-size:11.5px;letter-spacing:.12em;color:inherit;cursor:pointer;opacity:.85}
.day-now-reset[hidden]{display:none}
.day-inner{width:100%;position:relative;z-index:1}
.day h2{margin-bottom:12px}
.moments{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border-top:1px solid rgba(255,255,255,.35);margin-top:clamp(28px,4vw,48px);
}
.moments .mo{display:grid;align-content:start;width:100%;background:none;border:0;font:inherit;text-align:left;padding:22px 26px 12px 0;border-right:1px solid rgba(255,255,255,.22);color:color-mix(in srgb,var(--sky-ink) 74%,transparent);transition:color .6s var(--ease),transform .6s var(--ease);cursor:pointer}
.moments .mo:hover{color:color-mix(in srgb,var(--sky-ink) 90%,transparent)}
.moments .mo:focus-visible{outline:2px solid currentColor;outline-offset:-2px;opacity:1}
.moments .mo + .mo{padding-left:26px}
.moments .mo:last-child{border-right:0}
.moments .mo.now{color:var(--sky-ink);transform:translateY(-6px)}
.moments b{display:block;font-family:var(--mincho);font-weight:400;font-size:26px;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1}
.moments .mo > span:not(.mo-p){display:block;font-size:11px;letter-spacing:.24em;margin:8px 0 12px;opacity:.8}
.moments .mo-p{display:block;font-size:13.5px;line-height:1.8}
.moments .mo.now b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sun);margin-left:10px;vertical-align:middle;box-shadow:0 0 10px var(--sun)}

/* 写真ブレイク（視差） */
.bleed{position:relative;z-index:2}
.bleed-mask{max-width:1120px;margin-inline:auto;height:auto;overflow:hidden}
.bleed-mask img{width:100%;height:auto;transform:none !important}
.bleed figcaption{max-width:1120px;margin:0 auto;padding:12px var(--gutter);color:var(--ink-2)}
.bleed{background:var(--paper)}

/* ---------- 料金 ---------- */
.price-table{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);margin-bottom:clamp(40px,6vw,72px)}
.pr{padding:26px 24px 30px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background-color .4s}
.pr:hover{background:rgba(var(--ink-rgb),.03)}
.pr + .pr{padding-left:24px}
.pr:last-child{border-right:0}
.pr span{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:10px}
.pr b{font-family:var(--mincho);font-weight:400;font-size:34px;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.pr b small{font-size:13px;letter-spacing:.08em;margin-left:6px;color:var(--ink-2);font-family:var(--sans)}
.pr.pr-note b{font-family:var(--sans);font-size:13.5px;line-height:1.8;color:var(--ink-2);white-space:normal}
.rules{border-top:1px solid var(--line-strong)}
.rules > div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.rules dt{font-family:var(--mincho);font-size:15.5px;letter-spacing:.1em;padding-top:2px}
.rules dd{font-size:14.5px;color:var(--ink-2);line-height:1.85;max-width:64ch}

/* ---------- 行き方 ---------- */
.access-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(36px,6vw,80px);align-items:start}
.route h3{font-size:17px;letter-spacing:.12em;margin:0 0 8px;padding-top:6px}
.route h3 + p{margin-bottom:24px;font-size:14.5px;color:var(--ink-2)}
.route-note{font-size:13.5px;color:var(--ink-3);border-left:2px solid var(--wood);padding-left:14px;margin:8px 0 36px}
.map{position:relative;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.route-note+.route-note{margin-top:-24px}
.route-links{margin:0 0 36px;font-size:13.5px;line-height:1.9}
.route-links li{display:flex;gap:12px;flex-wrap:wrap}
.route-links a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.route-links span{color:var(--ink-3)}
.map-link{margin:10px 0 0;font-size:12.5px;letter-spacing:.06em}
.map-link a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.55) contrast(.95)}

/* ---------- まわり ---------- */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,64px);border-top:1px solid var(--line-strong)}
.spots li{display:grid;align-content:start;grid-template-columns:1fr auto;gap:4px 16px;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.spots b{font-family:var(--mincho);font-weight:400;font-size:19px;letter-spacing:.08em}
.spots span{font-size:12px;letter-spacing:.12em;color:var(--moss);align-self:baseline;padding-top:6px;font-variant-numeric:tabular-nums}
.spots p{grid-column:1 / -1;font-size:14px;color:var(--ink-2);line-height:1.8}

/* ---------- よくある質問 ---------- */
.faq-list{border-top:1px solid var(--line-strong);max-width:760px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;
  padding:18px 0;font-family:var(--mincho);font-size:17px;letter-spacing:.06em;
}
.faq-list summary::before{content:"問";flex:none;font-size:11px;letter-spacing:.1em;color:var(--paper);background:var(--moss);width:22px;height:22px;display:grid;place-items:center;border-radius:2px;font-family:var(--mincho);transition:background-color var(--tone)}
.faq-list summary span{flex:1}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";flex:none;width:12px;height:12px;margin-left:auto;
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 12px no-repeat;
  transition:transform .4s var(--ease);
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 22px 40px;max-width:64ch;animation:fade-up .5s var(--ease) both;position:relative}
.faq-a::before{content:"答";position:absolute;left:0;top:2px;font-size:11px;letter-spacing:.1em;color:var(--moss);border:1px solid var(--moss);width:22px;height:22px;display:grid;place-items:center;border-radius:2px;font-family:var(--mincho)}
.faq-a p{font-size:14.5px;color:var(--ink-2);line-height:1.9}
.faq-a p+p{margin-top:12px}

/* ---------- 予約 ---------- */
.reserve{background:rgba(var(--paper-rgb),.72)}
.reserve-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.reserve-airbnb{background:var(--wood);padding:clamp(28px,4vw,44px);position:sticky;top:96px;transition:background-color var(--tone)}
.reserve-airbnb h3,.form h3{font-size:21px;letter-spacing:.12em;margin-bottom:12px}
.reserve-airbnb p{font-size:14px;color:var(--ink-2);margin-bottom:26px;max-width:32ch}
.form{background:var(--paper);padding:clamp(28px,4vw,44px);border:1px solid var(--line);transition:background-color var(--tone)}
.form h3{margin-bottom:22px}
.row{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row-2 > div{display:flex;flex-direction:column;gap:2px}
label{font-size:12.5px;letter-spacing:.12em;color:var(--ink-2)}
input,textarea{
  font:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line-strong);padding:8px 2px;border-radius:0;
  line-height:1.5;transition:border-color .3s;width:100%;
}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-size:13.5px}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--moss)}
textarea{resize:vertical;line-height:1.7}
.form-note{font-size:12.5px;color:var(--ink-3);margin:6px 0 22px;line-height:1.8}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-status{font-size:13.5px;color:var(--moss);margin-top:14px;min-height:1.5em}
.form-status.err{color:#8A3B2B}
.night .form-status.err{color:#F0A99A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}

/* ---------- フッター（時刻に関係なく苔色） ---------- */
.foot{background:var(--foot-bg);color:var(--foot-ink);padding:clamp(56px,8vw,96px) 0 32px;position:relative;z-index:2}
.foot .sec-inner{display:block}
.foot-grid{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:clamp(28px,5vw,64px);font-size:13.5px;line-height:1.9}
.foot-name{font-family:var(--mincho);font-size:22px;letter-spacing:.16em;margin-bottom:10px}
.hyoshiki-title{font-size:11.5px;letter-spacing:.24em;opacity:.7;margin-bottom:12px}
.hyoshiki dl{border-top:1px solid rgba(247,243,234,.25)}
.hyoshiki dl > div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid rgba(247,243,234,.14)}
.hyoshiki dt{opacity:.7;font-size:12.5px}
.copy{margin-top:56px;font-size:11.5px;letter-spacing:.2em;opacity:.8}

/* ---------- レスポンシブ ---------- */
@media (max-width:1100px){
  .nav{gap:18px;font-size:12.5px}
  .tel{display:none}
}
@media (max-width:860px){
  .top{grid-template-columns:minmax(0,1fr) auto auto;gap:12px;height:64px}
  .brand-sub{display:none}
  .brand-name{font-size:17px;letter-spacing:.08em}
  .top-cta{display:inline-flex;min-height:44px;padding:8px 12px;font-size:12px}
  .nav,.top-right{display:none}
  .menu-btn{display:flex}
  .sec-inner{grid-template-columns:1fr;row-gap:16px}
  .sec-inner > *:not(.label){grid-column:1}
  .label{grid-row:auto;writing-mode:horizontal-tb;border-left:0;border-top:1px solid var(--moss);padding:10px 0 0;height:auto;width:fit-content;margin-bottom:6px}
  .about-grid,.access-grid,.reserve-grid,.meals-grid,.plan-grid{grid-template-columns:1fr}
  .meals-figs{gap:22px}
  .meals-fig img{aspect-ratio:4/3}
  .about-figs{margin-top:0;gap:22px}
  .about-fig img{aspect-ratio:4/3}
  .about-fig-tall img{aspect-ratio:3/4}
  .gallery{grid-template-columns:1fr 1fr}
  .g-a{grid-column:1 / -1;grid-row:auto}
  .g-a img{aspect-ratio:4/3}
  .g-b,.g-c{grid-column:auto;grid-row:auto}
  .spec-grid{grid-template-columns:1fr}
  .spec{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}
  .spec + .spec{padding-left:0}
  .price-table{grid-template-columns:1fr 1fr}
  .pr{padding:20px 16px 22px 0}
  .pr + .pr{padding-left:16px}
  .pr:nth-child(2n){border-right:0}
  .pr:nth-child(3){padding-left:0}
  .pr b{font-size:27px}
  .pr.pr-note{grid-column:1 / -1;border-right:0;padding-left:0}
  .pr.pr-note b{font-size:13.5px}
  .rules > div{grid-template-columns:1fr;gap:4px}
  .spots{grid-template-columns:1fr}
  .reserve-airbnb{position:static}
  .foot-grid{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .map{aspect-ratio:4/3}
  .pano{aspect-ratio:4/5;max-height:none}
  .pano-tabs button{width:92px}
  .pano-tabs img{width:92px;height:64px}

  .sec{padding:72px 0}
  .look{padding-top:0;padding-bottom:56px}
  .sec-num{display:none}
  .keyfacts-inner{flex-direction:column;align-items:stretch;gap:18px}
  .kf{grid-template-columns:1fr 1fr;gap:14px}
  .kf-cta{width:100%;min-height:48px}
  .stage-actions .btn{width:100%;min-height:48px}
  .floorplan{width:calc(100% + 2*var(--gutter));margin-inline:calc(-1*var(--gutter))}
  .floorplan .fig-legend,.floorplan figcaption{padding-inline:var(--gutter)}
  .plan .facts > div{padding:12px 0}
  .facts > div,.plan .facts > div,.meals-text .facts > div{grid-template-columns:76px minmax(0,1fr);column-gap:12px}
  .sub{grid-template-columns:1fr;gap:0}
  .sub dd{padding-left:1em;margin-bottom:6px}
  .day{padding-top:min(40vh,300px)}
  .sec-num{font-size:96px;top:28px;opacity:.05}
  .sign{justify-content:flex-start}
  .foot-tate{display:none}
  .faq-a{padding-left:0}
  .faq-a::before{display:none}
  .orbit{top:100px;width:100vw}
  .sun .disc,.moon .disc{scale:1.5}
  .sun.grabbed .disc,.moon.grabbed .disc{scale:1.9}
  .moments{grid-template-columns:1fr;border-top:0}
  .moments .mo{padding:14px 0;border-right:0;border-top:1px solid rgba(255,255,255,.28);display:grid;grid-template-columns:76px 1fr;gap:2px 16px;align-items:baseline}
  .moments .mo + .mo{padding-left:0}
  .moments .mo.now{transform:none}
  .moments b{font-size:22px;white-space:nowrap}
  .moments .mo.now b::after{width:5px;height:5px;margin-left:6px}
  .moments .mo > span:not(.mo-p){grid-column:1;margin:4px 0 0}
  .moments .mo-p{grid-column:2;grid-row:1 / span 2}

  .walk{height:340svh}
  .tate-hero{right:var(--gutter);top:12vh;font-size:clamp(23px,6.4vw,30px);padding:26px 14px 30px}
  .stage-sub{bottom:120px;font-size:11px}
  .stage-line{font-size:clamp(18px,5.2vw,24px);padding:22px 12px 26px}
  .stage-1 .stage-line{left:var(--gutter);top:10vh}
  .stage-2 .stage-line{right:var(--gutter);top:9vh}
  .stage-actions .btn{flex:1 1 100%}

}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .walk{height:100vh;height:100svh}
  .walk-canvas,.walk-loading,.scroll-hint,.stage-1,.stage-2{display:none}
  .walk-poster{opacity:1 !important}
  .stage-0,.stage-3{opacity:1;pointer-events:auto}
  .rv,.img-mask,.img-mask img,h2.rv span,.rv-img .pano,.rv-img iframe{opacity:1;transform:none;clip-path:none;transition:none}
  .btn:hover{transform:none}
  *{animation:none !important}
  .bleed-mask img{height:auto}
}

/* 実写真：構図を保ち、スマホでも画像の左右を切らない */
.walk.walk-real{height:auto;background:var(--paper);padding:112px var(--gutter) 56px}
.walk-real .walk-sticky{position:relative;height:auto;max-width:1440px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:center;overflow:visible}
.hero-photo{display:block;width:100%;height:auto}
.hero-copy{color:var(--ink)}
.hero-title{font-family:var(--mincho);font-size:clamp(26px,2.2vw,34px);line-height:1.7;letter-spacing:.08em;margin-bottom:28px}
.hero-name{font-family:var(--mincho);font-size:22px;letter-spacing:.15em;margin-bottom:12px}
.hero-copy>p:not(.hero-title):not(.hero-name){font-size:13px;line-height:2}
.hero-copy .btn{margin-top:24px;font-size:13px;padding-inline:18px}
.meals-fig img,.room-photo img,.access-photo img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.plan-fig:not(.floorplan) img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.photo-group-title{font-family:var(--mincho);font-size:20px;font-weight:400;letter-spacing:.08em;margin:36px 0 20px}
.room-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.room-photos-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.room-photo{margin:0;min-width:0}
.room-photo figcaption,.access-photo figcaption{font-size:13px;line-height:1.8;margin-top:10px;color:var(--ink-2);word-break:auto-phrase}
.room-photo .img-mask img,.plan-fig .img-mask img,.meals-fig .img-mask img,.access-photo .img-mask img{transform:none}
.access-photo{margin:0 0 28px}
@media(max-width:820px){
 .floorplan-row{grid-template-columns:1fr;gap:16px;align-items:start}
 .floorplan-row img{max-height:none}
 .walk.walk-real{padding:88px 0 36px}
 .walk-real .walk-sticky{display:flex;flex-direction:column;gap:26px}
 .hero-copy{width:100%;padding:0 var(--gutter)}
 .hero-title{font-size:28px;margin-bottom:16px;line-height:1.6}
 .hero-name{font-size:19px;margin-bottom:8px}
 .hero-copy .btn{margin-top:18px}
 .room-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 .photo-group-title{font-size:18px;line-height:1.7}
}

/* 写真集：大きな構図と細部を、元の比率のまま並べる */
.album-nav{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 48px}
.album-nav a{border:1px solid var(--line);padding:10px 16px;font-size:13px;min-height:44px;display:flex;align-items:center}
.album-nav a:hover{background:var(--paper-2)}
.album-group{margin-top:56px;scroll-margin-top:100px}
.album-heading{border-top:1px solid var(--line);padding-top:26px;margin-bottom:24px}
.album-heading h3{font-family:var(--mincho);font-size:clamp(21px,2.1vw,28px);font-weight:400;line-height:1.6;letter-spacing:.08em}
.album-heading p{font-size:14px;color:var(--ink-2);margin-top:10px;line-height:1.9}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;align-items:start}
.album-spread,.breakfast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.album-photo{margin:0;min-width:0}
.album-photo img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.album-photo .img-mask img{transform:none}
.album-photo figcaption{font-size:13px;line-height:1.8;margin-top:10px;color:var(--ink-2);word-break:auto-phrase}
.album-masonry{columns:3;column-gap:22px}
.album-masonry .album-photo{break-inside:avoid;margin-bottom:28px}
.lightbox img{max-height:80vh;max-height:80svh;margin:auto}
.lightbox-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;background:#F7F3EA;color:#201E1B}
.lightbox-controls button{flex:0 0 44px;height:44px;border:1px solid #bdb5a6;background:transparent;color:inherit;font-size:22px;cursor:pointer}
.lightbox-caption{font-size:12px;line-height:1.7;text-align:center;word-break:auto-phrase}
@media(max-width:820px){
 .album-nav{gap:8px;margin-bottom:32px}
 .album-nav a{padding:8px 12px;font-size:12px}
 .album-group{margin-top:42px}
 .album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 .album-spread .album-photo:nth-child(-n+2){grid-column:1/-1}
 .album-masonry{columns:2;column-gap:14px}
 .album-photo figcaption{font-size:12px;margin-top:8px}
 .album-heading p{font-size:13px}
 .lightbox-controls{gap:6px;padding:8px}
}

/* 写真の主従：部屋を大きく、設備は開いて、小物は一つのギャラリーに */
.photo-album .lead{margin-bottom:20px}
.photo-album .album-nav{margin:16px 0 32px}
.photo-album .album-group{margin-top:36px}
.photo-album .room-highlights{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.photo-more{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.photo-more summary{cursor:pointer;font-size:14px;line-height:1.8;padding:17px 32px 17px 0;word-break:auto-phrase;list-style:none;position:relative}
.photo-more summary::-webkit-details-marker{display:none}
.photo-more summary::after{content:'＋';position:absolute;right:4px;top:17px;font-size:18px}
.photo-more[open] summary::after{content:'−'}
.photo-more>.album-grid{padding-bottom:24px}
.photo-more .album-photo{opacity:1}
.photo-more .img-mask{clip-path:none}
.facility-more{margin-top:0}
.facility-note{font-size:13px;color:var(--ink-2);margin:0 0 20px}
.detail-gallery{columns:4 190px;column-gap:14px}
.detail-gallery .album-photo{margin:0 0 14px;break-inside:avoid}
.detail-gallery .zoomable{display:block;width:100%;background:none}
.detail-gallery img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
#album-details .album-heading{margin-bottom:20px}
#album-details .album-heading h3{font-size:20px}
.meal-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:8px 0 44px}
.meal-story h3{font-family:var(--mincho);font-weight:400;font-size:22px;letter-spacing:.1em;margin-bottom:18px}
.food-pair{display:grid;gap:20px}
.food-photo{margin:0}
.food-photo img{width:100%;height:auto;display:block;object-fit:contain;aspect-ratio:auto;transform:none!important}
.food-note{font-size:12px;color:var(--ink-2);line-height:1.9;margin-top:14px;word-break:auto-phrase}
.meal-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;align-items:start}
.meal-info .facts{margin-top:0}
@media(max-width:820px){
 .photo-album .room-highlights{gap:14px}
 .photo-album .room-highlights .album-photo{grid-column:auto}
 .photo-album .album-group{margin-top:28px}
 .photo-album .album-heading{padding-top:20px;margin-bottom:18px}
 .photo-more summary{font-size:13px}
 .detail-gallery{columns:2 140px;column-gap:10px}
 .detail-gallery .album-photo{margin-bottom:10px}
 .meal-stories{grid-template-columns:1fr;gap:32px;margin-bottom:32px}
 .food-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .meal-story h3{font-size:20px;margin-bottom:14px}
 .meal-info{grid-template-columns:1fr;gap:24px}
}

/* 一度に見せる写真を絞り、同じ操作で奥まで見られる写真スライド */
.room-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.room-stories .album-group{margin-top:8px;min-width:0}
.room-stories .album-heading{min-height:116px}
.room-stories .album-heading h3{font-size:23px;letter-spacing:.04em}
.photo-carousel{min-width:0}
.carousel-stage{touch-action:pan-y}
.carousel-slide{margin:0}
.carousel-slide[hidden]{display:none}
.carousel-slide img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none!important}
.carousel-slide figcaption{font-size:12px;color:var(--ink-2);line-height:1.7;margin-top:10px}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.carousel-controls button{border:1px solid var(--line);background:transparent;color:var(--ink);width:44px;height:40px;cursor:pointer;font-size:20px}
.carousel-status{font-size:12px;letter-spacing:.16em;color:var(--ink-2)}
.carousel-thumbs{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 8px;scrollbar-width:thin}
.carousel-thumb{flex:0 0 62px;width:62px;height:48px;padding:0;border:2px solid transparent;background:var(--paper-2);cursor:pointer;opacity:.6}
.carousel-thumb[aria-pressed="true"]{border-color:var(--moss);opacity:1}
.carousel-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.carousel-thumb:hover{opacity:1}
.meal-stories{gap:32px}
.meal-story .photo-carousel{margin-bottom:12px}
.meal-story .carousel-thumbs{display:none}
#album-facilities{margin-top:24px}
.photo-album{padding-bottom:72px}
@media(max-width:820px){
 .room-stories{grid-template-columns:1fr;gap:28px}
 .room-stories .album-heading{min-height:0}
 .room-stories .album-heading h3{font-size:21px}
 .carousel-controls button{height:44px}
 .carousel-thumbs{gap:6px}
 .carousel-thumb{flex-basis:52px;width:52px;height:42px}
 .meal-stories{gap:30px}
 .photo-album{padding-bottom:48px}
}

/* 実写で歩く。撮影画角を保ち、スマホは映像と短冊を上下に配置。 */
/* 実写動画のヒーロー：スクロール連動なし。動画は元の16:9のまま全画角で見せる */
.walk-video{height:100svh;min-height:560px;background:#201E1B}
.walk-video .walk-sticky{position:relative;height:100%;overflow:hidden}
.walk-clip,.walk-video .walk-poster{position:absolute;left:0;right:0;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translateY(-50%);object-fit:cover;max-height:100%}
.walk-clip{opacity:0;transition:opacity .8s var(--ease)}
.walk-video.playing .walk-clip{opacity:1}
.walk-video.playing .walk-poster{opacity:0;transition:opacity .8s var(--ease)}
.walk-replay,.walk-skip{position:absolute;bottom:22px;z-index:3;color:#fff;font:inherit;font-size:12px;letter-spacing:.1em;background:rgba(32,30,27,.82);padding:10px 14px;min-height:44px;display:flex;align-items:center;border:0;cursor:pointer}
.walk-replay{left:var(--gutter)}
.walk-skip{right:var(--gutter);text-decoration:underline;text-underline-offset:4px}
.walk-video .stage-0{position:absolute;inset:0;pointer-events:none}
.walk-video .stage-0 .tate-hero,.walk-video .stage-0 .stage-sub{pointer-events:auto}
@media(max-width:700px){
 .walk-video{height:auto;min-height:0;background:var(--paper);padding-top:88px}
 .walk-video .walk-sticky{height:auto;display:flex;flex-direction:column}
 .walk-clip,.walk-video .walk-poster{position:relative;top:0;transform:none;max-height:none;object-fit:contain}
 .walk-video .walk-poster{position:absolute;top:0}
 .walk-video .stage-0{position:relative;inset:auto;min-height:420px;padding:28px var(--gutter) 84px}
 .walk-video .tate-hero{position:absolute;top:24px;right:20px;font-size:23px;padding:18px 12px;box-shadow:none;background:transparent}
 .walk-video .stage-sub{position:absolute;left:20px;bottom:84px;max-width:210px;padding:0;background:transparent}
 .walk-video .stage-sub b{font-size:17px}
 .walk-video .stage-sub span{font-size:11px}
 .walk-replay,.walk-skip{font-size:10px;padding:8px;background:var(--paper);color:var(--ink);bottom:12px;min-height:40px}
}
body:has(.walk-video) .top{background:var(--paper)}

/* 宿泊詳細ページへの入口 */
.plan-summary{margin:24px 0 18px;line-height:1.9}
.plan-detail-link{margin:18px 0 28px}
.plan-detail-link .btn{white-space:normal;text-align:center}
.top-price-details{margin:28px 0;padding:18px 0;border-top:1px solid var(--line)}
.top-price-details summary{cursor:pointer;word-break:auto-phrase}
.top-price-details p{margin-top:16px;font-size:14px}

/* Language navigation and shared translated-page composition. */
.top{grid-template-columns:auto 1fr auto auto;gap:18px}
.language-switch{display:flex;gap:14px;align-items:center;font-size:12px;letter-spacing:0;white-space:nowrap}
.language-switch a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.language-switch [aria-current=page]{text-decoration:underline;text-underline-offset:5px}
footer .language-switch{justify-content:center;margin:24px 0}
html[lang=zh-Hant]{--sans:'Noto Sans TC',sans-serif}
.translated-home p{overflow-wrap:break-word}
.i18n-about{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.i18n-prose p{margin:0 0 22px;line-height:1.95;max-width:760px}
.i18n-prose h3{margin:38px 0 20px}
.i18n-prose>figure{max-width:160px;margin:24px 0}
.i18n-prose>figure img{border-radius:50%}
.i18n-photos figure{margin:0 0 32px}
.translated-home figure img{max-width:100%;height:auto}
.translated-home .facts{margin:30px 0}
.translated-home .facts>div{padding:12px 0;border-bottom:1px solid var(--line)}
.translated-home .facts dt{font-weight:600}
.translated-home .facts dd{margin:6px 0 0}
.translated-home .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.i18n-price{font-size:22px;line-height:1.6;margin:24px 0}
.translated-home .plan>p{margin-bottom:20px}
.i18n-meals{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:38px 0}
.i18n-photo-pair{display:grid;gap:20px}
.i18n-experiences{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:40px}
.translated-home #options>.sec-inner>figure{max-width:700px}
.translated-home #access>.sec-inner>figure{max-width:700px;margin-top:35px}
.translated-home .ferry-links{display:flex;flex-wrap:wrap;gap:24px;margin:24px 0}
html[lang=en] .tate-hero{writing-mode:horizontal-tb;max-width:560px;font-size:clamp(26px,3.1vw,44px);letter-spacing:.01em;line-height:1.5;padding:30px}
html[lang=en] .tate-hero span{display:block}
html[lang=en] .stage-sub{max-width:430px}
html[lang=en] .stage-sub b{letter-spacing:.04em}
html[lang=en] .nav{gap:16px;letter-spacing:0;font-size:12px}
@media(max-width:1100px){.top .nav{display:none}.top{grid-template-columns:1fr auto auto}.top .menu-btn{display:block}.top .language-switch{grid-row:2;grid-column:1/-1;justify-content:flex-end}.top,.top.solid{height:106px;gap:0 16px;padding-top:6px;padding-bottom:4px}.mobile-nav{top:106px}.walk-video{padding-top:106px}}
@media(max-width:700px){.top,.top.solid{height:100px}.mobile-nav{top:100px}.walk-video{padding-top:110px}.top .language-switch{justify-content:center}.i18n-about,.translated-home .plan-grid,.i18n-meals,.i18n-experiences{grid-template-columns:1fr;gap:35px}.translated-home .stage-0{min-height:460px}.translated-home .stage-sub{max-width:230px}.i18n-photo-pair{grid-template-columns:1fr 1fr;align-items:start}html[lang=en] .walk-video .stage-0{padding:28px 20px 84px;min-height:0}html[lang=en] .walk-video .tate-hero{position:static;max-width:none;padding:0;font-size:27px;margin-bottom:25px}html[lang=en] .walk-video .stage-sub{position:static;max-width:none}html[lang=en] .stage-sub span{font-size:13px}.translated-home .spots{grid-template-columns:1fr}.translated-home .plan{min-width:0}}
.walk-replay[hidden]{display:none}
.translated-home .i18n-prose>figure img{aspect-ratio:1;object-fit:cover;object-position:center 25%}
@media(max-width:1100px){html{scroll-padding-top:120px}}