/* 一砂 LP — ヒーロー（最初の画面）。持ち主: ヒーロー担当。仕様: docs/hero-spec.md。動きは js/hero-reel.js
   構成: PC＝左に文字の列（約40%）・右に映像ステージ（商品の中心が画面の約62%）／スマホ＝上に映像（横幅いっぱい 16:9）・下に文字。
   値は tokens.css だけを参照。ここで足した値は理由つき。 */
.hero{
  --hero-bg:#080604;             /* 追加の色（理由）: 本番映像 hero-a の背景の実測値（docs/video-log.md・四隅平均 #080604）。舞台を映像に合わせ、下端で --ink へ溶かす */
  --sw:min(62vw,calc((max(640px,100svh) - var(--topbar-h) - 190px) * 16 / 9),1180px); /* 映像ステージの幅（PC）。縦に操作列と余白 190px を残す */
  --cx:62vw;                     /* 映像ステージの中心（PC）＝商品の中心が画面の約62% */
  --pad-l:max(var(--gutter),calc((100vw - var(--wrap)) / 2 - 40px)); /* 文字の列の左端 */
  --copy-w:min(36vw,500px);      /* 文字の列の幅 */
  position:relative;isolation:isolate;min-height:max(640px,100svh);padding-top:var(--topbar-h);overflow:clip;background:var(--hero-bg)}
.hero__sprite{position:absolute;width:0;height:0;overflow:hidden}

/* 舞台：温かい黒。商品の後ろの弱い真鍮色の光は映像そのものに入っている（映像の外に光を足すと、映像の四角い縁が浮くため足さない）。
   下端だけ --ink へ溶かして次の区画につなぐ */
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--hero-bg) 0%,var(--hero-bg) 78%,var(--ink) 100%)}

.hero__inner{min-height:calc(max(640px,100svh) - var(--topbar-h));display:flex;align-items:center;
  padding:clamp(24px,4vh,48px) 0 clamp(40px,7vh,72px) var(--pad-l)}

/* ───────── 左：文字の列 ───────── */
.hero__copy{position:relative;z-index:2;width:var(--copy-w);pointer-events:none}
.hero__copy>*{pointer-events:auto}
.hero__eyebrow::before{display:none}
.hero__mark{width:26px;height:26px;flex:none;color:var(--brass-hi);overflow:visible}
.hero__title{font-family:var(--f-display);font-weight:700;font-size:clamp(2.05rem,3.35vw,3.4rem);line-height:1.36;letter-spacing:.05em;margin-top:clamp(18px,2.6vh,28px)}
.hero__title .ln:has(>span:empty){display:none}
.hero__sub{color:var(--muted);font-size:clamp(.95rem,1.15vw,1.06rem);line-height:2;max-width:25em;margin-top:clamp(16px,2.4vh,24px)}

/* 価格の札：取り消し線を使わず「これからの予定価格 → いま」を文で。左の細い真鍮線＝時計の指標 */
.hero__price{position:relative;margin-top:clamp(20px,3.2vh,34px);padding-left:20px}
.hero__price::before{content:"";position:absolute;left:0;top:.35em;bottom:.5em;width:1px;background:linear-gradient(180deg,var(--brass) 0%,var(--line-strong) 100%)}
.hero__price-label{font-family:var(--f-body);font-weight:700;font-size:.74rem;letter-spacing:.24em;color:var(--brass)}
.hero__price-later{font-size:.84rem;line-height:1.7;letter-spacing:.06em;color:var(--dim);margin-top:4px}
/* 「¥」（小）＋数字（Bodoni・大）＋「（税込）」は1つの塊。どの幅でも改行しない（価格が泣き別れすると読めない） */
.hero__price-now{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;margin-top:2px;line-height:1.1}
.hero__yen-mark{font-size:clamp(1.3rem,1.7vw,1.6rem);color:var(--brass-hi);margin-right:.12em}
.hero__yen{font-size:clamp(2.5rem,3.5vw,3.3rem);font-weight:500;color:var(--brass-hi);letter-spacing:.01em}
.hero__unit{font-size:.9rem;letter-spacing:.06em;color:var(--bone);margin-left:.3em}
/* 締切の行：価格の直下・CTAの上に真鍮色で（「今買う理由」を価格と同じ視線の中に）。砂粒の小さなアイコン＝この商品の砂 */
.hero__deadline{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:.84rem;line-height:1.5;letter-spacing:.06em;color:var(--brass-hi)}
.hero__grain{flex:none;width:12px;height:14px;fill:currentColor}   /* 砂粒が積もった小さな山（この商品の砂） */
.hero__buy{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(18px,2.6vh,26px)}
.hero__cta-note{margin-top:12px;font-size:.76rem;line-height:1.7;letter-spacing:.06em;color:var(--dim)}

/* ───────── 右：映像ステージ ───────── */
.hero__stage{position:absolute;z-index:1;top:var(--topbar-h);bottom:0;left:calc(var(--cx) - var(--sw) / 2);width:var(--sw);
  display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hero__stage>*{pointer-events:auto}
.stage{position:relative;width:100%;aspect-ratio:var(--reel-ar,1920 / 1080)}
.reel{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;
  /* 映像の外周（ほぼ黒の余白）をページの黒へ溶かす。中身は切らない（端 5〜8% だけ） */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
.stage.is-live .reel{cursor:grab}
.stage.is-live.is-grabbing .reel{cursor:grabbing}
.reel:focus-visible{outline:none}
.stage:has(.reel:focus-visible)::after{content:"";position:absolute;z-index:7;inset:6px;border:2px solid var(--brass-hi);border-radius:var(--radius-lg);box-shadow:0 0 0 2px rgba(8,6,4,.85),inset 0 0 0 2px rgba(8,6,4,.85);pointer-events:none}
.reel__poster,.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;-webkit-user-drag:none;pointer-events:none}
.reel__poster{z-index:0;transition:opacity var(--dur-m) var(--ease-fn)}
.stage.is-live .reel__poster{opacity:0}
.reel__video{z-index:1;opacity:0}
.stage:not(.is-live) .reel__video{visibility:hidden}

/* 文字盤：真鍮の細線。手前の弧は濃く、奥の弧は薄く（商品の後ろに回り込んで見える） */
.dial{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--brass)}
.dial__back{opacity:.16}
.dial__front{opacity:.62}
.dial__pin{color:var(--brass-hi);opacity:.85}
.dial.is-ease,.stage__deg.is-ease{transition:opacity .3s var(--ease-fn)}
.stage__deg{position:absolute;z-index:4;right:15%;bottom:6%;display:flex;align-items:flex-start;margin:0;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1;color:var(--brass-hi);letter-spacing:.04em;pointer-events:none}
.stage__deg-n{min-width:2.2em;text-align:right}
.stage__deg-u{font-size:.7em;margin-left:1px;color:var(--brass)}

/* 「ドラッグで回す」ヒント（初回だけ。最初の操作か数秒後に薄くなる） */
.stage__hint{position:absolute;z-index:5;left:50%;top:9%;transform:translate(-50%,6px);display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 16px 0 12px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(11,9,7,.72);color:var(--bone);font-size:.78rem;letter-spacing:.14em;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--dur-m) var(--ease-fn),transform var(--dur-m) var(--ease-fn)}   /* 消えは 0.7s（hero-reel.js はこの後に砂粒を落とす） */
.stage__hint svg{width:18px;height:18px;color:var(--brass)}
.stage.is-hint .stage__hint{opacity:1;transform:translate(-50%,0);transition-duration:var(--dur-l)}   /* 出は 1.2s */
.stage__status{position:absolute;z-index:5;left:16px;top:14px;display:none;align-items:center;min-height:26px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(11,9,7,.78);font-size:.74rem;letter-spacing:.1em;color:var(--muted);line-height:1.4}
.stage__status:not(:empty){display:inline-flex}
.stage__error{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;background:rgba(11,9,7,.8)}
.stage__error[hidden]{display:none}
.stage__error-msg{font-size:.9rem;letter-spacing:.06em;color:var(--bone);line-height:1.8}
.stage__error-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stage__note{position:absolute;z-index:4;left:clamp(7%,calc(var(--pad-l) + var(--copy-w) + 16px - (var(--cx) - var(--sw) / 2)),45%);bottom:5%;margin:0;font-size:.7rem;letter-spacing:.06em;color:var(--dim);pointer-events:none}

/* ───────── 映像のすぐ下：章の表示と操作 ───────── */
.reel-bar{display:flex;align-items:center;justify-content:space-between;gap:0 20px;flex-wrap:wrap;margin-top:6px;padding:0 4%;
  /* PC: 文字の列と重ならないよう、操作列は文字の列の右端より右から始める（足りなければ操作ボタンが次の行へ回る） */
  padding-left:clamp(4%,calc(var(--pad-l) + var(--copy-w) + 16px - (var(--cx) - var(--sw) / 2)),45%)}
.reel-cuts{display:flex;gap:22px;margin:0}
.reel-cut{display:flex;align-items:center;gap:9px;font-size:.76rem;letter-spacing:.1em;color:var(--dim);transition:color var(--dur-m) var(--ease-fn)}
.reel-cut__n{font-size:.82rem;color:var(--brass-lo);transition:color var(--dur-m) var(--ease-fn)}
.reel-cut__line{position:relative;display:block;width:clamp(36px,4vw,64px);height:1px;background:var(--line-strong);overflow:hidden}
.reel-cut__line i{position:absolute;inset:0;background:var(--brass-hi);transform:scaleX(0);transform-origin:0 50%}
.reel-cut.is-on{color:var(--bone)}
.reel-cut.is-on .reel-cut__n{color:var(--brass)}
.reel-ctrl{display:flex;align-items:center;gap:2px;margin-left:auto}
.rc-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px 0 10px;border:1px solid transparent;border-radius:999px;font-size:.76rem;letter-spacing:.1em;color:var(--muted);white-space:nowrap;
  transition:color var(--dur-s) var(--ease-fn),border-color var(--dur-s) var(--ease-fn)}
.rc-btn svg{width:18px;height:18px;flex:none}
.rc-btn:hover{color:var(--brass-hi);border-color:var(--line-strong)}
.rc-btn[hidden]{display:none}
.rc-btn.is-attn{color:var(--brass-hi);border-color:var(--line-strong)}
.rc-btn--solid{color:#1b1309;background:var(--brass);padding:0 22px;font-weight:700}
.rc-btn--solid:hover{color:#1b1309;background:var(--brass-hi);border-color:transparent}

/* ───────── 下端「つづきを見る」：細い縦線の中を砂粒が1粒ずつ落ちる ───────── */
/* なぜ: 砂が落ちる＝この商品そのものの動き。「下へ読み進める」を砂時計の比喩で誘う */
.hero__scroll{position:absolute;z-index:3;right:clamp(12px,1.6vw,28px);bottom:clamp(20px,4vh,40px);display:flex;flex-direction:column;align-items:center;gap:12px;min-width:44px;min-height:44px;padding:6px 0;color:var(--dim);transition:color var(--dur-s) var(--ease-fn)}
.hero__scroll:hover{color:var(--brass-hi)}
.hero__scroll-label{writing-mode:vertical-rl;font-size:.72rem;letter-spacing:.34em;line-height:1}
.hero__scroll-line{position:relative;display:block;width:1px;height:64px;background:var(--line-strong);overflow:visible}
.hero__scroll-line i{position:absolute;left:-1px;top:0;width:3px;height:3px;border-radius:50%;background:var(--sand);opacity:0}
/* 同時に動くもの3つまで：砂粒は「ドラッグで回す」の札が消えてから（.is-cue）3粒だけ落ちて止まる。最後の1粒は底に残る（落ちきった砂） */
.hero.is-cue .hero__scroll-line i{animation:hero-grain 3.6s var(--ease-fn) 1 both}
.hero.is-cue .hero__scroll-line i:nth-child(2){animation-delay:1.2s}
.hero.is-cue .hero__scroll-line i:nth-child(3){animation-name:hero-grain-rest;animation-delay:2.4s}
@keyframes hero-grain{0%{transform:translateY(0);opacity:0}12%{opacity:.95}78%{opacity:.9}100%{transform:translateY(61px);opacity:0}}
@keyframes hero-grain-rest{0%{transform:translateY(0);opacity:0}12%{opacity:.95}100%{transform:translateY(61px);opacity:.9}}

/* ───────── 読み込み時：マークの線が描かれる ───────── */
.js .hero__mark{stroke-dasharray:140;stroke-dashoffset:140}
.js .hero.is-in .hero__mark{animation:hero-draw var(--dur-l) var(--ease-sig) forwards}
@keyframes hero-draw{to{stroke-dashoffset:0}}

/* ───────── 中くらいの幅（PC の狭い側） ───────── */
@media (max-width:1180px) and (min-width:961px){
  .hero{--sw:min(56vw,calc((max(640px,100svh) - var(--topbar-h) - 190px) * 16 / 9));--cx:65vw;--copy-w:40vw}
  .rc-label{font-size:.72rem}
  .reel-cut__line{width:30px}
}

/* ───────── スマホ・タブレット縦：上に映像、下に文字 ───────── */
@media (max-width:960px){
  .hero__inner{min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:0 0 28px}
  .hero__stage{position:relative;order:-1;top:auto;bottom:auto;left:auto;width:100%;display:block}
  .hero__copy{width:auto;padding:10px var(--gutter) 0}
  .reel{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%)}
  .stage:has(.reel:focus-visible)::after{inset:4px;border-radius:4px}
  .reel-bar{padding:0 calc(var(--gutter) - 8px) 0 var(--gutter);margin-top:0;gap:0 12px}
  .reel-ctrl{margin-left:0}
  .reel-cuts{gap:16px}
  .hero__scroll{display:none}
  .hero__title{font-size:clamp(1.8rem,7.4vw,2.6rem);margin-top:12px;line-height:1.34}
  .hero__sub{font-size:.9rem;line-height:1.8;margin-top:10px}
  .hero__price{margin-top:14px;padding-left:16px}
  .hero__yen{font-size:2.3rem}
  .hero__buy{margin-top:14px;gap:8px;align-items:stretch}
  .hero__buy .btn{width:100%;min-height:60px;padding:0 1.4em}
  .hero__cta-note{text-align:center}
  .stage__deg{right:6%;bottom:4%;font-size:.9rem}
  .stage__note{left:var(--gutter);bottom:3%;font-size:.64rem}
  .stage__hint{top:7%;min-height:30px;font-size:.72rem}
}
@media (max-width:960px) and (min-width:641px){
  .hero__title{font-size:clamp(1.9rem,5.2vw,2.6rem)}
  .reel-ctrl{margin-left:auto}
  .hero__buy{align-items:flex-start}
  .hero__buy .btn{width:auto}
  .hero__cta-note{text-align:left}
}
/* ───────── スマホ（≤760px）：最初の画面（390×664）に「見出し → 価格の段（締切）→ CTA」まで入れる ─────────
   監査1周目: 操作列とカット名が約100pxを使い、価格とCTAが画面の外に出ていた。
   ①操作は文字なしの44pxアイコン3つを舞台の右端に重ねる（右下の縦の列。商品の横幅は回転のどの角度でも映像の幅の約79%までなので、右端の黒い余白に収まる）
   ②カット名（01 かたち／02 砂と真鍮）は隠し、進行線だけを舞台の下端に細く ③文字の並びを order で「見出し→価格→CTA→サブ→注記」に ④見出しと余白を詰める。PC の構図は変えない */
@media (max-width:760px){
  .hero__copy{display:flex;flex-direction:column;padding-top:12px}
  .hero__eyebrow{order:0;gap:10px;font-size:.72rem;letter-spacing:.22em}
  .hero__mark{width:22px;height:22px}
  .hero__title{order:1;font-size:clamp(1.62rem,7vw,2.15rem);line-height:1.3;letter-spacing:.04em;margin-top:8px}
  /* 価格の段：予定価格の行 →「発売記念 ¥3,980（税込）」を1行 → 締切の行 */
  .hero__price{order:2;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;margin-top:12px;padding-left:14px}
  .hero__price-later{order:-1;flex-basis:100%;margin:0 0 1px;font-size:.8rem;line-height:1.6}
  .hero__price-label{font-size:.72rem;letter-spacing:.18em}
  .hero__price-now{margin-top:0}
  .hero__yen{font-size:2.2rem}
  .hero__yen-mark{font-size:1.2rem}
  .hero__unit{font-size:.82rem}
  .hero__deadline{flex-basis:100%;margin-top:5px;font-size:.82rem}
  .hero__buy{order:3;margin-top:12px}
  .hero__sub{order:4;margin-top:16px}
  .hero__cta-note{order:5;margin-top:8px;text-align:left}
  /* 価格とCTAは読み込み直後に出し切る（見出しの行の入りに少し遅れるだけ） */
  .hero__price.mp-rev{transition-delay:.15s!important}
  .hero__buy.mp-rev{transition-delay:.25s!important}

  /* 監査2周目: 舞台の高さを画面の高さに合わせて伸ばす（背の高い端末では商品を大きく）。
     下限＝横幅の16:9（664px の画面では今までと同じ＝CTA上端 ≤ 600px を保つ）。
     中＝画面の高さ − 舞台以外の最初の画面の中身（上のバー64＋注記の行と文字の列 約438＋下の余白28。390×844 で実測）。
     上限＝340px と「横幅×9/16×1.55」（hero-reel.js の mobileMax。これ以上縦に伸ばすと、縦を埋めるための拡大で商品の左右が切れる）。
     映像は hero-reel.js が縦いっぱいに埋まる倍率（--ms）で中央から拡大するので、商品はいつも舞台の中央 */
  .stage{aspect-ratio:auto;height:clamp(calc(100vw * 9 / 16),calc(100svh - var(--hero-rest,530px)),min(340px,calc(100vw * 9 / 16 * 1.55)))}
  /* 舞台の上の重ね物 */
  .reel{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 96%,transparent 100%)}
  /* B-10（hero-reel.js 冒頭）: 映像の左右は黒い余白だけなので、hero-a を CONFIG.mobileScale 倍にして余白だけを切る。値は JS が --ms で渡す */
  .reel__poster,.reel__video{transform:scale(var(--ms,1));transform-origin:50% 50%}
  .reel-bar{position:absolute;inset:0;z-index:6;display:block;margin:0;padding:0;pointer-events:none}
  .reel-cuts{position:absolute;left:0;right:0;bottom:0;display:flex;gap:4px;margin:0;padding:0}
  .reel-cut{flex:1 1 0;gap:0}
  .reel-cut__n,.reel-cut__t{display:none}
  .reel-cut__line{width:100%;height:2px;background:rgba(236,222,196,.12)}
  .reel-ctrl{position:absolute;right:0;bottom:8px;flex-direction:column;gap:0;margin:0;pointer-events:auto}
  .rc-btn{justify-content:center;width:44px;height:44px;min-height:44px;padding:0;gap:0;border-radius:50%}
  .rc-btn svg{width:20px;height:20px}
  .rc-btn .rc-label{display:none}
  /* 角度の読みは右上。
     「※映像はイメージです」は舞台の外＝進行線のすぐ下の左端に 12px で（監査2周目: 舞台の中だと回転中に砂時計の頭が重なり、9.9px で読みにくかった）。
     文字の列はその分だけ下げる（.hero__copy の padding-top）。
     「ドラッグで回す」の札は舞台の上端の中央（監査2周目: 商品の前面の中央に重ねない）。表示は約2.5秒（hero-reel.js の hintHideSm） */
  .stage__deg{right:14px;top:10px;bottom:auto;font-size:.86rem}
  .stage__note{left:var(--gutter);top:calc(100% + 4px);bottom:auto;font-size:.75rem;line-height:1.4;letter-spacing:.06em;color:var(--dim)}
  .hero__copy{padding-top:28px}   /* 注記の行（4px＋12px×1.4）の下から、小見出しまで約7px あける */
  .stage__status{top:34px;left:var(--gutter)}
  .stage__hint{top:8px;min-height:30px;padding:0 13px 0 10px;gap:8px;background:rgba(11,9,7,.5)}
}
/* 幅320〜380：CTA の文字（¥3,980で、一砂を迎える）が1行に収まるよう、余白と字間だけ詰める（切れさせない） */
@media (max-width:380px){
  .hero__buy .btn{padding:0 1em;gap:.5em;font-size:.98rem;letter-spacing:.04em}
}
/* 背の低い小さな画面（320×568 など）：注記の行を舞台の外に出した分、見出しと価格の段の間を少し詰めて CTA を画面内に保つ */
@media (max-width:380px) and (max-height:620px){
  .hero__copy{padding-top:24px}
  .hero__title{margin-top:4px}
  .hero__price{margin-top:9px}
  .hero__buy{margin-top:10px}
}

@media (prefers-reduced-motion:reduce){
  .js .hero__mark{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .hero.is-cue .hero__scroll-line i{animation:none}
  .hero__scroll-line i:nth-child(3){opacity:.9;transform:translateY(61px)}
  .reel__poster,.stage__hint{transition:none}
}

/* 最終確認（主）: アイブロウを仕組みの言葉（砂が落ちきるまで開かない…）に替えたので、幅340px以下だけ字間を詰めて1行に保つ（320×568でCTA上端 ≤ 508px を守る） */
@media (max-width:340px){.hero__eyebrow{letter-spacing:.1em;gap:8px}}