/* =========================================================
   AI研修LP — v6 ベースの仕上げ（2026-09-30）
   lp6.css / lp6-canva.css（v6）の上に重ねる、このページだけの差分をここに置く。
   1) ヒーロー：背景を広島の空撮動画に。暗い幕は掛けず、文字はガラスのパネルに載せて読ませる
   2) 画像を外した区画の組み直し：罫・余白・英字の大組み・ガラス・斜めの光の帯で成立させる
   3) 助成金の手続きタイムライン（依頼書 6-11 の図）
   4) 空き枠は hidden。hidden を外すと v6 の段組みに戻る（:has で切り替え）
   磨き込み（2026-09-30）
   - 色は lp6.css の :root のトークン（12色）とその透明度違いだけを参照する（直書きしない）
   - 紺の面は「研修の中身」と「最終CTA〜フッター」の2か所だけ。対面のカード・他のサービスは白の面に
   - 動画の下に続く地（概要バーの下半分）と SUMMARY は、動画の空から採った淡い青（--sky）でつなぐ
   ========================================================= */

/* ---------- 1) HERO（動画） ----------
   PC：動画の舞台の左上にガラスのパネル、右下に助成金のバッジと概要バー。
       左下の原爆ドームと右上の英字パネルは、どちらも文字で隠さない位置関係にする。
       概要バーは動画の下端をまたいで置き（下半分は淡い青の地）、ドームの足元を覆わない。 */
.hero--video {
  --hang: 56px;                                        /* 概要バーのうち、動画の下にはみ出す高さ */
  /* 動画が見える高さ。最初の画面の下に概要バーの下端まで収め、低い画面でもドームがパネルの下に出る高さを確保 */
  --stage: clamp(820px, calc(100vh - var(--hang) - 20px), 1400px);
  --focus: 50% 45%;                                    /* 動画と poster の object-position */
  /* 動画の下に続く地は、動画の空の色相から採った淡い青。SUMMARY まで同じ地でつなぐ（動画そのものには何も重ねない） */
  display: block; min-height: 0; padding-bottom: 0; background: var(--sky);
}
.hero--video .hero__bg {
  bottom: auto; height: var(--stage);
  /* poster と同じ絵を下地に敷く：動画の読み込み前・動きを減らす設定・JSなしでも同じ絵で止まる */
  background: var(--sky) url("../assets/img/hero-hiroshima-poster.webp") var(--focus) / cover no-repeat;
}
.hero--video .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus); animation: settle 2.6s var(--ease) both; }
.hero--video .hero__body {
  min-height: calc(var(--stage) + var(--hang));
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: calc(var(--hd-h) + 10px);
}
.hero--video .crumb {
  margin-bottom: 12px; opacity: 1; color: var(--ink-2);
  /* 映像の上に直接載る唯一の文字。細い白の縁取りだけ足す（暗くはしない） */
  text-shadow: 0 0 1px rgb(var(--white-ch) / .95), 0 0 10px rgb(var(--white-ch) / .9);
}
.hero--video .crumb a { color: var(--ink); }

/* 文字を載せるガラス。概要バー（v6）と同じ素材にそろえる */
.hero__glass {
  position: relative; width: min(640px, 100%);
  padding: clamp(22px, 3.4vh, 32px) clamp(24px, 2.6vw, 36px) clamp(24px, 3.6vh, 34px);
  border-radius: 24px; color: var(--ink);
  background: rgb(var(--white-ch) / .72);
  backdrop-filter: saturate(1.35) blur(22px); -webkit-backdrop-filter: saturate(1.35) blur(22px);
  border: 1px solid rgb(var(--white-ch) / .95); box-shadow: var(--shadow-lg);
}
/* 見出しは画面の高さにも比例させる（3行＋リード＋ボタンがドームの上で収まる大きさ）。
   英字ラベルからの間隔は全区画と同じ（--label-gap） */
.hero--video h1 { font-size: clamp(34px, min(3.8vw, 5.6vh), 54px); line-height: 1.32; margin-top: var(--label-gap); }
.hero--video .hero__lead { margin-top: 16px; max-width: none; font-size: clamp(15px, 1.1vw, 15.5px); line-height: 2; color: var(--ink-2); }
.hero--video .hero__cta { margin-top: 22px; }
.hero--video .badge { align-self: flex-end; margin-top: auto; margin-bottom: 14px; box-shadow: 0 10px 24px -18px rgb(var(--ink-ch) / .6); }
.hero--video .overview { align-self: stretch; margin-top: 0; }
/* 概要バー：「形式」の値が長いので列幅を中身に合わせ、1行に収めてバーを低く保つ（動画を覆う量を減らす）。
   上半分が映像にかかるので、ガラスを少し濃くし、10px の英字ラベルは一段濃い文字色に（実測 4.5:1 以上） */
@media (min-width: 1001px) {
  .hero--video .overview dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .78fr) minmax(0, 1.04fr) minmax(0, 1fr); background: rgb(var(--white-ch) / .86); }
  .hero--video .overview dt { color: var(--ink-2); }
}

/* 光の帯：映像の上では短く・薄くして、英字パネルとドームを避けて中央上だけに差し込む
   （v6 の登場アニメが opacity を 1 にするので、濃さは背景のアルファで下げる。白の光＋ブランド色の薄い層の2枚重ね） */
.hero--video .prism {
  left: 47%; bottom: 44%;
  background: linear-gradient(180deg, rgb(var(--c2-ch) / 0) 0%, rgb(var(--c2-ch) / .09) 45%, rgb(var(--c3-ch) / .035) 75%, rgb(var(--c3-ch) / 0) 100%),
              linear-gradient(180deg, rgb(var(--white-ch) / .34) 0%, rgb(var(--white-ch) / .19) 45%, rgb(var(--white-ch) / .09) 75%, rgb(var(--white-ch) / 0) 100%);
}

/* ヘッダー：映像の上にいる間だけ、ページ内リンクを薄いガラスの帯に載せる */
@media (min-width: 1081px) {
  .hd:not(.is-scrolled) .hd__nav {
    margin-left: auto; padding: 4px 22px; border-radius: 999px;
    background: rgb(var(--white-ch) / .62); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px);
    border: 1px solid rgb(var(--white-ch) / .85);
  }
}

/* タブレット・スマホ：動画はヘッダーの下に帯で置き、文字はその下の淡い青の地に組む（映像を文字で覆わない） */
@media (max-width: 1000px) {
  .hero--video { --band: max(280px, 56.25vw); --focus: 70% 50%; }
  .hero--video .hero__bg { position: relative; inset: auto; z-index: 0; height: var(--band); margin-top: var(--hd-h); }
  .hero--video .hero__body { min-height: 0; padding-top: 22px; padding-bottom: 8px; }
  .hero--video .crumb { text-shadow: none; margin-bottom: 20px; }
  .hero__glass { width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero--video h1 { font-size: var(--fs-hero); line-height: 1.4; margin-top: var(--label-gap); }
  .hero--video .hero__lead { margin-top: 20px; max-width: 34em; }
  .hero--video .hero__cta { margin-top: 28px; }
  .hero--video .badge { align-self: flex-start; margin-top: 26px; margin-bottom: 0; box-shadow: none; background: var(--white); border-color: var(--mist); }
  .hero--video .overview { margin-top: 20px; }
  .hero--video .prism { top: calc(var(--hd-h) + var(--band)); bottom: -12%; left: 64%; }
}
@media (max-width: 560px) { .hero--video { --band: 280px; } }

/* 動きを減らす設定：動画は出さず、同じ絵の poster（下地）で止める */
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__video { display: none; }
}

/* ---------- 2) 画像を外した区画 ---------- */

/* SUMMARY：動画の下の淡い青の地をここまで続ける（HTML で sec--sky）。
   英字ラベルは段落の1行目と文字の下端をそろえる（ラベルの形は全区画と同じ） */
.summary { align-items: baseline; }

/* METHOD：手元の写真を外し、特徴の3行だけで右列を組む */
.method__list { margin-top: 0; }

/* FORMAT：地図の画像を外し、英字を大きく組んで「対面／オンライン」の違いを見せる。
   紺の面を2か所に絞るため、対面のカードも白の面に。2枚は同じ素材（白・同じ影）の対にし、
   違いは英字の大組みと幅（対面 1.25：オンライン 1）だけで見せる（HTML の --dark は --light に、光の帯は外した） */
.format__card { min-height: clamp(250px, 23vw, 300px); justify-content: flex-end; }
.format__card--light { background: var(--white); box-shadow: var(--shadow); }
.format__card--light::before { content: none; }
.format__card p.en { order: -1; margin: 0 0 auto; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; line-height: 1; letter-spacing: 0; font-size: inherit; }
.format__card .en__big { font-family: var(--f-en); font-weight: 300; font-size: clamp(44px, 5.4vw, 76px); letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.format__card .en__sub { font-family: var(--f-en); font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.format__card h3 { margin-top: 36px; }
.format__card p:not(.en) { color: var(--ink-2); }
@media (max-width: 860px) { .format__card { min-height: 0; } .format__card h3 { margin-top: 28px; } }

/* FILM：横の空き枠（実写）を hidden にしている間は、動画の右を1本の文字の列にする
   （上にリード、下に図解の説明。リードの左端と説明の列の左端を同じ式でそろえる） */
#film { --fgap: clamp(32px, 4.5vw, 72px); }
.film:has(> .film__side[hidden]) { grid-template-columns: minmax(0, 1fr); }
.film:has(> .film__side[hidden]) .film__main {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 20px var(--fgap); align-items: end;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
@media (min-width: 861px) {
  #film:has(.film__side[hidden]) .split-head .lead { max-width: calc((100% - var(--fgap)) / 3.1); }
}
.film:has(> .film__side[hidden]) .film__main video { border-radius: var(--r); border: 1px solid var(--line-dark); }
.film:has(> .film__side[hidden]) .film__main figcaption {
  display: grid; gap: 12px; align-content: end; padding: 20px 0 4px; border-top: 1px solid var(--line-dark-2);
  font-size: 12.5px; line-height: 1.9; color: var(--on-dark-3);
}
.film:has(> .film__side[hidden]) .film__main figcaption span:first-child { font-size: 17px; font-weight: 500; color: var(--on-dark); line-height: 1.6; }
@media (max-width: 860px) {
  .film:has(> .film__side[hidden]) .film__main { grid-template-columns: 1fr; }
  .film:has(> .film__side[hidden]) .film__main figcaption { padding-top: 16px; }
  .film:has(> .film__side[hidden]) .film__main figcaption span:first-child { font-size: 15px; }
}

/* PROGRAM：「カリキュラムの例」の空き枠を hidden にしている間は、GOAL を横長に組む。
   GOAL は英字ラベル（.label）と同じ形。段落の1行目と文字の下端をそろえる */
.program-body:has(> [data-slot-group][hidden]) { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
.program-body:has(> [data-slot-group][hidden]) .aside-stack { position: static; gap: 14px; }
.program-body:has(> [data-slot-group][hidden]) .goal {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 64px); align-items: baseline;
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3.4vw, 44px);
}
.program-body:has(> [data-slot-group][hidden]) .goal p { margin-top: 0; font-size: 15px; line-height: 2.05; max-width: 48em; }
@media (max-width: 760px) {
  .program-body:has(> [data-slot-group][hidden]) .goal { grid-template-columns: 1fr; }
}

/* OUTCOME：4つの状態を、ブランドの青→紫→マゼンタが1本につながる線の上に並べる（写真なし）。
   線は4つの区間に同じ var(--grad) を 400% の幅で敷き、区間ごとにずらす（つなぐと1本のグラデーション） */
.states { position: relative; gap: 0; }
.state { position: relative; padding: 32px 26px 0 0; background: var(--grad) 0 0 / 400% 1.5px no-repeat; }
.state:nth-child(2) { background-position: 33.333% 0; }
.state:nth-child(3) { background-position: 66.667% 0; }
.state:nth-child(4) { background-position: 100% 0; }
/* 点の色は、その位置のグラデーションの色（2つ目・4つ目はブランド2色のちょうど中間） */
.state::before { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--s0); box-shadow: 0 0 0 4px rgb(var(--c2-ch) / .1); }
.state:nth-child(1) { --s0: var(--c1); }
.state:nth-child(2) { --s0: var(--c1); }
.state:nth-child(3) { --s0: var(--c2); }
.state:nth-child(4) { --s0: var(--c2); }
@supports (color: color-mix(in srgb, red, blue)) {
  .state:nth-child(2) { --s0: color-mix(in srgb, var(--c1), var(--c2)); }
  .state:nth-child(4) { --s0: color-mix(in srgb, var(--c2), var(--c3)); }
}
.state .n { margin-top: 0; }             /* 番号はマゼンタ（淡い青の地の上で 4.5:1 以上） */
.state h3 { margin-top: 6px; }
.state p { margin-top: 8px; }
@media (max-width: 720px) { .states { gap: 40px 0; } }
@media (max-width: 560px) {
  .states { grid-template-columns: 1fr; gap: 0; padding-left: 30px; }
  .states::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 30px; width: 1.5px; background: linear-gradient(180deg, var(--c1), var(--c2) 52%, var(--c3)); }
  .state { padding: 0 0 30px; background: none; }
  .state::before { top: 8px; left: -30px; }
}

/* DELIVERABLES：画面モックの背景画像を外し、白い面に組む。
   成果物の例のチップは単元番号（M09 など）を表示から外したので、左右の余白を同じにする */
.deliver { background: var(--white); box-shadow: var(--shadow); }
.deliver::before { content: none; }
.chips li { gap: 0; padding: 10px 16px; background: var(--sky); border-color: var(--mist); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* CLIENTS：街の写真を外し、白地の上にロゴを並べる。ロゴの画像は加工しない（色・切り抜き・順番はそのまま）。
   枠は全社同じ（高さ 92px・左右の余白 18px・淡い罫線）。ロゴの大きさは枠の側でそろえる：
   - 画像のロゴ：枠の内側の「幅いっぱい × 高さ 32px」に収める（最大幅・最大高さは全社同じ）
   - 文字だけのロゴ（SVG の中央に文字が1行、周りに大きな余白）：文字の高さ（インクの高さ）を 16px にそろえ、
     SVG の余白は枠の側で切る（object-fit: cover）。いちばん長いアパブロは枠の幅いっぱいまで
   有吉花店（data-optional）も同じ規則。外すときは li に hidden を付けるだけ */
#clients .logos li { height: 92px; padding: 0 18px; overflow: hidden; background: var(--white); border: 1px solid var(--mist); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#clients .logos img { width: 100%; height: auto; max-width: 100%; max-height: 32px; object-fit: contain; }
/* 縦長・正方形のロゴ（UP・CUOReLink・サンシャイングループ）は、横長の枠に高さを合わせると極端に小さくなるので、その3社だけ高さを広げる */
#clients .logos li.is-tall img { height: 78px; max-height: none; }
#clients .logos li.is-tall img[src$="/up.png"] { height: 56px; }   /* UP は線が太く色も濃いので、他の2社と同じ大きさだと目立ちすぎる。7割程度に抑える */
#clients .logos li.is-tall img[src$="/tsuda.png"] { height: 60px; }   /* 津田製作所は横に広い形なので、縦長の3社より低くして枠に収める */
/* 文字の高さ 16px ÷ SVG の高さに占める文字の割合（漢字 47%・UP 38%・aim 41.5%。Chrome で実測） */
#clients .logos img[src$="/ariyoshi.svg"],
#clients .logos img[src$="/sagara.svg"] { height: calc(16px / .47); max-height: none; object-fit: cover; }
#clients .logos img[src$="/up.svg"] { height: calc(16px / .38); max-height: none; object-fit: cover; }
#clients .logos img[src$="/aim.svg"] { height: calc(16px / .415); max-height: none; object-fit: cover; }
#clients .logos img[src$="/apablo.svg"] { height: 18.5px; max-height: none; object-fit: cover; }

/* OTHER SERVICES：写真を外し、白地＋線の枠のカードに（紺の面を減らす）。斜めの形（v6・カンプ01）は残す。
   線は clip-path に沿って描けないので、札そのものを罫線の色で塗り、内側を 1px 小さい白で重ねる。
   触れる・選ぶと線がブランドのグラデーションに変わる（キーボードでは線を 2px に） */
.svc a { color: var(--ink); background: var(--mist-2); min-height: clamp(196px, 16vw, 224px); }
.svc a::before { z-index: -2; opacity: 0; background: var(--grad-d); transition: opacity .4s var(--ease); }
.svc a::after {
  z-index: -1; opacity: 1; background: var(--white);
  clip-path: polygon(calc(11% + .8px) 1px, calc(100% - 1.2px) 1px, calc(89% - .8px) calc(100% - 1px), 1.2px calc(100% - 1px));
}
.svc a:hover::before, .svc a:focus-visible::before { opacity: 1; }
.svc a:focus-visible { outline: 0; }
.svc a:focus-visible::after { clip-path: polygon(calc(11% + 1.6px) 2px, calc(100% - 2.4px) 2px, calc(89% - 1.6px) calc(100% - 2px), 2.4px calc(100% - 2px)); }
.svc .en { color: var(--ink-3); }
.svc p { color: var(--ink-2); }
@media (max-width: 860px) {
  .svc a { min-height: 0; padding-block: 28px; overflow: hidden; }
  .svc a::after, .svc a:focus-visible::after { clip-path: none; inset: 1px; border-radius: 19px; }
  .svc a:focus-visible::after { inset: 2px; border-radius: 18px; }
}

/* CTA：夕景の写真を外し、紺の面に光の帯を残す */
.cta { background: var(--navy-2); }
.cta::before {
  background: radial-gradient(60% 90% at 100% 0%, rgb(var(--c1-ch) / .3), transparent 65%),
              radial-gradient(50% 80% at 0% 100%, rgb(var(--c3-ch) / .2), transparent 70%);
}
.cta .prism { mix-blend-mode: normal; opacity: .14; }

/* ---------- 3) 助成金の手続きタイムライン（研修実施日を起点に、1ヶ月＝同じ幅） ---------- */
.tl {
  --lo: -2; --span: 3.5;          /* 目盛りの範囲：-2〜+1.5ヶ月 */
  --name: 200px; --col-gap: 28px;
  margin-top: 16px; padding: clamp(24px, 3vw, 34px) clamp(20px, 3.2vw, 44px) clamp(22px, 2.6vw, 30px);
  border-radius: var(--r); background: var(--white); box-shadow: var(--shadow);
}
.tl__cap { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ink-2); }
.tl__cap::after { content: ""; flex: 1; height: 1px; background: var(--mist); }
.tl__chart { position: relative; margin-top: 22px; }
/* 研修実施日の縦線（起点） */
.tl__chart::before {
  content: ""; position: absolute; top: 6px; bottom: 0; width: 1.5px; transform: translateX(-50%);
  left: calc(var(--name) + var(--col-gap) + (100% - var(--name) - var(--col-gap)) * (0 - var(--lo)) / var(--span));
  background: linear-gradient(180deg, var(--c2), var(--c3)); opacity: .55;
}
.tl__scale { position: relative; height: 34px; margin-left: calc(var(--name) + var(--col-gap)); border-bottom: 1px solid var(--mist-2); }
.tl__tick {
  position: absolute; bottom: 10px; left: calc((var(--t) - var(--lo)) / var(--span) * 100%); transform: translateX(-50%);
  font-size: 11.5px; line-height: 1; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap;
}
.tl__tick::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 1px; height: 7px; background: var(--mist-2); }
.tl__tick--zero { font-weight: 500; color: var(--accent); background: var(--white); padding-inline: 6px; }
.tl__tick--zero::after { background: var(--c3); }
.tl__row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); column-gap: var(--col-gap); align-items: center; min-height: 60px; border-bottom: 1px solid var(--mist); }
.tl__row:last-child { border-bottom: 0; }
.tl__when { display: none; }
.tl__name { display: flex; align-items: center; gap: 12px; padding-block: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.tl__no { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--mist-2); font-family: var(--f-en); font-size: 11px; font-weight: 600; color: var(--c2); }
.tl__lane { position: relative; align-self: stretch; }
.tl__dot { position: absolute; top: 50%; left: calc((var(--t) - var(--lo)) / var(--span) * 100%); width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--white); border: 2px solid var(--c1); }
.tl__row--due .tl__dot { border-color: var(--c2); }
.tl__row--zero .tl__dot { width: 16px; height: 16px; border: 0; background: var(--grad-d); box-shadow: 0 0 0 5px rgb(var(--c3-ch) / .13); }
.tl__text {
  position: absolute; top: 50%; transform: translateY(-50%); left: calc((var(--t) - var(--lo)) / var(--span) * 100% + 16px);
  padding-inline: 4px; background: var(--white); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); white-space: nowrap;
}
.tl__row--span { min-height: 76px; }
.tl__bar {
  position: absolute; top: calc(50% + 12px); height: 6px; border-radius: 3px;
  left: calc((var(--t) - var(--lo)) / var(--span) * 100%); width: calc(var(--d) / var(--span) * 100%);
  /* 「程度」なので終わりはぼかす */
  background: linear-gradient(90deg, var(--c2), rgb(var(--c3-ch) / .9) 72%, rgb(var(--c3-ch) / 0));
}
.tl__row--span .tl__text { top: calc(50% - 16px); left: calc((var(--t) - var(--lo)) / var(--span) * 100% - 4px); }
.tl__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mist); font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }
/* 幅が狭いときは縦の時間軸に組み替える（名前→時期→説明の順に読む） */
@media (max-width: 860px) {
  .tl { --rail: 6px; }
  .tl__chart::before, .tl__scale { display: none; }
  .tl__rows { position: relative; padding-left: 30px; }
  .tl__rows::before { content: ""; position: absolute; left: var(--rail); top: 26px; bottom: 34px; width: 1px; background: var(--mist-2); }
  .tl__row { display: block; position: relative; min-height: 0; padding-block: 16px; }
  .tl__when { display: block; font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; color: var(--accent); font-weight: 500; }
  .tl__no { display: none; }                      /* 縦の線の点が順番を示すので番号は省く */
  .tl__name { padding-block: 2px 0; gap: 0; }
  .tl__lane { position: static; }
  .tl__dot { top: 19px; left: calc(var(--rail) - 30px); transform: translateX(-50%); }
  .tl__row--zero .tl__dot { top: 17px; }
  .tl__text, .tl__row--span .tl__text { position: static; transform: none; display: block; margin-top: 4px; padding: 0; background: none; white-space: normal; }
  .tl__row--span { min-height: 0; }
  .tl__bar { top: 20px; bottom: 16px; left: calc(var(--rail) - 30px); width: 4px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, var(--c2), rgb(var(--c3-ch) / 0)); }
}

/* 確認モード（URL に ?review=1 を付けたときだけ js が .review を付ける。公開時は出ない）：
   空き枠を出して v6 の段組みに戻し、【要確認】のロゴ（有吉花店）に点線の枠を付ける */
.review [data-optional] { outline: 2px dashed rgb(var(--c3-ch) / .55); outline-offset: 3px; }

/* ---------- 2026-09-30 紺の面を FILM から PROGRAM へ移す ----------
   数字（11 / 3 / 1）を紺の上で見せる。罫線・補足・GOAL を暗い面用に */
#program .stats { border-color: var(--line-dark-2); }
#program .stats > div + div { border-color: var(--line-dark-2); }
#program .stats .v { color: var(--on-dark); }
#program .stats .u { color: var(--on-dark-3); }
#program .stats .t { color: var(--on-dark-2); }
#program .goal { background: rgb(var(--white-ch) / .06); border: 1px solid var(--line-dark-2); box-shadow: none; }
#program .goal p { color: var(--on-dark-2); }
#program .goal .label { color: var(--on-dark-2); }