/* download.html / thanks.html / consult.html 共通の固有スタイル（リードイン導線3ページ共用）。
   型(styles.css)・共通部品(custom.css)は編集禁止 — 追加はすべてここに書く。
   使う部品: .page-head / .breadcrumb / .prose / .section / .section__head / .eyebrow / .section__lead /
   .line-list / .num / .small / .btn .btn--primary .btn--secondary / .text-link / .doc-cover /
   .hubspot-slot / .hubspot-wait / .is-connected / .phases / .scope-note
   ここには (1) 資料の中身プレビュー2列 (2) 得られること/できること3列 (3) .phasesの4項目化
   (4) こんな段階でもの小見出し (5) 終端CTA・thanks導線の余白、の5点に加えて
   レビュー反映分として (6) .hubspot-wait の枠線を実線化 (7) .page-head 内CTAボタンの余白
   (8) CONTENTS部分公開の補足文の余白、を最小限で追加する。
   3列の文字グリッドは .svc-paths / .co-coverage / .works-expand__grid と同型
   （border-top 2px + h3 + p、900pxで1列）に揃えている。 */

/* ---- 資料の中身プレビュー（download.html）: 左 .doc-cover（150×200・無改変）＋ 右 4段階 ---- */
.lead-preview {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}
.lead-preview__cover { display: flex; }
.lead-preview__stages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
.lead-stage .num { display: block; margin-bottom: 10px; }
.lead-stage h3 { font-size: 17px; margin: 0 0 12px; }
.lead-stage .line-list { font-size: 15px; }  /* B6: 本文 15px 以上 */

/* ---- 得られること（download.html）／相談でできること（consult.html）: 3列 ---- */
.lead-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.lead-points li { border-top: 2px solid var(--ink); padding-top: 20px; }
.lead-points .num { display: block; margin-bottom: 12px; }
.lead-points h3 { font-size: 18px; line-height: 1.5; margin: 0 0 10px; }
.lead-points p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }

/* ---- こんな段階でも（consult.html）: 「できること」節の内側に置く小見出し ---- */
.lead-also { margin-top: 48px; }
.lead-also h3 { font-size: 16px; margin: 0 0 12px; }

/* ---- フォーム／予約カレンダーの補足文（入力項目・個人情報の扱いなど） ---- */
.lead-form-note { margin-top: 32px; }
.lead-form-note p + p { margin-top: 12px; }

/* ---- 資料の中身プレビュー: 部分公開の補足文（各段階1項目のみ表示） ---- */
.lead-stage .small { display: block; margin: 10px 0 0; }

/* ---- 未接続時の案内枠: 「準備中」に見えないよう破線→実線に（custom.cssの.hubspot-waitを上書き） ---- */
.hubspot-wait { border: 1px solid var(--rule); }

/* ---- .page-head 内に置く主CTA（download.html/consult.htmlのリード直下ボタン） ---- */
.page-head .btn { margin-top: 32px; }

/* ---- DL後の流れ（download.html）: .phases を4項目用に拡張（services.htmlの.phases--4と同型） ---- */
.phases--4 { grid-template-columns: repeat(4, 1fr); gap: 24px 20px; }
.phases--4 h3 { font-size: 17px; margin: 12px 0 8px; }
@media (max-width: 1279px) {
  .phases--4 { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 900px) {
  .phases--4 { grid-template-columns: 1fr; }
}

/* ---- 終端の軽いCTA（download.htmlの副CTA／consult.htmlの資料DL案内） ---- */
.lead-endcta .section__lead { max-width: 640px; margin: 0 0 24px; }
/* B4(download.html): 帯セクションの下160px+ここの上160pxで320px空くため96pxに圧縮 */
.section--band + .lead-endcta { padding-top: 96px; }
/* B4(consult.html): 予約セクション直後は待機パネルで既に十分な余白があるため詰める */
#booking + .lead-endcta { padding-top: 0; }

/* ---- consult.html「流れ」: 3列上罫が直前の「相談でできること」と同装置で隣接するため縦の番号リストに変更（B3） ---- */
.flow-list { list-style: none; margin: 48px 0 0; padding: 0; max-width: 720px; border-top: 1px solid var(--rule); }
.flow-list li { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.flow-list .num { grid-row: 1 / span 2; padding-top: 4px; }
.flow-list h3, .flow-list p { grid-column: 2; }  /* p が 56px の番号列に落ちて1文字ずつ折れる不具合の修正 */
.flow-list h3 { font-size: 18px; margin: 0 0 6px; }
.flow-list p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }

/* ---- thanks.html: 資料リンク・次の一歩・トップへ戻るの余白 ---- */
.lead-actions { margin-top: 24px; }
.lead-back { margin-top: 8px; }

/* ---- ブレークポイント（900px = 型の下層ページ標準。768px以下も1列を維持） ---- */
@media (max-width: 900px) {
  .lead-preview { grid-template-columns: 1fr; gap: 32px; }
  .lead-preview__cover { justify-content: center; }
  .lead-points { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .lead-preview__stages { grid-template-columns: 1fr; }
}