/* 研修動画（SD代行の新人研修。/training/）。apps/training/templates/training/player.html・static/training/video.js と組。
   manabi-library の static/css/video.css を写して、研修動画の画面で使わない規則（申込のフォーム・BOOK のタブ・ギフト・地図・
   志望理由書・動き is-motion・縦の 3:4 の舞台 is-p34・?render=1 など）を外し、色を SD代行 にした（2026-11-01）。
   🚨 色は SD代行のサイトの決まり（~/sd-garage-web の CLAUDE.md）: 白地に紺（#0f2747）・押すところは赤（#dc2f38→#b3161f）・字は白・
      オレンジはロゴだけ。年齢層が高いので字は読みやすく（押すものは高さ 44px 以上）。
   🚨 舞台（.vd-stage）は 1280×720 の固定の大きさで描き、JS が枠の幅に合わせて縮める。舞台の中の大きさは px で書く。
   🚨 動き（a-up / a-pop）は、場面が .is-on になったときに始まる。 */

:root {
  --p: #1d4f91;
  --deep: #0f2747;
  --ink: #1f2d3d;
  --muted: #5b6b7b;
  --tint: #e8f0fa;
  --yellow: #ffd23f;
  --edge: #e3eaf1;
  --primary: #1d4f91;
  --primary-dark: #0f2747;
  /* 押すところ（SD代行のサイトの --d-cta と同じ赤） */
  --cta: linear-gradient(135deg, #dc2f38 0%, #c8202a 55%, #b3161f 100%);
  --cta-flat: #c8202a;
  --cta-dark: #a3161f;
  --cta-sh: rgba(179, 22, 31, .32);
  --text: #333;
  --line: #dde4e9;
  --border: #ccd5dd;
  --shadow: 0 1px 2px rgba(16, 42, 67, .06), 0 4px 16px rgba(16, 42, 67, .06);
  --shadow-hover: 0 2px 6px rgba(16, 42, 67, .10), 0 12px 28px rgba(16, 42, 67, .12);
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body.vd-body {
  background: #fff; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.vd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- ページの頭（ロゴ）。固定（sticky）。高さ スマホ 44px・PC 50px（manabi-library の まるわかりVIDEO と同じ） ---- */
.vd-top { position: sticky; top: 0; z-index: 70; background: #fff; }
.vd-top-bar { box-sizing: border-box; height: 50px; border-bottom: 1px solid #e5eaf0; }
.vd-top-in { box-sizing: border-box; max-width: 1112px; height: 100%; margin: 0 auto; padding: 0 16px;
             display: flex; align-items: center; gap: 12px; }
/* 帯（.vd-top-bar）の無いヘッダー（お子様向け・申込のあと・受験相談のあと・/tel/・/line/ など）も、帯と同じ高さと下線に。
   2026-10-24 本人「上のヘッダーのロゴが余白がなくておかしいから、なおしておいて」（10/23 326f878 で .vd-top-in の上下の余白を帯に移したとき、
   帯の無いページはロゴが上にくっついていた）。中身の左右は .vd-top-in の最大幅（1112px）にそろえる */
.vd-top > .vd-top-in { height: 50px; max-width: none; padding: 0 max(16px, calc((100% - 1112px) / 2 + 16px)); border-bottom: 1px solid #e5eaf0; }
@media (max-width: 760px) { .vd-top > .vd-top-in { height: 44px; } }
.vd-logo { flex: none; display: block; line-height: 0; }
.vd-logo img { display: block; height: 24px; width: auto; }
.vd-top-tag { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--deep);
              background: var(--tint); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
html { scroll-padding-top: 112px; }
@media (max-width: 760px) { .vd-top-bar { height: 44px; } html { scroll-padding-top: 102px; } }      /* スマホは BOOK と同じ 44px（reader.css の --rv-bar） */
/* 入会申込のページの札はスタッフ用の隠しコマンドのボタン（video.js）。押せる見た目にしない */
button.vd-top-tag { border: 0; font-family: inherit; line-height: normal; cursor: default; -webkit-tap-highlight-color: transparent; }
button.vd-top-tag:focus { outline: none; }

/* スタッフ用のポップアップ（2026-09-29 本人「スタッフが使うための隠しコマンド」） */
.vd-staff { border: 0; border-radius: 14px; padding: 22px 22px 18px; width: min(360px, calc(100vw - 32px));
            box-shadow: 0 16px 48px rgba(16, 42, 67, .25); color: var(--ink); }
.vd-staff::backdrop { background: rgba(15, 23, 32, .45); }
.vd-staff-t { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--deep); }
/* 欄ごと（選択肢のリセット／スタッフ用テストモード）。2026-10-17 */
.vd-staff-sec { margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--edge); }
.vd-staff-sec:first-of-type { padding-top: 0; border-top: 0; }
.vd-staff-h { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.vd-staff-s { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #334155; }
.vd-staff-b { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-staff-go, .vd-staff-x { font: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.vd-staff-go { border: 0; background: var(--p); color: #fff; cursor: pointer; }
.vd-staff-go svg { width: 16px; height: 16px; margin: 0 6px -3px 0; }
.vd-reset { -webkit-tap-highlight-color: transparent; }
.vd-reset.is-done { background: #13795b; }
.vd-staff-x { border: 1px solid var(--edge); background: #fff; color: #334155; }

.vd { max-width: 1112px; margin: 0 auto; padding: 22px 16px 48px; }
.vd-head { padding: 0 2px 16px; min-width: 0; }
.vd-title { margin: 0; font-size: 24px; line-height: 1.45; font-weight: 800; color: var(--ink);
            word-break: auto-phrase; }     /* 見出しは区切りごとに折り返す（scenes.py の heading） */
.vd-lead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--muted);
           word-break: auto-phrase; line-break: strict; }

/* ---- 枠と舞台 ---- */
.vd-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
            border-radius: 14px; background: #fff; border: 1px solid var(--edge);
            box-shadow: 0 12px 36px rgba(16, 42, 67, .10); }
.vd-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden;
            transform-origin: 0 0; color: var(--ink);
            background: linear-gradient(180deg, #f2f6fb 0%, #ffffff 58%, #f5f8fc 100%); }
.vd-brand { position: absolute; right: 44px; top: 30px; z-index: 3; line-height: 0; }
.vd-brand img { display: block; height: 36px; width: auto; }

/* ---- 場面 ---- */
.sc { position: absolute; inset: 0; visibility: hidden; opacity: 0;
      display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 52px; align-items: center;
      padding: 96px 80px 150px 70px; }
.sc.is-on { visibility: visible; opacity: 1; }
.sc-chip { position: absolute; left: 70px; top: 30px; font-size: 20px; font-weight: 800;
           color: var(--p); background: var(--tint); padding: 7px 18px; border-radius: 999px; }
.sc-title { margin: 0 0 26px; font-size: 44px; line-height: 1.32; font-weight: 900;
            letter-spacing: .01em; color: var(--ink); }
.sc-note { margin: 16px 0 0; font-size: 21px; line-height: 1.5; color: var(--muted); }
/* 文字の多い場面（scenes.py の "dense": True）。条件の一覧と同じくらいの大きさに詰める
   （2026-09-27 赤入れで要点・補足が増え、字幕の下にもぐった） */
.sc.is-dense .sc-title { font-size: 38px; margin-bottom: 16px; }
.sc.is-dense .sc-note { font-size: 18px; line-height: 1.45; margin-top: 8px; }
/* 条件の一覧（list / ng）も詰める（2026-09-29 字幕が3行になり、返金保証の条件の注記に重なった） */
.sc.is-dense.sc-list .sc-title, .sc.is-dense.sc-ng .sc-title { font-size: 34px; margin-bottom: 14px; }
.sc.is-dense .sc-items { gap: 8px; }
.sc.is-dense .sc-items li { font-size: 21px; padding: 8px 16px; }
.sc.is-dense.sc-list .sc-note, .sc.is-dense.sc-ng .sc-note { font-size: 17px; margin-top: 8px; }
.sc-summary { display: block; padding: 92px 72px 150px; }   /* 2026-09-29 項目が長くなったので左右を詰めた（110 → 72px） */
.sc-summary .sc-title { font-size: 42px; margin-bottom: 22px; }
.sc-check { list-style: none; margin: 0; padding: 0;
            display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; }
.sc-check li { display: flex; align-items: center; gap: 12px; font-size: 22.5px; font-weight: 700;
               line-height: 1.3; color: #243447; background: #fff; border: 2px solid #dfe7f2;
               border-radius: 14px; padding: 12px 16px; min-height: 64px; }
.sc-check svg { flex: none; width: 32px; height: 32px; }
/* 項目が奇数で最後が1つだけ右に余るときは、横いっぱいに（2026-10-19 11項目になり、長い項目が2行に折れて字幕に潜った） */
.sc-check li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 表紙（番号なし）。舞台の右上のロゴは出さない（真ん中に大きく出すので） */
.sc.sc-cover { display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 26px; padding: 40px 80px 150px; text-align: center; }
.sc-cover-logo { display: block; height: 76px; width: auto; }
.sc-cover .sc-title { margin: 0; font-size: 78px; line-height: 1.22; letter-spacing: .02em; }
.sc-cover-sub { margin: 0; font-size: 28px; font-weight: 700; color: var(--muted); }
.vd-stage:has(.sc-cover.is-on) .vd-brand { visibility: hidden; }

/* 条件の一覧（list）・認められない例（ng）。絵を置かず、横いっぱいに並べる */
.sc.sc-list, .sc.sc-ng { display: block; padding: 84px 96px 150px; }
.sc-list .sc-title, .sc-ng .sc-title { font-size: 38px; margin-bottom: 18px; }
.sc-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-items li { display: flex; align-items: flex-start; gap: 14px; padding: 10px 18px;
               font-size: 23px; line-height: 1.42; font-weight: 700; color: #243447;
               background: #fff; border: 2px solid #dfe7f2; border-radius: 14px; }
.sc-items .num { flex: none; width: 34px; height: 34px; margin-top: 0; border-radius: 50%;
                 display: inline-flex; align-items: center; justify-content: center;
                 background: var(--p); color: #fff; font-size: 19px; font-weight: 900; }
.sc-ng .sc-items li { background: #fdf1f2; border-color: #f5c6c9; }
.sc-items svg { flex: none; width: 32px; height: 32px; margin-top: 1px; }
.sc-list .sc-note, .sc-ng .sc-note { margin-top: 12px; font-size: 19px; }

/* 全額返金保証の条件（flow）: 4枚のカードを起きる順に（2026-09-29 本人「もうちょいビジュアルでわかりやすい表記に」） */
.sc.sc-flow { display: block; padding: 80px 84px 150px; }
.sc-flow .sc-title { font-size: 38px; margin-bottom: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sc-badge { font-size: 20px; font-weight: 800; color: #fff; background: #dc2f38; padding: 6px 16px; border-radius: 999px;
            letter-spacing: .02em; }
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
               background: #fff; border: 2px solid #c9d7ea; border-radius: 18px; padding: 22px 14px 16px; }
.sc-steps li + li::before { content: ""; position: absolute; left: -17px; top: 50%; margin-top: -9px;
                            border: 9px solid transparent; border-left: 11px solid #9db6d9; }
.sc-steps-no { position: absolute; top: -15px; left: 50%; margin-left: -15px; width: 30px; height: 30px; border-radius: 50%;
               background: var(--p); color: #fff; font-size: 17px; font-weight: 900;
               display: flex; align-items: center; justify-content: center; }
.sc-steps-ic { width: 54px; height: 54px; flex: none; }
.sc-steps-h { font-size: 21px; line-height: 1.3; font-weight: 900; color: var(--deep); }
.sc-steps-t { font-size: 15.5px; line-height: 1.5; font-weight: 600; color: #475569; }
.sc-flow .sc-note { margin-top: 10px; font-size: 17px; }
.sc-flow .sc-steps + .sc-note { margin-top: 18px; }

/* 🚨 日本語を文節で折り返す（「申／請」「大切なこ／と」のような切れ方をさせない）。
   見出しは台本の中で改行の場所も決めてある（scenes.py の title の改行） */
.sc-title, .sc-note, .sc-check li, .sc-items li, .sc-cover-sub, .vd-sub span, .vd-cap-out, .sc-steps-h, .sc-steps-t {
  word-break: auto-phrase; line-break: strict; }

/* ---- 字幕 ---- */
.vd-sub { position: absolute; left: 60px; right: 60px; bottom: 28px; z-index: 5; text-align: center; }
/* 字の大きさ 2026-09-29 本人「下に出る黒背景の字幕は少し文字を小さくして」で 32 → 29px（縦長は 33 → 30px） */
.vd-sub span { display: inline-block; max-width: 100%; padding: 11px 26px; border-radius: 14px;
               background: rgba(15, 23, 32, .84); color: #fff;
               font-size: 29px; line-height: 1.45; font-weight: 700; }
.vd-sub span:empty { display: none; }

/* ---- 動き（場面が .is-on になったら始まる） ---- */
@keyframes vdUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vdPop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); }
                   100% { opacity: 1; transform: scale(1); } }

.sc .a-up, .sc .a-pop { opacity: 0; }
.sc.is-on .a-up { animation: vdUp .6s cubic-bezier(.2, .7, .2, 1) both; }
.sc.is-on .a-pop { animation: vdPop .6s cubic-bezier(.2, .7, .2, 1) both; }

.sc.is-on .d1 { animation-delay: .15s; }
.sc.is-on .d2 { animation-delay: .35s; }
.sc.is-on .d3 { animation-delay: .55s; }
.sc.is-on .d4 { animation-delay: .75s; }
.sc.is-on .d5 { animation-delay: .95s; }
.sc.is-on .d6 { animation-delay: 1.15s; }
.sc.is-on .d7 { animation-delay: 1.35s; }
.sc.is-on .d8 { animation-delay: 1.55s; }
.sc.is-on .d9 { animation-delay: 1.75s; }
.sc.is-on .d10 { animation-delay: 1.95s; }
/* まとめのチェックは10項目で d2〜d11 を使う（d11 が無くて10個目だけ先に出ていた。2026-09-28 本人「アニメーションを見直して」）。
   チェックの「カチッ」（video.js の SFX.checks）と同じ 0.2 秒おき */
.sc.is-on .d11 { animation-delay: 2.15s; }
.sc.is-on .d12 { animation-delay: 2.35s; }

/* ---- 再生ボタン（最初の1回） ---- */
.vd-start { position: absolute; inset: 0; z-index: 10; border: 0; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
            background: rgba(255, 255, 255, .72); color: var(--ink); font-family: inherit;
            -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vd-start[hidden] { display: none; }
.vd-start-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--p); color: #fff;
               display: flex; align-items: center; justify-content: center;
               box-shadow: 0 10px 30px rgba(29, 79, 145, .35); }
.vd-start-ic svg { width: 44px; height: 44px; margin-left: 6px; }
.vd-start-t { font-size: 20px; font-weight: 800; }
.vd-start-n { font-size: 14px; color: var(--muted); }

/* ---- 続きから見る（受験相談の動画。開き直したとき。video.js の resumePoint）---- */
.vd-resume { position: absolute; inset: 0; z-index: 10; padding: 16px; text-align: center;
             display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
             background: rgba(255, 255, 255, .86); color: var(--ink);
             -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vd-resume[hidden] { display: none; }
.vd-resume-t { margin: 0; font-size: 24px; font-weight: 900; }
.vd-resume-s { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); word-break: auto-phrase; }
.vd-resume-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; border: 0; cursor: pointer;
                padding: 13px 30px 13px 24px; border-radius: 999px; background: var(--p); color: #fff; font: inherit;
                font-size: 17px; font-weight: 800; box-shadow: 0 8px 22px rgba(29, 79, 145, .3); }
.vd-resume-go:hover { background: var(--primary-dark); }
.vd-resume-go svg { width: 22px; height: 22px; }
.vd-resume-re { border: 0; background: none; padding: 4px 8px; cursor: pointer; font: inherit;
                font-size: 13.5px; color: var(--muted); text-decoration: underline; }

/* ---- 終わったとき（入会申込のページだけ）：下のフォームへ ---- */
.vd-end { position: absolute; inset: 0; z-index: 9; padding: 16px; text-align: center;
          display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
          background: rgba(255, 255, 255, .9); color: var(--ink);
          -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vd-end-t { margin: 0; font-size: 26px; font-weight: 900; }
.vd-end-s { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); word-break: auto-phrase; }
.vd-end-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
             padding: 13px 26px 13px 30px; border-radius: 999px; background: var(--p); color: #fff;
             font-size: 16px; font-weight: 800; text-decoration: none;
             box-shadow: 0 8px 22px rgba(29, 79, 145, .3); }
.vd-end-go:hover { background: var(--primary-dark); }
.vd-end > [hidden] { display: none; }   /* 終盤の分かれ道で出し分ける字（data-end）。.vd-end-go の inline-flex に負けないように */
.vd-end-go svg { width: 22px; height: 22px; animation: vdBob 1.4s ease-in-out infinite; }
.vd-end-re { border: 0; background: none; padding: 4px 8px; cursor: pointer; font: inherit;
             font-size: 13.5px; color: var(--muted); text-decoration: underline; }
@keyframes vdBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---- 操作 ---- */
.vd-cap-out { display: none; }
.vd-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 12px; min-width: 0; }
.vd-btn { flex: none; width: 42px; height: 42px; border: 0; border-radius: 10px; cursor: pointer;
          background: #f1f5f9; color: #334155; display: inline-flex; align-items: center; justify-content: center; }
.vd-btn:hover { background: #e2e8f0; }
.vd-btn svg { width: 22px; height: 22px; }
/* 音のオン・オフ（操作の列の右端。2026-10-23 本人）。［選び直す］が出ているときは、その右隣（選び直すが左に出る）。選び直すが無いときは右端に寄せる */
.vd-sound { margin-left: 0; }
.vd-redo[hidden] + .vd-sound { margin-left: auto; }
.vd-sound .ic-off { display: none; }
.vd-sound.is-off .ic-on { display: none; }
.vd-sound.is-off .ic-off { display: block; }
.vd-sound.is-off { background: #fdeced; color: #a3161f; }
/* 音量のつまみ（GDゼミ。2026-10-30 本人「GDゼミの動画、音量の調整ができないから」）。音のボタンの右隣（video.js の setVolume） */
.vd-vol { flex: none; width: 96px; height: 42px; margin: 0; accent-color: var(--p); cursor: pointer; background: transparent; }
.vd-play { width: 52px; background: var(--p); color: #fff; }
.vd-play:hover { background: var(--primary-dark); }
.vd-play .ic-pause { display: none; }
.vd.is-playing .vd-play .ic-play { display: none; }
.vd.is-playing .vd-play .ic-pause { display: block; }
.vd-track { position: relative; flex: 1; min-width: 60px; height: 10px; border-radius: 999px;
            background: #e2e8f0; cursor: pointer; }
/* 見たところまで（ここより先へは進めない。2026-09-29 本人「一度見たところ以外は飛ばして見られないようにして」） */
.vd-seen { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #c5d4ea; }
.vd-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--p); }

.vd-chapters { list-style: none; margin: 16px 0 0; padding: 0;
               display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.vd-chapters button { width: 100%; text-align: left; border: 1px solid var(--edge); border-radius: 10px;
                      background: #fff; color: #334155; font: inherit; font-size: 13.5px; font-weight: 600;
                      padding: 9px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.vd-chapters button:hover { border-color: var(--p); }
.vd-chapters .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #eef3f7; color: #475569;
                  font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.vd-chapters button.is-current { border-color: var(--p); background: var(--tint); color: var(--deep); }
.vd-chapters button.is-current .n { background: var(--p); color: #fff; }
/* まだ見ていないセクション（押しても進まない） */
.vd-chapters button.is-locked { color: #94a3b8; background: #f8fafc; cursor: not-allowed; }
.vd-chapters button.is-locked:hover { border-color: var(--edge); }
.vd-chapters button.is-locked .n { background: #f1f5f9; color: #94a3b8; }


/* 全画面：舞台を画面いっぱいに（縦横比は保つ） */
.vd.is-fs { max-width: none; padding: 0; height: 100vh; display: flex; flex-direction: column;
            justify-content: center; background: #fff; }
.vd.is-fs .vd-head, .vd.is-fs .vd-chapters, .vd.is-fs .vd-cap-out { display: none; }
.vd.is-fs .vd-frame { border-radius: 0; border: 0; box-shadow: none; max-height: calc(100vh - 60px);
                      aspect-ratio: 16 / 9; width: min(100vw, calc((100vh - 60px) * 16 / 9)); margin: 0 auto; }
.vd.is-fs .vd-ctrl { width: min(100vw, 1180px); margin: 8px auto; padding: 0 12px; }

.vd-foot { border-top: 1px solid var(--edge); padding: 22px 16px 28px; text-align: center; line-height: 0; }
.vd-foot img { height: 28px; width: auto; opacity: .85; }

/* スマホ（縦）：舞台の中の字幕は小さすぎるので、舞台の下に大きく出す */
@media (max-width: 719px) {
  .vd { padding: 16px 12px 36px; }
  .vd-title { font-size: 19px; }
  .vd-lead { font-size: 13.5px; }
  .vd-frame { border-radius: 10px; }
  .vd:not(.is-fs) .vd-sub { display: none; }
  .vd:not(.is-fs) .vd-cap-out { display: block; min-height: 4.5em; margin: 12px 0 0; padding: 10px 12px;
                                border-radius: 10px; background: #f5f8fa;
                                font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--ink); }
  .vd-btn { width: 38px; height: 38px; }
  .vd-play { width: 46px; }
  /* 目次は1列（2026-10-09 本人「スマホの場合、チャプターのやつは2カラムにしないで1カラムに並べて」） */
  .vd-chapters { grid-template-columns: 1fr; }
  .vd-end { gap: 6px; padding: 10px; }
  .vd-end-t { font-size: 17px; }
  .vd-end-s { font-size: 12px; }
  .vd-end-go { margin-top: 2px; padding: 8px 16px 8px 20px; font-size: 14px; }
  .vd-end-go svg { width: 18px; height: 18px; }
  .vd-end-re { font-size: 12px; padding: 0 8px; }
  .vd-resume { gap: 6px; padding: 10px; }
  .vd-resume-t { font-size: 17px; }
  .vd-resume-s { font-size: 12px; }
  .vd-resume-go { margin-top: 2px; padding: 8px 20px 8px 16px; font-size: 14px; }
  .vd-resume-go svg { width: 18px; height: 18px; }
  .vd-resume-re { font-size: 12px; padding: 0 8px; }
}

/* ================================================================
   スマホ対応（2026-09-26 本人「全体的にスマホでも見やすいように、スマホ対応させておいて
   縦でも横でもキレイに表示できるようにしてほしい」）
   🚨 縦のスマホは縦長の舞台（720×1280。JS が .is-portrait を付ける）。絵を上・文字を下に並べ、字幕は舞台の中に大きく出す。
      横長の舞台を縦のスマホに縮めると、画面の中の文字が 7〜13px になって読めない。
   🚨 横のスマホは、枠を画面の高さに収める（はみ出してスクロールしないと全体が見えない、を防ぐ）。
   🚨 iPhone の Safari は要素の全画面に対応していないので、全画面ボタンはページの上に画面いっぱいに広げる（.is-pseudo-fs）。
   ================================================================ */

/* ---- 縦長の舞台 ---- */
.vd.is-portrait .vd-frame { aspect-ratio: 9 / 16; margin: 0 auto;
                            width: min(100%, calc((100vh - 76px) * 9 / 16)); }
@supports (height: 100svh) {
  .vd.is-portrait .vd-frame { width: min(100%, calc((100svh - 76px) * 9 / 16)); }
}
.vd.is-portrait .vd-stage { width: 720px; height: 1280px; }
.vd.is-portrait .vd-cap-out { display: none !important; }       /* 字幕は舞台の中に大きく出す */
.vd.is-portrait .vd-sub { display: block !important; left: 24px; right: 24px; bottom: 36px; }
.vd.is-portrait .vd-sub span { font-size: 30px; line-height: 1.42; padding: 12px 18px; border-radius: 18px; }
.vd.is-portrait .vd-brand { right: 36px; top: 34px; }
.vd.is-portrait .vd-brand img { height: 40px; }
.vd.is-portrait .sc-chip { left: 36px; top: 34px; font-size: 24px; padding: 8px 20px; }

/* 絵＋文字：絵を上、文字を下 */
.vd.is-portrait .sc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
                      align-items: start; align-content: start; gap: 18px; padding: 112px 44px 280px; }
.vd.is-portrait .sc-title { font-size: 46px; margin-bottom: 16px; }
.vd.is-portrait .sc-note { font-size: 24px; margin-top: 10px; }
.vd.is-portrait .sc.is-dense .sc-title { font-size: 40px; margin-bottom: 12px; }
.vd.is-portrait .sc.is-dense .sc-note { font-size: 22px; margin-top: 8px; }

/* 表紙 */
.vd.is-portrait .sc.sc-cover { padding: 60px 48px 300px; gap: 34px; }
.vd.is-portrait .sc-cover-logo { height: 72px; }
.vd.is-portrait .sc-cover .sc-title { font-size: 88px; line-height: 1.2; }
.vd.is-portrait .sc-cover-sub { font-size: 30px; }

/* 条件の一覧・認められない例 */
.vd.is-portrait .sc.sc-list, .vd.is-portrait .sc.sc-ng { padding: 112px 38px 280px; }
.vd.is-portrait .sc-list .sc-title, .vd.is-portrait .sc-ng .sc-title { font-size: 44px; margin-bottom: 20px; }
.vd.is-portrait .sc-items { gap: 12px; }
.vd.is-portrait .sc-items li { font-size: 28px; line-height: 1.45; padding: 12px 16px; gap: 14px; }
.vd.is-portrait .sc-items .num { width: 40px; height: 40px; font-size: 22px; }
.vd.is-portrait .sc-items svg { width: 38px; height: 38px; }
.vd.is-portrait .sc-list .sc-note, .vd.is-portrait .sc-ng .sc-note { font-size: 23px; }

/* 全額返金保証の条件（flow）: 縦長は 2×2 */
.vd.is-portrait .sc.sc-flow { padding: 112px 34px 280px; }
.vd.is-portrait .sc-flow .sc-title { font-size: 40px; margin-bottom: 26px; gap: 12px; }
.vd.is-portrait .sc-badge { font-size: 22px; }
.vd.is-portrait .sc-steps { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
.vd.is-portrait .sc-steps li + li::before { display: none; }
.vd.is-portrait .sc-steps-h { font-size: 23px; }
.vd.is-portrait .sc-steps-t { font-size: 18px; }
.vd.is-portrait .sc-flow .sc-note { font-size: 20px; }

/* まとめ：1列に */
.vd.is-portrait .sc.sc-summary { padding: 112px 38px 250px; }
.vd.is-portrait .sc-summary .sc-title { font-size: 44px; margin-bottom: 18px; }
.vd.is-portrait .sc-check { grid-template-columns: 1fr; gap: 9px; }
.vd.is-portrait .sc-check li { font-size: 27px; min-height: 0; padding: 10px 16px; }
.vd.is-portrait .sc-check svg { width: 34px; height: 34px; }

/* ---- 横のスマホ：枠を画面の高さに収める ---- */
@media (orientation: landscape) and (max-height: 540px) {
  .vd:not(.is-fs) .vd-frame { margin: 0 auto; width: min(100%, calc((100vh - 70px) * 16 / 9)); }
  @supports (height: 100svh) {
    .vd:not(.is-fs) .vd-frame { width: min(100%, calc((100svh - 70px) * 16 / 9)); }
  }
  .vd:not(.is-fs) .vd-ctrl { max-width: 100%; }
  .vd { padding-top: 10px; }
  .vd-head { padding-bottom: 8px; }
  .vd-title { font-size: 18px; }
  .vd-lead { font-size: 12.5px; }
  .vd-end { gap: 6px; }
  .vd-end-t { font-size: 20px; }
  .vd-end-s { font-size: 13px; }
  .vd-end-go { padding: 9px 20px; font-size: 15px; }
  .vd-resume { gap: 6px; }
  .vd-resume-t { font-size: 20px; }
  .vd-resume-s { font-size: 13px; }
  .vd-resume-go { padding: 9px 22px 9px 18px; font-size: 15px; }
}

/* ---- 全画面（iPhone の代わりの全画面も） ---- */
.vd.is-pseudo-fs { position: fixed; inset: 0; z-index: 1000; margin: 0; overflow: hidden;
                   height: 100vh; height: 100dvh; }
html.vd-lock, html.vd-lock body { overflow: hidden; }
.vd.is-fs { height: 100vh; height: 100dvh; }
.vd.is-fs .vd-frame { max-height: calc(100dvh - 60px); width: min(100vw, calc((100dvh - 60px) * 16 / 9)); }
.vd.is-fs.is-portrait .vd-frame { aspect-ratio: 9 / 16; max-height: none;
                                  width: min(100vw, calc((100vh - 60px) * 9 / 16)); }
@supports (height: 100dvh) {
  .vd.is-fs.is-portrait .vd-frame { width: min(100vw, calc((100dvh - 60px) * 9 / 16)); }
}
.vd.is-fs .vd-ctrl { padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right)); }
/* 表紙は縦長でも真ん中にそろえる（上の .is-portrait .sc の「上・左寄せ」を打ち消す） */
.vd.is-portrait .sc.sc-cover { align-items: center; justify-content: center; }
/* 狭い画面：再生位置のバーを1行目に全幅で（ボタンに挟まれて短くなり、押しにくいため） */
@media (max-width: 719px) {
  .vd-ctrl { flex-wrap: wrap; row-gap: 10px; }
  .vd-track { order: -1; flex: 1 0 100%; height: 12px; }
  .vd-vol { width: 76px; }                 /* 音量のつまみ（GDゼミ）も少し短く */
  /* バーが1行増えるぶん、縦長の枠は少し小さく（枠＋操作が画面に収まるように） */
  .vd.is-portrait .vd-frame { width: min(100%, calc((100vh - 100px) * 9 / 16)); }
}
@supports (height: 100svh) {
  @media (max-width: 719px) {
    .vd.is-portrait .vd-frame { width: min(100%, calc((100svh - 100px) * 9 / 16)); }
  }
}

/* ================================================================
   受験相談の動画（/soudan/。2026-09-30 本人「GDの架電の代わりにお客様に見てもらって勝手に受験相談が申し込まれる
   コンテンツを作って」「途中で入力などのアクションを促すものでもいい」「対話型の箇所があっても良い」）
   質問の場面（ask）・大きな数字（stat）・比べる（compare）・保護者の声（voices）・志望理由書の見本（sheet）、
   動画の下の文字起こし（#vd-tx）と受験相談の申込（#book）
   ================================================================ */

/* ---- 質問の場面 ---- */
.sc.sc-ask { display: flex; align-items: center; justify-content: center; padding: 70px 90px 150px; text-align: center; }
.sc-ask { width: 100%; }
.sc-ask-k { display: inline-block; margin: 0 0 14px; font-size: 20px; font-weight: 900; color: #fff; background: var(--p);
            padding: 6px 20px; border-radius: 999px; letter-spacing: .08em; }
.sc-ask .sc-title { font-size: 44px; margin: 0 0 8px; }
.sc-ask-s { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--muted); }
.sc-ask-bs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px 18px; max-width: 920px; margin: 22px auto 0; }
.sc-ask-bs.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }
/* 横に並べる3択（受験への気持ち q-aim。両端を置いて真ん中に着地させる。2026-10-02 夕）。縦の画面では1列（並びの真ん中が真ん中） */
.sc-ask-bs.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }
.sc-ask-b { font: inherit; font-size: 25px; font-weight: 800; line-height: 1.3; color: var(--deep); background: #fff;
            border: 3px solid #c9d7ea; border-radius: 18px; padding: 16px 14px; cursor: pointer;
            box-shadow: 0 4px 0 #c9d7ea; -webkit-tap-highlight-color: transparent; word-break: auto-phrase; }
.sc-ask-b:hover { border-color: var(--p); }
.sc-ask-b:active { transform: translateY(3px); box-shadow: none; }
.sc-ask-b.is-on, .sc-ask-b.is-pick { background: var(--p); border-color: var(--p); color: #fff; box-shadow: 0 4px 0 var(--deep); }
/* 間違えて戻った質問: 選んだ外れは押せなくする（GDゼミの動画。video.js の RETRY・tried） */
.sc-ask-b.is-tried { cursor: default; color: #9aa9b6; background: #f3f6f9; border-color: #e1e8ee; box-shadow: none;
                     text-decoration: line-through; text-decoration-thickness: 2px; }
.sc-ask-b.is-tried:hover { border-color: #e1e8ee; }
.sc-ask-go { font: inherit; font-size: 24px; font-weight: 900; color: #fff; background: var(--cta); border: 0; border-radius: 999px;
             padding: 14px 44px; margin-top: 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(179, 22, 31, .32); }
.sc-ask-go:disabled { background: #cbd5e1; box-shadow: none; cursor: default; }
/* 🚨 今の場面（.sc.is-on）の分だけ出す。場面は visibility: hidden ＋ 透明で隠しているが、子に visible を付けると親が隠れていても子だけ表に出る。
   前は .vd.is-asking .sc-ask-wait にしていて、ほかの質問の場面の案内が透明のまま選択肢の上に重なり、止まると選べなくなった
   （2026-10-01 本人「選ぶと、続きが始まります　になってからだと、選べない」）。案内は押した指を受け取らない（pointer-events: none） */
.sc-ask-wait { margin: 16px 0 0; font-size: 19px; font-weight: 700; color: var(--p); visibility: hidden; pointer-events: none; }
.vd.is-asking .sc.is-on .sc-ask-wait { visibility: visible; animation: vdBlink 1.6s ease-in-out infinite; }
@keyframes vdBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* 止まって選んでもらうあいだは、字幕の帯を消す（選ぶボタンに重ねない） */
.vd.is-asking .vd-sub { visibility: hidden; }

/* ---- 比べる（2列） ---- */
.sc.sc-compare { display: block; padding: 88px 80px 150px; }
.sc-compare .sc-title { font-size: 40px; margin-bottom: 22px; }
.sc-cmp { display: flex; align-items: stretch; gap: 18px; }
.sc-cmp-col { flex: 1; border-radius: 18px; padding: 16px 22px 14px; background: #fff; border: 2px solid #e2e8f0; }
.sc-cmp-col.is-old { background: #f8fafc; }
.sc-cmp-col.is-old .sc-cmp-h { color: #64748b; background: #e2e8f0; }
.sc-cmp-col.is-new { border-color: #9db6d9; box-shadow: 0 8px 24px rgba(29, 79, 145, .12); }
.sc-cmp-col.is-new .sc-cmp-h { color: #fff; background: var(--p); }
.sc-cmp-h { display: inline-block; margin: 0 0 10px; font-size: 22px; font-weight: 900; padding: 5px 16px; border-radius: 999px; }
.sc-cmp ul { list-style: none; margin: 0; padding: 0; }
.sc-cmp li { position: relative; padding-left: 26px; margin: 0 0 8px; font-size: 22px; line-height: 1.45; font-weight: 700; color: #243447; }
.sc-cmp li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; }
.sc-cmp-col.is-new li::before { background: var(--p); }
.sc-cmp-arrow { flex: none; width: 44px; align-self: center; }
.sc-compare .sc-note { font-size: 18px; margin-top: 12px; }

/* ---- 保護者の方の声（吹き出し） ---- */
.sc.sc-voices { display: block; padding: 88px 80px 150px; }
.sc-voices .sc-title { font-size: 40px; margin-bottom: 20px; }
.sc-voices ul, ul.sc-voices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 16px; }
ul.sc-voices li { position: relative; background: #fff; border: 2px solid #c9d7ea; border-radius: 20px; padding: 12px 20px;
                  font-size: 23px; line-height: 1.4; font-weight: 700; color: #243447; }
ul.sc-voices li::after { content: ""; position: absolute; left: 26px; bottom: -12px; border: 8px solid transparent;
                         border-top: 12px solid #c9d7ea; border-bottom: 0; }
ul.sc-voices li:nth-child(3n+2) { background: #fdf1f2; border-color: #f5c6c9; }
ul.sc-voices li:nth-child(3n+2)::after { border-top-color: #f5c6c9; }
.sc-voices .sc-note { font-size: 20px; margin-top: 22px; color: var(--deep); font-weight: 700; }

.sc-ask-b, .sc-ask-s, .sc-cmp li, ul.sc-voices li { line-break: strict; }

/* ---- 縦長の舞台 ---- */
.vd.is-portrait .sc.sc-ask { padding: 130px 40px 300px; }
.vd.is-portrait .sc-ask .sc-title { font-size: 46px; }
.vd.is-portrait .sc-ask-s { font-size: 26px; }
.vd.is-portrait .sc-ask-bs, .vd.is-portrait .sc-ask-bs.is-many, .vd.is-portrait .sc-ask-bs.is-row { grid-template-columns: 1fr; gap: 14px; }
/* スマホの選択肢は大きめに（2026-10-24 本人「スマホの場合、選択肢のボタンはそれぞれ、もう少しデカくしておいてほしい」。前は 30px・上下 18px） */
.vd.is-portrait .sc-ask-b { font-size: 36px; padding: 26px 18px; }
.vd.is-portrait .sc.sc-compare, .vd.is-portrait .sc.sc-voices { padding: 112px 38px 280px; }
.vd.is-portrait .sc-compare .sc-title, .vd.is-portrait .sc-voices .sc-title { font-size: 44px; }
.vd.is-portrait .sc-cmp { flex-direction: column; gap: 12px; }
.vd.is-portrait .sc-cmp-arrow { transform: rotate(90deg); width: 40px; }
.vd.is-portrait .sc-cmp li { font-size: 26px; }
.vd.is-portrait .sc-cmp-h { font-size: 26px; }
.vd.is-portrait ul.sc-voices li { font-size: 27px; }
.vd.is-portrait .sc-voices .sc-note { font-size: 25px; }

/* ---- 動画の下の文字起こし（見たところまで） ---- */
.vd-tx-wrap { margin: 22px 0 0; border: 1px solid var(--edge); border-radius: 14px; background: #fbfdff; }
.vd-tx-t { margin: 0; padding: 14px 18px 10px; font-size: 16px; font-weight: 800; color: var(--deep);
           border-bottom: 1px solid var(--edge); display: flex; align-items: baseline; gap: 10px; }
.vd-tx-t span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.vd-tx { max-height: 320px; overflow-y: auto; padding: 8px 18px 14px; font-size: 15px; line-height: 1.85; color: #334155;
         overscroll-behavior: contain; }
.vd-tx h3 { margin: 14px 0 4px; font-size: 14px; font-weight: 800; color: var(--p); }
.vd-tx p { margin: 0 0 4px; word-break: auto-phrase; line-break: strict; }
.vd-tx .vd-tx-a { color: var(--deep); font-weight: 700; background: var(--tint); display: inline-block;
                  padding: 2px 10px; border-radius: 8px; margin: 2px 0 8px; }

/* flow のカードを3枚で並べる（is-3）・順番の矢印を付けない（is-plain。受験相談の動画の「4つのもの」など） */
.sc-flow.is-3 .sc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-flow.is-plain .sc-steps li + li::before { display: none; }
.sc-flow.is-plain .sc-steps-no { display: none; }
.vd.is-portrait .sc-flow.is-3 .sc-steps { grid-template-columns: 1fr; gap: 14px; }
.vd.is-portrait .sc-flow.is-3 .sc-steps li { flex-direction: row; text-align: left; padding: 14px 16px; gap: 14px; }
.vd.is-portrait .sc-flow.is-3 .sc-steps-ic { width: 52px; height: 52px; }

/* 受験相談の動画: 矢印なしのカード（3つの壁・持ち帰れるもの・4つのもの）は大きく、上下の間を埋める */
.sc.sc-flow.is-plain { padding-top: 92px; }
.sc-flow.is-plain .sc-title { margin-bottom: 34px; }
.sc-flow.is-plain .sc-steps li { padding: 30px 20px 26px; gap: 10px; min-height: 260px; justify-content: flex-start; }
.sc-flow.is-plain .sc-steps-ic { width: 80px; height: 80px; }
.sc-flow.is-plain .sc-steps-h { font-size: 27px; }
.sc-flow.is-plain .sc-steps-t { font-size: 19.5px; line-height: 1.55; }
.vd.is-portrait .sc-flow.is-plain .sc-steps li { min-height: 0; }
.vd.is-portrait .sc-flow.is-plain .sc-steps-h { font-size: 27px; }
.vd.is-portrait .sc-flow.is-plain .sc-steps-t { font-size: 21px; }

/* 受験相談の動画の縦長: 数字・比べる・声・矢印なしのカードは、上下のまん中にそろえ、少し大きく（下が空きすぎないように） */
.vd.is-portrait .sc.sc-compare, .vd.is-portrait .sc.sc-voices, .vd.is-portrait .sc.sc-flow.is-plain {
  display: flex; flex-direction: column; justify-content: center; padding-top: 130px; padding-bottom: 300px; }
.vd.is-portrait .sc-flow.is-plain .sc-steps li { padding: 24px 20px; }
.vd.is-portrait .sc-flow.is-3 .sc-steps-ic { width: 64px; height: 64px; }
.vd.is-portrait .sc-flow.is-plain .sc-steps-h { font-size: 30px; }
.vd.is-portrait .sc-flow.is-plain .sc-steps-t { font-size: 23px; line-height: 1.5; }
.vd.is-portrait ul.sc-voices { flex-direction: column; align-items: flex-start; gap: 18px; }
.vd.is-portrait ul.sc-voices li { font-size: 29px; }

/* 受験相談の動画の矢印つきカード（is-big）: 大きく、上下の間を埋める。見出しと番号の丸を離す */
.sc.sc-flow.is-big { padding-top: 92px; }
.sc-flow.is-big .sc-title { margin-bottom: 46px; }
.sc-flow.is-big .sc-steps li { padding: 34px 16px 24px; gap: 10px; min-height: 280px; justify-content: flex-start; }
.sc-flow.is-big .sc-steps-ic { width: 72px; height: 72px; }
.sc-flow.is-big .sc-steps-h { font-size: 24px; }
.sc-flow.is-big .sc-steps-t { font-size: 18.5px; line-height: 1.55; }
.sc-flow.is-big .sc-steps-no { width: 38px; height: 38px; margin-left: -19px; top: -19px; font-size: 20px; }
.vd.is-portrait .sc.sc-flow.is-big { display: flex; flex-direction: column; justify-content: center; padding-top: 130px; padding-bottom: 300px; }
.vd.is-portrait .sc-flow.is-big .sc-steps li { min-height: 0; padding: 30px 14px 18px; }
.vd.is-portrait .sc-flow.is-big .sc-steps-h { font-size: 25px; }
.vd.is-portrait .sc-flow.is-big .sc-steps-t { font-size: 19px; }

/* 質問で止まっているあいだも BGM が流れているとき（is-ask-music）は、再生ボタンを一時停止の絵に（押すと BGM が止まる） */
.vd.is-ask-music .vd-play .ic-play { display: none; }
.vd.is-ask-music .vd-play .ic-pause { display: block; }
/* 下のセクションのボタン: 広い画面は1行に5つ・折り返さない（2026-09-30 本人「下のセクションのボタンが一部改行されてしまっていて
   見づらいから、直してほしい　1行のボタンの数を5にすればいい」）。狭い画面は今までどおり */
@media (min-width: 900px) {
  .vd-chapters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vd-chapters button { white-space: nowrap; }
}
@media (min-width: 720px) and (max-width: 899px) {
  .vd-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 答えたあと8秒だけの「選び直す」（2026-10-01 本人「そこから5秒間は下に戻るボタンが出ていて、戻って選び直せるようにして」）。
   2026-10-17 本人「動画の画面の外、右下に、再生とかのボタンと同じ行に出すようにしてほしい」→ 操作の列（.vd-ctrl）の右端（margin-left: auto）。
   帯が8秒で縮む（video.js の REDO_SEC と同じ）
   2026-10-23 本人「選び直す　がでているときに、再生ボタンとかの高さが変わっちゃうから、変わらないようにして」: スマホはほかのボタンが 38px なのに、これが 42px で、
   出た間だけ操作の列が 4px 高くなって再生ボタンなどが下がっていた。高さは決めず、同じ列のボタンの高さに伸ばす（align-self: stretch）＝出ても列の高さが変わらない */
.vd-redo { position: relative; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 36px; align-self: stretch;
           overflow: hidden; padding: 0 16px 2px 12px; border: 0; border-radius: 10px; cursor: pointer;
           font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; color: #fff; background: #1f2d3d;
           -webkit-tap-highlight-color: transparent; }
.vd-redo:hover { background: #0f1c2b; }   /* 質問は選ぶまで進まない・終わったら進む先が無い */
.vd-redo svg { width: 16px; height: 16px; flex: none; }
.vd-redo-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--yellow); transform-origin: left center; }
.vd-redo.is-run .vd-redo-bar { animation: vdRedo 8s linear both; }
@keyframes vdRedo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 正解・良い答えの札（舞台の真ん中ではじける。2026-10-01 本人「選択肢は正解した場合とか　いい行動をしている場合など、めっちゃ褒めるようにしてほしい」）。
   字は台本の ask の cheer。cheer_soft の答え（「惜しい！」）は青。舞台（1280×720）の px で書く */
.vd-cheer { position: absolute; left: 50%; top: 44%; z-index: 7; width: 0; height: 0; pointer-events: none; visibility: hidden; }
.vd-cheer.is-on { visibility: visible; }
.vd-cheer-t { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0;
              padding: 22px 60px 26px; border-radius: 999px; border: 8px solid #fff;
              font-size: 92px; line-height: 1; font-weight: 900; letter-spacing: .04em; color: #fff;
              background: linear-gradient(135deg, #e8444c 0%, #b3161f 100%); text-shadow: 0 3px 0 rgba(100, 10, 15, .3);
              box-shadow: 0 18px 50px rgba(220, 47, 56, .45), 0 0 0 10px rgba(255, 210, 63, .5); }
.vd-cheer.is-soft .vd-cheer-t { background: linear-gradient(135deg, #3b6aa8 0%, #0f2747 100%); text-shadow: 0 3px 0 rgba(6, 18, 36, .3);
                                box-shadow: 0 18px 50px rgba(29, 79, 145, .4), 0 0 0 10px rgba(157, 182, 217, .55); }
.vd-cheer.is-on .vd-cheer-t { animation: vdCheer 1.9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vdCheer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(4deg); }
  28% { transform: translate(-50%, -50%) scale(.96) rotate(-1deg); }
  38% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(1.06); }
}
/* はじける紙ふぶき（12個を円に並べて外へ飛ばす。--k は 0〜11。🚨 テンプレートに style= は書けないので、向きはここで振る） */
.vd-cheer i { --k: 0; position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
              background: var(--yellow); opacity: 0; }
.vd-cheer i:nth-of-type(2) { --k: 1; }
.vd-cheer i:nth-of-type(3) { --k: 2; }
.vd-cheer i:nth-of-type(4) { --k: 3; }
.vd-cheer i:nth-of-type(5) { --k: 4; }
.vd-cheer i:nth-of-type(6) { --k: 5; }
.vd-cheer i:nth-of-type(7) { --k: 6; }
.vd-cheer i:nth-of-type(8) { --k: 7; }
.vd-cheer i:nth-of-type(9) { --k: 8; }
.vd-cheer i:nth-of-type(10) { --k: 9; }
.vd-cheer i:nth-of-type(11) { --k: 10; }
.vd-cheer i:nth-of-type(12) { --k: 11; }
.vd-cheer i:nth-of-type(3n) { background: #dc2f38; border-radius: 5px; }
.vd-cheer i:nth-of-type(3n+1) { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--p); }
.vd-cheer.is-on i { animation: vdBurst 1.1s cubic-bezier(.15, .7, .3, 1) .08s both; }
@keyframes vdBurst {
  0% { opacity: 1; transform: rotate(calc(var(--k) * 30deg)) translateY(0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--k) * 30deg)) translateY(-330px) scale(1); }
}
.vd.is-portrait .vd-cheer { top: 40%; }
.vd.is-portrait .vd-cheer-t { font-size: 72px; padding: 18px 44px 22px; }
@media (prefers-reduced-motion: reduce) {
  .vd-cheer i { display: none; }
}
/* 選択肢が長い質問（簡単3分チェック・4人のクイズ） */
.sc-ask-bs.is-long { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; gap: 10px 14px; }
.sc-ask-bs.is-long .sc-ask-b { font-size: 20px; padding: 11px 14px; text-align: left; }
.sc.sc-ask:has(.is-long) { padding-top: 60px; }
.sc.sc-ask:has(.is-long) .sc-title { font-size: 36px; }
.sc.sc-ask:has(.is-long) .sc-ask-go { margin-top: 12px; padding: 10px 40px; font-size: 22px; }
/* 「このあと」の予告 */
.sc.sc-teaser { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
                padding: 70px 90px 150px; background: linear-gradient(180deg, #e8f4fc 0%, #ffffff 70%); }
.sc-teaser .sc-title { font-size: 58px; margin: 6px 0 14px; }
.sc-teaser-s { margin: 0; font-size: 26px; font-weight: 800; color: var(--deep); }
.vd.is-portrait .sc-ask-bs.is-long { grid-template-columns: 1fr; gap: 9px; }
.vd.is-portrait .sc-ask-bs.is-long .sc-ask-b { font-size: 24px; padding: 11px 14px; }
.vd.is-portrait .sc.sc-teaser { padding: 120px 40px 300px; }
.vd.is-portrait .sc-teaser .sc-title { font-size: 52px; }
.vd.is-portrait .sc-teaser-s { font-size: 28px; }

/* ================================================================
   話に合わせて項目を出す（台本の beat）・大事な一言を大きく出す（boom）（2026-10-02 本人「スライドがずっと変わらないままで
   つまらないから　もっと動きをつけて」「どーんって　心に残るようにして」「今話してるやつ以外を暗くするなどして　そのくらいこだわってくれ」）。
   🚨 項目には a-up / a-pop の動きが付いていて、動きの最後の opacity / transform を持ち続ける（ふつうの指定では上書きできない）。
      だから filter・translate・scale だけで動かす。visibility は使わない（場面の隠し方の罠: 78e6d38）
   ================================================================ */
.sc .is-beat { transition: filter .45s ease, translate .5s cubic-bezier(.2, .8, .2, 1), scale .45s cubic-bezier(.3, 1.5, .5, 1); }
.sc .is-beat.is-wait { filter: opacity(0); translate: 0 26px; }
.sc.has-now .is-beat:not(.is-now):not(.is-wait) { filter: grayscale(.8) brightness(.9) opacity(.34); }
.sc .is-beat.is-now { position: relative; z-index: 2; scale: 1.06; filter: drop-shadow(0 12px 22px rgba(15, 39, 71, .32)); }
.sc-cmp-col li.is-beat.is-now, .sc-items > li.is-beat.is-now { scale: 1.04; }

/* 大事な一言（#vd-boom）: 舞台を暗くして、真ん中に白い札が大きく落ちてくる。字幕（.vd-sub z5）より下・正解の札（z7）より下 */
.vd-boom { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
           padding: 0 90px 96px; pointer-events: none; visibility: hidden; }
.vd-boom.is-on { visibility: visible; }
.vd-boom::before { content: ""; position: absolute; inset: 0; background: rgba(6, 18, 36, .7); opacity: 0; }
.vd-boom.is-on::before { animation: vdBoomBg .3s ease-out both; }
.vd-boom-t { position: relative; margin: 0; max-width: 1060px; padding: 34px 66px 40px; border-radius: 30px; background: #fff; opacity: 0;
             font-size: 70px; line-height: 1.32; font-weight: 900; letter-spacing: .02em; color: var(--deep); text-align: center;
             white-space: pre-line; word-break: auto-phrase; box-shadow: 0 14px 0 var(--yellow), 0 30px 70px rgba(0, 0, 0, .38); }
.vd-boom-t em { font-style: normal; background: linear-gradient(transparent 60%, var(--yellow) 60%); padding: 0 .05em; }
.vd-boom.is-on .vd-boom-t { animation: vdBoom .62s cubic-bezier(.2, .9, .25, 1) both; }
.vd-boom-r { position: absolute; left: 50%; top: calc(50% - 48px); width: 320px; height: 320px; margin: -160px 0 0 -160px;
             border-radius: 50%; border: 12px solid var(--yellow); opacity: 0; }
.vd-boom.is-on .vd-boom-r { animation: vdBoomRing .8s cubic-bezier(.2, .7, .3, 1) .2s both; }
@keyframes vdBoom {
  0% { opacity: 0; transform: scale(2.5); }
  36% { opacity: 1; transform: scale(.93); }
  50% { transform: scale(1.035) rotate(-.7deg); }
  62% { transform: scale(.99) rotate(.4deg); }
  74%, 100% { opacity: 1; transform: none; }
}
@keyframes vdBoomBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes vdBoomRing { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(3.6); } }
.vd.is-portrait .vd-boom { padding: 0 36px 230px; }
.vd.is-portrait .vd-boom-t { max-width: 650px; padding: 28px 38px 32px; font-size: 56px; }
.vd.is-portrait .vd-boom-r { top: calc(50% - 115px); }
@media (prefers-reduced-motion: reduce) {
  .vd-boom-r { display: none; }
  .vd-boom.is-on .vd-boom-t { animation-duration: .01s; }
}
/* いま話している行は、黄色の帯で目立たせる（影だけだと弱かった。10/2 静止画で確かめた）。カード（flow）・数字（stat）は影と大きさだけ */
.sc-cmp-col li.is-beat, .sc-items > li.is-beat {
  transition: filter .45s ease, translate .5s cubic-bezier(.2, .8, .2, 1), scale .45s cubic-bezier(.3, 1.5, .5, 1),
              background-color .35s ease, box-shadow .35s ease; border-radius: 8px; }
.sc-cmp-col li.is-beat.is-now, .sc-items > li.is-beat.is-now {
  background-color: #fff3c4; box-shadow: 0 0 0 8px #fff3c4, 0 10px 24px 8px rgba(15, 39, 71, .18); filter: none; }

/* カード3枚（推薦の入り口3つ・持ち帰れるもの3つ）: 文字の一覧ではなく、大きな札にする（2026-10-02 本人「3つ横に並べて、カードみたいに」） */
.sc-flow.is-plain.is-3 .sc-steps { gap: 28px; margin-top: 10px; }
.sc-flow.is-plain.is-3 .sc-steps li { min-height: 340px; padding: 40px 26px 34px; gap: 14px; }
.sc-flow.is-plain.is-3 .sc-steps-ic { width: 112px; height: 112px; }
.sc-flow.is-plain.is-3 .sc-steps-h { font-size: 31px; }
.sc-flow.is-plain.is-3 .sc-steps-t { font-size: 21px; line-height: 1.55; }
.sc-flow.is-plain .sc-steps-h { font-size: 25px; }
.sc-flow.is-plain .sc-steps-t { font-size: 18px; line-height: 1.55; }
.vd.is-portrait .sc-flow.is-plain.is-3 .sc-steps li { min-height: 0; padding: 22px 22px; gap: 18px; }
.vd.is-portrait .sc-flow.is-plain.is-3 .sc-steps-ic { width: 76px; height: 76px; }
.vd.is-portrait .sc-flow.is-plain.is-3 .sc-steps-h { font-size: 30px; }
.vd.is-portrait .sc-flow.is-plain.is-3 .sc-steps-t { font-size: 22px; }

/* ---- 誤認識くずしの5段を1枚に（layout logic。2026-10-02 夜 本人「誤認識くずしのところ、ロジックを補強するために　スライドもつけて」）。
   左から右へ矢印でつなぐ。話している段だけ明るくする（beat。is-beat / is-now / is-wait は上の「話に合わせて項目を出す」）。
   最初の段（相手の考え）は灰色、最後の段（だから）は青で塗る。縦の画面は上から下へ */
.sc.sc-logic { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
               padding: 70px 70px 150px; background: linear-gradient(180deg, #e8f4fc 0%, #ffffff 70%); }
.sc-logic .sc-title { font-size: 46px; margin: 4px 0 0; }
.sc-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 34px; width: 100%; max-width: 1180px;
  margin: 30px auto 0; padding: 0; list-style: none; }
.sc-chain > li { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 196px; padding: 16px 14px 18px;
  border: 2px solid #c9d7ea; border-radius: 16px; background: #fff; text-align: left; }
.sc-chain > li b { align-self: flex-start; padding: 3px 11px; border-radius: 999px; background: #e8f0fa; color: #1d4f91;
  font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.sc-chain > li span { color: #1f2d3a; font-size: 22px; font-weight: 800; line-height: 1.45; }
.sc-chain > li:first-child { border-color: #d9e0e7; background: #f1f4f7; }
.sc-chain > li:first-child b { background: #e3e8ee; color: #5b6b7a; }
.sc-chain > li:last-child { border-color: var(--deep); background: var(--deep); }
.sc-chain > li:last-child b { background: #fff; color: var(--deep); }
.sc-chain > li:last-child span { color: #fff; }
.sc-chain > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -26px; width: 13px; height: 13px;
  border-top: 5px solid var(--p); border-right: 5px solid var(--p); transform: translateY(-50%) rotate(45deg); }
/* 3段だけのとき（GDゼミの動画の場面の答え。2026-10-20）: 5列の左3つに寄って小さくならないよう、3列で大きく並べる */
.sc-chain.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; gap: 0 52px; }
.sc-chain.n3 > li { min-height: 220px; padding: 20px 20px 22px; }
.sc-chain.n3 > li span { font-size: 29px; }
.sc-chain.n3 > li:not(:last-child)::after { right: -33px; }
.vd.is-portrait .sc.sc-logic { justify-content: flex-start; padding: 130px 40px 300px; text-align: left; align-items: stretch; }
.vd.is-portrait .sc-logic .sc-ask-k { align-self: flex-start; }
.vd.is-portrait .sc-chain { grid-template-columns: 1fr; gap: 30px 0; max-width: 640px; }
.vd.is-portrait .sc-chain.n3 { grid-template-columns: 1fr; gap: 30px 0; max-width: 640px; }
.vd.is-portrait .sc-chain.n3 > li { min-height: 0; padding: 14px 16px; }
.vd.is-portrait .sc-chain.n3 > li span { font-size: 25px; }
.vd.is-portrait .sc-chain > li { flex-direction: row; align-items: center; min-height: 0; padding: 14px 16px; }
.vd.is-portrait .sc-chain > li b { flex: none; width: 136px; text-align: center; }
.vd.is-portrait .sc-chain > li span { font-size: 25px; }
.vd.is-portrait .sc-chain > li:not(:last-child)::after { top: auto; right: auto; bottom: -24px; left: 50%;
  transform: translateX(-50%) rotate(135deg); }

/* ---- 選択肢の大きさをそろえる（2026-10-02 夜 本人「選択肢、何箇所かおかしいね　うまく押せなかったり、サイズが変だったり」）。
   前は質問ごとに2つの作り（字25px・中央・3列の大きなボタン ／ 字20px・左寄せ・2列の細い帯 = is-long）が混ざっていた。
   スマホの縦では舞台が約半分に縮むので、細い帯は高さ約29px・字約12pxになり、押しにくく読みにくかった。
   🚨 1つの作りにそろえる: 横は4つまで2列・5つ以上は3列（is-row は横3つ）・字22px・高さ62px以上・中央。
      縦（スマホ）は1列・字30px・高さ84px以上（実物で約42px）。6つ以上は字27px・高さ70px以上（画面に収める）。
   🚨 字幕の帯（.vd-sub）は指を受け取らない。帯は字の見えないところまで幅いっぱいにあり、下の方の選択肢や「これで決定」に重なると押せなかった */
.vd-sub, .vd-sub span { pointer-events: none; }
.sc-ask-bs, .sc-ask-bs.is-long { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(62px, auto);
  gap: 12px 16px; max-width: 1000px; }
.sc-ask-bs.is-many, .sc-ask-bs.is-many.is-long, .sc-ask-bs.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
.sc-ask-bs .sc-ask-b, .sc-ask-bs.is-long .sc-ask-b { display: flex; align-items: center; justify-content: center; min-height: 62px;
  padding: 10px 16px; font-size: 22px; line-height: 1.3; text-align: center; }
.sc.sc-ask:has(.is-long) { padding-top: 70px; }
.sc.sc-ask:has(.is-many) .sc-title, .sc.sc-ask:has(.is-long) .sc-title { font-size: 38px; }
.sc.sc-ask .sc-ask-go, .sc.sc-ask:has(.is-long) .sc-ask-go { margin-top: 16px; padding: 12px 48px; font-size: 24px; }
.vd.is-portrait .sc-ask-bs, .vd.is-portrait .sc-ask-bs.is-long, .vd.is-portrait .sc-ask-bs.is-many, .vd.is-portrait .sc-ask-bs.is-many.is-long, .vd.is-portrait .sc-ask-bs.is-row { grid-template-columns: 1fr; grid-auto-rows: minmax(84px, auto); gap: 12px; }
.vd.is-portrait .sc-ask-bs .sc-ask-b, .vd.is-portrait .sc-ask-bs.is-long .sc-ask-b { min-height: 84px; padding: 12px 20px; font-size: 30px; }
.vd.is-portrait .sc-ask-bs:has(.sc-ask-b:nth-child(6)) { grid-auto-rows: minmax(70px, auto); gap: 10px; }
.vd.is-portrait .sc-ask-bs:has(.sc-ask-b:nth-child(6)) .sc-ask-b { min-height: 70px; padding: 10px 18px; font-size: 27px; }
/* 8つ以上（簡単3分チェック）は、もう一段詰める（「これで決定」が字幕に重ならないように） */
.vd.is-portrait .sc-ask-bs:has(.sc-ask-b:nth-child(8)) { grid-auto-rows: minmax(62px, auto); gap: 8px; }
.vd.is-portrait .sc-ask-bs:has(.sc-ask-b:nth-child(8)) .sc-ask-b { min-height: 62px; padding: 8px 16px; font-size: 25px; }
.vd.is-portrait .sc.sc-ask:has(.is-long) .sc-title, .vd.is-portrait .sc.sc-ask:has(.is-many) .sc-title { font-size: 42px; }
.vd.is-portrait .sc.sc-ask .sc-ask-go { padding: 16px 64px; font-size: 30px; }
/* 並べ方は flex（半端な最後の行は真ん中に。grid だと「特にない」だけが左下に1つ残った）。横は 4つまで2列・5〜6つは3列・7つ以上は4列。
   縦（スマホ）は1列（見本の紙つきの質問だけ2列） */
.sc-ask-bs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.sc-ask-bs > .sc-ask-b { flex: 0 0 calc((100% - 16px) / 2); }
.sc-ask-bs.is-many > .sc-ask-b, .sc-ask-bs.is-row > .sc-ask-b { flex-basis: calc((100% - 32px) / 3); }
.sc-ask-bs:has(> .sc-ask-b:nth-child(7)) { max-width: 1160px; }
.sc-ask-bs:has(> .sc-ask-b:nth-child(7)) > .sc-ask-b { flex-basis: calc((100% - 48px) / 4); min-height: 58px; padding: 8px 12px; font-size: 20px; }
.vd.is-portrait .sc-ask-bs > .sc-ask-b, .vd.is-portrait .sc-ask-bs.is-many > .sc-ask-b, .vd.is-portrait .sc-ask-bs.is-row > .sc-ask-b, .vd.is-portrait .sc-ask-bs:has(> .sc-ask-b:nth-child(7)) > .sc-ask-b { flex-basis: 100%; }

/* 質問の中の小さい選択肢（q-want の「気になることがある」「今回は、受けない」。台本の ask の minor）。
   大きい選択肢（はい、申し込む）は横いっぱい、小さい選択肢はその下に並べる */
.sc-ask-bs:has(> .is-minor) > .sc-ask-b:not(.is-minor) { flex-basis: 640px; max-width: 100%; font-size: 26px; }
.sc-ask-bs:has(> .is-minor)::before { content: ""; order: 1; flex-basis: 100%; height: 0; }   /* 小さい選択肢は次の行へ */
.sc-ask-bs:has(> .is-minor) > .sc-ask-b.is-minor { flex: 0 1 auto; order: 2; }
.sc-ask-bs .sc-ask-b.is-minor { min-height: 52px; font-size: 18px; font-weight: 600; color: var(--deep); background: transparent;
  border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.sc-ask-bs .sc-ask-b.is-minor.is-on, .sc-ask-bs .sc-ask-b.is-minor.is-pick { background: var(--p); color: #fff; text-decoration: none; }
.vd.is-portrait .sc-ask-bs:has(> .is-minor) > .sc-ask-b.is-minor { flex-basis: 100%; min-height: 56px; font-size: 24px; }

/* ---- 画面をタップすると次の場面へ（2026-10-17 本人「画面をタップしたらポンポン進むようにしたい」。video.js の tapAdvance） ---- */
.vd-frame { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ================================================================
   SD代行 の研修動画だけの見た目（2026-11-01）。上の規則（manabi-library から写したもの）を、ここで上書きする。
   ================================================================ */
/* ロゴ（SD代行のマーク＋字。サイトの .wm-daikou と同じ形。オレンジはロゴの「SD」だけ） */
.tr-wm { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1; }
.tr-wm b { font-size: 19px; font-weight: 900; letter-spacing: .02em; color: var(--deep); white-space: nowrap; }
.tr-wm b i { font-style: normal; font-weight: 800; color: #f07a1a; margin-right: 1px; letter-spacing: 0; }
.tr-wm small { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #5a6b85; white-space: nowrap; }
.vd-logo.tr-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; line-height: 1; }
.vd-logo.tr-logo img { height: 30px; width: 30px; }
/* 上の「動画の一覧」「受講状況」「Trunk に戻る」はボタンの見た目（2026-11-01 本人「ボタンにして」）。押せる所は 44px */
.tr-top-link { position: relative; margin-left: auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
               border: 1.5px solid #c9d7ea; border-radius: 10px; background: #fff;
               font-size: 14px; font-weight: 800; color: var(--deep); text-decoration: none; white-space: nowrap; }
.tr-top-link::after { content: ""; position: absolute; inset: -5px -2px; }
.tr-top-link:hover { border-color: var(--p); background: var(--tint); }
.tr-top-link:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.tr-top-link + .vd-top-tag { margin-left: 8px; }
.vd-staff-sec[hidden] { display: none; }
.vd-staff-sec { padding-top: 0; border-top: 0; }      /* 区切り線は、見えている欄が2つ並ぶときだけ（下の行） */
.vd-staff-sec:not([hidden]) ~ .vd-staff-sec:not([hidden]) { padding-top: 14px; border-top: 1px solid var(--edge); }
.vd-time { flex: none; font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }
@media (max-width: 600px) { .vd-time { min-width: 0; font-size: 12px; } }
/* 狭い画面で上のボタンが2つあるときは、ロゴの字を隠してマークだけにする（題の上の札にも「SD代行 新人研修」がある） */
@media (max-width: 430px) { .vd-top-in:has(.vd-top-tag, .tr-top-link + .tr-top-link) .tr-wm { display: none; } }
/* 右上の札（押すとメニュー）: 見た目は小さく、押せる所は 44px */
button.vd-top-tag { position: relative; cursor: pointer; font-size: 13.5px; padding: 7px 14px;
                   -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* 5秒の長押しで字が選ばれないように */
button.vd-top-tag::after { content: ""; position: absolute; inset: -6px -2px; }
button.vd-top-tag:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
@media (max-width: 340px) { button.vd-top-tag { display: none; } }     /* とても狭い画面はロゴと「動画の一覧」だけ（リセットはほとんど使わない） */

/* 題の上の札（SD代行 新人研修・第◯回） */
.tr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.tr-kicker-t { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--deep); color: #fff;
               font-size: 13.5px; font-weight: 800; letter-spacing: .04em; }
.tr-kicker-n { font-size: 14px; font-weight: 800; color: var(--deep); }
.vd-title { font-size: 26px; }
.vd-lead { font-size: 15.5px; color: #44546a; }

/* 舞台の右上のロゴ・表紙のロゴ */
.vd-brand { display: flex; align-items: center; gap: 10px; line-height: 1; }
.vd-brand img { height: 40px; width: 40px; }
.vd-brand .tr-wm b { font-size: 26px; }
.sc-cover-logo.tr-cover-logo { display: flex; align-items: center; gap: 16px; height: auto; }
.tr-cover-logo img { width: 84px; height: 84px; }
.tr-cover-logo .tr-wm b { font-size: 44px; }
.tr-cover-logo .tr-wm small { font-size: 18px; margin-top: 8px; letter-spacing: .3em; }
.sc-cover-sub { color: var(--deep); }

/* 押すところは赤・字は白（SD代行のサイトの配車のボタンと同じ） */
.vd-start-ic { background: var(--cta); box-shadow: 0 10px 30px var(--cta-sh); }
.vd-start:hover .vd-start-ic { filter: brightness(1.06); }
.vd-start-t { font-size: 22px; color: var(--deep); }
.vd-resume-go, .vd-end-go { background: var(--cta); box-shadow: 0 8px 22px var(--cta-sh); min-height: 52px; }
.vd-resume-go:hover, .vd-end-go:hover { background: var(--cta-dark); }
.vd-resume-re, .vd-end-re { min-height: 44px; font-size: 15px; }
.vd-play { background: var(--deep); }
.vd-play:hover { background: #173a6b; }
.vd-fill { background: var(--deep); }
.vd-vol { accent-color: var(--deep); }
.vd-redo { background: var(--deep); font-size: 15px; }
.vd-redo:hover { background: #061224; }

/* 押すものは高さ 44px 以上・字は大きめ（見る人は年齢層が高め） */
.vd-btn { width: 44px; height: 44px; }
.vd-play { width: 54px; }
.vd-vol { height: 44px; }
.vd-redo { min-height: 44px; }
.vd-chapters button { min-height: 48px; font-size: 15px; }
.vd-chapters .n { width: 24px; height: 24px; font-size: 13px; }
.vd-staff-go, .vd-staff-x { min-height: 44px; font-size: 15px; }
.vd-staff-s { font-size: 15px; }
.vd-sub span { font-size: 31px; }
.vd-tx { font-size: 16px; }
@media (max-width: 719px) {
  .vd-btn { width: 44px; height: 44px; }
  .vd-play { width: 50px; }
  .vd-title { font-size: 21px; }
  .vd-lead { font-size: 14.5px; }
  .vd:not(.is-fs) .vd-cap-out { font-size: 18px; }
  .vd-end-t { font-size: 18px; }
  .vd-end-s { font-size: 13px; }
  .vd-end-go { min-height: 44px; font-size: 15px; }
}

/* 下の帯: ロゴと BGM のクレジット */
.vd-foot { line-height: 1.4; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tr-foot-logo { display: inline-flex; align-items: center; gap: 8px; opacity: .9; }
.tr-foot-logo img { width: 26px; height: 26px; }
.tr-foot-logo .tr-wm b { font-size: 16px; }
.tr-foot-logo .tr-wm small { font-size: 10px; }
.tr-credit { margin: 0; font-size: 12px; color: var(--muted); }

/* ---- 一覧（/training/。apps/training/templates/training/index.html） ---- */
.tr-index { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.tr-index-h { margin: 0 0 6px; font-size: 26px; font-weight: 900; color: var(--ink); }
.tr-index-s { margin: 0 0 20px; font-size: 15.5px; line-height: 1.7; color: #44546a; }
.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tr-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
             min-height: 72px; padding: 14px 18px; border: 1px solid var(--edge); border-radius: 14px; background: #fff;
             color: var(--ink); text-decoration: none; box-shadow: 0 4px 14px rgba(16, 42, 67, .06); }
.tr-item a:hover { border-color: var(--p); box-shadow: 0 8px 22px rgba(16, 42, 67, .10); }
.tr-item-no { min-width: 64px; padding: 6px 10px; border-radius: 10px; background: var(--deep); color: #fff; text-align: center;
              font-size: 15px; font-weight: 800; white-space: nowrap; }
.tr-item-t { display: block; font-size: 18px; font-weight: 800; line-height: 1.45; word-break: auto-phrase; }
.tr-item-s { display: block; margin-top: 2px; font-size: 14px; line-height: 1.6; color: var(--muted); word-break: auto-phrase; }
.tr-item-m { font-size: 14px; font-weight: 700; color: var(--deep); white-space: nowrap; }
.tr-empty { padding: 18px; border: 1px dashed var(--edge); border-radius: 12px; color: var(--muted); }
.tr-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-size: 15px; font-weight: 700;
           color: var(--deep); }
@media (max-width: 560px) {
  .tr-item a { grid-template-columns: auto minmax(0, 1fr); }
  .tr-item-m { grid-column: 2; }
}

/* ---- e ラーニング（2026-11-01）: 受講の画面・入口・受講状況・終わりの画面 ---- */
.tr-top-link-2 { margin-left: 8px; }
.tr-top-link + .tr-top-link { margin-left: 8px; }
.tr-hello { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--muted); }
.tr-course + .tr-course { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--edge); }
.tr-meter { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: var(--tint); }
.tr-meter-t { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 18px; color: var(--deep); }
.tr-meter-n { font-size: 24px; }
.tr-meter-all { font-size: 15px; font-weight: 800; color: #15803d; }
.tr-bar { display: block; width: 100%; height: 14px; border: 0; border-radius: 999px; overflow: hidden;
          -webkit-appearance: none; appearance: none; background: #fff; color: var(--deep); }
.tr-bar::-webkit-progress-bar { background: #fff; border-radius: 999px; }
.tr-bar::-webkit-progress-value { background: var(--deep); border-radius: 999px; }
.tr-bar::-moz-progress-bar { background: var(--deep); border-radius: 999px; }
.tr-resume { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 56px; padding: 10px 22px 10px 16px;
             border-radius: 14px; background: var(--cta); color: #fff; text-decoration: none; box-shadow: 0 8px 22px var(--cta-sh); }
.tr-resume:hover { background: var(--cta-dark); }
.tr-resume svg { flex: none; width: 30px; height: 30px; }
.tr-resume span { display: flex; flex-direction: column; font-size: 18px; font-weight: 900; line-height: 1.3; }
.tr-resume small { font-size: 14px; font-weight: 700; opacity: .92; word-break: auto-phrase; }
.tr-item-b { min-width: 0; }
.tr-item-st { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.tr-st { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.tr-st svg { width: 16px; height: 16px; }
.tr-st-done { background: #e3f4e8; color: #15803d; }
.tr-st-doing { background: #fdf3dd; color: #8a5a00; }
.tr-st-todo { background: #eef2f7; color: #4b5b70; }
.tr-score { font-size: 13px; font-weight: 700; color: var(--muted); }
.tr-item.is-done .tr-item-no { background: #15803d; }
/* 見終わった回は札ごと緑に（2026-11-01 本人「一覧画面で、見終わったはわかるようにしてね　ユーザーごとに」） */
.tr-item.is-done a { background: #f2fbf5; border-color: #9fd8b2; }
.tr-leave { margin: 28px 0 0; }
.tr-leave button { min-height: 44px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 10px; background: #fff;
                   font: inherit; font-size: 15px; font-weight: 700; color: var(--deep); cursor: pointer; }
@media (max-width: 560px) {
  .tr-item-st { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; }
  .tr-meter-t { font-size: 17px; }
}

/* 終わりの画面: 「第n回／全12回 修了」・一覧に戻る */
.vd-end-k { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
            background: #e3f4e8; color: #15803d; font-size: 15px; font-weight: 900; }
.vd-end-k svg { width: 18px; height: 18px; }
.vd-end-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
               border: 2px solid var(--deep); color: var(--deep); background: #fff; font-size: 15px; font-weight: 800; text-decoration: none; }
.vd-end-back:hover { background: var(--tint); }
@media (max-width: 719px) {
  .vd-end-k { font-size: 13px; padding: 3px 10px; }
  .vd-end-back { min-height: 40px; font-size: 13px; }
  .vd-end-re { min-height: 36px; }
}

/* 入口（公開の受付口。お名前とパスワード） */
body.tr-enter-body { min-height: 100vh; background: linear-gradient(180deg, #f2f6fb 0%, #fff 60%); }
.tr-enter { box-sizing: border-box; max-width: 460px; margin: 0 auto; padding: 48px 20px 40px; }
.tr-enter-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.tr-enter-logo img { width: 56px; height: 56px; }
.tr-enter-logo .tr-wm b { font-size: 30px; }
.tr-enter-logo .tr-wm small { font-size: 13px; letter-spacing: .2em; margin-top: 6px; }
.tr-enter-h { margin: 0 0 10px; font-size: 28px; font-weight: 900; color: var(--deep); }
.tr-enter-s { margin: 0 0 22px; font-size: 17px; line-height: 1.75; color: #33445a; }
.tr-enter-err { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #fdeced; color: #a3161f;
                font-size: 16px; font-weight: 700; line-height: 1.6; }
.tr-enter-f { display: grid; gap: 18px; }
.tr-field { display: grid; gap: 6px; }
.tr-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-name-row .tr-field { min-width: 0; }
.tr-field-l { font-size: 17px; font-weight: 800; color: var(--deep); }
.tr-field input { box-sizing: border-box; width: 100%; min-height: 54px; padding: 10px 14px; border: 2px solid #c9d7ea; border-radius: 12px;
                  font: inherit; font-size: 20px; color: var(--ink); background: #fff; }
.tr-field input:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px rgba(29, 79, 145, .18); }
.tr-enter-go { min-height: 58px; margin-top: 4px; border: 0; border-radius: 14px; background: var(--cta); color: #fff;
               font: inherit; font-size: 20px; font-weight: 900; letter-spacing: .1em; cursor: pointer; box-shadow: 0 8px 22px var(--cta-sh); }
.tr-enter-go:hover { background: var(--cta-dark); }

/* 受講状況（人 × 回の表）。表だけを横に動かす（ページは横スクロールしない） */
.tr-status { max-width: 1240px; }
.tr-status-tools { margin: 0 0 16px; }
.tr-csv { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--deep);
          color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; }
.tr-csv:hover { background: #173a6b; }
.tr-status-h { margin: 18px 0 10px; font-size: 20px; font-weight: 900; color: var(--deep); }
.tr-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; background: #fff; }
.tr-table { border-collapse: collapse; min-width: 100%; font-size: 14px; }
.tr-table th, .tr-table td { padding: 8px 10px; border-bottom: 1px solid var(--edge); text-align: center; white-space: nowrap; }
.tr-table thead th { position: sticky; top: 0; background: #f5f8fc; font-size: 13px; color: #44546a; }
.tr-table .tr-th-name { position: sticky; left: 0; z-index: 1; text-align: left; background: #fff; min-width: 9em; }
.tr-table thead .tr-th-name { background: #f5f8fc; z-index: 2; }
.tr-who { display: block; font-weight: 800; color: var(--ink); }
.tr-kind { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.tr-td-done b { font-size: 16px; color: var(--deep); }
.tr-c.is-done { background: #eef8f1; color: #15803d; }
.tr-c.is-done b { font-size: 16px; }
.tr-c.is-done small { display: block; font-size: 11.5px; color: #3f6b4c; }
.tr-c.is-doing { background: #fdf6e6; color: #8a5a00; font-weight: 700; }
.tr-c.is-todo { color: #9aa7b6; }
.tr-table tr.is-guest .tr-th-name { background: #fbfcfe; }