/* ==========================================================================
   事業紹介ページの図（page-service-fc.php でだけ読む）
   --------------------------------------------------------------------------
   2026-10-20 全面作り直し。オーナー指摘「グラフとか図が AI が作りました感全開すぎてチグハグ」。

   ★ 何がちぐはぐだったか（1440px で全部撮って見た）
     1. 9 つの図が全部「灰色の角丸の箱＋小さな青い題＋中身」の同じ型で、管理画面のパネルに見えた
     2. 図だけ CRM の画面の言葉（11〜12px の字・ピルの札・丸い番号・✓×・アイコンの丸）で描かれ、
        ページの頭（大きな字と写真のコーポレートの顔）と別の会社に見えた
     3. 同じ数字を 2 回出していた（35 日が数字の行と棒の両方）
     4. 出現アニメとカウントアップ（トンマナ §5 で「使わない」と決めたもの）

   ★ 新しい決まり（トンマナ.md の実測と、Visional の決算グラフの組み方を合わせた）
     - 図は箱に入れない。上に 2px の罫を 1 本引き、題 → 図 → 注 の順に本文の上へ直接置く
       （新聞・決算資料のグラフと同じ置き方。罫は「囲み」ではなく「区切り」に使う / トンマナ §4）
     - 色は紺 1 色と灰。強調したい 1 つだけ紺、残りは灰（#b9c3d0）
     - 字は 12px 未満を作らない（トンマナ §1）。数字は Figtree、和文は Noto Sans JP
     - 棒は細く・角はほぼ立てる（2px）。値は棒の外
     - 角丸・影・ピル・アイコン・番号の丸は使わない。出現の演出もしない（fc-figures.js は読まない）
   ========================================================================== */

.fig {
  --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  --ink: var(--color-oki-black);
  --ink2: #6b6b6b;                       /* トンマナ §3 の灰（字）。--color-oki-gray2 は未定義だった */
  --key: var(--color-oki-red);           /* 実体はサイトの主色 #003678 */
  --key-deep: var(--color-oki-red2);
  --soft: #b9c3d0;                       /* 強調しない棒。紺を白に寄せた灰 */
  --line: var(--color-oki-line-gray);
  --num: "Figtree", "Noto Sans JP", system-ui, sans-serif;
  margin: calc(36 * var(--u)) 0 calc(44 * var(--u));
  padding: calc(14 * var(--u)) 0 0;
  border-top: 2px solid var(--ink);
}
.fig > :first-child { margin-top: 0; }
.fig > :last-child  { margin-bottom: 0; }
.fig__title {
  margin: 0 0 calc(22 * var(--u));
  color: var(--ink);
  font-weight: 700;
  font-size: calc(14 * var(--u));
  line-height: 1.5;
  letter-spacing: .04em;
}
.fig__note {
  margin: calc(18 * var(--u)) 0 0;
  color: var(--ink2);
  font-size: calc(12 * var(--u));
  line-height: 1.8;
}
.fig__note b { color: var(--ink); }

/* ══ お金と人の向き ════════════════════════════════════════════════════
   SP: 縦に 3 者。PC: 横一列に 3 者、その下に「派遣会社 → 加盟店」へ戻る紺の線。 */
.fig-money__grid { display: grid; gap: calc(10 * var(--u)); }
.fig-money__node { padding: 0; }
.fig-money__who { display: block; font-weight: 800; font-size: calc(19 * var(--u)); line-height: 1.4; letter-spacing: .02em; }
.fig-money__node[data-you="true"] .fig-money__who { color: var(--key); }
.fig-money__sub { display: block; margin-top: calc(4 * var(--u)); color: var(--ink2); font-size: calc(13 * var(--u)); line-height: 1.7; }
.fig-money__step {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  margin: 0; color: var(--ink2); font-size: calc(12 * var(--u)); line-height: 1.5;
}
.fig-money__step svg { flex: none; width: calc(14 * var(--u)); height: calc(20 * var(--u)); color: var(--ink); transform: rotate(90deg); }
.fig-money__lane {
  position: relative;
  margin: calc(8 * var(--u)) 0 0;
  padding: calc(10 * var(--u)) 0 0;
  font-size: calc(15 * var(--u)); font-weight: 700; line-height: 1.6;
}
.fig-money__lane small { display: block; font-size: calc(12 * var(--u)); font-weight: 500; color: var(--ink2); }
.fig-money__lane[data-kind="money"] { border-top: 2px solid var(--key); color: var(--key); }
.fig-money__lane[data-kind="none"]  { border-top: 1px dashed var(--color-oki-gray); color: var(--ink2); }
.fig-money__head { display: none; }

/* ══ 役割の分かれ方 ════════════════════════════════════════════════════ */
.fig-roles__grid { display: grid; gap: calc(14 * var(--u)); }
.fig-role { padding-top: calc(10 * var(--u)); border-top: 1px solid var(--ink); }
.fig-role[data-owner="fc"] { border-top: 3px solid var(--key); padding-top: calc(8 * var(--u)); }
.fig-role__who { display: block; color: var(--ink2); font-weight: 700; font-size: calc(12 * var(--u)); letter-spacing: .06em; }
.fig-role[data-owner="fc"] .fig-role__who { color: var(--key); }
.fig-role__name { display: block; margin-top: calc(4 * var(--u)); font-weight: 800; font-size: calc(19 * var(--u)); line-height: 1.4; }
.fig-role__name i { margin-right: calc(10 * var(--u)); color: var(--ink2); font-family: var(--num); font-style: normal; font-weight: 600; font-size: calc(13 * var(--u)); }
.fig-role__desc { margin: calc(6 * var(--u)) 0 0; color: var(--ink2); font-size: calc(13 * var(--u)); line-height: 1.8; }
.fig-role__desc b { display: block; color: var(--ink); font-size: calc(14 * var(--u)); }

/* ══ 自社だけで始めると / 加盟した日から ═══════════════════════════════ */
.fig-vs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fig-vs th {
  padding: 0 calc(12 * var(--u)) calc(10 * var(--u)) 0;
  border-bottom: 1px solid var(--ink);
  text-align: left; font-weight: 700; font-size: calc(13 * var(--u)); letter-spacing: .04em; color: var(--ink2);
}
.fig-vs th + th { color: var(--key); }
.fig-vs td {
  padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: calc(14 * var(--u)); line-height: 1.6; color: var(--ink2);
}
.fig-vs td + td { color: var(--ink); font-weight: 700; font-size: calc(15 * var(--u)); }

/* ══ 図の頭の 1 つの数字 ═══════════════════════════════════════════════ */
.fig-key { display: flex; align-items: flex-end; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(18 * var(--u)); margin: 0 0 calc(26 * var(--u)); }
.fig-key__n { margin: 0; font-weight: 700; font-size: calc(18 * var(--u)); line-height: 1; }
.fig-key__n b { margin-right: calc(4 * var(--u)); color: var(--key); font-family: var(--num); font-weight: 700; font-size: calc(56 * var(--u)); letter-spacing: -.02em; }
.fig-key__cap { margin: 0 0 calc(4 * var(--u)); color: var(--ink2); font-size: calc(13 * var(--u)); line-height: 1.7; }

/* ══ 横棒（加盟店ごとの日数 / 入金までの期間）════════════════════════
   名前 | 棒 | 値 の 3 列。行の間を 0 にして、棒の根元の線（左の罫）を 1 本につなげる。
   棒の長さは値そのものの比（最小幅で太らせない）。 */
.fig-bars { position: relative; display: grid; gap: 0; margin: 0 0 calc(26 * var(--u)); }
.fig-bar,
.fig-bars__median,
.fig-axis {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) 1fr calc(84 * var(--u));
  align-items: center;
  gap: calc(12 * var(--u));
}
.fig-bar__label { color: var(--ink2); font-size: calc(12 * var(--u)); font-weight: 700; line-height: 1.35; }
.fig-bar__track { position: relative; height: calc(30 * var(--u)); border-left: 1px solid var(--ink); }
.fig-bar__fill {
  position: absolute; top: calc(8 * var(--u)); bottom: calc(8 * var(--u));
  left: var(--from, 0%); width: var(--w, 50%);
  border-radius: 0 2px 2px 0;
  background-color: var(--key);
}
.fig-bar[data-tone="soft"] .fig-bar__fill { background-color: var(--soft); }
.fig-bar__fill[data-range="true"] {
  background-color: transparent;
  background-image: repeating-linear-gradient(135deg, var(--soft) 0 1.5px, transparent 1.5px 5px);
  border: 1px solid var(--soft);
}
.fig-bar__value { white-space: nowrap; font-size: calc(12 * var(--u)); color: var(--ink2); }
.fig-bar__value b { margin-right: 2px; color: var(--ink); font-family: var(--num); font-weight: 700; font-size: calc(16 * var(--u)); }
.fig-bar__value small { font-size: calc(12 * var(--u)); }
.fig-bars__median { position: absolute; inset: 0; pointer-events: none; }
.fig-bars__median-area { position: relative; height: 100%; }
.fig-median { position: absolute; top: 0; bottom: 0; left: var(--at, 50%); border-left: 1px dashed var(--key-deep); }
.fig-median__label {
  position: absolute; top: 100%; left: 0; transform: translateX(-50%);
  margin-top: calc(4 * var(--u)); white-space: nowrap;
  color: var(--key-deep); font-weight: 700; font-size: calc(12 * var(--u));
}
.fig-axis { margin: calc(-18 * var(--u)) 0 calc(14 * var(--u)); }
.fig-axis__line {
  display: flex; justify-content: space-between;
  padding-top: calc(6 * var(--u)); border-top: 1px solid var(--ink);
  color: var(--ink2); font-family: var(--num); font-size: calc(12 * var(--u));
}
.fig-axis__line i { font-style: normal; }
/* 入金までの比較は、ラベルが 2 語ずつあるので名前の列を広げ、行も高くする */
.fig-cash .fig-bar,
.fig-cash .fig-axis { grid-template-columns: calc(96 * var(--u)) 1fr calc(92 * var(--u)); }
.fig-cash .fig-bar__track { height: calc(44 * var(--u)); }
.fig-cash .fig-bar__fill { top: calc(14 * var(--u)); bottom: calc(14 * var(--u)); }
.fig-cash .fig-bars { margin-bottom: calc(22 * var(--u)); }
.fig-cash__line { margin: 0; font-size: calc(14 * var(--u)); line-height: 1.7; }
.fig-cash__line b { color: var(--key); font-family: var(--num); font-size: calc(22 * var(--u)); }

/* ══ 分布（縦棒）════════════════════════════════════════════════════ */
.fig-hist {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end;
  gap: calc(8 * var(--u)); height: calc(150 * var(--u));
  border-bottom: 1px solid var(--ink);
}
.fig-hist__col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.fig-hist__n { margin-bottom: calc(6 * var(--u)); font-family: var(--num); font-weight: 700; font-size: calc(13 * var(--u)); line-height: 1.2; }
.fig-hist__bar { height: var(--h, 20%); border-radius: 2px 2px 0 0; background-color: var(--key); }
.fig-hist__col[data-tone="soft"] .fig-hist__bar { background-color: var(--soft); }
.fig-hist__col[data-tone="soft"] .fig-hist__n { color: var(--ink2); }
.fig-hist__x, .fig-hist__span {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(8 * var(--u));
}
.fig-hist__x { margin: calc(8 * var(--u)) 0 0; }
.fig-hist__x span { color: var(--ink2); font-size: calc(12 * var(--u)); line-height: 1.3; text-align: center; }
.fig-hist__span { margin: calc(14 * var(--u)) 0 0; }
.fig-hist__span p {
  grid-column: 1 / 4; margin: 0; padding-top: calc(8 * var(--u));
  border-top: 2px solid var(--key);
  font-size: calc(13 * var(--u)); line-height: 1.6; white-space: nowrap;
}
.fig-hist__span b { color: var(--key); font-family: var(--num); font-size: calc(18 * var(--u)); }

/* ══ 段（加盟までの流れ）— 大きな番号と罫 ═══════════════════════════════ */
.fig-steps { margin: 0; padding: 0; list-style: none; counter-reset: fcstep; }
.fig-step {
  counter-increment: fcstep;
  display: grid; grid-template-columns: calc(52 * var(--u)) 1fr; column-gap: calc(8 * var(--u));
  padding: calc(16 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
}
.fig-step:first-child { padding-top: 0; }
.fig-step::before {
  content: counter(fcstep, decimal-leading-zero);
  grid-row: 1 / 3;
  color: var(--key); font-family: var(--num); font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1;
}
.fig-step__title { display: block; font-weight: 800; font-size: calc(16 * var(--u)); line-height: 1.5; }
.fig-step__text { grid-column: 2; margin: calc(4 * var(--u)) 0 0; color: var(--ink2); font-size: calc(13 * var(--u)); line-height: 1.8; }

/* 手数料が確定するまで — PC では左から右へ進む時間の線にする */
.fig-payflow .fig-step:last-child { border-bottom: 0; }

/* ══ 人（前職 → いま）・加盟の条件 — 罫で区切った列 ════════════════════ */
.fig-people, .fig-reqs { display: grid; gap: calc(20 * var(--u)); }
.fig-person, .fig-req { padding-top: calc(12 * var(--u)); border-top: 1px solid var(--ink); }
.fig-person__from { display: block; color: var(--ink2); font-weight: 700; font-size: calc(12 * var(--u)); letter-spacing: .04em; }
.fig-person__who { margin: calc(4 * var(--u)) 0 0; font-weight: 800; font-size: calc(16 * var(--u)); line-height: 1.5; }
.fig-person__text { margin: calc(10 * var(--u)) 0 0; color: var(--ink); font-size: calc(14 * var(--u)); line-height: 1.9; }
.fig-req__name { margin: 0; font-weight: 800; font-size: calc(16 * var(--u)); line-height: 1.5; }
.fig-req__text { margin: calc(6 * var(--u)) 0 0; color: var(--ink2); font-size: calc(13 * var(--u)); line-height: 1.8; }

/* ══ 動く製品画面（/crm/ と同じ仕掛け。読めなければ静止画のまま）════════ */
.fc-live { position: relative; margin: 0; border-radius: calc(10 * var(--u)); overflow: hidden; background-color: #02424e; }
.fc-live > img { display: block; width: 100%; height: auto; }
.fc-live .live-stage { position: absolute; inset: 0; }
.fc-live.is-live > img { visibility: hidden; }

/* ══ PC ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .fig { margin: calc(44 * var(--u)) 0 calc(56 * var(--u)); padding-top: calc(16 * var(--u)); }
  .fig__title { margin-bottom: calc(28 * var(--u)); }

  .fig-money__grid {
    grid-template-columns: 1fr calc(104 * var(--u)) 1fr calc(104 * var(--u)) 1fr;
    column-gap: calc(12 * var(--u)); row-gap: calc(28 * var(--u)); align-items: start;
  }
  .fig-money__step { flex-direction: column; gap: calc(4 * var(--u)); padding-top: calc(4 * var(--u)); text-align: center; }
  .fig-money__step svg { transform: none; width: calc(40 * var(--u)); height: calc(20 * var(--u)); }
  .fig-money__lane { margin: 0; }
  .fig-money__lane[data-kind="money"] { grid-column: 3 / 6; grid-row: 2; padding-left: calc(2 * var(--u)); }
  .fig-money__lane[data-kind="none"]  { grid-column: 1 / 2; grid-row: 2; }
  .fig-money__head {
    display: block; position: absolute; left: -2px; top: calc(-7 * var(--u) - 1px);
    border-right: calc(12 * var(--u)) solid var(--key);
    border-top: calc(6 * var(--u)) solid transparent; border-bottom: calc(6 * var(--u)) solid transparent;
  }
  .fig-money__lane[data-kind="money"] > span:last-child { display: block; padding-left: calc(18 * var(--u)); }

  .fig-roles__grid { grid-template-columns: repeat(3, 1fr); column-gap: calc(24 * var(--u)); row-gap: calc(4 * var(--u)); }
  .fig-role__desc[data-owner="hq"] { grid-column: 1 / 3; }
  .fig-role__desc[data-owner="fc"] { grid-column: 3; }

  .fig-key__n b { font-size: calc(72 * var(--u)); }

  .fig-bar, .fig-bars__median, .fig-axis { grid-template-columns: calc(72 * var(--u)) 1fr calc(104 * var(--u)); }
  .fig-cash .fig-bar, .fig-cash .fig-axis { grid-template-columns: calc(140 * var(--u)) 1fr calc(120 * var(--u)); }
  .fig-hist { height: calc(200 * var(--u)); gap: calc(14 * var(--u)); }
  .fig-hist__x, .fig-hist__span { gap: calc(14 * var(--u)); }

  /* 確定までの 4 段は、左から右へ時間が進む線に */
  .fig-payflow .fig-steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(20 * var(--u)); }
  .fig-payflow .fig-step {
    display: block; position: relative;
    padding: calc(26 * var(--u)) 0 0; border-bottom: 0; border-top: 2px solid var(--line);
  }
  .fig-payflow .fig-step::before {
    display: block; position: absolute; top: calc(-7 * var(--u) - 1px); left: 0;
    width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%;
    background-color: var(--key); content: "";
  }
  .fig-payflow .fig-step__title::before {
    content: counter(fcstep, decimal-leading-zero); display: block; margin-bottom: calc(4 * var(--u));
    color: var(--key); font-family: var(--num); font-weight: 700; font-size: calc(14 * var(--u));
  }
  .fig-payflow .fig-step__text { margin-top: calc(6 * var(--u)); }

  .fig-people, .fig-reqs { grid-template-columns: repeat(3, 1fr); column-gap: calc(24 * var(--u)); }

  /* 4 者のお金の流れ（営業代行）。報酬は左から右へ流れるので、矢じりは右端 */
  .fig-money[data-n="4"] .fig-money__grid {
    grid-template-columns: 1fr calc(80 * var(--u)) 1fr calc(80 * var(--u)) 1fr calc(80 * var(--u)) 1fr;
  }
  .fig-money[data-n="4"] .fig-money__who { font-size: calc(17 * var(--u)); }
  .fig-money[data-n="4"] .fig-money__lane[data-kind="money"] { grid-column: 1 / -1; padding-left: 0; }
  .fig-money[data-n="4"] .fig-money__lane[data-kind="money"] > span:last-child { padding-left: 0; }
  .fig-money[data-n="4"] .fig-money__head {
    left: auto; right: -2px;
    border-right: 0; border-left: calc(12 * var(--u)) solid var(--key);
  }
  .fig-reqs[data-cols="2"] { grid-template-columns: repeat(2, 1fr); row-gap: calc(28 * var(--u)); }
}

/* ══ 営業代行のページで足した形（2026-10-20）══════════════════════════
   同じ部品を使い回す。新しい装飾は足さない。 */
/* 3 列の対比表（行の見出し / A / B） */
.fig-vs[data-rows="labeled"] thead td { border-bottom: 1px solid var(--ink); }
.fig-vs[data-rows="labeled"] tbody th {
  padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top; text-align: left; font-weight: 700; font-size: calc(13 * var(--u)); line-height: 1.6; color: var(--ink2);
}
.fig-vs[data-rows="labeled"] td { color: var(--ink); font-weight: 500; font-size: calc(14 * var(--u)); }
.fig-vs[data-rows="labeled"] td + td { color: var(--ink); font-weight: 700; }
.fig-vs[data-rows="labeled"] th + th { color: var(--key); }
.fig-vs[data-rows="labeled"] thead th:first-of-type { color: var(--ink); }
.fig-vs[data-rows="labeled"] thead td { width: 24%; }
/* SP: 3 列は狭いので、行の見出しを上に出して 2 列で読む */
@media (max-width: 1023px) {
  .fig-vs[data-rows="labeled"] thead td { display: none; }
  .fig-vs[data-rows="labeled"] thead tr { display: grid; grid-template-columns: 1fr 1fr; }
  .fig-vs[data-rows="labeled"] tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .fig-vs[data-rows="labeled"] tbody th { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
  .fig-vs[data-rows="labeled"] tbody td { padding-top: calc(6 * var(--u)); }
}

/* ══ 事業の組み合わせ方（/service/ の頭・2026-10-20）══════════════════
   手段 → 手に入るもの → その先（御社の本当にやりたいこと）。
   ★ 1 回目は罫と黒い字だけで組み、オーナーに「装飾が足りない。画面の大半が黒文字」と言われた。
     薄い青の地＋白い札＋写真＋英字の小見出し＋紺の面（サイト唯一の飾り＝点を敷く）にした。 */
.fig.fig-combo {
  padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  border-top: 0; border-radius: calc(10 * var(--u));
  background-color: #eef3f9;
}
.fig-combo .fig__title { color: var(--key); }
.fig-combo__grid { display: grid; grid-template-columns: 1fr; }
.fig-combo__head { display: none; }
.fig-combo__means {
  display: grid; grid-template-columns: calc(96 * var(--u)) 1fr; gap: calc(14 * var(--u)); align-items: center;
  padding: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background-color: #fff;
}
.fig-combo__ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(6 * var(--u)); }
.fig-combo__means a, .fig-combo__means span {
  display: block; color: var(--ink); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.7; text-decoration: none;
}
.fig-combo__means a { text-decoration: underline; text-decoration-color: #c9d4e3; text-underline-offset: .25em; }
.fig-combo__means a:hover { text-decoration-color: var(--key); }
.fig-combo__means small { display: block; margin-top: calc(2 * var(--u)); color: var(--ink2); font-size: calc(12 * var(--u)); line-height: 1.7; }
.fig-combo__arrow { display: block; position: relative; width: 2px; height: calc(18 * var(--u)); margin: calc(6 * var(--u)) auto calc(10 * var(--u)); background: var(--key); }
.fig-combo__arrow::after {
  content: ""; position: absolute; left: calc(-4 * var(--u) + 1px); bottom: calc(-2 * var(--u));
  border-top: calc(7 * var(--u)) solid var(--key); border-left: calc(4.5 * var(--u)) solid transparent; border-right: calc(4.5 * var(--u)) solid transparent;
}
.fig-combo__gain { padding: 0 calc(4 * var(--u)) calc(20 * var(--u)); text-align: center; }
.fig-combo__gain i { display: block; color: #6f8fbf; font-family: var(--num); font-style: normal; font-weight: 600; font-size: calc(13 * var(--u)); letter-spacing: .12em; text-transform: uppercase; }
.fig-combo__gain b { display: block; margin-top: 0; color: var(--key); font-weight: 800; font-size: calc(22 * var(--u)); line-height: 1.4; }
.fig-combo__gain span { display: block; margin-top: calc(4 * var(--u)); color: var(--ink2); font-size: calc(13 * var(--u)); line-height: 1.7; }
.fig-combo__join { display: block; position: relative; height: calc(30 * var(--u)); }
.fig-combo__join::after {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  border-top: calc(14 * var(--u)) solid var(--key); border-left: calc(10 * var(--u)) solid transparent; border-right: calc(10 * var(--u)) solid transparent;
}
.fig-combo__goal {
  display: flex; flex-direction: column; justify-content: center; gap: calc(10 * var(--u));
  padding: calc(26 * var(--u)) calc(22 * var(--u));
  border-radius: calc(10 * var(--u));
  background-color: var(--key); color: #fff;
  /* 2026-10-20 2 回目: 点の面は「AI 感」の一因だったので、メンバーの写真に紺を重ねる形に */
  background-image: linear-gradient(180deg, rgba(0,31,69,.62) 0%, rgba(0,54,120,.90) 55%, rgba(0,31,69,.96) 100%), var(--goal-photo, none);
  background-size: cover; background-position: center;
}
.fig-combo__goal i { color: #9fb6d8; font-family: var(--num); font-style: normal; font-weight: 600; font-size: calc(13 * var(--u)); letter-spacing: .12em; text-transform: uppercase; }
.fig-combo__goal b { font-weight: 800; font-size: calc(26 * var(--u)); line-height: 1.4; letter-spacing: .02em; }
.fig-combo__goal b br { display: none; }
.fig-combo__goal span { color: rgba(255,255,255,.88); font-size: calc(13 * var(--u)); line-height: 1.8; }
.fig-combo .fig__note { margin-top: calc(16 * var(--u)); }

@media (min-width: 1024px) {
  .fig.fig-combo { padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)); }
  .fig-combo__grid {
    grid-template-columns: 1.3fr calc(48 * var(--u)) 0.85fr calc(58 * var(--u)) 0.95fr;
    grid-template-rows: auto repeat(3, auto);
    row-gap: calc(12 * var(--u)); align-items: center;
  }
  .fig-combo__head {
    display: block; margin: 0; color: var(--ink2); font-weight: 700; font-size: calc(12 * var(--u)); letter-spacing: .06em;
  }
  .fig-combo__head[data-col="means"] { grid-column: 1 / 3; }
  .fig-combo__head[data-col="gain"]  { grid-column: 3 / 5; }
  .fig-combo__head[data-col="goal"]  { grid-column: 5; }
  .fig-combo__means { grid-column: 1; grid-template-columns: calc(112 * var(--u)) 1fr; }
  .fig-combo__gain  { grid-column: 3; padding: 0; text-align: left; }
  .fig-combo__means[data-row="1"], .fig-combo__arrow[data-row="1"], .fig-combo__gain[data-row="1"] { grid-row: 2; }
  .fig-combo__means[data-row="2"], .fig-combo__arrow[data-row="2"], .fig-combo__gain[data-row="2"] { grid-row: 3; }
  .fig-combo__means[data-row="3"], .fig-combo__arrow[data-row="3"], .fig-combo__gain[data-row="3"] { grid-row: 4; }
  .fig-combo__arrow { grid-column: 2; width: auto; height: 2px; margin: 0 calc(14 * var(--u)) 0 calc(8 * var(--u)); }
  .fig-combo__arrow::after {
    left: auto; right: calc(-2 * var(--u)); bottom: auto; top: calc(-4 * var(--u) + 1px);
    border-top: calc(4.5 * var(--u)) solid transparent; border-bottom: calc(4.5 * var(--u)) solid transparent;
    border-left: calc(7 * var(--u)) solid var(--key); border-right: 0;
  }
  .fig-combo__join {
    grid-column: 4; grid-row: 2 / 5; align-self: stretch;
    height: auto; margin: calc(44 * var(--u)) calc(24 * var(--u)) calc(44 * var(--u)) calc(4 * var(--u));
    border: 2px solid var(--key); border-left: 0; border-radius: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0;
  }
  .fig-combo__join::after {
    left: 100%; top: 50%; transform: translateY(-50%);
    width: calc(14 * var(--u)); height: 2px; background: var(--key); border: 0;
  }
  .fig-combo__join::before {
    content: ""; position: absolute; left: calc(100% + 12 * var(--u)); top: 50%; transform: translateY(-50%);
    border-top: calc(6 * var(--u)) solid transparent; border-bottom: calc(6 * var(--u)) solid transparent;
    border-left: calc(9 * var(--u)) solid var(--key);
  }
  .fig-combo__goal { grid-column: 5; grid-row: 2 / 5; align-self: stretch; padding: calc(30 * var(--u)) calc(26 * var(--u)); }
  .fig-combo__goal b { font-size: calc(27 * var(--u)); }
  .fig-combo__goal b br { display: inline; }
}

/* ══ 3 つの事業のカード（/service/・2026-10-20）══════════════════════
   大きな写真 4:3 ＋ 番号と欧文 ＋ 名前 ＋ 一言 ＋ 本文 ＋ 詳しく。カード全体がリンク。 */
.svc-cards { display: grid; gap: calc(36 * (1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); margin-top: calc(24 * (1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); }
.svc-card {
  --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  display: flex; flex-direction: column; color: var(--color-oki-black); text-decoration: none;
}
.svc-card__ph { display: block; overflow: hidden; border-radius: calc(10 * var(--u)); aspect-ratio: 4 / 3; background: #eef3f9; }
.svc-card__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.43,.05,.17,1); }
.svc-card:hover .svc-card__ph img { transform: scale(1.08); }
.svc-card__no {
  display: flex; align-items: baseline; gap: calc(10 * var(--u));
  margin-top: calc(18 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid var(--color-oki-black);
  color: var(--color-oki-red); font-family: "Figtree", "Noto Sans JP", sans-serif; font-weight: 700; font-size: calc(15 * var(--u));
}
.svc-card__no em { color: #6b6b6b; font-style: normal; font-weight: 600; font-size: calc(13 * var(--u)); letter-spacing: .04em; }
.svc-card__name { margin-top: calc(10 * var(--u)); font-weight: 800; font-size: calc(22 * var(--u)); line-height: 1.4; }
.svc-card__lead { margin-top: calc(8 * var(--u)); color: var(--color-oki-red); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1.6; }
.svc-card__text { margin-top: calc(8 * var(--u)); color: #4a4a4a; font-size: calc(14 * var(--u)); line-height: 1.85; }
.svc-card__more {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin-top: auto; padding-top: calc(16 * var(--u));
  color: var(--color-oki-red); font-weight: 700; font-size: calc(14 * var(--u));
}
.svc-card__more svg { transition: transform .3s cubic-bezier(.43,.05,.17,1); }
.svc-card:hover .svc-card__more svg { transform: translateX(4px); }
@media (min-width: 1024px) {
  .svc-cards { grid-template-columns: repeat(3, 1fr); column-gap: calc(28 * (1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); }
  .svc-card__name { font-size: calc(21 * var(--u)); }
}

/* ══ 色を戻す（2026-10-20 夕）═══════════════════════════════════════════
   罫と黒い字だけの組みは「装飾が足りない。画面の大半が黒文字」。
   事業内容の「組み合わせ」の図で通った作り（薄い青の面・白い札・紺の面・大きな数字）に、
   FC と営業代行の図をそろえる。英字の小見出し・点の飾り・アイコン・ピルは使わない。 */
.fig:not(.fig-combo):not(.fig-screen) {
  padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
  border-top: 0;
  border-radius: calc(12 * var(--u));
  background-color: #eef3f9;
  --soft: #a9bbd3;
}
.fig:not(.fig-combo) .fig__title { color: var(--key); }
.fig.fig-screen { border-top: 0; padding-top: 0; }
/* 白い札（共通の形） */
.fig-money__node,
.fig-role,
.fig-person,
.fig-req,
.fig-steps .fig-step {
  border-radius: calc(10 * var(--u));
  background-color: #fff;
}
/* お金と人の向き: 3 者を札に。加盟店（貴社）は紺の札 */
.fig-money__node { padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.fig-money__node[data-you="true"] { background-color: var(--key); }
.fig-money__node[data-you="true"] .fig-money__who { color: #fff; }
.fig-money__node[data-you="true"] .fig-money__sub { color: rgba(255,255,255,.82); }
/* 段（流れ・確定まで・進め方）: 1 段ずつ白い札 */
.fig-steps { display: grid; gap: calc(8 * var(--u)); }
.fig-steps .fig-step { padding: calc(16 * var(--u)) calc(16 * var(--u)); border-bottom: 0; }
.fig-steps .fig-step:first-child { padding-top: calc(16 * var(--u)); }
/* 役割: 白い札の頭に色の線（本部は灰青・加盟店は紺） */
.fig-role { padding: calc(14 * var(--u)) calc(16 * var(--u)); border-top: 0; box-shadow: inset 0 3px 0 var(--soft); }
.fig-role[data-owner="fc"] { border-top: 0; padding-top: calc(14 * var(--u)); box-shadow: inset 0 4px 0 var(--key); }
/* 人・条件・育成の札 */
.fig-person, .fig-req { padding: calc(18 * var(--u)); border-top: 0; }
.fig-person__from { color: var(--key); }
/* 対比の表: 白い面に。右の列（加盟した日から／代理店として）を紺で */
.fig-vs { border-radius: calc(10 * var(--u)); overflow: hidden; background-color: #fff; }
.fig-vs th, .fig-vs td { padding-left: calc(16 * var(--u)); }
.fig-vs thead th { padding-top: calc(14 * var(--u)); border-bottom: 0; }
.fig-vs thead th + th, .fig-vs[data-rows="labeled"] thead th:last-child { background-color: var(--key); color: #fff; }
.fig-vs tbody td + td, .fig-vs[data-rows="labeled"] tbody td:last-child { background-color: rgba(0, 54, 120, .06); color: var(--key); }
/* いちばん言いたい数字は紺の面に白で大きく（35 日） */
.fig-key {
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  border-radius: calc(10 * var(--u));
  background-color: var(--key);
  color: #fff;
}
.fig-key__n b { color: #fff; }
.fig-key__cap { color: rgba(255,255,255,.85); }
/* 入金までの比較の一言も同じ紺の面に */
.fig-cash__line { padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(10 * var(--u)); background-color: var(--key); color: #fff; }
.fig-cash__line b { color: #fff; }
/* 中央値の線と分布の帯は、地が薄い青になったので色を 1 段濃く */
.fig-median { border-left-color: var(--key); }
@media (min-width: 1024px) {
  .fig:not(.fig-combo):not(.fig-screen) { padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); }
  .fig-payflow .fig-step { padding: calc(20 * var(--u)) calc(18 * var(--u)); border-top: 0; }
  .fig-payflow .fig-step::before { display: none; }
  .fig-roles__grid { row-gap: calc(10 * var(--u)); }
}

/* 「Remind in Numbers」の帯（inc/numbers.php）。写真が渡らないと覆いの灰がかった青だけになっていた。
   写真を渡すと組み方ごと変わる（端まで広がる形になり、見出しとカードが左で切れた）ので、
   器はそのまま、地に写真とサイトの紺を敷く。3 枚とも見えているので送りのボタンは隠す。 */
.home-oki-numbers .image-rounded { background: url("../images/front-numbers-back.jpg") center 30% / cover no-repeat; }
.home-oki-numbers .image-rounded::after { background: linear-gradient(100deg, rgba(0,31,69,.93) 0%, rgba(0,54,120,.80) 55%, rgba(0,54,120,.50) 100%) !important; }
.home-oki-numbers .button-group { display: none; }
.home-oki-numbers .swiper { margin-top: 36px; }

/* ══ AI 事業開発のページ（2026-10-20）══════════════════════════════════
   黒い字の短い行・素の箇条書き・段のずれたカードが続いていた。FC と同じ言葉
   （薄い青の面・白い札・紺の面）で、このページ固有の部品を塗り直す。文は変えない。 */
.page-template-page-service-ai {
  --ai-u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
/* 冒頭: まとまりごとの段落を、大きめの太字で */
.page-template-page-service-ai .ai-lead p {
  margin: 0 0 calc(22 * var(--ai-u));
  color: var(--color-oki-black);
  font-weight: 700;
  font-size: calc(17 * var(--ai-u));
  line-height: 2;
}
.page-template-page-service-ai .ai-lead p:last-child { color: var(--color-oki-red); font-size: calc(20 * var(--ai-u)); }
/* 「どのAIを導入するか」の囲み: 灰の箱 → 紺の面に白い大きな字 */
.page-template-page-service-ai .block-callout-list {
  border-radius: calc(12 * var(--ai-u));
  background-color: var(--color-oki-red);
}
.page-template-page-service-ai .block-callout-list p {
  color: #fff;
  font-weight: 800;
  font-size: calc(22 * var(--ai-u));
}
/* 箇条書き: 素の黒い字 → 薄い青の面に、1 件ずつ白い札 */
.page-template-page-service-ai .main > .block-paragraph-base.wysiwyg-list-style {
  padding: calc(18 * var(--ai-u)) calc(16 * var(--ai-u));
  border-radius: calc(12 * var(--ai-u));
  background-color: #eef3f9;
}
.page-template-page-service-ai .main > .block-paragraph-base.wysiwyg-list-style ul { display: grid; gap: calc(8 * var(--ai-u)); margin: 0; padding: 0; }
.page-template-page-service-ai .main > .block-paragraph-base.wysiwyg-list-style li {
  margin: 0;
  padding: calc(12 * var(--ai-u)) calc(16 * var(--ai-u)) calc(12 * var(--ai-u)) calc(34 * var(--ai-u));
  border-radius: calc(8 * var(--ai-u));
  background-color: #fff;
  font-weight: 700;
  line-height: 1.7;
}
.page-template-page-service-ai .main > .block-paragraph-base.wysiwyg-list-style li::before {
  left: calc(16 * var(--ai-u)) !important;
  background-color: var(--color-oki-red) !important;
}
/* 私たちがつくるもの・進め方のカード */
.page-template-page-service-ai [data-component-id=dshDGT] {
  padding: calc(18 * var(--ai-u)) calc(14 * var(--ai-u));
  border-radius: calc(12 * var(--ai-u));
  background-color: #eef3f9;
}
.page-template-page-service-ai [data-component-id=dshDGT] .block-list-3-column { gap: calc(12 * var(--ai-u)) !important; margin: 0 !important; width: auto !important; padding: 0 !important; }
.page-template-page-service-ai [data-component-id=dshDGT] .block-list-3-column > li {
  padding: calc(22 * var(--ai-u)) calc(20 * var(--ai-u));
  border-radius: calc(10 * var(--ai-u));
  background-color: #fff;
}
.page-template-page-service-ai [data-component-id=dshDGT] .block-list-3-column_title { color: var(--color-oki-red); }
.page-template-page-service-ai [data-component-id=dshDGT] .block-list-3-column_description b { color: var(--color-oki-black); font-size: 1.08em; }
.page-template-page-service-ai [data-component-id=dshDGT] .wysiwyg-list-style { margin-top: calc(10 * var(--ai-u)); padding: calc(12 * var(--ai-u)) calc(14 * var(--ai-u)); border-radius: calc(8 * var(--ai-u)); background-color: #eef3f9; }
/* CASE: 見出しの番号を紺に */
.page-template-page-service-ai [data-component-id=t9ewhw] .heading-base { color: var(--color-oki-red); }
@media (min-width: 1024px) {
  .page-template-page-service-ai .ai-lead p { font-size: calc(18 * var(--ai-u)); }
  .page-template-page-service-ai .ai-lead p:last-child { font-size: calc(24 * var(--ai-u)); }
  .page-template-page-service-ai .main > .block-paragraph-base.wysiwyg-list-style { padding: calc(24 * var(--ai-u)) calc(26 * var(--ai-u)); }
  .page-template-page-service-ai .main > .block-paragraph-base.wysiwyg-list-style ul { grid-template-columns: 1fr 1fr; }
  .page-template-page-service-ai [data-component-id=dshDGT] { padding: calc(26 * var(--ai-u)); }
  .page-template-page-service-ai [data-component-id=dshDGT] .block-list-3-column { align-items: stretch; }
}

/* ══ トップに足した 2 つの節（2026-10-20）═════════════════════════════
   見出しの組み（.heading-hgroup）はトップの他の節のものをそのまま使う。ここで足すのは本文と器だけ。 */
.front-combo, .front-reading { --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-top: calc(96 * var(--u)); }
.front-combo__body { margin-top: calc(32 * var(--u)); }
.front-combo__lead { max-width: 46em; margin: 0 0 calc(28 * var(--u)); color: var(--color-oki-black); font-weight: 500; font-size: calc(15 * var(--u)); line-height: 2; }
.front-combo .fig.fig-combo { margin: 0; }
.front-reading { padding-bottom: calc(24 * var(--u)); }
.front-reading__list { display: grid; gap: calc(28 * var(--u)); margin: calc(32 * var(--u)) 0 0; padding: 0; list-style: none; }
.front-reading__card { display: flex; flex-direction: column; color: var(--color-oki-black); text-decoration: none; }
.front-reading__ph { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: calc(10 * var(--u)); background-color: #eef3f9; }
.front-reading__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.43,.05,.17,1); }
.front-reading__card:hover .front-reading__ph img { transform: scale(1.08); }
.front-reading__meta { display: flex; gap: calc(10 * var(--u)); align-items: center; margin-top: calc(14 * var(--u)); color: #6b6b6b; font-family: "Figtree", "Noto Sans JP", sans-serif; font-weight: 600; font-size: calc(13 * var(--u)); }
.front-reading__meta em { padding: 0 calc(8 * var(--u)); border-left: 1px solid #c9d4e3; color: var(--color-oki-red); font-family: "Noto Sans JP", sans-serif; font-style: normal; font-weight: 700; font-size: calc(12 * var(--u)); }
.front-reading__title { margin-top: calc(8 * var(--u)); font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1.6; }
.front-reading__more { margin: calc(32 * var(--u)) 0 0; }
@media (min-width: 1024px) {
  .front-combo, .front-reading { padding-top: calc(140 * var(--u)); }
  .front-combo__body { margin-top: calc(48 * var(--u)); padding-left: calc(var(--column-unit) * 2); padding-right: calc(var(--column-unit) * 2); }
  .front-combo__lead { font-size: calc(16 * var(--u)); }
  .front-reading .t-container { padding-left: calc(var(--column-unit) * 2); padding-right: calc(var(--column-unit) * 2); }
  .front-reading__list { grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--u)); }
  .front-reading__more { text-align: right; }
}

.fig-req__name a { color: var(--key); text-decoration: underline; text-decoration-color: #c9d4e3; text-underline-offset: .25em; }
.fig-req__name a:hover { text-decoration-color: var(--key); }

/* ══ かんたん試算（/service/fc/・2026-10-20）══════════════════════════
   左に 3 本のつまみ、右に紺の面で答え。答えは HTML に初期値で書いてある（JS は書き換えるだけ）。 */
.fig-sim__grid { display: grid; gap: calc(16 * var(--u)); }
.fig-sim__inputs { display: grid; gap: calc(10 * var(--u)); }
.fig-sim__field { display: block; padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(10 * var(--u)); background-color: #fff; }
.fig-sim__label { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--u)); font-weight: 700; font-size: calc(14 * var(--u)); }
.fig-sim__label output { color: var(--key); font-family: var(--num); font-weight: 700; font-size: calc(20 * var(--u)); white-space: nowrap; }
.fig-sim__field input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: calc(14 * var(--u)) 0 calc(4 * var(--u));
  border-radius: 3px;
  background: linear-gradient(to right, var(--key) 0 var(--p, 50%), #d9e2ee var(--p, 50%) 100%);
  cursor: pointer;
}
.fig-sim__field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border: 3px solid var(--key); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.fig-sim__field input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--key); border-radius: 50%; background: #fff; }
.fig-sim__field input[type=range]:focus-visible { outline: 2px solid var(--key); outline-offset: 6px; }
.fig-sim__result {
  display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--u));
  padding: calc(24 * var(--u)) calc(22 * var(--u));
  border-radius: calc(10 * var(--u));
  background-color: var(--key); color: #fff;
}
.fig-sim__k { margin: 0; font-weight: 700; font-size: calc(14 * var(--u)); opacity: .9; }
.fig-sim__n { margin: 0; font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.1; }
.fig-sim__n b { margin-right: calc(4 * var(--u)); font-family: var(--num); font-size: calc(56 * var(--u)); letter-spacing: -.02em; }
.fig-sim__sub { margin: calc(4 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: 1.7; color: rgba(255,255,255,.88); }
.fig-sim__sub b { color: #fff; font-family: var(--num); font-size: calc(18 * var(--u)); }
@media (min-width: 1024px) {
  .fig-sim__grid { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .fig-sim__n b { font-size: calc(64 * var(--u)); }
}

/* 回収の試算: 売上と費用の 2 本の帯・まかなえる入社数の 1 行 */
.fig-sim__bars { display: grid; gap: calc(6 * var(--u)); margin: calc(10 * var(--u)) 0 calc(4 * var(--u)); }
.fig-sim__bar { display: block; height: calc(10 * var(--u)); width: var(--w, 50%); border-radius: 2px; background-color: #fff; transition: width .3s cubic-bezier(.43,.05,.17,1); }
.fig-sim__bar[data-kind="cost"] { background-color: rgba(255,255,255,.45); }
.fig-sim__catch { margin: calc(12 * var(--u)) 0 0; padding-top: calc(12 * var(--u)); border-top: 1px solid rgba(255,255,255,.25); font-weight: 700; font-size: calc(16 * var(--u)); line-height: 1.6; }
.fig-sim__catch b { font-family: var(--num); font-size: calc(26 * var(--u)); color: #9fd6cb; }
.fig-sim__inputs { gap: calc(8 * var(--u)); }
.fig-sim__field { padding: calc(12 * var(--u)) calc(16 * var(--u)); }
[data-fc-sim][data-net="minus"] [data-sim-res="net"] { color: #ffd2c4; }

/* ══ よくあるご質問 ════════════════════════════════════════════════════
   部品そのものは style.css §14-faq（テーマに既にあるが、どこからも使われて
   いなかったもの）。ここで足すのは**節との間合いだけ**。
   §14-faq の間合いは `#faq .faq-list` に書かれているが、このページの #faq は
   見出し側に付いているので当たらない。同じ値をここで与える。 */
.faq-list {
  margin-top: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .faq-list {
    margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ══ よくあるご質問の印が見えなかった（2026-09-23 実測で発覚）════════════
   style.css §14-faq は SmartHR の Disclosure を写したもので、丸の中の ＋/− の色は
   **JS が付ける `-def` / `-on` / `-off`** で決まる設計。その JS はテーマに移植されていない。
   実測: 丸の地 = transparent / ＋の棒 = #fbfbfb（ほぼ白）→ **白地に白い十字＝見えない**。
   しかもテーマの別の JS が html に `js-on` を付けるので、§14-faq が用意している
   `html:not(.js-on)` のフォールバックも外れる。二重に外れていた。
   ここで無印のときの色を決める。JS を入れれば `-def/-on/-off`（特異度が上）が勝つので、
   あとから移植しても壊れない。 */
.faq-list .summary_iconInner {
  background-color: var(--color-oki-red);   /* 主色。上に乗る白い棒が読める */
}

/* 畳んだ 1 問が SP で 155px あった（12 問で約 1,900px）。
   参照元は SP で「Q」と質問を縦に積むが、このページは 1 段に収めて高さを詰める。
   縦積みのままだと、畳んだ意味（12 問を見渡せる）が薄れる。 */
@media screen and (max-width: max(575px, 35.9375rem)) {
  .faq-list .summary_inner {
    flex-direction: row;
    gap: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    align-items: flex-start;
    /* ＋ の丸は右端に絶対配置されている。1 段に組んだ瞬間、質問文がその下に潜って
       重なった（実測。縦積みのままなら当たらなかった）。丸のぶんの場所を空ける。 */
    padding-right: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  /* 「Q」の札を詰めて、質問に使える幅を広げる（実測 186px → 約 200px） */
  .faq-list .summary_label {
    width: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-inline: calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .faq-list .container[data-faq-a] {
    flex-direction: row;
    gap: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}


/* 和文は既定で語の途中でも折れる。文節で折る（html に lang="ja" があるので効く）。 */
.faq-list .summary_text,
.faq-list .container[data-faq-a] p,
.fig .fig-role__desc,
.fig .fig-step__text,
.fig .fig-person__text,
.fig .fig-req__text,
.fig .fig-money__sub,
.fig .fig-key__cap,
.fig .fig__note {
  word-break: auto-phrase;
}