/* 構成：古い児童書の挿絵のように、一日の移ろいを章ごとの色で描く。テーマ切替は持たず全色を明示する */
  @property --sw{syntax:'<angle>'; inherits:false; initial-value:360deg}
  @property --g{syntax:'<number>'; inherits:true; initial-value:0}
  @property --gh{syntax:'<number>'; inherits:true; initial-value:0}
  :root{
    color-scheme:dark;
    --busy:0;
    --night:#121620; --night-2:#1b2130;
    --gold:#e3b35c; --gold-dim:#b8954f;
    --barn:#a63a2b;
    --noon:#eeede6; --noon-ink:#25221d; --noon-soft:#6a6356;
    --tea:#f2e7d4;  --tea-ink:#2b231a;  --tea-soft:#7a6a55;
    --bean:#21150f; --bean-2:#2e1d14; --crema:#d8a86a; --bean-ink:#f0e2cc; --bean-soft:#bfa58a;
    --dusk:#3a2a2e; --dusk-ink:#f1e2cf; --dusk-soft:#c9ad94;
    --dark:#14121a; --dark-ink:#ece2d0; --dark-soft:#a99c88;
    --room:#1c1612;
    --paper:#ebe6da; --paper-ink:#29241d; --paper-soft:#6f6555;
    --fell:"IM Fell English","Iowan Old Style","Palatino Linotype",serif;
    --fellsc:"IM Fell English SC","IM Fell English","Palatino Linotype",serif;
    --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --story:"Kaisei Tokumin","Zen Old Mincho","Hiragino Mincho ProN",serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--night); color:var(--dark-ink); font-family:var(--mincho);
       font-size:16px; line-height:2; letter-spacing:.04em; -webkit-font-smoothing:antialiased; font-feature-settings:"palt" 0}
  img{display:block; max-width:100%; height:auto}
  a{color:inherit}
  button{font:inherit; color:inherit}
  h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
  ul,ol{padding:0; list-style:none}
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px}

  /* ---------- 刻印アイコン ---------- */
  .seal{--s:54px; position:relative; display:inline-grid; place-items:center; width:var(--s); height:var(--s); flex:none;
        border-radius:50%; border:1px solid currentColor; color:var(--gold)}
  .seal::before{content:""; position:absolute; inset:3px; border-radius:50%;
        background:repeating-conic-gradient(currentColor 0 1.6deg, transparent 1.6deg 30deg);
        -webkit-mask:radial-gradient(closest-side, transparent 86%, #000 87%); mask:radial-gradient(closest-side, transparent 86%, #000 87%); opacity:.7}
  .seal svg{width:58%; height:58%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .seal.sm{--s:40px}
  .seal.lg{--s:72px}

  /* ---------- 写真：時計の針がひとまわりして現れ、急ぐと過去と未来がずれる ---------- */
  .frame{position:relative; overflow:hidden; --sw:360deg}
  .frame img.main{position:relative; width:100%;
       filter:grayscale(max(calc(var(--busy) * .95), var(--g))) brightness(calc(1 - var(--busy) * .12))}
  .frame .ghost{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; mix-blend-mode:screen;
       opacity:calc(var(--busy) * .5 + var(--gh) * .6)}
  .ghost.past{filter:sepia(1) saturate(1.6); transform:translate(calc(var(--busy) * -28px + var(--gh) * -46px), calc(var(--gh) * 10px)) rotate(calc(var(--gh) * -2deg))}
  .ghost.next{filter:grayscale(1) brightness(.8); transform:translate(calc(var(--busy) * 28px + var(--gh) * 46px), calc(var(--gh) * -8px)) rotate(calc(var(--gh) * 2deg))}
  .frame .hand{position:absolute; left:50%; top:50%; width:2px; height:150%; margin-left:-1px; transform-origin:50% 0;
       background:linear-gradient(rgba(243,220,170,.95), rgba(227,179,92,0) 70%); opacity:0; pointer-events:none; transform:rotate(180deg)}
  .ph{--g:0; --gh:0; transition:--g 1.6s ease .9s, --gh 2.4s cubic-bezier(.2,.8,.2,1) .5s}
  .ph.wait{--g:1; --gh:1}
  .js .ph .frame{-webkit-mask:conic-gradient(#000 var(--sw), transparent 0); mask:conic-gradient(#000 var(--sw), transparent 0)}
  .ph.wait .frame{--sw:0deg}
  .ph.on .frame{animation:sweep 1.9s cubic-bezier(.55,0,.35,1) both}
  .ph.on .hand{animation:hand 1.9s cubic-bezier(.55,0,.35,1) both}
  .ph.wait figcaption,.ph.wait .spot{opacity:0}
  .ph figcaption,.ph .spot{transition:opacity .8s ease 1.6s}
  @keyframes sweep{from{--sw:0deg} to{--sw:360deg}}
  @keyframes hand{0%{transform:rotate(180deg); opacity:1} 90%{opacity:1} 100%{transform:rotate(540deg); opacity:0}}

  /* ---------- 上部 ---------- */
  .top{position:fixed; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; gap:28px;
       padding:calc(12px + env(safe-area-inset-top, 0px)) clamp(16px,4vw,40px) 12px; background:rgba(18,22,32,.8);
       -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--dark-ink)}
  .top .wm{font-family:var(--fell); font-size:19px; text-decoration:none; letter-spacing:.04em; white-space:nowrap}
  .top nav{display:flex; gap:22px; margin-left:auto; font-size:14px; font-family:var(--story)}
  .top nav a{text-decoration:none; opacity:.78}
  .top nav a:hover,.top nav a:focus-visible{opacity:1}
  .state{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--story);
         font-size:13px; padding:6px 14px 6px 10px; border:1px solid rgba(227,179,92,.45); border-radius:99px;
         white-space:nowrap; color:var(--dark-ink)}
  .state b{font-weight:500; color:var(--gold)}
  .state .s{display:none}
  .turtle{width:30px; height:17px; flex:none; overflow:visible}
  .turtle .leg{animation:paddle 2.4s ease-in-out infinite}
  .turtle .leg.b{animation-delay:-1.2s}
  .turtle .head{transition:transform .8s ease}
  .state.closed .turtle .leg{animation:none}
  .state.closed .turtle .head{transform:translateX(-3px)}
  @keyframes paddle{0%,100%{transform:translateX(0)}50%{transform:translateX(1.6px)}}
  @media (max-width:1140px){ .top nav{display:none} .state{margin-left:auto} }
  @media (max-width:420px){ .state #state-t{display:none} .state .s{display:inline} }

  /* ---------- 時計の部屋 ---------- */
  .hero{position:relative; height:clamp(600px,92vh,880px); background:var(--night); overflow:hidden}
  .hero canvas{position:absolute; inset:0; width:100%; height:100%; filter:saturate(calc(1 - var(--busy) * .9))}
  /* 画面に固定した、うっすらした絵。いま見ている内容に合わせて、ゆっくり入れかわる */
  .scene{position:fixed; inset:0; z-index:12; pointer-events:none; mix-blend-mode:screen}
  .scene i{position:absolute; inset:0; background:center 40% / cover no-repeat; opacity:0; transition:opacity 1.8s ease; filter:blur(1px) saturate(.8);
           -webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%, #000 30%, transparent 100%); mask-image:radial-gradient(ellipse 75% 80% at 50% 50%, #000 30%, transparent 100%)}
  .scene i.on{opacity:.2}
  @media (prefers-reduced-motion:reduce){ .scene i{transition:none} }
  @media print{ .scene{display:none} }
  .hero-in{position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
           text-align:center; padding:0 16px; pointer-events:none;
           background:radial-gradient(closest-side at 50% 52%, rgba(18,22,32,.92), rgba(18,22,32,.55) 55%, transparent 100%)}
  .hero h1{display:grid; gap:10px; font-weight:400}
  .hero h1 .en{font-family:var(--fell); font-size:clamp(36px,5.6vw,70px); line-height:1; letter-spacing:.01em; color:#f3e9d6}
  .hero h1 .ja{font-family:var(--story); font-weight:500; font-size:clamp(15px,1.7vw,19px); letter-spacing:.6em; color:var(--gold); padding-left:.6em}
  .hero .copy{margin-top:clamp(28px,4vw,46px); display:grid; gap:.42em; justify-items:center; pointer-events:auto; cursor:pointer;
               font-family:var(--story); font-weight:500; font-size:clamp(18px,4.2vw,36px); line-height:1; color:#f3e9d6;
               -webkit-tap-highlight-color:transparent}
  .hero .copy{max-width:calc(100vw - 32px)}
  .copy .line{max-width:100%; display:flex; flex-wrap:wrap; gap:.42em .12em; justify-content:center}
  .copy .grp{display:inline-flex; gap:.12em; align-items:center}
  .fl{position:relative; display:inline-grid; place-items:center; width:1.16em; height:1.44em; border-radius:.1em;
      background:linear-gradient(#262c3a 0 50%, #1b202c 50% 100%);
      box-shadow:inset 0 0 0 1px rgba(227,179,92,.2), 0 .1em .18em rgba(0,0,0,.55); perspective:3em;
      transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
  .fl.big{font-size:1.24em; background:linear-gradient(#3a2320 0 50%, #2a1916 50% 100%); box-shadow:inset 0 0 0 1px rgba(227,179,92,.38), 0 .1em .2em rgba(0,0,0,.6)}
  .fl.mid{font-size:.86em}
  .fl::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.7); box-shadow:0 1px 0 rgba(255,240,210,.07)}
  .fl .c{display:block; transform-origin:50% 50%}
  .fl.spin .c{color:#a99c88}
  .fl.tick .c{animation:flap .08s cubic-bezier(.2,.7,.3,1)}
  .fl.land .c{animation:land .34s cubic-bezier(.3,1.7,.5,1)}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  @keyframes flap{from{transform:rotateX(-82deg)} to{transform:rotateX(0)}}
  @keyframes land{0%{transform:rotateX(-82deg)} 62%{transform:rotateX(16deg)} 100%{transform:rotateX(0)}}
  .cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-family:var(--fell);
       font-size:15px; letter-spacing:.12em; color:#b9ae9b; text-decoration:none; display:grid; justify-items:center; gap:2px}
  .cue::after{content:""; width:1px; height:28px; background:linear-gradient(var(--gold-dim),transparent)}

  /* ---------- いまの時館（振り子時計の窓） ---------- */
  .now{position:relative; background:linear-gradient(var(--night), #17141b 60%, var(--night)); padding:clamp(70px,10vw,130px) 0}
  .now .in{width:min(100% - 32px,1100px); margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
           gap:clamp(30px,6vw,90px); align-items:center}
  .regbox{justify-self:center; width:min(100%,420px)}
  .regbox canvas{display:block; width:100%; aspect-ratio:1 / 1.52; cursor:default}
  .now .lbl{display:flex; align-items:center; gap:14px; font-family:var(--story); font-size:15px; letter-spacing:.3em; color:var(--gold)}
  .now .big{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 22px; margin-top:20px}
  .now .big time{font-family:var(--fell); font-size:clamp(64px,10vw,124px); line-height:.9; color:#f3e9d6; font-variant-numeric:lining-nums tabular-nums}
  .now .big span{font-family:var(--story); font-size:clamp(20px,2.6vw,28px); letter-spacing:.3em; color:var(--gold)}
  .now .say{margin-top:18px; font-size:17px; max-width:24em; min-height:4em; color:#e6dac4}
  .now .open{margin-top:6px; font-family:var(--story); font-size:14px; color:var(--dark-soft)}
  .dialbtns{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:30px}
  .dialbtns button{display:grid; justify-items:center; gap:0; min-width:74px; padding:9px 12px 7px; background:transparent; cursor:pointer;
       border:1px solid rgba(227,179,92,.32); border-radius:40px 40px 6px 6px; color:var(--dark-soft); transition:color .3s, border-color .3s, background .3s}
  .dialbtns button b{font-family:var(--fell); font-weight:400; font-size:17px; line-height:1.2; color:#efe3cd}
  .dialbtns button small{font-family:var(--story); font-size:12px; letter-spacing:.15em}
  .dialbtns button:nth-child(odd){transform:translateY(5px)}
  .dialbtns button[aria-pressed="true"]{border-color:var(--gold); background:rgba(227,179,92,.12); color:var(--gold)}
  .dialbtns button:hover{border-color:var(--gold)}
  .back{margin-top:22px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--story); font-size:14px;
        color:var(--gold); border-bottom:1px solid rgba(227,179,92,.5)}
  .back[hidden]{display:none}

  /* ---------- 珈琲 ---------- */
  .coffee{position:relative; overflow:hidden; color:var(--bean-ink); padding:clamp(90px,13vw,170px) 0 clamp(90px,12vw,150px);
          background:radial-gradient(120% 70% at 20% 30%, var(--bean-2), var(--bean) 70%)}
  .coffee .ghostword{position:absolute; left:-2vw; top:clamp(40px,6vw,80px); font-family:var(--fell); font-style:italic; font-size:clamp(120px,24vw,340px);
          line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(216,168,106,.16); white-space:nowrap; pointer-events:none; user-select:none}
  .coffee .in{position:relative; width:min(100% - 32px,1160px); margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
          gap:clamp(30px,6vw,96px); align-items:start}
  .drip{position:sticky; top:110px; justify-self:center; width:min(100%,360px)}
  .drip svg{width:100%; height:auto; overflow:visible}
  .drip .cap{text-align:center; font-family:var(--story); font-size:13px; color:var(--bean-soft); margin-top:8px}
  .coffee h2{display:flex; align-items:center; gap:18px; font-weight:400}
  .coffee h2 .t{display:grid; gap:4px}
  .coffee h2 .en{font-family:var(--fell); font-size:clamp(54px,8vw,104px); line-height:.9; color:#f6e6cc}
  .coffee h2 .ja{font-family:var(--story); font-size:16px; letter-spacing:.5em; color:var(--crema)}
  .coffee .lead{margin-top:34px; font-size:clamp(19px,2.2vw,24px); line-height:1.9; max-width:22em; color:#f3e3c8}
  .coffee .lead2{margin-top:16px; max-width:30em; color:var(--bean-soft)}
  .brews{margin-top:46px; display:grid; gap:0; border-top:1px solid rgba(216,168,106,.25)}
  .brews li{display:grid; grid-template-columns:clamp(84px,10vw,132px) minmax(0,1fr) auto; align-items:center; gap:6px clamp(16px,2.4vw,28px);
            padding:22px 0 20px; border-bottom:1px solid rgba(216,168,106,.25)}
  .brews li:nth-child(even) .bean{transform:translateY(-6px) rotate(8deg)}
  .bean{border-radius:50%; padding:5px; border:1px solid rgba(216,168,106,.45); position:relative}
  .bean::after{content:""; position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
       background:repeating-conic-gradient(rgba(216,168,106,.6) 0 1.4deg, transparent 1.4deg 30deg);
       -webkit-mask:radial-gradient(closest-side, transparent 92%, #000 93%); mask:radial-gradient(closest-side, transparent 92%, #000 93%)}
  .bean .frame{border-radius:50%; aspect-ratio:1}
  .bean .frame img.main{height:100%; object-fit:cover}
  @media (max-width:520px){ .brews li{grid-template-columns:76px minmax(0,1fr)} .brews .roast{grid-column:2} }
  .brews li:nth-child(2){padding-left:clamp(0px,3vw,40px)}
  .brews li:nth-child(3){padding-left:clamp(0px,1.4vw,18px)}
  .brews li:nth-child(4){padding-left:clamp(0px,4vw,56px)}
  .brews h3{font-family:var(--story); font-weight:500; font-size:clamp(19px,2vw,23px); letter-spacing:.1em; color:#f6e6cc}
  .brews h3 i{font-family:var(--fell); font-style:italic; font-weight:400; font-size:.8em; letter-spacing:.02em; color:var(--crema); margin-left:12px}
  .brews p{margin-top:6px; font-size:14.5px; color:var(--bean-soft); max-width:34em}
  .roast{display:flex; align-items:center; gap:5px; font-family:var(--story); font-size:12px; color:var(--bean-soft); white-space:nowrap}
  .roast i{width:9px; height:9px; border-radius:50%; border:1px solid var(--crema)}
  .roast i.f{background:var(--crema)}
  .pair{margin-top:38px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
  .pair div{padding:16px 18px; border:1px dashed rgba(216,168,106,.4); font-family:var(--story); font-size:14px; color:var(--bean-soft)}
  .pair div:nth-child(2){transform:translateY(12px) rotate(.6deg)}
  .pair b{display:block; font-weight:500; color:#f3e3c8; font-size:15px}
  .drops circle{animation:drop 1.5s cubic-bezier(.5,0,1,1) infinite}
  .drops circle:nth-child(2){animation-delay:-.5s}
  .drops circle:nth-child(3){animation-delay:-1s}
  @keyframes drop{0%{transform:translateY(0); opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateY(68px); opacity:0}}
  .fill{animation:fill 18s cubic-bezier(.4,0,.6,1) infinite}
  .grounds{animation:grounds 18s cubic-bezier(.4,0,.6,1) infinite}
  @keyframes fill{0%{transform:translateY(0)} 82%{transform:translateY(-78px)} 94%{transform:translateY(-78px)} 100%{transform:translateY(0)}}
  @keyframes grounds{0%{transform:translateY(0)} 82%{transform:translateY(62px)} 94%{transform:translateY(62px)} 100%{transform:translateY(0)}}
  .steam path{animation:steam 4s ease-in-out infinite; opacity:0}
  .steam path:nth-child(2){animation-delay:-2s}
  @keyframes steam{0%{opacity:0; transform:translateY(8px)} 40%{opacity:.6} 100%{opacity:0; transform:translateY(-14px)}}

  /* 提案の印 */
  .prop{display:inline-flex; align-items:center; gap:6px; font-family:var(--story); font-size:12px; letter-spacing:.12em; line-height:1;
        padding:6px 10px 5px; border:1px solid currentColor; border-radius:3px; transform:rotate(-2deg); color:var(--barn); max-width:100%}
  .prop::before{flex:none}
  .coffee .prop{color:#e48a74}
  .prop::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}

  /* ---------- 一日の章 ---------- */
  .day{position:relative; padding:clamp(80px,12vw,150px) 0}
  .day .in{width:min(100% - 32px,1160px); margin:0 auto; display:grid;
           grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,90px); align-items:start}
  .day.flip .in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .day.flip .clock{order:2}
  .clock{position:sticky; top:110px}
  .clock .seal{margin-bottom:18px}
  .clock time{display:block; font-family:var(--fell); font-size:clamp(70px,11vw,150px); line-height:.86;
              letter-spacing:-.02em; font-variant-numeric:oldstyle-nums}
  .clock .word{display:block; margin-top:18px; font-family:var(--story); font-size:18px; letter-spacing:.5em}
  .clock p{margin-top:28px; max-width:19em; font-size:15.5px}
  .names{margin-top:30px; display:grid; gap:4px; font-size:17.5px}
  .names li{display:flex; gap:12px; align-items:baseline}
  .names li:nth-child(2){padding-left:1.4em}
  .names li:nth-child(3){padding-left:.5em}
  .names li::before{content:""; width:14px; height:1px; background:currentColor; opacity:.45; flex:none; transform:translateY(-4px)}
  .aside{margin-top:22px; font-family:var(--story); font-size:14px}

  .noon{background:linear-gradient(var(--bean) 0, #4a3a34 80px, #b9a58e 200px, #e4ddd0 280px, var(--noon) 350px); color:var(--noon-ink)}
  .noon .seal{color:#8a6a2c}
  .noon .clock time{color:var(--noon-ink)}
  .noon .aside,.noon .clock p{color:var(--noon-soft)}
  .plate{position:relative; max-width:500px; justify-self:end; margin-top:clamp(0px,5vw,70px); transform:rotate(1.2deg)}
  .plate::before{content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid rgba(37,34,29,.22); transform:rotate(-2.4deg)}

  .tea{background:linear-gradient(var(--noon) 0, var(--tea) 200px); color:var(--tea-ink)}
  .tea .seal{color:var(--barn)}
  .tea .clock time{color:var(--barn)}
  .tea .clock p,.tea .aside{color:var(--tea-soft)}
  .tea-photo{max-width:620px; transform:rotate(-.8deg)}
  .card{margin-top:-64px; margin-left:auto; position:relative; z-index:2; width:min(100%,340px);
        background:#fbf6ec; color:var(--tea-ink); padding:26px 28px 24px; font-family:var(--story);
        box-shadow:0 22px 40px -26px rgba(60,40,15,.6); transform:rotate(-1.6deg)}
  .card h3{font-weight:500; font-size:20px; letter-spacing:.12em}
  .card .when{font-size:13px; color:var(--barn); margin-top:2px}
  .card p{margin-top:12px; font-size:14.5px; line-height:1.8}
  .card .yen{margin-top:14px; font-family:var(--fell); font-size:30px; line-height:1}
  .card .yen small{font-family:var(--story); font-size:13px; margin-left:4px}
  .card .plus{margin-top:12px; font-size:12.5px; color:var(--tea-soft); border-top:1px dashed rgba(43,35,26,.25); padding-top:10px}
  @media (max-width:760px){ .card{margin-top:-40px; margin-right:12px} }

  .dusk{background:linear-gradient(var(--tea) 0, #d9a47c 140px, #6e4646 340px, var(--dusk) 520px); color:var(--dusk-ink)}
  .dusk .seal{color:#f0c79a}
  .dusk .clock time{color:#f6dcc0}
  .dusk .clock p,.dusk .aside{color:var(--dusk-soft)}
  .dusk-photo{max-width:640px; margin-top:clamp(0px,8vw,110px); transform:rotate(1deg)}
  figcaption,.cap{font-family:var(--story); font-size:13px; margin-top:12px; opacity:.78}

  .night{background:linear-gradient(var(--dusk) 0, var(--dark) 260px); color:var(--dark-ink)}
  .night .clock time{color:var(--gold)}
  .night .clock p,.night .aside{color:var(--dark-soft)}
  .collage{position:relative; display:grid; grid-template-columns:repeat(12,1fr); align-items:start}
  .collage .a{grid-column:1 / 11; grid-row:1; transform:rotate(-1deg)}
  .collage .b{grid-column:8 / 13; grid-row:1; margin-top:58%; box-shadow:0 30px 60px -20px #000; transform:rotate(2deg)}
  .collage .b .frame{border:6px solid var(--dark)}

  /* ---------- へや ---------- */
  .room{background:linear-gradient(var(--dark) 0, var(--room) 200px); color:var(--dark-ink); padding:clamp(80px,12vw,150px) 0}
  .room .in{width:min(100% - 32px,1160px); margin:0 auto; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
            gap:clamp(32px,6vw,80px); align-items:center}
  .room h2,.visit h2,.take h2{display:flex; align-items:center; gap:18px; font-weight:400}
  .room h2 .t,.visit h2 .t,.take h2 .t{display:grid; gap:12px}
  .room h2 .en,.visit h2 .en{font-family:var(--fell); font-size:clamp(40px,6vw,72px); line-height:1; color:#f1e6d1}
  .room h2 .ja,.visit h2 .ja{font-family:var(--story); font-size:16px; letter-spacing:.5em; color:var(--gold)}
  .look{position:relative; max-width:520px}
  .spot{position:absolute; z-index:3; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:0; padding:0;
        background:radial-gradient(circle, rgba(255,233,180,.95) 0 4px, rgba(255,214,140,.35) 5px 10px, transparent 11px); cursor:pointer}
  .spot::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,225,170,.7); animation:breathe 3.6s ease-in-out infinite}
  .spot[aria-pressed="true"]{background:radial-gradient(circle, #fff3d6 0 5px, rgba(227,179,92,.7) 6px 11px, transparent 12px)}
  @keyframes breathe{0%,100%{transform:scale(.75); opacity:.9}50%{transform:scale(1.25); opacity:.2}}
  .things{display:grid; margin-top:34px; border-top:1px solid rgba(236,226,208,.16)}
  .things li{display:grid; grid-template-columns:28px 1fr; gap:10px; padding:13px 0; border-bottom:1px solid rgba(236,226,208,.16); color:var(--dark-soft); transition:color .4s}
  .things li i{font-style:normal; font-family:var(--fell); color:var(--gold-dim)}
  .things li.on{color:#f6ecd8}
  .things li.on i{color:var(--gold)}
  .things b{font-weight:600; display:block; color:inherit}
  .things small{font-family:var(--story); font-size:13px}

  /* ---------- おしながき ---------- */
  .menu{background:linear-gradient(var(--room) 0, #2a221b 120px, var(--paper) 360px); color:var(--paper-ink); padding:clamp(90px,12vw,150px) 0 clamp(70px,9vw,110px)}
  .sheet{width:min(100% - 32px,900px); margin:0 auto; background:#f6f1e6; padding:clamp(34px,6vw,64px) clamp(22px,6vw,70px);
         box-shadow:0 40px 80px -50px rgba(40,30,15,.7); position:relative}
  .sheet::before{content:""; position:absolute; inset:10px; border:1px solid rgba(41,36,29,.18); pointer-events:none}
  .sheet header{display:grid; justify-items:center; text-align:center; gap:10px}
  .sheet header .seal{color:var(--barn)}
  .sheet h2{font-family:var(--fell); font-weight:400; font-size:clamp(34px,5vw,54px); line-height:1}
  .sheet header p{font-family:var(--story); font-size:14px; letter-spacing:.5em; color:var(--paper-soft); padding-left:.5em}
  .cols{display:grid; grid-template-columns:1fr 1fr; gap:10px clamp(28px,5vw,60px); margin-top:44px}
  .grp h3{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; font-family:var(--fell); font-style:italic; font-weight:400; font-size:22px; color:var(--barn);
          border-bottom:1px solid rgba(41,36,29,.2); padding-bottom:6px}
  .grp h3 span{font-family:var(--story); font-style:normal; font-size:13px; letter-spacing:.2em; color:var(--paper-soft)}
  .grp h3 .prop{margin-left:auto; font-size:11px; padding:4px 8px 3px}
  .grp .note{font-family:var(--story); font-size:13px; color:var(--paper-soft); margin:8px 0 4px}
  .grp ul{margin-top:8px; margin-bottom:30px}
  .grp .sub+ul{margin-top:0}
  .grp li{display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:15.5px}
  .grp li .dots{flex:1; border-bottom:1px dotted rgba(41,36,29,.35); transform:translateY(-5px); min-width:20px}
  .grp li .p{font-variant-numeric:tabular-nums lining-nums}
  .grp .sub{font-family:var(--story); font-size:13px; color:var(--paper-soft); margin-top:4px}
  .grp li em{font-style:normal; font-family:var(--story); font-size:12.5px; color:var(--paper-soft); display:block; line-height:1.4}
  .sheet .foot{text-align:center; font-family:var(--story); font-size:13px; color:var(--paper-soft)}
  @media (max-width:700px){ .cols{grid-template-columns:1fr} }

  /* ---------- おもちかえり・おみせ ---------- */
  .take{background:linear-gradient(var(--paper) 0, #e4dccb 100%); color:var(--paper-ink); padding:clamp(40px,6vw,80px) 0 clamp(90px,12vw,150px)}
  .take .in{width:min(100% - 32px,1160px); margin:0 auto}
  .take h2 .seal{color:var(--barn)}
  .take h2 .en{font-family:var(--fell); font-size:clamp(40px,6vw,72px); line-height:1}
  .take h2 .ja{font-family:var(--story); font-size:16px; letter-spacing:.5em; color:var(--barn)}
  .take .intro{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:22px; max-width:46em; color:var(--paper-soft)}
  .takeout{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; margin-top:54px}
  .takeout li{display:grid; justify-items:center; text-align:center; gap:10px; font-family:var(--story); font-size:14px; line-height:1.6}
  .takeout li:nth-child(even){transform:translateY(26px)}
  .takeout li:nth-child(3){transform:translateY(-8px)}
  .takeout .seal{color:var(--paper-ink)}
  .takeout b{display:block; font-weight:500; font-size:15.5px}
  .takeout small{color:var(--paper-soft); font-size:12.5px}
  @media (max-width:820px){ .takeout{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 16px} .takeout li:nth-child(n){transform:none} .takeout li:nth-child(even){transform:translateY(22px)} }

  .shop{margin-top:clamp(80px,10vw,120px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(30px,5vw,64px); align-items:start}
  .shop h3,.ticketwrap h3{font-family:var(--fell); font-weight:400; font-size:clamp(30px,4vw,44px); line-height:1}
  .shop h3 span,.ticketwrap h3 span{display:block; margin-top:8px; font-family:var(--story); font-size:14px; letter-spacing:.4em; color:var(--barn)}
  .shop .lede{margin-top:14px; color:var(--paper-soft); max-width:30em}
  .goods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:30px}
  .good{position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:8px; background:#f7f2e7; padding:18px 16px 16px;
        border:1px solid rgba(41,36,29,.14)}
  .good:nth-child(3n+2){margin-top:22px}
  .good:nth-child(3n){margin-top:8px}
  .good .art{height:96px; display:grid; place-items:center; background:radial-gradient(circle at 50% 60%, rgba(166,58,43,.08), transparent 70%)}
  .good .art svg{width:74px; height:74px; fill:none; stroke:var(--paper-ink); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
  .good h4{margin:0; font-family:var(--story); font-weight:500; font-size:15.5px; line-height:1.5}
  .good p{font-size:13px; color:var(--paper-soft); line-height:1.7}
  .good .row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px}
  .good .yen{font-family:var(--fell); font-size:22px; font-variant-numeric:lining-nums}
  .good .yen small{font-family:var(--story); font-size:11px; margin-left:2px; color:var(--paper-soft)}
  .add{font-family:var(--story); font-size:13px; padding:7px 12px; background:var(--paper-ink); color:#f6f1e6; border:0; cursor:pointer; white-space:nowrap}
  .add:hover,.add:focus-visible{background:var(--barn)}
  .add.done{background:var(--barn)}
  @media (max-width:980px){ .shop{grid-template-columns:1fr} }
  @media (max-width:620px){ .goods{grid-template-columns:repeat(2,minmax(0,1fr))} .good:nth-child(n){margin-top:0} .good:nth-child(even){margin-top:18px} }

  .basket{position:sticky; top:96px; background:var(--paper-ink); color:#efe6d4; padding:26px 24px 22px}
  .basket h4{margin:0; display:flex; align-items:center; gap:12px; font-family:var(--story); font-weight:500; font-size:17px; letter-spacing:.2em}
  .basket .seal{color:var(--gold); --s:40px}
  .basket ul{margin-top:16px; display:grid; gap:6px; font-size:14px; min-height:3em}
  .basket li{display:flex; gap:10px; align-items:baseline}
  .basket li span:first-child{flex:1}
  .basket li button{background:none; border:0; color:var(--dark-soft); cursor:pointer; padding:0 4px; font-size:13px}
  .basket .empty{font-family:var(--story); font-size:13px; color:var(--dark-soft)}
  .basket .sum{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:12px; border-top:1px solid rgba(239,230,212,.2)}
  .basket .sum b{font-family:var(--fell); font-weight:400; font-size:28px; color:var(--gold); font-variant-numeric:lining-nums}
  .basket .ways{margin-top:12px; display:grid; gap:6px}
  .basket .ways label{display:flex; gap:8px; align-items:center; font-family:var(--story); font-size:13px; color:#d8ccb6; cursor:pointer}
  .basket .ways input{accent-color:var(--gold)}
  .basket .go2{margin-top:16px; width:100%; padding:13px; background:var(--gold); color:#1a160f; border:0; font-family:var(--story); font-size:15px; letter-spacing:.2em; cursor:pointer}
  .basket .go2:disabled{opacity:.4; cursor:default}
  .basket .msg{margin-top:12px; font-family:var(--story); font-size:13px; line-height:1.7; color:#e8d9bd; border:1px dashed rgba(227,179,92,.5); padding:10px 12px}

  .ticketwrap{margin-top:clamp(80px,10vw,120px); display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(30px,5vw,70px); align-items:center}
  .ticketwrap p{margin-top:16px; color:var(--paper-soft); max-width:26em}
  .ticketwrap .row2{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:22px}
  .ticketwrap .yen{font-family:var(--fell); font-size:34px; font-variant-numeric:lining-nums}
  .ticketwrap .yen small{font-family:var(--story); font-size:12px; color:var(--paper-soft); margin-left:4px}
  .cheer{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:visible; transition:opacity 1s}
  .cheer.out{opacity:0}
  .cheer i{position:absolute; left:50%; top:50%; width:8px; height:12px; opacity:0}
  .cheer-t{position:absolute; left:50%; top:50%; margin:0; display:grid; justify-items:center; font-family:var(--fell); font-style:italic; font-size:clamp(34px,5vw,52px); line-height:1;
           color:#a63a2b; text-shadow:0 2px 0 #f3e6c9, 0 0 18px #f3e6c9; animation:cheerIn 1.1s cubic-bezier(.2,1.4,.4,1) both; white-space:nowrap}
  .cheer-t small{font-family:var(--story); font-style:normal; font-size:13px; letter-spacing:.3em; color:#4a2a1c; margin-top:8px}
  @keyframes cheerIn{0%{transform:translate(-50%,-30%) scale(.6); opacity:0}100%{transform:translate(-50%,-50%) scale(1); opacity:1}}
  .ticket{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 92px; background:#f3e6c9; color:#4a2a1c;
          box-shadow:0 30px 50px -30px rgba(60,35,15,.6); transform:rotate(-2.4deg); max-width:560px; justify-self:center; width:100%}
  .ticket::before,.ticket::after{content:""; position:absolute; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:#e7dfcd}
  .ticket::before{left:-11px} .ticket::after{right:-11px}
  .ticket .main2{padding:22px 24px 18px 28px; border-right:2px dashed rgba(74,42,28,.35)}
  .ticket .hd{display:flex; align-items:center; gap:12px}
  .ticket .hd .seal{--s:46px; color:#8a3a24}
  .ticket .hd b{display:block; font-family:var(--fellsc); font-weight:400; font-size:20px; letter-spacing:.06em; line-height:1.1}
  .ticket .hd small{font-family:var(--story); font-size:12.5px; letter-spacing:.2em}
  .holes{display:grid; grid-template-columns:repeat(6,1fr); gap:8px 6px; margin-top:16px}
  .hole{position:relative; aspect-ratio:1; max-width:46px; width:100%; border-radius:50%; border:1px solid rgba(74,42,28,.5); background:transparent; cursor:pointer;
        font-family:var(--fell); font-size:13px; color:#6a3a24; display:grid; place-items:center; padding:0}
  .hole[aria-pressed="true"]{background:#e7dfcd; box-shadow:inset 0 2px 4px rgba(60,35,15,.5); color:transparent; border-style:dashed}
  .hole:disabled{cursor:default; opacity:.55}
  .hole[aria-pressed="true"]:disabled{opacity:1}
  .hole.next{border-width:2px; border-color:#8a3a24; animation:holeNext 2.4s ease-in-out infinite}
  .hole.last{cursor:pointer}
  @keyframes holeNext{0%,100%{box-shadow:0 0 0 0 rgba(138,58,36,.35)}50%{box-shadow:0 0 0 5px rgba(138,58,36,0)}}
  .hole.gift{border-color:#8a3a24; color:#8a3a24; font-family:var(--story); font-size:11px}
  .ticket .ft{display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 14px; margin-top:12px; font-family:var(--story); font-size:11.5px; color:#7a5a44}
  .ticket .stat{display:flex; flex-wrap:wrap; gap:2px 14px; min-height:1.7em; margin-top:12px; padding-top:8px; border-top:1px dashed rgba(74,42,28,.3);
                font-family:var(--story); font-size:12.5px; color:#8a3a24}
  .ticket .stat .hint{color:#7a5a44}
  .ticket .stub{display:grid; place-items:center; writing-mode:vertical-rl; font-family:var(--story); font-size:14px; letter-spacing:.4em; color:#6a3a24; padding:14px 0}
  @media (max-width:820px){ .ticketwrap{grid-template-columns:1fr} .ticket{grid-template-columns:minmax(0,1fr) 54px} .ticket .main2{padding:18px 16px 14px 20px}}

  /* ---------- むかし ---------- */
  .past{background:#e4dccb; color:var(--paper-ink); padding:clamp(40px,7vw,90px) 0 clamp(90px,12vw,150px)}
  .past .in{width:min(100% - 32px,1060px); margin:0 auto; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr);
            gap:clamp(32px,6vw,90px); align-items:center}
  .past .seal{color:var(--barn); margin-bottom:18px}
  .past .yr{font-family:var(--fell); font-size:clamp(70px,11vw,140px); line-height:.86; color:var(--barn)}
  .past .yr span{display:block; font-family:var(--story); font-size:17px; letter-spacing:.5em; color:var(--paper-ink); margin-top:18px}
  .past p{margin-top:24px; max-width:26em}
  .past .sis{margin-top:30px; font-family:var(--story); font-size:14px; color:var(--paper-soft); border-left:2px solid var(--barn); padding-left:14px}
  .barnph{max-width:400px; justify-self:center; transform:rotate(-1.4deg)}

  /* ---------- ご予約 ---------- */
  .reserve{background:linear-gradient(#e4dccb 0, #3a2e24 150px, var(--room) 300px); color:var(--dark-ink); padding:clamp(90px,11vw,150px) 0 clamp(80px,11vw,140px)}
  .reserve .in{width:min(100% - 32px,1160px); margin:0 auto; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(30px,5vw,80px); align-items:start}
  .reserve h2{display:flex; align-items:center; gap:18px; font-weight:400}
  .reserve h2 .t{display:grid; gap:12px}
  .reserve h2 .en{font-family:var(--fell); font-size:clamp(40px,6vw,72px); line-height:1; color:#f1e6d1}
  .reserve h2 .ja{font-family:var(--story); font-size:16px; letter-spacing:.5em; color:var(--gold)}
  .reserve .prop{color:#e48a74; margin-top:26px}
  .reserve .why{margin-top:22px; max-width:22em; color:#e6dac4}
  .reserve .why2{margin-top:14px; max-width:24em; font-size:14.5px; color:var(--dark-soft)}
  .seatmix{margin-top:30px; display:grid; gap:10px; font-family:var(--story); font-size:13px; color:var(--dark-soft)}
  .seatmix .bar{display:grid; grid-template-columns:12fr 15fr; height:12px; border:1px solid rgba(227,179,92,.5)}
  .seatmix .bar i{background:repeating-linear-gradient(90deg, var(--gold) 0 calc(100% / 12 - 2px), transparent 0 calc(100% / 12))}
  .seatmix .bar i+i{background:repeating-linear-gradient(90deg, rgba(236,226,208,.28) 0 calc(100% / 15 - 2px), transparent 0 calc(100% / 15))}
  .seatmix .lg{display:flex; flex-wrap:wrap; gap:4px 18px}
  .seatmix b{font-weight:500; color:var(--gold)}
  .ledger{position:relative; background:#f4ecda; color:var(--paper-ink); padding:clamp(26px,4vw,44px) clamp(18px,4vw,44px) clamp(24px,3vw,36px);
          box-shadow:0 40px 70px -40px #000; transform:rotate(.5deg);
          background-image:linear-gradient(90deg, transparent 0 34px, rgba(166,58,43,.25) 34px 35px, transparent 35px)}
  .ledger::before{content:"予約帳"; position:absolute; top:-14px; right:28px; padding:6px 16px; background:var(--barn); color:#f6ead2;
          font-family:var(--story); font-size:13px; letter-spacing:.4em; transform:rotate(-3deg)}
  .step{display:grid; grid-template-columns:30px minmax(0,1fr); gap:0 14px; padding:18px 0; border-bottom:1px dashed rgba(41,36,29,.22)}
  .step:last-of-type{border-bottom:0}
  .step>i{font-style:normal; font-family:var(--fell); font-size:20px; color:var(--barn); line-height:1.4}
  .step h3{font-family:var(--story); font-weight:500; font-size:15.5px; letter-spacing:.2em; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
  .step h3 small{font-size:12px; letter-spacing:.06em; color:var(--paper-soft)}
  .opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
  .dbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:12px}
  .dview{display:inline-flex; border:1px solid rgba(41,36,29,.35)}
  .vbtn{padding:6px 14px; background:transparent; border:0; cursor:pointer; font-family:var(--story); font-size:13px; letter-spacing:.1em; color:var(--paper-ink)}
  .vbtn+.vbtn{border-left:1px solid rgba(41,36,29,.35)}
  .vbtn[aria-pressed="true"]{background:var(--paper-ink); color:#f6f1e6}
  .dnav{display:flex; align-items:center; gap:10px; font-family:var(--story); font-size:14px; letter-spacing:.06em}
  .dnav span{min-width:9.5em; text-align:center; font-variant-numeric:lining-nums}
  .navb{width:34px; height:34px; border:1px solid rgba(41,36,29,.3); background:#fbf7ee; cursor:pointer; font-family:var(--fell); font-size:20px; line-height:1; color:var(--paper-ink)}
  .navb:disabled{opacity:.3; cursor:default}
  .dates{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
  .dates .opt{min-width:0; padding:6px 2px 5px}
  .dates .opt small{white-space:nowrap; font-size:10.5px}
  .dates .opt.now{box-shadow:inset 0 0 0 1px var(--barn)}
  .dates.month .opt{padding:5px 2px 3px; min-height:46px}
  .dates.month .opt b{font-size:17px}
  .dates .wd{text-align:center; font-family:var(--story); font-size:12px; color:var(--paper-soft)}
  .dates .wd.sun{color:var(--barn)}
  .dates .out{display:grid; place-items:center; min-height:46px; font-family:var(--fell); font-size:15px; color:rgba(41,36,29,.22)}
  .rv-picked{margin-top:10px; min-height:1.6em; font-family:var(--story); font-size:13.5px; color:var(--barn)}
  .opt{display:grid; justify-items:center; gap:0; min-width:52px; padding:7px 10px 6px; background:#fbf7ee; border:1px solid rgba(41,36,29,.25);
       color:var(--paper-ink); cursor:pointer; font-family:var(--story); font-size:14px; line-height:1.35}
  .opt b{font-family:var(--fell); font-weight:400; font-size:20px; line-height:1.1; font-variant-numeric:lining-nums}
  .opt small{font-size:11px; color:var(--paper-soft)}
  .opt.sun small,.opt.sun b{color:var(--barn)}
  .opt[aria-pressed="true"]{background:var(--paper-ink); border-color:var(--paper-ink); color:#f6f1e6}
  .opt[aria-pressed="true"] small,.opt[aria-pressed="true"] b{color:#f6f1e6}
  .opt:disabled{opacity:.38; cursor:default; background:transparent}
  .opt:not(:disabled):hover{border-color:var(--barn)}
  .slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .slots .opt b{font-size:17px}
  .slots .opt .mk{font-family:var(--mincho); font-size:13px; color:var(--barn)}
  .slots .opt[aria-pressed="true"] .mk{color:var(--gold)}
  .seats .opt{min-width:0; padding:9px 14px 8px}
  .fields{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
  .fields label{display:grid; gap:4px; font-family:var(--story); font-size:12.5px; color:var(--paper-soft)}
  .fields label.wide{grid-column:1 / -1}
  .fields input,.fields textarea{font:inherit; font-family:var(--mincho); font-size:15px; color:var(--paper-ink); background:#fbf7ee;
       border:0; border-bottom:1px solid rgba(41,36,29,.4); padding:8px 10px; border-radius:0; min-width:0}
  .fields textarea{resize:vertical; min-height:64px}
  .fields input:focus,.fields textarea:focus{outline:none; border-bottom-color:var(--barn); background:#fff}
  .rv-foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:22px}
  .rv-go{padding:14px 30px; background:var(--barn); color:#f6ead2; border:0; font-family:var(--story); font-size:15px; letter-spacing:.24em; cursor:pointer}
  .rv-go:hover,.rv-go:focus-visible{background:#8a2e22}
  .rv-err{font-family:var(--story); font-size:13px; color:var(--barn)}
  .rv-note{margin-top:14px; font-family:var(--story); font-size:12px; color:var(--paper-soft)}
  .rv-done{margin-top:20px; padding:20px 22px; border:1px solid var(--barn); background:#fbf7ee; position:relative}
  .rv-done h4{margin:0; font-family:var(--story); font-weight:500; font-size:16px; letter-spacing:.2em; color:var(--barn)}
  .rv-done dl{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; margin-top:12px; font-size:14.5px}
  .rv-done dt{font-family:var(--story); color:var(--paper-soft); font-size:13px}
  .rv-done p{margin-top:12px; font-family:var(--story); font-size:12.5px; line-height:1.8; color:var(--paper-soft)}
  @media (max-width:900px){ .reserve .in{grid-template-columns:1fr} }
  @media (max-width:520px){ .fields{grid-template-columns:1fr} .step{grid-template-columns:22px minmax(0,1fr); gap:0 10px} .ledger{background-image:none} }

  /* ---------- ご来店 ---------- */
  .visit{background:var(--night); color:var(--dark-ink); padding:clamp(80px,11vw,140px) 0}
  .visit .in{width:min(100% - 32px,1160px); margin:0 auto}
  .vgrid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(30px,5vw,70px); margin-top:56px; align-items:start}
  .hours{display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:center}
  .dial{width:200px; height:200px}
  .dial text{font-family:var(--fell); fill:#9a8f7e; font-size:12px}
  .htable{width:100%; border-collapse:collapse; font-size:15px}
  .htable th,.htable td{padding:11px 0; border-bottom:1px solid rgba(236,226,208,.14); text-align:left; vertical-align:top}
  .htable th{font-weight:600; width:4.6em; color:#f1e6d1}
  .htable td{font-family:var(--fell); font-size:18px; color:#e8dcc6}
  .htable td small{display:block; font-family:var(--story); font-size:12.5px; color:var(--dark-soft)}
  .htable tr.today th,.htable tr.today td{color:var(--gold)}
  .htable tr.off td{color:var(--dark-soft)}
  .map{background:#171c28; border:1px solid rgba(236,226,208,.12)}
  .map svg{width:100%; height:auto; display:block}
  .map svg text{font-family:var(--mincho); font-size:12px; fill:#a99c88; letter-spacing:.06em}
  .map .lbl-strong{fill:#f1e6d1; font-size:13px}
  .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 40px; margin-top:44px}
  .facts div{padding:14px 0; border-top:1px solid rgba(236,226,208,.14)}
  .facts dt{font-family:var(--story); font-size:12.5px; color:var(--dark-soft)}
  .facts dd{font-size:15.5px; color:#efe4d0}
  .facts dd a{text-decoration:none; border-bottom:1px solid rgba(227,179,92,.5)}
  .go{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
  .go a{font-family:var(--story); font-size:15px; text-decoration:none; padding:13px 26px; border:1px solid var(--gold-dim); color:#f1e6d1; letter-spacing:.1em}
  .go a:first-child{background:var(--gold); color:#1a160f; border-color:var(--gold)}
  .go a:hover,.go a:focus-visible{background:#f0c878; color:#1a160f; border-color:#f0c878}
  @media (max-width:900px){ .vgrid{grid-template-columns:1fr} }
  @media (max-width:520px){ .hours{grid-template-columns:1fr; justify-items:center} .htable{max-width:340px} }

  footer{background:#0c0f16; color:#8f8574; padding:40px 0 110px; font-size:13px}
  footer .in{width:min(100% - 32px,1160px); margin:0 auto; display:flex; flex-wrap:wrap; gap:14px 40px; align-items:baseline}
  footer .wm{font-family:var(--fell); font-size:20px; color:#e9dfcc}
  footer .demo{flex-basis:100%; font-family:var(--story); font-size:12px; color:#6f6759; line-height:1.8}
  footer a{text-decoration:none}

  .dock{position:fixed; inset:auto 0 0 0; z-index:20; display:none; grid-template-columns:1fr 1fr 1fr; background:rgba(18,22,32,.92);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid rgba(227,179,92,.3)}
  .dock a{padding:15px 0 calc(15px + env(safe-area-inset-bottom, 0px)); text-align:center; text-decoration:none; font-family:var(--story); font-size:15px; letter-spacing:.14em; color:#f1e6d1}
  .dock a+a{border-left:1px solid rgba(227,179,92,.3)}

  /* ---------- スマホ ---------- */
  @media (max-width:820px){
    .day .in,.day.flip .in,.room .in,.past .in,.now .in,.coffee .in{grid-template-columns:1fr}
    .day.flip .clock{order:0}
    .clock,.drip{position:static}
    .drip{width:min(78%,300px)}
    .plate{justify-self:stretch; max-width:none; transform:rotate(.8deg)}
    .plate::before{display:none}
    .collage .a{grid-column:1 / 13}
    .collage .b{grid-column:6 / 13; margin-top:-30%}
    .look{max-width:none}
    .barnph{max-width:300px}
    .regbox{width:min(100%,340px)}
    .basket{position:static}
    .dock{display:grid}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::after,*::before{animation:none !important; transition:none !important}
  }

  /* ---------- 複数ページ用 ---------- */
  .top nav a[aria-current="page"]{opacity:1; color:var(--gold); border-bottom:1px solid rgba(227,179,92,.6)}
  .sample{position:fixed; z-index:30; left:0; bottom:calc(64px + env(safe-area-inset-bottom, 0px)); padding:7px 14px 7px 12px;
          background:var(--barn); color:#f6ead2; font-family:var(--story); font-size:12px; letter-spacing:.2em; text-decoration:none;
          border-radius:0 3px 3px 0; box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
  @media (min-width:821px){ .sample{bottom:22px} }

  .pagehead{background:var(--phbg); color:var(--dark-ink); padding:calc(120px + env(safe-area-inset-top, 0px)) 0 clamp(26px,4vw,44px)}
  .pagehead .in{width:min(100% - 32px,1160px); margin:0 auto}
  .pagehead .crumb{font-family:var(--story); font-size:12.5px; letter-spacing:.14em; color:var(--dark-soft); display:flex; gap:8px; flex-wrap:wrap}
  .pagehead .crumb a{text-decoration:none; color:var(--gold)}
  .pagehead :is(h1,.h1){display:flex; align-items:center; gap:14px; margin-top:14px; font-weight:400}
  .pagehead :is(h1,.h1) .seal{--s:46px}
  .pagehead :is(h1,.h1) .t{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 16px}
  .pagehead :is(h1,.h1) .en{font-family:var(--fell); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.1; color:#f1e6d1}
  .pagehead :is(h1,.h1) .ja{font-family:var(--story); font-size:15px; letter-spacing:.4em; color:var(--gold)}
  .pagehead .lead{margin-top:12px; max-width:34em; font-size:15px; color:var(--dark-soft)}
  .pagehead.light{color:var(--paper-ink)}
  .pagehead.light .crumb{color:var(--paper-soft)}
  .pagehead.light .crumb a,.pagehead.light :is(h1,.h1) .ja,.pagehead.light .seal{color:var(--barn)}
  .pagehead.light :is(h1,.h1) .en{color:var(--paper-ink)}
  .pagehead.light .lead{color:var(--paper-soft)}
  .page-coffee .coffee{padding-top:clamp(40px,6vw,80px)}
  .page-day .noon{background:linear-gradient(var(--bean) 0, #4a3a34 60px, #b9a58e 150px, #e4ddd0 210px, var(--noon) 260px)}
  .page-day .noon,.page-about .room,.page-access .visit{padding-top:clamp(50px,7vw,90px)}
  .page-menu .menu{padding-top:clamp(40px,6vw,70px); background:linear-gradient(var(--room) 0, #2a221b 60px, var(--paper) 240px)}
  .page-shop .take{padding-top:10px}
  .page-reserve .reserve{padding-top:clamp(40px,6vw,70px); background:linear-gradient(#e4dccb 0, #3a2e24 110px, var(--room) 230px)}
  .page-about .past{background:var(--paper)}

  .nextpage{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; padding:clamp(46px,7vw,80px) 16px;
            background:#0f121a; color:#f1e6d1; text-decoration:none; border-top:1px solid rgba(227,179,92,.2)}
  .nextpage .k{font-family:var(--story); font-size:13px; letter-spacing:.3em; color:var(--dark-soft)}
  .nextpage .n{font-family:var(--story); font-size:clamp(22px,3vw,30px); letter-spacing:.2em}
  .nextpage .ar{font-family:var(--fell); font-size:28px; color:var(--gold); transition:transform .4s}
  .nextpage:hover .ar,.nextpage:focus-visible .ar{transform:translateX(8px)}

  /* トップ：なかみの一覧 */
  .doors{background:linear-gradient(var(--night), #17131a); color:var(--dark-ink); padding:clamp(70px,10vw,130px) 0}
  .doors .in{width:min(100% - 32px,1160px); margin:0 auto}
  .doors h2,.news h2,.about-sample h2{display:flex; align-items:center; gap:14px; font-weight:400; font-family:var(--story); font-size:16px; letter-spacing:.4em; color:var(--gold)}
  .doors ul{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,26px); margin-top:40px}
  .doors li:nth-child(4n+2){margin-top:34px}
  .doors li:nth-child(4n+3){margin-top:12px}
  .doors li:nth-child(4n){margin-top:46px}
  .doors a{display:grid; gap:12px; height:100%; padding:24px 20px 22px; text-decoration:none; border:1px solid rgba(227,179,92,.22);
           background:rgba(255,255,255,.015); transition:border-color .3s, background .3s, transform .4s}
  .doors a:hover,.doors a:focus-visible{border-color:var(--gold); background:rgba(227,179,92,.06); transform:translateY(-3px)}
  .doors .tm{font-family:var(--fell); font-size:15px; color:var(--dark-soft); letter-spacing:.08em}
  .doors b{font-family:var(--story); font-weight:500; font-size:20px; letter-spacing:.14em; color:#f3e9d6}
  .doors p{font-size:14px; line-height:1.85; color:var(--dark-soft)}
  .doors .new{display:inline-block; margin-left:8px; font-size:11px; letter-spacing:.1em; color:#e48a74; border:1px solid currentColor; padding:1px 6px; vertical-align:3px}
  @media (max-width:900px){ .doors ul{grid-template-columns:repeat(2,minmax(0,1fr))} .doors li:nth-child(n){margin-top:0} .doors li:nth-child(even){margin-top:24px} }

  .news{background:#17131a; color:var(--dark-ink); padding:0 0 clamp(70px,9vw,110px)}
  .news .in{width:min(100% - 32px,900px); margin:0 auto}
  .news ul{margin-top:26px; border-top:1px solid rgba(236,226,208,.14)}
  .news li{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:6px 20px; padding:16px 0; border-bottom:1px solid rgba(236,226,208,.14)}
  .news time{font-family:var(--fell); color:var(--gold-dim); font-variant-numeric:lining-nums}
  .news .note{margin-top:14px; font-family:var(--story); font-size:12.5px; color:var(--dark-soft)}
  @media (max-width:520px){ .news li{grid-template-columns:1fr} }

  .about-sample{background:var(--paper); color:var(--paper-ink); padding:clamp(60px,8vw,100px) 0}
  .about-sample .in{width:min(100% - 32px,900px); margin:0 auto}
  .about-sample h2{color:var(--barn)}
  .about-sample .box{margin-top:24px; background:#f6f1e6; padding:clamp(22px,4vw,40px); position:relative}
  .about-sample .box::before{content:""; position:absolute; inset:8px; border:1px solid rgba(41,36,29,.16); pointer-events:none}
  .about-sample p{max-width:40em}
  .about-sample ul{margin-top:16px; display:grid; gap:8px}
  .about-sample li{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:4px 16px; font-size:15px}
  .about-sample li b{font-family:var(--story); font-weight:500; color:var(--barn)}
  @media (max-width:520px){ .about-sample li{grid-template-columns:1fr} }

  /* 自前の大見出しを持つページは、パンくずだけの細い帯にする */
  .pagehead.slim{padding-bottom:0}
  .pagehead.slim :is(h1,.h1),.pagehead.slim .lead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .page-shop .take,.page-reserve .reserve,.page-menu .menu,.page-coffee .coffee,.page-about .room,.page-access .visit{padding-top:clamp(36px,5vw,64px)}
  @media (max-width:820px){ .sample{top:calc(70px + env(safe-area-inset-top, 0px)); bottom:auto; right:0; left:auto; padding:5px 10px; font-size:11px; letter-spacing:.12em; border-radius:3px 0 0 3px} }

  /* ---------- Instagram の印 ---------- */
  .ig{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; vertical-align:middle}
  .ig .igi{flex:none; width:38px; height:38px; padding:7px; border-radius:50%; border:1px solid rgba(227,179,92,.6); color:var(--gold);
           fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
           transition:transform .5s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s, box-shadow .4s}
  .ig span{border-bottom:1px solid rgba(227,179,92,.45); transition:border-color .3s, color .3s}
  .ig:hover .igi,.ig:focus-visible .igi{transform:rotate(-12deg) scale(1.12); background:var(--gold); color:#1a160f; box-shadow:0 0 0 6px rgba(227,179,92,.14)}
  .ig:hover span,.ig:focus-visible span{color:var(--gold); border-color:var(--gold)}
  .ig.solo .igi{width:34px; height:34px; padding:6px}
  .monthcal .ig .igi,.about-sample .ig .igi{color:var(--barn); border-color:rgba(166,58,43,.55)}
  .monthcal .ig:hover .igi{background:var(--barn); color:#f6ead2; box-shadow:0 0 0 6px rgba(166,58,43,.14)}
  .monthcal .ig span{border-color:rgba(166,58,43,.45)}
  .monthcal .ig:hover span{color:var(--barn); border-color:var(--barn)}

  /* ---------- 今月の営業日 ---------- */
  .monthcal{position:relative; margin-top:clamp(50px,7vw,80px); background:#f3ecdc; color:var(--paper-ink); padding:clamp(24px,4vw,44px) clamp(16px,4vw,44px) clamp(22px,3vw,34px);
            transform:rotate(-.5deg); box-shadow:0 40px 70px -45px #000}
  .monthcal::before{content:""; position:absolute; inset:9px; border:1px solid rgba(41,36,29,.18); pointer-events:none}
  .mc-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 30px}
  .mc-month{display:flex; align-items:baseline; gap:10px; margin:0; font-weight:400}
  .mc-month b{font-family:var(--fell); font-weight:400; font-size:clamp(54px,7vw,78px); line-height:.9}
  .mc-month span{font-family:var(--story); font-size:18px; letter-spacing:.3em}
  .mc-month i{font-family:var(--fell); font-style:normal; font-size:20px; color:var(--paper-soft); margin-left:6px}
  .mc-legend{display:grid; gap:4px; font-size:14px}
  .mc-legend li{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px}
  .mc-legend small{font-family:var(--story); font-size:12px; color:var(--paper-soft)}
  .mc-legend .k{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid currentColor; font-family:var(--story); font-size:11px; color:#2f5d8a}
  .mc-legend .k.sun{color:var(--barn)}
  .mc-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin-top:24px; border-top:1.5px solid rgba(41,36,29,.7); border-left:1.5px solid rgba(41,36,29,.7)}
  .mc-wd{padding:6px 0; text-align:center; font-family:var(--story); font-size:13px; border-right:1.5px solid rgba(41,36,29,.7); border-bottom:1.5px solid rgba(41,36,29,.7); background:#ece3cf}
  .mc-wd.sun,.mc-day.sun b{color:var(--barn)} .mc-wd.sat,.mc-day.sat b{color:#2f5d8a}
  .mc-day{position:relative; min-height:clamp(54px,8vw,84px); padding:6px 8px; border-right:1.5px solid rgba(41,36,29,.7); border-bottom:1.5px solid rgba(41,36,29,.7)}
  .mc-day b{display:block; font-family:var(--fell); font-weight:400; font-size:clamp(17px,2.2vw,24px); line-height:1.1; font-variant-numeric:lining-nums}
  .mc-day small{display:block; margin-top:2px; font-family:var(--story); font-size:clamp(10px,1.2vw,12px); color:var(--paper-soft); white-space:nowrap}
  .mc-day.off small{color:var(--barn)}
  .mc-day.out b{color:rgba(41,36,29,.28)}
  .mc-day.today b{display:inline-grid; place-items:center; width:1.75em; height:1.75em; margin:-.2em 0 0 -.25em; border:1.5px solid var(--paper-ink); border-radius:50%}
  .mc-day em{position:absolute; right:6px; bottom:4px; font-style:normal; font-family:var(--story); font-size:11px; color:var(--barn)}
  .mc-day .slash{position:absolute; inset:6% 6%; width:88%; height:88%; overflow:visible; pointer-events:none}
  .slash path,.mc-key path{fill:none; stroke:#c0392b; stroke-width:4.5; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:140; stroke-dashoffset:0}
  .monthcal.wait .slash path{stroke-dashoffset:140}
  .monthcal.draw .slash path{animation:slash .55s cubic-bezier(.5,0,.3,1) both}
  @keyframes slash{from{stroke-dashoffset:140} to{stroke-dashoffset:0}}
  .mc-note{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:18px; font-size:14px}
  .mc-key{width:32px; height:20px; flex:none}
  .mc-key path{stroke-width:3.5}
  .mc-prop{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; font-family:var(--story); font-size:12.5px; color:var(--paper-soft)}
  .mc-prop .prop{color:var(--barn)}
  @media (max-width:520px){ .mc-day{padding:4px 4px} .mc-day em{display:none} .monthcal{transform:none} }

  /* ---------- ストーリー ---------- */
  .stories{background:#17131a; color:var(--dark-ink); padding:clamp(40px,7vw,90px) 0 clamp(70px,9vw,110px)}
  .stories .in{width:min(100% - 32px,1000px); margin:0 auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(30px,7vw,100px); align-items:center}
  .phone{position:relative; width:min(270px,72vw); aspect-ratio:260 / 540; transform:rotate(-3deg); filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
  .st-body{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  .st-screen{position:absolute; left:calc(24 / 260 * 100%); top:calc(74 / 540 * 100%); width:calc(212 / 260 * 100%); height:calc(382 / 540 * 100%); overflow:hidden; background:#0b0d12}
  .st-frame{position:absolute; inset:0; background-size:cover; opacity:0; transition:opacity .7s ease; filter:sepia(.18) saturate(.92) contrast(1.03)}
  .st-frame.on{opacity:1; animation:kb 6s ease-out both}
  .st-frame.kb2.on{animation-name:kb2}
  .stories .paused .st-frame.on{animation-play-state:paused}
  @keyframes kb{from{transform:scale(1.14) translate(2%,1%)} to{transform:scale(1.02) translate(-1%,-1%)}}
  @keyframes kb2{from{transform:scale(1.02) translate(-2%,0)} to{transform:scale(1.15) translate(2%,-2%)}}
  .st-screen::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(0,0,0,.45),transparent 22%,transparent 70%,rgba(0,0,0,.55))}
  .st-top{position:absolute; z-index:2; left:8px; right:8px; top:8px}
  .st-bars{display:flex; gap:3px}
  .st-bars span{flex:1; height:2.5px; background:rgba(255,255,255,.35); border-radius:2px; overflow:hidden}
  .st-bars i{display:block; height:100%; background:#fff; transform-origin:0 50%; transform:scaleX(0)}
  .st-who{display:flex; align-items:center; gap:7px; margin-top:8px; font-size:11.5px; line-height:1; color:#fff}
  .st-who b{font-weight:600; letter-spacing:.02em; font-family:system-ui, -apple-system, sans-serif}
  .st-ago{opacity:.75; font-family:system-ui, -apple-system, sans-serif}
  .st-av{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#121620; box-shadow:0 0 0 1.5px #deb268}
  .st-av svg{width:16px; height:16px; fill:none; stroke:#deb268; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
  .st-cap{position:absolute; z-index:2; left:50%; bottom:13%; transform:translateX(-50%) rotate(-2deg); width:max-content; max-width:92%; padding:5px 12px 6px; background:#f6efe0; color:#2a2119;
          font-family:var(--story); font-size:13px; line-height:1.5; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,.35)}
  .st-prev,.st-next{position:absolute; z-index:3; top:16%; bottom:0; width:40%; background:none; border:0; cursor:pointer}
  .st-prev{left:0} .st-next{right:0; width:60%}
  .st-pause{position:absolute; z-index:4; right:8px; top:38px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,.35); cursor:pointer; display:grid; place-items:center}
  .st-pause span{width:9px; height:10px; border-left:3px solid #fff; border-right:3px solid #fff}
  .paused .st-pause span{width:0; height:0; border:0; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:2px}
  .st-text h2{display:flex; align-items:center; gap:14px; font-weight:400; font-family:var(--story); font-size:16px; letter-spacing:.4em; color:var(--gold)}
  .st-text .seal svg{stroke-width:2.2}
  .st-lead{margin-top:22px; font-size:clamp(18px,2.2vw,22px); line-height:1.9; color:#f1e6d1}
  .st-how{margin-top:14px; font-size:14.5px; color:var(--dark-soft)}
  .st-prop{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:20px 0 22px; font-family:var(--story); font-size:12.5px; color:var(--dark-soft)}
  .st-prop .prop{color:#e48a74}
  @media (max-width:760px){ .stories .in{grid-template-columns:1fr; justify-items:center} .st-text{justify-self:stretch} .phone{transform:rotate(-2deg)} }
  /* 押せることが伝わるよう、数秒おきにシャッターを切るように小さく揺れて、輪が広がる */
  .ig .igi{animation:igNudge 4.8s ease-in-out infinite}
  .ig:nth-of-type(2n) .igi{animation-delay:-2.1s}
  @keyframes igNudge{
    0%,76%,100%{transform:none; box-shadow:0 0 0 0 rgba(227,179,92,0)}
    80%{transform:rotate(-14deg) scale(1.12); box-shadow:0 0 0 0 rgba(227,179,92,.55)}
    85%{transform:rotate(10deg) scale(1.08)}
    90%{transform:rotate(-5deg) scale(1.04); box-shadow:0 0 0 9px rgba(227,179,92,0)}
    95%{transform:none}
  }
  .monthcal .ig .igi{animation-name:igNudgeRed}
  @keyframes igNudgeRed{
    0%,76%,100%{transform:none; box-shadow:0 0 0 0 rgba(166,58,43,0)}
    80%{transform:rotate(-14deg) scale(1.12); box-shadow:0 0 0 0 rgba(166,58,43,.5)}
    85%{transform:rotate(10deg) scale(1.08)}
    90%{transform:rotate(-5deg) scale(1.04); box-shadow:0 0 0 9px rgba(166,58,43,0)}
    95%{transform:none}
  }
  .ig:hover .igi,.ig:focus-visible .igi{animation:none}
  .ig{cursor:pointer}

  [hidden]{display:none !important}

  /* ---------- 目次（1140px 以下で上のメニューの代わりに出す） ---------- */
  .menu-btn{display:none; align-items:center; gap:8px; height:44px; padding:0 14px 0 8px; margin-left:8px; background:transparent; cursor:pointer;
            border:1px solid rgba(227,179,92,.45); border-radius:99px; color:var(--dark-ink); font-family:var(--story); font-size:13px; letter-spacing:.2em}
  .menu-btn:hover,.menu-btn:focus-visible{border-color:var(--gold); color:var(--gold)}
  .mb-dial{position:relative; width:26px; height:26px; border-radius:50%; border:1.5px solid currentColor}
  .mb-dial::before,.mb-dial i{content:""; position:absolute; left:50%; bottom:50%; width:2px; margin-left:-1px; background:currentColor; border-radius:2px; transform-origin:50% 100%}
  .mb-dial::before{height:7px; transform:rotate(-60deg)}
  .mb-dial i{height:10px; transition:transform .6s cubic-bezier(.4,1.6,.5,1)}
  .menu-btn:hover .mb-dial i,.menu-btn[aria-expanded="true"] .mb-dial i{transform:rotate(360deg)}
  @media (max-width:1140px){ .menu-btn{display:inline-flex} .state{margin-left:auto} }
  @media (max-width:420px){ .menu-btn .mb-t{display:none} .menu-btn{padding:0 9px} .top{gap:10px} }

  .toc{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
       background:rgba(10,12,18,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .35s ease; overflow-y:auto}
  .toc.on{opacity:1}
  html.toc-open{overflow:hidden}
  .toc-in{position:relative; width:min(100%,520px); padding:28px 0 20px}
  .toc-in::before{content:""; position:absolute; left:50%; top:50%; width:min(150vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
       background:repeating-conic-gradient(rgba(227,179,92,.22) 0 .5deg, transparent .5deg 6deg); -webkit-mask:radial-gradient(closest-side, transparent 93%, #000 94%); mask:radial-gradient(closest-side, transparent 93%, #000 94%); opacity:.7}
  .toc-h{position:relative; font-family:var(--fell); font-size:24px; color:#f1e6d1; display:flex; align-items:baseline; gap:14px}
  .toc-h span{font-family:var(--story); font-size:13px; letter-spacing:.5em; color:var(--gold)}
  .toc ol{position:relative; margin-top:18px; border-top:1px solid rgba(227,179,92,.25)}
  .toc li{border-bottom:1px solid rgba(227,179,92,.25); transform:translateY(8px); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; transition-delay:calc(var(--k) * 40ms)}
  .toc.on li{transform:none; opacity:1}
  .toc li:nth-child(even) a{padding-left:clamp(10px,4vw,26px)}
  .toc ol a{display:grid; grid-template-columns:2.2em auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:56px; padding:6px 4px; text-decoration:none; color:#efe4d0}
  .toc ol a i{font-style:normal; font-family:var(--fell); color:var(--gold-dim); font-size:17px}
  .toc ol a b{font-family:var(--story); font-weight:500; font-size:19px; letter-spacing:.14em}
  .toc ol a small{font-family:var(--fell); font-style:italic; font-size:14px; color:var(--dark-soft)}
  .toc ol a:hover b,.toc ol a:focus-visible b{color:var(--gold)}
  .toc a[aria-current="page"] b{color:var(--gold)}
  .toc a[aria-current="page"] i::after{content:"●"; font-size:8px; margin-left:4px; vertical-align:3px; color:var(--gold)}
  .toc-foot{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:22px}
  .toc-foot>a:not(.ig){display:inline-grid; place-items:center; min-height:44px; padding:0 18px; border:1px solid var(--gold-dim); text-decoration:none; color:#f1e6d1; font-family:var(--story); letter-spacing:.12em}
  .toc-foot>a:first-child{background:var(--gold); color:#1a160f; border-color:var(--gold)}
  .toc-close{position:absolute; right:-4px; top:16px; width:48px; height:48px; border:1px solid rgba(227,179,92,.45); border-radius:50%; background:transparent; cursor:pointer}
  .toc-close span,.toc-close span::after{position:absolute; left:50%; top:50%; width:20px; height:1.5px; margin:-.75px 0 0 -10px; background:#f1e6d1; transform:rotate(45deg); content:""}
  .toc-close span::after{left:0; margin:0; transform:rotate(90deg)}
  .toc-close:hover{border-color:var(--gold)}

  /* ---------- トップの一行帯：いま・場所・予約 ---------- */
  .hero{height:clamp(520px,80vh,820px)}
  .nowband{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto; background:#0e1118; border-top:1px solid rgba(227,179,92,.3); border-bottom:1px solid rgba(227,179,92,.3)}
  .nowband a{display:flex; align-items:center; gap:14px; min-height:68px; padding:12px clamp(16px,3vw,32px); text-decoration:none; color:#efe4d0; transition:background .3s}
  .nowband a+a{border-left:1px solid rgba(227,179,92,.2)}
  .nowband a:hover,.nowband a:focus-visible{background:rgba(227,179,92,.07)}
  .nb-k{flex:none; font-family:var(--story); font-size:12px; letter-spacing:.3em; color:var(--gold); border:1px solid rgba(227,179,92,.5); padding:3px 6px 3px 9px; border-radius:2px}
  .nb-v{font-family:var(--story); font-size:15px; line-height:1.5}
  .nb-v b{font-weight:500; color:var(--gold)}
  .nb-v small{display:block; font-size:12.5px; color:var(--dark-soft)}
  .nb-open .nb-v::before{content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#7fbf7a; box-shadow:0 0 0 4px rgba(127,191,122,.18); vertical-align:1px}
  .nb-open.closed .nb-v::before{background:#a99c88; box-shadow:none}
  .nowband .nb-rsv{background:var(--gold); color:#1a160f; gap:12px; padding-inline:clamp(20px,3vw,40px)}
  .nowband .nb-rsv:hover,.nowband .nb-rsv:focus-visible{background:#f0c878}
  .nb-rsv .nb-v{font-size:16px; letter-spacing:.18em}
  .nb-ar{font-family:var(--fell); font-size:22px; transition:transform .3s}
  .nb-rsv:hover .nb-ar{transform:translateX(5px)}
  @media (max-width:760px){ .nowband{grid-template-columns:1fr} .nowband a+a{border-left:0; border-top:1px solid rgba(227,179,92,.2)} .nowband .nb-rsv{justify-content:center} }

  /* ---------- 押しやすさ・読みやすさ ---------- */
  .navb{width:44px; height:44px}
  .spot{width:44px; height:44px; margin:-22px 0 0 -22px; background:radial-gradient(circle, rgba(255,233,180,.95) 0 4px, rgba(255,214,140,.35) 5px 10px, transparent 11px)}
  .spot::after{inset:7px}
  .spot[aria-pressed="true"]{background:radial-gradient(circle, #fff3d6 0 5px, rgba(227,179,92,.7) 6px 11px, transparent 12px)}
  .st-pause{width:38px; height:38px; top:32px; right:4px}
  .basket .ways label{min-height:44px; padding:4px 0}
  .basket .ways input{width:20px; height:20px}
  .vbtn{min-height:44px; padding:6px 16px}
  footer .in a{display:inline-flex; align-items:center; min-height:44px}
  .dates .opt small{font-size:11.5px}
  .mc-legend small,.st-prop,.mc-prop{font-size:13px}
  .st-who{font-size:12.5px}
  .ticket .ft{font-size:12px}
  .facts dd small.tbc{display:block; margin-top:2px; font-family:var(--story); font-size:12.5px; color:var(--dark-soft)}
  .map .park text{font-family:var(--mincho)}
  .ig{min-height:44px}
  .pagehead .crumb a{display:inline-flex; align-items:center; min-height:44px; margin-block:-12px}
  .top .wm{display:inline-flex; align-items:center; min-height:44px}
  .sample{min-height:36px; display:inline-flex; align-items:center}
  .toc-foot>a{white-space:nowrap; flex:none}

  /* ---------- ご提案の資料（共通） ---------- */
  .pagehead.doc{padding-bottom:clamp(40px,6vw,70px); background:radial-gradient(70% 120% at 80% 0%, #1d2232, var(--phbg) 70%)}
  .pagehead.doc :is(h1,.h1) .en{font-size:clamp(34px,5vw,58px)}
  .doc-sw{margin-top:18px}
  .doc-sw a{display:inline-flex; align-items:center; min-height:44px; font-family:var(--story); color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(227,179,92,.5)}
  .toc-docs{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-top:16px; font-family:var(--story); font-size:13px; color:var(--dark-soft)}
  .toc-docs a{display:inline-flex; align-items:center; min-height:40px; color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(227,179,92,.4)}
  .docs-links{display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:18px}
  .docs-links a{display:inline-flex; align-items:center; min-height:44px; font-family:var(--story); color:var(--barn); text-decoration:none; border-bottom:1px solid rgba(166,58,43,.45)}

  /* ---------- 調査・分析レポート：古い調査報告書の紙 ---------- */
  .rp{background:linear-gradient(var(--phbg,#121620) 0, #2a221b 140px, #d9d1bf 420px, #d9d1bf); padding:clamp(20px,4vw,40px) 0 clamp(70px,9vw,110px); color:var(--paper-ink)}
  .rp-in{width:min(100% - 32px,980px); margin:0 auto; display:grid; gap:clamp(22px,3vw,34px)}
  .rp-verdict{position:relative; background:#f5efe2; padding:clamp(28px,5vw,56px) clamp(22px,5vw,60px); box-shadow:0 40px 70px -45px #000}
  .rp-verdict::before,.rp-ch::before{content:""; position:absolute; inset:9px; border:1px solid rgba(41,36,29,.18); pointer-events:none}
  .rp-k{display:inline-block; font-family:var(--story); font-size:13px; letter-spacing:.5em; color:#f6ead2; background:var(--barn); padding:5px 12px 5px 16px; transform:rotate(-2deg)}
  .rp-v{margin-top:18px; font-family:var(--story); font-size:clamp(20px,2.7vw,30px); line-height:1.75; text-wrap:balance}
  .rp-v em{font-style:normal; color:var(--barn); border-bottom:2px solid rgba(166,58,43,.35)}
  .rp-note{margin-top:18px; font-size:13.5px; color:var(--paper-soft); max-width:44em}
  .rp-stats{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
  .rp-stats li{position:relative; display:grid; gap:2px; justify-items:center; text-align:center; padding:20px 8px 16px; background:#efe7d6; border:1px solid rgba(41,36,29,.18)}
  .rp-stats li:nth-child(even){transform:translateY(10px)}
  .rp-stats b{font-family:var(--fell); font-weight:400; font-size:clamp(30px,4vw,44px); line-height:1; color:var(--paper-ink); font-variant-numeric:lining-nums}
  .rp-stats span{font-family:var(--story); font-size:13px; letter-spacing:.06em}
  .rp-stats small{font-family:var(--story); font-size:12px; color:var(--paper-soft)}
  @media (max-width:760px){ .rp-stats{grid-template-columns:repeat(2,minmax(0,1fr))} .rp-stats li:nth-child(n){transform:none} .rp-stats li:last-child{grid-column:1 / -1} }
  .rp-ch{position:relative; background:#f5efe2; padding:clamp(28px,5vw,52px) clamp(20px,5vw,56px) clamp(26px,4vw,44px); box-shadow:0 30px 60px -45px #000}
  .rp-ch:nth-of-type(odd){transform:rotate(-.25deg)} .rp-ch:nth-of-type(even){transform:rotate(.2deg)}
  .rp-ch h2{display:flex; align-items:baseline; gap:16px; font-weight:400; border-bottom:1.5px solid rgba(41,36,29,.6); padding-bottom:10px}
  .rp-ch h2 i{font-style:normal; font-family:var(--fell); font-size:clamp(34px,4.5vw,50px); line-height:1; color:var(--barn)}
  .rp-ch h2 span{font-family:var(--story); font-weight:500; font-size:clamp(20px,2.4vw,26px); letter-spacing:.14em}
  .rp-lead{margin-top:16px; font-size:16.5px; line-height:1.95; max-width:42em}
  .rp-ledger{width:100%; margin-top:20px; border-collapse:collapse; font-size:15px}
  .rp-ledger th,.rp-ledger td{padding:10px 8px; border-bottom:1px dotted rgba(41,36,29,.4); text-align:left; vertical-align:top}
  .rp-ledger th{width:7em; font-family:var(--story); font-weight:500; color:var(--barn); white-space:nowrap}
  .rp-good{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px}
  .rp-good li{position:relative; padding:18px 16px 14px; border:1px solid rgba(41,36,29,.2); background:#fbf7ee}
  .rp-good li:nth-child(3n+2){margin-top:14px}
  .rp-good li::after{content:"支持"; position:absolute; right:10px; top:-10px; font-family:var(--story); font-size:11px; letter-spacing:.2em; color:#2f6b45; border:1px solid currentColor; padding:2px 6px 1px 8px; background:#fbf7ee; transform:rotate(4deg)}
  .rp-good b{font-family:var(--story); font-weight:500; font-size:16.5px}
  .rp-good p{margin-top:6px; font-size:14px; line-height:1.8; color:#4a4136}
  @media (max-width:820px){ .rp-good{grid-template-columns:1fr} .rp-good li:nth-child(n){margin-top:0} }
  .rp-issues{margin-top:20px; display:grid; gap:0; border-top:1px solid rgba(41,36,29,.25)}
  .rp-issues li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; align-items:start; padding:14px 0; border-bottom:1px solid rgba(41,36,29,.25)}
  .rp-issues .lv{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1.5px solid #9a7a3a; color:#7a5c22; font-family:var(--story); font-size:15px}
  .rp-issues .hi .lv{border-color:var(--barn); color:#f6ead2; background:var(--barn)}
  .rp-issues b{font-family:var(--story); font-weight:500; font-size:16.5px}
  .rp-issues p{margin-top:2px; font-size:14.5px; color:#4a4136}
  .rp-scroll{overflow-x:auto; margin-top:20px}
  .rp-solve{width:100%; min-width:720px; border-collapse:collapse; font-size:14px; line-height:1.7}
  .rp-solve th{font-family:var(--story); font-weight:500; text-align:left; padding:8px; background:#ece3cf; border-bottom:1.5px solid rgba(41,36,29,.6)}
  .rp-solve td{padding:12px 8px; border-bottom:1px dotted rgba(41,36,29,.4); vertical-align:top}
  .rp-solve td:first-child{font-family:var(--story); font-weight:500; width:9em}
  .rp-solve td:last-child{width:15em; color:#4a4136}
  .stamp{display:inline-block; margin:0 6px 4px 0; padding:1px 8px 0; font-family:var(--story); font-size:12px; letter-spacing:.15em; border:1.5px solid currentColor; border-radius:3px; transform:rotate(-4deg)}
  .stamp.done{color:#2f6b45} .stamp.part{color:#9a6a1a} .stamp.none{color:var(--barn)}
  .rp-foot{margin-top:16px; font-size:14px; color:var(--paper-soft)}
  .rp-list{margin-top:18px; display:grid; gap:12px}
  .rp-list li{position:relative; padding-left:22px; font-size:15px; line-height:1.9}
  .rp-list li::before{content:""; position:absolute; left:2px; top:.8em; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--barn)}
  .rp-list b{font-family:var(--story); font-weight:500}
  .rp-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,44px); margin-top:22px}
  .rp-two h3{font-family:var(--story); font-weight:500; font-size:16px; letter-spacing:.14em; color:var(--barn)}
  .rp-pages,.rp-fixed{margin-top:10px; display:grid; gap:8px; font-size:14px; line-height:1.75}
  .rp-pages li{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:10px}
  .rp-pages a{font-family:var(--story); color:var(--paper-ink); text-decoration:none; border-bottom:1px solid rgba(41,36,29,.35); align-self:start; justify-self:start}
  .rp-fixed li{padding-left:18px; position:relative} .rp-fixed li::before{content:"✓"; position:absolute; left:0; color:#2f6b45}
  .rp-small{margin-top:14px; font-size:13px; color:var(--paper-soft)}
  @media (max-width:820px){ .rp-two{grid-template-columns:1fr} }
  .rp-steps{position:relative; margin-top:24px; display:grid; gap:0; counter-reset:st}
  .rp-steps::before{content:""; position:absolute; left:21px; top:12px; bottom:12px; width:2px; background:repeating-linear-gradient(var(--barn) 0 6px, transparent 6px 10px)}
  .rp-steps li{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:10px 0; counter-increment:st}
  .rp-steps li::before{content:counter(st); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#f5efe2; border:1.5px solid var(--barn); color:var(--barn); font-family:var(--fell); font-size:20px; z-index:1}
  .rp-steps b{font-family:var(--story); font-weight:500; font-size:16.5px; display:block; padding-top:8px}
  .rp-steps span{font-size:14px; color:#4a4136}
  .rp-cta{display:flex; align-items:center; gap:16px; margin-top:28px; padding:18px 22px; background:var(--paper-ink); color:#f1e6d1; text-decoration:none}
  .rp-cta .seal{color:var(--gold)}
  .rp-cta b{display:block; font-family:var(--story); font-weight:500; font-size:18px; letter-spacing:.14em}
  .rp-cta small{font-family:var(--story); font-size:13px; color:var(--dark-soft)}
  .rp-cta .ar{margin-left:auto; font-family:var(--fell); font-size:26px; color:var(--gold); transition:transform .3s}
  .rp-cta:hover .ar{transform:translateX(6px)}
  @media (max-width:520px){ .rp-ch:nth-of-type(n){transform:none} .rp-pages li{grid-template-columns:1fr; gap:0} }

  /* ---------- ヒアリングシート：予約帳と同じ紙に書きこむ ---------- */
  .hs{background:linear-gradient(#121620 0, #2a221b 140px, #d9d1bf 420px, #d9d1bf); padding:clamp(20px,4vw,40px) 0 0; color:var(--paper-ink)}
  .hs-in{width:min(100% - 32px,900px); margin:0 auto; display:grid; gap:clamp(20px,3vw,30px); padding-bottom:clamp(40px,6vw,70px)}
  .hs-intro{position:relative; background:#f5efe2; padding:clamp(22px,4vw,40px); box-shadow:0 30px 60px -45px #000}
  .hs-intro ul{margin-top:12px; display:grid; gap:6px; font-size:14.5px}
  .hs-intro li{padding-left:18px; position:relative} .hs-intro li::before{content:"・"; position:absolute; left:0}
  .hs-ref{margin-top:12px; font-size:14px} .hs-ref a{color:var(--barn)}
  .hs-req{display:inline-block; padding:1px 7px 0; font-family:var(--story); font-size:11.5px; letter-spacing:.12em; color:#f6ead2; background:var(--barn); border-radius:2px; vertical-align:2px}
  .hs-form{display:grid; gap:clamp(20px,3vw,30px)}
  .hs-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:18px 20px; border:0; background:#f5efe2}
  .hs-meta legend{float:left; width:100%; margin-bottom:6px; font-family:var(--story); font-size:14px; letter-spacing:.2em; color:var(--barn)}
  .hs-meta label{display:grid; gap:4px; font-family:var(--story); font-size:12.5px; color:var(--paper-soft)}
  .hs-meta input,.hq textarea{font:inherit; font-family:var(--mincho); font-size:15.5px; color:var(--paper-ink); background:#fffdf7; border:0; border-bottom:1.5px solid rgba(41,36,29,.4); padding:9px 10px; border-radius:0; min-width:0; width:100%}
  .hs-meta input:focus,.hq textarea:focus{outline:none; border-bottom-color:var(--barn); background:#fff}
  @media (max-width:620px){ .hs-meta{grid-template-columns:1fr} }
  .hs-sec{position:relative; background:#f5efe2; padding:clamp(24px,4vw,44px) clamp(16px,4vw,44px); box-shadow:0 30px 60px -45px #000;
          background-image:linear-gradient(90deg, transparent 0 30px, rgba(166,58,43,.22) 30px 31px, transparent 31px)}
  .hs-sec h2{display:flex; align-items:center; gap:14px; font-weight:400}
  .hs-sec h2 .seal{color:var(--barn); --s:48px}
  .hs-sec h2 span:last-child{font-family:var(--story); font-weight:500; font-size:clamp(19px,2.3vw,24px); letter-spacing:.12em}
  .hs-sec h2 i{font-style:normal; font-family:var(--fell); color:var(--barn); margin-right:10px}
  .hs-lead{margin-top:10px; font-size:14.5px; color:#4a4136; max-width:42em}
  .hq{margin-top:18px; padding:14px 0 6px; border-top:1px dashed rgba(41,36,29,.28)}
  .hq-q{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; font-size:16px; line-height:1.7}
  .hq-q label{flex:1 1 20em; font-weight:600}
  .hq-no{font-family:var(--fell); font-size:15px; color:var(--barn); min-width:2.4em}
  .hq.done .hq-no::after{content:" ✓"; color:#2f6b45}
  .hq-meta{display:grid; gap:2px; margin:6px 0 10px; font-size:13px; color:var(--paper-soft)}
  .hq-meta div{display:flex; flex-wrap:wrap; gap:0 10px}
  .hq-meta dt{font-family:var(--story); color:#8a6a3a; white-space:nowrap}
  .hq textarea{resize:vertical; min-height:64px; line-height:1.8; background-image:repeating-linear-gradient(transparent 0 27px, rgba(41,36,29,.1) 27px 28px); background-attachment:local}
  .hq-choice{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px}
  .hq-choice label{position:relative; cursor:pointer}
  .hq-choice input{position:absolute; opacity:0; inset:0}
  .hq-choice span{display:inline-grid; place-items:center; min-height:44px; padding:0 18px; border:1px solid rgba(41,36,29,.35); background:#fbf7ee; font-family:var(--story); font-size:14px; letter-spacing:.1em}
  .hq-choice input:checked+span{background:var(--paper-ink); color:#f6f1e6; border-color:var(--paper-ink)}
  .hq-choice input:focus-visible+span{outline:2px solid var(--barn); outline-offset:2px}
  .hs-note{margin-top:16px; font-family:var(--story); font-size:13px; color:var(--paper-soft)}
  .hs-checks{margin:22px 0 0; padding:16px 18px; border:1px solid rgba(41,36,29,.25)}
  .hs-checks legend{padding:0 8px; font-family:var(--story); font-size:14px; letter-spacing:.2em; color:var(--barn)}
  .hs-checks label{display:flex; align-items:center; gap:10px; min-height:44px; font-size:15px; cursor:pointer}
  .hs-checks input{width:20px; height:20px; accent-color:var(--barn)}
  .only-req .hq:not(.req),.only-req .hs-checks{display:none}
  .hs-bar{position:sticky; bottom:0; z-index:15; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:12px max(16px,calc((100% - 900px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
          background:rgba(18,22,32,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#efe4d0; border-top:1px solid rgba(227,179,92,.3)}
  .hs-prog{display:flex; align-items:center; gap:10px}
  .hs-prog svg{width:44px; height:44px; fill:none; stroke-linecap:round}
  .hs-prog .tr{stroke:rgba(227,179,92,.25); stroke-width:3}
  .hs-prog .fg{stroke:var(--gold); stroke-width:3; transform:rotate(-90deg); transform-origin:22px 22px; transition:stroke-dashoffset .5s}
  .hs-prog line{stroke:#f1e6d1; stroke-width:2; transition:transform .6s cubic-bezier(.4,1.6,.5,1)}
  .hs-prog svg>circle:last-child{fill:var(--gold)}
  .hs-prog p{display:grid; line-height:1.3}
  .hs-prog b{font-family:var(--fell); font-weight:400; font-size:19px}
  .hs-prog small{font-family:var(--story); font-size:12px; color:var(--dark-soft)}
  .hs-saved{flex:1 1 12em; font-family:var(--story); font-size:12.5px; color:var(--dark-soft); min-height:1.4em}
  .hs-acts{display:flex; flex-wrap:wrap; gap:8px}
  .hs-acts button,.hs-confirm button{min-height:44px; padding:0 14px; background:transparent; border:1px solid rgba(227,179,92,.5); color:#f1e6d1; font-family:var(--story); font-size:13.5px; letter-spacing:.06em; cursor:pointer}
  .hs-acts button:hover,.hs-acts button:focus-visible{border-color:var(--gold); color:var(--gold)}
  #hs-copy{background:var(--gold); color:#1a160f; border-color:var(--gold)}
  .hs-acts button[aria-pressed="true"]{background:rgba(227,179,92,.18); border-color:var(--gold)}
  .hs-acts .danger,.hs-confirm .danger{border-color:rgba(201,86,74,.6); color:#e9a297}
  .hs-confirm{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-family:var(--story); font-size:13.5px}
  .page-hearing .dock{display:none}
  @media (max-width:620px){ .hs-acts button{flex:1 1 auto; padding:0 10px} .hs-saved{flex-basis:100%; order:3} }

  @media print{
    .top,.toc,.sample,.dock,.hs-bar,footer,.pagehead .doc-sw,.nextpage{display:none !important}
    body{background:#fff !important}
    .rp,.hs,.pagehead{background:#fff !important; color:#000 !important; padding-top:0 !important}
    .pagehead *{color:#000 !important}
    .rp-ch,.rp-verdict,.hs-sec,.hs-intro,.hs-meta{box-shadow:none !important; transform:none !important; break-inside:avoid-page; background:#fff !important}
    .hq{break-inside:avoid}
    .hq textarea{border:1px solid #999; background:#fff; min-height:3.2em}
  }
  .rp-in>*,.hs-in>*{min-width:0}
  .rp-steps li{grid-template-rows:auto auto; row-gap:0}
  .rp-steps li::before{grid-row:1 / span 2}
  .rp-steps b,.rp-steps span{grid-column:2}
  #hs-copy{background:transparent; color:#f1e6d1; border-color:rgba(227,179,92,.5)}
  .hs-acts .primary,.hs-confirm .primary{background:var(--gold); color:#1a160f; border-color:var(--gold); font-weight:500; letter-spacing:.2em; padding:0 20px}
  .hs-acts .primary:hover,.hs-confirm .primary:hover{background:#f0c878; color:#1a160f}
  .hs-confirm .primary:disabled{opacity:.5}
  .hs-acts .more{display:none}
  @media (max-width:620px){
    .hs-bar{gap:8px 12px; padding-top:10px}
    .hs-acts{flex:1 1 100%}
    .hs-acts .more{display:inline-block; flex:0 0 auto}
    .hs-acts #hs-send{flex:1 1 auto}
    .hs-bar:not(.more) .hs-acts button:not(#hs-send):not(.more){display:none}
    .hs-saved{font-size:12px}
  }
  /* 押した手ごたえと、送信の結果を目立たせる */
  .hs-acts button:active,.hs-confirm button:active{transform:translateY(1px) scale(.97)}
  .hs-acts button,.hs-confirm button{transition:transform .08s, background-color .2s, border-color .2s}
  .hs-confirm{padding:12px 14px; border:1px solid var(--gold); background:rgba(227,179,92,.1); color:#f6ecd8; font-size:14px}
  .hs-saved.busy{color:#f1e6d1}
  .hs-saved.ok{color:#9fd8a8; font-size:14px; font-weight:500}
  .hs-saved.err{color:#f0a89c; font-size:14px; font-weight:500}
  .hs-saved.flash{animation:hsFlash .9s ease-out}
  @keyframes hsFlash{0%{transform:translateX(0)}15%{transform:translateX(-4px)}30%{transform:translateX(4px)}45%{transform:translateX(-2px)}60%{transform:translateX(0)}}
  @media (prefers-reduced-motion:reduce){ .hs-saved.flash{animation:none} }

  /* 一枚で見る版 */
  .page-all .pagehead h2.h1{margin-bottom:0}
  .page-all .pagehead{scroll-margin-top:0; padding:clamp(70px,9vw,110px) 0 clamp(26px,4vw,40px); border-top:1px solid rgba(227,179,92,.35)}
  .page-all .pagehead .crumb{font-family:var(--fell); letter-spacing:.2em}
  .allnote{margin:0; padding:28px 16px; text-align:center; font-family:var(--story); font-size:14px; background:#121620; color:#efe4d0}
  .allnote a{color:var(--gold)}

  /* ポートフォリオへの相談ボタン */
  .kuni-cta{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; white-space:nowrap; text-decoration:none; font-family:var(--story); font-size:13px; letter-spacing:.08em;
            color:#1a160f; background:var(--gold); border:1px solid var(--gold); border-radius:99px; padding:7px 16px; min-height:40px; transition:background .2s, transform .15s}
  .kuni-cta:hover,.kuni-cta:focus-visible{background:#f0c878}
  .kuni-cta:active{transform:translateY(1px)}
  .kuni-cta span{transition:transform .2s} .kuni-cta:hover span{transform:translateX(3px)}
  .top .kuni-cta{margin-left:12px}
  .kuni-foot{grid-column:1/-1; width:100%; margin-top:28px; padding-top:24px; border-top:1px solid rgba(227,179,92,.3); display:grid; justify-items:center; gap:12px; text-align:center}
  .kuni-foot p{margin:0; font-family:var(--story); font-size:13px; color:var(--dark-soft)}
  .kuni-foot b{color:#f1e6d1; font-weight:500}
  .kuni-cta.lg{font-size:clamp(13px,1.6vw,15px); padding:12px 24px; white-space:normal; text-align:center}
  .top nav a{white-space:nowrap}
  @media (max-width:1360px){ .top .state{display:none} }
  @media (max-width:620px){ .top .kuni-cta{font-size:12px; padding:6px 12px; margin-left:auto; margin-right:8px} .sample{display:none} }