@charset "UTF-8";
/* ===================================================================
   layout.css
   Bootstrap的な「枠」と「余白」の設計
   - コンテナ / グリッド（12カラム） / セクション余白 / spacingユーティリティ
   - 単位は em/rem を用途で使い分け（枠=rem, 文字連動余白=em）
=================================================================== */

/* -------------------------------------------------------------------
   コンテナ（Bootstrapのmax-width段階を踏襲）
------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1440px; /* --container-lg 指示書準拠 */
  margin-inline: auto;
  padding-inline: 1.25rem; /* 20px 左右余白 */
}
.container-md     { max-width: 960px; } /* --container-md 指示書準拠 */
.container-narrow { max-width: 760px; } /* --container-sm 指示書準拠 */
.container-fluid  { max-width: none; }

/* -------------------------------------------------------------------
   グリッド（Bootstrap風 row / col）
   Flexboxではなく CSS Grid ベースで簡潔化
------------------------------------------------------------------- */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* 列指定：col-1〜12 */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* オート均等分割（カード並べ用）
   列数は .cols-2 〜 .cols-5 クラスで指定する。
   ※ style="--cols:4" のインライン指定はメディアクエリで上書きできないため使用しない */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap, 1.5rem);
}
.cols-2 { --cols: 2; }
.cols-3 { --cols: 3; }
.cols-4 { --cols: 4; }
.cols-5 { --cols: 5; }

/* グリッド／フレックスの子要素は既定で min-width:auto のため
   中身（表・長い英数字など）より小さく縮まず、はみ出しの原因になる。
   明示的に 0 を指定して縮小を許可する。 */
.row > *,
.grid-auto > *,
.d-flex > * { min-width: 0; }

/* -------------------------------------------------------------------
   Flexユーティリティ（横並び・中央揃え等の最小セット）
------------------------------------------------------------------- */
.d-flex        { display: flex; }
.flex-wrap     { flex-wrap: wrap; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-sm { gap: 0.5rem; }
.gap    { gap: 1rem; }
.gap-lg { gap: 2rem; }

/* -------------------------------------------------------------------
   ブロック要素の垂直中央（Flex不要な簡略化）
------------------------------------------------------------------- */
.v-center { align-content: center; }

/* -------------------------------------------------------------------
   セクション余白（指示書準拠：PC 120px / SP 72px を基準に段階化）
------------------------------------------------------------------- */
.section    { padding-block: 7.5rem; }  /* 120px */
.section-sm { padding-block: 5rem;   }  /* 80px（Tablet想定の下限） */
.section-lg { padding-block: 8.75rem;}  /* 140px（Tablet想定の上限） */

/* -------------------------------------------------------------------
   spacing ユーティリティ（Bootstrap風 m/p + t/b/x/y + 0〜6）
   0=0 / 1=.25rem / 2=.5rem / 3=1rem / 4=1.5rem / 5=2rem / 6=3rem
------------------------------------------------------------------- */
.m-0{margin:0}      .p-0{padding:0}
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem} .mt-5{margin-top:2rem}  .mt-6{margin-top:3rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem}
.mb-4{margin-bottom:1.5rem} .mb-5{margin-bottom:2rem}  .mb-6{margin-bottom:3rem}
.pt-3{padding-top:1rem}  .pt-5{padding-top:2rem}
.pb-3{padding-bottom:1rem} .pb-5{padding-bottom:2rem}
.py-3{padding-block:1rem} .py-5{padding-block:2rem}
.px-3{padding-inline:1rem} .px-5{padding-inline:2rem}

/* 中央寄せブロック */
.mx-auto { margin-inline: auto; }

/* -------------------------------------------------------------------
   レスポンシブ：タブレット以下
------------------------------------------------------------------- */
@media (max-width: 992px) {
  .grid-auto { --cols: 2; }
  .cols-3, .cols-4, .cols-5 { --cols: 2; }
  .section    { padding-block: 5.5rem; } /* 88px 指示書準拠(Tablet 80-100px) */
  .section-sm { padding-block: 5rem;   } /* 80px */
  .section-lg { padding-block: 6.25rem;} /* 100px */
  /* md以下で列を全幅化する簡易対応 */
  .col-md-6  { grid-column: span 6; }
  .col-md-12 { grid-column: span 12; }
  .row .col-4,
  .row .col-8,
  .row .col-5,
  .row .col-7 { grid-column: span 12; }
}

/* -------------------------------------------------------------------
   レスポンシブ：スマホ
------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding-inline: 1rem; }
  .grid-auto { --cols: 1; }
  .cols-2, .cols-3, .cols-4, .cols-5 { --cols: 1; }
  .section    { padding-block: 2.5rem; } /* 72px 指示書準拠 */
  .section-sm { padding-block: 4rem;   } /* 64px 指示書準拠下限 */
  .section-lg { padding-block: 5rem;   } /* 80px 指示書準拠上限 */
  .row { gap: 1rem; }
  [class^="col-"] { grid-column: span 12; }
}