@charset "utf-8";

/* ============================================================
   DELNE B2C 家族向けLP
   デザイン基準: nursing.delne.jp（オレンジ×クリーム）
   トークンは assets/reference/nursing-styles.css から取得
   ============================================================ */

:root {
  --color-bg: #fdf8ee;          /* ページ地（クリーム） */
  --color-ink: #80471d;         /* 見出し（オレンジディープ） */
  --color-primary: #e8873a;     /* アクセント */
  --color-primary-dark: #c96f24;/* ヘッダー・フッター帯 */
  --color-accent: #d95b3b;      /* 朱：見出し下線・強調 */
  /* CTA背景。nursing実装の #d95b3b は白文字で3.81:1と不足のため
     1段暗い accent-dark を採用（白文字で4.93:1）。設計書K-7-1 */
  --color-cta: #bf4b2e;
  --color-cta-hover: #a83f26;
  --color-accent-soft: #f9d3b8;
  --color-soft: #fdf3e7;        /* カード薄地 */
  --color-tint: #fbe8d3;        /* バッジ地 */
  --color-sec: #faeedd;         /* 交互セクション地 */
  --color-line: #f0d4b2;        /* セクション罫線 */
  --color-white: #ffffff;
  --color-text: #3a352f;
  --color-text-soft: #57534c;
  --color-text-muted: #6b655d;
  --color-text-faint: #837c73;
  --color-border: #ddd5c9;
  --color-neutral: #f4f1ec;

  --rad: 20px;
  --radius-sm: 12px;
  --shadow-card: 0 4px 16px rgba(140, 77, 29, 0.08);
  --container: 1080px;
  --header-h: 62px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--color-ink); text-wrap: balance; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-white); color: var(--color-ink);
  padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

.sentinel { display: block; width: 1px; height: 1px; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-primary-dark);
  box-shadow: 0 2px 12px rgba(140, 77, 29, 0.2);
}
.header-inner {
  max-width: var(--container); margin: 0 auto;
  height: var(--header-h); padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 3px; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); }
.brand-name { font-size: 24px; font-weight: 900; color: var(--color-white); }

/* ---------- セクション共通 ---------- */
.section { border-top: 3px solid var(--color-line); background: var(--color-white); }
.section-tint { background: var(--color-sec); }

.section-inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) 20px clamp(44px, 8vw, 84px);
  display: flex; flex-direction: column; gap: 22px;
}

.section-head { text-align: center; }
.section-title {
  font-size: clamp(20px, 4.6vw, 30px);
  font-weight: 900; line-height: 1.5;
  position: relative; display: inline-block; padding-bottom: 14px;
}
.section-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 260px); height: 4px; border-radius: 2px;
  background: var(--color-accent);
}

.body-lead {
  font-size: clamp(15px, 4vw, 17px); line-height: 2.1;
  color: var(--color-text-soft); max-width: 36em; margin: 0 auto;
  text-align: center;
}
.note { font-size: 12px; line-height: 1.8; color: var(--color-text-faint); text-align: center; }
.rule { width: 48px; height: 2px; background: var(--color-line); align-self: center; }

.card-title { font-size: 15px; font-weight: 900; color: var(--color-ink); text-align: center; }

/* ---------- ボタン ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; padding: 10px 46px 10px 26px;
  border-radius: 999px; border: none;
  font-family: inherit; font-size: clamp(15px, 4.2vw, 17px); font-weight: 900; line-height: 1.5;
  text-align: center; text-decoration: none; cursor: pointer;
}
.btn .chev { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); }

.btn-primary {
  background: var(--color-cta); color: var(--color-white);
  box-shadow: 0 5px 18px rgba(191, 75, 46, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover { background: var(--color-cta-hover); color: var(--color-white); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled] { background: var(--color-border); color: var(--color-text-muted); box-shadow: none; cursor: default; }
.btn-primary[disabled]:hover { transform: none; background: var(--color-border); }

.btn-outline {
  background: var(--color-white); color: var(--color-ink);
  border: 2px solid var(--color-primary-dark);
  padding: 10px 26px; font-size: 15px;
}
.btn-outline:hover { background: var(--color-soft); color: var(--color-ink); }

.btn-sm { min-height: 40px; padding: 6px 34px 6px 16px; font-size: 13px; }
.btn-sm .chev { right: 14px; }

.btn-note { font-size: 12px; line-height: 1.8; color: var(--color-text-muted); text-align: center; }
.btn-note-invert { color: var(--color-accent-soft); }

.cta-block { display: flex; flex-direction: column; gap: 10px; }
.legal-link { font-size: 12px; text-align: center; }
.legal-link-invert a { color: var(--color-accent-soft); }
.legal-link-invert a:hover { color: var(--color-white); }

/* ---------- S1 ファーストビュー ---------- */
.hero { background: var(--color-bg); }
.hero-inner {
  max-width: var(--container); margin: 0 auto;
  /* 上パディングを大きく取り、パネルの上で背景イラストを見せる（パネルは下寄せ） */
  padding: clamp(210px, 56vw, 360px) 20px clamp(28px, 6vw, 48px);
  display: flex; flex-direction: column; gap: 18px;
}
.hero-copy { display: flex; flex-direction: column; gap: 18px; }
.hero-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 14px;
  background: var(--color-tint); border-radius: 999px;
  color: var(--color-ink); font-size: 12px; font-weight: 700;
}
/* 指定した <br> の位置で改行させたいので balance は使わない。
   375px でも「母と話したくないわけじゃない。」が1行に収まるサイズに抑える。 */
.hero-title {
  /* 上限32px。1行目「母と話したくないわけじゃない。」は全角14字なので
     14×32=448px を要する。2カラム化を960px以上に限ることで、
     左カラム幅（960pxで約493px）に必ず収まるようにしている。
     これを緩めると「母と」だけが行に取り残される */
  /* 下限21px。360px端末（スクロールバー分を引くと実効約345px）でも
     14×21=294px で1行目が収まる */
  font-size: clamp(21px, 3.6vw, 32px); line-height: 1.6; font-weight: 900;
  text-wrap: initial;
  /* 狭い画面では2行目が収まらず折り返す。日本語の文節単位で折るため
     auto-phrase を使う（未対応ブラウザは通常の折り返しにフォールバック） */
  word-break: auto-phrase;
}
.hero-lead { font-size: clamp(15px, 4vw, 17px); line-height: 2.1; color: var(--color-text-soft); }
.hero-actions { display: flex; flex-direction: column; gap: 10px; }
.hero-actions .btn { width: 100%; }

.art-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 180px; padding: 16px;
  background: var(--color-white); border: 2px dashed var(--color-line);
  border-radius: var(--rad); color: var(--color-primary-dark);
}
.art-placeholder span { font-size: 12px; line-height: 1.7; color: var(--color-text-faint); text-align: center; }

/* ---------- S2a エピソード ---------- */
.episode-list { display: flex; flex-direction: column; gap: 16px; }
.episode {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-soft); border: 1px solid var(--color-border);
  border-radius: var(--rad); padding: 20px; box-shadow: var(--shadow-card);
}
.episode-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px;
  background: var(--color-white); border-radius: 999px;
  color: var(--color-primary-dark); font-size: 11px; font-weight: 700;
}
.episode-body { font-size: 14px; line-height: 1.9; word-break: auto-phrase; }

/* ---------- S2b 共感 ---------- */
.empathy-lead { font-size: clamp(16px, 4.4vw, 20px); font-weight: 900; color: var(--color-accent); text-align: center; }

/* ---------- S3 チェック ---------- */
/* 地色は濃い茶（--color-ink #80471d）だと重いため、濃いオレンジにする。
   #a85a1a は白見出しで 5.07:1、本文で 4.55:1 を確保できる。
   この地色の上ではCTAの朱（#bf4b2e）が埋没する（1.03:1）ため、
   カード内のCTAだけ白ボタン＋濃橙文字に反転させる（下記 .check-card .btn） */
.check-card {
  display: flex; flex-direction: column; gap: 16px;
  background: #a85a1a; border-radius: var(--rad); padding: 28px 24px;
}
/* カード内CTA: 白地(地色と5.07:1で分離)＋濃橙文字(白地と5.80:1) */
.check-card .btn-primary {
  background: var(--color-white); color: #a04f12;
  box-shadow: 0 5px 18px rgba(60, 28, 6, 0.28);
}
.check-card .btn-primary:hover { background: #fff6ea; color: #a04f12; }
.check-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 14px;
  background: rgba(255, 255, 255, 0.22); border-radius: 999px;
  color: var(--color-white); font-size: 12px; font-weight: 700;
}
.check-title { font-size: clamp(19px, 4.6vw, 26px); line-height: 1.7; font-weight: 900; color: var(--color-white); }
.check-body { font-size: 14px; line-height: 1.9; color: #fdf1e2; }
/* 免責はボタン下に小さく添える */
.check-disclaimer {
  font-size: 11px; line-height: 1.7; color: #fbe4cd; text-align: center;
  word-break: auto-phrase;
}

/* ---------- チェック本体（オーバーレイ・1画面1問） ---------- */
html.check-open { overflow: hidden; }

.check-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: rgba(58, 53, 47, 0.5);
}
.check-overlay[hidden] { display: none; }

/* モーダル本体 */
.check-modal {
  display: flex; flex-direction: column;
  width: 100%; max-width: 440px;
  max-height: min(88vh, 700px);
  background: var(--color-bg);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(58, 53, 47, 0.35);
}

.check-overlay .check-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 0 8px 0 20px;
}
.check-bar-title { font-size: 13px; font-weight: 900; color: var(--color-ink); }
.check-close {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: none; background: none;
  color: var(--color-text-faint); cursor: pointer; border-radius: 999px;
}
.check-close:hover { color: var(--color-ink); background: var(--color-tint); }

.check-overlay .check-body {
  flex-grow: 1; display: flex; flex-direction: column;
  overflow-y: auto; padding: 0 24px 24px;
  font-size: 16px; color: var(--color-text);
  max-width: 560px; width: 100%; margin: 0 auto;
}

.check-progress { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.check-count { font-size: 13px; color: var(--color-text-faint); }
.check-count strong { font-size: 15px; font-weight: 900; color: var(--color-ink); }
.check-track { height: 6px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.check-fill { height: 100%; background: var(--color-accent); border-radius: 999px; transition: width 0.3s ease; }

.check-main {
  flex-grow: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 24px; padding: 18px 0 22px;
  min-height: 330px;
}
/* 設問は2行のものと3行のものが混在する。行数で選択肢の位置が動かないよう、
   表示スペースを3行分の高さで固定し、その中で上下中央に置く。
   （font-size と line-height から算出: 1.8em × 3行） */
.check-question {
  font-size: clamp(19px, 5vw, 22px); line-height: 1.8; font-weight: 900;
  color: var(--color-ink); text-align: center; outline: none;
  word-break: auto-phrase;
  min-height: calc(1.8em * 3);
  display: flex; align-items: center; justify-content: center;
}
.check-choices { display: flex; flex-direction: column; gap: 12px; }
.check-choice {
  display: flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 10px 20px;
  background: var(--color-white); border: 2px solid var(--color-border);
  border-radius: 999px; font-family: inherit;
  font-size: 16px; font-weight: 900; color: var(--color-ink);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.check-choice:hover { border-color: var(--color-primary); }
.check-choice.is-selected { background: var(--color-tint); border-color: var(--color-primary-dark); }
/* 「前へ戻る」は1問目に無いため、その分の高さを常に確保して
   設問ごとにモーダルの高さと選択肢の位置が動かないようにする */
.check-back, .check-back-placeholder {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 10px 14px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  color: var(--color-text-faint); cursor: pointer;
}
.check-back:hover { color: var(--color-ink); }
.check-back-placeholder { visibility: hidden; cursor: default; }
.check-overlay .check-note {
  flex-shrink: 0; font-size: 11px; line-height: 1.7;
  color: var(--color-text-faint); text-align: center;
}

/* ---------- チェック結果 ---------- */
.check-result { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 16px; }
.check-result-badge {
  align-self: center; display: inline-flex; align-items: center;
  min-height: 28px; padding: 2px 14px;
  background: var(--color-tint); border-radius: 999px;
  color: var(--color-ink); font-size: 12px; font-weight: 700;
}
.check-result-title {
  font-size: clamp(20px, 5vw, 24px); line-height: 1.7; font-weight: 900;
  color: var(--color-ink); text-align: center; outline: none;
}
.check-bars {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--rad); padding: 18px 20px;
}
.check-bar-row {
  display: grid; grid-template-columns: 1fr max-content max-content;
  gap: 10px; align-items: center;
}
.check-bar-label { font-size: 13px; color: var(--color-text); }
.check-bar-seg { display: flex; gap: 4px; }
.check-bar-seg i {
  width: 16px; height: 8px; border-radius: 999px;
  background: var(--color-line);
}
.check-bar-seg i.is-on { background: var(--color-primary); }
.check-bar-word { font-size: 12px; font-weight: 700; color: var(--color-ink); min-width: 3.5em; text-align: right; }

.check-block {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--rad); padding: 20px 22px;
}
.check-block-title { font-size: 13px; font-weight: 900; color: var(--color-accent); }
.check-block-lead { font-size: 15px; line-height: 1.9; font-weight: 900; color: var(--color-ink); }
.check-block-body { font-size: 14px; line-height: 2; color: var(--color-text); }
.check-block-keep { background: var(--color-soft); }

.check-ctas { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.check-sub-link {
  align-self: center; font-size: 13px; color: var(--color-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.check-retry {
  align-self: center; border: none; background: none; padding: 8px 14px;
  font-family: inherit; font-size: 12px; color: var(--color-text-faint);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.check-retry:hover { color: var(--color-ink); }

/* ---------- S4a 第三の選択肢 ---------- */
.choice-pair { display: flex; gap: 12px; }
.choice {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 6px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 16px 14px; text-align: center;
}
/* 左右で見出しの行数が違う（2行と1行）ため、2行分の高さで固定して
   下の注記の位置を揃える */
.choice-title {
  font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--color-text-muted);
  min-height: calc(1.7em * 2);
  display: flex; align-items: center; justify-content: center;
}
.choice-note { font-size: 12px; line-height: 1.7; color: var(--color-text-faint); }
.choice-arrow { align-self: center; color: var(--color-primary-dark); }
.choice-third {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--color-white); border: 2px solid var(--color-primary);
  border-radius: var(--rad); padding: 22px; text-align: center; box-shadow: var(--shadow-card);
}
.choice-third-title { font-size: clamp(16px, 4.4vw, 20px); line-height: 1.7; font-weight: 900; color: var(--color-ink); }
.choice-third-note { font-size: 12px; line-height: 1.7; color: var(--color-text-muted); }

/* ---------- S4b 3価値 ---------- */
.value-list { display: flex; flex-direction: column; gap: 16px; }
.value {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-soft); border: 1px solid var(--color-border);
  border-radius: var(--rad); padding: 22px;
}
.value-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 900; line-height: 1.6; color: var(--color-ink);
}
.value-title svg { flex-shrink: 0; color: var(--color-primary-dark); }
.value-body { font-size: 14px; line-height: 1.9; word-break: auto-phrase; }

/* ---------- S5 仕組み ---------- */
.method-list { display: flex; flex-direction: column; gap: 12px; }
.method {
  display: flex; gap: 14px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 18px;
}
.method-num, .step-num {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  font-size: 14px; font-weight: 900;
}
.method-num { background: var(--color-primary-dark); color: var(--color-white); }
.method-title { font-size: 15px; font-weight: 900; color: var(--color-ink); }
.method-body { font-size: 13px; line-height: 1.8; color: var(--color-text-soft); word-break: auto-phrase; }
.method-caveat { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-faint); }

.flow-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--rad); padding: 22px; box-shadow: var(--shadow-card);
}

.flow-list { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flow-step {
  width: 100%; padding: 12px 16px;
  background: var(--color-soft); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.8; text-align: center;
}
.flow-step + .flow-step { position: relative; margin-top: 22px; }
.flow-step + .flow-step::before {
  content: ""; position: absolute; left: 50%; top: -20px;
  width: 10px; height: 10px; margin-left: -5px;
  border-right: 2.4px solid var(--color-primary-dark);
  border-bottom: 2.4px solid var(--color-primary-dark);
  transform: rotate(45deg);
}

/* ---------- S5b 3ステップ ---------- */
.step-list { display: flex; flex-direction: column; gap: 12px; }
.step {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.step-num { background: var(--color-tint); color: var(--color-primary-dark); }
.step-title { font-size: 14px; line-height: 1.8; }
.step-note { font-size: 12px; line-height: 1.7; color: var(--color-text-faint); }

/* ---------- S7 料金 ---------- */
.trial-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-white); border: 2px solid var(--color-primary);
  border-radius: var(--rad); padding: 24px 22px; text-align: center;
  box-shadow: var(--shadow-card);
}
.trial-label { font-size: 14px; font-weight: 900; color: var(--color-accent); }
.trial-price { font-size: 36px; font-weight: 900; line-height: 1.2; color: var(--color-ink); }
.trial-terms { font-size: 13px; line-height: 1.9; }
.trial-note { font-size: 12px; line-height: 1.8; color: var(--color-text-muted); }

.plan-list { display: flex; flex-direction: column; gap: 12px; }
.plan {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 18px 20px;
}
.plan-name { font-size: 15px; font-weight: 900; color: var(--color-ink); }
.plan-spec { font-size: 12px; line-height: 1.7; color: var(--color-text-faint); }
.plan-price { font-size: 20px; font-weight: 900; color: var(--color-ink); white-space: nowrap; }
.plan-price span { font-size: 12px; font-weight: 500; color: var(--color-text-faint); }

.legal-note { font-size: 12px; line-height: 1.9; color: var(--color-text-muted); }

/* 法定注記の項目リスト（1つの長文にせず、項目ごとに走査できるようにする） */
.legal-list {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; line-height: 1.9; color: var(--color-text-muted);
}
.legal-list li {
  padding-left: 14px; position: relative;
}
.legal-list li::before {
  content: "※"; position: absolute; left: 0;
}

/* ---------- S9 FAQ ---------- */
.faq-list { display: flex; flex-direction: column; }
.faq { border-bottom: 1px solid var(--color-border); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 14px 4px;
  font-size: 14px; font-weight: 700; color: var(--color-ink);
  cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: ""; flex-shrink: 0;
  width: 9px; height: 9px; margin-right: 6px;
  border-right: 2.4px solid var(--color-primary-dark);
  border-bottom: 2.4px solid var(--color-primary-dark);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}
.faq[open] .faq-q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-a { padding: 0 4px 18px; font-size: 13px; line-height: 1.9; color: var(--color-text-soft); }

/* ---------- S10 クロージング ---------- */
.closing { border-top: 3px solid var(--color-line); background: var(--color-ink); text-align: center; }
.closing .section-inner { align-items: center; }
.closing-title { font-size: clamp(19px, 4.8vw, 28px); line-height: 2; font-weight: 900; color: var(--color-white); }
.closing-lead { font-size: 14px; line-height: 2.1; color: var(--color-accent-soft); }
.closing .cta-block { width: 100%; max-width: 420px; }

/* ---------- フッター ---------- */
.site-footer { background: var(--color-primary-dark); padding: 32px 20px 40px; }
.footer-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.footer-company { font-size: 13px; line-height: 2; color: rgba(255, 255, 255, 0.88); }
.footer-brand-name { font-size: 20px; }
.footer-nav { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { font-size: 13px; color: rgba(255, 255, 255, 0.88); }
.footer-nav a:hover { color: var(--color-white); }
.copyright { font-size: 11px; color: rgba(255, 255, 255, 0.75); }

/* ---------- 追従CTA（スクロール後に表示） ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 248, 238, 0.94);
  border-top: 1px solid var(--color-line);
  backdrop-filter: blur(6px);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta .btn { width: 100%; min-height: 52px; font-size: 16px; }

@media (min-width: 900px) {
  .sticky-cta { display: none; }
}

/* ---------- PC ---------- */
@media (min-width: 768px) {
  body { font-size: 17px; }

  .art-placeholder { min-height: 260px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero-actions .btn { width: auto; }
  .hero-actions .btn-note { flex-basis: 100%; order: 3; text-align: left; }

  .section-inner { gap: 26px; }
  .episode-list, .value-list { flex-direction: row; }
  .episode, .value { flex: 1 1 0; }
  .step-list { flex-direction: row; }
  .step { flex: 1 1 0; }
  .plan-list { flex-direction: row; }
  .plan { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-nav { flex-direction: row; gap: 24px; }
  .method { padding: 22px; }
  .cta-block { align-items: center; }
  .cta-block .btn { min-width: 320px; }
}

/* FVの2カラム化は960px以上に限る。これより狭いと左カラムに
   見出し1行目が収まらず「母と」が孤立する（.hero-title のコメント参照） */
@media (min-width: 960px) {
  .hero-copy { max-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   リッチグラフィック（2026-08-23 追加）
   縁の装飾・セクションイラスト・スクロールリビール
   ============================================================ */

/* 背景の浮遊装飾（〇・△など）は撤去済み（K-29）。
   overflow:hidden はヒーロー背景やイラストのはみ出し制御で引き続き必要。 */
.hero, .section, .closing { position: relative; overflow: hidden; }
.hero-inner, .section-inner { position: relative; z-index: 1; }

/* ---------- FVの情景イラスト ---------- */
/* 1カラム時に大きくなりすぎないよう上限を設ける（2カラム時は列幅に収まる） */
.hero-scene { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }

/* ---------- エピソードのスポットイラスト ---------- */
.episode-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.episode-art { flex-shrink: 0; width: 56px; height: 56px; }

/* ---------- S2b: ふたつの電話をつなぐアーチ ---------- */
.bond-art { display: block; width: min(240px, 70%); height: auto; margin: 0 auto; }

/* ---------- チェックカードのクリップボード ---------- */
.check-card { position: relative; }
.check-art { position: absolute; top: 22px; right: 22px; width: 44px; height: auto; opacity: .9; }
.check-card > * { position: relative; }
.check-card .check-art { position: absolute; }

/* ---------- S4a のアイコン ---------- */
.choice-icon { align-self: center; width: 36px; height: 36px; margin-bottom: 2px; }
.third-icon { align-self: center; width: 40px; height: 40px; }

/* ---------- S4b: 価値アイコンを円形地に ---------- */
.value-title svg {
  box-sizing: content-box; padding: 10px;
  background: var(--color-tint); border-radius: 999px;
}

/* ---------- つなぎ方カードのミニ図解 ---------- */
.method { align-items: center; }
.method-art { flex-shrink: 0; width: 88px; height: auto; margin-left: auto; }
@media (max-width: 400px) { .method-art { width: 72px; } }

/* ---------- クロージングの情景 ---------- */
.closing-art { display: block; width: min(320px, 86%); height: auto; margin: 0 auto; }

/* ---------- スクロールリビール（JSが .will-reveal を付与） ---------- */
.will-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.will-reveal.is-in { opacity: 1; transform: none; }
.will-reveal .section-title::after { width: 0; transition: width 1.2s cubic-bezier(.22, 1, .36, 1) .25s; }
.will-reveal.is-in .section-title::after { width: min(100%, 260px); }

/* ---------- 人物イラスト（暫定: 法人版流用ダミー。K-15） ---------- */
.hero-scene-img {
  display: block; width: 100%; max-width: 440px; height: auto;
  margin: 0 auto; border-radius: var(--rad); box-shadow: var(--shadow-card);
}
.episode-art-img {
  flex-shrink: 0; width: 76px; height: 76px; border-radius: 999px;
  object-fit: cover; border: 3px solid var(--color-white); box-shadow: var(--shadow-card);
}
.how-art {
  display: block; width: 100%; max-width: 560px; height: auto;
  margin: 0 auto; border-radius: var(--rad); border: 1px solid var(--color-border);
}
.closing-img {
  display: block; width: min(360px, 88%); height: auto;
  margin: 0 auto; border-radius: var(--rad);
}

/* ============================================================
   ヒーロー演出（法人版 nursing.delne.jp から移植・2026-08-23）
   背景写真＋字幕ナレーション表示＋タップで動くスマホUI
   ============================================================ */

/* ---------- 背景写真（グレースケール・右側） ---------- */
.hero-bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 767px) {
  /* 上100pxをトリミング（表示領域を画像の下側へずらし、女性の顔を見せる）。
     切った100px分は高さを下へ延長して、ヒーロー下部の見せ場を維持する */
  .hero-bg-photo {
    top: -100px; bottom: auto;
    height: calc(100% + 100px);
  }
}
/* 全面には薄いスクリムのみ（画像の見え方を保つ）。
   可読性はテキスト背後の局所パネル（.hero-copy）で確保する */
.hero-inner::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(253, 248, 238, 0.28);
  pointer-events: none;
}
/* 局所パネル: コピー全体の背後に半透明クリーム＋軽いブラー。
   文字はどの画像の上でも同じ濃さで読める。パネル外では画像がくっきり見える。
   パネルの描画は ::before に分離し、上下端をマスクでフェードさせる
   （テキストはフェードの影響を受けない） */
.hero-copy {
  position: relative;
  /* 左右12px: 375pxで行幅311pxを確保する（見出し1行目の自然幅は
     Noto Sans JP 900 のグリフ幅により約304px。16px余白だと1px不足で折れる） */
  padding: 34px 12px 36px;
}
.hero-copy::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(253, 248, 238, 0.82);
  border-radius: var(--rad);
  /* 上下の境界線フェード */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  pointer-events: none;
}
.hero-copy > * { position: relative; }
@media (min-width: 600px) {
  .hero-copy { padding: 40px 28px 42px; }
}
/* 見出し1行目「親と話したくないわけじゃない。」は15文字。
   Noto Sans JP 900 の実効幅(約1.086em/字)で 375px の行幅311pxに収めるには
   フォント ≤ 19px が必要 */
.hero-copy .hero-title { font-size: clamp(18px, 5vw, 32px); }
/* リード3行目（21文字）は375pxで折り返しが必要になる。
   文節単位で折り、「で/す。」のような中途折れを防ぐ */
.hero-lead { word-break: auto-phrase; }
/* CTA文言（17文字「親とのかかわり方チェックをしてみる」）が375pxで1行に収まるサイズへ */
.hero-copy .btn { font-size: clamp(14px, 3.9vw, 17px); padding-left: 16px; padding-right: 38px; }
.hero-copy .btn .chev { right: 14px; }
@supports (backdrop-filter: blur(6px)) {
  .hero-copy::before {
    background: rgba(253, 248, 238, 0.66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ---------- 字幕ナレーション表示 ----------
   html.hero-seq は head のインラインスクリプトが描画前に付与する。
   JS無効・reduced-motion 時はクラスが付かず即時表示。 */
.hero-title .hero-rise,
.hero-lead .hero-rise { display: block; }

.hero-seq .hero-bg-photo { opacity: 0; }
.hero-seq .hero-rise { opacity: 0; transform: translateY(8px); }

.hero-seq-run .hero-bg-photo { opacity: 0.5; transition: opacity 2.4s ease; }
.hero-seq-run .hero-rise {
  opacity: 1; transform: none;
  transition: opacity 1.35s ease var(--hero-d, 0s), transform 1.35s ease var(--hero-d, 0s);
}

/* 出現の間合い（法人版と同じテンポ） */
.hero-title .hero-rise:nth-child(1) { --hero-d: 0s; }
.hero-title .hero-rise:nth-child(2) { --hero-d: 0.66s; }
.hero-lead .hero-rise:nth-child(1) { --hero-d: 1.74s; }
.hero-lead .hero-rise:nth-child(2) { --hero-d: 2.58s; }
.hero-lead .hero-rise:nth-child(3) { --hero-d: 3.42s; }
.hero-copy .hero-rise-cta { --hero-d: 1.74s; }

/* ============================================================
   モバイル横スワイプカルーセル（法人版から移植・2026-08-23）
   対象: エピソード / 3つの価値 / つなぎ方
   ============================================================ */
@media (max-width: 767px) {
  .carousel {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 10vw 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * {
    flex: 0 0 72vw; min-width: 72vw;
    scroll-snap-align: center; scroll-snap-stop: always;
  }
  /* 左右のsticky配置シェブロン */
  .carousel::before, .carousel::after {
    content: "";
    position: sticky; z-index: 3;
    flex: 0 0 14px; min-width: 14px; height: 14px;
    align-self: center;
    border: 0 solid var(--color-primary-dark);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .carousel::before { left: 2px; border-width: 0 0 3px 3px; transform: rotate(45deg); margin-right: -14px; }
  .carousel::after { right: 2px; border-width: 3px 3px 0 0; transform: rotate(45deg); margin-left: -14px; }
  /* これ以上スライドできない側は薄くする(main.jsが付け外しする) */

  /* カルーセル内カードの改行調整: 文節単位で折り、余白を詰めて行幅を確保 */
  .carousel .episode, .carousel .value { padding: 18px 16px; }
  .carousel .method { flex-direction: column; align-items: stretch; padding: 18px 16px; }
  .carousel .method .method-art { margin: 10px auto 0; }
  .carousel.no-prev::before { opacity: 0.15; }
  .carousel.no-next::after { opacity: 0.15; }
}

/* ============================================================
   機能ミニアイコン行＋説明モーダル（2026-08-23）
   ============================================================ */
.feature-strip-wrap { display: flex; flex-direction: column; gap: 10px; }
.card-title-sub { font-size: 11px; font-weight: 500; color: var(--color-text-faint); }
.feature-strip {
  display: flex; gap: 10px;
  overflow-x: auto; padding: 4px 4px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.feature-strip::-webkit-scrollbar { display: none; }
.feature-strip li { scroll-snap-align: start; }
/* カルーセルだと分かる目印: 左右のstickyシェブロン（端に達した側は薄くなる） */
.feature-strip::before, .feature-strip::after {
  content: "";
  position: sticky; z-index: 3;
  flex: 0 0 12px; min-width: 12px; height: 12px;
  align-self: center;
  border: 0 solid var(--color-primary-dark);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.feature-strip::before { left: 0; border-width: 0 0 3px 3px; transform: rotate(45deg); margin-right: -12px; }
.feature-strip::after { right: 0; border-width: 3px 3px 0 0; transform: rotate(45deg); margin-left: -12px; }
.feature-strip.no-prev::before { opacity: 0.15; }
.feature-strip.no-next::after { opacity: 0.15; }
.feature-strip li { flex: 0 0 auto; display: flex; }
.feature-chip {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 104px; min-height: 78px; padding: 12px 6px 10px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.4;
  color: var(--color-ink); text-align: center;
  word-break: auto-phrase;
}
.feature-chip:hover { border-color: var(--color-primary); }
.feature-chip svg { width: 26px; height: 26px; color: var(--color-primary-dark); }
.feature-note { font-size: 11px; line-height: 1.7; color: var(--color-text-faint); }

/* PCはカルーセルにせず、上のカードと同じ幅に5列で横並び */
@media (min-width: 768px) {
  .feature-strip {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
    overflow: visible; padding: 4px 0 0;
    scroll-snap-type: none;
  }
  .feature-strip::before, .feature-strip::after { display: none; }
  .feature-chip { width: 100%; min-height: 96px; padding: 16px 10px 14px; gap: 9px; }
  .feature-chip svg { width: 30px; height: 30px; }
}

/* モバイルはタップ対象として十分な大きさにする（アイコンとチップを拡大） */
@media (max-width: 767px) {
  .feature-chip {
    width: 116px; min-height: 108px; padding: 16px 8px 14px;
    gap: 10px; font-size: 12px; border-radius: 16px;
  }
  .feature-chip svg { width: 40px; height: 40px; }
}

.feature-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(58, 53, 47, 0.5);
}
.feature-overlay[hidden] { display: none; }
.feature-modal {
  position: relative;
  width: 100%; max-width: 400px; max-height: 80vh; overflow-y: auto;
  background: var(--color-bg); border-radius: 20px;
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px rgba(58, 53, 47, 0.35);
}
.feature-modal-icon {
  align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--color-tint); color: var(--color-primary-dark);
}
.feature-modal-icon svg { width: 26px; height: 26px; }
.feature-modal-title { font-size: 17px; font-weight: 900; color: var(--color-ink); outline: none; }
.feature-modal-body { font-size: 14px; line-height: 1.9; color: var(--color-text); word-break: auto-phrase; }
/* 上限注記はLP本文から外した（K-36）ため、このモーダルが主たる掲示場所になる。
   細字の但し書きに埋もれないよう、区切り線＋地色を敷いて読める大きさにする（K-37） */
.feature-modal-note {
  font-size: 12.5px; line-height: 1.85; color: var(--color-text-soft);
  margin-top: 2px; padding: 12px 14px;
  background: var(--color-soft); border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
  word-break: auto-phrase;
}
.feature-modal-close {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: none;
  color: var(--color-text-faint); cursor: pointer; border-radius: 999px;
}
.feature-modal-close:hover { color: var(--color-ink); background: var(--color-tint); }

/* ============================================================
   CRO改修（2026-08-23）
   2回目チェック導線 / 音声デモ / 通知の具体例 / 信頼バー / 料金の主従
   ============================================================ */


/* ---------- 音声デモ ---------- */
.demo-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--color-white); border: 2px solid var(--color-primary);
  border-radius: var(--rad); padding: 26px 20px 24px; text-align: center;
  box-shadow: var(--shadow-card);
}
.demo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--color-tint); color: var(--color-primary-dark);
}
.demo-lead { font-size: 16px; font-weight: 900; line-height: 1.7; color: var(--color-ink); word-break: auto-phrase; }
.demo-note { font-size: 12px; line-height: 1.8; color: var(--color-text-muted); }
.demo-card .btn { width: 100%; max-width: 380px; }
/* 音声デモURL未設定時は導線を出さない（JSが hidden を外す） */
.demo-card .btn[hidden] { display: none; }
.demo-todo { font-size: 12px; line-height: 1.8; color: var(--color-text-faint); }

/* ---------- 通知の具体例 ---------- */
.notify-mock {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-soft); border: 1px solid var(--color-border);
  border-radius: var(--rad); padding: 18px 16px 16px;
}
.notify-mock-label {
  align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--color-text-faint);
}
.notify-card {
  display: flex; gap: 12px;
  background: var(--color-white); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.notify-avatar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--color-primary-dark); color: #fff;
  font-size: 16px; font-weight: 900;
}
.notify-body { display: flex; flex-direction: column; gap: 3px; }
.notify-title { font-size: 13px; font-weight: 900; color: var(--color-ink); }
.notify-sub { font-size: 12px; color: var(--color-text-muted); }
.notify-points { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.notify-points li {
  position: relative; padding-left: 14px;
  font-size: 13px; line-height: 1.7; color: var(--color-text); word-break: auto-phrase;
}
.notify-points li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary);
}

/* ---------- 料金: 無料体験を主役に ---------- */
.trial-points { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 2px 0 6px; }
.trial-points li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.8; color: var(--color-text);
}
.trial-points svg { flex-shrink: 0; width: 19px; height: 19px; margin-top: .3em; color: var(--color-primary); }
.trial-card .btn { width: 100%; }
.trial-after { font-size: 12px; line-height: 1.8; color: var(--color-text-muted); }

/* ---------- 有料プランのアコーディオン ---------- */
.plan-details {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.plan-summary {
  display: flex; align-items: center; justify-content: center; gap: 4px 10px;
  flex-wrap: wrap;
  min-height: 56px; padding: 12px 18px;
  font-size: 14px; font-weight: 900; color: var(--color-ink);
  cursor: pointer; list-style: none; text-align: center;
}
.plan-summary-main { font-size: 15px; font-weight: 900; }
.plan-summary::-webkit-details-marker { display: none; }
.plan-summary::after {
  content: ""; flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2.4px solid var(--color-primary-dark);
  border-bottom: 2.4px solid var(--color-primary-dark);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 0.2s ease;
}
.plan-details[open] .plan-summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.plan-details-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 16px 18px;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   K-31: PC版レイアウト刷新（2026-08-23）
   ヒーロー=方向A（構造維持・スケール調整）
   他セクション=方向B（左300pxレール＋右本文の非対称グリッド）
   モバイル(〜1023px)は従来レイアウトのまま
   ============================================================ */
@media (min-width: 1024px) {

  :root { --container: 1120px; }

  /* ---------- 共通: セクションリズム3段階 ---------- */
  .section-inner { padding: 96px 40px 112px; gap: 26px; }
  #check .section-inner { padding: 128px 40px 144px; }
  #pricing .section-inner { padding-top: 128px; padding-bottom: 144px; --sec-pt: 128px; }
  #faq .section-inner { padding-top: 72px; padding-bottom: 80px; --sec-pt: 72px; }

  /* ---------- 共通: タイプスケール ---------- */
  .section-title { font-size: 36px; line-height: 1.5; word-break: auto-phrase; }
  .card-title { font-size: 20px; text-align: left; }
  .body-lead { font-size: 17px; text-align: left; margin: 0; max-width: 720px; }
  .note { text-align: left; font-size: 13px; }
  .rule { display: none; }

  /* ---------- 方向B: 左レール＋右本文 ----------
     section-head を持つセクションだけ、見出しを左レールへ絶対配置する。
     グリッドで組むと「背の高い見出し」が1行目の高さを決めてしまい、
     右カラムの1つ目(リード)と2つ目(カード)の間に見出し高さ分の空きが出る（K-36で修正）。
     絶対配置なら右カラムは通常のフローのまま連続する。HTMLは無変更 */
  .section .section-inner:has(> .section-head) {
    --sec-pt: 96px;                 /* 各セクションの padding-top と一致させる */
    position: relative;
    display: flex; flex-direction: column; gap: 26px;
    padding-left: 448px;            /* 40(外余白) + 344(レール) + 64(溝) */
  }
  .section .section-inner:has(> .section-head) > .section-head {
    position: absolute;
    left: 40px; top: var(--sec-pt);
    /* 344px: 「あなたのスマホに、」(9字×36px=324px)が1行に収まる幅。
       300pxだと文節の途中で字単位に折れていた（K-39） */
    width: 344px;
    text-align: left;
  }
  .section-head .section-title { display: block; padding-bottom: 18px; }
  .section .section-inner:has(> .section-head) .section-title::after {
    left: 0; transform: none; width: 56px;
  }

  /* ---------- エピソード: カードをやめて読み物の段に ---------- */
  #episodes .episode-list {
    flex-direction: column; gap: 0;
    counter-reset: ep;
  }
  #episodes .episode {
    flex: none;
    display: grid; grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 24px; row-gap: 10px; align-items: start;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 32px 0; border-top: 1px solid var(--color-line);
    counter-increment: ep;
  }
  #episodes .episode:first-child { border-top: 0; padding-top: 4px; }
  #episodes .episode:last-child { padding-bottom: 4px; }
  #episodes .episode::before {
    content: counter(ep, decimal-leading-zero);
    grid-column: 1; grid-row: 1;
    font-size: 13px; font-weight: 900; letter-spacing: .08em;
    color: var(--color-primary-dark);
    padding-top: 4px;
  }
  #episodes .episode > * { grid-column: 2; }
  #episodes .episode-tag { background: var(--color-tint); }
  #episodes .episode-body { font-size: 16px; max-width: 620px; }

  /* ---------- 余白をつくります: 同じく段組みに ---------- */
  #about .value-list { flex-direction: column; gap: 0; }
  #about .value {
    flex: none;
    background: transparent; border: 0; border-radius: 0;
    padding: 28px 0; gap: 12px;
    border-top: 1px solid var(--color-line);
  }
  #about .value:first-child { border-top: 0; padding-top: 4px; }
  #about .value:last-child { padding-bottom: 4px; }
  #about .value-title { font-size: 19px; }
  #about .value-body { font-size: 16px; max-width: 620px; }

  /* ---------- つなぎ方: 右カラム内で2枚並べる ---------- */
  .method-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .method { flex-direction: column; align-items: stretch; padding: 26px; }
  .method .method-art { margin: 12px auto 0; }
  .method-title { font-size: 19px; word-break: auto-phrase; }
  .method-body { font-size: 15px; line-height: 1.9; }

  /* ---------- 通知例・デモ・3ステップ・S4a ---------- */
  .empathy-lead { text-align: left; font-size: 19px; }
  .choice-pair { max-width: 720px; }
  .step-title { font-size: 16px; }

  /* ---------- チェック: 帯型の2カラムカード ---------- */
  #check .check-card {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(320px, 1fr);
    grid-template-areas:
      "badge body"
      "title cta"
      "title disclaimer";
    grid-template-rows: auto auto 1fr;
    column-gap: 64px; row-gap: 18px;
    align-items: start;
    padding: 56px 64px;
  }
  #check .check-badge { grid-area: badge; justify-self: start; }
  #check .check-title { grid-area: title; font-size: 28px; line-height: 1.6; word-break: auto-phrase; }
  #check .check-body { grid-area: body; font-size: 17px; line-height: 2.0; align-self: end; }
  #check .check-card .btn-primary { grid-area: cta; justify-self: start; min-width: min(340px, 100%); }
  #check .check-disclaimer { grid-area: disclaimer; text-align: left; }
  #check .check-art { display: none; }

  /* ---------- 料金: 右カラムの帯幅に収める ---------- */
  #pricing .trial-card { max-width: 720px; }
  #pricing .plan-details { max-width: 720px; }

  /* ---------- FAQ ---------- */
  .faq-q { font-size: 16px; }
  .faq-a { font-size: 15px; max-width: 680px; }

  /* ---------- ヒーロー: 方向B（左コピー／右画像の2分割。K-31追補） ----------
     画像に文字が重ならないため、スクリム(.hero-inner::before)と
     局所パネル(.hero-copy::before)はPCでは不要になる */
  .hero-inner {
    /* K-33: 全幅をやめ、他セクションと同じコンテナ幅に収める */
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    padding: 0 40px;
    gap: 0;
  }
  .hero-inner::before { display: none; }
  .hero-bg-photo {
    position: static;
    grid-column: 2; grid-row: 1;
    align-self: stretch;
    width: 100%; height: 100%; min-height: 580px;
    object-fit: cover; object-position: 50% 12%;
  }
  .hero-copy {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; gap: 24px;
    padding: 64px 48px 64px 0;
  }
  .hero-copy::before { display: none; }
  .hero-copy .hero-title {
    font-size: clamp(31px, 2.6vw, 38px);
    line-height: 1.55;
    /* 折り位置は <wbr> で明示（PC幅では keep-all で自由折りを止める） */
    word-break: keep-all;
  }
  .hero-lead { font-size: 17px; line-height: 2.05; }
}

/* ============================================================
   K-32: PC版の密度改善（2026-08-24）
   1) ヒーローを圧縮し、チェックカードを重ねて1画面に収める
   2) エピソードの余白圧縮とイラスト拡大
   3) S4a（二択→第三の選択肢）の造形強化
   モバイル(〜1023px)は無変更
   ============================================================ */
@media (min-width: 1024px) {

  /* ---------- 1) ヒーロー圧縮 ＋ チェックカードの重ね合わせ ---------- */
  .hero-inner { min-height: 0; }
  /* 画像の固有アスペクト比(1086x1448)がグリッド行を950px超に押し広げるため、
     右半分の絶対配置に切り替え、行の高さはコピー側だけで決める */
  .hero-bg-photo {
    /* absolute配置のgrid子は割り当てグリッドエリアが基準になるため、
       全域(1/1/2/3)に割り当ててから右半分に置く（K-33: コンテナ内の右列） */
    grid-area: 1 / 1 / 2 / 3;
    position: absolute;
    /* 置換要素は left/right + width:auto だと固有比で幅が決まるため width を明示 */
    top: 28px; bottom: 28px; left: calc(50% + 20px);
    width: calc(50% - 20px); height: auto; min-height: 0;
    border-radius: var(--rad);
  }
  .hero-copy { gap: 20px; padding: 48px 48px 56px 0; }
  /* K-33: チェックはヒーロー直下の通常セクションに戻す（重ね合わせ撤回） */
  #check .section-inner { padding: 88px 40px 104px; }
  #check .check-card {
    padding: 40px 48px;
    box-shadow: 0 20px 48px rgba(140, 77, 29, 0.16);
  }

  /* ---------- 2) エピソード: 余白圧縮・イラスト拡大 ---------- */
  #episodes .section-inner { padding-top: 72px; padding-bottom: 88px; --sec-pt: 72px; }
  #episodes .episode {
    grid-template-columns: 56px minmax(0, 1fr) 190px;
    padding: 28px 0;
    row-gap: 10px;
  }
  #episodes .episode:first-child { padding-top: 0; }
  #episodes .episode:last-child { padding-bottom: 0; }
  /* episode-head を透過させ、タグと画像をエピソード直下のグリッドに乗せる */
  #episodes .episode-head { display: contents; }
  #episodes .episode-tag { grid-column: 2; align-self: center; justify-self: start; }
  #episodes .episode-art-img {
    grid-column: 3; grid-row: 1 / span 2;
    width: 160px; height: 160px;
    align-self: center; justify-self: end;
  }
  #episodes .episode-body { grid-column: 2; }

  /* ---------- 3) S4a: 二択と答えの造形強化 ---------- */
  .choice-pair { max-width: none; gap: 24px; }
  .choice { padding: 34px 28px 30px; gap: 10px; border-radius: var(--rad); }
  .choice-icon { width: 60px; height: 60px; margin-bottom: 8px; }
  .choice-title { font-size: 18px; color: var(--color-text); }
  .choice-note { font-size: 14px; }
  .choice-arrow { width: 36px; height: 36px; margin: 4px 0; }
  .choice-third { padding: 40px 44px 36px; gap: 12px; }
  .third-icon { width: 60px; height: 60px; }
  .choice-third-title { font-size: 24px; line-height: 1.65; }
  .choice-third-note { font-size: 15px; }
}

/* ============================================================
   K-34: ヒーロー↔チェックの連続化・ヘッダーナビ（2026-08-24）
   ============================================================ */

/* チェックはヒーローと地続きに見せる（罫線なし・同じ地色） */
#check { border-top: 0; background: var(--color-bg); }

/* ---------- ヘッダーのセクションナビ（PCのみ） ---------- */
.header-nav { display: none; }

@media (min-width: 1024px) {
  .header-nav {
    display: flex; align-items: center; gap: 22px;
    margin-left: auto; margin-right: 8px;
  }
  .header-nav a {
    position: relative;
    font-size: 13px; font-weight: 700; line-height: 1.4;
    color: var(--color-white); text-decoration: none;
    white-space: nowrap; padding: 6px 0;
  }
  .header-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: 1px;
    background: var(--color-white);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.2s ease;
  }
  .header-nav a:hover { color: var(--color-white); }
  .header-nav a:hover::after,
  .header-nav a:focus-visible::after { transform: scaleX(1); }

  /* ナビが入る分、ヘッダーの左右余白を広げる */
  .header-inner { padding: 0 24px; gap: 24px; }

  /* ---------- ヒーロー＋チェックを1画面に収める ---------- */
  #check .section-inner { padding: 0 40px 40px; }
  #check .check-card { padding: 28px 40px; }
  #check .check-title { font-size: 25px; }
  #check .check-card { row-gap: 14px; column-gap: 48px; }
}

/* 1024〜1279pxはナビの文字を詰めて折り返しを防ぐ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-nav { gap: 16px; }
  .header-nav a { font-size: 12px; }
}

/* 縦の短いノートPC(768/800px)でもヒーロー＋チェックが1画面に収まるよう詰める */
@media (min-width: 1024px) and (max-height: 800px) {
  .hero-copy { padding-top: 32px; padding-bottom: 40px; }
  #check .section-inner { padding-bottom: 28px; }
  #check .check-card { padding: 24px 40px; }
}

/* ============================================================
   K-40: 男性版バリアント（?v=male / <html data-v="male">）
   - 配色: 水色系（コントラスト実測済み。CTA #17618a は白文字6.75:1）
   - 文言: .v-f / .v-m のスパンで出し分け（data-v はJSが付けるため、
     JS無効時は必ず女性版が表示される）
   - イラスト: 暖色SVGは hue-rotate で青系へ回す（画像ファイルは共用）
   ============================================================ */

/* ---------- 文言スイッチ ---------- */
.v-m { display: none !important; }
[data-v="male"] .v-f { display: none !important; }
[data-v="male"] span.v-m { display: inline !important; }
[data-v="male"] .hero-rise.v-m { display: block !important; }
[data-v="male"] details.faq.v-m { display: block !important; }

/* 男性版ヒーローの字幕アニメーション遅延（nth-childが女性版スパンとずれるため明示） */
[data-v="male"] .hero-title .hero-rise:nth-child(3) { --hero-d: 0s; }
[data-v="male"] .hero-title .hero-rise:nth-child(4) { --hero-d: 0.66s; }
[data-v="male"] .hero-lead .hero-rise:nth-child(4) { --hero-d: 1.74s; }
[data-v="male"] .hero-lead .hero-rise:nth-child(5) { --hero-d: 2.58s; }
[data-v="male"] .hero-lead .hero-rise:nth-child(6) { --hero-d: 3.42s; }

/* ---------- 配色トークン ---------- */
:root[data-v="male"] {
  --color-bg: #f2f8fb;
  --color-ink: #1d4e66;          /* 地と8.40:1 */
  --color-primary: #4a9cc9;
  --color-primary-dark: #266f96; /* 白文字5.53:1 */
  --color-accent: #2b7ea1;       /* 白と4.56:1（下線・図形用） */
  --color-cta: #17618a;          /* 白文字6.75:1 */
  --color-cta-hover: #124e70;
  --color-accent-soft: #bcdcec;
  --color-soft: #eaf3f8;
  --color-tint: #d8eaf4;
  --color-sec: #e4eff6;
  --color-line: #c9dfeb;
  --color-border: #ccd9e0;
  --color-text: #32404a;         /* 地と9.96:1 */
  --color-text-soft: #4c5c66;    /* 地と6.47:1 */
  --color-text-muted: #5d6b74;
  --color-text-faint: #74828a;
  --color-neutral: #eef2f4;
  --shadow-card: 0 4px 16px rgba(23, 77, 110, 0.10);
}

/* ---------- トークン外のハードコード色 ---------- */
/* チェックカード（女性版 #a85a1a の青版。白見出し6.75:1） */
[data-v="male"] .check-card { background: #17618a; }
[data-v="male"] .check-card .btn-primary { color: #12557a; box-shadow: 0 5px 18px rgba(8, 40, 60, 0.30); }
[data-v="male"] .check-card .btn-primary:hover { background: #eef7fc; color: #12557a; }
[data-v="male"] .check-body { color: #e8f4fb; }

/* ヒーローのスクリムと局所パネル（モバイルで有効） */
[data-v="male"] .hero-inner::before { background: rgba(242, 248, 251, 0.28); }
[data-v="male"] .hero-copy::before { background: rgba(242, 248, 251, 0.82); }
@supports (backdrop-filter: blur(6px)) {
  [data-v="male"] .hero-copy::before { background: rgba(242, 248, 251, 0.66); }
}

/* K-33のチェックカード影（ハードコード） */
@media (min-width: 1024px) {
  [data-v="male"] #check .check-card { box-shadow: 0 20px 48px rgba(23, 77, 110, 0.16); }
}

/* ---------- インラインSVGイラストの色回し ----------
   check-art / method-art / bond-art / choice系 は #c96f24 等を
   属性で直書きしているため、フィルタで暖色→青系へ回す */
[data-v="male"] .check-art,
[data-v="male"] .method-art,
[data-v="male"] .bond-art,
[data-v="male"] .choice-icon,
[data-v="male"] .third-icon {
  filter: hue-rotate(182deg) saturate(0.8);
}

/* ---------- K-42: 男性版イラストの差し替え ----------
   img は v-f / v-m で二重化してある（各版で寸法が異なるためCSSのsrc差し替えは不可）。
   display:none の lazy 画像はブラウザが取得しないため、非表示側の転送は発生しない
   （ヒーローのみ eager のため、非表示側も取得され得る。約85KBの許容判断） */
[data-v="male"] img.v-m { display: block !important; }
[data-v="male"] .episode-art-img.v-m { display: block !important; }

/* 男性版のイラストは既に青系のため、SVG用の色回しは適用しない */
[data-v="male"] .hero-bg-photo,
[data-v="male"] .episode-art-img,
[data-v="male"] .how-art,
[data-v="male"] .closing-img { filter: none; }