/* ============================================================
   動画の世界（編集の帯と再生の枠）の見た目。
   例の出方：声の札が、再生の線に合わせて左から映る（切り替えの「ワイプ」）。札の上に秒の表示。
   流れの3つ：編集の帯の切れ端のように並び、順に色が入る。
   画面のイメージ：再生の枠の中に置き、下に再生の棒。
   ============================================================ */
.w-doga .hero__h1::after{content:"";display:block;width:min(100%,calc(var(--h1-col) * .8));height:14px;margin-top:16px;border-radius:3px;
  background:linear-gradient(90deg,#356E78 0 22%,transparent 22% 24%,#5A6170 24% 30%,transparent 30% 32%,#3F7F8A 32% 61%,transparent 61% 63%,#356E78 63% 100%)}
.w-doga .hero__eyebrow{letter-spacing:.14em}

.w-doga .toc__list a{position:relative;padding-left:14px}
.w-doga .toc__list a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#FF5A5A}

/* ---------- 声の札：再生の線で、左から映る ---------- */
.w-doga .vcard{max-width:min(100%,660px)}
.w-doga .vcard__in{border-radius:6px;padding-top:40px;box-shadow:0 0 0 6px #05040A,0 26px 60px rgba(0,0,0,.6)}
.w-doga .vcard__in::before{content:"00:00:12";position:absolute;left:16px;top:12px;font:700 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#565066}
.w-doga .scene:nth-of-type(2) .vcard__in::before{content:"00:00:34"}
.w-doga .scene:nth-of-type(3) .vcard__in::before{content:"00:00:15"}
.w-doga .scene:nth-of-type(4) .vcard__in::before{content:"00:01:02"}
.w-doga .vcard__in::after{content:"";position:absolute;right:16px;top:12px;width:10px;height:10px;border-radius:50%;background:#FF5A5A;
  box-shadow:0 0 0 4px rgba(255,90,90,.18)}
.w-doga .vcard__code{padding:2px 10px;border-radius:3px;background:#17141F;color:#5CC8D6;font-size:13px;letter-spacing:.08em}
.w-doga .vcard__voice .q{color:#9B8CF2}
html.lp-on.w-doga .vcard{opacity:1;transform:none}
html.lp-on.w-doga .vcard__in{clip-path:inset(-8px calc((1 - var(--eo,1)) * 100% - 8px) -8px -8px)}
.w-doga .vcard::after{content:"";position:absolute;top:-14px;bottom:-14px;left:calc(var(--eo,1) * 100%);width:2px;background:#FF5A5A;opacity:0;
  box-shadow:0 0 12px #FF5A5A}
html.lp-on.w-doga .vcard::after{opacity:calc(1 - var(--e2,1))}

.w-doga .scene__title::before{content:"";display:inline-block;width:0;height:0;margin-right:12px;vertical-align:.04em;
  border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.5em solid #5CC8D6}

/* ---------- 流れ：編集の帯の切れ端 ---------- */
.w-doga .flow__list{gap:6px}
.w-doga .flow__list li{border:0;border-radius:4px;background:#22303A;border-left:5px solid #5CC8D6}
.w-doga .flow__list li:nth-child(2){background:#2A2540;border-left-color:#9B8CF2}
.w-doga .flow__list li:nth-child(3){background:#3A2C22;border-left-color:#F2A65A}
.w-doga .flow__list li + li::before{display:none}
.w-doga .flow__n{background:transparent;border:1.5px solid currentColor;color:#F2F0F7}
html.lp-on.w-doga .flow__list li{opacity:calc(.25 + .75 * var(--r,1));transform:translate3d(calc((1 - var(--r,1)) * 40px),0,0)}

/* ---------- 画面のイメージ：再生の枠 ---------- */
.w-doga .mock__body{border-radius:6px;box-shadow:0 0 0 6px #05040A,0 26px 60px rgba(0,0,0,.6)}
.w-doga .mock__cap{position:relative;padding-top:14px}
.w-doga .mock__cap::before{content:"";position:absolute;left:0;right:0;top:2px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#5CC8D6 0 calc(var(--m,1) * 100%),rgba(255,255,255,.18) 0)}
html.lp-on.w-doga .mock{opacity:var(--m0,1);transform:scale(calc(.96 + .04 * var(--m0,1)))}
.w-doga .scene__more{margin-top:-6px}