@charset "UTF-8";

/* この :root は styleguide-d.md から組み立てています。
   値を変えるときはこのファイルではなくスタイルガイドを直してください。 */
:root {
  --accent: #cdad7d;
  --accent-strong: #bd9a63;
  --accent-tint: #f6efe2;
  --gold-ink: #856129;
  --tan: #e6cfad;
  --tan-line: #d8bc90;
  --navy: #15203f;
  --navy-soft: #22304f;
  --ink: #2a3142;
  --muted: #5b6675;
  --muted-dark: #c8d2e0;
  --line: #e2ddd3;
  --tint: #f4f1ec;
  --tint-warm: #faf7f1;
  --white: #ffffff;
  --share-dark: #6b7382;
  --share-mid: #8f96a2;
  --share-pale: #b9bec7;
  --radius: 0px;
  --radius-sm: 0px;
  --pill: 0px;
  --shadow: none;
  --shadow-btn: none;
  --wrap: 980px;
  --band-pad: 92px;
  --hairline: 1px;
  --photo-veil: 0.5;
  --rule-w: 36px;
  --mark-w: 3px;
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "MS PMincho", Georgia, "Times New Roman", serif;
  --font-size: 16px;
  --line-height: 1.9;
  --weight-heading: 600;
  --tracking: .04em;
}

/* 見た目の値（色・角丸・影・文字）は lp/styleguide.md にあり、`bem lp build` が
   このファイルの先頭に `:root` として差し込む。ここでは値を書かず var() で引く。
   参考にした LP（bonz-c / marugotoinc / garoon / franz）と同じく、フレームワークは
   使わず手で書く。外部リソースは一切読まない。 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* **`auto-phrase` は見出しと短いリードにだけ掛ける。本文には掛けない。**

   `auto-phrase` は文節の途中では絶対に折り返さない。入りきらない文節は丸ごと
   次の行へ送られるので、狭い段では行末が大きく余る。実測（1280px、段幅 293px）:

     .voice の本文    行末の余り 平均 46.5px / 最大 193px / 75 行中 60 行が 20px 超
     word-break:normal              平均 14.1px / 最大  28px / 68 行中  5 行

   段幅の 3 分の 2 が空く行まで出ていて、「変なところで改行している」ように
   見えるのはこれが原因だった。行数も増える（75 → 68 行）。
   短い見出しでは狙いどおりに効くので、そちらにだけ残す。

   `pretty`（最後の行に 1 語だけ残さない）は本文にも効いてよいので body に置く。
   本文の折り返しは既定に戻す——日本語の本文は行末を揃えて読むのがふつうで、
   「お届けしま／す。」のような送り仮名の割れは**原稿を短くして**避ける
   （ルールで抑えようとして、こちらの副作用のほうが大きくなった）。 */
body {
  text-wrap: pretty;
}

.hero-title,
.hero-lead,
.sec-title,
.sub-title,
.program-title,
.program-step,
.card-title,
.reason-card h3,
.pain-card h3,
.faq q,
.metrics-lead {
  word-break: auto-phrase;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--tracking);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--navy-soft); }
code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: .92em;
  background: var(--tint);
  padding: .1em .35em;
  border-radius: 4px;
}

/* **スクロールバーの幅を常に確保する。** 診断ページの 1 画面目は縦に収まって
   スクロールバーが出ず、スクロールするトップページと並べるとヘッダーの文字が
   十数 px 横にずれていた（ページを移るたびに動いて見える）。 */
html { scrollbar-gutter: stable; }

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- ヘッダー */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}

/* 区切りの位置だけで折り返す（keep_together）。狭い画面で語の途中に改行が
   入っていた。ボタンの注記とサイト名の「…」がこれ。 */
.nw { white-space: nowrap; }

.logo {
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------ ボタン */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 16px 30px;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  /* **枠の有無で高さがずれないようにする。** ghost だけ 1.5px の枠があり、
     並べると主ボタンだけ 2px 低かった（54px と 56px）。透明な枠で揃える。 */
  border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ボタンの注記は、必ず 2 行目に置く。「無料で診断する　※所要時間3分・登録不要」が
   狭い画面で語の途中から折り返していた（レビュー指摘）。折り返しの位置を
   画面幅任せにせず、原稿の全角空白で切る（`_button` が組み立てる）。 */
.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.btn-note {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
}

.btn:hover { transform: translateY(-1px) scale(1.015); }

/* 「押すと次に進む」ことを形で示す（スタイルガイド「部品 > ボタン」）。
   矢印は擬似要素で描くので、原稿にも画像にも足すものが無い。 */
.btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* **戻るボタンは矢印も逆向きにする。** 「戻る」なのに右向きの矢印が付いていて、
   進むボタンと見分けが付かなかった（レビュー指摘）。左に置き、向きも反転させる。 */
.btn-back::after { content: none; }
.btn-back::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-135deg);
  flex: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--navy-soft);
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--accent-strong); }

.btn-ghost {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-ghost:hover { background: var(--tint); }

.btn-small {
  padding: 9px 20px;
  font-size: 13px;
  background: var(--accent);
  color: var(--navy-soft);
  box-shadow: none;
  white-space: nowrap;
}
.btn-small:hover { background: var(--accent-strong); }

/* **縦に積むボタンは幅も揃える。** ファーストビューは 3 つが縦に並ぶのに、
   幅が 398 / 341 / 276px とばらばらだった。いちばん広いものに合わせる
   （`max-content` の 1 列に入れると、各ボタンがその幅まで伸びる）。 */
.hero .cta-row {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: 14px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* ------------------------------------------------------------ 帯とセクション */

.band, .band-tint, .band-sample, .band-dark { padding: var(--band-pad) 0; }
.band { background: var(--white); }
.band-tint { background: var(--tint); }
.band-sample { background: var(--tint-warm); }
.band-dark { background: var(--navy); color: var(--muted-dark); }
.band-dark .sec-title, .band-dark .sec-lead { color: var(--white); }

/* セクションの英字ラベル。縦に長いページで「いまどの節か」を周辺視野に出す。
   文字を読ませるものではないので、小さく・字間を空けて・彩度は落とす。 */
.sec-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--navy-soft);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 黄色は面にだけ置く。ラベルの前に短い棒を引いて色を出し、文字は濃紺のまま読ませる。 */
.sec-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.band-dark .sec-eyebrow { color: var(--accent); }
.band-dark .sec-eyebrow::before { background: var(--accent); }

.sec-title {
  margin: 0 0 20px;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--navy);
}
.sec-title.small { font-size: clamp(20px, 3.2vw, 26px); }

/* 見出し・リードの中の `**強調**` は、太字ではなく色で立てる。
   一様な紺一色だと長い見出しの中で目が止まる場所が無い。記法は原稿の
   `**...**` をそのまま使うので、原稿にも Docs 往復にも手を入れずに済む。 */
.sec-title strong,
.hero-title strong,
.sub-title strong {
  color: inherit;
  font-weight: inherit;
  background: linear-gradient(transparent 62%, var(--accent) 0);
  padding-inline: .06em;
}

/* リード文の `**強調**` は下線マーカー。**`--accent-tint` は使わない**——白い帯や
   白い札の上ではほとんど見えず、帯を引いた意味が消えていた。見出しの黄色を
   そのまま敷くと本文には強すぎるので、同じ黄色を薄めて敷く。
   見出しの色替えと役割を分ける
   （見出し＝どこを見るか、リード＝どこを読むか）。太さで分けるのではなく、
   見出しはアクセントの帯、リードは薄いほうの帯（accent-tint）にする。
   `.pain-close strong` は紺地の箱の中なので、既存の配色をそのまま使う。 */
.sec-lead strong {
  color: var(--navy);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 38%, transparent) 62%);
}
.band-dark .sec-lead strong { color: var(--white); background: none; }

/* 同じ「リード」の役どころ。下層ページのリードと引用の本文にも同じ帯を引く
   （引用だけ強調が無く、節ごとに手触りが違って見えていた）。 */
/* 語り手の行（.voice-who）は札の見出しなので帯は引かない——`**…**` が
   そのまま強調として渡ってくるので、除いておかないと 6 枚とも名前が光る。 */
.hero-sub strong,
.pain-card p strong,
.voice p:not(.voice-who) strong {
  color: var(--navy);
  font-weight: 700;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 38%, transparent) 62%);
}

.sub-title {
  margin: 64px 0 16px;
  font-size: clamp(19px, 3vw, 24px);
  color: var(--navy);
  line-height: 1.6;
}

.sec-lead {
  max-width: 46em;
  color: var(--muted);
  margin-bottom: 36px;
}
.band-dark .sec-lead { color: var(--muted-dark); }

/* ------------------------------------------------------ ファーストビュー */

.hero {
  position: relative;
  padding: 76px 0 84px;
  background:
    radial-gradient(1200px 420px at 82% -8%, var(--accent-tint), transparent 60%),
    linear-gradient(180deg, var(--tint) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
}
/* 下層ページは丈を詰めるが、**上は詰めない**。詰めると同じバッジと見出しが
   ページごとに違う高さに出て、ページを移るたびに縦にずれて見える。 */
.hero-slim { padding: 76px 0 48px; }

.hero-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 1px solid var(--navy);
  border-radius: var(--pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}

.hero-title {
  margin: 0 0 22px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--navy);
  font-weight: 800;
  text-wrap: balance;
}

/* 写真素材が無いので、教材そのものをファーストビューの絵にする */
.hero-visual { min-width: 0; }

/* 同じドメインに置いた SVG を <img> で読む（スタイルガイド「画像」）。
   寸法を CSS ではなく属性で持たせてあるので、読み込み前も場所が確保される。 */
.hero-art {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
}

.mock::before, .mock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mock-name {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
}

.hero-lead {
  max-width: 32em;
  margin-bottom: 18px;
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 700;
  color: var(--ink);
}

/* 診断から来たときだけ出る、点数のまとめ */
.diag-score {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 460px;
}
.diag-score-head {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
}
.diag-score-cell {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy);
}
.diag-score-row { display: flex; gap: 12px; }
.diag-score-row > div {
  flex: 1;
  background: var(--tint);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.diag-score-row span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
}
.diag-score-row strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
}

.hero-sub {
  max-width: 40em;
  color: var(--muted);
}

/* 「4段階」「14業種」という数字の並びから、「何を選ぶのか」の一覧に変えた。
   選択肢そのものが長いので、数字を大きく見せる作りをやめて左右に割る。 */
.metrics-lead {
  margin: 34px 0 0;
  padding: 18px 22px;
  /* 札の作りは .tree-group / .diag-score と同じ（白・線・角丸）。
     **左に黄色の棒は引かない**——その形は `.notice`（小さい注記）が既に
     使っていて、ページで一番強い主張に一番弱い印を付けることになる。
     黄色はこの中の「全30教材」のマーカーにだけ置く。 */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.9;
}
/* 数字は見出しと同じ黄マーカーで拾う（節の名前ではなく主張なので、
   リードの薄いほうではなく見出しと同じ濃さにする）。 */
.metrics-lead strong {
  font-weight: 800;
  background: linear-gradient(transparent 62%, var(--accent) 0);
  padding-inline: .06em;
}

/* 「学習プログラム概要」の見出しと、その下の 2 段（選択／学習コンテンツ）。
   段の番号は <ol> のマーカーに任せる。原稿に「1.」「2.」と書くと、Doc へ
   出して戻すときに段ごとに振り直されて狂う（CLAUDE.md）。 */
.program-title {
  margin: 34px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: var(--tracking);
}

.program {
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}
.program > li { margin-top: 22px; }
.program > li::marker {
  font-weight: 800;
  color: var(--navy);
}

.program-step {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}

/* 見出しの頭の印。中身は絵文字ではなく線画アイコン（EMOJI_ICONS）なので、
   文字の高さに合わせて縦位置を揃える。 */
.lead-emoji {
  display: inline-flex;
  align-items: center;
  vertical-align: -.18em;
  margin-right: 7px;
  color: var(--navy-soft);
}
.lead-emoji .icon { width: 1.15em; height: 1.15em; }

.metrics {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.metrics li {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 6px 20px;
  align-items: baseline;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.metrics li:last-child { border-bottom: 0; }
.metric-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.6;
}
.metric-label::before {
  content: "▸";
  margin-right: 6px;
  color: var(--navy-soft);
}
.metric-label.has-emoji::before { content: none; }
.metric-value { font-size: 13px; color: var(--muted); line-height: 1.8; }

/* -------------------------------------------------------------- 悩み */

/* 項目が 1 つ 3〜4 行の独白になったので、3 列だと 1 枚だけ余る。
   2 列に落として、行の高さも揃うようにする。 */
.pain-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 18px;
}

.pain-card {
  display: flex;
  gap: 16px;
  padding: 24px 22px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pain-card p { font-size: 14.5px; }
.pain-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--navy-soft);
  display: grid;
  place-items: center;
}

/* 線画アイコン。画像を持てないので SVG を直接埋め、色は継承させる。 */
.icon {
  width: 24px;
  height: 24px;
  display: block;
}

.pain-close {
  margin-top: 36px;
  padding: 24px 26px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.8;
}
.pain-close strong { color: var(--accent); }

/* ------------------------------------------------------------ 選ばれる理由 */

/* **長い本文の札は 2 列まで。** 3 列に入ると 1 列が 293px しかなく、14px の
   日本語で 20 字/行にしかならない（実測 1280px）。「灰色の背景の幅のスペースが
   多すぎて、1 行に記載できる文字数が少なくなりすぎている」というレビュー指摘は
   ここ。下限を上げて列数を減らすと 476px ≒ 33 字/行になる。
   下限は「札が 2 つ入る幅」ではなく「3 つ目を入れさせない幅」で決めている。 */
.reason-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
}

.reason-card {
  position: relative;
  padding: 30px 26px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.reason-no {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
}
/* 見出しの前にアイコンを 1 つ。理由が 7 つ並ぶので、文字だけだと塊に見える
   （レビュー「各項目に最適なアイコンをつけて」）。 */
.reason-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--navy-soft);
}
.reason-card h3 { margin: 0 0 12px; font-size: 18px; color: var(--navy); line-height: 1.6; }
.reason-card p { font-size: 14.5px; color: var(--muted); }

/* ---------------------------------------------------------------- サンプル */

.badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--navy-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

.scene {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.scene-tag {
  padding: 2px 10px;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

/* 教材の誌面を模したカード（画像素材が無いので CSS で組む） */
.paper {
  margin: 0 0 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.paper-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
}
.paper-tag { font-size: 13px; font-weight: 700; }
.paper-name { font-size: 12px; color: #b6c6d6; }

.paper-body { padding: 26px 24px 28px; }
.paper-body h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--navy-soft);
}
.paper-body h4 ~ h4 { margin-top: 26px; }

.paper-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 22px;
}
.paper-pair .paper { margin: 0; }

.en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15.5px;
  line-height: 2;
  color: var(--ink);
}
.ja { font-size: 14.5px; color: var(--muted); }

.table-scroll { overflow-x: auto; }

.vocab, .plans {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.vocab th, .vocab td, .plans th, .plans td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.vocab th { background: var(--tint); font-size: 12.5px; color: var(--navy); white-space: nowrap; }
/* 語句と意味は折り返すと読みにくいので、幅を先に確保する */
.vocab td:first-child { white-space: nowrap; }
.vocab td:nth-child(2) { min-width: 8em; }
.vocab td:nth-child(3) { min-width: 15em; }

.quiz { counter-reset: none; }
.quiz li {
  padding: 12px 0 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.quiz li:last-child { border-bottom: 0; }

.answer li {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.answer li:last-child { border-bottom: 0; }
.ans-key { font-weight: 700; color: var(--navy); font-size: 12.5px; padding-top: .2em; }
.ans-val { color: var(--ink); }

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.compare-col {
  padding: 24px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.compare-head {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: .04em;
}
.compare-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--muted);
}

.parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}
.parts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.parts strong { font-size: 14.5px; color: var(--navy); }
.parts span { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ---------------------------------------------------------------- 手順 */

/* プロセスマップ。段の間の矢印は擬似要素で描く（画像を持たないため）。
   PC では右向き、SP では下向きに変わる。 */
/* 940px までは横 1 列に収まる幅にしておく（4 段 × 180px + 隙間 = 810px）。
   途中で折り返ると、行末の段の矢印が何も指さない場所に残る。 */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 34px 30px;
}
.flow-step {
  position: relative;
  padding: 26px 22px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -21px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--navy-soft);
  border-right: 2px solid var(--navy-soft);
  transform: translateY(-50%) rotate(45deg);
}
.flow-step:last-child::after { display: none; }
.flow-no {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.flow-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 14px 0 12px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--navy);
}
.flow-step h3 { margin: 0 0 8px; font-size: 16px; color: var(--navy); line-height: 1.6; }
.flow-step p { font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------ 教材の一覧 */

/* 業種・職種 → 形式 → レベルの 3 段。押すと教材の Doc が開く。
   まだ教材が無い枠は .btn-soon で「押せない」ことを形で示す。 */
/* 内訳の箱と一覧の間に入るラベル。箱に貼り付くと内訳の続きに見えるので、
   節の頭に置くときと同じだけ空ける。 */
.breakdown + .sec-eyebrow { margin: 44px 0 14px; }

.tree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
}
.tree-group {
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tree-name {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.5;
}
.tree-format + .tree-format { margin-top: 16px; }
.tree-format-name {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.tree .level-row { gap: 8px; }
.tree .btn { font-size: 13px; padding: 9px 16px; }

.btn-soon {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 16px;
  border: 1px dashed var(--muted);
  border-radius: 999px;
  background: var(--tint);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
}
.btn-soon-note { font-size: 11px; font-weight: 600; }
/* 矢印を出さない。押せないものに「進む」印が付くと、押せると読まれる。 */
.btn-soon::after { content: none; }

/* ---------------------------------------------------------------- 声 */

.notice {
  padding: 14px 18px;
  margin-bottom: 24px;
  border-left: 4px solid var(--accent);
  background: var(--accent-tint);
  font-size: 13.5px;
  color: var(--muted);
}

/* `.reason-list` と同じ理由で 2 列まで（299px ≒ 21 字/行 → 482px ≒ 33 字/行）。 */
.voice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 20px;
}
.voice {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 14.5px;
}
.voice-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  /* 本文の下ではなく札の下端に置く。長さの違う本文でアイコンが凸凹していた。 */
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
/* 語り手の職種の目印。丸に収めて、顔写真の代わりの位置に置く。 */
.voice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  background: var(--accent-tint);
  color: var(--navy-soft);
}
.voice-icon .icon { width: 19px; height: 19px; }

/* 掲載前だと一目で分かるようにする（実在の感想ではないため） */
.is-draft .voice {
  background: repeating-linear-gradient(135deg, var(--white), var(--white) 12px,
                                        var(--tint) 12px, var(--tint) 24px);
  box-shadow: none;
  border: 1px dashed var(--line);
  color: var(--muted);
}

/* ---------------------------------------------------------------- 価格 */

/* プランは 1 つだけ。2 行の表から 1 行になったので、表をやめてカードにした
   （見出し行のぶん価格が小さく見え、本文に埋もれていた）。 */
.plan-card {
  max-width: 620px;
  margin-top: 28px;
  padding: 30px 32px;
  background: color-mix(in srgb, var(--white) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
  border-radius: var(--radius);
}
.plan-name {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--accent);
}
.plan-price {
  margin: 6px 0 0;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  color: var(--white);
}
.plan-features {
  display: grid;
  gap: 2px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
}
.plan-features li {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 11px 0;
}
.plan-feature-name { font-size: 14px; font-weight: 800; color: var(--accent); }
.plan-feature-body { font-size: 13.5px; color: var(--muted-dark); line-height: 1.8; }

.fineprint { margin-top: 18px; font-size: 13px; color: var(--muted); }
.band-dark .fineprint { color: var(--muted-dark); }

/* ------------------------------------------------------------ 教材の内訳 */

.breakdown {
  margin-top: 44px;
  padding: 26px 28px;
  background: var(--accent-tint);
  border-radius: var(--radius);
}
/* 箱の上にラベルが乗る形。ラベル自身が下に 10px 空けるので、箱側では空けない
   （節の頭に置く見出しとラベルの間隔と揃う）。 */
.sec-eyebrow + .breakdown { margin-top: 0; }
.breakdown-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.breakdown-lead { margin: 8px 0 0; font-size: 14px; color: var(--ink); }
.breakdown .metrics { margin-top: 16px; padding-top: 14px; border-top-color: color-mix(in srgb, var(--navy) 12%, transparent); }
.breakdown .metrics li { border-bottom-color: color-mix(in srgb, var(--navy) 12%, transparent); }

/* ------------------------------------------------------------ 決済の枠 */

/* Stripe の支払いページをそのまま枠で埋め込む。枠の中はあちらのドメインなので、
   高さを測ることも色を当てることもできない。十分な高さを先に確保しておく。 */
/* Stripe.js が枠をこの中に差し込む。読み込みの前後で高さが飛ばないよう、
   最低限の高さを先に確保する（CLS 対策）。 */
.pay-slot { min-height: 620px; margin-top: 18px; }
.pay-wait {
  margin: 0;
  padding: 22px;
  background: var(--tint);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--muted);
}
/* 出せなかったときは、待ちの文言を消して下のリンクに寄せる。
   「読み込んでいます」を出したままにすると、いつまでも待たせることになる。 */
.pay-slot.is-unavailable { min-height: 0; }
.pay-slot.is-unavailable .pay-wait { display: none; }
/* 枠が出ない環境（古いブラウザ・拡張機能・社内プロキシ）の逃げ道。
   読み込めたかどうかは別ドメインなので確かめられない。常に出しておく。 */
.pay-fallback { margin: 14px 0 0; font-size: 14px; }
.pay-fallback a { color: var(--navy-soft); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.faq summary {
  padding: 18px 46px 18px 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
  position: relative;
  line-height: 1.7;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  position: absolute;
  right: 20px;
  top: 18px;
  color: var(--navy-soft);
  font-weight: 700;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }
.faq-body {
  padding: 0 20px 20px;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- フッター */

.footer {
  padding: 44px 0 96px;
  background: #0a1c2e;
  color: #93a6b8;
  font-size: 13px;
}
.footer-name { color: var(--white); font-weight: 700; font-size: 14px; }
.footer-name a { color: inherit; text-decoration: none; }
.footer-name a:hover { text-decoration: underline; }
.footer-note { max-width: 46em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
/* 濃紺の地の上では、既定のリンク色（濃紺）だと沈んで読めない */
.footer a { color: var(--white); text-underline-offset: 3px; }

/* ------------------------------------------------------------ 固定 CTA */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 0;
  background: color-mix(in srgb, var(--white) 96%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(15, 42, 68, .1);
}
.sticky[hidden] { display: none; }
.sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.sticky-text { font-size: 13px; color: var(--muted); }
.sticky .btn { padding: 12px 24px; font-size: 15px; }

/* -------------------------------------------------- 中盤の CTA（サンプルページ） */

/* 本編を読み終えた直後に置く受け皿。帯の色を前後と変えて、
   読み流していても「ここで一区切り」と分かるようにする。 */
.cta-mid {
  padding: 30px 0;
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-mid-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}
.cta-mid-text {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* ---------------------------------------------------------------- 狭い画面 */

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .mock::before, .mock::after { display: none; }
  /* 縦 1 列に積むので、段と段のあいだの矢印も下向きに置き直す */
  .flow { grid-template-columns: 1fr; gap: 30px; }
  .flow-step::after {
    top: auto;
    right: 50%;
    bottom: -21px;
    transform: translateX(50%) rotate(135deg);
  }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .wrap { width: min(100% - 24px, var(--wrap)); }
  /* SP ではヘッダーの購入ボタンを出さない。サイト名が 23 文字あり、横に並べると
     名前が 3 行に折り返って追従ヘッダーが厚くなる。下端の固定 CTA が同じボタンを
     常に出しているので、受け皿は減らない。 */
  .site-head .btn-small { display: none; }
  .logo { font-size: 13px; line-height: 1.4; }
  /* 屋号は 2 行目へ。語の途中で折り返させない（レビュー指摘）。 */
  .logo-name { display: block; white-space: nowrap; }
  .site-head-inner { min-height: 54px; gap: 10px; }
  .btn-small { padding: 8px 14px; font-size: 12px; }
  .band, .band-tint, .band-sample, .band-dark { padding: 56px 0; }
  .hero { padding: 48px 0 56px; }
  .metrics { margin-top: 32px; }
  .metrics li { grid-template-columns: 1fr; gap: 2px; padding: 12px 2px; }
  .metric-label { font-size: 13.5px; }
  .metric-value { font-size: 12.5px; }
  /* 料金カードの特徴も同じ。SP で 13em の見出し列を残すと、右の本文が
     3〜4 文字で折り返って読めない（第 6 回のレビュー「スマホで見た時の
     表示が読みにくい」）。見出しと本文を上下 2 行に積む。 */
  .plan-card { padding: 24px 20px; }
  .plan-features li { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .plan-feature-name { font-size: 13.5px; }
  .plan-feature-body { font-size: 13px; }
  .breakdown { padding: 20px 18px; }
  /* **横の余白の二重掛けを減らす。** `.wrap` の 20px に札の 22〜26px が
     重なって、390px の画面で本文が 281〜287px（≒19〜20 字/行）しか残って
     いなかった。外側を 12px、札の左右を 16〜18px に詰めて 1 行を伸ばす
     （実測 281〜287px → 313〜319px ≒ 22 字/行）。診断側は #73 で同じ直しが
     入っている。
     影が画面の端で切れないよう、外側は 0 にはしない。 */
  /* 悩みの札だけは、余白を詰めても本文が 267px（≒18 字/行）にしかならない。
     絵の 40px と隙間が、狭い画面では本文の 6 分の 1 を占めるため。
     横に並べるのをやめて**絵に本文を回り込ませる**と、絵の下からは札の幅
     いっぱい（実測 319px ≒ 22 字/行）を使える。絵は飾り（aria-hidden）なので、
     読む列を空けるほうを優先する。 */
  .pain-card { display: block; padding: 20px 16px; }
  .pain-card::after { content: ""; display: block; clear: both; }
  .pain-icon { float: left; width: 40px; height: 40px; margin: 2px 12px 6px 0; }
  .voice { padding: 22px 16px; }
  .reason-card { padding: 24px 18px 22px; }
  .card-list { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
  .sticky-text { display: none; }
  .sticky .btn { width: 100%; }
  .footer { padding-bottom: 110px; }
  .paper-body { padding: 20px 16px 22px; }
  .answer li { grid-template-columns: 1fr; gap: 2px; }
  .sec-eyebrow { font-size: 11px; letter-spacing: .14em; }
  .cta-mid-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-mid .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------ 申込フォーム */

/* 入力欄はページ内で唯一の「書く場所」なので、カードより一段はっきりさせる。
   高さは 48px 以上（指で押せる大きさ。Google のモバイル判定にも効く）。 */
.form {
  max-width: 620px;
  margin-inline: auto;
}
.field { margin: 0 0 20px; }
.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.field-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;   /* 16px 未満だと iOS が拡大する */
  line-height: 1.6;
}
.field-input:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
select.field-input { appearance: none; padding-right: 40px; cursor: pointer; }
.field-note {
  margin: -8px 0 24px;
  font-size: 13px;
  color: var(--muted);
}
.form .sub-title { margin: 32px 0 18px; }
.form .sub-title:first-child { margin-top: 0; }
.form .btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }

/* レベル別に読み比べるボタン。4 つ横並びで、狭ければ折り返す。 */
.level-row .btn { flex: 1 1 200px; }

/* -------------------------------------------------------- 届いたイラスト */

/* 見出しの下に置く挿絵。SP では幅いっぱいに、PC では本文の脇に収める。 */
.section-art {
  display: block;
  width: min(100%, 440px);
  height: auto;
  margin: 0 0 28px;
}

/* お客様の声の顔。線画アイコンと同じ座に収める。 */
.voice-face {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  object-fit: cover;
}


/* ===========================================================================
   /d/ …… 松川さんが Canva で作り直した 4 つ目の案（2026-09-21 受領）。

   `style.css` の**後ろに繋ぐ**。共通の部品（ボタン・ヘッダー・フッター・
   固定バー）は本番と同じものを使い、ここには /d/ だけの組み方を書く。
   丸ごと複製すると、共通部分が 2 通りに割れて片方だけ直した状態で公開される。

   値は `lp/styleguide-d.md` のトークンから引く。ここで色を直に書かない
   （`bem lp build` がスタイルガイドに無いトークンを見つけて落とす）。

   案の特徴は 4 つで、ここの組み方はぜんぶそこから来ている。

     1. **明朝体。** 見出しも英字ラベルも `--font-serif`。本文だけゴシック
     2. **角を落とさない・影を落とさない。** 面の色と 1px の枠だけで区切る
     3. **写真の帯が 4 つ**（ファーストビュー・強み・購入手順・FAQ）。
        どれも下地に濃紺を敷き、その上に写真を膜越しに出す
     4. **図は画像ではなく SVG。** 数字は原稿（`解決策 > 変化`）から来る

   **金（`--accent`）を生成りの地の上で文字色に使わないこと。** 1.92:1 しか
   なく、大きい文字の下限 3:1 も割る。地の上に置く金色の文字は
   `--gold-ink`（5.03:1）。`bem.lp.VARIANT_CONTRAST["d"]` が毎回測る。
   =========================================================================== */

/* --------------------------------------------------------------- 土台と帯 */

.d-band {
  position: relative;
  padding: var(--band-pad) 0;
  letter-spacing: var(--tracking);
}
.d-band-paper { background: var(--tint); }
.d-band-white { background: var(--white); }

/* 濃紺の帯と写真の帯。**写真が届いていなくても文字の明度差は変わらない**
   ——下地の濃紺はここで敷いてあり、写真はその上に重なるだけだから。 */
.d-band-navy,
.d-band-photo {
  background: var(--navy);
  color: var(--white);
}
.d-band-navy .d-eyebrow,
.d-band-photo .d-eyebrow { color: var(--accent); }
.d-band-navy .d-eyebrow-lead,
.d-band-photo .d-eyebrow-lead { color: var(--muted-dark); }

.d-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.d-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 写真の上に敷く濃紺の膜。濃さは `--photo-veil`。**下げると文字が読めなく
   なる**ので、スタイルガイドの表と一緒に動かすこと。 */
.d-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: var(--photo-veil);
}
.d-band-body { position: relative; }

/* ------------------------------------------------------- 見出しと英字ラベル */

.d-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--gold-ink);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
}
/* 案は英字ラベルの左に短い横線を引いている。 */
.d-eyebrow::before {
  content: "";
  width: var(--rule-w);
  height: var(--hairline);
  background: currentColor;
  flex: none;
}
.d-eyebrow-lead {
  margin: 0 0 22px;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 14px;
}

.d-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--navy);
  margin: 0 0 34px;
}
/* 原稿の `**…**` は、濃い金の文字＋金の下線。案の「英語力は、**ここまで**
   変えられる」がこの形（スタイルガイド「部品 > 見出しの強調」）。

   **`background: none` を必ず書くこと。** 本番の `.sec-title strong` は
   黄色い帯を文字の下半分に敷く作りで、色だけ足すと帯が残ったまま出る
   （実際に 1 度そうなった）。 */
.d-title strong,
.d-hero-title strong {
  color: var(--gold-ink);
  font-weight: inherit;
  background: none;
  padding-inline: 0;
  border-bottom: var(--mark-w) solid var(--accent);
  padding-bottom: 2px;
}
/* 濃紺の帯の上の見出しは、濃い金だと沈むので案の金のまま（7.43:1）。 */
.d-band-navy .d-title strong,
.d-band-photo .d-title strong,
.d-hero-title strong { color: var(--accent); }

/* ----------------------------------------------------- ファーストビュー */

.d-hero {
  position: relative;
  padding: 108px 0 116px;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.d-logo {
  margin: 0 0 58px;
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: .18em;
  color: var(--accent);
}
.d-hero-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: clamp(32px, 5.4vw, 58px);
  line-height: 1.3;
  color: var(--accent);
  margin: 0 0 26px;
}
.d-hero-lead {
  margin: 0 0 8px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.85;
  color: var(--white);
}
.d-cta { justify-content: flex-start; margin-top: 30px; }
.d-center .d-cta,
.d-band-navy .d-cta,
.d-split-foot .d-cta,
.d-band-paper .d-cta,
.d-band-white .d-cta { justify-content: center; }
/* Our products は生成りの帯だが、ボタンは表紙の右の札の中に置くので左寄せの
   まま（下の `.d-prod .d-cta` が上書きする。どちらも同じ強さなので、
   **順番で決まる**——`.d-prod` の行を上へ動かさないこと）。 */

/* ----------------------------------------------- 変化（棒グラフと円グラフ） */

.d-change-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
/* 札の名前は 1 行のものと 2 行のものが混ざる。**行数が違っても図と
   キャプションの高さを揃える**ため、3 段の grid にして真ん中を伸ばす。 */
.d-change {
  text-align: center;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}
/* **grid の中身は `min-width: auto`**（＝ min-content）なので、折れない
   かたまりがあると中身が列からはみ出す。狭い画面で `auto-phrase` を
   効かせると文節がその「かたまり」になり、実際に横スクロールが出た
   （390px で 18px ぶん）。0 を入れると、入りきらない文節は従来どおり
   途中で折れる——**文節を優先はするが、はみ出してまでは守らない**。 */
.d-change > * { min-width: 0; }
.d-change-name {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-soft);
  line-height: 1.6;
}
/* 図の段（`.d-change` の 2 段目）。 */
.d-change-fig { margin: 0 0 10px; }
/* **棒と円で版面の広さが違う。** 棒は 100 角、円は区分名を外に出すぶん
   128 × 100 の横長。同じ幅で出すと円の文字だけ小さくなるので、円は
   横に広い分だけ大きく取る。 */
.d-change-fig .d-fig-bar { max-width: 168px; margin-inline: auto; }
.d-change-fig .d-fig-pie { max-width: 215px; margin-inline: auto; }
.d-change-cap {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-ink);
  line-height: 1.6;
}

.d-fig { width: 100%; height: auto; display: block; }
.d-bar { fill: var(--muted); }
.d-bar-arrow { color: var(--navy); }
.d-bar-head { fill: var(--navy); }
.d-fig-cap {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--muted);
}
.d-bar-base { stroke: var(--line); stroke-width: 1; }
.d-fig-axis {
  font-family: var(--font-sans);
  font-size: 8px;
  fill: var(--muted);
}

/* 円グラフの扇。**案は 4 区分**（1か月・2か月・3か月・6か月）を濃さで
   分けている。隣どうしが同じ色にならないよう 4 つ決め打ちで持ち、境目に
   白い線を引いて、色が近い端末でも扇が分かれて見えるようにする。 */
.d-pie { stroke: var(--white); stroke-width: 1.2; }
.d-pie-1 { fill: var(--tan); }
.d-pie-2 { fill: var(--muted); }
.d-pie-3 { fill: var(--navy); }
.d-pie-4 { fill: var(--accent-tint); stroke: var(--line); }

/* 扇の中の文字。**案と同じく図の中に書く**（2026-09-21 の指摘）。
   扇ごとに地の色が違うので、**文字の色も扇ごとに決め打ちする**——
   1 つの色で通すと、砂色の扇か濃紺の扇のどちらかで読めなくなる。 */
.d-pie-label {
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 700;
}
.d-pie-1-label { fill: var(--navy); }
.d-pie-2-label { fill: var(--white); }
.d-pie-3-label { fill: var(--white); }
.d-pie-4-label { fill: var(--navy); }
/* 扇が細くて中に入らなかったものは外に出す。地は帯の色なので `--muted`。 */
.d-pie-label-out { fill: var(--muted); font-weight: 400; }
.d-pie-lead { stroke: var(--muted); stroke-width: 0.8; }

.d-change-notes {
  list-style: disc;
  margin: 0;
  padding-left: 1.3em;
  max-width: 44em;
  color: var(--muted);
  /* 松川さんの指摘（2026-09-26 の ⑨）で 12px から下げた。図の下に添える
     注記なので、図より目立たないところまで。 */
  font-size: 11px;
  line-height: 1.85;
}

/* ------------------------------------------------------ 強み（写真の帯） */

.d-strength-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.d-strength {
  border: var(--hairline) solid var(--accent);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.d-strength-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--accent);
}
.d-strength-lead {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--white);
}
.d-strength-stack {
  list-style: disc;
  margin: 0;
  padding-left: 1.2em;
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted-dark);
}
.d-strength-close {
  margin: auto 0 0;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}

/* ----------------------------------------------------------- 悩みの札 */

.d-pain-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.d-pain-card {
  background: var(--tan);
  color: var(--navy-soft);
  padding: 22px 20px;
  text-align: center;
}
.d-pain-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--navy-soft);
}

/* -------------------------------------------- 写真と一覧を左右に置く節 */

.d-split > .wrap,
.d-split {
  display: block;
}
.d-split .d-split-art,
.d-split .d-split-body,
.d-split .d-split-foot {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}
/* `_section` は中身を 1 つの `.wrap` に入れるので、左右に割るのは中の
   grid で行う。**`.wrap` を 2 つ並べない**（本文の最大幅が 2 通りになる）。 */
.d-split > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 40px;
}
.d-split > .wrap > .d-split-art,
.d-split > .wrap > .d-split-body { width: auto; margin-inline: 0; }
.d-split-flip > .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.d-split-img { width: 100%; height: auto; display: block; }
/* 写真が届いていないときは 1 列に畳む（`_render_matrix_d` が付ける印）。
   空の列をそのまま残すと、画面の半分が白いまま出る。 */
.d-split-solo > .wrap { grid-template-columns: 1fr; }
.d-split-foot {
  grid-column: 1 / -1;
  width: auto;
  margin-inline: 0;
  text-align: center;
  padding-top: 26px;
}

.d-rows { list-style: none; margin: 18px 0 0; padding: 0; }
.d-rows > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: var(--hairline) solid var(--line);
}
.d-rows > li:last-child { border-bottom: 0; }
.d-rows p {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink);
}
.d-row-icon {
  flex: none;
  color: var(--gold-ink);
  display: inline-flex;
}
.d-row-icon .icon { width: 22px; height: 22px; }
/* 群の名前は**画面に出さず、読み上げにだけ残す**（案に無い文章を足さない
   というオーナー判断、2026-09-20）。`display: none` にすると読み上げからも
   消えるので、位置だけをずらす。 */
.d-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* ボタンの上の一言。**1 行に収まる大きさにする**（松川さんの指摘、
   2026-09-27 の ⑦「モバイル版でも PC 版でも両方一行で収まるフォント
   サイズにして」）。いちばん長いのは `/g/` の「＼4980円！あなた専用英語
   問題集はここだけ！／」24 字で、いちばん狭い置き場は Our products の札
   （300px）。**折り返したら検査が落とす**（`scripts/lp_measure.py`）ので、
   文言を長くするときはここも見ること。 */
.d-cta-note {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-ink);
}
/* 画面がここまで狭いと、12px では 24 字が入らない（実測 290px 対 281px）。 */
@media (max-width: 400px) {
  .d-cta-note { font-size: 11px; }
}

/* ------------------------------------------------------------ 誌面の一覧 */

.d-workbook { margin: 0 auto 26px; max-width: 880px; }
.d-workbook-img { width: 100%; height: auto; display: block; }


/* ------------------------------------------------ 料金・納期・納品形式 */

.d-spec-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.d-spec {
  border: var(--hairline) solid var(--accent);
  padding: 20px 18px;
  text-align: center;
}
.d-spec-label {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--accent);
}
.d-spec-value {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--white);
}
.d-spec-form {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.7;
}
.d-spec-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted-dark);
}

/* ------------------------------------------------------------ 購入手順 */

.d-steps { list-style: none; margin: 26px 0 0; padding: 0; }
.d-step {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border: var(--hairline) solid var(--accent);
  padding: 14px 20px;
  margin-bottom: 12px;
}
.d-step:last-child { margin-bottom: 0; }
.d-step-no {
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  min-width: 68px;
}
.d-step-body { flex: 1 1 auto; }
.d-step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.d-step-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted-dark);
  line-height: 1.8;
}

/* -------------------------------------------------------- お客様の声 */

.d-voice-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.d-voice {
  background: var(--tan);
  border-bottom: 3px solid var(--tan-line);
  padding: 20px 18px 14px;
  display: flex;
  flex-direction: column;
}
.d-voice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--navy-soft);
}
.d-voice-who {
  margin-top: auto;
  padding-top: 10px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
}

/* ------------------------------------------------------------ 法人向け */

/* 法人向けは本文とボタンを真ん中に寄せる。ただし**英字ラベルと見出しは
   他の節と同じく左**——白い帯の 2 節（Our workbook・For business）だけ
   頭の位置が他とずれていた（松川さんの 2026-09-21 の指摘「Customer Voice・
   Purchase Process の位置に合わせて左に寄せて」）。 */
.d-center { text-align: center; }
.d-center .d-eyebrow { justify-content: flex-start; }
.d-center .d-title { text-align: left; }
.d-business-body {
  margin: 0 auto 10px;
  max-width: 40em;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- FAQ */

.d-faq-list { list-style: none; margin: 26px 0 0; padding: 0; }
.d-faq {
  border: var(--hairline) solid var(--accent);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.d-faq:last-child { margin-bottom: 0; }
.d-faq-q {
  margin: 0 0 8px;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--navy-soft);
  font-weight: 700;
  font-size: 15px;
}
.d-faq-a {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--white);
}
.d-faq-a a { color: var(--accent); }

/* ------------------------------------------------------------ 狭い画面 */

@media (max-width: 860px) {
  .d-change-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-strength-list,
  .d-spec-list { grid-template-columns: 1fr; }
  .d-pain-list,
  .d-voice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-split > .wrap,
  .d-split-flip > .wrap { grid-template-columns: 1fr; }
  /* 狭い画面では写真を先に出す（案のスマートフォン表示と同じ並び）。 */
  .d-split-flip > .wrap > .d-split-art { order: -1; }
}

@media (max-width: 560px) {
  .d-hero { padding: 72px 0 80px; }
  /* 案は 3 行で見せている。17px のままだと「30,000以上のビジネスシーンから
     厳選された」が途中で折れて 5 行になる（松川さんの指摘、2026-09-26 の ②）。 */
  .d-hero-lead { font-size: 15px; }
  .d-pain-list,
  .d-voice-list { grid-template-columns: 1fr; }
  .d-step { flex-direction: column; gap: 4px; }
  .d-step-no { min-width: 0; }
}

/* =====================================================================
   ここから下は **`/e/`（5 つ目の案、2026-09-26）でだけ出る帯**。

   `/e/` は `/d/` と同じスタイルシートを読む（`bem.lp.VARIANT_LAYOUTS`）。
   複製しないのは、共通の部品を直したときに片方だけ古いまま公開されるため。
   `/d/` はここのクラスをひとつも書き出さないので、増えても見た目は変わらない。
   ===================================================================== */

/* ------------------------------------------------- Achievements（`/e/`） */

.d-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 34px;
  margin-top: 26px;
}
.d-proof-top {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-serif);
}
.d-proof-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--white);
}
.d-proof-value {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
}
.d-medals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
}
/* 枠は**名前が 1 行に収まる幅**で決める（松川さんの指摘、2026-09-27 の ②③
   「PC 版は 1 行で表示」）。いちばん長い「英語力が向上した人」が 9 字 ×
   11px = 99px なので 108px。絵はこれまでどおり 92px で、枠の中で中央に置く
   ——枠を広げたぶん絵まで大きくすると、見てもらった組み上がりが動く。 */
.d-medals li {
  width: 108px;
  text-align: center;
  /* **絵を下で揃える**（松川さんの指摘、2026-09-27 の ③）。名前が 1 行の
     「お客様満足度」と 2 行の 2 つが並ぶと、上から積むと絵の高さがずれる。
     枠は行の `align-items: stretch` で同じ高さになるので、**絵だけを下へ
     寄せる**（名前は上で揃ったまま）。広い画面では名前がどれも 1 行なので
     見た目は変わらない。 */
  display: flex;
  flex-direction: column;
}
/* 数字は絵に焼き込まれている（`bem.lp.B_MEDALS`）。上に重ねる名前だけが文字。
   `／` の切れ目は `bem.lp._keep` が `.d-keep` で囲む。**幅が足りるあいだは
   1 行**、足りなくなるとその切れ目で折れる。 */
.d-medal-name {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted-dark);
}
/* 3 枚の絵は中身ぴったりに切り揃えてある（`scripts/lp_cutout.py` の `_trim`）。
   **絵の側で揃えている**ので、ここで 1 枚ずつ拡大率を持たない。 */
.d-medal-fig { margin-top: auto; }
.d-medal-img {
  width: 100%;
  max-width: 92px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.d-share-head {
  margin: 34px 0 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
}
.d-share-note {
  margin-left: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-dark);
}
.d-share-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* 円の外に区分名を出しているので、**枠より内側で縮めさせない**。
   `min-width: auto` のままだと、細い列で名前が切れる。 */
.d-share-list > * { min-width: 0; }
.d-share-fig {
  width: 100%;
  height: auto;
  display: block;
}
/* 扇。7 色あるのは、いちばん区分の多い「業種」が 7 つで、
   `bem.lp.E_SHARE_FILLS` と同じ数にしてあるため。1 つでも減らすと、
   最後の扇が最初の扇と同じ色になって隣り合う。 */
.d-share-1 { fill: var(--share-dark); }
.d-share-2 { fill: var(--tan); }
.d-share-3 { fill: var(--share-pale); }
.d-share-4 { fill: var(--white); }
.d-share-5 { fill: var(--share-mid); }
.d-share-6 { fill: var(--accent-tint); }
.d-share-7 { fill: var(--tan-line); }
/* 区分名。**大きさは `bem.lp.E_PIE_EM` と同じ値**——置き場はそちらで
   計算しているので、ここだけ変えると版面の検査が通ったまま文字が
   はみ出す。円の外に出したものは写真の帯の上（濃紺）に出る。16.06:1。 */
.d-share-label {
  font-family: var(--font-sans);
  font-size: 5.6px;
  font-weight: 700;
  /* 字間を足さない。1 文字ずつに乗るので、7 文字の区分名では 1 文字ぶん
     近く広がり、`bem.lp._e_text_w` の見積もりから外れる。 */
  letter-spacing: 0;
  fill: var(--white);
}
/* 扇の中に入れた区分名は、**地が帯ではなく扇の塗り**になる
   （`bem.lp._e_pie_place`）。白のままだと薄い扇の上で読めないので、
   扇ごとに字の色を変える。濃い扇（`--share-dark`）だけ白で 4.77:1、
   ほかは濃紺で 5.38:1 以上。`scripts/lp_contrast.py` が
   `d-share-N-label` と `.d-share-N` を**クラス名で引き当てて**測るので、
   **この対応を崩す名前に変えない**。 */
.d-share-1-label { fill: var(--white); }
.d-share-2-label,
.d-share-3-label,
.d-share-4-label,
.d-share-5-label,
.d-share-6-label,
.d-share-7-label { fill: var(--navy); }
/* 重なりを避けてずらした区分名だけ、扇から線を引く（`bem.lp._e_pie_fig`）。 */
.d-share-tick {
  stroke: var(--muted-dark);
  stroke-width: 0.6;
}
.d-share-lead {
  margin: 22px auto 0;
  max-width: 44em;
  text-align: left;
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted-dark);
}

/* -------------------------------------------------- Our products（`/e/`） */

/* 帯の地は `tint`（`d-band-paper`）。**表紙の絵の周りと同じ色**でないと、
   切り出した四角が地の上に浮いて見える（`e-product.jpg` の四隅は #f4f1ec）。 */
.d-prod-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px 46px;
  margin-top: 26px;
}
.d-prod-art { flex: 0 0 auto; }
.d-prod-img {
  width: 220px;
  height: auto;
  display: block;
}
.d-prod-card {
  flex: 0 1 300px;
  text-align: left;
}
/* 案は 1 文字ずつ枠で囲んで市松に塗り分けている。1 文字ずつ要素に割ると
   読み上げが「じ・ぶん・せん・よう」と割れるので、**枠は文字列ごと**に
   引いて、塗り分けはしていない。 */
.d-prod-badge {
  margin: 0;
  display: inline-block;
  border: var(--hairline) solid var(--navy);
  padding: 4px 12px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--navy);
  background: var(--accent-tint);
}
.d-prod-name {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-ink);
}
.d-prod-price {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.d-prod .d-cta { justify-content: flex-start; margin-top: 18px; }

/* ------------------------------------------------- 無料診断の動画（`/e/`） */

/* 案はファーストビューの右にスマートフォンの絵を置いている。そこを動画に
   差し替える（松川さんの指定、2026-09-26）。**枠は描かない**——動画には
   黒いスマートフォンの枠が写っていて、背景も案と同じ濃紺なので、足すと
   枠が二重になる。 */
.d-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 52px;
  align-items: center;
}
/* 2 列になったぶん、リードの幅は列が決める。 */
.d-hero-split .d-hero-lead { max-width: none; }

/* 案は注記をボタンの幅の中で中央に置いている。**注記とボタンをまとめて
   ボタンの幅まで縮める**ことでそう見せる（幅を書き写すと、文言を変えた
   ときにずれる）。注記の色は地で変わる——生成りの帯では金の文字
   （`.d-cta-note`）だが、**濃紺のファーストビューでは読めない**ので白。
   案も同じで、ここだけ `#ffffff`、Business scene の下は `#222344`。 */
.d-hero-cta { display: inline-block; margin-top: 30px; }
/* **ファーストビューの外に出したときは中央に置く**（松川さんの指摘、
   2026-09-27 の ⑥）。`/f/` `/g/` は Product Specification のボタンも
   この形（注記 ＋ ボタン）で出すが、`display: inline-block` のままだと
   帯の左端に寄る。`.d-cta` の `justify-content` は入れ物の中の話なので
   効かない——**入れ物そのものを中央へ寄せる。** */
.d-band-navy .d-hero-cta {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.d-hero-cta .d-cta { justify-content: center; margin-top: 8px; }
/* 注記の色は地で変わる。生成りの帯では金の文字（`.d-cta-note` の既定）、
   **濃紺の地では読めない**ので白。案も同じで、ファーストビューと
   Product Specification だけ `#ffffff`、生成りの帯は `#222344`。 */
.d-hero .d-hero-cta .d-cta-note,
.d-band-navy .d-hero-cta .d-cta-note { color: var(--white); }

/* 縦向きの動画（1080×1920）。**横幅ではなく、収めたい高さから決める**
   ——640px も広げると高さが 1138px になり、画面 1 枚に収まらない。 */
.d-movie {
  margin: 0;
  max-width: 300px;
  width: 100%;
}
.d-movie-video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--navy);
}
.d-movie-cap {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted-dark);
}

/* 1 列に落ちたら、動画は文字の下に中央で置く（案のスマートフォン表示）。 */
@media (max-width: 860px) {
  .d-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .d-hero-split .d-movie { margin: 0 auto; }
}

@media (max-width: 860px) {
  .d-share-list { grid-template-columns: repeat(2, 1fr); }
  .d-proof-value { font-size: 36px; }
  .d-proof-name { font-size: 22px; }
  /* 注記が見出しの続きに回り込むと「※当教材購入者の / 属性データより算出」と
     途中で折れる。狭い画面では行を分ける。 */
  .d-share-note { display: block; margin: 4px 0 0; }
}

@media (max-width: 520px) {
  /* 枠を狭めて、名前を `／` の切れ目で 2 行にする（松川さんの指摘、
     2026-09-27 の ②③「モバイル版は 2 行にして」）。`bem.lp._keep` が
     切れ目を作っているので、**ここは幅を決めるだけ**。 */
  .d-medals { flex-wrap: wrap; justify-content: center; }
  .d-medals li { width: 84px; }
  /* **円は 1 列に落とさない**（松川さんの指摘、2026-09-26 の ⑤）。4 つとも
     2×2 で並べる。区分名は図の中の文字なので、列が狭くなったぶんだけ
     小さく出る。**ここで字だけ大きくしない**——置き場は `bem.lp` 側で
     計算しているので、CSS で大きくすると重なる。効くのは版面を詰める
     ことで（`bem.lp.E_PIE_BOX`）、入る区分名を円の中に入れたのはそのため。 */
  .d-share-lead { font-size: 12px; }
}

/* ------------------------------------------ 狭い画面の行の折り返しだけ */

/* 日本語の行は語の途中でも折れる。狭い画面は 1 行が短いぶんそれが目立ち、
   「スケジ／ュール調整」「PoC実／施」「43%ア／ップ」のような折れ方になる
   （松川さんの 2026-09-21 の指摘「改行位置が文章の区切りでないところ」）。

   `auto-phrase` は文節の切れ目を選ぶので、語の途中で折れにくくなる。
   `balance` は見出しの行数を揃え、`pretty` は最後の行に 1 文字だけ
   残るのを避ける。**PC の折り返しは触らない**——すでに見てもらった
   組み上がりなので、狭い画面のときだけ効かせる。対応していない
   ブラウザでは、いまと同じ折り返しに戻るだけで崩れない。 */
@media (max-width: 860px) {
  p, li, h1, h2, h3, h4, dt, dd { word-break: auto-phrase; }
  h1, h2, h3, h4,
  .d-change-name,
  .d-change-cap,
  .d-cta-note { text-wrap: balance; }
  p, li { text-wrap: pretty; }
}

/* ------------------------------ 一覧の下の締めの 1 行（`/e/` だけ） */

/* 「9業種×10職種×4Levelから選択可能」「30,000以上のビジネスシーンから厳選」。
   5 つ目の案で増えた行で、案では一覧の下に中央で置いている。 */
.d-rows-note {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--navy);
}

/* -------------------------------- 折れてよい場所を原稿で決める（`_keep`） */

/* 日本語は語の途中でも折れる。狭い画面では「リスニング向上実感ま／での期間」
   のような折れ方になっていた（松川さんの指摘、2026-09-26 の ⑦⑧⑩）。
   原稿の「／」で区切った塊を `inline-block` にすると、**折れるのは塊と
   塊のあいだだけ**になる。入る幅があれば 1 行のままなので、案が 1 行で
   見せている PC の見出しはそのまま。 */
.d-keep { display: inline-block; }