/* 機会損失カルテ — デザインシステム
   案A クリムゾン×アイボリー（トークンは markup.test.js が値を固定している。変更不可）
   2026-08-16: PC（デスクトップ）閲覧を前提としたレイアウトへ全面改訂。
   2026-08-19: 依頼主の修正依頼を反映し、結果画面の下に訴求パート（LP本文）を追加。
   モバイルは 900px 以下で1カラムに折り返すフォールバックとして維持する。 */

:root {
  /* ---- 確定トークン（markup.test.js で値を固定。勝手に変えないこと） ---- */
  --color-bg: #FAF8F5;
  --color-ink: #1D1D1F;
  --color-primary: #B91C2E;
  --color-danger: #D90429;
  --color-praise: #B98A2E;
  --color-line: #06C755;
  --color-muted: #6E6E73;

  /* ---- 上記から派生させた拡張トークン（面で使う深紅・金・罫線） ---- */
  --color-crimson-deep: #6B0F1D;
  --color-crimson-dark: #8E1526;
  --color-gold: #C9A227;
  /* ヒーローの見出しバッジ用。深紅の上でも埋もれない明るい黄色（2026-08-19 ユーザー指示） */
  --color-gold-bright: #F5C518;
  --color-paper: #FFFFFF;
  --color-rule: rgba(29, 29, 31, 0.14);
  --color-rule-light: rgba(255, 255, 255, 0.38);
  /* 注記専用の文字色。白カードの外（アイボリー地）に置くと --color-muted では
     コントラストが4.31まで落ちてWCAG AA(4.5)を割るため、一段濃い色を用意する（C-LAW-002） */
  --color-notice-ink: #5C5C61;

  --radius: 3px;
  --shadow: 0 10px 34px rgba(29, 29, 31, .07);
  --shadow-lift: 0 14px 34px rgba(107, 15, 29, .26);
  --maxw: 1180px;
  --readw: 760px;

  /* 見出しは明朝、本文はゴシック。いずれもOS標準フォントのみ（ADR-004: Webフォント読込禁止） */
  --font-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Noto Serif JP", "Yu Mincho Light", "MS PMincho", serif;
  --font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.screen {
  display: block;
}

.screen[hidden] {
  display: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   サイトヘッダ（ヒーロー以外の画面で表示する細いブランドバー）
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  padding: 16px 24px;
}

body[data-screen="hero"] .site-header {
  display: none;
}

.brand {
  margin: 0;
  min-height: 1.6em;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--color-primary);
}

/* ============================================================
   S0 ヒーロー（左：深紅の面 ／ 右：アイボリー地＋成約率バー＋CTA）
   ============================================================ */
.screen--hero {
  padding: 0;
}

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 100vh;
}

.hero__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7vh 5.5vw;
  background-color: var(--color-crimson-deep);
  background-image:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(158deg, var(--color-crimson-dark) 0%, var(--color-crimson-deep) 58%, #4C0813 100%);
  color: #fff;
}

/* 深紅の面にごく薄い斜めの陰影を重ね、単色のベタ塗りに見えないようにする */
.hero__brand::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* 文言は app.js が CONFIG から注入するため、読み込み直後は空になる。
   1行ぶんの高さをあらかじめ確保して、描画後のガタつき（CLS）を防ぐ。
   ★JS注入する要素を新設したら必ず同じ手当てをすること★ */
.hero__label {
  margin: 0 0 28px;
  min-height: 1.4em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .44em;
  text-indent: .44em;
  line-height: 1.4;
  color: var(--color-gold);
}

.tool-name {
  margin: 0;
  min-height: calc(1.5em + 50px); /* padding48px + 上下border2px */
  padding: 24px 0;
  border-top: 1px solid var(--color-rule-light);
  border-bottom: 1px solid var(--color-rule-light);
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 600;
  letter-spacing: .24em;
  text-indent: .24em;
  line-height: 1.5;
  color: #fff;
}

.catch-copy {
  margin: 28px 0 0;
  min-height: 2.4em;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 2.2;
  color: rgba(255, 255, 255, .92);
}

.hero__audience {
  position: relative;
  margin: 40px 0 0;
  /* border-box のため padding を含めて予約する（CLS対策・実測値に合わせる）。2行ぶん */
  min-height: calc(3.2em + 30px);
  white-space: pre-line;
  padding: 14px 22px 14px 26px;
  align-self: flex-start;
  border: none;
  border-radius: 2px;
  /* 面を明るい黄色でベタ塗りし、文字は深紅にして反転させる（コントラスト比 約8.3:1） */
  background: var(--color-gold-bright);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--color-crimson-deep);
  text-wrap: balance;
}

.hero__lead {
  margin: 16px 0 0;
  /* 実測で2行になるため2行ぶんを予約する（1行ぶんだと注入時に下の要素が動く） */
  min-height: 3.5em;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.75;
  color: #fff;
  /* config.js の 
 を改行として描画する（改行位置を依頼文どおりに固定するため） */
  white-space: pre-line;
}

/* 「その個別面談、本当にその成約率で大丈夫？」— 問いかけを最も強く見せる */
.hero__lead--q {
  margin-top: 26px;
  /* 1行に収める指定（2026-08-19 ユーザー指示）。字間を詰めて狭い端末でも折り返さないようにする */
  min-height: 1.7em;
  font-size: clamp(17px, 1.85vw, 29px);
  letter-spacing: 0;
  line-height: 1.7;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.hero__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 7vh 4vw;
  background-color: var(--color-bg);
}

/* ---- 成約率バー（弊社支援先の実績。C-LAW-005: 出典を必ず添える） ---- */
.bench {
  width: min(460px, 100%);
}

.bench__source {
  margin: 0 0 14px;
  min-height: 1.9em;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-muted);
}

.bench__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bench__row {
  display: grid;
  grid-template-columns: 7.5em 1fr 3.4em;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bench__row:last-child {
  margin-bottom: 0;
}

.bench__label {
  min-height: 1.5em;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
}

.bench__track {
  display: block;
  height: 18px;
  background: rgba(29, 29, 31, .07);
  border-radius: 2px;
  overflow: hidden;
}

/* バーの実際の長さは app.js が CONFIG.SUPPORT_RATES から設定する（数値をCSSに直書きしない） */
.bench__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
}

.bench__bar--sns { background: var(--color-crimson-deep); }
.bench__bar--adjv { background: var(--color-primary); }

/* 「貴社は？」の行だけは長さを持たず、破線の空枠にする */
.bench__row--you .bench__track {
  background: transparent;
  border: 1px dashed rgba(29, 29, 31, .3);
}

.bench__value {
  min-height: 1.5em;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
  color: var(--color-primary);
}

.bench__row--you .bench__label,
.bench__row--you .bench__value {
  color: var(--color-muted);
}

.hero__note {
  margin: 0;
  white-space: pre-line;
  /* 実測2行 */
  min-height: 3.8em;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-ink);
}

.hero__invite {
  margin: 0;
  white-space: pre-line;
  /* 実測2行 */
  min-height: 3.8em;
  max-width: 460px;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.9;
  color: var(--color-crimson-deep);
}

/* ============================================================
   進捗バー（S1-S3・S4）
   ============================================================ */
.progress-bar {
  height: 4px;
  background: rgba(185, 28, 46, 0.14);
  overflow: hidden;
  margin-bottom: 14px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* 初期幅はCSSで与える。HTMLのstyle属性はCSP(style-src 'self')でブロックされるため使用しない（SEC-002） */
.progress-bar__fill--step1 { width: 33%; }
.progress-bar__fill--step2 { width: 66%; }
.progress-bar__fill--step3 { width: 100%; }
.progress-bar__fill--empty { width: 0%; }

.progress-label {
  margin: 0 0 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--color-muted);
}

/* ============================================================
   S1-S3 入力フォーム（中央のパネル）
   ============================================================ */
.screen--form,
.screen--calc,
.screen--result {
  padding: 72px 24px 96px;
}

/* 入力画面はカードが上に張り付いて下が空くのを避け、画面中央に置く */
.screen--form {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 57px);
}

.panel {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 52px 60px 56px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.field-label {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-rule);
}

.field-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 4px;
  font-size: 28px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  border: none;
  background: transparent;
  color: var(--color-ink);
}

.field-input:focus {
  outline: none;
}

.field-row:focus-within {
  border-bottom-color: var(--color-primary);
}

.field-unit {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}

.hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

.error {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-danger);
}

.error[hidden] {
  display: none;
}

.form-actions {
  display: flex;
  gap: 14px;
  margin-top: 40px;
}

/* ============================================================
   ボタン（タップ領域44px以上・NFR-USE-001）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .08em;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity .2s ease, transform .2s ease;
}

.btn:hover {
  opacity: .88;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  flex: 1;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
}

.btn--hero {
  flex: 0 0 auto;
  /* 文言をJS注入するため、確定後の高さ（padding44px + 1行）を先に確保する（CLS対策） */
  min-height: 75px;
  min-width: 300px;
  padding: 22px 52px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .18em;
  text-indent: .18em;
  box-shadow: var(--shadow-lift);
}

.btn--line {
  background: var(--color-line);
  color: #fff;
  width: 100%;
  margin-top: 24px;
  padding: 18px 24px;
  font-size: 16px;
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  width: 100%;
  margin-top: 12px;
  padding: 18px 24px;
  font-weight: 400;
}

.btn--retry {
  width: 100%;
  margin-top: 12px;
  font-weight: 400;
  border: none;
  color: var(--color-muted);
}

/* ============================================================
   S4 計算中
   ============================================================ */
.screen--calc {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.calc-box {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.calc-message {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: .18em;
  text-indent: .18em;
}

/* ============================================================
   S5-S6 結果（デスクトップは2カラム）
   ============================================================ */
/* 取りこぼし額の見せ場（全幅）。上辺の深紅帯でヒーローと色を連続させる */
.result-hero {
  max-width: var(--maxw);
  margin: 0 auto 28px;
  padding: 48px 56px 52px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-crimson-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.result-rate-label {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--color-muted);
}

/* 成約率と損失額の数字は、見出しの明朝とは切り替えてゴシック太字で大きく見せる。
   極端な差はつけない（2026-08-16 ユーザー指示） */
.result-rate {
  display: inline-block;
  margin: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-family);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  color: var(--color-primary);
}

.result-rate .num {
  font-size: clamp(30px, 3.1vw, 46px);
  letter-spacing: -.01em;
}

.result-loss {
  margin-top: 30px;
}

.result-loss[hidden] {
  display: none;
}

.result-loss-label {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-ink);
}

/* 取りこぼし額はページ内で最大の文字（ACC-FR-RPT-001-2） */
.result-loss-headline {
  margin: 0 0 24px;
  font-family: var(--font-family);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--color-danger);
}

.result-loss-headline .num {
  font-size: clamp(42px, 5.4vw, 82px);
  letter-spacing: -.02em;
}

.result-loss-line {
  max-width: 900px;
  margin: 0 auto 14px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.95;
  color: var(--color-ink);
}

/* 本文中の金額だけを一段大きく（比率は約1.6倍に留める） */
.result-loss-line .num {
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  color: var(--color-danger);
}

.result-loss-line:last-of-type {
  margin-bottom: 0;
}


.result-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  /* 左右のカードの高さを揃える（2026-08-16 ユーザー指示） */
  align-items: stretch;
  max-width: var(--maxw);
  margin: 0 auto;
}

.result-card,
.guide-card {
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 44px 44px;
}

.result-message {
  margin: 0;
  font-size: 17px;
  line-height: 2.05;
}

.result-message .em {
  color: var(--color-danger);
  font-weight: 700;
  /* 「…万円」の最後の1文字だけが次行に落ちるのを防ぐ */
  white-space: nowrap;
}

/* 注記は常時表示・折りたたみ禁止・本文の80%以上（C-LAW-002 / ACC-FR-RPT-004-2） */
.notice {
  margin: 28px 0 0;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-notice-ink);
  background: rgba(110, 110, 115, 0.07);
  border-left: 2px solid var(--color-rule);
  border-radius: 2px;
}

/* ---- 右カラム: この数値の算出根拠 ---- */
.basis__heading {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--color-crimson-deep);
}

.basis__lead,
.basis__tail {
  margin: 0;
  font-size: 15px;
  line-height: 2;
}

.basis__list {
  margin: 10px 0;
  padding: 0 0 0 4px;
  list-style: none;
}

.basis__item {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: var(--color-primary);
}

.basis__item::before {
  content: "・";
  position: absolute;
  left: 0;
}

.basis__list--max .basis__item {
  font-size: 15px;
  color: var(--color-crimson-deep);
}

.basis__max-lead {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-rule);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-muted);
}

/* CTA（中央・大きく）— 注記と同一ビューポートに収める（C-LAW-002） */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  margin: 40px auto 0;
}

.cta-block .btn {
  width: 100%;
}

.cta-block .btn--line {
  margin-top: 0;
  padding: 26px 24px;
  font-size: 19px;
  letter-spacing: .06em;
  box-shadow: 0 12px 30px rgba(6, 199, 85, .24);
}

.cta-block .btn--outline {
  margin-top: 0;
  padding: 24px 24px;
  font-size: 17px;
  font-weight: 700;
}

.cta-block .btn--retry {
  margin-top: 4px;
  width: auto;
  min-width: 200px;
  font-size: 15px;
}

.cta-block--offer {
  margin-top: 44px;
}

/* ============================================================
   結果画面の下に続く訴求パート（2026-08-19 依頼主指定の固定コンテンツ）
   ============================================================ */
.lp-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px 0 0;
  border-top: 1px solid var(--color-rule);
  margin-top: 72px;
}

.lp-heading {
  margin: 0 0 32px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.6;
  text-align: center;
  color: var(--color-crimson-deep);
}

.lp-heading--lg {
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: .16em;
}

.lp-subheading {
  margin: 40px 0 16px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--color-crimson-deep);
}

/* ---- 運営会社 ---- */
.company {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
  padding: 36px 40px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.company__photo {
  width: 220px;
  height: auto;
  border-radius: var(--radius);
  background-color: var(--color-bg);
}

.company__name {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--color-ink);
}

.company__name--lg {
  font-size: clamp(26px, 2.6vw, 38px);
}

.company__role {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--color-muted);
}

.company__person {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-ink);
}

.achievements,
.biz-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 実績は読み飛ばされやすいので、カード＋太字＋深紅の縦罫で確実に目に留める
   （2026-08-19 ユーザー指示「もっと目立たせて」） */
.achievements {
  display: grid;
  gap: 12px;
}

.achievements__item {
  position: relative;
  margin: 0;
  padding: 20px 26px 20px 30px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.85;
  color: var(--color-ink);
  text-wrap: pretty;
}

/* 金額だけを一段大きく・危険色で見せる（2026-08-19 ユーザー指示「実績を目立たせて」）。
   nowrap は「年商4億円」「50億円以上」が語の途中で折り返すのを防ぐため */
.achievements__item .em,
.offer__proof-item .em {
  font-size: clamp(21px, 1.9vw, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-danger);
  white-space: nowrap;
}

.biz-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.biz-list__item {
  padding: 8px 20px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background-color: var(--color-paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ---- クライアント様からの声（ご提供画像） ---- */
.voices {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.voices__item {
  margin: 0;
}

.voices__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--color-paper);
}

/* ---- 売上を上げる最大のセンターピンは"営業" ---- */
.why {
  text-align: center;
}

.why__heading {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--color-crimson-deep);
}

.why__lead {
  max-width: var(--readw);
  margin: 0 auto;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.95;
  color: var(--color-danger);
}

.why__figure {
  display: block;
  width: min(300px, 80%);
  height: auto;
  margin: 32px auto 48px;
}

.why__body {
  max-width: var(--readw);
  white-space: pre-line;
  margin: 0 auto 22px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2.1;
}

.why__bridge {
  margin: 34px 0 6px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: .1em;
}

.why__big {
  max-width: var(--readw);
  white-space: pre-line;
  margin: 0 auto 34px;
  padding: 24px 20px;
  border-top: 2px solid var(--color-crimson-deep);
  border-bottom: 2px solid var(--color-crimson-deep);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.7;
  color: var(--color-crimson-deep);
}

.why__sub {
  margin: 56px 0 20px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-ink);
}

.why__list {
  max-width: var(--readw);
  margin: 18px auto 26px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.why__list-item {
  position: relative;
  margin-bottom: 14px;
  padding: 16px 20px 16px 46px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.95;
}

.why__list-item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 1.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}

.why__closing {
  max-width: var(--readw);
  margin: 0 auto;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 2;
  color: var(--color-crimson-deep);
}

/* ---- 実際の事例 ---- */
.cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.case {
  padding: 36px 36px 40px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.case__title {
  margin: 0 0 22px;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.7;
}

.case__before {
  margin: 0;
  font-size: 15px;
  color: var(--color-muted);
}

.case__arrow {
  position: relative;
  margin: 14px 0;
  padding-top: 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-primary);
}

.case__arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 18px;
  background: var(--color-primary);
  transform: translateX(-50%);
}

.case__after {
  margin: 0 0 20px;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-danger);
}

/* 結びは2行になってよいので大きく。金額（〔…〕で囲んだ部分）はさらに一段大きく見せる
   （2026-08-19 ユーザー指示） */
.case__result {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-serif);
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-crimson-deep);
  /* 「年商」が行末で割れないよう、改行位置を config.js の 
 で固定する */
  white-space: pre-line;
}

.case__result .em {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-family);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--color-danger);
}

/* ---- 結論 ---- */
.conclusion {
  text-align: center;
}

.conclusion__big {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 34px 28px;
  background-color: var(--color-crimson-deep);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.9vw, 42px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.7;
  color: #fff;
  box-shadow: var(--shadow-lift);
}

.conclusion__body {
  max-width: var(--readw);
  margin: 0 auto 14px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 2;
}

.conclusion__note {
  margin: 0;
  font-size: 14px;
  color: var(--color-muted);
}

/* ---- 最後に（無料PDFの提供） ---- */
.offer {
  text-align: center;
}

.offer__figure {
  display: block;
  width: min(300px, 78%);
  height: auto;
  margin: 8px auto 40px;
}

.offer__lead {
  max-width: var(--readw);
  margin: 0 auto 14px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 2;
}

.offer__proof {
  max-width: 620px;
  margin: 0 auto 26px;
  padding: 22px 24px;
  list-style: none;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
}

.offer__proof-item {
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 2;
  color: var(--color-crimson-deep);
}

.offer__body {
  max-width: var(--readw);
  margin: 0 auto 18px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2.1;
}

.offer__caution {
  max-width: var(--readw);
  margin: 26px auto;
  padding: 16px 20px;
  background: rgba(217, 4, 41, .06);
  border-left: 3px solid var(--color-danger);
  border-radius: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.95;
  text-align: left;
  color: var(--color-ink);
}

.offer__closing {
  margin: 26px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-crimson-deep);
}

.site-footer {
  max-width: var(--maxw);
  margin: 72px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-rule);
  text-align: center;
}

.footer-note {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-muted);
}

/* ============================================================
   日本語の改行品質（2026-08-19 ユーザー指摘「1文字だけで改行される箇所が不自然」）
   ------------------------------------------------------------
   balance = 見出し等の短い文で各行の長さを揃え、末尾に1文字だけ残るのを防ぐ
   pretty  = 本文で最終行が極端に短くなるのを避ける
   いずれも未対応ブラウザでは単に無視される（見た目が従来どおりになるだけ）ため安全。
   これで解消しない箇所は letter-spacing / font-size を個別に詰めて対処する。
   ============================================================ */
.tool-name,
.catch-copy,
.hero__note,
.hero__invite,
.field-label,
.calc-message,
.result-rate,
.result-loss-label,
.result-loss-headline,
.result-loss-line,
.basis__heading,
.lp-heading,
.lp-subheading,
.company__name,
.company__person,
.why__heading,
.why__lead,
.why__big,
.why__sub,
.case__title,
.case__before,
.case__after,
.conclusion__big,
.offer__proof-item,
.offer__closing {
  text-wrap: balance;
}

.result-message,
.notice,
.hint,
.basis__lead,
.basis__tail,
.basis__max-lead,
.basis__item,
.why__body,
.why__list-item,
.why__closing,
.conclusion__body,
.conclusion__note,
.offer__lead,
.offer__body,
.offer__caution,
.biz-list__item,
.footer-note {
  text-wrap: pretty;
}

/* ============================================================
   レスポンシブ（モバイルは1カラムのフォールバック）
   ============================================================ */
@media (max-width: 960px) {
  .result-grid,
  .cases {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  body {
    line-height: 1.8;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__brand {
    padding: 56px 24px 48px;
  }

  /* 狭い画面では字間を詰め、キャッチコピーが1文字だけ折り返すのを防ぐ */
  .tool-name {
    letter-spacing: .16em;
    text-indent: .16em;
  }

  .catch-copy {
    margin-top: 24px;
    min-height: 2.1em;
    letter-spacing: .04em;
    line-height: 2;
  }

  .hero__audience {
    margin-top: 28px;
  }

  /* 「その個別面談、本当にその成約率で大丈夫？」は狭い端末でも1行に収める（ユーザー指示）。
     全角20文字なので、1文字ぶんの幅（=font-size）が「画面幅−左右padding」÷20 を超えないようにする */
  .hero__lead--q {
    font-size: min(4.2vw, 29px);
  }

  .hero__stage {
    gap: 22px;
    padding: 40px 24px 56px;
  }

  .bench {
    width: 100%;
  }

  .bench__row {
    grid-template-columns: 6.4em 1fr 3.2em;
    gap: 8px;
  }

  .btn--hero {
    width: 100%;
    min-width: 0;
  }

  .screen--form,
  .screen--calc,
  .screen--result {
    padding: 32px 16px 56px;
  }

  .screen--form {
    min-height: 0;
    display: block;
  }

  .panel {
    padding: 32px 24px 36px;
  }

  .result-hero {
    margin-bottom: 18px;
    padding: 28px 22px 32px;
  }

  .result-card,
  .guide-card {
    padding: 28px 22px 32px;
  }

  .cta-block {
    margin-top: 24px;
    gap: 12px;
  }

  .cta-block .btn--line {
    padding: 20px 16px;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.5;
    text-wrap: balance;
  }

  .cta-block .btn--outline {
    padding: 18px 20px;
    font-size: 15px;
  }

  .result-message {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.9;
  }

  .notice {
    margin-top: 18px;
    padding: 14px 14px;
    font-size: 14px;
    line-height: 1.75;
  }

  .btn--line {
    margin-top: 16px;
  }

  .lp-section {
    padding-top: 48px;
    margin-top: 48px;
  }

  .company {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
    padding: 28px 22px;
  }

  .company__photo {
    width: 170px;
  }

  .case {
    padding: 28px 22px 32px;
  }

  .achievements__item {
    padding: 16px 18px 16px 22px;
    font-size: 15px;
    letter-spacing: -.01em;
  }

  .achievements__item .em,
  .offer__proof-item .em {
    font-size: 19px;
  }

  .why__list-item {
    padding: 14px 16px 14px 40px;
  }

  .why__list-item::before {
    left: 16px;
  }

  .conclusion__big {
    padding: 26px 20px;
  }

  .site-footer {
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar__fill,
  .btn {
    transition: none;
  }
}

/* 幅の狭い端末ではキャッチコピーが2行に折り返すため、2行ぶんを予約する（CLS対策） */
@media (max-width: 380px) {
  .catch-copy {
    min-height: 4em;
  }
}