@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; }
  /* 本番のSPは4列グリッド（メニューカード）を2列のまま出すので、ここでは1列に落とさない */
  .fs-grid--2, .fs-grid--3 { grid-template-columns: 1fr; }
  .fs-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pc-only { display: none; }
  .sp-only { display: block; }
}