/* === Container === */
:root{ --bs-gutter-x:1.5rem; }
.container{
  width:100%;
  padding-right:calc(var(--bs-gutter-x)*.5);
  padding-left:calc(var(--bs-gutter-x)*.5);
  margin-right:auto;margin-left:auto;
}
.fw-bold{
  font-weight: bold!important;
}
@media (min-width:576px){ .container{ max-width:540px; } }
@media (min-width:768px){ .container{ max-width:720px; } }
@media (min-width:992px){ .container{ max-width:960px; } }
@media (min-width:1200px){ .container{ max-width:1140px; } }
@media (min-width:1400px){ .container{ max-width:1320px; } }

/* === Display === */
/* ==== Base (XS <576px) ==== */
.d-none{display:none!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}
.d-grid{display:grid!important}
.d-table{display:table!important}
.d-table-row{display:table-row!important}
.d-table-cell{display:table-cell!important}

/* ==== sm ≥ 576px ==== */
@media (min-width:576px){
  .d-sm-none{display:none!important}
  .d-sm-block{display:block!important}
  .d-sm-inline{display:inline!important}
  .d-sm-inline-block{display:inline-block!important}
  .d-sm-flex{display:flex!important}
  .d-sm-inline-flex{display:inline-flex!important}
  .d-sm-grid{display:grid!important}
  .d-sm-table{display:table!important}
  .d-sm-table-row{display:table-row!important}
  .d-sm-table-cell{display:table-cell!important}
}

/* ==== md ≥ 768px ==== */
@media (min-width:768px){
  .d-md-none{display:none!important}
  .d-md-block{display:block!important}
  .d-md-inline{display:inline!important}
  .d-md-inline-block{display:inline-block!important}
  .d-md-flex{display:flex!important}
  .d-md-inline-flex{display:inline-flex!important}
  .d-md-grid{display:grid!important}
  .d-md-table{display:table!important}
  .d-md-table-row{display:table-row!important}
  .d-md-table-cell{display:table-cell!important}
}

/* ==== lg ≥ 992px ==== */
@media (min-width:992px){
  .d-lg-none{display:none!important}
  .d-lg-block{display:block!important}
  .d-lg-inline{display:inline!important}
  .d-lg-inline-block{display:inline-block!important}
  .d-lg-flex{display:flex!important}
  .d-lg-inline-flex{display:inline-flex!important}
  .d-lg-grid{display:grid!important}
  .d-lg-table{display:table!important}
  .d-lg-table-row{display:table-row!important}
  .d-lg-table-cell{display:table-cell!important}
}

/* ==== xl ≥ 1200px ==== */
@media (min-width:1200px){
  .d-xl-none{display:none!important}
  .d-xl-block{display:block!important}
  .d-xl-inline{display:inline!important}
  .d-xl-inline-block{display:inline-block!important}
  .d-xl-flex{display:flex!important}
  .d-xl-inline-flex{display:inline-flex!important}
  .d-xl-grid{display:grid!important}
  .d-xl-table{display:table!important}
  .d-xl-table-row{display:table-row!important}
  .d-xl-table-cell{display:table-cell!important}
}


/* === Text === */
.text-center{ text-align:center!important; }

/* === Sizing === */
.w-100{ width:100%!important; }
.w-auto{ width:auto!important; }
.h-100{ height:100%!important; }
.h-auto{ height:auto!important; }

/* === Position / Z === */
.position-relative{ position:relative!important; }
.z-1{ z-index:1!important; }
.fixed-bottom{
  position:fixed; right:0; bottom:0; left:0;
  z-index:1030;
}

/* === Flex helpers === */
.justify-content-between{ justify-content:space-between!important; }

/* === Spacing scale === */
:root{
  --bs-sp-0:0;
  --bs-sp-1:.25rem;
  --bs-sp-2:.5rem;
  --bs-sp-3:1rem;
  --bs-sp-4:1.5rem;
  --bs-sp-5:3rem;
  --sp-3: 1rem;
  --bs-border-radius-pill: 50em;
}
/* Margin / Padding (only used variants) */
.mb-0{ margin-bottom:var(--bs-sp-0)!important; }
.mb-1{ margin-bottom:var(--bs-sp-1)!important; }
.mb-2{ margin-bottom:var(--bs-sp-2)!important; }
.mb-3{ margin-bottom:var(--bs-sp-3)!important; }
.mb-4{ margin-bottom:var(--bs-sp-4)!important; }
.mb-5{ margin-bottom:var(--bs-sp-5)!important; }

.mt-0{ margin-top:0!important; }
.mt-2{ margin-top:var(--bs-sp-2)!important; }
.mt-3{ margin-top:var(--bs-sp-3)!important; }
.mt-4{ margin-top:var(--bs-sp-4)!important; }

.my-4{ margin-top:var(--bs-sp-4)!important; margin-bottom:var(--bs-sp-4)!important; }

.mx-2{ margin-right:var(--bs-sp-2)!important; margin-left:var(--bs-sp-2)!important; }
.mx-auto{ margin-right:auto!important; margin-left:auto!important; }

.me-2{ margin-right:var(--bs-sp-2)!important; } /* LTR */
.ms-n1{ margin-left:calc(var(--bs-sp-1)*-1)!important; }
.mt-n1{ margin-top:calc(var(--bs-sp-1)*-1)!important; }
.mt-n3{ margin-top:calc(var(--bs-sp-3)*-1)!important; }
.mb-n1{ margin-bottom:calc(var(--bs-sp-1)*-1)!important; }

.ps-3 { padding-inline-start: var(--sp-3) !important; }

.py-1{ padding-top:var(--bs-sp-1)!important; padding-bottom:var(--bs-sp-1)!important; }
.py-2{ padding-top:var(--bs-sp-2)!important; padding-bottom:var(--bs-sp-2)!important; }
.py-3{ padding-top:var(--bs-sp-3)!important; padding-bottom:var(--bs-sp-3)!important; }
.py-4{ padding-top:var(--bs-sp-4)!important; padding-bottom:var(--bs-sp-4)!important; }
.py-5{ padding-top:var(--bs-sp-5)!important; padding-bottom:var(--bs-sp-5)!important; }

.pt-2{ padding-top:var(--bs-sp-2)!important; }
.pt-3{ padding-top:var(--bs-sp-3)!important; }
.pt-4{ padding-top:var(--bs-sp-4)!important; }
.pt-5{ padding-top:var(--bs-sp-5)!important; }

.pb-2{ padding-bottom:var(--bs-sp-2)!important; }
.pb-3{ padding-bottom:var(--bs-sp-3)!important; }
.pb-4{ padding-bottom:var(--bs-sp-4)!important; }
.pb-5{ padding-bottom:var(--bs-sp-5)!important; }

.p-2{ padding:var(--bs-sp-2)!important; }
.p-3{ padding:var(--bs-sp-3)!important; }
.p-4{ padding:var(--bs-sp-4)!important; }
.px-0{ padding-right:0!important; padding-left:0!important; }
.px-1{ padding-right:var(--bs-sp-1)!important; padding-left:var(--bs-sp-1)!important; }
.px-2{ padding-right:var(--bs-sp-2)!important; padding-left:var(--bs-sp-2)!important; }
.px-3{ padding-right:var(--bs-sp-3)!important; padding-left:var(--bs-sp-3)!important; }
.px-4{ padding-right:var(--bs-sp-4)!important; padding-left:var(--bs-sp-4)!important; }
.ps-1{ padding-left:var(--bs-sp-1)!important; }
.pe-1{ padding-right:var(--bs-sp-1)!important; }

/* Responsive spacing used */
@media (min-width:768px){
  .mt-md-5{ margin-top:var(--bs-sp-5)!important; }
  .mb-md-5{ margin-bottom:var(--bs-sp-5)!important; }
  .px-md-4{ padding-right:var(--bs-sp-4)!important; padding-left:var(--bs-sp-4)!important; }
  .px-md-5{ padding-right:var(--bs-sp-5)!important; padding-left:var(--bs-sp-5)!important; }
  .ms-md-5{ margin-left:var(--bs-sp-5)!important; }
}
@media (min-width:992px){
  .mt-lg-4{ margin-top:var(--bs-sp-4)!important; }
  .mb-lg-4{ margin-bottom:var(--bs-sp-4)!important; }
  .px-lg-0{ padding-right:0!important; padding-left:0!important; }
  .px-lg-2{ padding-right:var(--bs-sp-2)!important; padding-left:var(--bs-sp-2)!important; }
}

/* === Grid (only the widths you used) === */
[class^="col-"], [class*=" col-"]{ position:relative; min-height:1px; flex:0 0 auto; }
/* ===== Minimal Bootstrap-like Grid (Columns only) ===== */
/* ガターは行や任意の要素で --bs-gutter-x / --bs-gutter-y を上書き可能 */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left:  calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left:  calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

/* 基本カラム */
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }

/* 12分割（XS <576px） */
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* === Breakpoints ===
   sm: 576px / md: 768px / lg: 992px / xl: 1200px / xxl: 1400px
*/

/* sm ≥ 576px */
@media (min-width: 576px) {
  .col-sm    { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3  { flex: 0 0 auto; width: 25%; }
  .col-sm-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-sm-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9  { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .col-md    { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
  .col-lg    { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
  .col-xl    { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3  { flex: 0 0 auto; width: 25%; }
  .col-xl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-xl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9  { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* xxl ≥ 1400px */
@media (min-width: 1400px) {
  .col-xxl    { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-xxl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-xxl-3  { flex: 0 0 auto; width: 25%; }
  .col-xxl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-xxl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-xxl-6  { flex: 0 0 auto; width: 50%; }
  .col-xxl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-xxl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-xxl-9  { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}


/* ===== Minimal Bootstrap-like Flex Utilities ===== */
/* Display */
.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}

/* Direction */
.flex-row{flex-direction:row!important}
.flex-row-reverse{flex-direction:row-reverse!important}
.flex-column{flex-direction:column!important}
.flex-column-reverse{flex-direction:column-reverse!important}

/* Wrap */
.flex-wrap{flex-wrap:wrap!important}
.flex-nowrap{flex-wrap:nowrap!important}
.flex-wrap-reverse{flex-wrap:wrap-reverse!important}

/* Justify content */
.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 / content / self */
.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}

.align-content-start{align-content:flex-start!important}
.align-content-end{align-content:flex-end!important}
.align-content-center{align-content:center!important}
.align-content-between{align-content:space-between!important}
.align-content-around{align-content:space-around!important}
.align-content-stretch{align-content:stretch!important}

.align-self-auto{align-self:auto!important}
.align-self-start{align-self:flex-start!important}
.align-self-end{align-self:flex-end!important}
.align-self-center{align-self:center!important}
.align-self-baseline{align-self:baseline!important}
.align-self-stretch{align-self:stretch!important}

/* Grow / Shrink / Fill */
.flex-grow-0{flex-grow:0!important}
.flex-grow-1{flex-grow:1!important}
.flex-shrink-0{flex-shrink:0!important}
.flex-shrink-1{flex-shrink:1!important}
.flex-fill{flex:1 1 auto!important}

/* Order */
.order-first{order:-1!important}
.order-0{order:0!important}
.order-1{order:1!important}
.order-2{order:2!important}
.order-3{order:3!important}
.order-4{order:4!important}
.order-5{order:5!important}
.order-last{order:6!important}

/* === Breakpoints ===
   sm: 576px / md: 768px / lg: 992px / xl: 1200px / xxl: 1400px
*/

/* Helper macro: 同名クラスの接頭辞を変えただけの版を量産 */
@media (min-width:576px){
  .d-sm-flex{display:flex!important}
  .d-sm-inline-flex{display:inline-flex!important}

  .flex-sm-row{flex-direction:row!important}
  .flex-sm-row-reverse{flex-direction:row-reverse!important}
  .flex-sm-column{flex-direction:column!important}
  .flex-sm-column-reverse{flex-direction:column-reverse!important}

  .flex-sm-wrap{flex-wrap:wrap!important}
  .flex-sm-nowrap{flex-wrap:nowrap!important}
  .flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}

  .justify-content-sm-start{justify-content:flex-start!important}
  .justify-content-sm-end{justify-content:flex-end!important}
  .justify-content-sm-center{justify-content:center!important}
  .justify-content-sm-between{justify-content:space-between!important}
  .justify-content-sm-around{justify-content:space-around!important}
  .justify-content-sm-evenly{justify-content:space-evenly!important}

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

  .align-content-sm-start{align-content:flex-start!important}
  .align-content-sm-end{align-content:flex-end!important}
  .align-content-sm-center{align-content:center!important}
  .align-content-sm-between{align-content:space-between!important}
  .align-content-sm-around{align-content:space-around!important}
  .align-content-sm-stretch{align-content:stretch!important}

  .align-self-sm-auto{align-self:auto!important}
  .align-self-sm-start{align-self:flex-start!important}
  .align-self-sm-end{align-self:flex-end!important}
  .align-self-sm-center{align-self:center!important}
  .align-self-sm-baseline{align-self:baseline!important}
  .align-self-sm-stretch{align-self:stretch!important}

  .flex-sm-grow-0{flex-grow:0!important}
  .flex-sm-grow-1{flex-grow:1!important}
  .flex-sm-shrink-0{flex-shrink:0!important}
  .flex-sm-shrink-1{flex-shrink:1!important}
  .flex-sm-fill{flex:1 1 auto!important}

  .order-sm-first{order:-1!important}
  .order-sm-0{order:0!important}
  .order-sm-1{order:1!important}
  .order-sm-2{order:2!important}
  .order-sm-3{order:3!important}
  .order-sm-4{order:4!important}
  .order-sm-5{order:5!important}
  .order-sm-last{order:6!important}
}

@media (min-width:768px){
  .d-md-flex{display:flex!important}
  .d-md-inline-flex{display:inline-flex!important}

  .flex-md-row{flex-direction:row!important}
  .flex-md-row-reverse{flex-direction:row-reverse!important}
  .flex-md-column{flex-direction:column!important}
  .flex-md-column-reverse{flex-direction:column-reverse!important}

  .flex-md-wrap{flex-wrap:wrap!important}
  .flex-md-nowrap{flex-wrap:nowrap!important}
  .flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}

  .justify-content-md-start{justify-content:flex-start!important}
  .justify-content-md-end{justify-content:flex-end!important}
  .justify-content-md-center{justify-content:center!important}
  .justify-content-md-between{justify-content:space-between!important}
  .justify-content-md-around{justify-content:space-around!important}
  .justify-content-md-evenly{justify-content:space-evenly!important}

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

  .align-content-md-start{align-content:flex-start!important}
  .align-content-md-end{align-content:flex-end!important}
  .align-content-md-center{align-content:center!important}
  .align-content-md-between{align-content:space-between!important}
  .align-content-md-around{align-content:space-around!important}
  .align-content-md-stretch{align-content:stretch!important}

  .align-self-md-auto{align-self:auto!important}
  .align-self-md-start{align-self:flex-start!important}
  .align-self-md-end{align-self:flex-end!important}
  .align-self-md-center{align-self:center!important}
  .align-self-md-baseline{align-self:baseline!important}
  .align-self-md-stretch{align-self:stretch!important}

  .flex-md-grow-0{flex-grow:0!important}
  .flex-md-grow-1{flex-grow:1!important}
  .flex-md-shrink-0{flex-shrink:0!important}
  .flex-md-shrink-1{flex-shrink:1!important}
  .flex-md-fill{flex:1 1 auto!important}

  .order-md-first{order:-1!important}
  .order-md-0{order:0!important}
  .order-md-1{order:1!important}
  .order-md-2{order:2!important}
  .order-md-3{order:3!important}
  .order-md-4{order:4!important}
  .order-md-5{order:5!important}
  .order-md-last{order:6!important}
}

@media (min-width:992px){
  .d-lg-flex{display:flex!important}
  .d-lg-inline-flex{display:inline-flex!important}
  .flex-lg-row{flex-direction:row!important}
  .flex-lg-row-reverse{flex-direction:row-reverse!important}
  .flex-lg-column{flex-direction:column!important}
  .flex-lg-column-reverse{flex-direction:column-reverse!important}
  .flex-lg-wrap{flex-wrap:wrap!important}
  .flex-lg-nowrap{flex-wrap:nowrap!important}
  .flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}
  .justify-content-lg-start{justify-content:flex-start!important}
  .justify-content-lg-end{justify-content:flex-end!important}
  .justify-content-lg-center{justify-content:center!important}
  .justify-content-lg-between{justify-content:space-between!important}
  .justify-content-lg-around{justify-content:space-around!important}
  .justify-content-lg-evenly{justify-content:space-evenly!important}
  .align-items-lg-start{align-items:flex-start!important}
  .align-items-lg-end{align-items:flex-end!important}
  .align-items-lg-center{align-items:center!important}
  .align-items-lg-baseline{align-items:baseline!important}
  .align-items-lg-stretch{align-items:stretch!important}
  .align-content-lg-start{align-content:flex-start!important}
  .align-content-lg-end{align-content:flex-end!important}
  .align-content-lg-center{align-content:center!important}
  .align-content-lg-between{align-content:space-between!important}
  .align-content-lg-around{align-content:space-around!important}
  .align-content-lg-stretch{align-content:stretch!important}
  .align-self-lg-auto{align-self:auto!important}
  .align-self-lg-start{align-self:flex-start!important}
  .align-self-lg-end{align-self:flex-end!important}
  .align-self-lg-center{align-self:center!important}
  .align-self-lg-baseline{align-self:baseline!important}
  .align-self-lg-stretch{align-self:stretch!important}
  .flex-lg-grow-0{flex-grow:0!important}
  .flex-lg-grow-1{flex-grow:1!important}
  .flex-lg-shrink-0{flex-shrink:0!important}
  .flex-lg-shrink-1{flex-shrink:1!important}
  .flex-lg-fill{flex:1 1 auto!important}
  .order-lg-first{order:-1!important}
  .order-lg-0{order:0!important}
  .order-lg-1{order:1!important}
  .order-lg-2{order:2!important}
  .order-lg-3{order:3!important}
  .order-lg-4{order:4!important}
  .order-lg-5{order:5!important}
  .order-lg-last{order:6!important}
}

@media (min-width:1200px){
  .d-xl-flex{display:flex!important}
  .d-xl-inline-flex{display:inline-flex!important}
  .flex-xl-row{flex-direction:row!important}
  .flex-xl-row-reverse{flex-direction:row-reverse!important}
  .flex-xl-column{flex-direction:column!important}
  .flex-xl-column-reverse{flex-direction:column-reverse!important}
  .flex-xl-wrap{flex-wrap:wrap!important}
  .flex-xl-nowrap{flex-wrap:nowrap!important}
  .flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}
  .justify-content-xl-start{justify-content:flex-start!important}
  .justify-content-xl-end{justify-content:flex-end!important}
  .justify-content-xl-center{justify-content:center!important}
  .justify-content-xl-between{justify-content:space-between!important}
  .justify-content-xl-around{justify-content:space-around!important}
  .justify-content-xl-evenly{justify-content:space-evenly!important}
  .align-items-xl-start{align-items:flex-start!important}
  .align-items-xl-end{align-items:flex-end!important}
  .align-items-xl-center{align-items:center!important}
  .align-items-xl-baseline{align-items:baseline!important}
  .align-items-xl-stretch{align-items:stretch!important}
  .align-content-xl-start{align-content:flex-start!important}
  .align-content-xl-end{align-content:flex-end!important}
  .align-content-xl-center{align-content:center!important}
  .align-content-xl-between{align-content:space-between!important}
  .align-content-xl-around{align-content:space-around!important}
  .align-content-xl-stretch{align-content:stretch!important}
  .align-self-xl-auto{align-self:auto!important}
  .align-self-xl-start{align-self:flex-start!important}
  .align-self-xl-end{align-self:flex-end!important}
  .align-self-xl-center{align-self:center!important}
  .align-self-xl-baseline{align-self:baseline!important}
  .align-self-xl-stretch{align-self:stretch!important}
  .flex-xl-grow-0{flex-grow:0!important}
  .flex-xl-grow-1{flex-grow:1!important}
  .flex-xl-shrink-0{flex-shrink:0!important}
  .flex-xl-shrink-1{flex-shrink:1!important}
  .flex-xl-fill{flex:1 1 auto!important}
  .order-xl-first{order:-1!important}
  .order-xl-0{order:0!important}
  .order-xl-1{order:1!important}
  .order-xl-2{order:2!important}
  .order-xl-3{order:3!important}
  .order-xl-4{order:4!important}
  .order-xl-5{order:5!important}
  .order-xl-last{order:6!important}
}

@media (min-width:1400px){
  .d-xxl-flex{display:flex!important}
  .d-xxl-inline-flex{display:inline-flex!important}
  .flex-xxl-row{flex-direction:row!important}
  .flex-xxl-row-reverse{flex-direction:row-reverse!important}
  .flex-xxl-column{flex-direction:column!important}
  .flex-xxl-column-reverse{flex-direction:column-reverse!important}
  .flex-xxl-wrap{flex-wrap:wrap!important}
  .flex-xxl-nowrap{flex-wrap:nowrap!important}
  .flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}
  .justify-content-xxl-start{justify-content:flex-start!important}
  .justify-content-xxl-end{justify-content:flex-end!important}
  .justify-content-xxl-center{justify-content:center!important}
  .justify-content-xxl-between{justify-content:space-between!important}
  .justify-content-xxl-around{justify-content:space-around!important}
  .justify-content-xxl-evenly{justify-content:space-evenly!important}
  .align-items-xxl-start{align-items:flex-start!important}
  .align-items-xxl-end{align-items:flex-end!important}
  .align-items-xxl-center{align-items:center!important}
  .align-items-xxl-baseline{align-items:baseline!important}
  .align-items-xxl-stretch{align-items:stretch!important}
  .align-content-xxl-start{align-content:flex-start!important}
  .align-content-xxl-end{align-content:flex-end!important}
  .align-content-xxl-center{align-content:center!important}
  .align-content-xxl-between{align-content:space-between!important}
  .align-content-xxl-around{align-content:space-around!important}
  .align-content-xxl-stretch{align-content:stretch!important}
  .align-self-xxl-auto{align-self:auto!important}
  .align-self-xxl-start{align-self:flex-start!important}
  .align-self-xxl-end{align-self:flex-end!important}
  .align-self-xxl-center{align-self:center!important}
  .align-self-xxl-baseline{align-self:baseline!important}
  .align-self-xxl-stretch{align-self:stretch!important}
  .flex-xxl-grow-0{flex-grow:0!important}
  .flex-xxl-grow-1{flex-grow:1!important}
  .flex-xxl-shrink-0{flex-shrink:0!important}
  .flex-xxl-shrink-1{flex-shrink:1!important}
  .flex-xxl-fill{flex:1 1 auto!important}
  .order-xxl-first{order:-1!important}
  .order-xxl-0{order:0!important}
  .order-xxl-1{order:1!important}
  .order-xxl-2{order:2!important}
  .order-xxl-3{order:3!important}
  .order-xxl-4{order:4!important}
  .order-xxl-5{order:5!important}
  .order-xxl-last{order:6!important}
}


.rounded-pill {
  border-radius: var(--bs-border-radius-pill);
}
.btn {
  /* 表示と配置 */
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none; /* テキスト選択を無効に */

  /* 内側の余白 (パディング) */
  padding: 0.375rem 0.75rem;

  /* フォントサイズ */
  font-size: 1rem;

  /* 角の丸み */
  border-radius: 0.375rem;

  /* 枠線 */
  border: 1px solid transparent;

  /* クリック時などのアニメーション */
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.img-fluid{max-width:100%;height:auto}

/* ===== Spacing scale (Bootstrap互換) ===== */
:root{
  --sp-0: 0;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 3rem;
}

/* ===== CSS gap utilities (flex/gridのgap) ===== */
.gap-0{gap:var(--sp-0)!important}
.gap-1{gap:var(--sp-1)!important}
.gap-2{gap:var(--sp-2)!important}
.gap-3{gap:var(--sp-3)!important}
.gap-4{gap:var(--sp-4)!important}
.gap-5{gap:var(--sp-5)!important}

.row-gap-0{row-gap:var(--sp-0)!important}
.row-gap-1{row-gap:var(--sp-1)!important}
.row-gap-2{row-gap:var(--sp-2)!important}
.row-gap-3{row-gap:var(--sp-3)!important}
.row-gap-4{row-gap:var(--sp-4)!important}
.row-gap-5{row-gap:var(--sp-5)!important}

.column-gap-0{column-gap:var(--sp-0)!important}
.column-gap-1{column-gap:var(--sp-1)!important}
.column-gap-2{column-gap:var(--sp-2)!important}
.column-gap-3{column-gap:var(--sp-3)!important}
.column-gap-4{column-gap:var(--sp-4)!important}
.column-gap-5{column-gap:var(--sp-5)!important}

/* ===== Grid gutter utilities (.rowの--bs-gutter制御) ===== */
/* ※あなたの.row実装（--bs-gutter-x / y を読む）に対応 */
.g-0 { --bs-gutter-x:0;        --bs-gutter-y:0; }
.g-1 { --bs-gutter-x:var(--sp-1); --bs-gutter-y:var(--sp-1); }
.g-2 { --bs-gutter-x:var(--sp-2); --bs-gutter-y:var(--sp-2); }
.g-3 { --bs-gutter-x:var(--sp-3); --bs-gutter-y:var(--sp-3); }
.g-4 { --bs-gutter-x:var(--sp-4); --bs-gutter-y:var(--sp-4); }
.g-5 { --bs-gutter-x:var(--sp-5); --bs-gutter-y:var(--sp-5); }

.gx-0{--bs-gutter-x:0}          .gy-0{--bs-gutter-y:0}
.gx-1{--bs-gutter-x:var(--sp-1)} .gy-1{--bs-gutter-y:var(--sp-1)}
.gx-2{--bs-gutter-x:var(--sp-2)} .gy-2{--bs-gutter-y:var(--sp-2)}
.gx-3{--bs-gutter-x:var(--sp-3)} .gy-3{--bs-gutter-y:var(--sp-3)}
.gx-4{--bs-gutter-x:var(--sp-4)} .gy-4{--bs-gutter-y:var(--sp-4)}
.gx-5{--bs-gutter-x:var(--sp-5)} .gy-5{--bs-gutter-y:var(--sp-5)}

/* ===== Breakpoints =====
   sm:576px / md:768px / lg:992px / xl:1200px / xxl:1400px
*/

/* --- sm ≥ 576px --- */
@media (min-width:576px){
  .gap-sm-0{gap:var(--sp-0)!important}
  .gap-sm-1{gap:var(--sp-1)!important}
  .gap-sm-2{gap:var(--sp-2)!important}
  .gap-sm-3{gap:var(--sp-3)!important}
  .gap-sm-4{gap:var(--sp-4)!important}
  .gap-sm-5{gap:var(--sp-5)!important}

  .row-gap-sm-0{row-gap:var(--sp-0)!important}
  .row-gap-sm-1{row-gap:var(--sp-1)!important}
  .row-gap-sm-2{row-gap:var(--sp-2)!important}
  .row-gap-sm-3{row-gap:var(--sp-3)!important}
  .row-gap-sm-4{row-gap:var(--sp-4)!important}
  .row-gap-sm-5{row-gap:var(--sp-5)!important}

  .column-gap-sm-0{column-gap:var(--sp-0)!important}
  .column-gap-sm-1{column-gap:var(--sp-1)!important}
  .column-gap-sm-2{column-gap:var(--sp-2)!important}
  .column-gap-sm-3{column-gap:var(--sp-3)!important}
  .column-gap-sm-4{column-gap:var(--sp-4)!important}
  .column-gap-sm-5{column-gap:var(--sp-5)!important}

  .g-sm-0{--bs-gutter-x:0;--bs-gutter-y:0}
  .g-sm-1{--bs-gutter-x:var(--sp-1);--bs-gutter-y:var(--sp-1)}
  .g-sm-2{--bs-gutter-x:var(--sp-2);--bs-gutter-y:var(--sp-2)}
  .g-sm-3{--bs-gutter-x:var(--sp-3);--bs-gutter-y:var(--sp-3)}
  .g-sm-4{--bs-gutter-x:var(--sp-4);--bs-gutter-y:var(--sp-4)}
  .g-sm-5{--bs-gutter-x:var(--sp-5);--bs-gutter-y:var(--sp-5)}
  .gx-sm-0{--bs-gutter-x:0}          .gy-sm-0{--bs-gutter-y:0}
  .gx-sm-1{--bs-gutter-x:var(--sp-1)} .gy-sm-1{--bs-gutter-y:var(--sp-1)}
  .gx-sm-2{--bs-gutter-x:var(--sp-2)} .gy-sm-2{--bs-gutter-y:var(--sp-2)}
  .gx-sm-3{--bs-gutter-x:var(--sp-3)} .gy-sm-3{--bs-gutter-y:var(--sp-3)}
  .gx-sm-4{--bs-gutter-x:var(--sp-4)} .gy-sm-4{--bs-gutter-y:var(--sp-4)}
  .gx-sm-5{--bs-gutter-x:var(--sp-5)} .gy-sm-5{--bs-gutter-y:var(--sp-5)}
}

/* --- md ≥ 768px --- */
@media (min-width:768px){
  .gap-md-0{gap:var(--sp-0)!important}
  .gap-md-1{gap:var(--sp-1)!important}
  .gap-md-2{gap:var(--sp-2)!important}
  .gap-md-3{gap:var(--sp-3)!important}
  .gap-md-4{gap:var(--sp-4)!important}
  .gap-md-5{gap:var(--sp-5)!important}

  .row-gap-md-0{row-gap:var(--sp-0)!important}
  .row-gap-md-1{row-gap:var(--sp-1)!important}
  .row-gap-md-2{row-gap:var(--sp-2)!important}
  .row-gap-md-3{row-gap:var(--sp-3)!important}
  .row-gap-md-4{row-gap:var(--sp-4)!important}
  .row-gap-md-5{row-gap:var(--sp-5)!important}

  .column-gap-md-0{column-gap:var(--sp-0)!important}
  .column-gap-md-1{column-gap:var(--sp-1)!important}
  .column-gap-md-2{column-gap:var(--sp-2)!important}
  .column-gap-md-3{column-gap:var(--sp-3)!important}
  .column-gap-md-4{column-gap:var(--sp-4)!important}
  .column-gap-md-5{column-gap:var(--sp-5)!important}

  .g-md-0{--bs-gutter-x:0;--bs-gutter-y:0}
  .g-md-1{--bs-gutter-x:var(--sp-1);--bs-gutter-y:var(--sp-1)}
  .g-md-2{--bs-gutter-x:var(--sp-2);--bs-gutter-y:var(--sp-2)}
  .g-md-3{--bs-gutter-x:var(--sp-3);--bs-gutter-y:var(--sp-3)}
  .g-md-4{--bs-gutter-x:var(--sp-4);--bs-gutter-y:var(--sp-4)}
  .g-md-5{--bs-gutter-x:var(--sp-5);--bs-gutter-y:var(--sp-5)}
  .gx-md-0{--bs-gutter-x:0}          .gy-md-0{--bs-gutter-y:0}
  .gx-md-1{--bs-gutter-x:var(--sp-1)} .gy-md-1{--bs-gutter-y:var(--sp-1)}
  .gx-md-2{--bs-gutter-x:var(--sp-2)} .gy-md-2{--bs-gutter-y:var(--sp-2)}
  .gx-md-3{--bs-gutter-x:var(--sp-3)} .gy-md-3{--bs-gutter-y:var(--sp-3)}
  .gx-md-4{--bs-gutter-x:var(--sp-4)} .gy-md-4{--bs-gutter-y:var(--sp-4)}
  .gx-md-5{--bs-gutter-x:var(--sp-5)} .gy-md-5{--bs-gutter-y:var(--sp-5)}
}

/* --- lg ≥ 992px --- */
@media (min-width:992px){
  .gap-lg-0{gap:var(--sp-0)!important}
  .gap-lg-1{gap:var(--sp-1)!important}
  .gap-lg-2{gap:var(--sp-2)!important}
  .gap-lg-3{gap:var(--sp-3)!important}
  .gap-lg-4{gap:var(--sp-4)!important}
  .gap-lg-5{gap:var(--sp-5)!important}

  .row-gap-lg-0{row-gap:var(--sp-0)!important}
  .row-gap-lg-1{row-gap:var(--sp-1)!important}
  .row-gap-lg-2{row-gap:var(--sp-2)!important}
  .row-gap-lg-3{row-gap:var(--sp-3)!important}
  .row-gap-lg-4{row-gap:var(--sp-4)!important}
  .row-gap-lg-5{row-gap:var(--sp-5)!important}

  .column-gap-lg-0{column-gap:var(--sp-0)!important}
  .column-gap-lg-1{column-gap:var(--sp-1)!important}
  .column-gap-lg-2{column-gap:var(--sp-2)!important}
  .column-gap-lg-3{column-gap:var(--sp-3)!important}
  .column-gap-lg-4{column-gap:var(--sp-4)!important}
  .column-gap-lg-5{column-gap:var(--sp-5)!important}

  .g-lg-0{--bs-gutter-x:0;--bs-gutter-y:0}
  .g-lg-1{--bs-gutter-x:var(--sp-1);--bs-gutter-y:var(--sp-1)}
  .g-lg-2{--bs-gutter-x:var(--sp-2);--bs-gutter-y:var(--sp-2)}
  .g-lg-3{--bs-gutter-x:var(--sp-3);--bs-gutter-y:var(--sp-3)}
  .g-lg-4{--bs-gutter-x:var(--sp-4);--bs-gutter-y:var(--sp-4)}
  .g-lg-5{--bs-gutter-x:var(--sp-5);--bs-gutter-y:var(--sp-5)}
  .gx-lg-0{--bs-gutter-x:0}          .gy-lg-0{--bs-gutter-y:0}
  .gx-lg-1{--bs-gutter-x:var(--sp-1)} .gy-lg-1{--bs-gutter-y:var(--sp-1)}
  .gx-lg-2{--bs-gutter-x:var(--sp-2)} .gy-lg-2{--bs-gutter-y:var(--sp-2)}
  .gx-lg-3{--bs-gutter-x:var(--sp-3)} .gy-lg-3{--bs-gutter-y:var(--sp-3)}
  .gx-lg-4{--bs-gutter-x:var(--sp-4)} .gy-lg-4{--bs-gutter-y:var(--sp-4)}
  .gx-lg-5{--bs-gutter-x:var(--sp-5)} .gy-lg-5{--bs-gutter-y:var(--sp-5)}
}

/* --- xl ≥ 1200px --- */
@media (min-width:1200px){
  .gap-xl-0{gap:var(--sp-0)!important}
  .gap-xl-1{gap:var(--sp-1)!important}
  .gap-xl-2{gap:var(--sp-2)!important}
  .gap-xl-3{gap:var(--sp-3)!important}
  .gap-xl-4{gap:var(--sp-4)!important}
  .gap-xl-5{gap:var(--sp-5)!important}

  .row-gap-xl-0{row-gap:var(--sp-0)!important}
  .row-gap-xl-1{row-gap:var(--sp-1)!important}
  .row-gap-xl-2{row-gap:var(--sp-2)!important}
  .row-gap-xl-3{row-gap:var(--sp-3)!important}
  .row-gap-xl-4{row-gap:var(--sp-4)!important}
  .row-gap-xl-5{row-gap:var(--sp-5)!important}

  .column-gap-xl-0{column-gap:var(--sp-0)!important}
  .column-gap-xl-1{column-gap:var(--sp-1)!important}
  .column-gap-xl-2{column-gap:var(--sp-2)!important}
  .column-gap-xl-3{column-gap:var(--sp-3)!important}
  .column-gap-xl-4{column-gap:var(--sp-4)!important}
  .column-gap-xl-5{column-gap:var(--sp-5)!important}

  .g-xl-0{--bs-gutter-x:0;--bs-gutter-y:0}
  .g-xl-1{--bs-gutter-x:var(--sp-1);--bs-gutter-y:var(--sp-1)}
  .g-xl-2{--bs-gutter-x:var(--sp-2);--bs-gutter-y:var(--sp-2)}
  .g-xl-3{--bs-gutter-x:var(--sp-3);--bs-gutter-y:var(--sp-3)}
  .g-xl-4{--bs-gutter-x:var(--sp-4);--bs-gutter-y:var(--sp-4)}
  .g-xl-5{--bs-gutter-x:var(--sp-5);--bs-gutter-y:var(--sp-5)}
  .gx-xl-0{--bs-gutter-x:0}          .gy-xl-0{--bs-gutter-y:0}
  .gx-xl-1{--bs-gutter-x:var(--sp-1)} .gy-xl-1{--bs-gutter-y:var(--sp-1)}
  .gx-xl-2{--bs-gutter-x:var(--sp-2)} .gy-xl-2{--bs-gutter-y:var(--sp-2)}
  .gx-xl-3{--bs-gutter-x:var(--sp-3)} .gy-xl-3{--bs-gutter-y:var(--sp-3)}
  .gx-xl-4{--bs-gutter-x:var(--sp-4)} .gy-xl-4{--bs-gutter-y:var(--sp-4)}
  .gx-xl-5{--bs-gutter-x:var(--sp-5)} .gy-xl-5{--bs-gutter-y:var(--sp-5)}
}

/* --- xxl ≥ 1400px --- */
@media (min-width:1400px){
  .gap-xxl-0{gap:var(--sp-0)!important}
  .gap-xxl-1{gap:var(--sp-1)!important}
  .gap-xxl-2{gap:var(--sp-2)!important}
  .gap-xxl-3{gap:var(--sp-3)!important}
  .gap-xxl-4{gap:var(--sp-4)!important}
  .gap-xxl-5{gap:var(--sp-5)!important}

  .row-gap-xxl-0{row-gap:var(--sp-0)!important}
  .row-gap-xxl-1{row-gap:var(--sp-1)!important}
  .row-gap-xxl-2{row-gap:var(--sp-2)!important}
  .row-gap-xxl-3{row-gap:var(--sp-3)!important}
  .row-gap-xxl-4{row-gap:var(--sp-4)!important}
  .row-gap-xxl-5{row-gap:var(--sp-5)!important}

  .column-gap-xxl-0{column-gap:var(--sp-0)!important}
  .column-gap-xxl-1{column-gap:var(--sp-1)!important}
  .column-gap-xxl-2{column-gap:var(--sp-2)!important}
  .column-gap-xxl-3{column-gap:var(--sp-3)!important}
  .column-gap-xxl-4{column-gap:var(--sp-4)!important}
  .column-gap-xxl-5{column-gap:var(--sp-5)!important}

  .g-xxl-0{--bs-gutter-x:0;--bs-gutter-y:0}
  .g-xxl-1{--bs-gutter-x:var(--sp-1);--bs-gutter-y:var(--sp-1)}
  .g-xxl-2{--bs-gutter-x:var(--sp-2);--bs-gutter-y:var(--sp-2)}
  .g-xxl-3{--bs-gutter-x:var(--sp-3);--bs-gutter-y:var(--sp-3)}
  .g-xxl-4{--bs-gutter-x:var(--sp-4);--bs-gutter-y:var(--sp-4)}
  .g-xxl-5{--bs-gutter-x:var(--sp-5);--bs-gutter-y:var(--sp-5)}
  .gx-xxl-0{--bs-gutter-x:0}          .gy-xxl-0{--bs-gutter-y:0}
  .gx-xxl-1{--bs-gutter-x:var(--sp-1)} .gy-xxl-1{--bs-gutter-y:var(--sp-1)}
  .gx-xxl-2{--bs-gutter-x:var(--sp-2)} .gy-xxl-2{--bs-gutter-y:var(--sp-2)}
  .gx-xxl-3{--bs-gutter-x:var(--sp-3)} .gy-xxl-3{--bs-gutter-y:var(--sp-3)}
  .gx-xxl-4{--bs-gutter-x:var(--sp-4)} .gy-xxl-4{--bs-gutter-y:var(--sp-4)}
  .gx-xxl-5{--bs-gutter-x:var(--sp-5)} .gy-xxl-5{--bs-gutter-y:var(--sp-5)}
}