@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-fill); 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; }
.fs-fig--box { max-width: 720px; margin-inline: auto; }
.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; }
}