/**
 * Gap
 *
 * gap-x は列方向（column-gap）、gap-y は行方向（row-gap）。
 * カード一覧で「列間は狭く、行間は広く」といった指定に使う。
 * 例: <div class="grid grid-cols-3 gap-x-24 gap-y-48">
 *
 * 3ファミリーとも同じ値セットで揃えている。値を足すときはまとめて再生成すること。
 *
 * Bootstrap 4.1.3（Sibloo が強制的に読み込む版）には gap ユーティリティが無いため、
 * このファイルのクラスは衝突しない。!important は不要（#91 で実環境確認済み）。
 * gap-x / gap-y も BS5 の .column-gap-* / .row-gap-* とは別名のため問題ない。
 */

/* gap */
.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: 0.0625rem;
}
.gap-2 {
  gap: 0.125rem;
}
.gap-4 {
  gap: 0.25rem;
}
.gap-6 {
  gap: 0.375rem;
}
.gap-8 {
  gap: 0.5rem;
}
.gap-10 {
  gap: 0.625rem;
}
.gap-12 {
  gap: 0.75rem;
}
.gap-16 {
  gap: 1rem;
}
.gap-20 {
  gap: 1.25rem;
}
.gap-24 {
  gap: 1.5rem;
}
.gap-28 {
  gap: 1.75rem;
}
.gap-32 {
  gap: 2rem;
}
.gap-40 {
  gap: 2.5rem;
}
.gap-48 {
  gap: 3rem;
}
.gap-56 {
  gap: 3.5rem;
}
.gap-60 {
  gap: 3.75rem;
}
.gap-64 {
  gap: 4rem;
}
.gap-80 {
  gap: 5rem;
}
.gap-100 {
  gap: 6.25rem;
}
.gap-120 {
  gap: 7.5rem;
}

/* column-gap */
.gap-x-0 {
  column-gap: 0;
}
.gap-x-1 {
  column-gap: 0.0625rem;
}
.gap-x-2 {
  column-gap: 0.125rem;
}
.gap-x-4 {
  column-gap: 0.25rem;
}
.gap-x-6 {
  column-gap: 0.375rem;
}
.gap-x-8 {
  column-gap: 0.5rem;
}
.gap-x-10 {
  column-gap: 0.625rem;
}
.gap-x-12 {
  column-gap: 0.75rem;
}
.gap-x-16 {
  column-gap: 1rem;
}
.gap-x-20 {
  column-gap: 1.25rem;
}
.gap-x-24 {
  column-gap: 1.5rem;
}
.gap-x-28 {
  column-gap: 1.75rem;
}
.gap-x-32 {
  column-gap: 2rem;
}
.gap-x-40 {
  column-gap: 2.5rem;
}
.gap-x-48 {
  column-gap: 3rem;
}
.gap-x-56 {
  column-gap: 3.5rem;
}
.gap-x-60 {
  column-gap: 3.75rem;
}
.gap-x-64 {
  column-gap: 4rem;
}
.gap-x-80 {
  column-gap: 5rem;
}
.gap-x-100 {
  column-gap: 6.25rem;
}
.gap-x-120 {
  column-gap: 7.5rem;
}

/* row-gap */
.gap-y-0 {
  row-gap: 0;
}
.gap-y-1 {
  row-gap: 0.0625rem;
}
.gap-y-2 {
  row-gap: 0.125rem;
}
.gap-y-4 {
  row-gap: 0.25rem;
}
.gap-y-6 {
  row-gap: 0.375rem;
}
.gap-y-8 {
  row-gap: 0.5rem;
}
.gap-y-10 {
  row-gap: 0.625rem;
}
.gap-y-12 {
  row-gap: 0.75rem;
}
.gap-y-16 {
  row-gap: 1rem;
}
.gap-y-20 {
  row-gap: 1.25rem;
}
.gap-y-24 {
  row-gap: 1.5rem;
}
.gap-y-28 {
  row-gap: 1.75rem;
}
.gap-y-32 {
  row-gap: 2rem;
}
.gap-y-40 {
  row-gap: 2.5rem;
}
.gap-y-48 {
  row-gap: 3rem;
}
.gap-y-56 {
  row-gap: 3.5rem;
}
.gap-y-60 {
  row-gap: 3.75rem;
}
.gap-y-64 {
  row-gap: 4rem;
}
.gap-y-80 {
  row-gap: 5rem;
}
.gap-y-100 {
  row-gap: 6.25rem;
}
.gap-y-120 {
  row-gap: 7.5rem;
}

@media screen and (min-width: 768px) {
  .md--gap-0 {
    gap: 0;
  }
  .md--gap-4 {
    gap: 0.25rem;
  }
  .md--gap-6 {
    gap: 0.375rem;
  }
  .md--gap-8 {
    gap: 0.5rem;
  }
  .md--gap-10 {
    gap: 0.625rem;
  }
  .md--gap-12 {
    gap: 0.75rem;
  }
  .md--gap-16 {
    gap: 1rem;
  }
  .md--gap-20 {
    gap: 1.25rem;
  }
  .md--gap-24 {
    gap: 1.5rem;
  }
  .md--gap-32 {
    gap: 2rem;
  }
  .md--gap-40 {
    gap: 2.5rem;
  }
  .md--gap-48 {
    gap: 3rem;
  }
  .md--gap-56 {
    gap: 3.5rem;
  }
  .md--gap-60 {
    gap: 3.75rem;
  }
  .md--gap-64 {
    gap: 4rem;
  }
  .md--gap-80 {
    gap: 5rem;
  }
  .md--gap-100 {
    gap: 6.25rem;
  }
  .md--gap-120 {
    gap: 7.5rem;
  }
  .md--gap-x-0 {
    column-gap: 0;
  }
  .md--gap-x-4 {
    column-gap: 0.25rem;
  }
  .md--gap-x-6 {
    column-gap: 0.375rem;
  }
  .md--gap-x-8 {
    column-gap: 0.5rem;
  }
  .md--gap-x-10 {
    column-gap: 0.625rem;
  }
  .md--gap-x-12 {
    column-gap: 0.75rem;
  }
  .md--gap-x-16 {
    column-gap: 1rem;
  }
  .md--gap-x-20 {
    column-gap: 1.25rem;
  }
  .md--gap-x-24 {
    column-gap: 1.5rem;
  }
  .md--gap-x-32 {
    column-gap: 2rem;
  }
  .md--gap-x-40 {
    column-gap: 2.5rem;
  }
  .md--gap-x-48 {
    column-gap: 3rem;
  }
  .md--gap-x-56 {
    column-gap: 3.5rem;
  }
  .md--gap-x-60 {
    column-gap: 3.75rem;
  }
  .md--gap-x-64 {
    column-gap: 4rem;
  }
  .md--gap-x-80 {
    column-gap: 5rem;
  }
  .md--gap-x-100 {
    column-gap: 6.25rem;
  }
  .md--gap-x-120 {
    column-gap: 7.5rem;
  }
  .md--gap-y-0 {
    row-gap: 0;
  }
  .md--gap-y-4 {
    row-gap: 0.25rem;
  }
  .md--gap-y-6 {
    row-gap: 0.375rem;
  }
  .md--gap-y-8 {
    row-gap: 0.5rem;
  }
  .md--gap-y-10 {
    row-gap: 0.625rem;
  }
  .md--gap-y-12 {
    row-gap: 0.75rem;
  }
  .md--gap-y-16 {
    row-gap: 1rem;
  }
  .md--gap-y-20 {
    row-gap: 1.25rem;
  }
  .md--gap-y-24 {
    row-gap: 1.5rem;
  }
  .md--gap-y-32 {
    row-gap: 2rem;
  }
  .md--gap-y-40 {
    row-gap: 2.5rem;
  }
  .md--gap-y-48 {
    row-gap: 3rem;
  }
  .md--gap-y-56 {
    row-gap: 3.5rem;
  }
  .md--gap-y-60 {
    row-gap: 3.75rem;
  }
  .md--gap-y-64 {
    row-gap: 4rem;
  }
  .md--gap-y-80 {
    row-gap: 5rem;
  }
  .md--gap-y-100 {
    row-gap: 6.25rem;
  }
  .md--gap-y-120 {
    row-gap: 7.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .lg--gap-0 {
    gap: 0;
  }
  .lg--gap-4 {
    gap: 0.25rem;
  }
  .lg--gap-6 {
    gap: 0.375rem;
  }
  .lg--gap-8 {
    gap: 0.5rem;
  }
  .lg--gap-10 {
    gap: 0.625rem;
  }
  .lg--gap-12 {
    gap: 0.75rem;
  }
  .lg--gap-16 {
    gap: 1rem;
  }
  .lg--gap-20 {
    gap: 1.25rem;
  }
  .lg--gap-24 {
    gap: 1.5rem;
  }
  .lg--gap-32 {
    gap: 2rem;
  }
  .lg--gap-40 {
    gap: 2.5rem;
  }
  .lg--gap-48 {
    gap: 3rem;
  }
  .lg--gap-56 {
    gap: 3.5rem;
  }
  .lg--gap-60 {
    gap: 3.75rem;
  }
  .lg--gap-64 {
    gap: 4rem;
  }
  .lg--gap-80 {
    gap: 5rem;
  }
  .lg--gap-100 {
    gap: 6.25rem;
  }
  .lg--gap-120 {
    gap: 7.5rem;
  }
  .lg--gap-x-0 {
    column-gap: 0;
  }
  .lg--gap-x-4 {
    column-gap: 0.25rem;
  }
  .lg--gap-x-6 {
    column-gap: 0.375rem;
  }
  .lg--gap-x-8 {
    column-gap: 0.5rem;
  }
  .lg--gap-x-10 {
    column-gap: 0.625rem;
  }
  .lg--gap-x-12 {
    column-gap: 0.75rem;
  }
  .lg--gap-x-16 {
    column-gap: 1rem;
  }
  .lg--gap-x-20 {
    column-gap: 1.25rem;
  }
  .lg--gap-x-24 {
    column-gap: 1.5rem;
  }
  .lg--gap-x-32 {
    column-gap: 2rem;
  }
  .lg--gap-x-40 {
    column-gap: 2.5rem;
  }
  .lg--gap-x-48 {
    column-gap: 3rem;
  }
  .lg--gap-x-56 {
    column-gap: 3.5rem;
  }
  .lg--gap-x-60 {
    column-gap: 3.75rem;
  }
  .lg--gap-x-64 {
    column-gap: 4rem;
  }
  .lg--gap-x-80 {
    column-gap: 5rem;
  }
  .lg--gap-x-100 {
    column-gap: 6.25rem;
  }
  .lg--gap-x-120 {
    column-gap: 7.5rem;
  }
  .lg--gap-y-0 {
    row-gap: 0;
  }
  .lg--gap-y-4 {
    row-gap: 0.25rem;
  }
  .lg--gap-y-6 {
    row-gap: 0.375rem;
  }
  .lg--gap-y-8 {
    row-gap: 0.5rem;
  }
  .lg--gap-y-10 {
    row-gap: 0.625rem;
  }
  .lg--gap-y-12 {
    row-gap: 0.75rem;
  }
  .lg--gap-y-16 {
    row-gap: 1rem;
  }
  .lg--gap-y-20 {
    row-gap: 1.25rem;
  }
  .lg--gap-y-24 {
    row-gap: 1.5rem;
  }
  .lg--gap-y-32 {
    row-gap: 2rem;
  }
  .lg--gap-y-40 {
    row-gap: 2.5rem;
  }
  .lg--gap-y-48 {
    row-gap: 3rem;
  }
  .lg--gap-y-56 {
    row-gap: 3.5rem;
  }
  .lg--gap-y-60 {
    row-gap: 3.75rem;
  }
  .lg--gap-y-64 {
    row-gap: 4rem;
  }
  .lg--gap-y-80 {
    row-gap: 5rem;
  }
  .lg--gap-y-100 {
    row-gap: 6.25rem;
  }
  .lg--gap-y-120 {
    row-gap: 7.5rem;
  }
}

@media screen and (min-width: 1200px) {
  .xl--gap-0 {
    gap: 0;
  }
  .xl--gap-4 {
    gap: 0.25rem;
  }
  .xl--gap-6 {
    gap: 0.375rem;
  }
  .xl--gap-8 {
    gap: 0.5rem;
  }
  .xl--gap-10 {
    gap: 0.625rem;
  }
  .xl--gap-12 {
    gap: 0.75rem;
  }
  .xl--gap-16 {
    gap: 1rem;
  }
  .xl--gap-20 {
    gap: 1.25rem;
  }
  .xl--gap-24 {
    gap: 1.5rem;
  }
  .xl--gap-32 {
    gap: 2rem;
  }
  .xl--gap-40 {
    gap: 2.5rem;
  }
  .xl--gap-48 {
    gap: 3rem;
  }
  .xl--gap-56 {
    gap: 3.5rem;
  }
  .xl--gap-60 {
    gap: 3.75rem;
  }
  .xl--gap-64 {
    gap: 4rem;
  }
  .xl--gap-80 {
    gap: 5rem;
  }
  .xl--gap-100 {
    gap: 6.25rem;
  }
  .xl--gap-120 {
    gap: 7.5rem;
  }
  .xl--gap-160 {
    gap: 10rem;
  }
  .xl--gap-x-0 {
    column-gap: 0;
  }
  .xl--gap-x-4 {
    column-gap: 0.25rem;
  }
  .xl--gap-x-6 {
    column-gap: 0.375rem;
  }
  .xl--gap-x-8 {
    column-gap: 0.5rem;
  }
  .xl--gap-x-10 {
    column-gap: 0.625rem;
  }
  .xl--gap-x-12 {
    column-gap: 0.75rem;
  }
  .xl--gap-x-16 {
    column-gap: 1rem;
  }
  .xl--gap-x-20 {
    column-gap: 1.25rem;
  }
  .xl--gap-x-24 {
    column-gap: 1.5rem;
  }
  .xl--gap-x-32 {
    column-gap: 2rem;
  }
  .xl--gap-x-40 {
    column-gap: 2.5rem;
  }
  .xl--gap-x-48 {
    column-gap: 3rem;
  }
  .xl--gap-x-56 {
    column-gap: 3.5rem;
  }
  .xl--gap-x-60 {
    column-gap: 3.75rem;
  }
  .xl--gap-x-64 {
    column-gap: 4rem;
  }
  .xl--gap-x-80 {
    column-gap: 5rem;
  }
  .xl--gap-x-100 {
    column-gap: 6.25rem;
  }
  .xl--gap-x-120 {
    column-gap: 7.5rem;
  }
  .xl--gap-y-0 {
    row-gap: 0;
  }
  .xl--gap-y-4 {
    row-gap: 0.25rem;
  }
  .xl--gap-y-6 {
    row-gap: 0.375rem;
  }
  .xl--gap-y-8 {
    row-gap: 0.5rem;
  }
  .xl--gap-y-10 {
    row-gap: 0.625rem;
  }
  .xl--gap-y-12 {
    row-gap: 0.75rem;
  }
  .xl--gap-y-16 {
    row-gap: 1rem;
  }
  .xl--gap-y-20 {
    row-gap: 1.25rem;
  }
  .xl--gap-y-24 {
    row-gap: 1.5rem;
  }
  .xl--gap-y-32 {
    row-gap: 2rem;
  }
  .xl--gap-y-40 {
    row-gap: 2.5rem;
  }
  .xl--gap-y-48 {
    row-gap: 3rem;
  }
  .xl--gap-y-56 {
    row-gap: 3.5rem;
  }
  .xl--gap-y-60 {
    row-gap: 3.75rem;
  }
  .xl--gap-y-64 {
    row-gap: 4rem;
  }
  .xl--gap-y-80 {
    row-gap: 5rem;
  }
  .xl--gap-y-100 {
    row-gap: 6.25rem;
  }
  .xl--gap-y-120 {
    row-gap: 7.5rem;
  }
}