/* =========================================================
   修正一覧（2026-10-24）ご相談と料金（39〜49番・別紙1・別紙2）の修正案
   ========================================================= */

/* ---------- 39番：並べ替え ----------
   ヒーローのすぐ下の面が「こんなご相談」から「無料の初回相談」に替わるので、
   目次カードを受ける上の逃げ（450px）と、狭い幅・スマホでの扱いを、いまの「こんなご相談」の値のまま移す */
.sec--first { padding-top: 450px; }
.sec--examples { padding-top: 120px; }

@media (max-width: 1200px) and (min-width: 751px) {
  .sec--first { padding: 0 0 120px; }
  /* 目次カードの下から次の部品までは、いまと同じ 50px（いまは「初回相談は無料です」の枠が続いていた） */
  .sec--first .sec-head { margin-top: 0; }
  .sec--examples { padding: 120px 0; }
  .sec--examples .sec-head { margin-top: 0; }
}

/* ---------- 40番：別紙1 ----------
   5つの項目はどれも1文なので、いまの5つ目（1行だけの項目）と同じ並べ方にそろえる */
.firsts--one li { align-items: center; padding: 12px 0 9px; }

/* 別紙1の表（5行）。項目名が長くなる（相談日・受付時間／ご持参いただくもの）ので、
   右の細い列をやめ、文案の順（項目 → 締めの一文 → 表）に全幅で置く */
/* dl にブラウザが付ける上下の余白を消し、部品どうしの間をほかと同じ 80px に */
.facts--wide { margin: 0; }
.facts--wide > div { gap: 24px; }
.facts--wide dt { width: 200px; }

/* ---------- 44番：別紙2 ---------- */
.lv-lead { margin-bottom: 36px; }
.lv-lead p { font-size: 20px; line-height: 36px; color: #fff; }

.level__desc {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 20px;
  line-height: 32px;
  color: var(--ink);
}

.lv-notes { display: flex; flex-direction: column; gap: 12px; margin-top: 60px; }
.lv-notes li {
  position: relative;
  padding-left: 24px;
  font-size: 20px;
  line-height: 32px;
  color: #fff;
}
.lv-notes li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: var(--gold);
}

/* ---------- 46番：お支払いに2行 ---------- */
.paybox__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border-top: 1px solid var(--line-soft);
}
.paybox__notes li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 28px;
  color: var(--ink);
}
.paybox__notes li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

@media (max-width: 750px) {
  .sec--first { padding: 0 0 10rem; }
  .sec--first .sec-head { margin-top: 0; }   /* いまと同じ 40px（4rem 相当） */
  .sec--examples { padding: 10rem 0; }

  .firsts--one li { align-items: flex-start; padding: 3rem 0; }

  .facts--wide > div { display: block; }
  .facts--wide dt { width: auto; }
  .facts--wide dd { margin-top: .4rem; }

  .lv-lead { margin-bottom: 4rem; }
  .lv-lead p { font-size: 2.6rem; line-height: 1.85; }

  .level__desc { margin-top: 1.6rem; padding-top: 1.6rem; font-size: 2.5rem; line-height: 1.75; }

  .lv-notes { gap: 1.6rem; margin-top: 6rem; }
  .lv-notes li { padding-left: 2.8rem; font-size: 2.5rem; line-height: 1.8; }
  .lv-notes li::before { top: 1.8rem; left: .4rem; width: 1rem; height: 1rem; }

  .paybox__notes { gap: 1rem; padding: 2.4rem 3rem; }
  .paybox__notes li { padding-left: 2.4rem; font-size: 2.3rem; line-height: 1.7; }
  .paybox__notes li::before { top: 1.6rem; left: .2rem; width: .8rem; height: .8rem; }
}

/* 751〜1200px の幅だけで効く改行（この幅で言葉の途中で切れる所に入れている） */
.tb-only { display: none; }
@media (max-width: 1200px) and (min-width: 751px) {
  .tb-only { display: inline; }
}

/* 1200px 以下（狭いPC・タブレット・スマホ）で効く改行 */
.ns-only { display: none; }
@media (max-width: 1200px) {
  .ns-only { display: inline; }
}

/* ---------- 39番の並べ替えで、白い面（ご相談の流れ → こんなご相談）が2つ続いた ----------
   面と面の区切りは背景の色の切り替わりで見せているので、白が続くと間の 240px がただの空きに見える。
   余白は変えずに、「こんなご相談」の背景を1つ目の面と同じ紙の色にして、紙 → 白 → 紙 → 濃紺 … と交互にする。
   中の「ここに当てはまらない…」の枠は紙の色なので、背景に溶けないよう白に */
.sec--examples { background: var(--paper); }
.sec--examples .say { background: #fff; }

/* 目次の「無料の初回相／談で、」と言葉の途中で折れないよう、印（wbr）の所でだけ折る（1行にすると、となりの欄にはみ出すため） */
.pn__what.kp { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 目次カード → 「01」の見出しの間 ----------
   41番で上の「初回相談は無料です」の枠を消したので、カードのすぐ下に見出しが来て、751〜1200px 50px／スマホ 40px と詰まっていた。
   ほかのページと同じ、751〜1200px 170px、スマホ 140px（14rem）にそろえる */
@media (max-width: 1200px) and (min-width: 751px) {
  .sec--first .pn + .sec-head { margin-top: 120px; }
}
@media (max-width: 750px) {
  .sec--first .pn + .sec-head { margin-top: 10rem; }
}