/* 映像と制作例を同じ固定枠で重ね、CTA・フォーム・見出しは常に本物のHTMLを保つ。 */
.hero-stage { position: relative; isolation: isolate; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 45px #24506317; }
.hero-final { box-shadow: none; }
/* 映像の背景色（#eef5f6）と同じ色で余白を埋め、縦長の枠でも画面の文字を切らずに全体を見せる。 */
.hero-film { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #eef5f6; pointer-events: none; opacity: var(--film-opacity, 1); }
.hero-film__video { width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* 映像の進行に合わせた字幕。映像の右下は字幕用に空けてある。 */
.hero-film__captions { position: absolute; right: 32px; bottom: 26px; width: min(44%, 500px); display: grid; justify-items: end; text-align: right; color: #142d3f; }
.hero-cap { grid-area: 1 / 1; margin: 0; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.45; font-weight: 700; letter-spacing: -.02em; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.hero-cap span { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .16em; font-weight: 700; color: #07566f; }
.hero-film__disclosure { grid-area: 2 / 1; margin-top: 6px; font-size: 11px; color: #425767; transition: opacity .35s; }
[data-phase="intro"] .hero-cap--intro,
[data-phase="build"][data-build-step="photo"] .hero-cap--photo,
[data-phase="build"][data-build-step="wording"] .hero-cap--wording { opacity: 1; transform: none; transition-duration: .35s; transition-delay: .2s; }
[data-phase="settle"] .hero-film__disclosure { opacity: 0; }
.hero-video__controls { position: absolute; z-index: 2; inset: 12px 12px auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: white; }
.hero-video__time { font-size: 10px; border-radius: 20px; background: #122934c9; padding: 4px 9px; }
.hero-video__skip { border: 1px solid #ffffff96; background: #122934e8; color: white; font: inherit; font-size: 11px; min-height: 44px; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.hero-video__skip:hover { background: #086a86; }
.hero-video__progress { position: absolute; z-index: 2; inset: auto 0 0; height: 3px; background: #08546a33; }
.hero-video__progress>span { display: block; height: 100%; background: #086a86; transform: scaleX(var(--film-progress,0)); transform-origin: left; }
.hero-preview__footer { display: flex; gap: 12px; align-items: start; }
.hero-preview__footer .sample-preview__note { flex: 1; }
.hero-video__replay { flex: 0 0 auto; margin-top: 12px; border: 0; border-bottom: 1px solid #9bafb9; padding: 3px 0; font: inherit; font-size: 11px; color: var(--accent-ink); background: transparent; cursor: pointer; }
@media (max-width: 740px) {
  .sample-hero__grid > .sample-preview { order: -1; }
  .hero-stage { min-height: 280px; }
  .hero-final { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cap, .hero-film__disclosure, [data-phase] .hero-cap { transition: none; }
}

/* 前半はヒーローいっぱいに見せ、11秒から実ページの制作例位置へ引いて戻す。 */
.sample-hero { position: relative; isolation: isolate; }
.sample-hero__grid { opacity: var(--page-reveal, 1); }
.hero-film--expanded { z-index: 4; inset: auto; left: var(--film-left); top: var(--film-top); width: var(--film-width); height: var(--film-height); border-radius: 16px; box-shadow: 0 16px 45px #163b3829; }
.sample-hero>.hero-video__controls { z-index: 6; left: calc(var(--film-left) + 15px); top: calc(var(--film-top) + 14px); right: auto; width: calc(var(--film-width) - 30px); }
.sample-hero>.hero-video__progress { z-index: 6; left: var(--film-left); top: calc(var(--film-top) + var(--film-height) - 3px); bottom: auto; right: auto; width: var(--film-width); }
.hero-intro-cta { position: absolute; z-index: 6; left: calc(var(--film-left) + 24px); top: calc(var(--film-top) + var(--film-height) - 79px); width: 315px; max-width: calc(var(--film-width) - 48px); padding: 12px 17px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 15px; border: 1px solid #a1d3df; box-shadow: 0 8px 24px #092f4566; opacity: var(--intro-cta-opacity,1); }
.hero-intro-cta small { flex: 0 0 100%; font-size: 8px; font-weight: 500; }
/* 引いて戻る間は字幕を消し、制作例へ自然につなぐ。 */
[data-phase="settle"] .hero-cap { opacity: 0; }
@media (max-width:740px) {
  .hero-intro-cta { font-size: 14px; left: calc(var(--film-left) + 16px); max-width: calc(var(--film-width) - 32px); }
  /* 縦長の枠では映像が中央の帯になるため、字幕は映像のすぐ下・CTAの上に置く。 */
  .hero-film--expanded .hero-film__captions { left: 16px; right: 16px; bottom: auto; top: calc(50% + var(--film-width) * .28125 + 12px); width: auto; justify-items: center; text-align: center; }
  .hero-cap { font-size: 17px; }
  .hero-cap span { font-size: 10px; }
  .hero-film__disclosure { font-size: 10px; margin-top: 4px; }
}