/* 余白のベース単位（10段階） */
:root {
  --u-space-1: 0.25rem;  /* 4px */
  --u-space-2: 0.5rem;   /* 8px */
  --u-space-3: 0.75rem;  /* 12px */
  --u-space-4: 1rem;     /* 16px */
  --u-space-5: 1.25rem;  /* 20px */
  --u-space-6: 1.5rem;   /* 24px */
  --u-space-7: 2rem;     /* 32px */
  --u-space-8: 3rem;     /* 48px */
  --u-space-9: 4rem;     /* 64px */
  --u-space-10: 5rem;    /* 80px */
}

/* -------------------------------------------
 * 1. Base (デフォルト / PC): 全サイズに適用
 * ------------------------------------------- */
.u-mt-1 { margin-top: var(--u-space-1) !important; }
.u-mt-2 { margin-top: var(--u-space-2) !important; }
.u-mt-3 { margin-top: var(--u-space-3) !important; }
.u-mt-4 { margin-top: var(--u-space-4) !important; }
.u-mt-5 { margin-top: var(--u-space-5) !important; }
.u-mt-6 { margin-top: var(--u-space-6) !important; }
.u-mt-7 { margin-top: var(--u-space-7) !important; }
.u-mt-8 { margin-top: var(--u-space-8) !important; }
.u-mt-9 { margin-top: var(--u-space-9) !important; }
.u-mt-10 { margin-top: var(--u-space-10) !important; }

.u-mb-1 { margin-bottom: var(--u-space-1) !important; }
.u-mb-2 { margin-bottom: var(--u-space-2) !important; }
.u-mb-3 { margin-bottom: var(--u-space-3) !important; }
.u-mb-4 { margin-bottom: var(--u-space-4) !important; }
.u-mb-5 { margin-bottom: var(--u-space-5) !important; }
.u-mb-6 { margin-bottom: var(--u-space-6) !important; }
.u-mb-7 { margin-bottom: var(--u-space-7) !important; }
.u-mb-8 { margin-bottom: var(--u-space-8) !important; }
.u-mb-9 { margin-bottom: var(--u-space-9) !important; }
.u-mb-10 { margin-bottom: var(--u-space-10) !important; }

/* -------------------------------------------
 * 2. Extra Large (xl): 1199px以下
 * ------------------------------------------- */
@media (max-width: 1199px) {
  .u-xl-mt-1 { margin-top: var(--u-space-1) !important; }
  .u-xl-mt-2 { margin-top: var(--u-space-2) !important; }
  .u-xl-mt-3 { margin-top: var(--u-space-3) !important; }
  .u-xl-mt-4 { margin-top: var(--u-space-4) !important; }
  .u-xl-mt-5 { margin-top: var(--u-space-5) !important; }
  .u-xl-mt-6 { margin-top: var(--u-space-6) !important; }
  .u-xl-mt-7 { margin-top: var(--u-space-7) !important; }
  .u-xl-mt-8 { margin-top: var(--u-space-8) !important; }
  .u-xl-mt-9 { margin-top: var(--u-space-9) !important; }
  .u-xl-mt-10 { margin-top: var(--u-space-10) !important; }

  .u-xl-mb-1 { margin-bottom: var(--u-space-1) !important; }
  .u-xl-mb-2 { margin-bottom: var(--u-space-2) !important; }
  .u-xl-mb-3 { margin-bottom: var(--u-space-3) !important; }
  .u-xl-mb-4 { margin-bottom: var(--u-space-4) !important; }
  .u-xl-mb-5 { margin-bottom: var(--u-space-5) !important; }
  .u-xl-mb-6 { margin-bottom: var(--u-space-6) !important; }
  .u-xl-mb-7 { margin-bottom: var(--u-space-7) !important; }
  .u-xl-mb-8 { margin-bottom: var(--u-space-8) !important; }
  .u-xl-mb-9 { margin-bottom: var(--u-space-9) !important; }
  .u-xl-mb-10 { margin-bottom: var(--u-space-10) !important; }
}

/* -------------------------------------------
 * 3. Large (lg): 991px以下
 * ------------------------------------------- */
@media (max-width: 991px) {
  .u-lg-mt-1 { margin-top: var(--u-space-1) !important; }
  .u-lg-mt-2 { margin-top: var(--u-space-2) !important; }
  .u-lg-mt-3 { margin-top: var(--u-space-3) !important; }
  .u-lg-mt-4 { margin-top: var(--u-space-4) !important; }
  .u-lg-mt-5 { margin-top: var(--u-space-5) !important; }
  .u-lg-mt-6 { margin-top: var(--u-space-6) !important; }
  .u-lg-mt-7 { margin-top: var(--u-space-7) !important; }
  .u-lg-mt-8 { margin-top: var(--u-space-8) !important; }
  .u-lg-mt-9 { margin-top: var(--u-space-9) !important; }
  .u-lg-mt-10 { margin-top: var(--u-space-10) !important; }

  .u-lg-mb-1 { margin-bottom: var(--u-space-1) !important; }
  .u-lg-mb-2 { margin-bottom: var(--u-space-2) !important; }
  .u-lg-mb-3 { margin-bottom: var(--u-space-3) !important; }
  .u-lg-mb-4 { margin-bottom: var(--u-space-4) !important; }
  .u-lg-mb-5 { margin-bottom: var(--u-space-5) !important; }
  .u-lg-mb-6 { margin-bottom: var(--u-space-6) !important; }
  .u-lg-mb-7 { margin-bottom: var(--u-space-7) !important; }
  .u-lg-mb-8 { margin-bottom: var(--u-space-8) !important; }
  .u-lg-mb-9 { margin-bottom: var(--u-space-9) !important; }
  .u-lg-mb-10 { margin-bottom: var(--u-space-10) !important; }
}

/* -------------------------------------------
 * 4. Medium (md): 767px以下
 * ------------------------------------------- */
@media (max-width: 767px) {
  .u-md-mt-1 { margin-top: var(--u-space-1) !important; }
  .u-md-mt-2 { margin-top: var(--u-space-2) !important; }
  .u-md-mt-3 { margin-top: var(--u-space-3) !important; }
  .u-md-mt-4 { margin-top: var(--u-space-4) !important; }
  .u-md-mt-5 { margin-top: var(--u-space-5) !important; }
  .u-md-mt-6 { margin-top: var(--u-space-6) !important; }
  .u-md-mt-7 { margin-top: var(--u-space-7) !important; }
  .u-md-mt-8 { margin-top: var(--u-space-8) !important; }
  .u-md-mt-9 { margin-top: var(--u-space-9) !important; }
  .u-md-mt-10 { margin-top: var(--u-space-10) !important; }

  .u-md-mb-1 { margin-bottom: var(--u-space-1) !important; }
  .u-md-mb-2 { margin-bottom: var(--u-space-2) !important; }
  .u-md-mb-3 { margin-bottom: var(--u-space-3) !important; }
  .u-md-mb-4 { margin-bottom: var(--u-space-4) !important; }
  .u-md-mb-5 { margin-bottom: var(--u-space-5) !important; }
  .u-md-mb-6 { margin-bottom: var(--u-space-6) !important; }
  .u-md-mb-7 { margin-bottom: var(--u-space-7) !important; }
  .u-md-mb-8 { margin-bottom: var(--u-space-8) !important; }
  .u-md-mb-9 { margin-bottom: var(--u-space-9) !important; }
  .u-md-mb-10 { margin-bottom: var(--u-space-10) !important; }
}

/* -------------------------------------------
 * 5. Small (sm): 575px以下
 * ------------------------------------------- */
@media (max-width: 575px) {
  .u-sm-mt-1 { margin-top: var(--u-space-1) !important; }
  .u-sm-mt-2 { margin-top: var(--u-space-2) !important; }
  .u-sm-mt-3 { margin-top: var(--u-space-3) !important; }
  .u-sm-mt-4 { margin-top: var(--u-space-4) !important; }
  .u-sm-mt-5 { margin-top: var(--u-space-5) !important; }
  .u-sm-mt-6 { margin-top: var(--u-space-6) !important; }
  .u-sm-mt-7 { margin-top: var(--u-space-7) !important; }
  .u-sm-mt-8 { margin-top: var(--u-space-8) !important; }
  .u-sm-mt-9 { margin-top: var(--u-space-9) !important; }
  .u-sm-mt-10 { margin-top: var(--u-space-10) !important; }

  .u-sm-mb-1 { margin-bottom: var(--u-space-1) !important; }
  .u-sm-mb-2 { margin-bottom: var(--u-space-2) !important; }
  .u-sm-mb-3 { margin-bottom: var(--u-space-3) !important; }
  .u-sm-mb-4 { margin-bottom: var(--u-space-4) !important; }
  .u-sm-mb-5 { margin-bottom: var(--u-space-5) !important; }
  .u-sm-mb-6 { margin-bottom: var(--u-space-6) !important; }
  .u-sm-mb-7 { margin-bottom: var(--u-space-7) !important; }
  .u-sm-mb-8 { margin-bottom: var(--u-space-8) !important; }
  .u-sm-mb-9 { margin-bottom: var(--u-space-9) !important; }
  .u-sm-mb-10 { margin-bottom: var(--u-space-10) !important; }
}