@charset "utf-8";
/* レイアウトCSS */

.center-box {
  display: flex;
  justify-content: center; /* 左右中央揃え */
}

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

/* 基本グリッド*/
.container {
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
}

/* グリッドの基本設定 */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* 基本 col-1 ～ col-12 */
.col-1 {
  flex: 0 0 auto;
  width: 8.3333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.6667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.3333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.6667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.3333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.6667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.3333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.6667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* レスポンシブ対応（sm: 576px以上） */
@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* md: 768px以上 */
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* lg: 992px以上 */
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* xl: 1200px以上 */
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* xxl: 1400px以上 */
@media (min-width: 1400px) {
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

.col-auto {
  flex: 0 0 auto;
}

/* 縦の整列位置 */
.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

/* 共通：中央寄せ */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* マージン指定 */
/* マージンスケール */
:root {
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 3rem;
}

/* 全方向 */
.m-0 {
  margin: var(--sp-0);
}
.m-1 {
  margin: var(--sp-1);
}
.m-2 {
  margin: var(--sp-2);
}
.m-3 {
  margin: var(--sp-3);
}
.m-4 {
  margin: var(--sp-4);
}
.m-5 {
  margin: var(--sp-5);
}

/* 上 */
.mt-0 {
  margin-top: var(--sp-0);
}
.mt-1 {
  margin-top: var(--sp-1);
}
.mt-2 {
  margin-top: var(--sp-2);
}
.mt-3 {
  margin-top: var(--sp-3);
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-5 {
  margin-top: var(--sp-5);
}

/* 下 */
.mb-0 {
  margin-bottom: var(--sp-0);
}
.mb-1 {
  margin-bottom: var(--sp-1);
}
.mb-2 {
  margin-bottom: var(--sp-2);
}
.mb-3 {
  margin-bottom: var(--sp-3);
}
.mb-4 {
  margin-bottom: var(--sp-4);
}
.mb-5 {
  margin-bottom: var(--sp-5);
}

/* 左（Start） */
.ms-0 {
  margin-left: var(--sp-0);
}
.ms-1 {
  margin-left: var(--sp-1);
}
.ms-2 {
  margin-left: var(--sp-2);
}
.ms-3 {
  margin-left: var(--sp-3);
}
.ms-4 {
  margin-left: var(--sp-4);
}
.ms-5 {
  margin-left: var(--sp-5);
}

/* 右（End） */
.me-0 {
  margin-right: var(--sp-0);
}
.me-1 {
  margin-right: var(--sp-1);
}
.me-2 {
  margin-right: var(--sp-2);
}
.me-3 {
  margin-right: var(--sp-3);
}
.me-4 {
  margin-right: var(--sp-4);
}
.me-5 {
  margin-right: var(--sp-5);
}

/* 横方向 */
.mx-0 {
  margin-left: var(--sp-0);
  margin-right: var(--sp-0);
}
.mx-1 {
  margin-left: var(--sp-1);
  margin-right: var(--sp-1);
}
.mx-2 {
  margin-left: var(--sp-2);
  margin-right: var(--sp-2);
}
.mx-3 {
  margin-left: var(--sp-3);
  margin-right: var(--sp-3);
}
.mx-4 {
  margin-left: var(--sp-4);
  margin-right: var(--sp-4);
}
.mx-5 {
  margin-left: var(--sp-5);
  margin-right: var(--sp-5);
}

/* 縦方向 */
.my-0 {
  margin-top: var(--sp-0);
  margin-bottom: var(--sp-0);
}
.my-1 {
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.my-2 {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.my-3 {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.my-4 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.my-5 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
}

/* sm（576px以上） */
@media (min-width: 576px) {
  .m-sm-0 { margin: var(--sp-0); }
  .m-sm-1 { margin: var(--sp-1); }
  .m-sm-2 { margin: var(--sp-2); }
  .m-sm-3 { margin: var(--sp-3); }
  .m-sm-4 { margin: var(--sp-4); }
  .m-sm-5 { margin: var(--sp-5); }

  .mt-sm-0 { margin-top: var(--sp-0); }
  .mt-sm-1 { margin-top: var(--sp-1); }
  .mt-sm-2 { margin-top: var(--sp-2); }
  .mt-sm-3 { margin-top: var(--sp-3); }
  .mt-sm-4 { margin-top: var(--sp-4); }
  .mt-sm-5 { margin-top: var(--sp-5); }

  .mb-sm-0 { margin-bottom: var(--sp-0); }
  .mb-sm-1 { margin-bottom: var(--sp-1); }
  .mb-sm-2 { margin-bottom: var(--sp-2); }
  .mb-sm-3 { margin-bottom: var(--sp-3); }
  .mb-sm-4 { margin-bottom: var(--sp-4); }
  .mb-sm-5 { margin-bottom: var(--sp-5); }

  .ms-sm-0 { margin-left: var(--sp-0); }
  .ms-sm-1 { margin-left: var(--sp-1); }
  .ms-sm-2 { margin-left: var(--sp-2); }
  .ms-sm-3 { margin-left: var(--sp-3); }
  .ms-sm-4 { margin-left: var(--sp-4); }
  .ms-sm-5 { margin-left: var(--sp-5); }

  .me-sm-0 { margin-right: var(--sp-0); }
  .me-sm-1 { margin-right: var(--sp-1); }
  .me-sm-2 { margin-right: var(--sp-2); }
  .me-sm-3 { margin-right: var(--sp-3); }
  .me-sm-4 { margin-right: var(--sp-4); }
  .me-sm-5 { margin-right: var(--sp-5); }

  .mx-sm-0 { margin-left: var(--sp-0); margin-right: var(--sp-0); }
  .mx-sm-1 { margin-left: var(--sp-1); margin-right: var(--sp-1); }
  .mx-sm-2 { margin-left: var(--sp-2); margin-right: var(--sp-2); }
  .mx-sm-3 { margin-left: var(--sp-3); margin-right: var(--sp-3); }
  .mx-sm-4 { margin-left: var(--sp-4); margin-right: var(--sp-4); }
  .mx-sm-5 { margin-left: var(--sp-5); margin-right: var(--sp-5); }

  .my-sm-0 { margin-top: var(--sp-0); margin-bottom: var(--sp-0); }
  .my-sm-1 { margin-top: var(--sp-1); margin-bottom: var(--sp-1); }
  .my-sm-2 { margin-top: var(--sp-2); margin-bottom: var(--sp-2); }
  .my-sm-3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
  .my-sm-4 { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
  .my-sm-5 { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
}

/* md（768px以上） */
@media (min-width: 768px) {
  .m-md-0 { margin: var(--sp-0); }
  .m-md-1 { margin: var(--sp-1); }
  .m-md-2 { margin: var(--sp-2); }
  .m-md-3 { margin: var(--sp-3); }
  .m-md-4 { margin: var(--sp-4); }
  .m-md-5 { margin: var(--sp-5); }

  .mt-md-0 { margin-top: var(--sp-0); }
  .mt-md-1 { margin-top: var(--sp-1); }
  .mt-md-2 { margin-top: var(--sp-2); }
  .mt-md-3 { margin-top: var(--sp-3); }
  .mt-md-4 { margin-top: var(--sp-4); }
  .mt-md-5 { margin-top: var(--sp-5); }

  .mb-md-0 { margin-bottom: var(--sp-0); }
  .mb-md-1 { margin-bottom: var(--sp-1); }
  .mb-md-2 { margin-bottom: var(--sp-2); }
  .mb-md-3 { margin-bottom: var(--sp-3); }
  .mb-md-4 { margin-bottom: var(--sp-4); }
  .mb-md-5 { margin-bottom: var(--sp-5); }

  .ms-md-0 { margin-left: var(--sp-0); }
  .ms-md-1 { margin-left: var(--sp-1); }
  .ms-md-2 { margin-left: var(--sp-2); }
  .ms-md-3 { margin-left: var(--sp-3); }
  .ms-md-4 { margin-left: var(--sp-4); }
  .ms-md-5 { margin-left: var(--sp-5); }

  .me-md-0 { margin-right: var(--sp-0); }
  .me-md-1 { margin-right: var(--sp-1); }
  .me-md-2 { margin-right: var(--sp-2); }
  .me-md-3 { margin-right: var(--sp-3); }
  .me-md-4 { margin-right: var(--sp-4); }
  .me-md-5 { margin-right: var(--sp-5); }

  .mx-md-0 { margin-left: var(--sp-0); margin-right: var(--sp-0); }
  .mx-md-1 { margin-left: var(--sp-1); margin-right: var(--sp-1); }
  .mx-md-2 { margin-left: var(--sp-2); margin-right: var(--sp-2); }
  .mx-md-3 { margin-left: var(--sp-3); margin-right: var(--sp-3); }
  .mx-md-4 { margin-left: var(--sp-4); margin-right: var(--sp-4); }
  .mx-md-5 { margin-left: var(--sp-5); margin-right: var(--sp-5); }

  .my-md-0 { margin-top: var(--sp-0); margin-bottom: var(--sp-0); }
  .my-md-1 { margin-top: var(--sp-1); margin-bottom: var(--sp-1); }
  .my-md-2 { margin-top: var(--sp-2); margin-bottom: var(--sp-2); }
  .my-md-3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
  .my-md-4 { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
  .my-md-5 { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
}

/* 全方向 */
.p-0 {
  padding: var(--sp-0);
}
.p-1 {
  padding: var(--sp-1);
}
.p-2 {
  padding: var(--sp-2);
}
.p-3 {
  padding: var(--sp-3);
}
.p-4 {
  padding: var(--sp-4);
}
.p-5 {
  padding: var(--sp-5);
}

/* 上 */
.pt-0 {
  padding-top: var(--sp-0);
}
.pt-1 {
  padding-top: var(--sp-1);
}
.pt-2 {
  padding-top: var(--sp-2);
}
.pt-3 {
  padding-top: var(--sp-3);
}
.pt-4 {
  padding-top: var(--sp-4);
}
.pt-5 {
  padding-top: var(--sp-5);
}

/* 下 */
.pb-0 {
  padding-bottom: var(--sp-0);
}
.pb-1 {
  padding-bottom: var(--sp-1);
}
.pb-2 {
  padding-bottom: var(--sp-2);
}
.pb-3 {
  padding-bottom: var(--sp-3);
}
.pb-4 {
  padding-bottom: var(--sp-4);
}
.pb-5 {
  padding-bottom: var(--sp-5);
}

/* 左（Start） */
.ps-0 {
  padding-left: var(--sp-0);
}
.ps-1 {
  padding-left: var(--sp-1);
}
.ps-2 {
  padding-left: var(--sp-2);
}
.ps-3 {
  padding-left: var(--sp-3);
}
.ps-4 {
  padding-left: var(--sp-4);
}
.ps-5 {
  padding-left: var(--sp-5);
}

/* 右（End） */
.pe-0 {
  padding-right: var(--sp-0);
}
.pe-1 {
  padding-right: var(--sp-1);
}
.pe-2 {
  padding-right: var(--sp-2);
}
.pe-3 {
  padding-right: var(--sp-3);
}
.pe-4 {
  padding-right: var(--sp-4);
}
.pe-5 {
  padding-right: var(--sp-5);
}

/* 横方向 */
.px-0 {
  padding-left: var(--sp-0);
  padding-right: var(--sp-0);
}
.px-1 {
  padding-left: var(--sp-1);
  padding-right: var(--sp-1);
}
.px-2 {
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.px-3 {
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}
.px-4 {
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.px-5 {
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

/* 縦方向 */
.py-0 {
  padding-top: var(--sp-0);
  padding-bottom: var(--sp-0);
}
.py-1 {
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
}
.py-2 {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.py-3 {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.py-4 {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.py-5 {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}

/* sm（576px以上） */
@media (min-width: 576px) {
  .p-sm-0 { padding: var(--sp-0); }
  .p-sm-1 { padding: var(--sp-1); }
  .p-sm-2 { padding: var(--sp-2); }
  .p-sm-3 { padding: var(--sp-3); }
  .p-sm-4 { padding: var(--sp-4); }
  .p-sm-5 { padding: var(--sp-5); }

  .pt-sm-0 { padding-top: var(--sp-0); }
  .pt-sm-1 { padding-top: var(--sp-1); }
  .pt-sm-2 { padding-top: var(--sp-2); }
  .pt-sm-3 { padding-top: var(--sp-3); }
  .pt-sm-4 { padding-top: var(--sp-4); }
  .pt-sm-5 { padding-top: var(--sp-5); }

  .pb-sm-0 { padding-bottom: var(--sp-0); }
  .pb-sm-1 { padding-bottom: var(--sp-1); }
  .pb-sm-2 { padding-bottom: var(--sp-2); }
  .pb-sm-3 { padding-bottom: var(--sp-3); }
  .pb-sm-4 { padding-bottom: var(--sp-4); }
  .pb-sm-5 { padding-bottom: var(--sp-5); }

  .ps-sm-0 { padding-left: var(--sp-0); }
  .ps-sm-1 { padding-left: var(--sp-1); }
  .ps-sm-2 { padding-left: var(--sp-2); }
  .ps-sm-3 { padding-left: var(--sp-3); }
  .ps-sm-4 { padding-left: var(--sp-4); }
  .ps-sm-5 { padding-left: var(--sp-5); }

  .pe-sm-0 { padding-right: var(--sp-0); }
  .pe-sm-1 { padding-right: var(--sp-1); }
  .pe-sm-2 { padding-right: var(--sp-2); }
  .pe-sm-3 { padding-right: var(--sp-3); }
  .pe-sm-4 { padding-right: var(--sp-4); }
  .pe-sm-5 { padding-right: var(--sp-5); }

  .px-sm-0 { padding-left: var(--sp-0); padding-right: var(--sp-0); }
  .px-sm-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .px-sm-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .px-sm-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .px-sm-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .px-sm-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }

  .py-sm-0 { padding-top: var(--sp-0); padding-bottom: var(--sp-0); }
  .py-sm-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .py-sm-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .py-sm-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .py-sm-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .py-sm-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
}

/* md（768px以上） */
@media (min-width: 768px) {
  /* 上と同じ構造で .p-md-* 系を記述 */
  .p-md-0 { padding: var(--sp-0); }
  .p-md-1 { padding: var(--sp-1); }
  .p-md-2 { padding: var(--sp-2); }
  .p-md-3 { padding: var(--sp-3); }
  .p-md-4 { padding: var(--sp-4); }
  .p-md-5 { padding: var(--sp-5); }
  .pt-md-0 { padding-top: var(--sp-0); }
  .pt-md-1 { padding-top: var(--sp-1); }
  .pt-md-2 { padding-top: var(--sp-2); }
  .pt-md-3 { padding-top: var(--sp-3); }
  .pt-md-4 { padding-top: var(--sp-4); }
  .pt-md-5 { padding-top: var(--sp-5); }
  .pb-md-0 { padding-bottom: var(--sp-0); }
  .pb-md-1 { padding-bottom: var(--sp-1); }
  .pb-md-2 { padding-bottom: var(--sp-2); }
  .pb-md-3 { padding-bottom: var(--sp-3); }
  .pb-md-4 { padding-bottom: var(--sp-4); }
  .pb-md-5 { padding-bottom: var(--sp-5); }
  .ps-md-0 { padding-left: var(--sp-0); }
  .ps-md-1 { padding-left: var(--sp-1); }
  .ps-md-2 { padding-left: var(--sp-2); }
  .ps-md-3 { padding-left: var(--sp-3); }
  .ps-md-4 { padding-left: var(--sp-4); }
  .ps-md-5 { padding-left: var(--sp-5); }
  .pe-md-0 { padding-right: var(--sp-0); }
  .pe-md-1 { padding-right: var(--sp-1); }
  .pe-md-2 { padding-right: var(--sp-2); }
  .pe-md-3 { padding-right: var(--sp-3); }
  .pe-md-4 { padding-right: var(--sp-4); }
  .pe-md-5 { padding-right: var(--sp-5); }
  .px-md-0 { padding-left: var(--sp-0); padding-right: var(--sp-0); }
  .px-md-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .px-md-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .px-md-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .px-md-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .px-md-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .py-md-0 { padding-top: var(--sp-0); padding-bottom: var(--sp-0); }
  .py-md-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
  .py-md-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .py-md-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .py-md-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .py-md-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
}

/* Gapスケール */
:root {
  --gap-0: 0;
  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 1rem;
  --gap-4: 1.5rem;
  --gap-5: 3rem;
}

/* 通常の gap（row + column 両方に適用） */
.gap-0 {
  gap: var(--gap-0) !;
}
.gap-1 {
  gap: var(--gap-1);
}
.gap-2 {
  gap: var(--gap-2);
}
.gap-3 {
  gap: var(--gap-3);
}
.gap-4 {
  gap: var(--gap-4);
}
.gap-5 {
  gap: var(--gap-5);
}

/* 横方向（column gap） */
.column-gap-0 {
  column-gap: var(--gap-0);
}
.column-gap-1 {
  column-gap: var(--gap-1);
}
.column-gap-2 {
  column-gap: var(--gap-2);
}
.column-gap-3 {
  column-gap: var(--gap-3);
}
.column-gap-4 {
  column-gap: var(--gap-4);
}
.column-gap-5 {
  column-gap: var(--gap-5);
}

/* 縦方向（row gap） */
.row-gap-0 {
  row-gap: var(--gap-0);
}
.row-gap-1 {
  row-gap: var(--gap-1);
}
.row-gap-2 {
  row-gap: var(--gap-2);
}
.row-gap-3 {
  row-gap: var(--gap-3);
}
.row-gap-4 {
  row-gap: var(--gap-4);
}
.row-gap-5 {
  row-gap: var(--gap-5);
}

/* order 対応 */
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}

/* md: 768px以上 */
@media (min-width: 768px) {
.order-md-1 {
  order: 1;
}
.order-md-2 {
  order: 2;
}
.order-md-3 {
  order: 3;
}
}


/* md: 992px以上 */
@media (min-width: 992px) {
.order-lg-1 {
  order: 1;
}
.order-lg-2 {
  order: 2;
}
.order-lg-3 {
  order: 3;
}
}

/*横並び*/
.d-flex {
  display: flex;
}

/*折り返し*/
.flex-wrap{
  flex-wrap: wrap;
}

/*均等配置*/
.justify-content {
  justify-content: space-between;
}

/*中央配置*/
.justify-content-center {
  justify-content: center;
}

/*中央配置　スペースあり*/
.justify-content-around{
justify-content: space-around;
}

/*google map*/
.map-section {
    padding: 40px 0;
    text-align: center;
}

.map-responsive {
    position: relative;
    padding-top: 56.25%; /* 16:9 の比率 (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 1200px;    /* PCで広がりすぎないように制限 */
    margin: 0 auto;
    border: 3px solid #eee; /* 少し枠線をつけると地図が引き締まります */
    border-radius: 8px;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* 親要素の幅いっぱいに */
    height: 100% !important; /* 親要素の高さいっぱいに */
}