/* =========================================================
   下層ページ 共通デザインキット
   ★このサイトの下層ページには写真を一切置かない（クライアント合意）。
     間は「余白・明朝見出し・立体アイコン・罫線・淡い面」で持たせる。
     指示書より：植物装飾は使わない／アイコンはセージ・アイボリー・淡いゴールドで統一／
     「作り込みすぎなくてよい。世界観だけ維持」。
   ========================================================= */

/* ★日本語は任意の位置で折り返すので、見出しやリード文の最終行に1文字だけ落ちて
   「傾いて見える」ことがある。text-wrap: pretty で最終行の孤立を避ける。
   （未対応ブラウザでは従来どおり折り返すだけ＝害はない）
   検出は _orphan.py。ボタン類は2行になった時点でNGなので、ラベル側を短くする。 */
/* ★短い見出し・箇条書きは balance（行の長さを均す）。
   pretty では最終行の1文字落ちを防げないことが 2026-08-28 の検査で分かった。
   _orphan.py の対象幅を 768/1024/1100/1280 まで広げたところ、カード見出しで52件出た
   （1440/375 の2幅だけ見ていたので、それまで一度も見えていなかった）。 */
/* balance は「短い見出し・箇条書き」だけに当てる。
   ★長い見出し（h2 など）や複数行のステートメントに当てると、行を均そうとして
   かえって最終行が2文字になることがある（2026-08-28 に .lstate と .org__catch で実測）。
   長いものは従来どおり pretty。 */
.pcard b, .rowrow__ttl, .nextcard b, .mblock__head h3,
.lib-card__txt b, .fstep__body > b,
.qbox__list li, .klist li, .klist li > span, .duo__col li,
/* 規約ページの目次・定義表の見出し。原稿の文言は変えられないので、折り返し側で調整する */
.legal__toc a, .deftbl__row dt {
  text-wrap: balance;
}
h1, h2, h3,
.lstate, .lstate__sub, .inline-cta__ttl, .inline-cta__txt,
.lhero__lead, .lhero__note,
.sec-head .lead, .sec-head .note,
.tblock__lead, .duo__ttl,
.legal__sec h2,
.hero__lead, .hero__note,
/* 本文の段落も。最終行に1〜2文字だけ残るのを避ける（カード内で目立つ） */
.pcard p, .nextcard p, .rowrow__txt, .fstep__body p,
.bandnote, .mblock__lead, .ltxt p, .lib-card__txt p {
  text-wrap: pretty;
}

/* ---------------- ページ上部（写真なしのヒーロー） ---------------- */
.lhero {
  position: relative;
  padding-block: 96px 72px;
  background: var(--ivory-2);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  text-align: center;
}
/* 写真の代わりの奥行き。淡いセージの光を2つ置くだけ（派手なグラデは指示で禁止） */
.lhero::before,
.lhero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lhero::before {
  width: 520px; height: 520px;
  top: -230px; left: -140px;
  background: radial-gradient(circle, rgba(140, 166, 140, .16), rgba(140, 166, 140, 0) 70%);
}
.lhero::after {
  width: 420px; height: 420px;
  right: -150px; bottom: -220px;
  background: radial-gradient(circle, rgba(176, 139, 79, .10), rgba(176, 139, 79, 0) 70%);
}
.lhero__in { position: relative; z-index: 1; }
.lhero .eyebrow { margin-bottom: 14px; }
.lhero .ornament { margin: 0 auto 20px; }
.lhero h1 {
  font-size: clamp(27px, 4.2vw, 44px);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--green-900);
}
.lhero__lead {
  max-width: 720px;
  margin: 20px auto 0;
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.95;
  color: var(--green-800);
}
.lhero__note {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-soft);
}
/* パンくずは header.php が .lhero の直前に出す（ヒーロー内では出さない＝二重になるため）。
   帯とヒーローは同じアイボリー地なので、あいだの罫線だけ消して1枚の面に見せる。
   body の .ccn-lower は inc/lower-parts.php が付ける。 */
.ccn-lower .breadcrumb { border-bottom: 0; padding-top: 6px; }

/* ---------------- 読み幅と本文タイポ ---------------- */
.lread { max-width: var(--read); margin-inline: auto; }
.ltxt p { font-size: 15px; line-height: 2.05; color: var(--ink); margin-bottom: 20px; }
.ltxt p:last-child { margin-bottom: 0; }
.ltxt .ltxt__strong { color: var(--green-900); font-weight: 600; }
/* 「西村 力」のように半角スペースを含む語が行末で割れるのを防ぐ */
.nw { white-space: nowrap; }
/* SPで長すぎる語尾を落とす（ボタン・リンクのラベルが2行に折れて曲がって見えるのを防ぐ） */
@media (max-width: 760px) { .hide-sp { display: none; } }
/* SPだけ改行を入れる（長いページ名が「…向け支／援」のように割れるのを防ぐ） */
.br-sp { display: none; }
@media (max-width: 760px) { .br-sp { display: inline; } }
.ltxt h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 2.3vw, 23px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--green-900);
  margin: 40px 0 14px;
}
.ltxt h3:first-child { margin-top: 0; }

/* 大きめの明朝の一文（写真の代わりに“間”をつくる）
   ★`.ltxt p{}` の方が詳細度が高く、.ltxt の中に置くと font-size / color を殺される。
     マークアップ側では .ltxt の外に出すのが基本だが、事故防止に要素セレクタ付きも書いておく。 */
.ltxt p.lstate,
.lstate {
  font-family: var(--serif);
  font-size: clamp(19px, 2.7vw, 28px);
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--green-900);
  text-align: center;
  margin-block: 8px 0;
}
.lstate + .lstate__sub {
  margin-top: 18px;
  text-align: center;
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink-soft);
}

/* ---------------- アイコンカード ---------------- */
.pcards { display: grid; gap: 20px; }
.pcards--2 { grid-template-columns: repeat(2, 1fr); }
.pcards--3 { grid-template-columns: repeat(3, 1fr); }
.pcard {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.pcard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pcard__head b {
  /* ★display:inline のままだと text-wrap:balance が効かない（行を組むのは
     ブロックコンテナなので、インライン要素に指定しても無視される）。
     .pcard__num が block なので、block にしても見た目は変わらない。
     2026-08-28、balance を入れても52件が消えなかった原因がこれ。 */
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--green-900);
}
.pcard__num {
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}
.pcards .pcard p { font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); margin: 0; }
/* カード内のリンク（ライブラリーのダウンロード等）。実ファイルが無い間は出力自体がない */
.pcard > .tlink { margin-top: 18px; display: inline-flex; }

/* ---------------- 横1行のリスト（5領域など、枚数が3で割れないもの） ---------------- */
.rowlist {
  max-width: 920px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 10px 34px;
  box-shadow: var(--shadow-sm);
}
.rowrow {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  grid-template-areas: "no icon ttl" "no icon txt";
  align-content: center;
  column-gap: 20px;
  padding-block: 22px;
}
.rowrow + .rowrow { border-top: 1px solid var(--line-soft); }
.rowrow__no {
  grid-area: no;
  align-self: center;
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--gold);
}
.rowrow .ic { grid-area: icon; align-self: center; }
.rowrow__ttl {
  grid-area: ttl;
  align-self: end;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 6px;
}
.rowrow__txt { grid-area: txt; align-self: start; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); margin: 0; }

/* ---------------- 番号つきの流れ ---------------- */
.flowline { position: relative; display: grid; gap: 0; }
.flowline::before {
  content: "";
  position: absolute;
  left: 27px; top: 34px; bottom: 34px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-soft), var(--sage-soft));
}
.fstep { position: relative; display: flex; gap: 22px; padding-block: 22px; }
.fstep__no {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--white), var(--sage-mist));
  border: 1px solid var(--sage-soft);
  box-shadow: var(--shadow-sm);
  font-family: var(--latin);
  font-size: 17px;
  color: var(--green-700);
}
.fstep__body { padding-top: 6px; }
/* ★見出しは「直下の b」だけ。子孫セレクタ（.fstep__body b）にすると、
   本文 <p> の中の強調 <b>（ccn_flow が許可している）まで明朝の大見出しになり、
   段落が途中で3行に割れる。2026-08-28 に contact / kobetsu / keizoku で発生。 */
.fstep__body > b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 8px;
}
.fstep__body p { font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); margin: 0; }
/* 本文中の強調。上の規則が変わっても巻き込まれないよう明示しておく（保険） */
.fstep__body p b {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--green-900);
  margin: 0;
}

/* ---------------- 立ち止まる問い（下層指示23） ---------------- */
.qbox {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  margin-block: 48px;
  padding: 34px 38px;
  background: var(--ivory-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.qbox::before {
  content: "";
  position: absolute;
  left: 0; top: 26px; bottom: 26px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--sage-2));
}
.qbox__label {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
}
.qbox__list li {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.9;
  color: var(--green-900);
  padding-left: 22px;
  position: relative;
}
.qbox__list li + li { margin-top: 12px; }
.qbox__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .78em;
  width: 5px; height: 5px;
  background: var(--gold-2);
  transform: rotate(45deg);
}
.qbox__note { margin-top: 16px; font-size: 13px; color: var(--ink-mute); line-height: 1.9; }

/* ---------------- 2列の対比（支える／背負う 等） ---------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.duo__col { padding: 32px 30px; }
.duo__col + .duo__col { border-left: 1px solid var(--line-soft); background: var(--ivory-2); }
.duo__ttl {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--green-900);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.duo__col li {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.duo__col li + li { margin-top: 10px; }
.duo__col li::before {
  content: "";
  position: absolute;
  left: 0; top: .8em;
  width: 6px; height: 1px;
  background: var(--sage);
}

/* ---------------- チェックリスト（対象になる悩み 等） ---------------- */
.klist { display: grid; gap: 12px; }
.klist--2 { grid-template-columns: 1fr 1fr; gap: 14px 44px; max-width: 940px; margin-inline: auto; }
.klist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink);
}
.klist li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: .28em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, var(--white), var(--sage-soft) 70%);
  border: 1px solid var(--sage-2);
  box-shadow: inset 0 -1px 2px rgba(24, 48, 36, .06);
}

/* ---------------- テーマブロック（「相談できること」の5テーマ） ---------------- */
.themeset { display: grid; gap: 22px; max-width: 960px; margin-inline: auto; }
.tblock {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 34px 28px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 100px;   /* 固定ヘッダーぶん。アンカーで飛んだとき見出しが隠れないように */
}
.tblock__head {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  grid-template-areas: "no icon ttl" "no icon lead";
  align-content: center;
  column-gap: 20px;
}
.tblock__no {
  grid-area: no;
  align-self: center;
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: .16em;
  color: var(--gold);
}
.tblock__head .ic { grid-area: icon; align-self: center; }
.tblock__head h3 {
  grid-area: ttl;
  align-self: end;
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 6px;
}
.tblock__lead { grid-area: lead; align-self: start; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); margin: 0; }
.tblock__body { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.tblock__label {
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--green-700);
  margin-bottom: 14px;
}
.tblock__body .klist { grid-template-columns: 1fr 1fr; gap: 12px 34px; }
.tblock__body .klist li { font-size: 13.5px; }
.tblock__body .tlink { margin-top: 20px; display: inline-flex; }

/* ---------------- 相談メニューのブロック（個人・家族相談） ---------------- */
.menuset { display: grid; gap: 22px; max-width: 960px; margin-inline: auto; }
.mblock {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 34px 28px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 100px;
}
.mblock__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon tag price" "icon ttl price";
  align-items: center;
  column-gap: 20px;
}
.mblock__head .ic { grid-area: icon; }
.mblock__tag {
  grid-area: tag;
  align-self: end;
  justify-self: start;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--green-700);
  background: var(--sage-mist);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  margin-bottom: 8px;
}
.mblock__head h3 {
  grid-area: ttl;
  align-self: start;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 500;
  color: var(--green-900);
}
.mblock__price {
  grid-area: price;
  text-align: right;
  margin: 0;
  white-space: nowrap;
}
.mblock__time { display: block; font-size: 12.5px; color: var(--ink-mute); letter-spacing: .04em; }
.mblock__price b {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 500;
  color: var(--green-800);
  line-height: 1.3;
}
.mblock__price small { display: block; font-size: 11.5px; color: var(--ink-mute); }
.mblock__body { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.mblock__lead { font-size: 14px; line-height: 1.95; color: var(--ink); margin-bottom: 16px; }
.mblock__body .klist { grid-template-columns: 1fr 1fr; gap: 12px 34px; }
.mblock__body .klist li { font-size: 13.5px; }
.mblock__body .tlink { margin-top: 20px; display: inline-flex; }

/* ---------------- カウンセラー紹介（下層で唯一、写真を使うページ） ---------------- */
.cprof {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}
.cprof__photo .ph { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; }
/* 16:9の写真を縦長の枠に入れるので、顔が中央に来る位置で切る（_orphan/_align とは別に
   数字を変えたら必ず撮って確認すること） */
.cprof__photo .ph img { object-position: 70% 50%; }
.cprof__name {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 38px);
  color: var(--green-900);
  letter-spacing: .12em;
  margin-bottom: 6px;
}
.cprof__name .ruby { font-size: 13px; letter-spacing: .1em; color: var(--ink-mute); margin-left: 12px; }
.cprof__name .en {
  display: block;
  font-family: var(--latin);
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--sage);
  margin-top: 6px;
}
.cprof__txt .quals { margin: 18px 0 22px; }
.cprof__txt p { font-size: 14.5px; line-height: 2; color: var(--ink); margin-bottom: 14px; }
.cprof__txt p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .cprof { grid-template-columns: 1fr; gap: 30px; }
  .cprof__photo .ph { aspect-ratio: 4 / 3; }
  .cprof__photo .ph img { object-position: 60% 50%; }
}

/* ---------------- 料金ボックス（メニュー詳細ページ） ---------------- */
.feebox {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.feebox__name { font-family: var(--serif); font-size: 19px; color: var(--green-900); }
.feebox__time { font-size: 13.5px; color: var(--ink-mute); letter-spacing: .04em; }
.feebox__price {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 34px);
  color: var(--green-800);
  letter-spacing: .02em;
}
.feebox__note { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--ink-mute); }

/* ---------------- 補足の帯 ---------------- */
.bandnote {
  margin-block: 40px;
  padding: 22px 26px;
  border-left: 2px solid var(--sage-2);
  background: var(--sage-mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}
.bandnote b { color: var(--green-900); }

/* ---------------- 次の入口 ---------------- */
.nextset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nextcard {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nextcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.nextcard .ic { margin-bottom: 14px; }
.nextcard b {
  display: block;
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 8px;
}
.nextcard p { font-size: 13px; line-height: 1.9; color: var(--ink-soft); margin-bottom: 14px; }
.nextcard .more { font-size: 13px; color: var(--green-700); display: inline-flex; align-items: center; }

/* ---------------- 主な経歴カード（カウンセラー紹介 EXPERIENCE） ----------------
   指示書「PC 2列×3段／カード間には十分な余白／情報量の多さや圧迫感を感じないこと」。
   .pcards--2 をベースに、余白だけ広げる。 */
.pcards--exp { gap: 26px; max-width: 1020px; margin-inline: auto; }
.pcards--exp .pcard { padding: 32px 30px; }

/* ---------------- 定義表（特定商取引法に基づく表記など） ---------------- */
.deftbl {
  max-width: var(--read);
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.deftbl__row { display: grid; grid-template-columns: 230px 1fr; }
.deftbl__row + .deftbl__row { border-top: 1px solid var(--line-soft); }
.deftbl__row dt {
  padding: 20px 24px;
  background: var(--ivory-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.85;
  color: var(--green-900);
}
.deftbl__row dd { padding: 20px 24px; font-size: 13.5px; line-height: 2; color: var(--ink); }
.deftbl__row dd small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.9; }

/* ---------------- 規約・ポリシー本文 ---------------- */
.legal { max-width: var(--read); margin-inline: auto; }
.legal__lead { font-size: 14.5px; line-height: 2.05; color: var(--ink); margin-bottom: 36px; }
.legal__toc {
  background: var(--ivory-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-bottom: 52px;
}
.legal__toc-ttl {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--green-900);
  margin-bottom: 14px;
}
.legal__toc ol { list-style: none; display: grid; gap: 7px; }
.legal__toc a {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--green-800);
  transition: color .25s ease;
}
.legal__toc a:hover { color: var(--gold); }

.legal__sec { scroll-margin-top: 100px; }
.legal__sec + .legal__sec { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line-soft); }
.legal__sec h2 {
  font-family: var(--serif);
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--green-900);
  margin-bottom: 18px;
}
.legal__sec h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green-800);
  margin: 26px 0 10px;
}
.legal__sec p { font-size: 14px; line-height: 2.05; color: var(--ink); margin-bottom: 16px; }
.legal__sec p:last-child { margin-bottom: 0; }
/* ★「.親 p{}」が後ろにあると .legal__note の指定を殺すので、要素セレクタを足して勝たせる */
.legal__sec p.legal__note { font-size: 12.5px; color: var(--ink-mute); line-height: 1.95; }
.legal__sec ul { display: grid; gap: 8px; margin: 4px 0 18px; }
.legal__sec li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.95; color: var(--ink-soft); }
.legal__sec li::before { content: ""; position: absolute; left: 0; top: .82em; width: 6px; height: 1px; background: var(--sage); }
.legal__sec a { color: var(--green-700); border-bottom: 1px solid var(--sage-2); }
.legal__sec a:hover { color: var(--gold); border-color: var(--gold); }
.legal__date {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--ink-mute);
  text-align: right;
}

/* ---------------- お問い合わせフォーム ---------------- */
.cform { max-width: var(--read); margin-inline: auto; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__field { display: block; margin-bottom: 18px; }
.cform__label { display: block; font-size: 13.5px; color: var(--green-900); margin-bottom: 8px; }
.cform__label em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--white);
  background: var(--sage);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: 1px;
}
.cform input, .cform select, .cform textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
  /* iOSで16px未満だとフォーカス時に画面が拡大するため15px以上を保つ */
}
.cform textarea { resize: vertical; min-height: 160px; }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-mist);
}
.cform ::placeholder { color: var(--ink-mute); opacity: .75; }
.cform__field.is-error input,
.cform__field.is-error select,
.cform__field.is-error textarea { border-color: #B4694F; background: #FDF6F3; }
.cform__alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.9;
  margin-bottom: 24px;
}
.cform__alert--err { background: #FDF1EC; border: 1px solid #E2C4B6; color: #8C4A31; }
.cform__alert--ok { background: var(--sage-mist); border: 1px solid var(--sage-2); color: var(--green-900); }
.cform__agree { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 26px; font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
.cform__agree input { width: 18px; height: 18px; margin-top: .28em; flex: 0 0 auto; padding: 0; }
.cform__agree a { color: var(--green-700); border-bottom: 1px solid var(--sage-2); }
.cform__agree.is-error { color: #8C4A31; }
.cform__submit { text-align: center; }
.cform__note { margin-top: 18px; font-size: 12.5px; line-height: 1.9; color: var(--ink-mute); }

/* ---------------- レスポンシブ ---------------- */
@media (max-width: 900px) {
  .pcards--3 { grid-template-columns: 1fr 1fr; }
  .nextset { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lhero { padding-block: 64px 52px; }
  .lhero__lead br { display: none; }
  .pcards--2, .pcards--3 { grid-template-columns: 1fr; }
  .pcard { padding: 24px 22px; }
  /* ★見出しがアイコンの横幅に押されて、末尾1文字だけ次行に落ちる。
        SPだけアイコンを一回り小さくし、見出しも少し詰める（検出は _orphan.py） */
  .pcard__head .ic--lg { width: 62px; height: 62px; }
  .pcard__head b { font-size: 17px; }
  .rowrow .ic--lg { width: 62px; height: 62px; }
  .flowline::before { left: 22px; }
  .fstep { gap: 16px; padding-block: 16px; }
  .fstep__no { width: 44px; height: 44px; font-size: 15px; }
  .qbox { margin-block: 36px; padding: 26px 22px; }
  .duo { grid-template-columns: 1fr; }
  .duo__col + .duo__col { border-left: 0; border-top: 1px solid var(--line-soft); }
  .duo__col { padding: 24px 22px; }
  .klist--2 { grid-template-columns: 1fr; }
  .bandnote { padding: 18px 20px; }
  /* SPは「番号＋アイコン＋見出し」で1行、本文は次の行に全幅で回す
     （入れ子のままだと本文が11文字ほどまで痩せる） */
  .rowlist { padding: 6px 20px; }
  /* ★SPのボタンは横幅いっぱい＝ラベルが1文字だけ2行目に落ちると、矢印が中央に残って
     ボタンが傾いて見える。左右パディングと字間を詰めて1行に収める余地を作る。
     ラベル自体も11文字以内に収めること（実測：375pxで13文字は折れる）。 */
  .inline-cta__btns .btn { padding-inline: 20px; letter-spacing: .03em; }
  /* 実測：375pxなら5テーマとも見出しが1行に収まる。360px以下は「発達特性・グレーゾーン」
     だけ2行になるが、語の途中で割れるわけではないので許容する */
  .rowrow {
    grid-template-columns: 24px auto 1fr;
    grid-template-areas: "no icon ttl" "txt txt txt";
    column-gap: 14px;
    padding-block: 20px;
  }
  .rowrow__ttl { align-self: center; margin-bottom: 0; font-size: 16.5px; letter-spacing: -.01em; }
  .rowrow__txt { margin-top: 12px; }
  .tblock { padding: 24px 22px; }
  .tblock__head {
    grid-template-columns: 24px auto 1fr;
    grid-template-areas: "no icon ttl" "lead lead lead";
    column-gap: 14px;
  }
  /* アイコンが大きいと見出しが2行に折れるので、SPだけ一回り小さくする */
  .tblock__head .ic--xl { width: 60px; height: 60px; }
  /* 最長の「発達特性・グレーゾーン」（11文字）が1行で収まるところまで下げる */
  .tblock__head h3 { align-self: center; margin-bottom: 0; font-size: 17.5px; letter-spacing: 0; }
  .tblock__lead { margin-top: 14px; }
  .tblock__body .klist { grid-template-columns: 1fr; }
  /* 相談メニューは SPで「アイコン＋タグ／見出し」→「料金」の縦積みにする。
     3カラムのままだと料金が潰れる */
  .mblock { padding: 24px 22px; }
  .mblock__head {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon tag" "icon ttl" "price price";
    column-gap: 14px;
  }
  .mblock__head .ic--xl { width: 60px; height: 60px; }
  .mblock__head h3 { font-size: 20px; }
  .mblock__price {
    text-align: left;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .mblock__time { display: inline; }
  .mblock__price small { display: inline; }
  .mblock__body .klist { grid-template-columns: 1fr; }

  /* 経歴カードは1列（指示書9「縦に長くなっても十分な余白を優先」） */
  .pcards--exp { gap: 18px; }
  .pcards--exp .pcard { padding: 24px 22px; }

  /* 定義表は「項目名の下に内容」の縦積み */
  .deftbl__row { grid-template-columns: 1fr; }
  .deftbl__row dt { padding: 16px 20px 10px; }
  .deftbl__row dd { padding: 0 20px 18px; }

  .legal__toc { padding: 22px 20px; margin-bottom: 40px; }
  .legal__sec + .legal__sec { margin-top: 32px; padding-top: 32px; }
  /* ★条見出しは原稿の文言なので短くできない。SPで最終行に2文字だけ落ちるため、
     文節で折り返す（auto-phrase）＋わずかに字送りを詰めて2行に収める。
     auto-phrase 未対応のブラウザでは従来どおり折り返すだけ＝害はない。 */
  .legal__sec h2 { word-break: auto-phrase; font-size: 17.5px; letter-spacing: -.01em; }

  .cform__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------- 公式LINEご登録者向けページの合言葉フォーム ---------------- */
/* ★inc/line-private.php が the_password_form を差し替えて出す。
   WordPress既定の素の <form> のままだと、この案件の世界観から浮くため。 */
.pwgate {
  max-width: 620px;
  margin-inline: auto;
  padding: 44px 36px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.pwgate__ttl {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--green-900);
  margin-bottom: 14px;
  text-wrap: pretty;
}
.pwgate__txt {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin-bottom: 28px;
  text-wrap: pretty;
}
.pwgate__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pwgate__label {
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--sage);
}
.pwgate__form input[type="password"] {
  width: min(100%, 260px);
  padding: 13px 16px;
  font-size: 16px; /* ★16px未満だと iOS が入力時にズームする */
  text-align: center;
  letter-spacing: .3em;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.pwgate__form input[type="password"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(190, 160, 92, .14);
}
.pwgate__form .btn { margin-top: 6px; }
@media (max-width: 760px) {
  .pwgate { padding: 34px 22px; }
  .pwgate__ttl { font-size: 17px; }
}