@charset "UTF-8";
/* =============================================================
   layout.css — 汎用レイアウト（グリッド・帯・余白ユーティリティ）
   ページ固有の見た目は持たない。部品（fs-* / kpage-*）を並べるための箱だけ。
   ============================================================= */

/* ---------- セクション帯（背景の切り替え） ---------- */
.fs-band { padding: 60px 0; }
.fs-band--soft { background: var(--fs-primary-soft); }
.fs-band--accent { background: var(--fs-accent-soft); }
.fs-band--dark { background: var(--fs-primary); color: var(--fs-white); }
.fs-band--dark h2, .fs-band--dark h3 { color: var(--fs-white); }

/* ---------- グリッド ---------- */
.fs-grid { display: grid; gap: 28px; }
.fs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fs-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fs-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.fs-row--between { justify-content: space-between; }
.fs-row--center { justify-content: center; }

/* ---------- 図版 ---------- */
.fs-fig { margin: 20px 0; }
.fs-fig img { display: block; width: 100%; height: auto; }
/* clean-b が書き出す表示幅（本番のCSSから採った % 値）を使う。--fs-fgw が無い画像は原寸どまりにする */
.fs-fig--box { width: var(--fs-fgw, 100%); max-width: 100%; margin-inline: auto; }
.fs-fig:not(.fs-fig--box) img { width: auto; max-width: 100%; }
@media screen and (max-width: 768px) {
  .fs-fig--box { width: var(--fs-fgw-sp, var(--fs-fgw, 100%)); }
}
.fs-fig figcaption { font-size: 13px; color: var(--fs-muted); text-align: center; margin-top: 8px; }

/* ---------- 余白 ---------- */
.mt-0 { margin-top: 0 !important; }  .mt-20 { margin-top: 20px !important; }  .mt-40 { margin-top: 40px !important; }  .mt-60 { margin-top: 60px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-20 { margin-bottom: 20px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-60 { margin-bottom: 60px !important; }

/* ---------- 表示切替 ---------- */
.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 900px) {
  .fs-grid--3, .fs-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .fs-band { padding: 40px 0; }
  .fs-grid { gap: 18px; }
  .fs-grid--2, .fs-grid--3, .fs-grid--4 { grid-template-columns: 1fr; }
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* ---------- 区切り線（clean-b が出力する <hr class="fs-hr">）----------
   --fs-hr-w 幅 ／ --fs-hr-h 太さ ／ --fs-hr-c 色（本番のコンパイル済みCSSから移植される） */
.fs-hr {
  width: var(--fs-hr-w, 100%); height: 0; margin: 14px auto;
  border: 0; border-top: var(--fs-hr-h, 1px) solid var(--fs-hr-c, var(--fs-line, #e5e5e5));
}

/* ---------- 文字入りの区切り線（線 ― 見出し ― 線）----------
   Brizy の brz-line-text。見出しタグのまま出し、左右の線を疑似要素で描く。
   --fs-fz 文字サイズ ／ --fs-fc 文字色 ／ --fs-ls 字送り */
.fs-linehead {
  display: flex; align-items: center; gap: 20px;
  width: var(--fs-hr-w, 100%); margin: 14px auto 20px;
  font-size: var(--fs-fz, 24px); font-weight: 400; line-height: 1.4;
  letter-spacing: var(--fs-ls, normal); color: var(--fs-fc, inherit);
  white-space: nowrap;
}
.fs-linehead::before,
.fs-linehead::after {
  content: ""; flex: 1 1 0; min-width: 20px; height: 0;
  border-top: var(--fs-hr-h, 2px) solid var(--fs-hr-c, var(--fs-line, #e5e5e5));
}
@media (max-width: 767px) {
  .fs-linehead { gap: 12px; font-size: min(var(--fs-fz, 24px), 20px); }
}