/* CH-514 トップ（front-page.php）だけの CSS（2026-10-20 の新しい案）。
   ブログ・プロフィール・対応できること・事例のページも、この CSS の上にそれぞれの CSS を足して使う（前の黒の assets/css/fsc-top.css はどのページでも読まない）。 */

:root {
  --fsh-bg: #F3F4F1;
  --fsh-white: #fff;
  --fsh-card: #F8F9F7;
  --fsh-ink: #14202B;
  --fsh-text: #3A4754;
  --fsh-sub: #4A5662;
  --fsh-mute: #5A6672;
  --fsh-line: #DDE1DC;
  --fsh-dash: #C9CFC8;
  --fsh-green: #0B6E5A;
  --fsh-green-dark: #08503F;
  --fsh-green-light: #5FD3B4;
  --fsh-dark-line: #2E3B48;
  --fsh-dark-text: #C3CBD3;
  --fsh-dark-sub: #AEB8C2;
  --fsh-sans: 'Noto Sans JP', system-ui, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --fsh-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fsh-gutter: 24px;
}

body.fsc-top-page {
  margin: 0;
  background: var(--fsh-bg);
  color: var(--fsh-ink);
}

.fsc,
.fsc *,
.fsc *::before,
.fsc *::after {
  box-sizing: border-box;
}

.fsc {
  font-family: var(--fsh-sans);
  color: var(--fsh-ink);
  background: var(--fsh-bg);
  line-height: 1.8;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* リセットは :where で詳しさを 0 にする（個別のクラスの余白が効くように） */
:where(.fsc) :where(p, h1, h2, h3, figure, blockquote, dl, dd, ol) {
  margin: 0;
}

.fsc a {
  color: var(--fsh-green);
}

.fsc a:hover {
  color: var(--fsh-green-dark);
}

.fsc a:focus-visible {
  outline: 3px solid var(--fsh-green);
  outline-offset: 3px;
}

.fsc img {
  max-width: 100%;
  height: auto;
}

.fsc-mono {
  font-family: var(--fsh-mono);
}

.fsc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--fsh-gutter);
  padding-right: var(--fsh-gutter);
}

.fsc-em {
  color: var(--fsh-green);
}

/* ---- ヘッダー（HTML は template-parts/fsc-header.php） ---- */
.fsc-header__inner {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fsc .fsc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--fsh-ink);
  text-decoration: none;
}

.fsc-logo__mark {
  flex: none;
}

.fsc-logo__text {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.fsc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  font-size: 15px;
}

.fsc .fsc-nav a {
  color: var(--fsh-ink);
  text-decoration: none;
  padding: 10px 0;
}

.fsc .fsc-nav a:hover {
  color: var(--fsh-green);
}

.fsc .fsc-nav .fsc-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--fsh-ink);
  color: #fff;
  font-weight: 700;
}

.fsc .fsc-nav .fsc-nav__cta:hover {
  color: #fff;
  background: var(--fsh-green);
}

/* ---- ボタン ---- */
.fsc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fsc .fsc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  border: 2px solid var(--fsh-green);
  background: var(--fsh-green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}

.fsc .fsc-btn:hover {
  background: var(--fsh-green-dark);
  border-color: var(--fsh-green-dark);
  color: #fff;
}

.fsc .fsc-btn--lg {
  font-size: 17px;
  padding: 0 30px;
}

.fsc .fsc-btn--ghost {
  background: transparent;
  border-color: var(--fsh-ink);
  color: var(--fsh-ink);
}

.fsc .fsc-btn--ghost:hover {
  background: var(--fsh-ink);
  border-color: var(--fsh-ink);
  color: #fff;
}

/* ---- 段の共通 ---- */
.fsc-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

.fsc-section--white {
  background: var(--fsh-white);
  border-top: 1px solid var(--fsh-line);
  border-bottom: 1px solid var(--fsh-line);
}

.fsc-section--dark {
  background: var(--fsh-ink);
  color: #fff;
}

.fsc-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.fsc-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.fsc-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--fsh-green);
}

.fsc-section--dark .fsc-eyebrow {
  color: var(--fsh-green-light);
}

.fsc-h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.4;
  font-weight: 900;
}

/* 見出しは語の途中で折り返さない（1〜2 字だけ次の行に落ちないように）。区切りは HTML の <wbr>。
   入りきらない長い語だけは overflow-wrap で折る */
.fsc-hero__eyebrow,
.fsc-hero__title,
.fsc-h2,
.fsc-trouble__title,
.fsc-work__name,
.fsc-tools__title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fsc-desc {
  font-size: 16px;
  color: var(--fsh-text);
}

.fsc-section--dark .fsc-desc {
  color: var(--fsh-dark-text);
}

.fsc-more {
  font-size: 14px;
  color: var(--fsh-mute);
}

.fsc-more a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 700;
}

/* トップの料金の近くのインボイスの 1 行（CH-514 #7871） */
.fsc .fsc-more--invoice {
  margin-top: -8px;
  font-size: 13px;
}

/* トップの料金の下の注意書き（金額は目安・税込・インボイス）。一応書いておく内容なので、すき間を詰めて小さく控えめに（CH-834 の 11） */
.fsc .fsc-notes {
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fsc .fsc-notes .fsc-more {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.fsc .fsc-notes .fsc-more a {
  padding: 2px 0;
}

/* ---- 最初の画面 ---- */
.fsc-hero__inner {
  padding-top: 56px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 48px;
  align-items: center;
}

.fsc-hero__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.fsc-hero__eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: var(--fsh-green);
  letter-spacing: 0.08em;
}

.fsc-hero__title {
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.fsc-hero__lead {
  font-size: 18px;
  color: var(--fsh-text);
  max-width: 34em;
}

.fsc-hero__note {
  font-size: 14px;
  color: var(--fsh-mute);
}

/* 右の濃い色の枠（ランサーズでの評価と経験） */
.fsc-proof {
  background: var(--fsh-ink);
  color: #fff;
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.fsc-proof__title {
  font-size: 14px;
  color: var(--fsh-dark-sub);
  letter-spacing: 0.06em;
}

.fsc-proof__nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* dt（名前）を先に書き、見た目は数字を上にする */
.fsc-proof__num {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.fsc-proof__value {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600;
  line-height: 1;
}

.fsc-proof__value.is-accent {
  color: var(--fsh-green-light);
}

.fsc-proof__label {
  font-size: 14px;
  color: #D4DAE0;
}

.fsc-proof__line {
  height: 1px;
  background: var(--fsh-dark-line);
}

.fsc-proof__exp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  font-size: 15px;
}

.fsc-proof__exp > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.fsc-proof__exp-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}

.fsc-proof__exp-label {
  color: var(--fsh-dark-sub);
}

.fsc-proof__link {
  font-size: 14px;
}

.fsc .fsc-proof__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fsh-green-light);
  text-decoration: none;
}

.fsc .fsc-proof__link a:hover {
  color: #fff;
}

/* ---- このサイトの速さ（template-parts/fsc-psi.php・CH-793・最初の画面のすぐ下の帯） ----
   見た目は PageSpeed Insights の結果の画面に寄せる（白い地・大きな丸いゲージ・真ん中の数字・色分け）。色は PSI と同じ値 */
.fsc-psi-band {
  --fsh-psi-good: #0C6;
  --fsh-psi-good-text: #008800;
  --fsh-psi-good-bg: rgba(0, 204, 102, 0.1);
  --fsh-psi-average: #FFA400;
  --fsh-psi-average-text: #C33300;
  --fsh-psi-average-bg: rgba(255, 164, 0, 0.1);
  --fsh-psi-poor: #FF4E42;
  --fsh-psi-poor-text: #CC0000;
  --fsh-psi-poor-bg: rgba(255, 78, 66, 0.1);
  --fsh-psi-font: Roboto, 'Helvetica Neue', Arial, var(--fsh-sans);
  padding-bottom: 72px;
}

.fsc-psi {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--fsh-line);
  border-radius: 24px;
  background: var(--fsh-white);
}

.fsc-psi__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.fsc-psi__heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fsc .fsc-psi__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.4;
}

.fsc-psi__lead {
  font-size: 15px;
  color: var(--fsh-text);
}

/* スマホ／PC のタブ（PSI と同じく下線で今の方を示す） */
.fsc-psi__tabs {
  display: flex;
  border-bottom: 1px solid var(--fsh-line);
}

.fsc .fsc-psi__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--fsh-mute);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.fsc .fsc-psi__tab[aria-selected="true"] {
  color: var(--fsh-green);
  border-bottom-color: var(--fsh-green);
}

.fsc .fsc-psi__tab:hover {
  color: var(--fsh-ink);
}

.fsc .fsc-psi__tab:focus-visible {
  outline: 3px solid var(--fsh-green);
  outline-offset: 2px;
}

.fsc .fsc-psi__gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fsc-psi__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}

.fsc-psi__ring {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
}

.fsc-psi__fill {
  fill: var(--fsh-psi-average-bg);
}

.fsc-psi__bar {
  stroke: var(--fsh-psi-average);
}

.fsc-psi__num {
  font-family: var(--fsh-psi-font);
  font-size: 40px;
  font-weight: 400;
  fill: var(--fsh-psi-average-text);
}

.fsc-psi__gauge.is-good .fsc-psi__fill { fill: var(--fsh-psi-good-bg); }
.fsc-psi__gauge.is-good .fsc-psi__bar { stroke: var(--fsh-psi-good); }
.fsc-psi__gauge.is-good .fsc-psi__num { fill: var(--fsh-psi-good-text); }
.fsc-psi__gauge.is-poor .fsc-psi__fill { fill: var(--fsh-psi-poor-bg); }
.fsc-psi__gauge.is-poor .fsc-psi__bar { stroke: var(--fsh-psi-poor); }
.fsc-psi__gauge.is-poor .fsc-psi__num { fill: var(--fsh-psi-poor-text); }

.fsc-psi__label {
  font-family: var(--fsh-psi-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--fsh-ink);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.fsc-psi__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--fsh-line);
  font-size: 13px;
  color: var(--fsh-mute);
}

.fsc .fsc-psi__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* 色の意味（PSI の下の印と同じ形：赤の三角・橙の四角・緑の丸） */
.fsc .fsc-psi__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--fsh-psi-font);
  font-size: 13px;
  color: var(--fsh-mute);
}

.fsc-psi__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fsc-psi__legend li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
}

.fsc-psi__legend .is-poor::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--fsh-psi-poor);
}

.fsc-psi__legend .is-average::before {
  background: var(--fsh-psi-average);
}

.fsc-psi__legend .is-good::before {
  border-radius: 50%;
  background: var(--fsh-psi-good);
}

@media (max-width: 720px) {
  .fsc .fsc-psi__gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .fsc-psi__ring {
    max-width: 104px;
  }
}

@media (max-width: 600px) {
  .fsc-psi-band {
    padding-bottom: 56px;
  }

  .fsc-psi__tabs {
    width: 100%;
  }

  .fsc .fsc-psi__tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 8px;
  }

  .fsc-psi__label {
    font-size: 14px;
  }
}

/* ---- 01 困りごとから選ぶ ---- */
.fsc-troubles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}

.fsc .fsc-trouble {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1.5px solid var(--fsh-line);
  border-radius: 18px;
  background: var(--fsh-card);
  text-decoration: none;
  color: var(--fsh-ink);
  min-height: 220px;
  transition: border-color 0.15s;
}

.fsc .fsc-trouble:hover {
  color: var(--fsh-ink);
  border-color: var(--fsh-green);
}

.fsc-trouble .fsc-icon {
  color: var(--fsh-green);
  flex: none;
}

.fsc-trouble__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.fsc-trouble__desc {
  font-size: 15px;
  color: var(--fsh-sub);
  flex-grow: 1;
}

.fsc-trouble__foot {
  display: flex;
  flex-wrap: nowrap; /* 札が長いとき（ドメイン・メール・サーバーの引っ越し など）も、金額は右に残して札のほうを折り返す（CH-834） */
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 14px;
  color: var(--fsh-mute);
  border-top: 1px dashed var(--fsh-dash);
  padding-top: 12px;
}

/* 札は「|」（<wbr>）の所でだけ折り返す（言葉の途中で切らない・CH-834） */
.fsc-trouble__label {
  min-width: 0;
  word-break: keep-all;
}

.fsc-trouble__price {
  font-size: 20px;
  font-weight: 600;
  color: var(--fsh-ink);
  white-space: nowrap;
}

/* どれにも当てはまらない・AI の帯 */
.fsc .fsc-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 28px;
  border-radius: 18px;
  background: var(--fsh-ink);
  color: #fff;
  text-decoration: none;
}

.fsc .fsc-band:hover {
  color: #fff;
  background: #1D2D3B;
}

.fsc-band__text {
  font-size: 17px;
}

.fsc-band__text strong {
  font-weight: 700;
}

.fsc-band__go {
  font-weight: 700;
  color: var(--fsh-green-light);
}

/* どれにも当てはまらないときの見出し・説明・相談の例（CH-834 の 10）。例は小さめの字・控えめの色で、画面をごちゃごちゃさせない */
.fsc-band__text {
  flex: 1 1 520px;
  line-height: 1.8;
}

.fsc-band__text strong {
  display: block;
  margin-bottom: 4px;
  word-break: keep-all; /* 「・」のあと（<wbr>）でだけ折り返す */
}

.fsc-band__ex {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
}

.fsc-band__ex-title {
  flex: 1 1 100%;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- 02 作ったもの ---- */
.fsc-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 24px;
}

.fsc-work {
  display: flex;
  flex-direction: column;
  background: var(--fsh-white);
  border: 1px solid var(--fsh-line);
  border-radius: 20px;
  overflow: hidden;
}

.fsc .fsc-work__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #E4E8E2;
  border-bottom: 1px solid var(--fsh-line);
}

.fsc-work__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.fsc-work__tag {
  font-size: 13px;
  color: var(--fsh-green);
  font-weight: 700;
}

.fsc-work__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.fsc-work__desc {
  font-size: 15px;
  color: var(--fsh-sub);
}

.fsc-work__note {
  font-size: 13px;
  color: var(--fsh-mute);
  padding: 6px 12px;
  border-left: 3px solid var(--fsh-green);
  background: var(--fsh-card);
}

.fsc-work__link {
  margin-top: auto;
  font-size: 15px;
}

.fsc .fsc-work__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.fsc-tools {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fsc-tools__title {
  font-size: 18px;
  font-weight: 700;
}

.fsc-tools__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.fsc .fsc-tool {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid var(--fsh-line);
  border-radius: 14px;
  background: var(--fsh-white);
  color: var(--fsh-ink);
  text-decoration: none;
}

.fsc .fsc-tool:hover {
  color: var(--fsh-ink);
  border-color: var(--fsh-green);
}

.fsc-tool__name {
  font-weight: 700;
}

.fsc-tool__desc {
  font-size: 14px;
  color: var(--fsh-mute);
}

/* ---- お客さまの声（同意のあるものだけ・今は出ない） ---- */
.fsc-voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}

.fsc-voice {
  padding: 28px;
  border: 1px solid var(--fsh-line);
  border-radius: 18px;
  background: var(--fsh-card);
}

.fsc-voice__text {
  font-size: 15px;
  color: var(--fsh-text);
}

.fsc-voice__label {
  margin-top: 12px;
  font-size: 13px;
  color: var(--fsh-mute);
}

/* ---- 03 依頼の流れ ---- */
.fsc-flow {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.fsc-flow__step {
  padding: 28px;
  border: 1px solid var(--fsh-dark-line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fsc-flow__no {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fsh-green-light);
}

.fsc-flow__title {
  font-size: 18px;
  font-weight: 700;
}

.fsc-flow__desc {
  font-size: 15px;
  color: var(--fsh-dark-text);
}

/* 1〜2（費用がかからない所）は明るい地の枠（中の段も明るく）、3 から先とは点線と矢印で分ける（CH-834 の 18・案 B） */
.fsc-flowx {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fsc-flowx__free {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: var(--fsh-bg);
  color: var(--fsh-ink);
}

.fsc-flowx__free .fsc-flow__step {
  background: var(--fsh-white);
  border-color: var(--fsh-line);
}

.fsc-flowx__free .fsc-flow__no {
  color: var(--fsh-green);
}

.fsc-flowx__free .fsc-flow__desc {
  color: var(--fsh-text);
}

.fsc-flowx__note {
  margin: 0;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fsh-green-dark);
}

.fsc-flowx__sep {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--fsh-green-light);
}

.fsc-flowx__sep::before,
.fsc-flowx__sep::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--fsh-dark-line);
}

/* ---- 04 相談する ---- */
.fsc-contact {
  padding-top: 96px;
  padding-bottom: 96px;
}

.fsc-contact__box {
  background: var(--fsh-white);
  border: 1px solid var(--fsh-line);
  border-radius: 28px;
  padding: clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px;
  align-items: center;
}

.fsc-contact__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.fsc-contact__title {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.35;
}

.fsc-contact__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fsc .fsc-btn--mail {
  min-height: 64px;
  padding: 10px 28px;
  font-size: 18px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.fsc-btn--mail .fsc-icon {
  flex: none;
}

.fsc-contact__note {
  font-size: 13px;
  color: var(--fsh-mute);
  text-align: center;
}

/* ---- フッター（HTML は template-parts/fsc-footer.php） ---- */
.fsc-footer {
  border-top: 1px solid var(--fsh-line);
}

.fsc-footer__inner {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  color: var(--fsh-mute);
}

.fsc-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.fsc .fsc-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fsh-ink);
  text-decoration: none;
}

.fsc .fsc-footer__nav a:hover {
  color: var(--fsh-green);
}

.fsc-footer__about {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.fsc-footer__copy {
  font-size: 12px;
}

/* ---- スマホ ---- */
@media (max-width: 600px) {
  .fsc {
    --fsh-gutter: 16px;
  }

  .fsc-header__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 4px 16px;
  }

  .fsc-nav {
    gap: 0 16px;
    font-size: 14px;
  }

  .fsc .fsc-nav .fsc-nav__cta {
    padding: 0 16px;
  }

  .fsc-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .fsc-stack {
    gap: 32px;
  }

  .fsc-hero__inner {
    padding-top: 32px;
    padding-bottom: 56px;
    gap: 36px;
  }

  .fsc-hero__lead {
    font-size: 16px;
  }

  .fsc-actions .fsc-btn {
    flex: 1 1 100%;
  }

  .fsc-proof {
    padding: 24px;
    border-radius: 20px;
    gap: 22px;
  }

  .fsc-proof__label {
    font-size: 13px;
  }

  .fsc-proof__exp-value {
    font-size: 19px;
  }

  .fsc .fsc-trouble,
  .fsc-work__body,
  .fsc-flow__step,
  .fsc-voice {
    padding: 22px;
  }

  .fsc .fsc-band {
    padding: 20px 22px;
  }

  .fsc-band__text {
    font-size: 16px;
  }

  .fsc-contact {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .fsc .fsc-btn--mail {
    font-size: 16px;
    padding: 10px 20px;
  }
}

/* CH-514 ヘッダー：PC は 1 行、スマホは 1 段目にロゴと「相談する」・2 段目にメニュー（template-parts/fsc-site-header.php） */
.fsc .fsc-nav__links {
  display: contents;
}

@media (max-width: 600px) {
  .fsc .fsc-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
  }

  .fsc .fsc-nav {
    display: contents;
  }

  .fsc .fsc-nav .fsc-nav__cta {
    grid-column: 2;
    grid-row: 1;
    min-height: 40px;
  }

  .fsc .fsc-nav__links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    font-size: 14px;
  }
}

/* ---- 「メールでも受け付けています」の小さい 1 行（inc/fsc-contact.php の fsc_contact_mail_note・CH-792） ---- */
.fsc .fsc-mail-note {
  font-size: 13px;
  color: var(--fsh-mute);
}

.fsc .fsc-mail-note a {
  overflow-wrap: anywhere;
}

/* ---- PC だけ 1 文ずつ改行（下層ページの見出しの下の文・fsc_pc_lines() の <br class="fsc-pc-br">・CH-837）。スマホは自然に折り返す ---- */
@media (max-width: 600px) {
  .fsc .fsc-pc-br {
    display: none;
  }
}