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

/* ★日本語は任意の位置で折り返すので、見出しやリード文の最終行に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。 */
/* ★2026-09-04：pcard／flow／rowlist／duo の見出しを b → h3 に変えた（見出し階層のため）。
   見た目は変えないので、既存のセレクタに h3 を足すだけにしてある。 */
.pcard b, .pcard h3, .rowrow__ttl, .nextcard b, .mblock__head h3,
.lib-card__txt b, .fstep__body > b, .fstep__body > h3,
.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(--bg-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(--navy-900);
}
.lhero__lead {
  max-width: 720px;
  margin: 20px auto 0;
  font-family: var(--head);
  font-size: clamp(16px, 2vw, 20px);
  line-height: var(--lh-body);
  color: var(--navy-800);
}
.lhero__note {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
/* パンくずは header.php が .lhero の直前に出す（ヒーロー内では出さない＝二重になるため）。
   帯とヒーローは同じアイボリー地なので、あいだの罫線だけ消して1枚の面に見せる。
   body の .pxy-lower は inc/lower-parts.php が付ける。 */
.pxy-lower .breadcrumb { border-bottom: 0; padding-top: 6px; }

/* ---------------- 読み幅と本文タイポ ---------------- */
.lread { max-width: var(--read); margin-inline: auto; }
.ltxt p { font-size: 15px; line-height: var(--lh-body); color: var(--ink); margin-bottom: 20px; }
.ltxt p:last-child { margin-bottom: 0; }
.ltxt .ltxt__strong { color: var(--navy-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(--head);
  font-size: clamp(18px, 2.3vw, 23px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy-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(--head);
  font-size: clamp(19px, 2.7vw, 28px);
  line-height: var(--lh-body);
  letter-spacing: .02em;
  color: var(--navy-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, .pcard__head h3 {
  /* ★display:inline のままだと text-wrap:balance が効かない（行を組むのは
     ブロックコンテナなので、インライン要素に指定しても無視される）。
     .pcard__num が block なので、block にしても見た目は変わらない。
     2026-08-28、balance を入れても52件が消えなかった原因がこれ。 */
  display: block;
  font-family: var(--head);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy-900);
}
.pcard__num {
  font-family: var(--latin);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--cyan-deep);
  display: block;
  margin-bottom: 4px;
}
.pcards .pcard p { font-size: 13.5px; line-height: var(--lh-body); color: var(--ink-soft); margin: 0; }
/* 2026-10-07 カード本文中のリンク（/industry/ → 雑貨のOEM）。本文と同色で見分けられなかったので FAQ の回答内リンクと同じ見た目に */
.pcards .pcard p a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; }
/* カード内のリンク（ライブラリーのダウンロード等）。実ファイルが無い間は出力自体がない */
.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(--cyan-deep);
}
.rowrow .ic { grid-area: icon; align-self: center; }
.rowrow__ttl {
  grid-area: ttl;
  align-self: end;
  font-family: var(--head);
  font-size: 18px;
  font-weight: 500;
  color: var(--navy-900);
  margin-bottom: 6px;
}
.rowrow__txt { grid-area: txt; align-self: start; font-size: 13.5px; line-height: var(--lh-body); 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(--sky-line), var(--steel-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(--mist));
  border: 1px solid var(--steel-soft);
  box-shadow: var(--shadow-sm);
  font-family: var(--latin);
  font-size: 17px;
  color: var(--navy-700);
}
.fstep__body { padding-top: 6px; }
/* ★見出しは「直下の b / h3」だけ。子孫セレクタ（.fstep__body b）にすると、
   本文 <p> の中の強調 <b>（pxy_flow が許可している）まで明朝の大見出しになり、
   段落が途中で3行に割れる。2026-08-28 に contact / kobetsu / keizoku で発生。 */
.fstep__body > b, .fstep__body > h3 {
  display: block;
  font-family: var(--head);
  font-size: 19px;
  font-weight: 500;
  color: var(--navy-900);
  margin-bottom: 8px;
}
.fstep__body p { font-size: 13.5px; line-height: var(--lh-body); color: var(--ink-soft); margin: 0; }
/* 本文中の強調。上の規則が変わっても巻き込まれないよう明示しておく（保険） */
.fstep__body p b {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0;
}

/* ---------------- 立ち止まる問い（下層指示23） ---------------- */
.qbox {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  margin-block: 48px;
  padding: 34px 38px;
  background: var(--bg-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(--cyan), var(--steel-2));
}
.qbox__label {
  font-family: var(--latin);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: 14px;
  display: block;
}
.qbox__list li {
  font-family: var(--head);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.9;
  color: var(--navy-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(--cyan);
  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(--bg-2); }
.duo__ttl {
  font-family: var(--head);
  font-size: 18px;
  color: var(--navy-900);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.duo__col li {
  font-size: 13.5px;
  line-height: var(--lh-body);
  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(--steel);
}

/* ---------------- チェックリスト（対象になる悩み 等） ---------------- */
.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(--steel-soft) 70%);
  border: 1px solid var(--steel-2);
  box-shadow: inset 0 -1px 2px rgba(13, 38, 68, .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(--cyan-deep);
}
.tblock__head .ic { grid-area: icon; align-self: center; }
.tblock__head h3 {
  grid-area: ttl;
  align-self: end;
  font-family: var(--head);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 500;
  color: var(--navy-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(--navy-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(--navy-700);
  background: var(--mist);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  margin-bottom: 8px;
}
.mblock__head h3 {
  grid-area: ttl;
  align-self: start;
  font-family: var(--head);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 500;
  color: var(--navy-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(--head);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 500;
  color: var(--navy-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: var(--lh-body); 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(--head);
  font-size: clamp(28px, 3.6vw, 38px);
  color: var(--navy-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(--steel);
  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(--head); font-size: 19px; color: var(--navy-900); }
.feebox__time { font-size: 13.5px; color: var(--ink-mute); letter-spacing: .04em; }
.feebox__price {
  font-family: var(--head);
  font-size: clamp(26px, 3.4vw, 34px);
  color: var(--navy-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(--steel-2);
  background: var(--mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.bandnote b { color: var(--navy-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(--head);
  font-size: 17.5px;
  font-weight: 500;
  color: var(--navy-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(--navy-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(--bg-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--navy-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: var(--lh-body); color: var(--ink); margin-bottom: 36px; }
.legal__toc {
  background: var(--bg-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(--head);
  font-size: 15px;
  color: var(--navy-900);
  margin-bottom: 14px;
}
.legal__toc ol { list-style: none; display: grid; gap: 7px; }
.legal__toc a {
  font-size: 13.5px;
  line-height: var(--lh-body);
  color: var(--navy-800);
  transition: color .25s ease;
}
.legal__toc a:hover { color: var(--cyan-deep); }

.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(--head);
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy-900);
  margin-bottom: 18px;
}
.legal__sec h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-800);
  margin: 26px 0 10px;
}
.legal__sec p { font-size: 14px; line-height: var(--lh-body); 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: var(--lh-body); }
.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: var(--lh-body); color: var(--ink-soft); }
.legal__sec li::before { content: ""; position: absolute; left: 0; top: .82em; width: 6px; height: 1px; background: var(--steel); }
.legal__sec a { color: var(--navy-700); border-bottom: 1px solid var(--steel-2); }
.legal__sec a:hover { color: var(--cyan-deep); border-color: var(--cyan-deep); }
.legal__date {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: var(--lh-body);
  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(--navy-900); margin-bottom: 8px; }
.cform__label em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--white);
  background: var(--steel);
  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(--steel);
  box-shadow: 0 0 0 3px var(--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(--mist); border: 1px solid var(--steel-2); color: var(--navy-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(--navy-700); border-bottom: 1px solid var(--steel-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, .pcard__head h3 { 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; }
}

/* =========================================================
   図面・参考画像の添付（2026-09-01・先方依頼書§9）
   ★ブラウザ既定の <input type="file"> は素のままだと他の入力欄と別物に見える。
     枠と余白だけ他のフィールドに揃える（見た目の統一は先方§6の指摘でもある）。
   ========================================================= */
.cform__file input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.cform__file input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cform__file input[type="file"]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(61, 165, 245, .16); }
.cform__file.is-error input[type="file"] { border-color: #C0392B; background: #FDF3F2; }
.cform__hint { display: block; margin-top: 7px; font-size: 12px; line-height: 1.8; color: var(--ink-mute); }
@media (max-width: 560px) {
  .cform__file input[type="file"] { font-size: 13px; padding: 10px 12px; }
  .cform__file input[type="file"]::file-selector-button { padding: 6px 11px; font-size: 12.5px; margin-right: 9px; }
}

/* =========================================================
   送信完了メッセージ（2026-09-01・先方依頼書§9）
   ★これが無く、送信後は同じフォームが再表示されるだけだった。
   ★エラー（赤）とはっきり別物に見せる。緑〜ブルー寄りの成功色にする。
   ========================================================= */
.cform-sent {
  margin: 0 0 30px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: #F1F9F4;
  border: 1px solid #BEE0CB;
  box-shadow: var(--shadow-sm);
}
.cform-sent__ttl {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #1F6B42;
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
/* チェックマーク。アイコンフォントは読み込まない方針なのでCSSで描く */
.cform-sent__ttl::before {
  content: "";
  position: absolute;
  left: 2px; top: .34em;
  width: 15px; height: 8px;
  border-left: 2.5px solid #2F9159;
  border-bottom: 2.5px solid #2F9159;
  transform: rotate(-45deg);
}
.cform-sent__txt { font-size: 14px; line-height: var(--lh-body); color: var(--ink); }
.cform-sent__note { margin-top: 10px; font-size: 12.5px; line-height: var(--lh-body); color: var(--ink-soft); }
.cform-sent__note a { color: var(--navy-700); font-weight: 700; border-bottom: 1px solid var(--steel-2); white-space: nowrap; }
@media (max-width: 560px) {
  .cform-sent { padding: 18px 16px; }
  .cform-sent__ttl { font-size: 15.5px; }
}

/* =========================================================
   サービス詳細ブロック（page-service.php・2026-09-04）
   先方依頼書§12「各サービスの具体的な対応範囲・成果物・相談例」を
   1枚あたり3カラムで揃えて出すための部品。
   ★トップの .svc カード（アイコン＋見出し＋2〜3行）とは別物。
     同じ見た目にすると「トップと同じ説明の繰り返し」に見える（先方§11）。
   ========================================================= */
.svcblk {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px 32px 28px;
  box-shadow: var(--shadow-sm);
}
.svcblk + .svcblk { margin-top: 20px; }
/* 上端にシアンの細い線。トップのカードと同じ言語で締める */
.svcblk { position: relative; overflow: hidden; }
.svcblk::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-2));
  opacity: .55;
}
.svcblk__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.svcblk__head h3 {
  font-size: var(--fs-h3-lg);
  line-height: 1.55;
  margin-bottom: 6px;
}
.svcblk__lead {
  font-size: 14.5px;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
/* ★3カラム。minmax(0,1fr) にしないと、長い日本語で列が押し広げられて
   親からはみ出す（この案件でドロップダウンでも踏んでいる）。 */
.svcblk__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.svcblk__label {
  font-family: var(--latin);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--cyan-deep);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--sky-line);
}
.svcblk__list { display: grid; gap: 7px; }
.svcblk__list li {
  position: relative;
  padding-left: 15px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
}
.svcblk__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--steel-2);
}
/* 「お出しするもの」だけ角の付いた印にして、対応範囲と読み分けられるようにする */
.svcblk__list--out li::before {
  border-radius: 1px;
  background: var(--cyan-deep);
  transform: rotate(45deg);
  width: 6px; height: 6px;
  top: .68em;
}
.svcblk__ask {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .svcblk { padding: 24px 20px 22px; }
  .svcblk__grid { grid-template-columns: 1fr; gap: 20px; }
  .svcblk__head { gap: 12px; }
}

/* =========================================================
   品質管理の6段階（page-quality.php・2026-09-04）
   ★トップの #quality（.qc-list）とは別の見せ方にする。
     同じ部品を使うと「トップと同じ説明の繰り返し」に見える（先方§11）。
     トップ＝カードで6つ並べる／ここ＝縦の帯で1段ずつ深く読ませる。
   ========================================================= */
.qcflow { display: grid; gap: 16px; }
.qcstep {
  display: grid;
  grid-template-columns: 54px 44px minmax(0, 1fr);
  align-items: start;
  gap: 0 14px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--cyan-deep);
  border-radius: var(--radius);
  padding: 22px 26px 20px 20px;
  box-shadow: var(--shadow-sm);
}
.qcstep__no {
  font-family: var(--latin);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--sky-line);
  letter-spacing: .02em;
}
.qcstep__ic { color: var(--cyan-deep); }
.qcstep__body h3 { font-size: var(--fs-h3-lg); margin-bottom: 8px; line-height: 1.5; }
.qcstep__body p { font-size: 14.5px; line-height: var(--lh-body); color: var(--ink); }
/* 「満たさなかったときにどうするか」だけ、地を変えて確実に読ませる。
   ★BtoBで効くのは「うまくいく話」より「外れたときにどうなるか」。 */
.qcstep__do {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-2);
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  color: var(--ink-soft) !important;
}
.qcstep__do b { color: var(--navy-800); }
@media (max-width: 760px) {
  /* ★SPは「番号＋アイコン」を1行目、本文を2行目に落とす。
     3カラムのまま狭めると本文の幅が10文字程度まで痩せる
     （.rowlist で同じ罠を踏んでいる）。 */
  .qcstep {
    grid-template-columns: 42px 1fr;
    padding: 18px 16px 16px 14px;
  }
  .qcstep__no { font-size: 21px; }
  .qcstep__ic { grid-column: 2; margin-bottom: 4px; }
  .qcstep__body { grid-column: 1 / -1; margin-top: 6px; }
}

/* =========================================================
   FAQ（/faq/）2026-09-08
   ★トップの .qa（記事下の簡易アコーディオン）とは別物。
     こちらはページ全体がFAQなので、カテゴリの見出しと Q/A のバッジを持たせる。
   ★★開閉のアニメーションは付けない。details のまま素直に開く。
     height を JS で測るやり方は、prefers-reduced-motion と相性が悪く、
     8工程で同じ理由の不具合を出している（main.js の chain のコメント参照）。
   ========================================================= */
.faqs { max-width: 880px; margin-inline: auto; }
.faqs__group + .faqs__group { margin-top: 44px; }
.faqs__ttl {
  /* ★h2 だが、ページ見出し（h1）より小さく見せる。
     カテゴリの区切りであってセクション見出しではないため、
     .sec-head h2 の clamp(28px,4.4vw,44px) は当てない。 */
  font-size: var(--fs-h3-lg);
  color: var(--navy-900);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--sky-line);
}
.faq {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.faq + .faq { margin-top: 10px; }
.faq[open] { border-color: var(--sky-line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 46px 16px 18px;
  position: relative;
  list-style: none;
  /* ★タップ領域を44px以上にする（先方§11）。padding だけで 56px 確保している。 */
  min-height: 56px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__qt {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--navy-900);
}
/* 開閉の記号。＋ → × ではなく、シェブロンの回転にする（工業寄りの見た目に合わせる） */
.faq__q::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--cyan-deep);
  border-bottom: 2px solid var(--cyan-deep);
  transform: translateY(-4px) rotate(45deg);
  transition: transform .25s ease;
}
.faq[open] .faq__q::after { transform: translateY(0) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

.faq__a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* 左右の margin で内側に寄せ、上の点線を質問文の幅に合わせる。
     （padding で寄せると点線がカードの端まで伸びてしまう） */
  margin: 0 18px;
  padding: 16px 0 18px;
  border-top: 1px dashed var(--line);
}
.faq__at p {
  font-size: 14.5px;
  line-height: var(--lh-body);
  color: var(--ink);
}
.faq__at p + p { margin-top: 10px; }
.faq__at b { color: var(--navy-800); }
.faq__at a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Q / A のバッジ */
.faq__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  font-family: var(--latin);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  background: var(--navy-700);
  color: #fff;
  /* 質問文の1行目と中心を合わせる（15.5px × 1.7 ＝ 約26px） */
  margin-top: 0;
}
.faq__mark--a { background: var(--accent); }

@media (max-width: 760px) {
  .faqs__group + .faqs__group { margin-top: 32px; }
  .faq__q { padding: 14px 40px 14px 14px; gap: 10px; }
  .faq__qt { font-size: 15px; }
  .faq__a { margin: 0 14px; padding-bottom: 15px; gap: 10px; }
  .faq__mark { width: 23px; height: 23px; font-size: 12px; }
  .faq__q::after { right: 16px; }
}

/* =====================================================================
   スマホの本文サイズ（2026-09-09 先方§6「本文は原則15〜16px以上」）
   ★★このテーマは PC を基準に 13〜14.5px で組んであり、SPでもそのまま出ていた。
     390px で全15ページを測ったところ、**15px未満の本文が全ページにあった**。
   ★方針＝**本文は15px／注記は14px**。ラベル・バッジ・パンくず・見出しの英字・
     表のラベル列は「本文」ではないので触らない（小さいことに意味がある）。
   ★★総当たりの `p, li { font-size:15px }` にはしない。ラベル類まで巻き込んで
     デザインが崩れるうえ、どこに効いたのかが後から追えなくなる。
   ★ここは lower.css の末尾＝**打ち消しは打ち消される側より後ろ**（08-31 の .nav__foot と同じ罠）。
   ===================================================================== */
@media (max-width: 768px) {
  /* ---- 下層の共通パーツ ---- */
  .lhero__note,
  .lstate + .lstate__sub,
  .pcards .pcard p,
  .rowrow__txt,
  .fstep__body p,
  .duo__col li,
  .klist li,
  .tblock__lead,
  .tblock__body .klist li,
  .mblock__lead,
  .mblock__body .klist li,
  .cprof__txt p,
  .bandnote,
  .nextcard p,
  .deftbl__row dd,
  .legal__lead,
  .legal__sec p,
  .legal__sec li,
  .svcblk__lead,
  .svcblk__list li,
  .svcblk__ask,
  .qcstep__body p,
  .qcstep__do,
  .faq__at p,
  .cform__agree,
  .cform__alert,
  .lread { font-size: 15px; }

  /* ---- 注記は14px（本文より小さいことに役割がある） ---- */
  .qbox__note,
  .feebox__note,
  .legal__sec p.legal__note,
  .cform-sent__note,
  .cform__note { font-size: 14px; }
}

/* =====================================================================
   klist（丸印の箇条書き）の幅と前後の余白（2026-09-09 吉田さん指摘）
   ★★不具合＝**1カラムの klist に max-width も中央寄せも無かった**。
     `.klist--2`（2カラム）にだけ `max-width:940px; margin-inline:auto` が付いていて、
     ベースの `.klist` には付いていない、という書き忘れ。
     結果、1カラムの klist は**コンテナ幅いっぱい（1200px幅で 24〜1176px）に広がり**、
     前後の本文（`.lread` は `--read`＝760px で 220〜980px）と左端が196pxずれていた。
     /reason/ と /industry/ で発生（1カラム指定はこの2ページだけ）。
   ★★もうひとつ＝**klist に上下の余白が無く、前後の段落と行間ゼロで密着**していた。
     「していないこと：〜」が最後の項目にくっついて、箇条書きの続きに見えていた。
   ★`.klist--2` は940pxのまま＝**構造化ブロックは本文より広い**というこのテーマの設計に合わせる。
     ただし余白が入ったことで、幅が違っても「別のかたまり」として読めるようになる。
   ★入れ子の klist（.tblock__body / .mblock__body）は `.container` の直下ではないので影響しない。
   ===================================================================== */
.container > .klist { max-width: var(--read); margin-inline: auto; margin-block: 26px; }
.container > .klist--2 { max-width: 940px; }

@media (max-width: 760px) {
  /* この幅で .klist--2 は1カラムに畳まれる。幅も本文と揃える */
  .container > .klist--2 { max-width: var(--read); }
  .container > .klist { margin-block: 22px; }
}

/* =====================================================================
   下層ページの縦のリズム（2026-09-09 吉田さん指摘「レイアウトがおかしい」）
   ★★不具合＝**`.lread` に margin が1つも無かった**（`max-width` と `margin-inline` だけ）。
     そのため `.sec > .container` の直下では
       rowlist → lread ／ pcards → lread ／ duo → lread ／ lread → lread
     がすべて**すき間0pxで密着**していた。実測23か所・**PCもSPも同じ**。
     ・幅の違うブロック（rowlist 920px / pcards 全幅）と本文（760px）が0pxで接するので、
       本文が前のブロックの一部に見える
     ・連続する段落（「していないこと：〜」など）が改行しただけの1つの塊に見える
   ★見出し（`.sec-head`）の直後だけは既に余白があるので**足さない**。足すと空きすぎる。
   ★ここは lower.css の末尾＝`.lread` の定義より後ろ。打ち消しは必ず後ろに書く。
   ===================================================================== */
.sec > .container > * + .lread,
.sec > .container > .lread + * { margin-top: 28px; }
.sec > .container > .sec-head + .lread { margin-top: 0; }

@media (max-width: 760px) {
  .sec > .container > * + .lread,
  .sec > .container > .lread + * { margin-top: 22px; }
  .sec > .container > .sec-head + .lread { margin-top: 0; }
}

/* 詰まりすぎの是正（2026-09-09 吉田さん指摘「逆につまりすぎてるのもある」）
   ★★revealのアニメーションが動いている最中に測ると全部詰まって見える。
     必ず `.in` を付けて **900ms 待ってから**測ること（30ページ×2幅で実測し直した）。
   ★残った実害はこの3つだけ。rowlist の見出し→本文6pxは、
     見出しと本文が1つのまとまりとして読める距離なので**触らない**（57か所すべて同じ）。 */

/* ① 規約本文の直後に「次に見るページ」が すき間0px で始まっていた（/privacy/・/en/privacy/） */
.container > .legal + .nextset { margin-top: 52px; }

/* ② FAQの回答内の段落が10px。回答が長いと1つの塊に見える */
.faq__at p + p { margin-top: 16px; }

/* =====================================================================
   スマホのフォーム入力欄（2026-09-09・先方§6の全項目照合で検出）
   ★★**iOS Safari は input の font-size が 16px 未満だと、フォーカスした瞬間に
     ページを勝手に拡大する。** 拡大されたままスクロールが崩れ、戻す操作も要る。
     実測＝お問い合わせフォーム15px／ファイル選択13px／**トップの簡易フォーム13px・高さ42px**。
     先方§6「本文は原則15〜16px以上」「タップ領域44×44px以上」にも足りていなかった。
   ★16px は「読みやすさ」ではなく**拡大させないための閾値**なので、15pxではだめ。
   ★PCは現状のまま（拡大の問題が無く、詰めたデザインが崩れる）。
   ===================================================================== */
@media (max-width: 768px) {
  .cform input,
  .cform select,
  .cform textarea,
  .cform--hero input,
  .cform--hero textarea,
  .cform--compact input,
  .cform--compact textarea,
  .lead-form__form input,
  .lead-form__form textarea {
    font-size: 16px;
  }
  .cform input:not([type="checkbox"]):not([type="radio"]),
  .cform select,
  .cform--hero input,
  .cform--compact input,
  .lead-form__form input {
    min-height: 46px;
  }
  /* ★★ヒーロー内のフォームだけ効かなかった。pxy.css の
     `.cform--hero input[type="text"] / [type="email"] / textarea`（詳細度 0,2,1）に
     `.cform--hero input`（0,1,1）では負ける。**属性セレクタまで揃えて書くこと。**
     lower.css は pxy.css より後に読まれるので、同じ詳細度なら後勝ちで効く。 */
  .cform--hero input[type="text"],
  .cform--hero input[type="email"],
  .cform--hero input[type="tel"],
  .cform--hero textarea,
  .cform--compact input,
  .cform--compact select,
  .cform--compact textarea {
    font-size: 16px;
  }

  /* ファイル選択はボタン部分も一緒に上げる。
     ★ここは文字入力しないので iOS の自動拡大は起きない（15pxで可） */
  .cform__file input[type="file"] { font-size: 15px; }
  .cform__file input[type="file"]::file-selector-button { font-size: 15px; min-height: 44px; }
}

/* =====================================================================
   2026-09-17 先方「公開前の最終確認」④
   「カード内文章、グローバルネットワーク表、会社概要、フッター等、一部文字が小さく見える」
   ★方針＝**読ませる文章・表・フッターだけ**を底上げする（吉田さん判断 2026-09-17）。
     装飾の英字ラベル（SERVICES / REASONS / ONE CONTACT 等）と
     CTAボタンの配色（白×オレンジ＝比3.55）は触らない。先方「大きなデザイン変更は不要」。
   ★★SP（768px以下）は 2026-09-09 の §6 対応で 15px／14px に揃えてある。
     ここで幅を指定せずに書くと**その調整を後勝ちで潰す**ので、PC側は
     `min-width: 769px` に閉じ込め、SPは元のしきい値（640 / 760 / 768）に合わせて個別に書く。
   ===================================================================== */

/* ---- PC（769px以上）。SPは触らない ---- */
@media (min-width: 769px) {
  /* トップの簡易フォーム。補足文が10.5px・コントラスト3.04でいちばん小さかった */
  .cform--hero .cform__note { font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
  .cform--hero .cform__agree { font-size: 12.5px; }
  /* 入力欄13.5px。PCでも小さいので15pxへ（SPは16pxで調整ずみ）。
     ★属性セレクタまで揃えて書く。`.cform--hero input`(0,1,1)では
       pxy.css の `.cform--hero input[type="text"]`(0,2,1) に負ける */
  .cform--hero input[type="text"],
  .cform--hero input[type="email"],
  .cform--hero input[type="tel"],
  .cform--hero textarea { font-size: 15px; }

  /* メインビジュアル内「お引き受けする範囲」の締めの一文 */
  .mv__scope-note { font-size: 12.5px; }

  /* 下層ページの「次に見るもの」カードの説明文 */
  .nextcard p,
  .nextcard .more { font-size: 14px; }

  /* グローバルネットワーク（濃紺の面の上）。先方が名指しした「比較表」はここ。
     ★項目名の列は `white-space: nowrap` で幅150px固定なので、上げすぎると列が伸びる。
       13.5pxまでにとどめ、表全体が横に膨らんでいないことを実測で確認した */
  .cmp__table th,
  .cmp__table td { font-size: 14px; }
  .cmp__table tbody th { font-size: 13.5px; }
  .cmp__note { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
  .netmap-legend { font-size: 13.5px; }
  .cmp-hub__list dt { font-size: 13.5px; }

  /* フッター */
  .foot-brand__txt { font-size: 14px; color: rgba(255, 255, 255, .8); }
  .foot-nap dt { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
  .foot-nap dd { font-size: 14px; }
  .foot-col__tgl { font-size: 14px; }
  .foot-note { font-size: 13px; }
  .foot-bottom__cr { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
}

/* ---- SP側の取りこぼし（§6の一覧に入っていなかったもの） ---- */
/* 会社概要の表。SPだけ見出しが12.5px・--ink-mute（コントラスト2.9）に落ちていた */
@media (max-width: 640px) {
  .comp__table dt { font-size: 13.5px; color: var(--ink-soft); }
}
/* グローバルネットワークのSPカード（比較表の代わりに出る方）の項目名 */
@media (max-width: 760px) {
  .cmp-card__list dt { font-size: 13px; }
}
@media (max-width: 768px) {
  .foot-brand__txt { font-size: 14px; color: rgba(255, 255, 255, .8); }
  .foot-nap dt { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
  .foot-col__tgl { font-size: 14px; }
  .foot-note { font-size: 13px; }
  .foot-bottom__cr { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
}

/* ---- 幅によらず直すもの ---- */
/* 「よくある形／Proxy Co. の形」の比較カード。ラベル11.5px・--steel（比3.25）。
   ★左（よくある形）を淡くして右を際立たせる設計は残す。色は1段だけ濃くする */
.scope-card__label { font-size: 12.5px; }
.scope-card--before .scope-card__label,
.scope-card--before h3 { color: var(--ink-soft); }

/* 国カード／日本＝Management Hub のバッジ。日本語が入るので11pxは小さい */
.country .country__role,
.cmp-hub__badge { font-size: 12px; }

/* パンくず。現在地が--ink-mute（比2.9）、区切りが--line（比1.25） */
.breadcrumb__current { color: var(--ink-soft); }
.breadcrumb__sep { color: var(--steel); }

/* お問い合わせページ側の注記も同じ薄さだった（サイズは12.5pxのまま） */
.cform__note { color: var(--ink-soft); }
/* ★ヒーローの注記はSPでも同じ薄さ（比3.04）だったので、色だけは幅によらず1段濃くする。
   `.cform--hero .cform__note`(0,2,0) は上の `.cform__note`(0,1,0) では上書きできない */
.cform--hero .cform__note { color: var(--ink-soft); }

/* 2026-09-17 先方指示③ 簡易フォームの冒頭に置く一文（pxy_contact_form_hero）。
   ★入力欄と同じ幅の中で、プレースホルダーより先に読めるサイズにする。
   ★★`.cform__hint` は**お問い合わせページの「添付できるファイル」の注記で既に使われていた**。
     素の `.cform__hint` に書くと、あちらの余白（margin-top:7px）まで打ち消してしまう。
     必ず `.cform--hero` を前に付けて、簡易フォームの中だけに閉じること。 */
.cform--hero .cform__hint {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
}
@media (max-width: 768px) {
  .cform--hero .cform__hint { font-size: 14px; }
}
/* 添付ファイルの注記（お問い合わせページ）。12px・--ink-mute（白地で比3.04）は
   「何が送れるか」を読ませる文としては薄い。余白と役割はそのままで色だけ濃くする。 */
.cform__field .cform__hint { font-size: 12.5px; color: var(--ink-soft); }

/* =====================================================================
   2026-09-17 先方指示⑤（任意項目）
   「英語版トップページも、日本語版と同様にグローバル製造のイメージが伝わる
     ビジュアルに統一できるか検討を」。
   ★日本語トップのメイン画像（支給）は**日本語コピーが画像に焼き込まれている**ので
     そのままは使えない。→ 同じ画像の右側（地球＋工場＋検品パネル＋トラック＝
     日本語が一切入っていない領域 x:1060-1942）を切り出して `mv-en-fv.jpg/webp` を作り、
     英語FVの背景に敷く。素材が同じなので日本語版と世界観が揃う。
   ★文字の可読性は左から重ねる濃紺のグラデーションで確保する（写真は右側だけに置く）。
   ★.fv は英語トップ専用（en-home.php）。日本語側には影響しない。
   ===================================================================== */
.fv {
  background-color: var(--navy-900);
  background-image:
    linear-gradient(100deg, #0A2240 0%, rgba(10, 34, 64, .95) 30%, rgba(10, 34, 64, .74) 48%, rgba(10, 34, 64, .46) 70%, rgba(10, 34, 64, .40) 100%),
    url(../images/mv-en-fv.jpg);
  background-position: center, right center;
  background-size: cover, auto 100%;
  background-repeat: no-repeat, no-repeat;
}
/* WebP対応ブラウザだけ差し替わる（非対応は上の jpg のまま） */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .fv {
    background-image:
      linear-gradient(100deg, #0A2240 0%, rgba(10, 34, 64, .95) 30%, rgba(10, 34, 64, .74) 48%, rgba(10, 34, 64, .46) 70%, rgba(10, 34, 64, .40) 100%),
      image-set(url("../images/mv-en-fv.webp") type("image/webp"), url("../images/mv-en-fv.jpg") type("image/jpeg"));
  }
}
/* 方眼と光は写真の上に薄く残す（強すぎると写真が濁るので弱める） */
.fv__bg { opacity: .55; }

/* ★SPは縦に積むので、写真を右に置くと本文の裏で見切れる。全面に敷いて濃く落とす。
   ★★SP用の打ち消しは必ず背景を「画像ごと」書き直す。background-position だけ
     上書きすると、PC用の `auto 100%` が残って写真が拡大されたまま貼りつく。 */
@media (max-width: 768px) {
  .fv {
    background-image:
      linear-gradient(180deg, rgba(10, 34, 64, .80) 0%, rgba(10, 34, 64, .86) 46%, rgba(10, 34, 64, .93) 100%),
      url(../images/mv-en-fv.jpg);
    background-position: center, center;
    background-size: cover, cover;
  }
  @supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    .fv {
      background-image:
        linear-gradient(180deg, rgba(10, 34, 64, .80) 0%, rgba(10, 34, 64, .86) 46%, rgba(10, 34, 64, .93) 100%),
        image-set(url("../images/mv-en-fv.webp") type("image/webp"), url("../images/mv-en-fv.jpg") type("image/jpeg"));
    }
  }
}

/* =====================================================================
   2026-09-17：SPの同意チェックボックスが本文より15pxほど下にずれていた（実測で発見）。
   ★原因＝2026-09-09 の「iOSの自動拡大よけ」で入れた min-height:46px の一覧のうち、
     `.cform--hero input` / `.cform--compact input` / `.lead-form__form input` の3つに
     `:not([type="checkbox"])` が付いていなかった。チェックボックスの**箱だけ46px**になり、
     中のチェックマークが箱の中央（＝文字の15px下）に描かれる。
   ★★幅16px・高さ46pxでも「はみ出し」も「横スクロール」も起きないので、
     レイアウト検査では絶対に出ない。要素を実寸で測って初めて分かる型。
   ===================================================================== */
@media (max-width: 768px) {
  .cform--hero .cform__agree input[type="checkbox"],
  .cform--compact .cform__agree input[type="checkbox"],
  .lead-form__form .cform__agree input[type="checkbox"] { min-height: 0; }
}

/* 2026-09-17 ④の取りこぼし（最終実測で拾った2件・SP側）
   ・同意チェックの文＝**必ず読んでもらう文**なのに11.5px（PCは12.5pxに上げた）
   ・「次に見るもの」カードのリンク文言だけ13pxで残っていた（説明文は§6で15pxになっている） */
@media (max-width: 768px) {
  .cform--hero .cform__agree { font-size: 13px; }
  .nextcard .more { font-size: 14px; }
}

/* =====================================================================
   2026-09-17 2周目：★★比較表（.cmp）が、明るいセクションの上で白文字のまま置かれていた。
   先方④「グローバルネットワーク表…読みやすいサイズ・コントラストになっているか」に直結する。

   .cmp は濃紺の面に載る前提のデザイン（本文 rgba(255,255,255,.82) ／ 項目名 --cyan-2）。
   トップと英語トップは `.sec--dark` の中にあるので正しく見えるが、
   ★★この行でかつてコメントを壊した。強調の星2つの直後にスラッシュを書くと
     コメント終了の記号そのものになり、そこでコメントが終わる。すると直後のルールが
     丸ごと消える（メディアクエリの中のルールだけ生き残るので、余計に気づきにくい）。
   対象は country・en/country・oem・en/oem・itaku・logistics の6ページで、白いセクションに置かれており、
   薄いグレーの面に白文字が乗って読みにくかった（実測コントラスト 1.0〜1.9）。
   ★★これは「.cmp 単体」を見ても分からない。**置かれている場所の背景まで遡って**初めて出る。
   → 明るいセクションにある .cmp だけ、自前で濃紺の面を持たせる（トップと同じ見え方に揃う）。
   ===================================================================== */
.sec:not(.sec--dark) .cmp {
  background: linear-gradient(158deg, #0A2240 0%, #123C6B 100%);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow);
}
@media (max-width: 760px) {
  .sec:not(.sec--dark) .cmp { padding: 22px 16px 18px; }
}

/* =====================================================================
   2026-09-17 2周目：全ページ走査で拾った「読ませる文字が小さい・薄い」箇所。
   1周目はトップ・会社概要・英語トップの3ページしか測っていなかった。
   ===================================================================== */
/* サービスページのカード見出し（対応範囲／お出しするもの／よくあるご相談）。
   欧文フォント＋字間広めで11pxは、日本語が入ると小さい */
.svcblk__label { font-size: 12.5px; letter-spacing: .1em; }

/* 各ページの「ご確認いただきたい点」ボックスの補足文。薄すぎた（白地で比2.9） */
.qbox__note { color: var(--ink-soft); }

/* 必須マーク。11pxで薄いと、必須かどうかが読み取れない */
.cform__label em { font-size: 12.5px; }

@media (min-width: 769px) {
  /* お問い合わせページの補足（受付時間・対応国など） */
  .contact-info__note { font-size: 13.5px; color: var(--ink-soft); }
  /* プライバシーポリシーの注記。条文の但し書きなので読ませる必要がある */
  .legal__sec p.legal__note { font-size: 13.5px; color: var(--ink-soft); }
  /* 英語トップFVの注記2つ */
  .fv__note, .fv__panel-note { font-size: 13.5px; }
}
@media (max-width: 768px) {
  /* 日本＝Management Hub の項目名。PCは13.5pxにしたがSPが12.5pxのままだった */
  .cmp-hub__list dt { font-size: 13.5px; }
}

/* 2026-09-17 2周目の残り。色だけの調整はPC/SP共通で当てる
   （サイズはSP側が §6 で調整ずみなので触らない）。 */
.contact-info__note { color: var(--ink-soft); }
.legal__sec p.legal__note { color: var(--ink-soft); }
/* 必須バッジ。白文字×--steel は比3.41しかなかった */
.cform__label em { background: var(--ink-soft); }