/* ==========================================================================
   Utilities（ユーティリティクラス）
   Grid、Gap、Margin、Padding、Text Alignment等の汎用クラス
   ========================================================================== */

/* ==========================================================================
   1. 表示ユーティリティ
   ========================================================================== */

.u-hide {
  display: none !important
}

.u-show {
  display: block !important
}

/* ==========================================================================
   2. グリッドユーティリティ（iPhone16 Pro基準 4列グリッド）
   ========================================================================== */

/* 基本グリッドレイアウト */
.l-grid {
  display: grid;
  gap: var(--space-xl);
  width: 100%;
}

@media screen and (max-width: 767.98px) {
  .l-grid {
    gap: var(--mobile-gutter)
  }
}

/* iPhone16 Pro 4列グリッド（レスポンシブ） */
.l-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 1023.98px) {
  .l-grid--cols-4 {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media screen and (max-width: 767.98px) {
  .l-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-gutter)
  }
}

/* 列数バリエーション */
.l-grid--cols-1 {
  grid-template-columns: 1fr
}

.l-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mobile-gutter)
}

.l-grid--cols-2-lg {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg)
}

@media screen and (max-width: 767.98px) {
  .l-grid--cols-2-lg {
    grid-template-columns: 1fr
  }
}

.l-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 767.98px) {
  .l-grid--cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-gutter)
  }
}

/* タブレット以上のグリッド */
.l-grid--cols-6 {
  grid-template-columns: repeat(6, 1fr)
}

@media screen and (max-width: 767.98px) {
  .l-grid--cols-6 {
    grid-template-columns: repeat(2, 1fr)
  }
}

.l-grid--cols-8 {
  grid-template-columns: repeat(8, 1fr)
}

@media screen and (max-width: 1023.98px) {
  .l-grid--cols-8 {
    grid-template-columns: repeat(2, 1fr)
  }
}

.l-grid--cols-12 {
  grid-template-columns: repeat(12, 1fr)
}

@media screen and (max-width: 767.98px) {
  .l-grid--cols-12 {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* 列幅の個別指定 */
.l-grid__col-1 {
  grid-column: span 1
}

.l-grid__col-2 {
  grid-column: span 2
}

.l-grid__col-3 {
  grid-column: span 3
}

.l-grid__col-4 {
  grid-column: span 4
}

.l-grid__col-5 {
  grid-column: span 5
}

.l-grid__col-6 {
  grid-column: span 6
}

.l-grid__col-7 {
  grid-column: span 7
}

.l-grid__col-8 {
  grid-column: span 8
}

.l-grid__col-9 {
  grid-column: span 9
}

.l-grid__col-10 {
  grid-column: span 10
}

.l-grid__col-11 {
  grid-column: span 11
}

.l-grid__col-12 {
  grid-column: span 12
}

/* グリッド開始位置 */
.l-grid__start-1 {
  grid-column-start: 1
}

.l-grid__start-2 {
  grid-column-start: 2
}

@media screen and (max-width: 1279.98px) {
  .xl-l-grid__col-10 {
    grid-column: auto
  }

  .xl-l-grid__start-1 {
    grid-column-start: auto
  }
}

/* 特殊グリッドアイテム位置制御 */
.l-grid__item-center-span-2 {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - var(--mobile-gutter)) / 2) !important
}

/* ==========================================================================
   3. フレックスボックスユーティリティ
   ========================================================================== */

.l-flex {
  display: flex;
  gap: var(--mobile-gutter)
}

.l-flex--column {
  flex-direction: column
}

.l-flex--wrap {
  flex-wrap: wrap
}

.l-flex--center {
  align-items: center;
  justify-content: center
}

.l-flex--between {
  justify-content: space-between
}

.l-flex--around {
  justify-content: space-around
}

.l-flex--start {
  justify-content: flex-start
}

.l-flex--end {
  justify-content: flex-end
}

/* ==========================================================================
   4. マージンユーティリティ
   ========================================================================== */

/* 下マージン */
.u-mb-sm {
  margin-bottom: var(--space-sm)
}

.u-mb-md {
  margin-bottom: var(--space-md)
}

.u-mb-lg {
  margin-bottom: var(--space-lg)
}

.u-mb-xl {
  margin-bottom: var(--space-xl)
}

.u-mb-2xl {
  margin-bottom: var(--space-2xl)
}

.u-mb-3xl {
  margin-bottom: var(--space-3xl)
}

.u-mb-4xl {
  margin-bottom: var(--space-4xl)
}

.u-mb-5xl {
  margin-bottom: var(--space-5xl)
}

.u-mb-6xl {
  margin-bottom: var(--space-6xl)
}

.u-mb-7xl {
  margin-bottom: var(--space-7xl)
}

.u-mb-8xl {
  margin-bottom: var(--space-8xl)
}

/* 上マージン */
.u-mt-sm {
  margin-top: var(--space-sm)
}

.u-mt-md {
  margin-top: var(--space-md)
}

.u-mt-lg {
  margin-top: var(--space-lg)
}

.u-mt-xl {
  margin-top: var(--space-xl)
}

.u-mt-2xl {
  margin-top: var(--space-2xl)
}

.u-mt-3xl {
  margin-top: var(--space-3xl)
}

.u-mt-4xl {
  margin-top: var(--space-4xl)
}

.u-mt-5xl {
  margin-top: var(--space-5xl)
}

.u-mt-6xl {
  margin-top: var(--space-6xl)
}

.u-mt-7xl {
  margin-top: var(--space-7xl)
}

.u-mt-8xl {
  margin-top: var(--space-8xl)
}

/* 上下マージン */
.u-my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm)
}

.u-my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md)
}

.u-my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg)
}

.u-my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl)
}

.u-my-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl)
}

/* ==========================================================================
   5. パディングユーティリティ
   ========================================================================== */

.u-p-sm {
  padding: var(--space-sm)
}

.u-p-md {
  padding: var(--space-md)
}

.u-p-lg {
  padding: var(--space-lg)
}

.u-p-xl {
  padding: var(--space-xl)
}

.u-px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md)
}

.u-py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md)
}

/* ==========================================================================
   6. テキストユーティリティ
   ========================================================================== */

.u-text-center {
  text-align: center
}

.u-text-left {
  text-align: left
}

.u-text-right {
  text-align: right
}

/* ==========================================================================
   7. レイアウトユーティリティ
   ========================================================================== */

/* セクション用コンテナ */
.l-section {
  width: 100%;
  padding: var(--space-xl) var(--space-md)
}

.l-section--sm {
  padding: var(--space-md)
}

.l-section--md {
  padding: var(--space-lg) var(--space-md)
}

.l-section--lg {
  padding: var(--space-4xl) var(--space-md)
}

.l-section--xl {
  padding: var(--space-4xl) var(--space-xl)
}

/* コンテナ */
.l-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-xl);
  padding-left: var(--space-xl);
}

@media screen and (max-width: 1023.98px) {
  .l-container {
    padding-right: var(--space-lg);
    padding-left: var(--space-lg);
  }
}

@media screen and (max-width: 767.98px) {
  .l-container {
    padding-right: var(--space-lg);
    padding-left: var(--space-lg);
  }
}

.l-container--sm {
  max-width: var(--container-sm)
}

.l-container--md {
  max-width: var(--container-md)
}

.l-container--lg {
  max-width: var(--container-lg)
}

.l-container--xl {
  max-width: var(--container-xl)
}

/* ==========================================================================
   8. レスポンシブユーティリティ
   ========================================================================== */

/* モバイル (max-width: 767px) */
@media screen and (max-width: 767.98px) {
  .u-hide-sp {
    display: none !important
  }

  .u-visible-sp {
    display: block !important
  }
}

/* タブレット・デスクトップ (min-width: 768px) */
@media screen and (min-width: 768px) {
  .u-hide-pc {
    display: none !important
  }
}

/* デスクトップ未満 (max-width: 1023.98px) */
@media screen and (max-width: 1023.98px) {
  .hide-below-lg {
    display: none
  }
}

/* デスクトップ (lg) - PCファースト：ベースがPC用、タブレット以下で解除 */
.lg-u-mb-0 {
  margin-bottom: 0
}

.lg-u-mb-4xl {
  margin-bottom: var(--space-4xl)
}

.lg-u-mb-5xl {
  margin-bottom: var(--space-5xl)
}

.lg-u-mt-2xl {
  margin-top: var(--space-2xl)
}

.lg-u-mt-4xl {
  margin-top: var(--space-4xl)
}

.lg-u-mt-5xl {
  margin-top: var(--space-5xl)
}

.lg-u-mt-6xl {
  margin-top: var(--space-6xl)
}

.lg-u-mt-7xl {
  margin-top: var(--space-7xl)
}

.lg-u-mt-8xl {
  margin-top: var(--space-8xl)
}

@media screen and (max-width: 1023.98px) {

  .lg-u-mb-0,
  .lg-u-mb-4xl,
  .lg-u-mb-5xl {
    margin-bottom: initial
  }

  .lg-u-mt-2xl,
  .lg-u-mt-4xl,
  .lg-u-mt-5xl,
  .lg-u-mt-6xl,
  .lg-u-mt-7xl,
  .lg-u-mt-8xl {
    margin-top: initial
  }
}

/* タブレット (md) - PCファースト：ベースがPC用、スマホで解除 */
.md-u-mb-4xl {
  margin-bottom: var(--space-4xl)
}

@media screen and (max-width: 767.98px) {
  .md-u-mb-4xl {
    margin-bottom: initial
  }
}

/* ==========================================================================
   9. アクセシビリティユーティリティ
   ========================================================================== */

.u-visually-hidden,
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  white-space: nowrap !important
}

/* ==========================================================================
   10. ギャップユーティリティ
   ========================================================================== */

.u-gap-3xl {
  gap: var(--space-3xl) !important
}

@media screen and (max-width: 1023.98px) {
  .u-gap-3xl {
    gap: var(--space-lg) !important
  }
}

.u-justify-end {
  justify-content: flex-end !important;
}

/* ==========================================================================
   11. サイズユーティリティ
   ========================================================================== */

.size-6 {
  width: 24px;
  height: 24px;
}