/* =========================================================
   Bootstrap 5.3 Equivalent Spacing Utilities (Custom Build)
   ========================================================= */

:root {
  --spacer: 0.25rem;
}

@media (min-width: 0) {
  /* Generate base spacing (0–5) */
  .m-0 { margin: 0 !important; }
  .m-1 { margin: calc(var(--spacer) * 1) !important; }
  .m-2 { margin: calc(var(--spacer) * 2) !important; }
  .m-3 { margin: calc(var(--spacer) * 3) !important; }
  .m-4 { margin: calc(var(--spacer) * 4) !important; }
  .m-5 { margin: calc(var(--spacer) * 5) !important; }
  .m-auto { margin: auto !important; }

  .p-0 { padding: 0 !important; }
  .p-1 { padding: calc(var(--spacer) * 1) !important; }
  .p-2 { padding: calc(var(--spacer) * 2) !important; }
  .p-3 { padding: calc(var(--spacer) * 3) !important; }
  .p-4 { padding: calc(var(--spacer) * 4) !important; }
  .p-5 { padding: calc(var(--spacer) * 5) !important; }

  /* Directional versions */
  .mt-0, .my-0 { margin-top: 0 !important; }
  .mt-1, .my-1 { margin-top: calc(var(--spacer) * 1) !important; }
  .mt-2, .my-2 { margin-top: calc(var(--spacer) * 2) !important; }
  .mt-3, .my-3 { margin-top: calc(var(--spacer) * 3) !important; }
  .mt-4, .my-4 { margin-top: calc(var(--spacer) * 4) !important; }
  .mt-5, .my-5 { margin-top: calc(var(--spacer) * 5) !important; }

  .mb-0, .my-0 { margin-bottom: 0 !important; }
  .mb-1, .my-1 { margin-bottom: calc(var(--spacer) * 1) !important; }
  .mb-2, .my-2 { margin-bottom: calc(var(--spacer) * 2) !important; }
  .mb-3, .my-3 { margin-bottom: calc(var(--spacer) * 3) !important; }
  .mb-4, .my-4 { margin-bottom: calc(var(--spacer) * 4) !important; }
  .mb-5, .my-5 { margin-bottom: calc(var(--spacer) * 5) !important; }

  .ms-0, .mx-0 { margin-left: 0 !important; }
  .ms-1, .mx-1 { margin-left: calc(var(--spacer) * 1) !important; }
  .ms-2, .mx-2 { margin-left: calc(var(--spacer) * 2) !important; }
  .ms-3, .mx-3 { margin-left: calc(var(--spacer) * 3) !important; }
  .ms-4, .mx-4 { margin-left: calc(var(--spacer) * 4) !important; }
  .ms-5, .mx-5 { margin-left: calc(var(--spacer) * 5) !important; }

  .me-0, .mx-0 { margin-right: 0 !important; }
  .me-1, .mx-1 { margin-right: calc(var(--spacer) * 1) !important; }
  .me-2, .mx-2 { margin-right: calc(var(--spacer) * 2) !important; }
  .me-3, .mx-3 { margin-right: calc(var(--spacer) * 3) !important; }
  .me-4, .mx-4 { margin-right: calc(var(--spacer) * 4) !important; }
  .me-5, .mx-5 { margin-right: calc(var(--spacer) * 5) !important; }

  .pt-0, .py-0 { padding-top: 0 !important; }
  .pt-1, .py-1 { padding-top: calc(var(--spacer) * 1) !important; }
  .pt-2, .py-2 { padding-top: calc(var(--spacer) * 2) !important; }
  .pt-3, .py-3 { padding-top: calc(var(--spacer) * 3) !important; }
  .pt-4, .py-4 { padding-top: calc(var(--spacer) * 4) !important; }
  .pt-5, .py-5 { padding-top: calc(var(--spacer) * 5) !important; }

  .pb-0, .py-0 { padding-bottom: 0 !important; }
  .pb-1, .py-1 { padding-bottom: calc(var(--spacer) * 1) !important; }
  .pb-2, .py-2 { padding-bottom: calc(var(--spacer) * 2) !important; }
  .pb-3, .py-3 { padding-bottom: calc(var(--spacer) * 3) !important; }
  .pb-4, .py-4 { padding-bottom: calc(var(--spacer) * 4) !important; }
  .pb-5, .py-5 { padding-bottom: calc(var(--spacer) * 5) !important; }

  .ps-0, .px-0 { padding-left: 0 !important; }
  .ps-1, .px-1 { padding-left: calc(var(--spacer) * 1) !important; }
  .ps-2, .px-2 { padding-left: calc(var(--spacer) * 2) !important; }
  .ps-3, .px-3 { padding-left: calc(var(--spacer) * 3) !important; }
  .ps-4, .px-4 { padding-left: calc(var(--spacer) * 4) !important; }
  .ps-5, .px-5 { padding-left: calc(var(--spacer) * 5) !important; }

  .pe-0, .px-0 { padding-right: 0 !important; }
  .pe-1, .px-1 { padding-right: calc(var(--spacer) * 1) !important; }
  .pe-2, .px-2 { padding-right: calc(var(--spacer) * 2) !important; }
  .pe-3, .px-3 { padding-right: calc(var(--spacer) * 3) !important; }
  .pe-4, .px-4 { padding-right: calc(var(--spacer) * 4) !important; }
  .pe-5, .px-5 { padding-right: calc(var(--spacer) * 5) !important; }
}

/* Bootstrap3では.g-0がないため手動でgutter削除 */
.no-gutter {
  margin-right: 0;
  margin-left: 0;
}
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* 中央だけ余白を追加 */
.middle-col {
  margin: 0 1%; /* 好みで調整 (例: 1〜2%) */
}

/* --- Flex Gap (Bootstrap5 only feature) --- */
.gap-0{gap:0!important;}
.gap-1{gap:.25rem!important;}
.gap-2{gap:.5rem!important;}
.gap-3{gap:1rem!important;}
.gap-4{gap:1.5rem!important;}
.gap-5{gap:3rem!important;}

/* --- Justify / Align --- */
.justify-content-start{justify-content:flex-start!important;}
.justify-content-end{justify-content:flex-end!important;}
.justify-content-center{justify-content:center!important;}
.justify-content-between{justify-content:space-between!important;}
.justify-content-around{justify-content:space-around!important;}
.justify-content-evenly{justify-content:space-evenly!important;}

.align-items-start{align-items:flex-start!important;}
.align-items-end{align-items:flex-end!important;}
.align-items-center{align-items:center!important;}
.align-items-baseline{align-items:baseline!important;}
.align-items-stretch{align-items:stretch!important;}


/* --- New Bootstrap 5 Rounded Utilities --- */
.rounded{border-radius:.25rem!important;}
.rounded-0{border-radius:0!important;}
.rounded-1{border-radius:.125rem!important;}
.rounded-2{border-radius:.25rem!important;}
.rounded-3{border-radius:.5rem!important;}
.rounded-4{border-radius:1rem!important;}
.rounded-5{border-radius:2rem!important;}
.rounded-pill{border-radius:50rem!important;}
.rounded-circle{border-radius:50%!important;}

.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important;}
.rounded-end{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;}
.rounded-bottom{border-bottom-left-radius:.25rem!important;border-bottom-right-radius:.25rem!important;}
.rounded-start{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;}

.rounded-top-0{border-top-left-radius:0!important;border-top-right-radius:0!important;}
.rounded-top-1{border-top-left-radius:.125rem!important;border-top-right-radius:.125rem!important;}
.rounded-top-2{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important;}
.rounded-top-3{border-top-left-radius:.5rem!important;border-top-right-radius:.5rem!important;}
.rounded-top-4{border-top-left-radius:1rem!important;border-top-right-radius:1rem!important;}
.rounded-top-5{border-top-left-radius:2rem!important;border-top-right-radius:2rem!important;}

.rounded-end-0{border-top-right-radius:0!important;border-bottom-right-radius:0!important;}
.rounded-end-1{border-top-right-radius:.125rem!important;border-bottom-right-radius:.125rem!important;}
.rounded-end-2{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;}
.rounded-end-3{border-top-right-radius:.5rem!important;border-bottom-right-radius:.5rem!important;}
.rounded-end-4{border-top-right-radius:1rem!important;border-bottom-right-radius:1rem!important;}
.rounded-end-5{border-top-right-radius:2rem!important;border-bottom-right-radius:2rem!important;}

.rounded-bottom-0{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;}
.rounded-bottom-1{border-bottom-left-radius:.125rem!important;border-bottom-right-radius:.125rem!important;}
.rounded-bottom-2{border-bottom-left-radius:.25rem!important;border-bottom-right-radius:.25rem!important;}
.rounded-bottom-3{border-bottom-left-radius:.5rem!important;border-bottom-right-radius:.5rem!important;}
.rounded-bottom-4{border-bottom-left-radius:1rem!important;border-bottom-right-radius:1rem!important;}
.rounded-bottom-5{border-bottom-left-radius:2rem!important;border-bottom-right-radius:2rem!important;}

.rounded-start-0{border-top-left-radius:0!important;border-bottom-left-radius:0!important;}
.rounded-start-1{border-top-left-radius:.125rem!important;border-bottom-left-radius:.125rem!important;}
.rounded-start-2{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;}
.rounded-start-3{border-top-left-radius:.5rem!important;border-bottom-left-radius:.5rem!important;}
.rounded-start-4{border-top-left-radius:1rem!important;border-bottom-left-radius:1rem!important;}
.rounded-start-5{border-top-left-radius:2rem!important;border-bottom-left-radius:2rem!important;}


/* top-start */
.rounded-top-start-0{border-top-left-radius:0!important;}
.rounded-top-start-1{border-top-left-radius:.125rem!important;}
.rounded-top-start-2{border-top-left-radius:.25rem!important;}
.rounded-top-start-3{border-top-left-radius:.5rem!important;}
.rounded-top-start-4{border-top-left-radius:1rem!important;}
.rounded-top-start-5{border-top-left-radius:2rem!important;}

/* top-end */
.rounded-top-end-0{border-top-right-radius:0!important;}
.rounded-top-end-1{border-top-right-radius:.125rem!important;}
.rounded-top-end-2{border-top-right-radius:.25rem!important;}
.rounded-top-end-3{border-top-right-radius:.5rem!important;}
.rounded-top-end-4{border-top-right-radius:1rem!important;}
.rounded-top-end-5{border-top-right-radius:2rem!important;}

/* bottom-start */
.rounded-bottom-start-0{border-bottom-left-radius:0!important;}
.rounded-bottom-start-1{border-bottom-left-radius:.125rem!important;}
.rounded-bottom-start-2{border-bottom-left-radius:.25rem!important;}
.rounded-bottom-start-3{border-bottom-left-radius:.5rem!important;}
.rounded-bottom-start-4{border-bottom-left-radius:1rem!important;}
.rounded-bottom-start-5{border-bottom-left-radius:2rem!important;}

/* bottom-end */
.rounded-bottom-end-0{border-bottom-right-radius:0!important;}
.rounded-bottom-end-1{border-bottom-right-radius:.125rem!important;}
.rounded-bottom-end-2{border-bottom-right-radius:.25rem!important;}
.rounded-bottom-end-3{border-bottom-right-radius:.5rem!important;}
.rounded-bottom-end-4{border-bottom-right-radius:1rem!important;}
.rounded-bottom-end-5{border-bottom-right-radius:2rem!important;}


/* --- Visibility --- */
.visible{visibility:visible!important;}
.invisible{visibility:hidden!important;}

/* --- Overflow --- */
.overflow-hidden{overflow:hidden!important;}
.overflow-auto{overflow:auto!important;}
.overflow-scroll{overflow:scroll!important;}