/* =========================================================
   layout.css — Gridベースのレイアウト共通（BP統一：SPは 879px 以下）
   - 879/880ルール：PC帯は 1920→880px の間で等比縮小（:root/html 基準）
   - コンテナ幅の上限：--content-max（中身幅）。左右余白は PC=20px, SP=16px をグリッドで確保
========================================================= */

/* 基本トークン */
:root{
  /* 中央カラムの最大「内容幅」 */
  --content-max: 1420px;

  /* フッター直前の余白（中身が少ないページ対策） */
  --footer-gap: 40px;

  /* コンテナ左右余白（グリッドで確保する） */
  --container-pad-pc: 20px;
  --container-pad-sp: 16px;
}

/* =============================
   全体縮小（879/880ルール）
============================= */
@media (min-width: 880px){
  :root{
    --pc-width: clamp(880px, 100vw, 1920px);
    --ui-scale: calc(var(--pc-width) / 1920);
  }
  html{ font-size: calc(16px * var(--ui-scale)); }
}
@media (max-width: 879px){
  html{ font-size: 16px; }
}

/* =============================
   コンテナ基準
   - 真ん中のカラムを「min(内容上限, 画面幅-左右余白)」にクランプ
   - padding は使わず、グリッド列で左右余白を担保
============================= */
.container{
  display: grid;
  grid-template-columns:
    1fr
    minmax(0, min(var(--content-max), calc(100% - (var(--container-pad-pc) * 2))))
    1fr;
  width: 100%;
  box-sizing: border-box;
  padding: 0; /* 余白はグリッド列で表現 */
}
.container > *{ grid-column: 2; }

/* SP（≤879px）：左右余白を 16px×2 に変更 */
@media (max-width: 879px){
  .container{
    grid-template-columns:
      1fr
      minmax(0, calc(100% - (var(--container-pad-sp) * 2)))
      1fr;
  }
}

/* 横幅100%のフルブリード */
.container-full-bleed{
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =============================
   セクション余白制御
============================= */
.section{         padding: 60px 0; }
.section--narrow{ padding: 40px 0; }
.section--wide{   padding: 80px 0; }

@media (max-width: 879px){
  .section{ padding: 30px 0; }
}

/* =============================
   グリッドレイアウトユーティリティ
============================= */
.grid{ display: grid; gap: 16px; }

/* カラム指定ユーティリティ（12分割ベース） */
.grid-cols-2 {  grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 {  grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 {  grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 {  grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 {  grid-template-columns: repeat(6, 1fr); }
.grid-cols-12{  grid-template-columns: repeat(12, 1fr); }

/* SP（≤879px）で1カラムに統一 */
@media (max-width: 879px){
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-12{
    grid-template-columns: repeat(1, 1fr);
  }
}

/* =============================
   補助ユーティリティ
============================= */
.text-center{ text-align: center; }
.mt-16{       margin-top: 16px; }
.mt-24{       margin-top: 24px; }
.mt-40{       margin-top: 40px; }

/* =============================
   最低コンテンツ高（フッター押し下げ）
============================= */
main,
.site-main,
#content{
  min-height: 100svh;
  box-sizing: border-box;
}
@supports (min-height: 100dvh){
  main,
  .site-main,
  #content{ min-height: 100dvh; }
}