/* 「サポートサービス」総合案内ページ(page-support.php)専用。style.css の後に読み込む。
   クラスはすべて .support-overview で始め、他のページには影響しない。色・フォント・ボタン・テキストリンクは、style.css の変数と
   .button / .text-link をそのまま使う。カードの見た目(線・余白・上辺の金色の短い線)は、継続ページの .cs-card と同じ値。
   背景はすべて白。セクションの間は、コンテナ内に収めた薄い線で区切る */

.support-overview {
  /* 本文の段落・キャッチ・注記・箇条書きの最大幅(すべて同じ値)。16px の文字で1行40字。
     36〜42字の範囲で測り、末尾の短い行が最も少なかった値(760px では1行47字で、末尾の短い行が多かった) */
  --so-text-max: 640px;

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

/* 文節の切れ目で折り返す(対応ブラウザだけ。Chrome / Edge 119 以降)。子に継承される。効かないブラウザでは、これまでどおり1文字単位で折り返す */
@supports (word-break: auto-phrase) {
  .support-overview {
    word-break: auto-phrase;
  }
}

/* 漢字・カタカナ・英数字が続く1つの語(inc/support-overview.php の sbcc_support_html() が包む)。語の途中では折り返さない。
   auto-phrase だけでは「サポート方｜法」「一｜度きり」のように語の途中で切れることがあるため。最長でも約11字で、幅375pxの1行に収まる */
.support-overview__word {
  white-space: nowrap;
}

/* セクション全体の枠。幅と列(本文の列は --content-width で中央、カードの並びは --content-wide)は style.css の共通の枠。ブロックの間隔は row-gap で取る */
.support-overview__section {
  scroll-margin-top: var(--anchor-offset);
}

.support-overview__inner {
  position: relative;
  row-gap: 20px;
  padding: 56px var(--page-x);
}

.support-overview__section + .support-overview__section .support-overview__inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--page-x);
  left: var(--page-x);
  height: 1px;
  background: var(--color-line-soft);
}

/* 行の長さをそろえる(対応ブラウザだけ)。見出し・キャッチ・本文・注記・箇条書き・ボタンの文字のすべてに balance を使う。
   本文に pretty を使うと、末尾の行を長くするために前の行の途中(「誰に｜相談すれば」など)で折り返し、1行目の右側に余白が残ったため。
   6行を超える段落は、ブラウザが通常の折り返しにする。1つの塊が行に収まらないときだけ、その中で折り返す(はみ出し防止) */
.support-overview__title,
.support-overview__h2,
.support-overview__h3,
.support-overview__h4,
.support-overview__catch,
.support-overview__text,
.support-overview__note,
.support-overview__list li,
.support-overview__btn {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 見出し */
.support-overview__title {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.support-overview__title::after,
.support-overview__h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 16px;
  background: var(--color-gold);
}

.support-overview__title::after {
  margin-top: 20px;
}

.support-overview__h2 {
  margin: 0 0 4px;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.support-overview__h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.support-overview__h4 {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

/* 太字のキャッチ・強調の文 */
.support-overview__catch {
  max-width: var(--so-text-max);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
}

/* キャッチ・強調の文は、1文ずつ新しい行から始める(span は inc/support-overview.php の sbcc_support_catch() が出力する) */
.support-overview__sentence {
  display: block;
}

.support-overview__catch--lead {
  font-size: 17px;
}

/* 本文の段落 */
.support-overview__text {
  max-width: var(--so-text-max);
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}

/* 注記(「※」で始まる文など) */
.support-overview__note {
  max-width: var(--so-text-max);
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.85;
}

/* 箇条書き:行頭に細い横線を置く(継続ページの .cs-list と同じ形) */
.support-overview__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--so-text-max);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.85;
}

.support-overview__list li {
  position: relative;
  padding-left: 1.4em;
}

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

/* 並び(6分類、単発・継続のカード、選び方の例、詳細・相談の2列)。スマホとタブレットは1列、900px 以上で2列(/consult/ と同じ)。幅は本文の列ではなく --content-wide(grid-column: wide) */
.support-overview__grid {
  display: grid;
  grid-column: wide;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

/* カード・枠。2つ並ぶものは、同じ見た目・同じ高さ(どちらかを目立たせない) */
.support-overview__category,
.support-overview__card,
.support-overview__panel,
.support-overview__block--boxed {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 18px 22px;
  border: 1px solid var(--color-line-soft);
  background: var(--color-bg);
}

.support-overview__category::before,
.support-overview__card::before,
.support-overview__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 28px;
  height: 2px;
  background: var(--color-gold);
}

.support-overview__category {
  gap: 6px;
}

/* 見出し+本文のまとまり(カードに入れないもの) */
.support-overview__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.support-overview__block--boxed {
  margin-top: 8px;
}

/* ボタン(.button はアウトライン。文字の折り返しと幅だけ整える)。カードの中では一番下に置く */
.support-overview__action {
  margin: auto 0 0;
  padding-top: 8px;
}

/* .button は inline-flex だが、その中では text-wrap: balance が効かず「詳しく｜見る」のように2字だけ次の行に落ちるため、inline-block にする
   (文字は text-align で中央。高さは上下の余白と行の高さで 44px 以上) */
.support-overview__btn {
  display: inline-block;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  text-align: center;
  white-space: normal;
}

/* 文中のテキストリンク(.text-link は 14px。周りの文字と同じ大きさにする) */
.support-overview__link {
  font-size: inherit;
}

.support-overview__link:hover {
  text-decoration-color: var(--color-navy);
}

/* 768px 以上:文字・余白を広げる(2列にするのは 900px 以上) */
@media (min-width: 768px) {
  .support-overview__inner {
    row-gap: 24px;
    padding-block: 72px;
  }

  .support-overview__section:first-child .support-overview__inner {
    padding-block: 64px 72px;
  }

  .support-overview__h2 {
    font-size: 28px;
  }

  .support-overview__h3 {
    font-size: 18px;
  }

  .support-overview__catch--lead {
    font-size: 19px;
  }

  .support-overview__text,
  .support-overview__list {
    font-size: 16px;
    line-height: 1.95;
  }

  .support-overview__category,
  .support-overview__card,
  .support-overview__panel,
  .support-overview__block--boxed {
    padding: 28px 24px 24px;
  }

  .support-overview__category::before,
  .support-overview__card::before,
  .support-overview__panel::before {
    left: 24px;
  }

  /* カードの中の文字は、2列の幅に合わせて少し小さく */
  .support-overview__grid .support-overview__text,
  .support-overview__grid .support-overview__list {
    font-size: 15px;
    line-height: 1.9;
  }

  .support-overview__btn {
    width: auto;
    min-width: min(100%, 320px);
    padding-inline: 32px;
  }
}

/* 900px 以上:2列(768〜899px では、2列にするとカード1つが 400px 未満になり、文字とボタンが窮屈なため) */
@media (min-width: 900px) {
  .support-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 1024px 以上:カードの中の余白を広げる */
@media (min-width: 1024px) {
  .support-overview__card,
  .support-overview__panel,
  .support-overview__block--boxed {
    padding: 32px 32px 28px;
  }

  .support-overview__card::before,
  .support-overview__panel::before {
    left: 32px;
  }
}