/* =========================================
   Bootstrap 5 gap utilities for Bootstrap 4
   ========================================= */

/*  基本 gap（XとY両方に適用） */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }  /* 約4px */
.gap-2 { gap: 0.5rem !important; }   /* 約8px */
.gap-3 { gap: 1rem !important; }     /* 約16px */
.gap-4 { gap: 1.5rem !important; }   /* 約24px */
.gap-5 { gap: 3rem !important; }     /* 約48px */

/*  gap-x（左右方向のみ） */
.gap-x-0 { column-gap: 0 !important; }
.gap-x-1 { column-gap: 0.25rem !important; }
.gap-x-2 { column-gap: 0.5rem !important; }
.gap-x-3 { column-gap: 1rem !important; }
.gap-x-4 { column-gap: 1.5rem !important; }
.gap-x-5 { column-gap: 3rem !important; }

/*  gap-y（上下方向のみ） */
.gap-y-0 { row-gap: 0 !important; }
.gap-y-1 { row-gap: 0.25rem !important; }
.gap-y-2 { row-gap: 0.5rem !important; }
.gap-y-3 { row-gap: 1rem !important; }
.gap-y-4 { row-gap: 1.5rem !important; }
.gap-y-5 { row-gap: 3rem !important; }
/* --------------------------------------------------
   Bootstrap 4 用 gap クラス再現（g, gx, gy）
   Bootstrap 5 の spacingスケールに準拠（1単位 = 0.25rem）
   **既存 .row に影響を与えない**ように scoped 実装
-------------------------------------------------- */

/* ---- 変数定義：g / gx / gy 各クラスに設定 ---- */
.g-0, .gx-0, .gy-0 { --bs-gutter-x: 0;    --bs-gutter-y: 0; }
.g-1, .gx-1, .gy-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2, .gx-2, .gy-2 { --bs-gutter-x: .5rem;  --bs-gutter-y: .5rem; }
.g-3, .gx-3, .gy-3 { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem; }
.g-4, .gx-4, .gy-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5, .gx-5, .gy-5 { --bs-gutter-x: 3rem;   --bs-gutter-y: 3rem; }

/* -------------------------------------------------
   注意：以下のルールは **.row.g-* / .row.gx-* / .row.gy-***
   にのみ適用。通常の .row には何も影響しない。
-------------------------------------------------- */

/* -------------------------
   横方向の間隔（g と gx に対応）
   ------------------------- */
/* .row.g-* セット（g があれば横も縦も効く）、および .row.gx-* */
.row.g-0 > [class*='col-'], .row.g-0 > .col,
.row.g-1 > [class*='col-'], .row.g-1 > .col,
.row.g-2 > [class*='col-'], .row.g-2 > .col,
.row.g-3 > [class*='col-'], .row.g-3 > .col,
.row.g-4 > [class*='col-'], .row.g-4 > .col,
.row.g-5 > [class*='col-'], .row.g-5 > .col,

.row.gx-0 > [class*='col-'], .row.gx-0 > .col,
.row.gx-1 > [class*='col-'], .row.gx-1 > .col,
.row.gx-2 > [class*='col-'], .row.gx-2 > .col,
.row.gx-3 > [class*='col-'], .row.gx-3 > .col,
.row.gx-4 > [class*='col-'], .row.gx-4 > .col,
.row.gx-5 > [class*='col-'], .row.gx-5 > .col
{
  /* gx / g の --bs-gutter-x を使って左右パディングを与える */
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left:  calc(var(--bs-gutter-x) / 2);
}

/* -------------------------
   縦方向の間隔（g と gy に対応）
   ------------------------- */
/* ネガティブマージンは「該当する .row のみ」に適用 */
.row.g-0, .row.g-1, .row.g-2, .row.g-3, .row.g-4, .row.g-5,
.row.gy-0, .row.gy-1, .row.gy-2, .row.gy-3, .row.gy-4, .row.gy-5 {
  margin-top: calc(-1 * var(--bs-gutter-y));
}

/* 各カラムに縦マージンを与える（g / gy がある row のみ） */
.row.g-0 > [class*='col-'], .row.g-0 > .col,
.row.g-1 > [class*='col-'], .row.g-1 > .col,
.row.g-2 > [class*='col-'], .row.g-2 > .col,
.row.g-3 > [class*='col-'], .row.g-3 > .col,
.row.g-4 > [class*='col-'], .row.g-4 > .col,
.row.g-5 > [class*='col-'], .row.g-5 > .col,

.row.gy-0 > [class*='col-'], .row.gy-0 > .col,
.row.gy-1 > [class*='col-'], .row.gy-1 > .col,
.row.gy-2 > [class*='col-'], .row.gy-2 > .col,
.row.gy-3 > [class*='col-'], .row.gy-3 > .col,
.row.gy-4 > [class*='col-'], .row.gy-4 > .col,
.row.gy-5 > [class*='col-'], .row.gy-5 > .col
{
  margin-top: var(--bs-gutter-y);
}

/* -------------------------
   補足（任意）
   - もし .col の他に直接 .row の直下に他要素がある場合は
     必要に応じてセレクタを拡張。
   - もし既存で .col にカスタム margin/padding があるなら
     競合しないか確認（優先度の調整は可能）。
   ------------------------- */

/* ==================================================
   Responsive g / gx / gy utilities (Bootstrap4 BP)
   ================================================== */

/* =======================
   sm (≥576px)
   ======================= */
@media (min-width: 576px) {

  .g-sm-0, .gx-sm-0, .gy-sm-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .g-sm-1, .gx-sm-1, .gy-sm-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
  .g-sm-2, .gx-sm-2, .gy-sm-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .g-sm-3, .gx-sm-3, .gy-sm-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .g-sm-4, .gx-sm-4, .gy-sm-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
  .g-sm-5, .gx-sm-5, .gy-sm-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

}

/* =======================
   md (≥768px)
   ======================= */
@media (min-width: 768px) {

  .g-md-0, .gx-md-0, .gy-md-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .g-md-1, .gx-md-1, .gy-md-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
  .g-md-2, .gx-md-2, .gy-md-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .g-md-3, .gx-md-3, .gy-md-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .g-md-4, .gx-md-4, .gy-md-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
  .g-md-5, .gx-md-5, .gy-md-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

}

/* =======================
   lg (≥992px)
   ======================= */
@media (min-width: 992px) {

  .g-lg-0, .gx-lg-0, .gy-lg-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .g-lg-1, .gx-lg-1, .gy-lg-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
  .g-lg-2, .gx-lg-2, .gy-lg-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .g-lg-3, .gx-lg-3, .gy-lg-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .g-lg-4, .gx-lg-4, .gy-lg-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
  .g-lg-5, .gx-lg-5, .gy-lg-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

}

/* =======================
   xl (≥1200px)
   ======================= */
@media (min-width: 1200px) {

  .g-xl-0, .gx-xl-0, .gy-xl-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .g-xl-1, .gx-xl-1, .gy-xl-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
  .g-xl-2, .gx-xl-2, .gy-xl-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
  .g-xl-3, .gx-xl-3, .gy-xl-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .g-xl-4, .gx-xl-4, .gy-xl-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
  .g-xl-5, .gx-xl-5, .gy-xl-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

}

/* =========================================
   Responsive gap utilities (Bootstrap4 BP)
   Bootstrap5互換クラス
   ========================================= */

/* =======================
   sm (≥576px)
   ======================= */
@media (min-width: 576px) {

  .gap-sm-0 { gap: 0 !important; }
  .gap-sm-1 { gap: 0.25rem !important; }
  .gap-sm-2 { gap: 0.5rem !important; }
  .gap-sm-3 { gap: 1rem !important; }
  .gap-sm-4 { gap: 1.5rem !important; }
  .gap-sm-5 { gap: 3rem !important; }

  .gap-x-sm-0 { column-gap: 0 !important; }
  .gap-x-sm-1 { column-gap: 0.25rem !important; }
  .gap-x-sm-2 { column-gap: 0.5rem !important; }
  .gap-x-sm-3 { column-gap: 1rem !important; }
  .gap-x-sm-4 { column-gap: 1.5rem !important; }
  .gap-x-sm-5 { column-gap: 3rem !important; }

  .gap-y-sm-0 { row-gap: 0 !important; }
  .gap-y-sm-1 { row-gap: 0.25rem !important; }
  .gap-y-sm-2 { row-gap: 0.5rem !important; }
  .gap-y-sm-3 { row-gap: 1rem !important; }
  .gap-y-sm-4 { row-gap: 1.5rem !important; }
  .gap-y-sm-5 { row-gap: 3rem !important; }

}

/* =======================
   md (≥768px)
   ======================= */
@media (min-width: 768px) {

  .gap-md-0 { gap: 0 !important; }
  .gap-md-1 { gap: 0.25rem !important; }
  .gap-md-2 { gap: 0.5rem !important; }
  .gap-md-3 { gap: 1rem !important; }
  .gap-md-4 { gap: 1.5rem !important; }
  .gap-md-5 { gap: 3rem !important; }

  .gap-x-md-0 { column-gap: 0 !important; }
  .gap-x-md-1 { column-gap: 0.25rem !important; }
  .gap-x-md-2 { column-gap: 0.5rem !important; }
  .gap-x-md-3 { column-gap: 1rem !important; }
  .gap-x-md-4 { column-gap: 1.5rem !important; }
  .gap-x-md-5 { column-gap: 3rem !important; }

  .gap-y-md-0 { row-gap: 0 !important; }
  .gap-y-md-1 { row-gap: 0.25rem !important; }
  .gap-y-md-2 { row-gap: 0.5rem !important; }
  .gap-y-md-3 { row-gap: 1rem !important; }
  .gap-y-md-4 { row-gap: 1.5rem !important; }
  .gap-y-md-5 { row-gap: 3rem !important; }

}

/* =======================
   lg (≥992px)
   ======================= */
@media (min-width: 992px) {

  .gap-lg-0 { gap: 0 !important; }
  .gap-lg-1 { gap: 0.25rem !important; }
  .gap-lg-2 { gap: 0.5rem !important; }
  .gap-lg-3 { gap: 1rem !important; }
  .gap-lg-4 { gap: 1.5rem !important; }
  .gap-lg-5 { gap: 3rem !important; }

  .gap-x-lg-0 { column-gap: 0 !important; }
  .gap-x-lg-1 { column-gap: 0.25rem !important; }
  .gap-x-lg-2 { column-gap: 0.5rem !important; }
  .gap-x-lg-3 { column-gap: 1rem !important; }
  .gap-x-lg-4 { column-gap: 1.5rem !important; }
  .gap-x-lg-5 { column-gap: 3rem !important; }

  .gap-y-lg-0 { row-gap: 0 !important; }
  .gap-y-lg-1 { row-gap: 0.25rem !important; }
  .gap-y-lg-2 { row-gap: 0.5rem !important; }
  .gap-y-lg-3 { row-gap: 1rem !important; }
  .gap-y-lg-4 { row-gap: 1.5rem !important; }
  .gap-y-lg-5 { row-gap: 3rem !important; }

}

/* =======================
   xl (≥1200px)
   ======================= */
@media (min-width: 1200px) {

  .gap-xl-0 { gap: 0 !important; }
  .gap-xl-1 { gap: 0.25rem !important; }
  .gap-xl-2 { gap: 0.5rem !important; }
  .gap-xl-3 { gap: 1rem !important; }
  .gap-xl-4 { gap: 1.5rem !important; }
  .gap-xl-5 { gap: 3rem !important; }

  .gap-x-xl-0 { column-gap: 0 !important; }
  .gap-x-xl-1 { column-gap: 0.25rem !important; }
  .gap-x-xl-2 { column-gap: 0.5rem !important; }
  .gap-x-xl-3 { column-gap: 1rem !important; }
  .gap-x-xl-4 { column-gap: 1.5rem !important; }
  .gap-x-xl-5 { column-gap: 3rem !important; }

  .gap-y-xl-0 { row-gap: 0 !important; }
  .gap-y-xl-1 { row-gap: 0.25rem !important; }
  .gap-y-xl-2 { row-gap: 0.5rem !important; }
  .gap-y-xl-3 { row-gap: 1rem !important; }
  .gap-y-xl-4 { row-gap: 1.5rem !important; }
  .gap-y-xl-5 { row-gap: 3rem !important; }

}