/* =========================================================
   余白ユーティリティ（完全版 / #body_wrap なし / :where なし）
   - 固有prefix：spc-（全端末） / spcsp-（スマホだけ）
   - ブロックにクラスを付ける運用前提
   ========================================================= */

/* 余白スケール（ここだけ調整すれば全体反映） */
:root {
  --spc-0: 0;
  --spc-1: 0.25rem; /* 4px */
  --spc-2: 0.5rem; /* 8px */
  --spc-3: 0.75rem; /* 12px */
  --spc-4: 1rem; /* 16px */
  --spc-5: 1.5rem; /* 24px */
  --spc-6: 2rem; /* 32px */
  --spc-7: 3rem; /* 48px */
  --spc-8: 4rem; /* 64px */
}

/* ---------- 全端末：margin ---------- */
.spc-m-0 {
  margin: var(--spc-0) !important;
}
.spc-m-1 {
  margin: var(--spc-1) !important;
}
.spc-m-2 {
  margin: var(--spc-2) !important;
}
.spc-m-3 {
  margin: var(--spc-3) !important;
}
.spc-m-4 {
  margin: var(--spc-4) !important;
}
.spc-m-5 {
  margin: var(--spc-5) !important;
}
.spc-m-6 {
  margin: var(--spc-6) !important;
}
.spc-m-7 {
  margin: var(--spc-7) !important;
}
.spc-m-8 {
  margin: var(--spc-8) !important;
}

.spc-mt-0 {
  margin-top: var(--spc-0) !important;
}
.spc-mt-1 {
  margin-top: var(--spc-1) !important;
}
.spc-mt-2 {
  margin-top: var(--spc-2) !important;
}
.spc-mt-3 {
  margin-top: var(--spc-3) !important;
}
.spc-mt-4 {
  margin-top: var(--spc-4) !important;
}
.spc-mt-5 {
  margin-top: var(--spc-5) !important;
}
.spc-mt-6 {
  margin-top: var(--spc-6) !important;
}
.spc-mt-7 {
  margin-top: var(--spc-7) !important;
}
.spc-mt-8 {
  margin-top: var(--spc-8) !important;
}

.spc-mb-0 {
  margin-bottom: var(--spc-0) !important;
}
.spc-mb-1 {
  margin-bottom: var(--spc-1) !important;
}
.spc-mb-2 {
  margin-bottom: var(--spc-2) !important;
}
.spc-mb-3 {
  margin-bottom: var(--spc-3) !important;
}
.spc-mb-4 {
  margin-bottom: var(--spc-4) !important;
}
.spc-mb-5 {
  margin-bottom: var(--spc-5) !important;
}
.spc-mb-6 {
  margin-bottom: var(--spc-6) !important;
}
.spc-mb-7 {
  margin-bottom: var(--spc-7) !important;
}
.spc-mb-8 {
  margin-bottom: var(--spc-8) !important;
}

.spc-ml-0 {
  margin-left: var(--spc-0) !important;
}
.spc-ml-1 {
  margin-left: var(--spc-1) !important;
}
.spc-ml-2 {
  margin-left: var(--spc-2) !important;
}
.spc-ml-3 {
  margin-left: var(--spc-3) !important;
}
.spc-ml-4 {
  margin-left: var(--spc-4) !important;
}
.spc-ml-5 {
  margin-left: var(--spc-5) !important;
}
.spc-ml-6 {
  margin-left: var(--spc-6) !important;
}
.spc-ml-7 {
  margin-left: var(--spc-7) !important;
}
.spc-ml-8 {
  margin-left: var(--spc-8) !important;
}

.spc-mr-0 {
  margin-right: var(--spc-0) !important;
}
.spc-mr-1 {
  margin-right: var(--spc-1) !important;
}
.spc-mr-2 {
  margin-right: var(--spc-2) !important;
}
.spc-mr-3 {
  margin-right: var(--spc-3) !important;
}
.spc-mr-4 {
  margin-right: var(--spc-4) !important;
}
.spc-mr-5 {
  margin-right: var(--spc-5) !important;
}
.spc-mr-6 {
  margin-right: var(--spc-6) !important;
}
.spc-mr-7 {
  margin-right: var(--spc-7) !important;
}
.spc-mr-8 {
  margin-right: var(--spc-8) !important;
}

.spc-mx-0 {
  margin-left: var(--spc-0) !important;
  margin-right: var(--spc-0) !important;
}
.spc-mx-1 {
  margin-left: var(--spc-1) !important;
  margin-right: var(--spc-1) !important;
}
.spc-mx-2 {
  margin-left: var(--spc-2) !important;
  margin-right: var(--spc-2) !important;
}
.spc-mx-3 {
  margin-left: var(--spc-3) !important;
  margin-right: var(--spc-3) !important;
}
.spc-mx-4 {
  margin-left: var(--spc-4) !important;
  margin-right: var(--spc-4) !important;
}
.spc-mx-5 {
  margin-left: var(--spc-5) !important;
  margin-right: var(--spc-5) !important;
}
.spc-mx-6 {
  margin-left: var(--spc-6) !important;
  margin-right: var(--spc-6) !important;
}
.spc-mx-7 {
  margin-left: var(--spc-7) !important;
  margin-right: var(--spc-7) !important;
}
.spc-mx-8 {
  margin-left: var(--spc-8) !important;
  margin-right: var(--spc-8) !important;
}

.spc-my-0 {
  margin-top: var(--spc-0) !important;
  margin-bottom: var(--spc-0) !important;
}
.spc-my-1 {
  margin-top: var(--spc-1) !important;
  margin-bottom: var(--spc-1) !important;
}
.spc-my-2 {
  margin-top: var(--spc-2) !important;
  margin-bottom: var(--spc-2) !important;
}
.spc-my-3 {
  margin-top: var(--spc-3) !important;
  margin-bottom: var(--spc-3) !important;
}
.spc-my-4 {
  margin-top: var(--spc-4) !important;
  margin-bottom: var(--spc-4) !important;
}
.spc-my-5 {
  margin-top: var(--spc-5) !important;
  margin-bottom: var(--spc-5) !important;
}
.spc-my-6 {
  margin-top: var(--spc-6) !important;
  margin-bottom: var(--spc-6) !important;
}
.spc-my-7 {
  margin-top: var(--spc-7) !important;
  margin-bottom: var(--spc-7) !important;
}
.spc-my-8 {
  margin-top: var(--spc-8) !important;
  margin-bottom: var(--spc-8) !important;
}

/* ---------- 全端末：padding ---------- */
.spc-p-0 {
  padding: var(--spc-0) !important;
}
.spc-p-1 {
  padding: var(--spc-1) !important;
}
.spc-p-2 {
  padding: var(--spc-2) !important;
}
.spc-p-3 {
  padding: var(--spc-3) !important;
}
.spc-p-4 {
  padding: var(--spc-4) !important;
}
.spc-p-5 {
  padding: var(--spc-5) !important;
}
.spc-p-6 {
  padding: var(--spc-6) !important;
}
.spc-p-7 {
  padding: var(--spc-7) !important;
}
.spc-p-8 {
  padding: var(--spc-8) !important;
}

.spc-pt-0 {
  padding-top: var(--spc-0) !important;
}
.spc-pt-1 {
  padding-top: var(--spc-1) !important;
}
.spc-pt-2 {
  padding-top: var(--spc-2) !important;
}
.spc-pt-3 {
  padding-top: var(--spc-3) !important;
}
.spc-pt-4 {
  padding-top: var(--spc-4) !important;
}
.spc-pt-5 {
  padding-top: var(--spc-5) !important;
}
.spc-pt-6 {
  padding-top: var(--spc-6) !important;
}
.spc-pt-7 {
  padding-top: var(--spc-7) !important;
}
.spc-pt-8 {
  padding-top: var(--spc-8) !important;
}

.spc-pb-0 {
  padding-bottom: var(--spc-0) !important;
}
.spc-pb-1 {
  padding-bottom: var(--spc-1) !important;
}
.spc-pb-2 {
  padding-bottom: var(--spc-2) !important;
}
.spc-pb-3 {
  padding-bottom: var(--spc-3) !important;
}
.spc-pb-4 {
  padding-bottom: var(--spc-4) !important;
}
.spc-pb-5 {
  padding-bottom: var(--spc-5) !important;
}
.spc-pb-6 {
  padding-bottom: var(--spc-6) !important;
}
.spc-pb-7 {
  padding-bottom: var(--spc-7) !important;
}
.spc-pb-8 {
  padding-bottom: var(--spc-8) !important;
}

.spc-pl-0 {
  padding-left: var(--spc-0) !important;
}
.spc-pl-1 {
  padding-left: var(--spc-1) !important;
}
.spc-pl-2 {
  padding-left: var(--spc-2) !important;
}
.spc-pl-3 {
  padding-left: var(--spc-3) !important;
}
.spc-pl-4 {
  padding-left: var(--spc-4) !important;
}
.spc-pl-5 {
  padding-left: var(--spc-5) !important;
}
.spc-pl-6 {
  padding-left: var(--spc-6) !important;
}
.spc-pl-7 {
  padding-left: var(--spc-7) !important;
}
.spc-pl-8 {
  padding-left: var(--spc-8) !important;
}

.spc-pr-0 {
  padding-right: var(--spc-0) !important;
}
.spc-pr-1 {
  padding-right: var(--spc-1) !important;
}
.spc-pr-2 {
  padding-right: var(--spc-2) !important;
}
.spc-pr-3 {
  padding-right: var(--spc-3) !important;
}
.spc-pr-4 {
  padding-right: var(--spc-4) !important;
}
.spc-pr-5 {
  padding-right: var(--spc-5) !important;
}
.spc-pr-6 {
  padding-right: var(--spc-6) !important;
}
.spc-pr-7 {
  padding-right: var(--spc-7) !important;
}
.spc-pr-8 {
  padding-right: var(--spc-8) !important;
}

.spc-px-0 {
  padding-left: var(--spc-0) !important;
  padding-right: var(--spc-0) !important;
}
.spc-px-1 {
  padding-left: var(--spc-1) !important;
  padding-right: var(--spc-1) !important;
}
.spc-px-2 {
  padding-left: var(--spc-2) !important;
  padding-right: var(--spc-2) !important;
}
.spc-px-3 {
  padding-left: var(--spc-3) !important;
  padding-right: var(--spc-3) !important;
}
.spc-px-4 {
  padding-left: var(--spc-4) !important;
  padding-right: var(--spc-4) !important;
}
.spc-px-5 {
  padding-left: var(--spc-5) !important;
  padding-right: var(--spc-5) !important;
}
.spc-px-6 {
  padding-left: var(--spc-6) !important;
  padding-right: var(--spc-6) !important;
}
.spc-px-7 {
  padding-left: var(--spc-7) !important;
  padding-right: var(--spc-7) !important;
}
.spc-px-8 {
  padding-left: var(--spc-8) !important;
  padding-right: var(--spc-8) !important;
}

.spc-py-0 {
  padding-top: var(--spc-0) !important;
  padding-bottom: var(--spc-0) !important;
}
.spc-py-1 {
  padding-top: var(--spc-1) !important;
  padding-bottom: var(--spc-1) !important;
}
.spc-py-2 {
  padding-top: var(--spc-2) !important;
  padding-bottom: var(--spc-2) !important;
}
.spc-py-3 {
  padding-top: var(--spc-3) !important;
  padding-bottom: var(--spc-3) !important;
}
.spc-py-4 {
  padding-top: var(--spc-4) !important;
  padding-bottom: var(--spc-4) !important;
}
.spc-py-5 {
  padding-top: var(--spc-5) !important;
  padding-bottom: var(--spc-5) !important;
}
.spc-py-6 {
  padding-top: var(--spc-6) !important;
  padding-bottom: var(--spc-6) !important;
}
.spc-py-7 {
  padding-top: var(--spc-7) !important;
  padding-bottom: var(--spc-7) !important;
}
.spc-py-8 {
  padding-top: var(--spc-8) !important;
  padding-bottom: var(--spc-8) !important;
}

/* ---------- スマホだけ（完全版） ---------- */
@media (max-width: 599px) {
  /* margin */
  .spcsp-m-0 {
    margin: var(--spc-0) !important;
  }
  .spcsp-m-1 {
    margin: var(--spc-1) !important;
  }
  .spcsp-m-2 {
    margin: var(--spc-2) !important;
  }
  .spcsp-m-3 {
    margin: var(--spc-3) !important;
  }
  .spcsp-m-4 {
    margin: var(--spc-4) !important;
  }
  .spcsp-m-5 {
    margin: var(--spc-5) !important;
  }
  .spcsp-m-6 {
    margin: var(--spc-6) !important;
  }
  .spcsp-m-7 {
    margin: var(--spc-7) !important;
  }
  .spcsp-m-8 {
    margin: var(--spc-8) !important;
  }

  .spcsp-mt-0 {
    margin-top: var(--spc-0) !important;
  }
  .spcsp-mt-1 {
    margin-top: var(--spc-1) !important;
  }
  .spcsp-mt-2 {
    margin-top: var(--spc-2) !important;
  }
  .spcsp-mt-3 {
    margin-top: var(--spc-3) !important;
  }
  .spcsp-mt-4 {
    margin-top: var(--spc-4) !important;
  }
  .spcsp-mt-5 {
    margin-top: var(--spc-5) !important;
  }
  .spcsp-mt-6 {
    margin-top: var(--spc-6) !important;
  }
  .spcsp-mt-7 {
    margin-top: var(--spc-7) !important;
  }
  .spcsp-mt-8 {
    margin-top: var(--spc-8) !important;
  }

  .spcsp-mb-0 {
    margin-bottom: var(--spc-0) !important;
  }
  .spcsp-mb-1 {
    margin-bottom: var(--spc-1) !important;
  }
  .spcsp-mb-2 {
    margin-bottom: var(--spc-2) !important;
  }
  .spcsp-mb-3 {
    margin-bottom: var(--spc-3) !important;
  }
  .spcsp-mb-4 {
    margin-bottom: var(--spc-4) !important;
  }
  .spcsp-mb-5 {
    margin-bottom: var(--spc-5) !important;
  }
  .spcsp-mb-6 {
    margin-bottom: var(--spc-6) !important;
  }
  .spcsp-mb-7 {
    margin-bottom: var(--spc-7) !important;
  }
  .spcsp-mb-8 {
    margin-bottom: var(--spc-8) !important;
  }

  .spcsp-ml-0 {
    margin-left: var(--spc-0) !important;
  }
  .spcsp-ml-1 {
    margin-left: var(--spc-1) !important;
  }
  .spcsp-ml-2 {
    margin-left: var(--spc-2) !important;
  }
  .spcsp-ml-3 {
    margin-left: var(--spc-3) !important;
  }
  .spcsp-ml-4 {
    margin-left: var(--spc-4) !important;
  }
  .spcsp-ml-5 {
    margin-left: var(--spc-5) !important;
  }
  .spcsp-ml-6 {
    margin-left: var(--spc-6) !important;
  }
  .spcsp-ml-7 {
    margin-left: var(--spc-7) !important;
  }
  .spcsp-ml-8 {
    margin-left: var(--spc-8) !important;
  }

  .spcsp-mr-0 {
    margin-right: var(--spc-0) !important;
  }
  .spcsp-mr-1 {
    margin-right: var(--spc-1) !important;
  }
  .spcsp-mr-2 {
    margin-right: var(--spc-2) !important;
  }
  .spcsp-mr-3 {
    margin-right: var(--spc-3) !important;
  }
  .spcsp-mr-4 {
    margin-right: var(--spc-4) !important;
  }
  .spcsp-mr-5 {
    margin-right: var(--spc-5) !important;
  }
  .spcsp-mr-6 {
    margin-right: var(--spc-6) !important;
  }
  .spcsp-mr-7 {
    margin-right: var(--spc-7) !important;
  }
  .spcsp-mr-8 {
    margin-right: var(--spc-8) !important;
  }

  .spcsp-mx-0 {
    margin-left: var(--spc-0) !important;
    margin-right: var(--spc-0) !important;
  }
  .spcsp-mx-1 {
    margin-left: var(--spc-1) !important;
    margin-right: var(--spc-1) !important;
  }
  .spcsp-mx-2 {
    margin-left: var(--spc-2) !important;
    margin-right: var(--spc-2) !important;
  }
  .spcsp-mx-3 {
    margin-left: var(--spc-3) !important;
    margin-right: var(--spc-3) !important;
  }
  .spcsp-mx-4 {
    margin-left: var(--spc-4) !important;
    margin-right: var(--spc-4) !important;
  }
  .spcsp-mx-5 {
    margin-left: var(--spc-5) !important;
    margin-right: var(--spc-5) !important;
  }
  .spcsp-mx-6 {
    margin-left: var(--spc-6) !important;
    margin-right: var(--spc-6) !important;
  }
  .spcsp-mx-7 {
    margin-left: var(--spc-7) !important;
    margin-right: var(--spc-7) !important;
  }
  .spcsp-mx-8 {
    margin-left: var(--spc-8) !important;
    margin-right: var(--spc-8) !important;
  }

  .spcsp-my-0 {
    margin-top: var(--spc-0) !important;
    margin-bottom: var(--spc-0) !important;
  }
  .spcsp-my-1 {
    margin-top: var(--spc-1) !important;
    margin-bottom: var(--spc-1) !important;
  }
  .spcsp-my-2 {
    margin-top: var(--spc-2) !important;
    margin-bottom: var(--spc-2) !important;
  }
  .spcsp-my-3 {
    margin-top: var(--spc-3) !important;
    margin-bottom: var(--spc-3) !important;
  }
  .spcsp-my-4 {
    margin-top: var(--spc-4) !important;
    margin-bottom: var(--spc-4) !important;
  }
  .spcsp-my-5 {
    margin-top: var(--spc-5) !important;
    margin-bottom: var(--spc-5) !important;
  }
  .spcsp-my-6 {
    margin-top: var(--spc-6) !important;
    margin-bottom: var(--spc-6) !important;
  }
  .spcsp-my-7 {
    margin-top: var(--spc-7) !important;
    margin-bottom: var(--spc-7) !important;
  }
  .spcsp-my-8 {
    margin-top: var(--spc-8) !important;
    margin-bottom: var(--spc-8) !important;
  }

  /* padding */
  .spcsp-p-0 {
    padding: var(--spc-0) !important;
  }
  .spcsp-p-1 {
    padding: var(--spc-1) !important;
  }
  .spcsp-p-2 {
    padding: var(--spc-2) !important;
  }
  .spcsp-p-3 {
    padding: var(--spc-3) !important;
  }
  .spcsp-p-4 {
    padding: var(--spc-4) !important;
  }
  .spcsp-p-5 {
    padding: var(--spc-5) !important;
  }
  .spcsp-p-6 {
    padding: var(--spc-6) !important;
  }
  .spcsp-p-7 {
    padding: var(--spc-7) !important;
  }
  .spcsp-p-8 {
    padding: var(--spc-8) !important;
  }

  .spcsp-pt-0 {
    padding-top: var(--spc-0) !important;
  }
  .spcsp-pt-1 {
    padding-top: var(--spc-1) !important;
  }
  .spcsp-pt-2 {
    padding-top: var(--spc-2) !important;
  }
  .spcsp-pt-3 {
    padding-top: var(--spc-3) !important;
  }
  .spcsp-pt-4 {
    padding-top: var(--spc-4) !important;
  }
  .spcsp-pt-5 {
    padding-top: var(--spc-5) !important;
  }
  .spcsp-pt-6 {
    padding-top: var(--spc-6) !important;
  }
  .spcsp-pt-7 {
    padding-top: var(--spc-7) !important;
  }
  .spcsp-pt-8 {
    padding-top: var(--spc-8) !important;
  }

  .spcsp-pb-0 {
    padding-bottom: var(--spc-0) !important;
  }
  .spcsp-pb-1 {
    padding-bottom: var(--spc-1) !important;
  }
  .spcsp-pb-2 {
    padding-bottom: var(--spc-2) !important;
  }
  .spcsp-pb-3 {
    padding-bottom: var(--spc-3) !important;
  }
  .spcsp-pb-4 {
    padding-bottom: var(--spc-4) !important;
  }
  .spcsp-pb-5 {
    padding-bottom: var(--spc-5) !important;
  }
  .spcsp-pb-6 {
    padding-bottom: var(--spc-6) !important;
  }
  .spcsp-pb-7 {
    padding-bottom: var(--spc-7) !important;
  }
  .spcsp-pb-8 {
    padding-bottom: var(--spc-8) !important;
  }

  .spcsp-pl-0 {
    padding-left: var(--spc-0) !important;
  }
  .spcsp-pl-1 {
    padding-left: var(--spc-1) !important;
  }
  .spcsp-pl-2 {
    padding-left: var(--spc-2) !important;
  }
  .spcsp-pl-3 {
    padding-left: var(--spc-3) !important;
  }
  .spcsp-pl-4 {
    padding-left: var(--spc-4) !important;
  }
  .spcsp-pl-5 {
    padding-left: var(--spc-5) !important;
  }
  .spcsp-pl-6 {
    padding-left: var(--spc-6) !important;
  }
  .spcsp-pl-7 {
    padding-left: var(--spc-7) !important;
  }
  .spcsp-pl-8 {
    padding-left: var(--spc-8) !important;
  }

  .spcsp-pr-0 {
    padding-right: var(--spc-0) !important;
  }
  .spcsp-pr-1 {
    padding-right: var(--spc-1) !important;
  }
  .spcsp-pr-2 {
    padding-right: var(--spc-2) !important;
  }
  .spcsp-pr-3 {
    padding-right: var(--spc-3) !important;
  }
  .spcsp-pr-4 {
    padding-right: var(--spc-4) !important;
  }
  .spcsp-pr-5 {
    padding-right: var(--spc-5) !important;
  }
  .spcsp-pr-6 {
    padding-right: var(--spc-6) !important;
  }
  .spcsp-pr-7 {
    padding-right: var(--spc-7) !important;
  }
  .spcsp-pr-8 {
    padding-right: var(--spc-8) !important;
  }

  .spcsp-px-0 {
    padding-left: var(--spc-0) !important;
    padding-right: var(--spc-0) !important;
  }
  .spcsp-px-1 {
    padding-left: var(--spc-1) !important;
    padding-right: var(--spc-1) !important;
  }
  .spcsp-px-2 {
    padding-left: var(--spc-2) !important;
    padding-right: var(--spc-2) !important;
  }
  .spcsp-px-3 {
    padding-left: var(--spc-3) !important;
    padding-right: var(--spc-3) !important;
  }
  .spcsp-px-4 {
    padding-left: var(--spc-4) !important;
    padding-right: var(--spc-4) !important;
  }
  .spcsp-px-5 {
    padding-left: var(--spc-5) !important;
    padding-right: var(--spc-5) !important;
  }
  .spcsp-px-6 {
    padding-left: var(--spc-6) !important;
    padding-right: var(--spc-6) !important;
  }
  .spcsp-px-7 {
    padding-left: var(--spc-7) !important;
    padding-right: var(--spc-7) !important;
  }
  .spcsp-px-8 {
    padding-left: var(--spc-8) !important;
    padding-right: var(--spc-8) !important;
  }

  .spcsp-py-0 {
    padding-top: var(--spc-0) !important;
    padding-bottom: var(--spc-0) !important;
  }
  .spcsp-py-1 {
    padding-top: var(--spc-1) !important;
    padding-bottom: var(--spc-1) !important;
  }
  .spcsp-py-2 {
    padding-top: var(--spc-2) !important;
    padding-bottom: var(--spc-2) !important;
  }
  .spcsp-py-3 {
    padding-top: var(--spc-3) !important;
    padding-bottom: var(--spc-3) !important;
  }
  .spcsp-py-4 {
    padding-top: var(--spc-4) !important;
    padding-bottom: var(--spc-4) !important;
  }
  .spcsp-py-5 {
    padding-top: var(--spc-5) !important;
    padding-bottom: var(--spc-5) !important;
  }
  .spcsp-py-6 {
    padding-top: var(--spc-6) !important;
    padding-bottom: var(--spc-6) !important;
  }
  .spcsp-py-7 {
    padding-top: var(--spc-7) !important;
    padding-bottom: var(--spc-7) !important;
  }
  .spcsp-py-8 {
    padding-top: var(--spc-8) !important;
    padding-bottom: var(--spc-8) !important;
  }
}