/* Color
---------------------------------------- */
.text-theme-color {
  color: var(--color-theme);
}
.text-white {
  color: var(--color-white);
}
@media (min-width: 768px) {
  .text-white-pc {
    color: #fff !important;
  }
}


/* Font Size
---------------------------------------- */
/*
  最小値（指定数値×フォントサイズ最小係数） ～ 変動値（430px時点で指定数値） ～ 最大値（指定数値）
  最小値~最大値で変動し、430px以上から最大値で固定される。

  .fz-20の場合: 最小16px ～ 画面幅430PXの時20px ～ 最大20px
*/

/* .fz-12 { font-size: clamp(calc(12px * var(--sp-min-scale)), calc(12 * var(--sp-unit)), 12px); } */

.fz-12 { font-size: min(calc(12 * var(--tablet-unit)), 12px); }
.fz-14 { font-size: min(calc(14 * var(--tablet-unit)), 14px); }
.fz-16 { font-size: min(calc(16 * var(--tablet-unit)), 16px); }
.fz-18 { font-size: min(calc(18 * var(--tablet-unit)), 18px); }
.fz-20 { font-size: min(calc(20 * var(--tablet-unit)), 20px); }
.fz-24 { font-size: min(calc(24 * var(--tablet-unit)), 24px); }
.fz-32 { font-size: min(calc(32 * var(--tablet-unit)), 32px); }
.fz-40 { font-size: min(calc(40 * var(--tablet-unit)), 40px); }
.fz-48 { font-size: min(calc(48 * var(--tablet-unit)), 48px); }
.fz-56 { font-size: min(calc(56 * var(--tablet-unit)), 56px); }
.fz-64 { font-size: min(calc(64 * var(--tablet-unit)), 64px); }
.fz-72 { font-size: min(calc(72 * var(--tablet-unit)), 72px); }
.fz-80 { font-size: min(calc(80 * var(--tablet-unit)), 80px); }
.fz-90 { font-size: min(calc(90 * var(--tablet-unit)), 90px); }
.fz-100 { font-size: min(calc(100 * var(--tablet-unit)), 100px); }

@media (max-width: 767px) {
  .fz-12 { font-size: calc(12 * var(--sp-unit)); }
  .fz-14 { font-size: calc(14 * var(--sp-unit)); }
  .fz-16 { font-size: calc(16 * var(--sp-unit)); }
  .fz-18 { font-size: calc(18 * var(--sp-unit)); }
  .fz-20 { font-size: calc(20 * var(--sp-unit)); }
  .fz-24 { font-size: calc(24 * var(--sp-unit)); }
  .fz-32 { font-size: calc(32 * var(--sp-unit)); }
  .fz-40 { font-size: calc(40 * var(--sp-unit)); }
  .fz-48 { font-size: calc(48 * var(--sp-unit)); }
  .fz-56 { font-size: calc(56 * var(--sp-unit)); }
  .fz-64 { font-size: calc(64 * var(--sp-unit)); }
  .fz-72 { font-size: calc(72 * var(--sp-unit)); }
  .fz-80 { font-size: calc(80 * var(--sp-unit)); }
  .fz-90 { font-size: calc(90 * var(--sp-unit)); }
  .fz-100 { font-size: calc(100 * var(--sp-unit)); }
}

/*
  文字サイズ 変数対応
  SP用、PC用変数を渡すことで、指定pxで表示される

  Usage:
  <p
    class="text-responsive"
    style="--fz-sp: 24; --fz-pc: 54;"
  >
      テキスト
  </p>
*/
.text-responsive {
  font-size: calc(var(--fz-pc) * 1px);
}

@media (min-width: 768px) and (max-width: 1440px) {
  .text-responsive {
    font-size: calc(var(--fz-pc) * var(--tablet-unit));
  }
}

@media (max-width: 767px) {
  .text-responsive {
    font-size: calc(var(--fz-sp) * var(--sp-unit));
  }
}


/* Text Style
---------------------------------------- */
.lh-1 { line-height: 1; }
.lh-11 { line-height: 1.1; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-2 { line-height: 2; }

.bold-400 {
  font-weight: 400;
}
.bold-500 {
  font-weight: 500;
}
.bold-600 {
  font-weight: 600;
}
.bold-700 {
  font-weight: 700;
}
.italic {
  font-style: italic;
}


/* Margin
---------------------------------------- */
/* PC/SP でほぼ同じ幅の時に使用するマージンユーティリティ */
.mt-0 {margin-top: 0px !important;}
.mt-1 {margin-top: min(calc(1 * var(--tablet-unit)), 1px) !important;}
.mt-2 {margin-top: min(calc(2 * var(--tablet-unit)), 2px) !important;}
.mt-3 {margin-top: min(calc(3 * var(--tablet-unit)), 3px) !important;}
.mt-4 {margin-top: min(calc(4 * var(--tablet-unit)), 4px) !important;}
.mt-5 {margin-top: min(calc(5 * var(--tablet-unit)), 5px) !important;}
.mt-6 {margin-top: min(calc(6 * var(--tablet-unit)), 6px) !important;}
.mt-7 {margin-top: min(calc(7 * var(--tablet-unit)), 7px) !important;}
.mt-8 {margin-top: min(calc(8 * var(--tablet-unit)), 8px) !important;}
.mt-9 {margin-top: min(calc(9 * var(--tablet-unit)), 9px) !important;}
.mt-10 {margin-top: min(calc(10 * var(--tablet-unit)), 10px) !important;}
.mt-30 {margin-top: min(calc(30 * var(--tablet-unit)), 30px) !important;}
.mt-40 {margin-top: min(calc(40 * var(--tablet-unit)), 40px) !important;}
.mt-50 {margin-top: min(calc(50 * var(--tablet-unit)), 50px) !important;}
.mt-60 {margin-top: min(calc(60 * var(--tablet-unit)), 60px) !important;}
.mt-70 {margin-top: min(calc(70 * var(--tablet-unit)), 70px) !important;}
.mt-80 {margin-top: min(calc(80 * var(--tablet-unit)), 80px) !important;}
.mt-90 {margin-top: min(calc(90 * var(--tablet-unit)), 90px) !important;}
.mt-100 {margin-top: min(calc(100 * var(--tablet-unit)), 100px) !important;}
.mt-110 {margin-top: min(calc(110 * var(--tablet-unit)), 110px) !important;}
.mt-120 {margin-top: min(calc(120 * var(--tablet-unit)), 120px) !important;}
.mt-130 {margin-top: min(calc(130 * var(--tablet-unit)), 130px) !important;}
.mt-140 {margin-top: min(calc(140 * var(--tablet-unit)), 140px) !important;}
.mt-150 {margin-top: min(calc(150 * var(--tablet-unit)), 150px) !important;}

.mb-0 {margin-bottom: 0px !important;}
.mb-1 {margin-bottom: min(calc(1 * var(--tablet-unit)), 1px) !important;}
.mb-2 {margin-bottom: min(calc(2 * var(--tablet-unit)), 2px) !important;}
.mb-3 {margin-bottom: min(calc(3 * var(--tablet-unit)), 3px) !important;}
.mb-4 {margin-bottom: min(calc(4 * var(--tablet-unit)), 4px) !important;}
.mb-5 {margin-bottom: min(calc(5 * var(--tablet-unit)), 5px) !important;}
.mb-6 {margin-bottom: min(calc(6 * var(--tablet-unit)), 6px) !important;}
.mb-7 {margin-bottom: min(calc(7 * var(--tablet-unit)), 7px) !important;}
.mb-8 {margin-bottom: min(calc(8 * var(--tablet-unit)), 8px) !important;}
.mb-9 {margin-bottom: min(calc(9 * var(--tablet-unit)), 9px) !important;}
.mb-10 {margin-bottom: min(calc(10 * var(--tablet-unit)), 10px) !important;}
.mb-20 {margin-bottom: min(calc(20 * var(--tablet-unit)), 20px) !important;}
.mb-30 {margin-bottom: min(calc(30 * var(--tablet-unit)), 30px) !important;}
.mb-40 {margin-bottom: min(calc(40 * var(--tablet-unit)), 40px) !important;}
.mb-50 {margin-bottom: min(calc(50 * var(--tablet-unit)), 50px) !important;}
.mb-60 {margin-bottom: min(calc(60 * var(--tablet-unit)), 60px) !important;}
.mb-70 {margin-bottom: min(calc(70 * var(--tablet-unit)), 70px) !important;}
.mb-80 {margin-bottom: min(calc(80 * var(--tablet-unit)), 80px) !important;}
.mb-90 {margin-bottom: min(calc(90 * var(--tablet-unit)), 90px) !important;}
.mb-100 {margin-bottom: min(calc(100 * var(--tablet-unit)), 100px) !important;}
.mb-110 {margin-bottom: min(calc(110 * var(--tablet-unit)), 110px) !important;}
.mb-120 {margin-bottom: min(calc(120 * var(--tablet-unit)), 120px) !important;}
.mb-130 {margin-bottom: min(calc(130 * var(--tablet-unit)), 130px) !important;}
.mb-140 {margin-bottom: min(calc(140 * var(--tablet-unit)), 140px) !important;}
.mb-150 {margin-bottom: min(calc(150 * var(--tablet-unit)), 150px) !important;}

.mx-auto {margin-left: auto !important; margin-right: auto !important;}

@media (max-width: 767px) {
  .mt-1 {margin-top: min(calc(1 * var(--sp-unit)), 1px) !important;}
  .mt-2 {margin-top: min(calc(2 * var(--sp-unit)), 2px) !important;}
  .mt-3 {margin-top: min(calc(3 * var(--sp-unit)), 3px) !important;}
  .mt-4 {margin-top: min(calc(4 * var(--sp-unit)), 4px) !important;}
  .mt-5 {margin-top: min(calc(5 * var(--sp-unit)), 5px) !important;}
  .mt-6 {margin-top: min(calc(6 * var(--sp-unit)), 6px) !important;}
  .mt-7 {margin-top: min(calc(7 * var(--sp-unit)), 7px) !important;}
  .mt-8 {margin-top: min(calc(8 * var(--sp-unit)), 8px) !important;}
  .mt-9 {margin-top: min(calc(9 * var(--sp-unit)), 9px) !important;}
  .mt-10 {margin-top: min(calc(10 * var(--sp-unit)), 10px) !important;}
  .mt-30 {margin-top: min(calc(30 * var(--sp-unit)), 30px) !important;}
  .mt-40 {margin-top: min(calc(40 * var(--sp-unit)), 40px) !important;}
  .mt-50 {margin-top: min(calc(50 * var(--sp-unit)), 50px) !important;}
  .mt-60 {margin-top: min(calc(60 * var(--sp-unit)), 60px) !important;}
  .mt-70 {margin-top: min(calc(70 * var(--sp-unit)), 70px) !important;}
  .mt-80 {margin-top: min(calc(80 * var(--sp-unit)), 80px) !important;}
  .mt-90 {margin-top: min(calc(90 * var(--sp-unit)), 90px) !important;}
  .mt-100 {margin-top: min(calc(100 * var(--sp-unit)), 100px) !important;}
  .mt-110 {margin-top: min(calc(110 * var(--sp-unit)), 110px) !important;}
  .mt-120 {margin-top: min(calc(120 * var(--sp-unit)), 120px) !important;}
  .mt-130 {margin-top: min(calc(130 * var(--sp-unit)), 130px) !important;}
  .mt-140 {margin-top: min(calc(140 * var(--sp-unit)), 140px) !important;}
  .mt-150 {margin-top: min(calc(150 * var(--sp-unit)), 150px) !important;}
  
  .mb-1 {margin-bottom: min(calc(1 * var(--sp-unit)), 1px) !important;}
  .mb-2 {margin-bottom: min(calc(2 * var(--sp-unit)), 2px) !important;}
  .mb-3 {margin-bottom: min(calc(3 * var(--sp-unit)), 3px) !important;}
  .mb-4 {margin-bottom: min(calc(4 * var(--sp-unit)), 4px) !important;}
  .mb-5 {margin-bottom: min(calc(5 * var(--sp-unit)), 5px) !important;}
  .mb-6 {margin-bottom: min(calc(6 * var(--sp-unit)), 6px) !important;}
  .mb-7 {margin-bottom: min(calc(7 * var(--sp-unit)), 7px) !important;}
  .mb-8 {margin-bottom: min(calc(8 * var(--sp-unit)), 8px) !important;}
  .mb-9 {margin-bottom: min(calc(9 * var(--sp-unit)), 9px) !important;}
  .mb-10 {margin-bottom: min(calc(10 * var(--sp-unit)), 10px) !important;}
  .mb-20 {margin-bottom: min(calc(20 * var(--sp-unit)), 20px) !important;}
  .mb-30 {margin-bottom: min(calc(30 * var(--sp-unit)), 30px) !important;}
  .mb-40 {margin-bottom: min(calc(40 * var(--sp-unit)), 40px) !important;}
  .mb-50 {margin-bottom: min(calc(50 * var(--sp-unit)), 50px) !important;}
  .mb-60 {margin-bottom: min(calc(60 * var(--sp-unit)), 60px) !important;}
  .mb-70 {margin-bottom: min(calc(70 * var(--sp-unit)), 70px) !important;}
  .mb-80 {margin-bottom: min(calc(80 * var(--sp-unit)), 80px) !important;}
  .mb-90 {margin-bottom: min(calc(90 * var(--sp-unit)), 90px) !important;}
  .mb-100 {margin-bottom: min(calc(100 * var(--sp-unit)), 100px) !important;}
  .mb-110 {margin-bottom: min(calc(110 * var(--sp-unit)), 110px) !important;}
  .mb-120 {margin-bottom: min(calc(120 * var(--sp-unit)), 120px) !important;}
  .mb-130 {margin-bottom: min(calc(130 * var(--sp-unit)), 130px) !important;}
  .mb-140 {margin-bottom: min(calc(140 * var(--sp-unit)), 140px) !important;}
  .mb-150 {margin-bottom: min(calc(150 * var(--sp-unit)), 150px) !important;}
}

/* Padding
---------------------------------------- */
.pt-0 {padding-top: 0px !important;}
.pt-1 {padding-top: min(calc(1 * var(--tablet-unit)), 1px) !important;}
.pt-2 {padding-top: min(calc(2 * var(--tablet-unit)), 2px) !important;}
.pt-3 {padding-top: min(calc(3 * var(--tablet-unit)), 3px) !important;}
.pt-4 {padding-top: min(calc(4 * var(--tablet-unit)), 4px) !important;}
.pt-5 {padding-top: min(calc(5 * var(--tablet-unit)), 5px) !important;}
.pt-6 {padding-top: min(calc(6 * var(--tablet-unit)), 6px) !important;}
.pt-7 {padding-top: min(calc(7 * var(--tablet-unit)), 7px) !important;}
.pt-8 {padding-top: min(calc(8 * var(--tablet-unit)), 8px) !important;}
.pt-9 {padding-top: min(calc(9 * var(--tablet-unit)), 9px) !important;}
.pt-10 {padding-top: min(calc(10 * var(--tablet-unit)), 10px) !important;}
.pt-30 {padding-top: min(calc(30 * var(--tablet-unit)), 30px) !important;}
.pt-40 {padding-top: min(calc(40 * var(--tablet-unit)), 40px) !important;}
.pt-50 {padding-top: min(calc(50 * var(--tablet-unit)), 50px) !important;}
.pt-60 {padding-top: min(calc(60 * var(--tablet-unit)), 60px) !important;}
.pt-70 {padding-top: min(calc(70 * var(--tablet-unit)), 70px) !important;}
.pt-80 {padding-top: min(calc(80 * var(--tablet-unit)), 80px) !important;}
.pt-90 {padding-top: min(calc(90 * var(--tablet-unit)), 90px) !important;}
.pt-100 {padding-top: min(calc(100 * var(--tablet-unit)), 100px) !important;}
.pt-110 {padding-top: min(calc(110 * var(--tablet-unit)), 110px) !important;}
.pt-120 {padding-top: min(calc(120 * var(--tablet-unit)), 120px) !important;}
.pt-130 {padding-top: min(calc(130 * var(--tablet-unit)), 130px) !important;}
.pt-140 {padding-top: min(calc(140 * var(--tablet-unit)), 140px) !important;}
.pt-150 {padding-top: min(calc(150 * var(--tablet-unit)), 150px) !important;}

.pb-0 {padding-bottom: 0px !important;}
.pb-1 {padding-bottom: min(calc(1 * var(--tablet-unit)), 1px) !important;}
.pb-2 {padding-bottom: min(calc(2 * var(--tablet-unit)), 2px) !important;}
.pb-3 {padding-bottom: min(calc(3 * var(--tablet-unit)), 3px) !important;}
.pb-4 {padding-bottom: min(calc(4 * var(--tablet-unit)), 4px) !important;}
.pb-5 {padding-bottom: min(calc(5 * var(--tablet-unit)), 5px) !important;}
.pb-6 {padding-bottom: min(calc(6 * var(--tablet-unit)), 6px) !important;}
.pb-7 {padding-bottom: min(calc(7 * var(--tablet-unit)), 7px) !important;}
.pb-8 {padding-bottom: min(calc(8 * var(--tablet-unit)), 8px) !important;}
.pb-9 {padding-bottom: min(calc(9 * var(--tablet-unit)), 9px) !important;}
.pb-10 {padding-bottom: min(calc(10 * var(--tablet-unit)), 10px) !important;}
.pb-20 {padding-bottom: min(calc(20 * var(--tablet-unit)), 20px) !important;}
.pb-30 {padding-bottom: min(calc(30 * var(--tablet-unit)), 30px) !important;}
.pb-40 {padding-bottom: min(calc(40 * var(--tablet-unit)), 40px) !important;}
.pb-50 {padding-bottom: min(calc(50 * var(--tablet-unit)), 50px) !important;}
.pb-60 {padding-bottom: min(calc(60 * var(--tablet-unit)), 60px) !important;}
.pb-70 {padding-bottom: min(calc(70 * var(--tablet-unit)), 70px) !important;}
.pb-80 {padding-bottom: min(calc(80 * var(--tablet-unit)), 80px) !important;}
.pb-90 {padding-bottom: min(calc(90 * var(--tablet-unit)), 90px) !important;}
.pb-100 {padding-bottom: min(calc(100 * var(--tablet-unit)), 100px) !important;}
.pb-110 {padding-bottom: min(calc(110 * var(--tablet-unit)), 110px) !important;}
.pb-120 {padding-bottom: min(calc(120 * var(--tablet-unit)), 120px) !important;}
.pb-130 {padding-bottom: min(calc(130 * var(--tablet-unit)), 130px) !important;}
.pb-140 {padding-bottom: min(calc(140 * var(--tablet-unit)), 140px) !important;}
.pb-150 {padding-bottom: min(calc(150 * var(--tablet-unit)), 150px) !important;}

@media (max-width: 767px) {
  .pt-1 {padding-top: min(calc(1 * var(--sp-unit)), 1px) !important;}
  .pt-2 {padding-top: min(calc(2 * var(--sp-unit)), 2px) !important;}
  .pt-3 {padding-top: min(calc(3 * var(--sp-unit)), 3px) !important;}
  .pt-4 {padding-top: min(calc(4 * var(--sp-unit)), 4px) !important;}
  .pt-5 {padding-top: min(calc(5 * var(--sp-unit)), 5px) !important;}
  .pt-6 {padding-top: min(calc(6 * var(--sp-unit)), 6px) !important;}
  .pt-7 {padding-top: min(calc(7 * var(--sp-unit)), 7px) !important;}
  .pt-8 {padding-top: min(calc(8 * var(--sp-unit)), 8px) !important;}
  .pt-9 {padding-top: min(calc(9 * var(--sp-unit)), 9px) !important;}
  .pt-10 {padding-top: min(calc(10 * var(--sp-unit)), 10px) !important;}
  .pt-30 {padding-top: min(calc(30 * var(--sp-unit)), 30px) !important;}
  .pt-40 {padding-top: min(calc(40 * var(--sp-unit)), 40px) !important;}
  .pt-50 {padding-top: min(calc(50 * var(--sp-unit)), 50px) !important;}
  .pt-60 {padding-top: min(calc(60 * var(--sp-unit)), 60px) !important;}
  .pt-70 {padding-top: min(calc(70 * var(--sp-unit)), 70px) !important;}
  .pt-80 {padding-top: min(calc(80 * var(--sp-unit)), 80px) !important;}
  .pt-90 {padding-top: min(calc(90 * var(--sp-unit)), 90px) !important;}
  .pt-100 {padding-top: min(calc(100 * var(--sp-unit)), 100px) !important;}
  .pt-110 {padding-top: min(calc(110 * var(--sp-unit)), 110px) !important;}
  .pt-120 {padding-top: min(calc(120 * var(--sp-unit)), 120px) !important;}
  .pt-130 {padding-top: min(calc(130 * var(--sp-unit)), 130px) !important;}
  .pt-140 {padding-top: min(calc(140 * var(--sp-unit)), 140px) !important;}
  .pt-150 {padding-top: min(calc(150 * var(--sp-unit)), 150px) !important;}
}

/* SP/PCで幅が異なる時のマージン・パディングユーティリティ
  Usage:
  <div
    class="m-responsive"
    style="--space-sp: 60; --space-pc: 100;"
  >
      テキスト
  </div>
*/
.m-responsive {
  margin: calc(var(--space-sp) * var(--sp-unit));
}

@media (min-width: 768px) and (max-width: 1440px) {
  .m-responsive {
    margin: calc(var(--space-pc) * var(--tablet-unit));
  }
}

@media (min-width: 1441px) {
  .m-responsive {
    margin: calc(var(--space-pc) * 1px);
  }
}

.p-responsive {
  padding: calc(var(--space-sp) * var(--sp-unit));
}

@media (min-width: 768px) and (max-width: 1440px) {
  .p-responsive {
    padding: calc(var(--space-pc) * var(--tablet-unit));
  }
}

@media (min-width: 1441px) {
  .p-responsive {
    padding: calc(var(--space-pc) * 1px);
  }
}


/* Text Layout
---------------------------------------- */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.float-left {float: left;}
.float-right {float: right;}

.text-center-pc {text-align: initial;}
.text-left-pc {text-align: initial;}
.text-right-pc {text-align: initial;}
@media (min-width: 768px) {
  .text-center-pc {text-align: center;}
  .text-left-pc {text-align: left;}
  .text-right-pc {text-align: right;}
}

/* Content Layout (PC only)
---------------------------------------- */
@media (min-width: 768px) {
  .w-100 {
    max-width: 100% !important;
  }
  .w-90 {
    max-width: 90% !important;
  }
  .w-80 {
    max-width: 80% !important;
  }
  .w-70 {
    max-width: 70% !important;
  }
  .w-60 {
    max-width: 60% !important;
  }
  .w-50 {
    max-width: 50% !important;
  }
}

/* List Layout
---------------------------------------- */

.list-disc {
  list-style-type: disc;
  padding-left: 1.5em;
}

.list-number {
  list-style-type: decimal;
  padding-left: 1.5em;
}