@charset "UTF-8";

/* =========================================================
   スライド本体（基準サイズ 1280 × 720 / 16:9）
   キャンバス側で scale して拡縮するため、寸法はすべて px 固定

   ■ 文字サイズの基準（スマホ横持ち・タブレットで読めること）
     最小 30px ＝ スマホ横持ちでも本文が読める大きさ
     見出し 52〜66px。22px 以下は付随情報のみ。

   ■ 1枚に入る量（本文領域 1152 × 616）
     見出し 64px … 1行18字。見出し1行なら本文に 445px 残る
     本文  32px … 1行36字・行高54px（＝8行）
     s-note を置くと 105px 減るので、2行見出しとの併用は避ける
   ========================================================= */

.slide{
  /* マージングリッド */
  --m-x: 72px;
  --m-t: 56px;
  --m-b: 56px;
  --gap-head: 24px;

  /* 文字スケール */
  --fs-display: 84px;  /* 表紙・結び */
  --fs-h1:      60px;  /* 主見出し */
  --fs-h1-s:    52px;  /* 長い主見出し */
  --fs-h2:      40px;  /* 項目タイトル */
  --fs-lead:    32px;  /* リード */
  --fs-body:    30px;  /* 本文＝最小 */
  --fs-meta:    22px;  /* ページ番号・ロゴなどの付随情報のみ */

  --lh-head: 1.32;
  --lh-body: 1.7;

  width:1280px; height:720px;
  position:relative; overflow:hidden;
  background:var(--surface); color:var(--ink);
  display:flex; flex-direction:column;
  padding:var(--m-t) var(--m-x) var(--m-b);
  font-weight:600;
  letter-spacing:.01em;

  /* このデッキの文章はどれも1〜5行なので、全体で行長を揃える。
     日本語で最終行に「か？」「ない」だけが残るのを防ぐ。 */
  text-wrap:balance;
  line-break:strict;
  /* 日本語を文節で折り返す。「影/響範囲」のような語中での改行を防ぐ */
  word-break:auto-phrase;
}
/* 依頼文だけは改行位置を原稿どおりに保つ（コピペして使う文面なので） */
.pr-text, .rf-line{ text-wrap:wrap; }

/* ---- 共通パーツ ---- */
.s-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:var(--fs-body); font-weight:700; letter-spacing:.08em; color:var(--accent);
  margin:0 0 16px;
}
.s-eyebrow::before{
  content:""; width:32px; height:3px; background:var(--accent); flex:none;
}
.s-eyebrow.is-mono{ color:var(--ink-3); }
.s-eyebrow.is-mono::before{ background:var(--ink-4); }

.s-h1{
  font-size:var(--fs-h1); font-weight:700; line-height:var(--lh-head); letter-spacing:-.01em;
  margin:0;
}
.s-h1.is-long{ font-size:var(--fs-h1-s); }
.s-h1 .hl{ color:var(--accent); }
.s-h1 .mk{
  background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 96%, transparent 96%);
  padding:0 2px;
}
.s-h1 + .s-lead{ margin-top:16px; }
.s-lead{
  font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--ink-2); margin:0;
  max-width:1060px;
}

/* 本文ブロックは残りの高さのなかで光学的に中央へ置く */
.s-body{
  flex:1; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:18px;
  margin-top:var(--gap-head);
  padding-bottom:8px;
}
.slide .s-body > *{ margin-top:0; }

.s-logo{
  position:absolute; left:var(--m-x); bottom:20px;
  height:18px; width:auto; opacity:.28;
}

.s-note{
  padding:18px 22px;
  background:var(--bg-2); border-radius:var(--r-m);
  font-size:var(--fs-body); line-height:1.6; color:var(--ink-2);
}
.s-note b{ color:var(--ink); }

/* =========================================================
   1. cover — タイトル
   ========================================================= */
.slide.l-cover{ padding:0; background:var(--bg); }
.cover-full{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cover-top{
  flex:none; height:76px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 30px; background:var(--surface); border-bottom:1px solid var(--line);
}
.cover-top .ct-logo{ height:26px; width:auto; }
.cover-seg{
  display:flex; background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:4px;
}
.cover-seg span{
  min-width:124px; height:32px; display:grid; place-items:center;
  font-size:19px; font-weight:600; color:var(--ink-3); border-radius:7px;
}
.cover-seg span.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(23,23,27,.10); }
.cover-badge{
  justify-self:end;
  height:40px; padding:0 22px; display:grid; place-items:center;
  background:var(--ink); color:#fff; border-radius:99px;
  font-size:22px; font-weight:700; letter-spacing:.03em;
}
.cover-main{ flex:1; display:grid; grid-template-columns:60px 1fr 430px; min-height:0; }
.cover-rail{
  display:flex; flex-direction:column; align-items:center; gap:28px;
  padding-top:34px; border-right:1px solid var(--line-2);
  color:var(--ink-4);
}
.cover-rail .ic{ width:24px; height:24px; stroke-width:1.5; }
.cover-copy{ padding:30px 36px 0 40px; display:flex; flex-direction:column; }
.cover-title{ margin:0; }
.cover-l1{
  position:relative; display:inline-block;
  font-size:70px; font-weight:700; line-height:1.14; letter-spacing:-.02em;
  padding:6px 4px; margin-bottom:6px;
}
.cover-l1::after{
  content:""; position:absolute; inset:0;
  border:2px solid var(--accent);
}
.cover-l1 i{
  position:absolute; width:11px; height:11px; background:#fff;
  border:2px solid var(--accent); font-style:normal;
}
.cover-l1 i:nth-child(1){ left:-6px; top:-6px; }
.cover-l1 i:nth-child(2){ right:-6px; top:-6px; }
.cover-l1 i:nth-child(3){ left:-6px; bottom:-6px; }
.cover-l1 i:nth-child(4){ right:-6px; bottom:-6px; }
.cover-l2{ font-size:48px; font-weight:700; line-height:1.26; letter-spacing:-.015em; }
.cover-l3{ font-size:54px; font-weight:700; line-height:1.22; letter-spacing:-.015em; }
.cover-l3 .hl{ color:var(--accent); }
.cover-l4{ font-size:54px; font-weight:700; line-height:1.22; letter-spacing:-.015em; }
.cover-l4 .hl{ color:var(--accent); }
.cover-input{
  margin-top:26px; margin-right:8px;
  display:flex; align-items:center; gap:14px;
  height:70px; padding:0 10px 0 22px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
}
.cover-input span{ font-size:26px; color:var(--ink-2); flex:1; }
.cover-input em{ width:1px; height:26px; background:var(--line); font-style:normal; }
.cover-send{
  width:50px; height:50px; flex:none; display:grid; place-items:center;
  background:var(--accent); border-radius:11px; color:#fff;
}
.cover-send .ic{ width:24px; height:24px; stroke-width:2; }

.cover-person{ padding:22px 26px 0 12px; display:flex; flex-direction:column; }
.cover-photo{
  position:relative; flex:1; min-height:0;
  background:var(--lime); border-radius:18px 18px 0 0; overflow:hidden;
}
.cover-photo img{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:104%; width:auto; max-width:none;
}
.cover-photo .tag{
  position:absolute; left:0; top:0; z-index:2;
  padding:8px 16px 10px; background:var(--surface);
  border-radius:0 0 12px 0;
  font-size:20px; font-weight:700;
}
.cover-caption{
  flex:none; background:var(--surface);
  border:1px solid var(--line); border-top:0; border-radius:0 0 18px 18px;
  padding:16px 22px 18px;
}
.cover-caption small{ display:block; font-size:20px; color:var(--ink-2); margin-bottom:6px; }
.cover-caption strong{ font-size:36px; font-weight:700; letter-spacing:.08em; }

.cover-bottom{
  flex:none; height:66px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px; background:var(--surface); border-top:1px solid var(--line);
  font-size:24px; color:var(--ink-2);
}
.cover-bottom .cb-l{ display:flex; align-items:center; gap:16px; }
.cover-bottom .cb-l .ic{ width:22px; height:22px; color:var(--ink-4); }
.cover-bottom .cb-l i{ width:1px; height:22px; background:var(--line); }
.cover-bottom .cb-r{ color:var(--ink-3); letter-spacing:.04em; }
.cb-cell{ display:flex; align-items:center; gap:10px; }

/* =========================================================
   2. section — 章とステップの扉
   紫ベタに白文字。本文ページ（白地）との明暗差で「章が変わった」と伝える
   ========================================================= */
.slide.l-section{
  --m-x:72px;
  background:var(--accent); color:#fff;
  justify-content:center; align-items:center; text-align:center;
}
.sec-slide-no{
  font-size:26px; font-weight:700; letter-spacing:.18em; color:#ffffffb8;
  margin:0 0 22px;
}
.sec-slide-title{
  font-size:64px; font-weight:700; line-height:1.26; letter-spacing:-.02em;
  margin:0 auto; max-width:1080px; color:#fff;
}
.sec-slide-title .hl{ color:var(--lime); }
.sec-slide-lead{
  font-size:30px; font-weight:500; line-height:1.5; letter-spacing:.015em;
  color:#ffffffd6; margin:28px auto 0; max-width:900px;
}

/* ステップの扉は章の扉より一段小さく組み、階層を取り違えないようにする */
.slide.l-section.is-step .sec-slide-no{ color:var(--lime); }
.slide.l-section.is-step .sec-slide-title{ font-size:52px; }
.slide.l-section.is-step .sec-slide-lead{ font-size:28px; margin-top:22px; }

/* =========================================================
   2b. parts — セクションを束ねた親アジェンダ
   3〜5行。名前は1行に収める。行はすべて同じ見え方にして、
   どれか1つを強調しない（全体の流れとして読ませる）
   ========================================================= */
.pt{ display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; justify-content:center; }
.pt-row{
  display:grid; grid-template-columns:72px 1fr; gap:24px; align-items:center;
  min-height:76px; padding:12px 24px; border-radius:var(--r-m);
  background:var(--accent-s); border:1px solid transparent;
}
.pt-lead{ display:flex; align-items:center; }
.pt-no{ font-size:24px; font-weight:700; line-height:1.2; color:var(--accent); }
.pt-name{ font-size:36px; font-weight:700; line-height:1.32; margin:0; color:var(--accent); }

/* =========================================================
   3. statement — 大きな一文
   ========================================================= */
/* 上下左右の中央に置く。ナビゲーションもページ番号も置かないので、
   視線の行き先は1か所だけになる */
.slide.l-statement{
  justify-content:center; align-items:center; text-align:center;
  padding:var(--m-t) 96px var(--m-b);
}
.st-kicker{
  display:inline-flex; align-items:center; gap:10px;
  align-self:center;
  height:46px; padding:0 20px; border-radius:99px;
  background:var(--accent-s); color:var(--accent);
  font-size:26px; font-weight:700; letter-spacing:.05em;
  margin-bottom:28px;
}
.st-big{
  font-size:66px; font-weight:700; line-height:1.3; letter-spacing:-.02em; margin:0;
  max-width:1060px;
}
.st-big.is-long{ font-size:56px; }
.st-big .hl{ color:var(--accent); }
.st-big .mk{
  background:linear-gradient(transparent 60%, var(--lime) 60%, var(--lime) 95%, transparent 95%);
}
.st-sub{
  font-size:var(--fs-lead); font-weight:600; line-height:var(--lh-body); letter-spacing:.015em; color:var(--ink-2);
  margin:30px auto 0; max-width:920px;
}

/* =========================================================
   3b. question — 問いかけ（登壇者が客席に投げる一言）
   ========================================================= */
/* 問いかけも中央。左の縦バーは中央寄せと釣り合わないので置かない */
.slide.l-question{
  background:var(--accent-s);
  justify-content:center; align-items:center; text-align:center;
  padding:var(--m-t) 96px var(--m-b);
}
.q-label{
  display:flex; align-items:center; gap:12px;
  font-size:26px; font-weight:700; letter-spacing:.14em;
  color:var(--accent); margin:0 0 26px;
}
.q-text{
  font-size:58px; font-weight:700; line-height:1.34; letter-spacing:-.015em;
  color:var(--ink); margin:0; max-width:1000px;
}
.q-text.is-long{ font-size:50px; }
.q-text .hl{ color:var(--accent); }
.q-hint{
  display:inline-flex; align-items:center; gap:12px; align-self:center;
  margin:34px 0 0; padding:14px 24px;
  background:var(--surface); border-radius:99px;
  font-size:var(--fs-body); font-weight:600; color:var(--ink-2);
}
.q-hint .ic{ width:26px; height:26px; color:var(--accent); flex:none; }

/* =========================================================
   4. bullets — 見出し＋番号付きリスト（最大3項目）
   ========================================================= */
.bl-list{ display:flex; flex-direction:column; gap:8px; }
.bl-item{
  display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start;
  padding:14px 24px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-m);
}
.bl-n{
  width:56px; height:56px; display:grid; place-items:center;
  background:var(--ink); color:#fff; border-radius:12px;
  font-size:28px; font-weight:700; font-variant-numeric:tabular-nums;
}
.bl-item.is-accent{ background:var(--accent-s); border-color:transparent; }
.bl-item.is-accent .bl-n{ background:var(--accent); }
.bl-t{ font-size:var(--fs-h2); font-weight:700; line-height:1.4; margin:0; }
.bl-d{ font-size:var(--fs-body); line-height:1.55; color:var(--ink-2); margin:6px 0 0; }
/* is-tight：説明なし・最大4項目 */
.bl-list.is-tight{ gap:12px; }
.bl-list.is-tight .bl-item{ padding:14px 22px; align-items:center; }
.bl-list.is-tight .bl-n{ width:48px; height:48px; font-size:25px; }
.bl-list.is-tight .bl-item{ grid-template-columns:48px 1fr; }
.bl-list.is-tight .bl-t{ font-size:40px; }
/* 説明つき4項目：情報は残し、各行の内側だけを一段コンパクトにする */
.bl-list.is-compact{ gap:8px; }
.bl-list.is-compact .bl-item{
  grid-template-columns:48px 1fr; gap:20px; padding:10px 20px;
}
.bl-list.is-compact .bl-n{ width:48px; height:48px; font-size:24px; }
.bl-list.is-compact .bl-t{ font-size:36px; line-height:1.3; }
.bl-list.is-compact .bl-d{ font-size:27px; line-height:1.4; margin-top:4px; }

/* 横並びカード（2列＝説明あり／3列＝タイトルのみ） */
.cards{ display:grid; gap:20px; }
.cards.c2{ grid-template-columns:repeat(2,1fr); }
.cards.c3{ grid-template-columns:repeat(3,1fr); }
.card{
  display:flex; flex-direction:column;
  padding:20px 24px 22px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-m);
}
.card-ic{
  width:52px; height:52px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--accent);
}
.card-ic .ic{ width:28px; height:28px; }
.card-t{ font-size:var(--fs-h2); font-weight:700; line-height:1.4; margin:0; }
.card-d{ font-size:var(--fs-body); line-height:1.45; color:var(--ink-2); margin:10px 0 0; }
.cards.c3 .card-t{ font-size:38px; }
.cards.c3 .card-d{ font-size:var(--fs-body); }
.card.is-dark{ background:var(--ink); border-color:var(--ink); }
.card.is-dark .card-t{ color:#fff; }
.card.is-dark .card-d{ color:rgba(255,255,255,.72); }
.card.is-dark .card-ic{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:var(--lime); }
.card.is-lime{ background:var(--lime); border-color:transparent; }
.card.is-lime .card-ic{ background:rgba(23,23,27,.08); border-color:transparent; color:var(--ink); }
.card.is-lime .card-d{ color:rgba(23,23,27,.74); }
.card-n{
  font-size:22px; font-weight:700; letter-spacing:.10em; color:var(--ink-4);
  margin-bottom:10px;
}
.card.is-dark .card-n{ color:rgba(255,255,255,.5); }

/* =========================================================
   5. compare — ✕ / ✓ 2カラム（各3項目まで）
   ========================================================= */
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:24px; flex:1; min-height:0; }
.cmp-col{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  background:var(--surface);
}
.cmp-head{
  display:flex; align-items:center; gap:14px;
  padding:18px 24px; border-bottom:1px solid var(--line-2);
  font-size:36px; font-weight:700;
}
.cmp-mark{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:50%; font-size:22px; font-weight:700; color:#fff;
}
.cmp-col.bad .cmp-head{ background:var(--bg-2); }
.cmp-col.bad .cmp-mark{ background:#D0342C; }
.cmp-col.good{ border-color:var(--accent); }
.cmp-col.good .cmp-head{ background:var(--accent-s); color:var(--accent); }
.cmp-col.good .cmp-mark{ background:var(--accent); }
.cmp-body{ padding:22px 24px; display:flex; flex-direction:column; gap:18px; flex:1; }
.cmp-li{ display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; }
.cmp-li::before{
  content:""; width:11px; height:11px; margin-top:16px; margin-left:4px;
  border-radius:50%; background:var(--line);
}
.cmp-col.good .cmp-li::before{ background:var(--accent); }
.cmp-li p{ font-size:var(--fs-body); line-height:1.6; margin:0; color:var(--ink-2); }
.cmp-li b{ color:var(--ink); font-weight:700; }

/* =========================================================
   6. table — 最大3行
   ========================================================= */
.s-table{ width:100%; border-collapse:separate; border-spacing:0; }
.s-table th,.s-table td{ text-align:left; vertical-align:top; padding:16px 20px; }
.s-table thead th{
  font-size:26px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
  border-bottom:2px solid var(--ink); padding-bottom:14px;
}
.s-table tbody tr td{ border-bottom:1px solid var(--line-2); }
.s-table tbody tr:last-child td{ border-bottom:0; }
.s-table .c-key{ font-size:38px; font-weight:700; line-height:1.3; width:400px; }
.s-table .c-key small{
  display:block; font-size:24px; font-weight:600; color:var(--ink-4);
  margin-top:6px; letter-spacing:.04em;
}
.s-table .c-val{ font-size:var(--fs-body); line-height:1.55; color:var(--ink-2); }
.s-table tbody tr.is-accent td{ background:var(--accent-s); }
.s-table tbody tr.is-accent .c-key{ color:var(--accent); }

/* =========================================================
   7. flow — 手順（横：ラベルのみ／縦：説明つき3件まで）
   ========================================================= */
.flow{ display:flex; align-items:stretch; gap:0; }
.flow-step{
  flex:1; position:relative; padding:0 6px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.flow-step::after{
  content:""; position:absolute; top:27px; left:50%; width:100%; height:2px;
  background:var(--line); z-index:0;
}
.flow-step:last-child::after{ display:none; }
.flow-dot{
  position:relative; z-index:1;
  width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--surface); border:2px solid var(--line); border-radius:50%;
  font-size:26px; font-weight:700; color:var(--ink-3);
}
.flow-step.is-on .flow-dot{ background:var(--accent); border-color:var(--accent); color:#fff; }
.flow-step.is-on .flow-t{ color:var(--accent); }
.flow-t{ font-size:var(--fs-body); font-weight:700; line-height:1.4; margin:0; }

.flow-v{ display:flex; flex-direction:column; gap:0; }
.flow-v-row{ display:grid; grid-template-columns:64px 1fr; gap:24px; position:relative; padding-bottom:26px; }
.flow-v-row:last-child{ padding-bottom:0; }
.flow-v-row::before{
  content:""; position:absolute; left:31px; top:64px; bottom:0; width:2px; background:var(--line);
}
.flow-v-row:last-child::before{ display:none; }
.flow-v-dot{
  width:64px; height:64px; display:grid; place-items:center; z-index:1;
  background:var(--ink); color:#fff; border-radius:16px;
  font-size:30px; font-weight:700;
}
.flow-v-row.is-on .flow-v-dot{ background:var(--accent); }
.flow-v-t{ font-size:var(--fs-h2); font-weight:700; line-height:1.35; margin:6px 0 0; }
.flow-v-d{ font-size:var(--fs-body); line-height:1.6; color:var(--ink-2); margin:8px 0 0; }

/* =========================================================
   8. prompt — 依頼文（入力欄モチーフ）
   ========================================================= */
.pr-box{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; flex:1; display:flex; flex-direction:column; min-height:0;
}
.pr-head{
  display:flex; align-items:center; gap:14px;
  padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--line-2);
  font-size:24px; font-weight:700; letter-spacing:.04em; color:var(--ink-3);
}
.pr-head .dots{ display:flex; gap:7px; }
.pr-head .dots i{ width:13px; height:13px; border-radius:50%; background:var(--line); }
.pr-head .tag{
  margin-left:auto; padding:5px 16px; border-radius:99px;
  background:var(--accent-s); color:var(--accent); font-size:22px; letter-spacing:.03em;
}
/* 依頼文は行数が効くので最小サイズ。1行34字・5行までを上限に組む */
.pr-text{
  flex:1; padding:18px 26px;
  font-size:var(--fs-body); line-height:1.62; color:var(--ink); margin:0;
  white-space:pre-wrap;
}
.pr-text .hl{ color:var(--accent); font-weight:700; }
.pr-text .mk{ background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 96%, transparent 96%); }
.pr-bar{
  display:flex; align-items:center; gap:16px;
  padding:10px 12px 10px 26px; border-top:1px solid var(--line-2); background:var(--surface);
}
.pr-bar span{ font-size:30px; line-height:1.4; color:var(--ink-3); flex:1; }
.pr-send{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  background:var(--accent); border-radius:12px; color:#fff;
}
.pr-send .ic{ width:24px; height:24px; stroke-width:2.2; }

/* =========================================================
   9. rulefile — CLAUDE.md（全幅・7行まで）
   ========================================================= */
.rf{ flex:1; min-height:0; display:flex; }
.rf-file{
  flex:1; min-width:0;
  background:var(--ink); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column;
}
.rf-file-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 24px; border-bottom:1px solid rgba(255,255,255,.10);
}
.rf-file-head .dots{ display:flex; gap:7px; }
.rf-file-head .dots i{ width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.22); }
.rf-file-name{
  font-family:var(--mono); font-size:26px; color:rgba(255,255,255,.74); letter-spacing:.02em;
}
.rf-code{ padding:14px 26px; margin:0; overflow:hidden; }
/* 等幅フォントのコード。行数が効くので 30px（同サイズの本文より字面は大きい） */
.rf-line{
  display:grid; grid-template-columns:38px 1fr; gap:18px;
  font-family:var(--mono); font-size:30px; line-height:1.62; color:rgba(255,255,255,.88);
  white-space:pre-wrap;
}
.rf-line b{ color:rgba(255,255,255,.28); font-weight:600; text-align:right; }
.rf-line.h{ color:var(--lime); font-weight:700; }
.rf-line.c{ color:rgba(255,255,255,.46); }

/* =========================================================
   10. mock — ケーススタディの画面モック
   モック内部は「画面の絵」なので 22px。読ませる文字は外側に置く
   ========================================================= */
.mock-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:26px; flex:1; min-height:0; }
.mock-col{ display:flex; flex-direction:column; min-height:0; }
.mock-label{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
  font-size:var(--fs-body); font-weight:700;
}
.mock-label .badge{
  padding:5px 16px; border-radius:99px; font-size:22px; font-weight:700; letter-spacing:.05em;
}
.mock-label .badge.b{ background:var(--bg-2); color:var(--ink-3); }
.mock-label .badge.a{ background:var(--accent); color:#fff; }
.mock{
  flex:1; min-height:0; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  display:flex; flex-direction:column;
}
.mock.is-good{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-s); }
.mock-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--line-2);
}
.mock-top h5{ font-size:24px; font-weight:700; margin:0; }
.mock-top .m-btn{
  font-size:20px; padding:6px 14px; border-radius:8px;
  background:var(--bg-2); color:var(--ink-3);
}
.mock.is-good .mock-top .m-btn{ background:var(--accent); color:#fff; font-weight:700; }
.mock-list{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mock-row{
  display:flex; align-items:center; gap:12px;
  padding:8px 14px; border-radius:10px;
  background:var(--bg-2);
  font-size:22px; color:var(--ink-2);
}
.mock-row .box{ width:20px; height:20px; border:2px solid var(--line); border-radius:4px; flex:none; }
.mock-row .txt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-row .chip{
  font-size:18px; padding:3px 10px; border-radius:99px; background:var(--surface); color:var(--ink-3);
  border:1px solid var(--line); flex:none;
}
.mock.is-bad .mock-row{ font-weight:700; color:var(--ink); background:var(--bg-2); }
.mock.is-bad .mock-row .chip{ font-weight:700; }
.mock.is-good .mock-group{
  font-size:18px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
  padding:4px 2px 0;
}
.mock.is-good .mock-row{ background:var(--surface); border:1px solid var(--line-2); }
.mock.is-good .mock-row.pri{ background:var(--surface); border-color:var(--ink); font-weight:700; color:var(--ink); }
.mock.is-good .mock-row.pri .box{ border-color:var(--ink); border-width:2.5px; }
.mock.is-good .mock-row.sub{ opacity:.6; }
.mock.is-good .mock-row .chip.now{ background:var(--lime); border-color:transparent; color:var(--ink); font-weight:700; }
.mock-note{
  flex:none; padding:10px 16px; border-top:1px solid var(--line-2);
  font-size:22px; line-height:1.45; color:var(--ink-3);
}
.mock.is-good .mock-note{ color:var(--accent); background:var(--accent-s); border-top-color:transparent; }

/* =========================================================
   11. checklist — 2列 × 3行まで
   ========================================================= */
.ck{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
.ck-item{
  display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start;
  padding:14px 20px; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-m);
}
.ck-box{
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--accent); border-radius:9px; color:#fff;
}
.ck-box .ic{ width:22px; height:22px; stroke-width:2.6; }
.ck-t{ font-size:36px; font-weight:700; line-height:1.35; margin:0; }
.ck-t small{
  display:block; font-size:var(--fs-body); font-weight:600; color:var(--ink-3);
  line-height:1.45; margin-top:6px;
}
/* is-single：1列（項目文が長いとき） */
.ck.is-single{ grid-template-columns:1fr; }

/* =========================================================
   12. speaker — 登壇者紹介
   ========================================================= */
.sp-wrap{
  display:grid; grid-template-columns:352px 1fr; gap:48px; align-items:center;
  flex:1; min-height:0;
}
.sp-photo{
  position:relative; height:100%; max-height:470px;
  background:var(--lime); border-radius:var(--r-xl); overflow:hidden;
}
.sp-photo img{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:106%; width:auto; max-width:none;
}
.sp-text{ min-width:0; }
.sp-role{ font-size:var(--fs-body); color:var(--ink-2); margin:0 0 10px; }
.sp-name{
  font-size:72px; font-weight:700; letter-spacing:.06em; line-height:1.2; margin:0 0 28px;
}
.sp-lines{ display:flex; flex-direction:column; gap:18px; }
.sp-lines p{ font-size:var(--fs-body); line-height:1.65; color:var(--ink-2); margin:0; }
.sp-lines b{ color:var(--ink); font-weight:700; }

/* =========================================================
   13. agenda — アジェンダ表（5行まで）
   ========================================================= */
.ag{ display:flex; flex-direction:column; gap:6px; flex:1; min-height:0; justify-content:center; }
.ag-row{
  display:grid; grid-template-columns:48px 1fr; gap:22px; align-items:center;
  padding:14px 20px; border-radius:10px;
}
.ag-row:nth-child(odd){ background:var(--bg); }
.ag-no{
  width:48px; height:48px; display:grid; place-items:center; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
  font-size:22px; font-weight:700; color:var(--ink-3);
}
.ag-name{ font-size:var(--fs-h2); font-weight:600; line-height:1.35; }
.ag-row.is-main{ background:var(--accent-s); }
.ag-row.is-main .ag-no{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ag-row.is-main .ag-name{ font-weight:700; color:var(--accent); }
/* 6行入れるとき：1行1件を保ったまま高さだけ詰める */
.ag.is-tight{ gap:5px; }
.ag.is-tight .ag-row{ padding:10px 20px; }
.ag.is-tight .ag-name{ font-size:var(--fs-lead); }
.ag.is-tight .ag-no{ width:42px; height:42px; font-size:20px; }

/* =========================================================
   14. cta / qa / end
   ========================================================= */
.slide.l-end{
  background:var(--ink); color:#fff;
  justify-content:center; align-items:center; text-align:center;
}
.slide.l-end .end-big{
  font-size:var(--fs-display); font-weight:700; line-height:1.26; letter-spacing:-.02em;
  margin:0 auto;
}
.slide.l-end .end-big .hl{ color:var(--lime); }
.slide.l-end .end-sub{
  font-size:var(--fs-lead); line-height:1.7; color:rgba(255,255,255,.72);
  margin:28px auto 0; max-width:1000px;
}
.end-meta{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; justify-content:center; }
.end-meta span{
  padding:12px 24px; border:1px solid rgba(255,255,255,.22); border-radius:99px;
  font-size:26px; color:rgba(255,255,255,.8);
}
.slide.l-end .s-logo{ opacity:.45; filter:none; }

/* Q&A：1列 × 2件 */
.qa-grid{ display:flex; flex-direction:column; gap:18px; }
.qa-item{
  padding:22px 26px; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-m);
}
.qa-q{ display:flex; gap:16px; font-size:38px; font-weight:700; line-height:1.4; margin:0; }
.qa-q em{ font-style:normal; color:var(--accent); font-weight:700; flex:none; }
.qa-a{ display:flex; gap:16px; font-size:var(--fs-body); line-height:1.6; color:var(--ink-2); margin:14px 0 0; }
.qa-a em{ font-style:normal; color:var(--ink-4); font-weight:700; flex:none; }

/* CTA：全幅のライム面 */
.cta{ flex:1; min-height:0; display:flex; }
.cta-main{
  flex:1; min-height:0; background:var(--lime); border-radius:var(--r-l); padding:26px 32px;
  display:flex; flex-direction:column;
}
.cta-kicker{ font-size:24px; font-weight:700; letter-spacing:.10em; color:rgba(23,23,27,.6); margin-bottom:14px; }
.cta-title{ font-size:44px; font-weight:700; line-height:1.32; letter-spacing:-.015em; margin:0; }
.cta-list{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.cta-list div{ display:flex; gap:14px; font-size:var(--fs-body); line-height:1.45; color:rgba(23,23,27,.84); }
.cta-list .ic{ width:26px; height:26px; margin-top:4px; flex:none; }

/* =========================================================
   15. quote — 引用・参照
   ========================================================= */
.refs{ display:flex; flex-direction:column; gap:14px; }
.ref{
  display:grid; grid-template-columns:34px 1fr auto; gap:18px; align-items:center;
  padding:20px 24px; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-m);
}
.ref-ic{ color:var(--accent); }
.ref-ic .ic{ width:28px; height:28px; }
.ref-t{ font-size:36px; font-weight:600; line-height:1.4; }
.ref-t small{ display:block; font-size:var(--fs-body); font-weight:600; color:var(--ink-3); margin-top:6px; }
.ref-u{ font-size:24px; color:var(--ink-4); font-family:var(--mono); }

/* 用語の強調（本文中） */
.slide .kw{ color:var(--accent); font-weight:700; }
.slide .neg{ color:#D0342C; font-weight:700; }
.slide .code{
  font-family:var(--mono); font-size:.92em;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:6px; padding:2px 8px;
}

/* =========================================================
   18. full — 図解を画面いっぱいに置く
   図は 16:9・2560×1440 で書き出し、図自身が余白と見出しを持つ。
   ここでは padding もクロームも足さない。比率がわずかにずれても
   letterbox が地の色に溶けるよう contain ＋ 地色で受ける
   ========================================================= */
.slide.l-full{ padding:0; background:var(--bg); }
.full{
  margin:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.full img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
}
.full-ph{ display:none; }
.full.is-missing img{ display:none; }
.full.is-missing .full-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  width:100%; height:100%; margin:24px;
  border:3px dashed var(--line); border-radius:var(--r-l); background:var(--bg-2);
  color:var(--ink-3); text-align:center;
}
.full-ph b{ font-family:var(--mono); font-size:34px; font-weight:700; color:var(--ink-2); }
.full-ph small{ font-size:var(--fs-body); color:var(--ink-3); max-width:820px; }

/* =========================================================
   19. swap — 「いまの文言 → こう直す」を1行ずつ
   5行まで。1行は左右あわせて 44字を上限にする
   ========================================================= */
.swap{ display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; justify-content:center; }
.swap-row{
  display:grid; grid-template-columns:1fr 52px 1fr; align-items:center; gap:10px;
}
.swap-a,.swap-b{
  margin:0; padding:13px 20px;
  font-size:var(--fs-body); line-height:1.45; border-radius:var(--r-m);
}
.swap-a{
  background:var(--bg-2); color:var(--ink-2);
  text-decoration:line-through; text-decoration-color:var(--ink-4);
}
.swap-b{
  background:var(--accent-s); color:var(--ink); font-weight:700;
  border:2px solid var(--accent);
}
.swap-arw{ display:flex; align-items:center; justify-content:center; color:var(--accent); }
.swap-arw .ic{ width:30px; height:30px; stroke-width:2.4; }

/* 9段階の実画面とコピー可能なプロンプト */
.s-current{position:absolute;right:72px;top:23px;font-size:17px;line-height:1.3;font-weight:500;color:var(--ink-2);letter-spacing:0;text-wrap:nowrap}
.s-page{position:absolute;right:72px;bottom:22px;font-size:18px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.l-section .s-current,.l-section .s-page,.l-end .s-current,.l-end .s-page{color:#ffffffa6}
.l-parts .pt{gap:10px}.l-parts .pt-row{padding:14px 20px}.l-parts .pt-name{font-size:30px}.l-parts .pt-no{font-size:28px}
.l-stepPrompt,.l-uiCompare,.l-uiStart,.l-uiJourney,.l-uiStates,.l-partsKit,.l-grayCompare,.l-video,.l-flawCards,.l-shot{padding:56px 64px 48px;text-wrap:wrap;word-break:normal}
.step-eyebrow{display:flex;align-items:center;justify-content:space-between;color:var(--accent);font-size:22px;line-height:1.3;margin:0 0 12px;font-weight:700}
.step-count{font-size:18px;letter-spacing:.06em}.step-count b{font-size:25px}
.step-title{font-size:44px;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin:0 0 24px;text-wrap:balance}
.prompt-bracket{position:relative;padding:22px 32px 24px;margin:0 4px;border:1px solid #d8d1ff;border-radius:14px;background:#f8f7ff;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.prompt-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.prompt-top>p{margin:0;font-size:24px;font-weight:500;line-height:1.55}.prompt-copy{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;background:var(--accent);border:1px solid var(--accent);color:white;border-radius:8px;font-size:20px;font-weight:700;white-space:nowrap;text-decoration:none;flex-shrink:0}.prompt-copy:hover{background:var(--accent-d)}.prompt-copy .ic{width:20px;height:20px}.prompt-lines{display:flex;flex-direction:column;gap:14px}.prompt-line{display:grid;grid-template-columns:138px 1fr;gap:8px;margin:0;font-size:26px;line-height:1.5;font-weight:500;word-break:normal;overflow-wrap:anywhere}.prompt-line strong{font-size:25px;color:var(--accent);white-space:nowrap}.prompt-extra{margin:0;font-size:25px;line-height:1.5;font-weight:500}.copy-status{height:24px;min-height:24px;line-height:24px;font-size:18px;font-weight:500;color:var(--accent);margin:12px 0 0;text-align:right}
.ui-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.ui-compare figure,.ui-journey figure,.ui-states figure{margin:0;min-width:0}.ui-compare figcaption{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:24px;line-height:1.3}.ui-compare figcaption span{font-size:18px;background:#f1f2f5;color:var(--ink-2);padding:5px 10px;border-radius:6px}.ui-compare figcaption .is-after{background:var(--accent-s);color:var(--accent)}.ui-image-button{display:block;width:100%;border:1px solid var(--line);background:#f4f5f8;border-radius:8px;overflow:hidden;cursor:zoom-in;box-shadow:0 3px 14px #17171b06}.ui-image-button img{width:100%;height:100%;object-fit:contain;display:block}.ui-compare .ui-image-button{height:390px}.ui-change{margin:20px 0 0;font-size:27px;line-height:1.5;font-weight:600;color:var(--ink)}.ui-enlarge-hint{position:absolute;left:64px;bottom:22px;font-size:17px;line-height:1.4;margin:0;color:var(--ink-2);font-weight:500;text-align:left}
.ui-start{display:grid;grid-template-columns:720px 1fr;gap:36px;align-items:center;min-height:0;flex:1}.ui-start .ui-image-button{height:488px}.ui-start ul{padding:0;list-style:none;margin:0;display:grid;gap:30px;font-size:29px;line-height:1.5}.ui-start li{padding-left:18px;border-left:4px solid var(--accent)}
.ui-journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:center;flex:1}.ui-journey .ui-image-button{height:330px}.ui-journey figcaption{font-size:24px;line-height:1.5;margin-top:20px;color:var(--ink)}
.process-map{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;flex:1;min-height:0;margin-top:28px}.process-map section{border-top:3px solid var(--accent);padding-top:16px}.process-map h3{font-size:31px;margin:0 0 18px;color:var(--accent)}.process-map ol{padding:0;list-style:none;display:grid;gap:12px;margin:0;font-size:28px;font-weight:500;line-height:1.4}.process-map section:first-child ol{grid-template-columns:1fr 1fr}.process-note{font-size:25px;margin:20px 0 0;line-height:1.5;color:var(--ink-2)}
.ui-states{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:40px;flex:1;min-height:0;align-items:start}.ui-states .ui-image-button{height:450px}.ui-states .is-mobile{height:450px;background:white}.ui-states figcaption{font-size:23px;line-height:1.4;margin-top:14px}
/* =========================================================
   14. partsKit — 9段階あとのUIで使っている部品を、実物の値で並べる
   色・角丸・高さはスライドのトークンではなく demo_a/steps/09 の値をそのまま写している。
   画像ではなく生のHTMLなので、そろっているかどうかが原寸で確かめられる
   ========================================================= */
.l-partsKit{
  --app-surface:#fff; --app-subtle:#f2f5f9; --app-text:#1d293d; --app-muted:#55647a;
  --app-line:#e1e7ef; --app-control:#7b8798; --app-accent:#1d4ed8;
  --app-important:#87440f; --app-important-soft:#fff4df; --app-error:#b42318;
}
.kit{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 28px;
  flex:1; min-height:0; align-content:center;
}
.kit-group{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.kit-label{ margin:0; font-size:19px; font-weight:700; letter-spacing:.02em; color:var(--accent); }
.kit-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.kit-row-v{ flex-direction:column; align-items:stretch; gap:8px; }
.kit-note{ margin:0; font-size:16px; line-height:1.5; color:var(--ink-2); }

.l-partsKit .ui-btn,
.l-partsKit .ui-input,
.l-partsKit .ui-select{
  box-sizing:border-box; height:48px; display:inline-flex; align-items:center;
  padding:10px 18px; border-radius:10px; font-size:16px; line-height:1.5;
  border:1px solid var(--app-control); background:var(--app-surface); color:var(--app-text);
}
.l-partsKit .ui-btn{ gap:8px; font-weight:600; }
.l-partsKit .ui-btn.is-primary{
  background:var(--app-accent); border-color:var(--app-accent); color:#fff;
  box-shadow:0 2px 4px #1d4ed81a;
}
.l-partsKit .ui-btn[disabled]{
  background:var(--app-subtle); color:var(--app-muted); border-color:var(--app-line);
}
.l-partsKit .ui-input,
.l-partsKit .ui-select{ color:var(--app-muted); }
.l-partsKit .ui-select::after{ content:"▾"; margin-left:16px; color:var(--app-text); }

.l-partsKit .ui-seg{
  display:inline-flex; width:fit-content; gap:4px; padding:4px;
  border-radius:12px; background:#e9eef5; border:1px solid #e3e8f0;
}
.l-partsKit .ui-seg span{
  display:inline-flex; align-items:center; min-height:40px; padding:8px 18px;
  border-radius:8px; font-size:16px; color:var(--app-muted); border:1px solid transparent;
}
.l-partsKit .ui-seg .is-on{
  background:#fff; color:var(--app-accent); border-color:#dae1eb;
  box-shadow:0 1px 3px #172b4d12; font-weight:700;
}

.l-partsKit .ui-task{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border:1px solid var(--app-line); border-radius:10px; background:var(--app-surface);
  font-size:17px; font-weight:600; color:var(--app-text);
}
.l-partsKit .ui-task.is-done{
  background:#f0f5ff; color:var(--app-muted); text-decoration:line-through;
}
.l-partsKit .ui-check{
  position:relative; flex:none; width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--app-control); background:#fff;
}
.l-partsKit .ui-check.is-on{ background:var(--app-accent); border-color:var(--app-accent); }
.l-partsKit .ui-check.is-on::after{
  content:""; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}

.l-partsKit .ui-badge{
  display:inline-flex; align-items:center; padding:4px 9px; border-radius:6px;
  font-size:15px; font-weight:500; border:1px solid #e7ebf0;
  background:var(--app-subtle); color:var(--app-muted);
}
.l-partsKit .ui-badge.is-important{
  background:var(--app-important-soft); color:var(--app-important); border-color:#f3e2bf;
}
.l-partsKit .ui-error{ font-size:16px; line-height:1.6; color:var(--app-error); }
.l-partsKit .ui-status{
  display:flex; align-items:center; gap:8px;
  font-size:16px; line-height:1.6; color:var(--app-muted);
}
.l-partsKit .ui-status::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--app-accent);
}
.l-partsKit .s-note{ margin:16px 0 0; font-size:20px; }

/* =========================================================
   13a. shot — 配布物のキャプチャを1枚、残りの高さいっぱいに置く
   ========================================================= */
/* キャプチャが主役なので、見出し回りの余白を削って画像の高さに回す */
.l-shot{ padding:40px 64px 36px; }
.l-shot .step-eyebrow{ margin-bottom:8px; }
.l-shot .step-title{ margin-bottom:16px; }
.shot{ flex:1; min-height:0; display:flex; justify-content:center; }
.shot .ui-image-button{
  width:auto; max-width:100%; height:100%;
  background:var(--surface); box-shadow:0 6px 24px #17171b0f;
}
.shot .ui-image-button img{ width:auto; height:100%; object-fit:contain; }
.l-shot .s-note{ margin:12px 0 0; font-size:20px; text-align:center; }

/* =========================================================
   13b. flawCards — ダサさの症状を6枚に分け、直すSTEPまで書く
   アイコンは全カード共通の1枚。無いときは丸ごと消えて文字だけになる
   ========================================================= */
.flaws{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 20px;
  flex:1; min-height:0; align-content:center;
}
.flaw{
  display:flex; flex-direction:column; min-width:0;
  padding:18px 20px 16px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-m);
}
.flaw-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.flaw-ic{
  position:relative; flex:none; width:46px; height:46px; border-radius:50%;
  overflow:hidden; background:var(--surface); border:1px solid var(--line);
}
/* 元画像は上半身1枚なので、そのまま縮めると顔がつぶれる。
   頭のあたりを拡大して丸に収める。画像を差し替えたらこの3値で合わせ直す */
/* app.css の img{max-width:100%} を外さないと、この拡大が打ち消される */
.flaw-ic img{ position:absolute; max-width:none; width:198%; height:auto; left:-72%; top:4%; }
.flaw.no-ic .flaw-ic{ display:none; }
.flaw-n{ font-size:20px; font-weight:700; letter-spacing:.10em; color:var(--ink-4); }
.flaw-t{ margin:0; font-size:27px; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
.flaw-d{ margin:8px 0 0; font-size:19px; line-height:1.5; color:var(--ink-2); flex:1; }
.flaw-fix{
  margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line-2);
  font-size:17px; font-weight:600; color:var(--accent);
}

/* =========================================================
   14b. video — ローカルのMP4を1本だけ大きく見せる
   ========================================================= */
.vid{ margin:0; flex:1; min-height:0; display:flex; }
.vid-player{
  width:100%; height:100%; min-height:0; object-fit:contain;
  background:#101014; border:1px solid var(--line); border-radius:12px;
}
.vid-ph{ display:none; }
.vid.is-missing .vid-player{ display:none; }
.vid.is-missing .vid-ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  flex:1; padding:32px; text-align:center;
  border:2px dashed var(--line-2); border-radius:12px; background:var(--bg);
}
.vid-ph b{ font-size:24px; font-weight:700; color:var(--ink-2); }
.vid-ph small{ font-size:20px; line-height:1.6; color:var(--ink-3); }
.vid-ph a{ font-size:22px; color:var(--accent); text-underline-offset:6px; }
.l-video .s-note{ margin:18px 0 0; font-size:22px; }

/* =========================================================
   15. grayCompare — 色を抜いた状態で、主役と操作が読み取れるか確かめる
   ========================================================= */
.ui-compare.is-gray .ui-image-button{ height:344px; }
.ui-compare.is-gray .ui-image-button img{ filter:grayscale(1); }
.ui-compare.is-gray figcaption span{ background:#e8e8ec; color:#4a4a52; }
.ui-compare.is-gray figcaption span.is-after{ background:#d6d6dc; color:#26262b; }
.gray-verdict{
  margin:18px 0 0; padding-left:16px; border-left:4px solid var(--line-2);
  font-size:23px; line-height:1.5; font-weight:600;
}
.gray-verdict.is-ng{ color:var(--ink-2); }
.gray-verdict.is-ok{ color:var(--ink); border-left-color:var(--accent); }

.one-shot-body{margin-top:32px;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:24px}.one-shot-steps{display:flex;flex-direction:column;gap:18px}.one-shot-steps p{margin:0;display:flex;align-items:center;gap:20px;font-size:32px}.one-shot-steps b{width:46px;height:46px;display:grid;place-items:center;background:var(--accent-s);color:var(--accent);border-radius:50%;font-size:25px}.one-shot-actions{display:flex;align-items:center;gap:24px}.text-button{font-size:24px;text-decoration:underline;text-underline-offset:6px;color:var(--accent);padding:10px}.one-shot-body .s-note{font-size:26px}.bonus-body{margin-top:40px}.bonus-name{font-size:43px;margin:0 0 28px;color:var(--accent)}.bonus-body ul{margin:0 0 32px;padding-left:1.2em;font-size:32px;line-height:1.8}.bonus-link{color:var(--accent);font-size:25px;text-underline-offset:6px}