/* SANDLOCK LP — ヒーロー（暗い舞台＋映像リール）。持ち主: ヒーロー担当。動きは js/hero-reel.js（図鑑3-27 背景動画クロスフェード）と 1-4 見出し・2-4 リビール・8-3 CTA */
.hero{--reel-bg:#060201; /* 映像本来の黒（実測 6,2,1）に合わせた舞台色 */
  position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vh,56px) 0 clamp(76px,10vh,104px);overflow:clip;background:var(--ink)}
.hero__sprite{position:absolute}
/* 舞台：温かい黒に、真鍮のごく弱い光。映像の背後と足元にだけ置く */
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 58% at 68% 46%,rgba(211,172,106,.10),transparent 72%),
    radial-gradient(38% 46% at 4% 104%,var(--ember),transparent 70%),
    linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.hero__inner{width:100%;display:grid;grid-template-columns:minmax(0,clamp(420px,38vw,560px)) minmax(0,1fr);align-items:center;
  padding-left:max(var(--gutter),calc((100vw - var(--wrap))/2 - 40px));padding-right:0}

/* 左：文字 */
.hero__copy{position:relative;z-index:2;padding-right:calc(4.5vw + 12px);pointer-events:none}
.hero__copy>*{pointer-events:auto}
.hero__copy .hero__buy{pointer-events:none}
.hero__copy .hero__buy>*{pointer-events:auto}
.hero__brand{display:flex;align-items:center;gap:12px;margin:0 0 26px;color:var(--brass-hi)}
.hero__brand-name{font-family:var(--f-latin);font-weight:600;font-size:1.05rem;letter-spacing:.34em;color:var(--cream)}
.hero__h1{font-family:var(--f-display);font-weight:700;font-size:clamp(1.85rem,2.85vw,2.85rem);line-height:1.42;letter-spacing:.03em;margin-top:22px;padding-bottom:.12em;text-wrap:balance}
.hero__h1 em{font-style:normal}
.hero__sub{color:var(--muted);font-size:clamp(.95rem,1.25vw,1.05rem);line-height:2;max-width:30em;margin-top:22px}
.hero__buy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:clamp(26px,3.6vh,40px)}
.hero__chip{display:inline-flex;align-items:center;gap:12px;min-height:34px;padding:0 16px 0 14px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(10,7,5,.55);font-size:.95rem;letter-spacing:.06em;color:var(--cream)}
.hero__chip .numeral{font-family:var(--f-latin);font-weight:600;font-size:1.02rem;line-height:1.4}
.hero__chip-dot{width:6px;height:6px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 3px rgba(211,172,106,.18)}
.hero__note{font-size:.82rem;letter-spacing:.08em;color:var(--dim);margin-top:-2px}

/* 右：映像（16px の余白へ contain。切り抜かない）。額装＝真鍮の細い罫＋影 */
.hero__stage{position:relative;z-index:1;margin-left:-4.5vw;min-width:0}
.hero__stage .reel{min-height:min(72svh,700px)}
.reel{position:relative;width:100%;aspect-ratio:var(--reel-ar,1920 / 1080);border:0;border-radius:0;background:transparent;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;contain:layout paint}
.reel:focus-visible{outline:2px solid var(--brass-hi);outline-offset:4px}
.reel.is-live{cursor:grab}
.reel.is-live.is-grabbing{cursor:grabbing}
.reel__poster,.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%;mix-blend-mode:lighten;-webkit-user-drag:none;pointer-events:none}
.reel__poster{z-index:0;opacity:1;transition:opacity .3s linear}
.reel.is-live .reel__poster{opacity:0}
.reel__video{z-index:1;opacity:0;background:transparent}
.reel:not(.is-live) .reel__video{visibility:hidden}
/* 縁を舞台の黒へ溶かす（静止のビネット。動きはしない） */
.reel::after{display:none;content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 48px 40px var(--reel-bg)}

.reel__hint{position:absolute;z-index:5;left:50%;top:22px;bottom:auto;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;min-height:30px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(10,7,5,.72);color:var(--cream);font-size:.78rem;letter-spacing:.14em;white-space:nowrap;opacity:0;transition:opacity .9s var(--mp-ease);pointer-events:none}
.reel__hint svg{width:34px;height:14px;color:var(--brass)}
.reel.is-hint .reel__hint{opacity:1}
.reel__status{position:absolute;z-index:5;left:22px;top:18px;margin:0;padding:0 12px;min-height:26px;display:none;align-items:center;border-radius:999px;background:rgba(10,7,5,.74);border:1px solid var(--line);font-size:.75rem;letter-spacing:.1em;color:var(--muted);line-height:1.4}
.reel__status:not(:empty){display:inline-flex}
.reel__error{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:rgba(10,7,5,.78)}
.reel__error[hidden]{display:none}
.reel__error-msg{font-size:.92rem;letter-spacing:.06em;color:var(--cream);line-height:1.8;margin:0}
.reel__error-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* 操作：映像のすぐ下に、小さな線のアイコン＋テキスト */
.reel-ctrl{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin-top:10px;padding:0 4px}
.rc-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:1px solid transparent;border-radius:999px;font-size:.8rem;letter-spacing:.1em;color:var(--muted);transition:color var(--mp-dur-s),border-color var(--mp-dur-s),background var(--mp-dur-s)}
.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--solid{color:#1a1208;background:var(--brass);padding:0 22px;font-weight:700}
.rc-btn--solid:hover{color:#1a1208;background:var(--brass-hi);border-color:transparent}
.rc-btn.is-attn{color:var(--brass-hi);border-color:var(--line-strong)}
.reel-cuts{margin-left:auto;display:inline-flex;gap:6px;padding-right:8px}
.reel-cuts i{display:block;width:22px;height:2px;border-radius:2px;background:var(--line-strong);transition:background var(--mp-dur-m) var(--mp-ease)}
.reel-cuts i.is-on{background:var(--brass)}

/* 続きを読ませる誘い */
.hero__scroll{position:absolute;left:50%;bottom:clamp(14px,2.6vh,26px);transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:44px;min-height:44px;font-family:var(--f-body);font-size:.72rem;letter-spacing:.3em;color:var(--dim);transition:color var(--mp-dur-s)}
.hero__scroll:hover{color:var(--brass-hi)}
.hero__scroll-line{position:relative;display:block;width:1px;height:34px;background:var(--line-strong);overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--brass-hi);transform:translateY(-100%);animation:hero-drop 2.6s var(--mp-ease) infinite}
@keyframes hero-drop{0%{transform:translateY(-100%)}70%,100%{transform:translateY(300%)}}

@media (max-width:1100px) and (min-width:961px){
  .hero__inner{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
  .hero__stage{margin-left:-3vw}
}
/* 縦並び：映像が上、文字が下。スマホでもCTAが最初の画面に入るよう詰める */
@media (max-width:960px){
  .hero{justify-content:flex-start;min-height:100svh;padding:0 0 96px}
  .hero__inner{display:flex;flex-direction:column;align-items:stretch;padding:0}
  .hero__stage{order:-1;margin:0}
  .hero__stage .reel{min-height:0}
  .reel{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
  .reel__poster,.reel__video{object-fit:contain;object-position:50% 50%}
  .hero__brand{margin-bottom:14px}
  .hero__scroll{display:none}
  .hero{padding-bottom:40px}
  .reel:focus-visible{border-radius:0;outline-offset:-4px}
  .reel::after{box-shadow:inset 0 0 34px 28px var(--reel-bg)}
  .reel-ctrl{padding:0 calc(var(--gutter) - 10px);margin-top:4px}
  .hero__copy{padding:14px var(--gutter) 0;pointer-events:auto}
  .hero__copy .eyebrow{font-size:.74rem;letter-spacing:.28em}
  .hero__h1{font-size:clamp(1.62rem,6.6vw,2.4rem);margin-top:12px}
  .hero__sub{margin-top:14px;font-size:.9rem;line-height:1.85}
  .hero__buy{margin-top:20px;gap:14px;align-items:stretch}
  .hero__chip{align-self:flex-start}
  .hero__buy .btn{width:100%;min-height:62px;padding:0 1.6em}
  .hero__note{text-align:center;margin-top:0}
  .reel__hint{top:12px}
  .reel-ctrl{order:0}
  .reel__status{left:14px;top:12px}
}
@media (max-width:960px) and (min-width:641px){
  .hero__buy{align-items:flex-start}
  .hero__buy .btn{width:auto}
  .hero__note{text-align:left}
  .hero__copy{padding-top:26px}
}
@media (max-width:640px){
  .rc-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rc-btn{padding:0 12px}
  .reel-ctrl{justify-content:flex-end;margin-top:0}
}
@media (max-width:420px){
  .rc-btn{padding:0 10px 0 6px;gap:6px;font-size:.74rem;letter-spacing:.06em}
  .reel-cuts{display:none}
}
@media (max-height:640px) and (min-width:961px){ .hero__scroll{display:none} }

@media (prefers-reduced-motion:reduce){
  .hero__scroll-line::after{animation:none;transform:translateY(60%)}
  .reel__hint,.reel__poster{transition:none}
}

/* 画像の注記（製品イメージ） */
.hero__imgnote{margin:6px 0 0;font-size:.72rem;letter-spacing:.06em;color:var(--dim)}

@media (max-width:960px){.hero__imgnote{padding-inline:var(--gutter);margin-top:4px}}