/* ============================================================
   slide-formats.css
   グロービス参考スライドから抽出した 11 種類のスライドタイプ。
   構造のみ採用、カラーは HP ブランド青で統一。
   全タイプ:
     - 1920×1080 内に収まるサイズ
     - センター揃え徹底
     - 角丸の上端ラインなし / 装飾英語なし / navy 中立シャドウ
   ============================================================ */

/* 共通: タイプ用ステージ余白
   - 上: ヘッダー（タイトル）分。h1 がない場合も「空想ヘッダー」分として確保
   - 下: フッター chrome（ロゴ + カウンター）と被らない余白を追加
   --safe (88px) ＋ 下に chrome 用 +32px ＝ 120px
   有効描画領域 ≒ 1744 × 872 */
.slide[class*="fmt-"] {
  padding: var(--safe) var(--safe) calc(var(--safe) + 32px);
}

/* 共通: 日本語の改行は文節で（中途半端な位置で切らない）
   word-break: keep-all → 日本語の「単語塊」を分断しない
   line-break: strict   → 厳格な禁則処理（句読点が行頭に来ない）
   ※ overflow-wrap は使わない。anywhere を入れると禁則を破壊して
     `、` が行頭に来てしまう。改行制御は <br> / <wbr> を使う。 */
.slide[class*="fmt-"],
.slide[class*="fmt-"] h1,
.slide[class*="fmt-"] h2,
.slide[class*="fmt-"] h3,
.slide[class*="fmt-"] p,
.slide[class*="fmt-"] li,
.slide[class*="fmt-"] td,
.slide[class*="fmt-"] div,
.slide[class*="fmt-"] span {
  word-break: keep-all;
  line-break: strict;
}

/* 共通: スライド上部に小さなタグ（カテゴリ／セクション帯） */
.fmt-tag {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: var(--lt-accent-primary);
  background: var(--lt-blue-50);
  border: 1px solid var(--lt-blue-100);
  padding: 6px 18px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  align-self: flex-start;
}

.note {
  font-size: 0.8em;
}

/* 共通: 1番上の薄い区切り */
.fmt-rule {
  width: 100%;
  height: 1px;
  background: var(--lt-border);
  margin: 16px 0;
}

/* ============================================================
   1. fmt-chapter — 章扉
   構成: 番号バッジ + 巨大タイトル + サブタイトルピル
   ============================================================ */
.fmt-chapter {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fmt-chapter .ch-num {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  background: var(--lt-accent-primary);
  padding: 14px 40px;
  border-radius: 999px;
  margin-bottom: 44px;
  letter-spacing: 0.04em;
}
.fmt-chapter h1 {
  font-size: 180px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--lt-navy);
  letter-spacing: 0.01em;
  margin-bottom: 48px;
  border-bottom: none;
  padding-bottom: 0;
}
.fmt-chapter .ch-sub {
  display: inline-block;
  font-size: 44px;
  font-weight: 700;
  color: var(--lt-accent-primary);
  background: var(--lt-blue-50);
  border: 1px solid var(--lt-blue-100);
  padding: 18px 48px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ============================================================
   2. fmt-agenda — アジェンダ／目次
   構成: カテゴリタグ + 番号付き 4-5 行（区切り線で区切る）
   ============================================================ */
.fmt-agenda {
  align-items: flex-start;
  justify-content: center;
}
.fmt-agenda .fmt-tag {
  align-self: flex-start;
  font-size: 32px;
  padding: 12px 28px;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}
.fmt-agenda .ag-list {
  width: 100%;
  max-width: 1744px;
  margin: 0;
  list-style: none;
  padding: 0;
}
.fmt-agenda .ag-list li {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 48px;
  padding: 40px 16px;
  border-bottom: 1px solid var(--lt-border);
  font-size: 52px;
  font-weight: 700;
  color: var(--lt-navy);
  line-height: 1.4;
  text-align: left;
}
.fmt-agenda .ag-list li:last-child { border-bottom: none; }
.fmt-agenda .ag-list .num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 72px;
  font-weight: 800;
  color: var(--lt-accent-primary);
  letter-spacing: 0.02em;
}

/* ============================================================
   3. fmt-term — 用語定義
   構成: 上部タグ（用語）+ 中央に大きな定義文 + 下部に補足任意
   ============================================================ */
.fmt-term {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fmt-term .term-pill {
  display: inline-block;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  background: var(--lt-accent-primary);
  padding: 18px 48px;
  border-radius: 999px;
  margin-bottom: 56px;
  letter-spacing: 0.02em;
}
.fmt-term .definition {
  font-size: 96px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--lt-navy);
  max-width: 1700px;
  letter-spacing: 0.01em;
}
.fmt-term .definition .accent { color: var(--lt-accent-primary); }
.fmt-term .definition .small {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--lt-charcoal);
}
.fmt-term .term-supp {
  margin-top: 32px;
  font-size: 28px;
  font-weight: 500;
  color: var(--lt-charcoal);
  max-width: 1300px;
  line-height: 1.7;
}

/* ============================================================
   4. fmt-decompose — 頭文字分解（GRC等を3要素）
   構成: 横3並び：頭文字大 + ラベル + 説明 + 下部統合帯
   ============================================================ */
.fmt-decompose {
  justify-content: center;
}
.fmt-decompose h1 {
  font-size: 64px;
  font-weight: 800;
  color: var(--lt-navy);
  text-align: center;
  margin-bottom: 36px;
  border-bottom: none;
  padding-bottom: 0;
  letter-spacing: 0.01em;
}
.fmt-decompose .dec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 32px;
}
.fmt-decompose .dec-item {
  text-align: center;
  background: #fff;
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.fmt-decompose .dec-letter {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 140px;
  font-weight: 800;
  color: var(--lt-accent-primary);
  line-height: 1;
  letter-spacing: 0.01em;
}
.fmt-decompose .dec-label {
  margin-top: 12px;
  font-size: 32px;
  font-weight: 800;
  color: var(--lt-navy);
}
.fmt-decompose .dec-desc {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 500;
  color: var(--lt-charcoal);
  line-height: 1.6;
}
.fmt-decompose .dec-foot {
  background: var(--lt-blue-50);
  border-radius: 999px;
  padding: 20px 36px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--lt-navy);
}

/* ============================================================
   5. fmt-compare — 比較表（行：項目／列：観点）
   ============================================================ */
.fmt-compare {
  justify-content: flex-start;
}
.fmt-compare h1 {
  font-size: 56px;
  font-weight: 800;
  color: var(--lt-navy);
  margin-bottom: 32px;
  border-bottom: 4px solid var(--lt-accent-primary);
  padding-bottom: 14px;
  display: inline-block;
  letter-spacing: 0.01em;
}
.fmt-compare .cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.fmt-compare .cmp-table tr.row {
  background: var(--lt-surface-2);
}
.fmt-compare .cmp-table tr.row.highlight {
  background: var(--lt-blue-50);
  outline: 1px solid var(--lt-accent-primary);
}
.fmt-compare .cmp-table td {
  padding: 26px 28px;
  font-size: 26px;
  font-weight: 500;
  color: var(--lt-charcoal);
  vertical-align: top;
  line-height: 1.6;
}
.fmt-compare .cmp-table td.label {
  width: 220px;
  font-size: 32px;
  font-weight: 800;
  color: var(--lt-navy);
  white-space: nowrap;
  border-radius: 12px 0 0 12px;
}
.fmt-compare .cmp-table td.body {
  border-radius: 0 12px 12px 0;
}
.fmt-compare .cmp-source {
  margin-top: 18px;
  font-size: 14px;
  color: var(--lt-gray-light);
  line-height: 1.6;
}

/* ============================================================
   6. fmt-steps — ステップカード横並び（3-4枚）
   構成: 上部見出し + 番号付きカード + 下部に問いかけ帯
   ============================================================ */
.fmt-steps {
  justify-content: center;
}
.fmt-steps h1 {
  font-size: 64px;
  font-weight: 800;
  color: var(--lt-navy);
  margin-bottom: 36px;
  border-bottom: none;
  padding-bottom: 0;
  text-align: left;
  letter-spacing: 0.01em;
}
.fmt-steps .stp-grid {
  display: grid;
  gap: 28px;
  margin-bottom: 32px;
}
.fmt-steps .stp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fmt-steps .stp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.fmt-steps .stp-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.fmt-steps .stp-grid.cols-5 .stp-card { padding: 36px 22px; }
.fmt-steps .stp-grid.cols-5 .stp-num { font-size: 56px; margin-bottom: 14px; }
.fmt-steps .stp-grid.cols-5 .stp-label { font-size: 28px; }
.fmt-steps .stp-card {
  background: #fff;
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  padding: 44px 32px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}
.fmt-steps .stp-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 64px;
  font-weight: 800;
  color: var(--lt-accent-primary);
  line-height: 1;
  margin-bottom: 18px;
}
.fmt-steps .stp-label {
  font-size: 32px;
  font-weight: 700;
  color: var(--lt-navy);
  line-height: 1.5;
}
.fmt-steps .stp-foot {
  background: var(--lt-accent-primary);
  color: #fff;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  padding: 24px 36px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ============================================================
   7. fmt-phases — テーブル形式リスト（フェーズ別等）
   構成: 上部タイトル + 2列表（左：名称、右：概要）+ 現在行ハイライト
   ============================================================ */
.fmt-phases {
  justify-content: flex-start;
}
.fmt-phases h1 {
  font-size: 56px;
  font-weight: 800;
  color: var(--lt-navy);
  margin-bottom: 32px;
  border-bottom: none;
  padding-bottom: 0;
  letter-spacing: 0.01em;
}
.fmt-phases .ph-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
  border: 1px solid var(--lt-border);
}
.fmt-phases .ph-table thead th {
  text-align: left;
  background: var(--lt-surface-2);
  padding: 22px 32px;
  font-size: 24px;
  font-weight: 700;
  color: var(--lt-charcoal);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--lt-border);
}
.fmt-phases .ph-table tbody tr {
  border-bottom: 1px solid var(--lt-border);
}
.fmt-phases .ph-table tbody tr:last-child { border-bottom: none; }
.fmt-phases .ph-table tbody td {
  padding: 26px 32px;
  vertical-align: top;
  font-size: 26px;
  color: var(--lt-charcoal);
  line-height: 1.6;
}
.fmt-phases .ph-table tbody td.name {
  width: 260px;
  font-weight: 700;
  color: var(--lt-navy);
  font-size: 30px;
}
.fmt-phases .ph-table tbody tr.current {
  background: var(--lt-blue-50);
}
.fmt-phases .ph-table tbody tr.current td.name { color: var(--lt-accent-primary); }

/* ============================================================
   8. fmt-summary — 箇条書きまとめ
   構成: 上部見出し + 3-4 行の長め箇条書き、行間広め
   ============================================================ */
.fmt-summary {
  justify-content: center;
}
.fmt-summary h1 {
  font-size: 56px;
  font-weight: 800;
  color: var(--lt-navy);
  margin-bottom: 36px;
  border-bottom: 4px solid var(--lt-accent-primary);
  padding-bottom: 14px;
  display: inline-block;
  letter-spacing: 0.01em;
}
.fmt-summary .sum-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.fmt-summary .sum-list li {
  position: relative;
  padding: 26px 28px 26px 64px;
  font-size: 30px;
  font-weight: 600;
  color: var(--lt-navy);
  line-height: 1.7;
  background: #fff;
  border: 1px solid var(--lt-border);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.fmt-summary .sum-list li::before {
  content: "";
  position: absolute;
  left: 26px; top: 38px;
  width: 16px; height: 16px;
  background: var(--lt-accent-primary);
  border-radius: 50%;
}

/* ============================================================
   9. fmt-grid2x2 — 2×2 グリッド
   構成: 上部見出し + 4 タイル（1 つだけハイライト可）
   ============================================================ */
.fmt-grid2x2 {
  justify-content: center;
}
.fmt-grid2x2 h1 {
  font-size: 56px;
  font-weight: 800;
  color: var(--lt-navy);
  margin-bottom: 36px;
  border-bottom: none;
  padding-bottom: 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.fmt-grid2x2 .g-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.fmt-grid2x2 .g-tile {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  padding: 64px 36px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--lt-charcoal);
  line-height: 1.4;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmt-grid2x2 .g-tile.highlight {
  background: var(--lt-accent-primary);
  color: #fff;
  border-color: var(--lt-accent-primary);
  box-shadow: 0 12px 32px rgba(15,23,42,0.10);
}

/* ============================================================
   10. fmt-cards3 — 3カラムカード（並列カテゴリ）
   ============================================================ */
.fmt-cards3 {
  justify-content: center;
}
.fmt-cards3 h1 {
  font-size: 56px;
  font-weight: 800;
  color: var(--lt-navy);
  text-align: center;
  margin-bottom: 32px;
  border-bottom: none;
  padding-bottom: 0;
  letter-spacing: 0.01em;
}
.fmt-cards3 .lead {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  color: var(--lt-charcoal);
  margin-bottom: 32px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.fmt-cards3 .c3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.fmt-cards3 .c3-card {
  background: #fff;
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}
.fmt-cards3 .c3-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--lt-accent-primary);
  margin-bottom: 22px;
  letter-spacing: 0.01em;
}
.fmt-cards3 .c3-desc {
  font-size: 28px;
  font-weight: 500;
  color: var(--lt-charcoal);
  line-height: 1.7;
}

/* ============================================================
   11. fmt-message — 結論先出し（1行）
   構成: 中央に大きな1行 + 補助イラスト任意
   ============================================================ */
.fmt-message {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fmt-message .msg-lead {
  font-size: 30px;
  font-weight: 600;
  color: var(--lt-charcoal);
  margin-bottom: 28px;
}
.fmt-message h1 {
  font-size: 88px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--lt-navy);
  letter-spacing: 0.01em;
  max-width: 1700px;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
}
.fmt-message h1 .accent { color: var(--lt-accent-primary); }
.fmt-message .msg-supp {
  margin-top: 32px;
  font-size: 30px;
  font-weight: 500;
  color: var(--lt-charcoal);
  max-width: 1500px;
  line-height: 1.7;
}
/* QuoteMark を見出しの上に飾りで置く（任意） */
.fmt-message img.quote-mark {
  width: 88px;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}

/* ============================================================
   拡張: fmt-cards3 の説明部分に <ul> を許容（複数段落）
   ============================================================ */
.fmt-cards3 .c3-card .c3-desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.fmt-cards3 .c3-card .c3-desc ul li {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--lt-charcoal);
  padding-left: 22px;
  position: relative;
}
.fmt-cards3 .c3-card .c3-desc ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 18px;
  width: 8px; height: 8px;
  background: var(--lt-accent-primary);
  border-radius: 50%;
}
/* タイトル下に1px線（参考画像の3カラム見出し下線） */
.fmt-cards3 .c3-card .c3-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lt-accent-primary);
  margin-bottom: 18px;
}
/* アイコン用枠（任意） */
.fmt-cards3 .c3-card .c3-icon {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 64px;
  color: var(--lt-accent-primary);
}

/* ============================================================
   12. fmt-matrix — 3 列マトリクス（左軸 / 中央マトリクス / 右軸 + 補足帯）
   構成: [左] 縦 4 項目 × [中央] 業務タグマトリクス × [右] 縦 4 項目 + [最右] 縦帯
   ============================================================ */
.fmt-matrix {
  justify-content: center;
}
.fmt-matrix h1 {
  font-size: 64px;
  font-weight: 800;
  color: var(--lt-navy);
  text-align: center;
  margin-bottom: 32px;
  border-bottom: none;
  padding-bottom: 0;
  letter-spacing: 0.01em;
}
/* 全セルを 1 つの grid に置いて、行を確実に揃える
   行高を 130-160px に上限制限し、有効スペース 872px 内に収める */
.fmt-matrix .mx-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr) 300px 80px;
  grid-template-rows: 72px repeat(4, minmax(120px, 160px));
  gap: 16px;
  align-items: stretch;
  max-width: 1744px;
  margin: 0 auto;
}
.fmt-matrix .mx-grid .mx-col-head {
  background: var(--lt-blue-50);
  border: 1px solid var(--lt-blue-100);
  color: var(--lt-accent-primary);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmt-matrix .mx-grid .mx-col-head.center { grid-column: span 2; }
.fmt-matrix .mx-grid .mx-col-head.empty {
  background: transparent;
  border: none;
}
.fmt-matrix .mx-grid .mx-axis-item {
  background: var(--lt-blue-50);
  border: 1px solid var(--lt-blue-100);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: var(--lt-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
.fmt-matrix .mx-grid .mx-axis-item.highlight {
  background: var(--lt-accent-primary);
  color: #fff;
  border-color: var(--lt-accent-primary);
}
.fmt-matrix .mx-grid .mx-cell {
  background: #fff;
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  padding: 20px 22px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: var(--lt-charcoal);
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmt-matrix .mx-grid .mx-side-cell {
  grid-column: 5;
  grid-row: 2 / span 4;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  padding: 24px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--lt-charcoal);
  line-height: 1.7;
  writing-mode: vertical-rl;
  letter-spacing: 0.04em;
}
.fmt-matrix .mx-side {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-border);
  border-radius: 14px;
  padding: 28px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--lt-charcoal);
  line-height: 1.8;
  writing-mode: vertical-rl;
  letter-spacing: 0.06em;
}

/* ============================================================
   拡張: fmt-phases に "過去フェード" バリエーション
   `tbody tr.past` で opacity 0.4
   `tbody tr.current` は既存通り強調
   ============================================================ */
.fmt-phases .ph-table tbody tr.past {
  opacity: 0.4;
}
.fmt-phases .ph-table tbody tr.past td.name { color: var(--lt-gray-light); }
/* current 行を太く強調 */
.fmt-phases .ph-table tbody tr.current td {
  font-size: 28px;
  font-weight: 700;
}
.fmt-phases .ph-table tbody tr.current td.name {
  color: var(--lt-accent-primary);
  font-size: 32px;
}

/* ============================================================
   13. fmt-cover — エピソード表紙（ロゴロックアップ + 大見出し + キャッチ）
   構成: 中央ロゴ + h1（青ハイライト可）+ 左罫線つきキャッチコピー + 左下シンボル
   ============================================================ */
.fmt-cover {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fmt-cover .cover-lockup {
  margin-bottom: 48px;
  line-height: 0;
}
.fmt-cover .cover-lockup img {
  height: 80px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.fmt-cover h1 {
  font-size: 80px;
  font-weight: 800;
  line-height: 1.22;
  color: var(--lt-navy);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.fmt-cover h1 .accent { color: var(--lt-accent-primary); }
.fmt-cover .cover-catch {
  display: inline-block;
  font-size: 28px;
  font-weight: 600;
  color: var(--lt-charcoal);
  border-left: 6px solid var(--lt-accent-primary);
  padding-left: 22px;
  text-align: left;
}
.fmt-cover .cover-symbol {
  position: absolute;
  left: var(--safe);
  bottom: var(--safe);
  width: 88px;
  height: 67px;
}
.fmt-cover .cover-symbol img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   14. fmt-case — Before/After 事例（人物プロフィール + 数値比較）
   構成: 上部に人物プロフィール（avatar/name/meta）+
         下部に Before / → / After の 3 カラム数値比較カード
   ============================================================ */
.fmt-case {
  justify-content: center;
}
.fmt-case .case-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}
.fmt-case .avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0%, var(--lt-blue-100) 70%, var(--lt-blue-300) 100%);
  border: 6px solid #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 96px;
  margin-bottom: 18px;
}
.fmt-case .name {
  font-size: 36px; font-weight: 700;
  color: var(--lt-navy);
  margin-bottom: 4px;
}
.fmt-case .meta {
  font-size: 22px; color: var(--lt-charcoal);
}
.fmt-case .ba-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
}
.fmt-case .ba {
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
  text-align: left;
}
.fmt-case .ba.before {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-border);
}
.fmt-case .ba.after {
  background: var(--lt-blue-50);
  border: 1px solid var(--lt-accent-primary);
}
.fmt-case .ba .tag {
  display: inline-block;
  font-size: 22px; font-weight: 700;
  color: var(--lt-charcoal);
  margin-bottom: 14px;
}
.fmt-case .ba.after .tag { color: var(--lt-accent-primary); }
.fmt-case .ba .topic {
  font-size: 24px; font-weight: 600;
  color: var(--lt-charcoal);
  margin-bottom: 6px;
}
.fmt-case .ba .num-row {
  display: flex; align-items: baseline; gap: 10px;
}
.fmt-case .ba .num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 96px; font-weight: 800;
  color: var(--lt-navy);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.fmt-case .ba.after .num { color: var(--lt-accent-primary); }
.fmt-case .ba .num.jp { font-family: var(--lt-font-jp); }
.fmt-case .ba .unit {
  font-size: 28px; font-weight: 700;
  color: var(--lt-charcoal);
}
.fmt-case .ba .desc {
  margin-top: 12px;
  font-size: 22px; font-weight: 500;
  color: var(--lt-charcoal); line-height: 1.6;
}
.fmt-case .ba-arrow {
  align-self: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 56px; font-weight: 800;
  color: var(--lt-accent-primary);
  line-height: 1;
}

/* 共通: 括弧（）内の補足は周囲の80%サイズ
   `<span class="note">（52歳）</span>` のように使用 */
.note {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--lt-charcoal);
}