@charset "utf-8";
/* ============================================================
   街角サイン工房（サンプル） — A案「日が暮れる」
   骨格: 縦スクロール＝時刻。15:00の昼から21:00の夜へ、
   ページ全体の地色・文字色・写真の明るさが連続的に変わる。
   ============================================================ */

:root{
  /* JSがスクロールに合わせて上書きする。JSが動かない環境では昼のまま成立する */
  --t: 0;                      /* 0=昼 1=夜 */
  --bg: 242 236 225;           /* 70% 生成りの紙 */
  --ink: 34 32 28;             /* 25% 墨 */
  --sub: 112 104 92;
  --acc: 194 69 31;            /* 5% 朱 */
  --line: 34 32 28;
  --line-a: .16;
  --glow: 0;                   /* 夜の灯り強度 0→1 */

  --rail: 0px;
  --gut: 22px;
  --maxw: 1180px;

  --mincho: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --gothic: "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --mono: "Roboto Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-family: var(--gothic);
  font-size:16px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  /* 色の切り替えはJSがスクロールに合わせて行う。transition を足すと毎フレーム二重に動くので付けない */
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* 本文の段落はふつうに折り返す（禁則だけ厳しめ）。 */
body{
  word-break: normal;
  line-break: strict;
}
/* 見出し類だけ、文節の途中で折らない。長い英数字は折り返す（この2つは必ずセットで） */
h1,h2,h3,.kick,.kick2,.clock,.sun,.tag,.origin,figcaption,.lamp-cap,summary{
  word-break: keep-all;
  overflow-wrap: break-word;
}
.nw{ white-space:nowrap; }
h1,h2,h3{
  font-family: var(--mincho);
  font-weight:700;
  line-height:1.38;
  letter-spacing:.02em;
  margin:0;
}
p{ margin:0; }

.wrap{
  width:min(var(--maxw), 100% - (var(--gut) * 2));
  margin-inline:auto;
}
.sec{ padding-left: var(--rail); }

/* ---------- 時刻の目盛り（署名の仕掛けの「つまみ」） ---------- */
.rail{ display:none; }
.tbar{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:60;
  background: rgba(var(--line) / .14);
}
.tbar i{
  display:block; height:100%; width:0%;
  background: rgb(var(--acc));
  box-shadow: 0 0 calc(var(--glow) * 14px) rgb(var(--acc) / .9);
}
/* 右上は相談リンクがあるので、時刻は画面下の左に置く */
.tchip{
  position:fixed; z-index:60; left:14px; bottom:calc(21px + env(safe-area-inset-bottom, 0px));
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  padding:5px 9px;
  color: rgb(var(--ink));
  background: rgb(var(--bg) / .9);
  border:1px solid rgb(var(--line) / .22);
  transition:opacity .25s;
}
/* 相談の節に入ったら、時刻はフォームの上に重ならないよう消す */
.tchip.off{ opacity:0; pointer-events:none; }
/* スマホの相談ボタン（第一画面を過ぎたら下から出る） */
.dock{ display:none; }
@media (max-width:759px){
  .dock{
    display:flex; align-items:center; position:fixed; z-index:61;
    right:14px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    min-height:44px; padding:0 20px;
    font-size:14px; font-weight:700; letter-spacing:.08em;
    color:#14120e; background:rgb(255 181 69);
    box-shadow:0 6px 18px rgb(0 0 0 / .28);
    transform:translateY(calc(100% + 30px)); transition:transform .3s ease;
  }
  .dock.show{ transform:none; }
  .foot{ padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- ヘッダ ---------- */
.head{
  position:absolute; z-index:40; top:0; left:0; right:0;
  padding:26px var(--gut) 0 calc(var(--gut) + var(--rail));
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.plate{
  font-family:var(--mincho); font-weight:700; font-size:15px; letter-spacing:.16em;
  color:#f4efe4;
  padding:9px 14px 10px;
  background: linear-gradient(180deg,#3a352e,#221f1a);
  border:1px solid rgba(244,239,228,.28);
  box-shadow: 2px 3px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.plate small{ display:block; font-family:var(--gothic); font-size:9.5px; letter-spacing:.14em; opacity:.7; font-weight:400; margin-top:2px; }
/* 写真のどこに重なっても読めるよう、地つきの小さなボタンにする */
.head .to{
  flex:0 0 auto; margin-top:4px;
  font-size:12.5px; letter-spacing:.1em; color:#f4efe4;
  padding:9px 13px;
  background:rgb(20 18 15 / .62);
  border:1px solid rgba(244,239,228,.4);
}

/* ---------- 第一画面 ---------- */
/* 第一画面は「昼」。写真は明るく、暗い幕は文字の後ろ（左下）だけに置く */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#6d5a48; }
.hero .shot{ position:absolute; inset:0; }
.hero .shot img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter: brightness(1.1) saturate(1.04) contrast(1.02);  /* 固定値。スクロールでは変えない */
}
.hero .sky{
  position:absolute; inset:0;
  background:
    linear-gradient(200deg, rgba(255,226,170,.30) 0%, rgba(255,226,170,0) 42%),
    radial-gradient(130% 62% at 0% 100%, rgba(12,10,8,.66) 0%, rgba(12,10,8,.38) 48%, rgba(12,10,8,0) 78%);
}
.hero .in{
  position:relative; z-index:2; width:100%;
  padding: 0 var(--gut) clamp(52px,9vh,104px) calc(var(--gut) + var(--rail));
  color:#f4efe4;
}
.kick{
  font-size:11.5px; letter-spacing:.16em;
  color:#ffd9a3; margin-bottom:18px;
}
.kick b{ color:#fff; font-weight:400; }
.hero h1{
  font-size:clamp(34px,7.6vw,78px);
  line-height:1.24; letter-spacing:.03em;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
  max-width:15em;
}
.hero h1 .n{
  color:#ffc266;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero .lead{
  margin-top:22px; max-width:30em; font-size:15px; line-height:2.1;
  color:#e6ded0; text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.cue{
  margin-top:34px; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.14em; color:#ffd9a3;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.cue i{ display:block; width:1px; height:34px; background:linear-gradient(180deg,#ffd9a3,transparent); animation:drop 2.4s ease-in-out infinite; }
@keyframes drop{ 0%,100%{transform:translateY(-4px);opacity:.4} 50%{transform:translateY(4px);opacity:1} }

/* ---------- 共通の節 ---------- */
/* 🪤 padding のショートハンドを使うと .sec の padding-left（時刻の目盛り分）を
   打ち消してしまうため、必ず上下の longhand だけで書く */
.stage{ padding-top:clamp(84px,13vh,150px); padding-bottom:clamp(84px,13vh,150px); position:relative; }
/* 時刻の見せ方は節ごとに変える（15:00＝大きな数字／17:20＝図に重ねる／19:00＝工程の線の起点／20:10＝見せ場の中／21:00＝面板の札） */
.sun{ display:flex; align-items:baseline; gap:14px; margin-bottom:10px; }
.sun .hh{
  font-family:var(--mincho); font-weight:400; font-size:clamp(46px,8vw,92px); line-height:1;
  letter-spacing:.02em; color:rgb(var(--acc));
}
.sun .lb{ font-size:12px; letter-spacing:.2em; color:rgb(var(--sub)); }
.kick2{
  display:inline-block; font-size:12px; letter-spacing:.2em; color:rgb(var(--acc));
  border:1px solid rgb(var(--acc) / .45); padding:3px 10px; margin-bottom:16px;
}
.stage h2{ font-size:clamp(26px,4.4vw,46px); letter-spacing:.04em; max-width:16em; }
.stage .lead{ margin-top:20px; max-width:34em; color:rgb(var(--sub)); font-size:15px; line-height:2.15; }
.note{ font-size:11.5px; color:rgb(var(--sub)); letter-spacing:.04em; }

/* ---------- 15:00 昼の顔（左テキスト・右へ流れ出す写真） ---------- */
.day{ display:grid; grid-template-columns: minmax(0,1fr); gap:34px; }
.day .txt{ padding-bottom:10px; }
.day .fig{ position:relative; }
.day .fig img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
}
.day .cap{
  margin-top:12px; font-size:11.5px; letter-spacing:.06em; color:rgb(var(--sub));
}
.facts{ margin-top:30px; border-top:1px solid rgb(var(--line) / var(--line-a)); }
.facts div{
  display:flex; gap:14px; align-items:baseline;
  padding:13px 2px; border-bottom:1px solid rgb(var(--line) / var(--line-a));
  font-size:14px;
}
.facts b{ font-family:var(--gothic); font-size:12px; letter-spacing:.16em; color:rgb(var(--acc)); flex:0 0 auto; min-width:4.4em; font-weight:700; }

/* ---------- 17:20 距離（近づいてくる階段） ---------- */
.dist{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,3vw,38px) clamp(14px,2vw,28px); align-items:end; }
.dist .txt{ grid-column:1 / -1; }
.dist figure{ margin:0; grid-column:1 / -1; }
/* スマホでも「近づいてくる」ように、3枚の大きさを変える */
.dist .d50{ width:62%; margin-left:auto; }
.dist .d20{ width:84%; margin-left:auto; }

/* 見本の箱文字「街角」（距離の図と見せ場で共通）。昼は乳白の面＋段々の側面＋壁に落ちる影 */
.sg, .lamp-sign .sd{
  display:inline-flex; gap:.06em;
  font-family:var(--mincho); font-weight:700; line-height:1; letter-spacing:0; white-space:nowrap;
  color:#f3eee4;
  text-shadow:
    .01em .012em 0 #cbc3b5,
    .02em .024em 0 #b2aa9b,
    .03em .036em 0 #989083,
    .04em .048em 0 #7e776b,
    .05em .06em 0 #676055,
    .09em .13em .09em rgb(20 16 12 / .38);
}
.sg b, .lamp-sign b{ font-weight:700; }

/* 距離の図（画像を使わずCSSで描く。幅に合わせて中身も縮む） */
.view{ position:relative; overflow:hidden; container-type:inline-size; background:#d9d1c3; }
.view i{ display:block; position:absolute; }
/* 夕方の色。スクロールで不透明度だけを変える */
.view::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgb(255 150 80 / .28), rgb(38 40 70 / .5));
  opacity:calc((var(--t) - .28) * 5);
}
.stamp{
  position:absolute; z-index:2; left:4%; top:5%;
  font-family:var(--mono); font-size:max(12px, 3.6cqw); letter-spacing:.1em; line-height:1.4;
  color:#fff; background:rgb(20 18 15 / .58); padding:.15em .5em;
}
/* 50m：並んだ建物の中の小さな看板 */
.v50{ aspect-ratio:4/3; background:linear-gradient(180deg,#a8c1d0 0%,#dfe2dc 72%); }
.v50 .bd{ bottom:12%; }
.v50 .b1, .v50 .b3{
  background-image:linear-gradient(90deg, var(--w) 55%, transparent 0), linear-gradient(var(--w) 45%, #6c7680 0);
  background-size:6.5cqw 7.5cqw; background-position:2cqw 2cqw;
}
.v50 .b1{ --w:#bdb5a8; left:-3%; width:32%; height:62%; background-color:var(--w); }
.v50 .b3{ --w:#a9a69e; right:-4%; width:30%; height:48%; background-color:var(--w); }
.v50 .b2{
  left:31%; width:38%; height:74%;
  background:linear-gradient(180deg,#e2dbcf,#d3cbbd);
  box-shadow:inset 0 2.4cqw 0 #bfb6a8;
}
.v50 .b2::before{ /* 1階の店の正面（ガラス） */
  content:""; position:absolute; left:8%; right:8%; bottom:0; height:22%;
  background:linear-gradient(160deg,#8ea1ac,#4c5d6b);
}
.v50 .b2 .sg{
  position:absolute; left:8%; right:8%; bottom:22%; height:13%;
  justify-content:center; align-items:center;
  font-size:5.4cqw; background:#56606b;
}
.v50 .road{ left:0; right:0; bottom:0; height:12%; background:linear-gradient(180deg,#9b9d9c 0 14%,#6f7274 14%); }
/* 20m：店の正面。店名がはっきり読める */
.v20{ aspect-ratio:3/2; background:linear-gradient(180deg,#e4ddd1,#d5cdbf); }
.v20 .fascia{
  left:6%; right:6%; top:12%; height:34%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#5f6974,#4e5761);
  box-shadow:inset 0 -.8cqw 0 rgb(0 0 0 / .18);
}
.v20 .fascia .sg{ font-size:15cqw; }
.v20 .glass{
  left:6%; width:58%; top:54%; bottom:0;
  background:linear-gradient(160deg,#9fb1bb,#5a6d7c 58%,#3f4f5c);
  border:1.4cqw solid #3a3f45; border-bottom:0;
}
.v20 .door{
  right:6%; width:27%; top:54%; bottom:0;
  background:linear-gradient(180deg,#80624a,#5b4432);
  border:1.4cqw solid #3a3f45; border-bottom:0;
}
/* 5m：見上げた「街」の字。厚みと影まで見える */
.v05{ aspect-ratio:16/10; background:linear-gradient(135deg,#6a747e 0%,#555e68 60%,#4a525b 100%); }
.v05::before{ /* 日の当たり方 */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgb(255 236 200 / .22), rgb(255 236 200 / 0) 55%);
}
.v05 .sg{ position:absolute; left:5%; top:50%; transform:translateY(-52%); font-size:60cqw; }
.v05 .bolt{
  width:1.6cqw; height:1.6cqw; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#eee9df,#8a8479 70%);
  box-shadow:.3cqw .4cqw .5cqw rgb(0 0 0 / .35);
}
.v05 .b-1{ right:3%; top:6%; }
.v05 .b-2{ right:3%; bottom:6%; }
.dist figcaption{
  display:flex; align-items:baseline; gap:12px; margin-top:11px;
  border-top:1px solid rgb(var(--line) / var(--line-a)); padding-top:10px;
}
.dist figcaption em{
  font-family:var(--mono); font-style:normal; font-size:clamp(19px,3vw,34px); letter-spacing:.02em;
  color:rgb(var(--acc)); line-height:1;
}
.dist figcaption span{ font-size:12.5px; color:rgb(var(--sub)); letter-spacing:.04em; }

/* ---------- 19:00 手の跡（1本の線に吊る4つの節） ---------- */
.hand{ position:relative; margin-top:96px; }
.hand .line{ position:absolute; left:0; right:0; top:0; height:1px; background:rgb(var(--line) / var(--line-a)); }
.hand ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0; }
.hand li{ position:relative; padding:26px 0 26px 26px; border-bottom:1px solid rgb(var(--line) / var(--line-a)); }
.hand li::before{
  content:""; position:absolute; left:0; top:34px; width:9px; height:9px;
  background:rgb(var(--acc)); border-radius:50%;
}
.hand h3{ font-size:19px; letter-spacing:.06em; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.hand h3 small{ font-family:var(--gothic); font-weight:400; font-size:12px; letter-spacing:.1em; color:rgb(var(--sub)); }
.hand p{ margin-top:8px; font-size:14px; color:rgb(var(--sub)); line-height:1.95; max-width:26em; }
/* 工程は大きな一字で見せる */
.hand .kj{
  display:block; font-family:var(--mincho); font-weight:700; line-height:1;
  font-size:clamp(56px,11vw,96px); color:rgb(var(--acc)); margin-bottom:10px;
}
.hand img{ width:100%; aspect-ratio:3/2; object-fit:cover; margin-top:14px; }
/* 19:00 は工程の線の起点に置く */
.origin{
  position:absolute; left:0; bottom:calc(100% + 4px); margin:0;
  display:flex; align-items:baseline; gap:10px; white-space:nowrap; line-height:1.3;
  font-size:12px; letter-spacing:.12em; color:rgb(var(--sub));
  padding-left:12px; border-left:1px solid rgb(var(--acc));
}
.origin b{ font-family:var(--mono); font-weight:400; font-size:clamp(20px,3vw,28px); letter-spacing:.04em; color:rgb(var(--acc)); }
/* 日暮れの帯：夕焼けの色はここだけ */
.dusk{
  height:10px;
  background:linear-gradient(90deg, rgb(242 170 90) 0%, rgb(214 110 90) 38%, rgb(120 90 130) 70%, rgb(60 62 90) 100%);
  opacity:.85;
}

/* ---------- 20:10 夜（ここは常に夜。JSが無くても成立する） ---------- */
.night{
  --bg: 13 16 22; --ink: 232 227 216; --sub: 150 146 138; --line: 232 227 216; --line-a:.17;
  --acc: 255 181 69;
  background: rgb(var(--bg)); color: rgb(var(--ink));
  position:relative;
}
.night::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:120px;
  background:linear-gradient(180deg, rgb(13 16 22 / calc(1 - var(--t))) 0%, rgb(13 16 22 / 0) 100%);
  pointer-events:none;
}
/* 夜に光らせるのは、節ごとに1か所だけ（20:10＝見本の看板／21:00＝面板の見出しの一句）。
   光り方は「芯・にじみ・広がり」の3段の影 */
.lit{
  color:#ffe6bf;
  text-shadow:0 0 1px #fff3dc, 0 0 8px rgb(255 181 69 / .55), 0 0 28px rgb(255 140 40 / .35);
}

/* ---------- 見せ場：同じ看板が、昼は形・夜は光になる ---------- */
/* --lit（0=昼 1=夜）はJSがこの枠の中だけに書く。変えるのは不透明度だけ */
.lamp{ --lit:1; position:relative; }
.js .lamp{ height:185svh; }
.lamp-stage{
  position:sticky; top:0; height:100svh; min-height:420px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(18px,3vh,30px);
  background:
    radial-gradient(70% 50% at 50% 46%, #1a1f29 0%, #0d1016 70%);
}
.lamp-wall{ /* 昼の壁（日の当たった藍鼠の面）。夜に向けて消える */
  position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgb(255 238 205 / .30) 0%, rgb(255 238 205 / 0) 50%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 72px),
    linear-gradient(180deg,#76808b 0%,#5d6772 100%);
  opacity:calc(1 - var(--lit));
}
.lamp-halo{ /* 夜、文字のまわりの壁に落ちる明かり */
  position:absolute; left:50%; top:46%; width:min(120vw,1100px); height:min(70vw,560px);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(255 170 70 / .30), rgb(255 150 50 / .10) 55%, transparent 100%);
  opacity:var(--lit);
}
.lamp-time{
  position:absolute; left:calc(var(--gut) + var(--rail)); top:clamp(22px,6vh,56px);
  font-family:var(--mono); font-size:clamp(34px,7vw,72px); line-height:1; letter-spacing:.02em;
  color:rgb(255 214 160 / calc(.35 + .5 * var(--lit)));
}
.lamp-sign{ position:relative; z-index:1; font-size:clamp(104px,30vw,300px); }
.lamp-sign .sd, .lamp-sign .sn{ display:flex; gap:.06em; line-height:1; }
.lamp-sign .sd{ opacity:calc(1 - var(--lit)); }
/* 夜の箱文字：側面は暗い金属、面だけが内側から灯る */
.lamp-sign .sn{
  position:absolute; inset:0;
  font-family:var(--mincho); font-weight:700; white-space:nowrap;
  color:#ffe6bf;
  text-shadow:
    0 0 1px #fff3dc,
    0 0 .03em rgb(255 181 69 / .6),
    0 0 .12em rgb(255 140 40 / .38),
    .01em .012em 0 #2c2823, .02em .024em 0 #24211d, .03em .036em 0 #1d1b18;
  opacity:var(--lit);
}
.lamp-cap{
  position:relative; z-index:1; display:grid; text-align:center;
  font-family:var(--mincho); font-size:clamp(17px,2.4vw,24px); letter-spacing:.08em;
  padding-inline:var(--gut);
}
.lamp-cap span{ grid-area:1 / 1; }
.lamp-cap .cd{ color:#fbf7ef; text-shadow:0 1px 10px rgb(0 0 0 / .45); opacity:calc(1 - var(--lit)); }
.lamp-cap .cn{ color:#f1e7d6; opacity:var(--lit); }
.lamp-hint{
  position:absolute; z-index:1; bottom:clamp(64px,10vh,84px); left:0; right:0; text-align:center;
  font-size:12px; letter-spacing:.14em; color:rgb(240 232 218 / .8);
  opacity:calc(1 - var(--lit));
}
@media (min-width:1060px){
  .lamp-stage{ padding-left:var(--rail); }
  .lamp-hint{ bottom:32px; }
}

/* 看板の種類＝発光する行 */
.rows{ margin-top:14px; border-top:1px solid rgb(var(--line) / var(--line-a)); }
.rows a{
  position:relative; display:grid; grid-template-columns:1fr; gap:6px;
  padding:22px 0 20px; border-bottom:1px solid rgb(var(--line) / var(--line-a));
  transition:border-color .3s, color .3s;
}
.rows h3{ font-size:clamp(19px,3vw,27px); letter-spacing:.05em; }
.rows p{ font-size:13px; color:rgb(var(--sub)); line-height:1.9; max-width:30em; }
/* 和文の小さな注記（見出しの上） */
.rows .en{ display:block; font-size:11.5px; letter-spacing:.14em; color:rgb(var(--acc) / .9); margin-bottom:4px; }
.rows .th{
  width:88px; aspect-ratio:3/2; object-fit:cover;
  transition:transform .35s;
}
@media (hover:hover){
  .rows a:hover .th{ transform:scale(1.04); }
  .rows a:hover{ border-bottom-color:rgb(var(--acc) / .9); }
  .rows a:hover h3{ color:#ffe6bf; text-shadow:0 0 1px #fff3dc, 0 0 8px rgb(255 181 69 / .55), 0 0 28px rgb(255 140 40 / .35); }
}
.rows a:focus-visible{ outline:2px solid rgb(var(--acc)); outline-offset:6px; }
/* スマホでは見本を行の右に添える（下にぶら下げると迷子になる） */
@media (max-width:759px){
  .rows a{ grid-template-columns:1fr 88px; column-gap:16px; align-items:center; }
}

/* ---------- 21:00 相談（発光する面板） ---------- */
.board{
  position:relative; margin-top:44px; padding:clamp(32px,5vw,56px) clamp(22px,4vw,52px);
  background:linear-gradient(180deg,#191d25,#10131a);
  border:1px solid rgb(255 181 69 / .38);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .06);
}
/* 21:00 は面板に吊るした札 */
.tag{
  position:absolute; top:-14px; right:clamp(16px,4vw,44px);
  display:flex; align-items:baseline; gap:8px;
  padding:5px 12px 6px; font-size:12px; letter-spacing:.1em; color:#1a1712;
  background:#e8e1d3; box-shadow:2px 3px 0 rgb(0 0 0 / .35);
}
.tag b{ font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:.04em; }
.board::after{
  content:""; position:absolute; inset:7px; border:1px solid rgb(255 181 69 / .14); pointer-events:none;
}
.board h2{ font-size:clamp(24px,4vw,40px); }
.board .lead{ color:#b9b3a8; }
.cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:28px;
  font-size:15px; font-weight:700; letter-spacing:.08em;
  padding:17px 34px; color:#14120e;
  background:rgb(255 181 69);
  transition:transform .22s;
}
.cta:hover{ transform:translateY(-2px); }
.recept{ margin-top:26px; display:grid; gap:9px; font-size:13.5px; color:#b3ada2; }
.recept b{ color:#e8e3d8; font-weight:700; }

/* 見本のフォーム（送信しない） */
.form{ margin-top:34px; padding-top:28px; border-top:1px solid rgb(255 181 69 / .22); scroll-margin-top:24px; }
.f-note{ font-size:13px; color:#ffd9a3; margin-bottom:16px; }
.f-grid{ display:grid; gap:14px; }
.form label{ display:grid; gap:6px; font-size:13px; letter-spacing:.04em; color:#d9d3c7; }
.form input[type=text]{
  width:100%; min-height:46px; padding:10px 12px;
  font:inherit; font-size:16px; color:#f1ece2;
  background:#0b0e13; border:1px solid rgb(232 227 216 / .28); border-radius:0;
}
.form input[type=text]::placeholder{ color:#8d887f; }
.form input[type=text]:focus{ outline:2px solid rgb(255 181 69); outline-offset:1px; }
.f-when{ margin:18px 0 0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.f-when legend{ float:left; margin-right:14px; font-size:13px; color:#d9d3c7; }
.f-when label{ display:inline-flex; align-items:center; gap:6px; font-size:14px; min-height:40px; }
.f-when input{ width:18px; height:18px; accent-color:rgb(255 181 69); }
.send{
  margin-top:20px; min-height:48px; padding:0 26px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; letter-spacing:.06em;
  color:#ffd9a3; background:transparent; border:1px solid rgb(255 181 69 / .8);
}
.send:hover{ background:rgb(255 181 69 / .12); }
.send:focus-visible{ outline:2px solid rgb(255 181 69); outline-offset:3px; }
.f-done{ margin-top:12px; font-size:13.5px; color:#e8e3d8; }

/* よくある質問 */
.faq{ margin-top:36px; }
.faq h3{ font-size:18px; letter-spacing:.08em; margin-bottom:8px; }
.faq details{ border-bottom:1px solid rgb(232 227 216 / .16); }
.faq summary{
  cursor:pointer; list-style:none; padding:14px 28px 14px 0; position:relative;
  font-size:15px; color:#e8e3d8;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; position:absolute; right:2px; top:14px; color:rgb(255 181 69); }
.faq details[open] summary::after{ content:"－"; }
.faq details p{ padding:0 0 16px; font-size:14px; color:#b9b3a8; line-height:1.9; }

/* ---------- 足元 ---------- */
.foot{ background:#0a0c11; color:#7e7a72; padding:44px 0 56px; font-size:12px; }
.foot .in{ display:grid; gap:14px; }
.foot .nm{ font-family:var(--mincho); color:#ddd7cb; font-size:15px; letter-spacing:.14em; }

/* ---------- 出現 ---------- */
/* JSが動くときだけ隠す（JSが無い・読み込めないときは最初から見える） */
.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.on{ opacity:1; transform:none; }

/* ============================================================
   画面幅の分岐
   ============================================================ */
@media (min-width:760px){
  :root{ --gut:38px; }
  .day{ grid-template-columns: 0.92fr 1.08fr; gap:clamp(36px,5vw,72px); align-items:end; }
  .dist .txt{ grid-column:1 / 7; }
  .dist .d50{ grid-column:8 / 13; width:auto; }
  .dist .d20{ grid-column:3 / 11; width:auto; }
  .dist .d05{ grid-column:2 / 12; }
  .v05{ aspect-ratio:21/9; }
  .v05 .sg{ font-size:46cqw; }
  .hand ol{ grid-template-columns:repeat(2,1fr); column-gap:clamp(24px,4vw,56px); }
  .rows a{ grid-template-columns: 1fr 180px; align-items:center; gap:clamp(18px,3vw,40px); }
  .rows a > div{ min-width:0; }
  .rows .th{ width:180px; }
  .recept{ grid-template-columns:repeat(3,auto); justify-content:start; column-gap:34px; }
  .recept .price{ grid-column:1 / -1; }
  .f-grid{ grid-template-columns:1fr 1fr; }
  .f-grid .wide{ grid-column:1 / -1; }
  .foot .in{ grid-template-columns:1fr auto; align-items:end; }
}

@media (min-width:1060px){
  :root{ --rail:96px; --gut:48px; }
  .tbar, .tchip{ display:none; }
  .rail{
    display:block; position:fixed; z-index:55; left:0; top:0; bottom:0; width:var(--rail);
    border-right:1px solid rgb(var(--line) / var(--line-a));
    background:rgb(var(--bg) / .94);
  }
  .rail ul{ list-style:none; margin:0; padding:0; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); }
  .rail li{
    display:flex; align-items:center; gap:9px; padding:0 0 0 16px; height:44px;
    font-family:var(--mono); font-size:12px; letter-spacing:.1em;
    color:rgb(var(--sub)); transition:color .3s;
  }
  .rail li::before{ content:""; width:14px; height:1px; background:rgb(var(--line) / .35); transition:width .35s, background-color .35s; }
  .rail li.on{ color:rgb(var(--acc)); }
  .rail li.on::before{ width:26px; background:rgb(var(--acc)); box-shadow:0 0 calc(var(--glow)*12px) rgb(var(--acc)); }
  .rail .now{
    position:absolute; left:0; right:0; bottom:26px; text-align:center;
    font-size:12px; letter-spacing:.22em; color:rgb(var(--sub));
  }
  .day .fig{ margin-right:calc(var(--gut) * -1); }
  /* 第一画面：写真を右へずらし、紋が見出しと重ならないようにする（左の余りは目盛りの下に隠れる） */
  .hero .shot{ right:auto; left:var(--rail); width:max(122vw, 170vh); }
  .hero .shot img{ object-position:50% 40%; }
  .hero .sky{
    background:
      linear-gradient(200deg, rgba(255,226,170,.28) 0%, rgba(255,226,170,0) 40%),
      radial-gradient(62% 78% at 0% 100%, rgba(12,10,8,.64) 0%, rgba(12,10,8,.34) 52%, rgba(12,10,8,0) 82%);
  }
  .hand ol{ grid-template-columns:repeat(4,1fr); }
  .hand li{ border-bottom:none; padding:30px 18px 0 0; }
  .hand li:nth-child(even){ padding-top:92px; }
  .hand li::before{ top:0; }
  .hand .line{ top:4px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ opacity:1; transform:none; transition:none; }
  .cue i{ animation:none; }
  .rail li, .rail li::before, .rows .th, .cta, .dock{ transition:none; }
  .cta:hover, .rows a:hover .th{ transform:none; }
}