/* 「相談案内」ページ(page-consult.php)専用。style.css の後に読み込む。
   クラスはすべて sbcc-consult- で始め、他のページには影響しない。色・フォント・ボタンは、style.css の変数と .button をそのまま使う。
   背景は、ファーストビューが白、窓口の選択が帯(カードは白)、安心セクションが白。読み物の列は下層ページの本文の列(style.css の --content-width)で中央寄せ、カードの並びは --content-wide に広げる(/about/ と同じ枠)。
   カードは、スマホとタブレットで1列、900px 以上で2列。縦書きラベルは使わない */

.sbcc-consult-page {
  /* 本文の段落の最大幅(1行の長さ。16px で約38字) */
  --sbcc-consult-text-max: 38em;

  /* 行頭禁則を厳しくする(小さい「っ」「ゃ」や長音「ー」を行頭に置かない)。子に継承される */
  line-break: strict;
}

/* 文節の切れ目で折り返す(対応ブラウザだけ。Chrome / Edge 119 以降)。子に継承される */
@supports (word-break: auto-phrase) {
  .sbcc-consult-page {
    word-break: auto-phrase;
  }
}

/* 漢字・カタカナ・英数字が続く1つの語(inc/consult.php の sbcc_consult_html() が包む)。語の途中では折り返さない */
.sbcc-consult-word {
  white-space: nowrap;
}

/* セクション(白と帯) */
.sbcc-consult-section {
  scroll-margin-top: var(--anchor-offset);
}

.sbcc-consult-section--alt {
  background: var(--color-bg-alt);
}

/* 幅と列(読み物の列は --content-width で中央、カードの並びは --content-wide)は style.css の共通の枠 */
.sbcc-consult-inner {
  padding: 56px var(--page-x) 64px;
}

/* 縦の並びの間隔(子の間だけに余白を入れる) */
.sbcc-consult-inner > *,
.sbcc-consult-card > *,
.sbcc-consult-point > * {
  margin-block: 0;
}

.sbcc-consult-inner > * + * {
  margin-top: 1.2em;
}

/* 文字の折り返し:本文は pretty(最終行が1〜2字だけにならない)、見出し・ボタンは balance(行の長さをそろえる)。
   1つの塊が行に収まらないときだけ、その中で折り返す(はみ出し防止) */
.sbcc-consult-text,
.sbcc-consult-card__text,
.sbcc-consult-list li,
.sbcc-consult-note {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.sbcc-consult-title,
.sbcc-consult-catch,
.sbcc-consult-h2,
.sbcc-consult-card__label,
.sbcc-consult-card__title,
.sbcc-consult-card__points-title,
.sbcc-consult-point__title,
.sbcc-consult-btn {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 本文の段落 */
.sbcc-consult-text {
  max-width: var(--sbcc-consult-text-max);
  font-size: 16px;
  line-height: 1.9;
}

.sbcc-consult-text strong {
  font-weight: 700;
}

/* ページの見出し(h1)とセクション見出し(h2)。下に金の短い線(/about/ と同じ形) */
.sbcc-consult-title {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.sbcc-consult-h2 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.55;
}

.sbcc-consult-title::after,
.sbcc-consult-h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 20px;
  background: var(--color-gold);
}

.sbcc-consult-h2::after {
  margin-top: 16px;
}

.sbcc-consult-inner > .sbcc-consult-h2 + * {
  margin-top: 32px;
}

/* サブコピー */
.sbcc-consult-inner > .sbcc-consult-title + .sbcc-consult-catch {
  margin-top: 32px;
}

.sbcc-consult-catch {
  max-width: var(--sbcc-consult-text-max);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ファーストビューのボタン。スマホでは縦に並べて横幅いっぱい */
.sbcc-consult-inner > * + .sbcc-consult-actions {
  margin-top: 36px;
}

.sbcc-consult-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* .button は inline-flex だが、その中では text-wrap: balance が効かないため、inline-block にする(高さは .button の min-height で 44px 以上) */
.sbcc-consult-btn {
  display: inline-block;
  width: 100%;
  padding: 15px 20px;
  font-size: 15px;
  text-align: center;
  white-space: normal;
}

/* ボタン直下の小さな注記 */
.sbcc-consult-inner > .sbcc-consult-actions + .sbcc-consult-note {
  margin-top: 14px;
}

.sbcc-consult-note {
  max-width: var(--sbcc-consult-text-max);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* 窓口のカード。白地に枠線、上辺に金の短い線(トップのカードと同じ形)。ボタンはカードの下端にそろえる */
.sbcc-consult-inner > * + .sbcc-consult-cards {
  margin-top: 40px;
}

.sbcc-consult-cards {
  display: grid;
  grid-column: wide;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.sbcc-consult-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 20px 28px;
  border: 1px solid var(--color-line-soft);
  background: var(--color-bg);
}

.sbcc-consult-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  width: 28px;
  height: 2px;
  background: var(--color-gold);
}

.sbcc-consult-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sbcc-consult-card__head > * {
  margin: 0;
}

/* ラベル(見出しの上の小さな金文字) */
.sbcc-consult-card__label {
  color: var(--color-gold-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.sbcc-consult-card__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.sbcc-consult-card > * + * {
  margin-top: 20px;
}

.sbcc-consult-card__text {
  font-size: 16px;
  line-height: 1.9;
}

.sbcc-consult-card__points-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

.sbcc-consult-card > .sbcc-consult-card__points-title + .sbcc-consult-list {
  margin-top: 10px;
}

/* 箇条書き:行頭に紺の細い横線(/support/ の .support-overview__list と同じ形) */
.sbcc-consult-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.85;
}

.sbcc-consult-list li {
  position: relative;
  padding-left: 1.4em;
}

.sbcc-consult-list li::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 0.7em;
  height: 1px;
  background: var(--color-navy);
}

/* カードのボタン:下端にそろえる(カードの高さが違っても、ボタンの位置がそろう) */
.sbcc-consult-card > .sbcc-consult-card__action {
  margin-top: auto;
  padding-top: 28px;
}

/* 安心セクション:3つの小見出し。左に金の縦線(/about/ の小見出しと同じ形) */
.sbcc-consult-points {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sbcc-consult-point__title {
  padding-left: 14px;
  border-left: 2px solid var(--color-gold);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.sbcc-consult-point > * + * {
  margin-top: 1em;
}

/* 768px 以上:ファーストビューのボタンを横に並べる(幅は自動、最小 320px) */
@media (min-width: 768px) {
  .sbcc-consult-inner {
    padding-block: 80px 88px;
  }

  .sbcc-consult-section--intro .sbcc-consult-inner {
    padding-block: 64px 80px;
  }

  .sbcc-consult-text,
  .sbcc-consult-card__text,
  .sbcc-consult-list {
    line-height: 1.95;
  }

  .sbcc-consult-catch {
    font-size: 22px;
  }

  .sbcc-consult-h2 {
    font-size: 28px;
  }

  .sbcc-consult-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .sbcc-consult-actions > .sbcc-consult-btn {
    width: auto;
    min-width: 320px;
    padding-inline: 32px;
  }

  .sbcc-consult-card {
    padding: 40px 36px 36px;
  }

  .sbcc-consult-card::before {
    left: 36px;
  }

  .sbcc-consult-card__title {
    font-size: 22px;
  }

  .sbcc-consult-point__title {
    font-size: 19px;
  }
}

/* 900px 以上:カードを2列に */
@media (min-width: 900px) {
  .sbcc-consult-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}