@charset "UTF-8";

/* ==========================================================================
   x-press 追記用CSS

   ・追加・変更したいスタイルは、このファイルに直接書いてください。
   ・このファイルは Sass のコンパイル対象外です。
     コンパイルしても上書き・削除されることはありません。
   ・style.css の後に読み込まれるため、style.css のスタイルを上書きできます。
   ・style.css は Sass から自動生成されるファイルです。
     style.css を直接編集すると、次のコンパイルで消えてしまうのでご注意ください。
   ========================================================================== */

/* --------------------------------------------------------------------------
   リスト
   -------------------------------------------------------------------------- */
.list_wrap {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list_wrap li {
  display: flex;
}
.list_wrap li div:first-child {
  flex-shrink: 0;
}

/* ===================================================
   📂 レスポンシブ自動計算システム
   画面幅基準：スマホ 375px / PC 1280px
   クラス名：.{接頭辞}-{SP値}-{PC値}
   例）.mb-20-40 → スマホ 20px 〜 PC 40px（間は画面幅に合わせて自動で変化）

   ※ 新しい数値を使いたいときは、下の【バリエーション登録エリア】に
     1行追加するだけでOKです。
     例）.mb-15-30 { --mb-sp: 15; --mb-pc: 30; }
   =================================================== */

/* ✍️ フォントサイズ（font-size） */
[class^="fz-"],
[class*=" fz-"] {
  --fz-slope: calc((var(--fz-pc) - var(--fz-sp)) / (1280 - 375));
  --fz-intercept: calc(var(--fz-sp) - (var(--fz-slope) * 375));
  font-size: clamp(calc(var(--fz-sp) * 1px), calc(var(--fz-slope) * 100vw + calc(var(--fz-intercept) * 1px)), calc(var(--fz-pc) * 1px));
}

/* 📦 上マージン（margin-top） */
[class^="mt-"],
[class*=" mt-"] {
  --mt-slope: calc((var(--mt-pc) - var(--mt-sp)) / (1280 - 375));
  --mt-intercept: calc(var(--mt-sp) - (var(--mt-slope) * 375));
  margin-top: clamp(calc(var(--mt-sp) * 1px), calc(var(--mt-slope) * 100vw + calc(var(--mt-intercept) * 1px)), calc(var(--mt-pc) * 1px));
}

/* 📦 下マージン（margin-bottom） */
[class^="mb-"],
[class*=" mb-"] {
  --mb-slope: calc((var(--mb-pc) - var(--mb-sp)) / (1280 - 375));
  --mb-intercept: calc(var(--mb-sp) - (var(--mb-slope) * 375));
  margin-bottom: clamp(calc(var(--mb-sp) * 1px), calc(var(--mb-slope) * 100vw + calc(var(--mb-intercept) * 1px)), calc(var(--mb-pc) * 1px));
}

/* 📥 上パディング（padding-top） */
[class^="pt-"],
[class*=" pt-"] {
  --pt-slope: calc((var(--pt-pc) - var(--pt-sp)) / (1280 - 375));
  --pt-intercept: calc(var(--pt-sp) - (var(--pt-slope) * 375));
  padding-top: clamp(calc(var(--pt-sp) * 1px), calc(var(--pt-slope) * 100vw + calc(var(--pt-intercept) * 1px)), calc(var(--pt-pc) * 1px));
}

/* 📥 下パディング（padding-bottom） */
[class^="pb-"],
[class*=" pb-"] {
  --pb-slope: calc((var(--pb-pc) - var(--pb-sp)) / (1280 - 375));
  --pb-intercept: calc(var(--pb-sp) - (var(--pb-slope) * 375));
  padding-bottom: clamp(calc(var(--pb-sp) * 1px), calc(var(--pb-slope) * 100vw + calc(var(--pb-intercept) * 1px)), calc(var(--pb-pc) * 1px));
}

/* ===================================================
   ✨ 【バリエーション登録エリア】
   =================================================== */

/* ✍️ フォントサイズ（fz-） */
.fz-12-14 {
  --fz-sp: 12;
  --fz-pc: 14;
}
.fz-14-16 {
  --fz-sp: 14;
  --fz-pc: 16;
}
.fz-16-16 {
  --fz-sp: 16;
  --fz-pc: 16;
}
.fz-16-18 {
  --fz-sp: 16;
  --fz-pc: 18;
}
.fz-18-22 {
  --fz-sp: 18;
  --fz-pc: 22;
}
.fz-18-24 {
  --fz-sp: 18;
  --fz-pc: 24;
}
.fz-20-28 {
  --fz-sp: 20;
  --fz-pc: 28;
}
.fz-24-36 {
  --fz-sp: 24;
  --fz-pc: 36;
}
.fz-28-48 {
  --fz-sp: 28;
  --fz-pc: 48;
}

/* 📦 上マージン（mt-） */
.mt-5-10 {
  --mt-sp: 5;
  --mt-pc: 10;
}
.mt-10-20 {
  --mt-sp: 10;
  --mt-pc: 20;
}
.mt-20-40 {
  --mt-sp: 20;
  --mt-pc: 40;
}
.mt-25-50 {
  --mt-sp: 25;
  --mt-pc: 50;
}
.mt-30-60 {
  --mt-sp: 30;
  --mt-pc: 60;
}
.mt-40-80 {
  --mt-sp: 40;
  --mt-pc: 80;
}
.mt-50-100 {
  --mt-sp: 50;
  --mt-pc: 100;
}

/* 📦 下マージン（mb-） */
.mb-5-10 {
  --mb-sp: 5;
  --mb-pc: 10;
}
.mb-10-20 {
  --mb-sp: 10;
  --mb-pc: 20;
}
.mb-20-40 {
  --mb-sp: 20;
  --mb-pc: 40;
}
.mb-25-50 {
  --mb-sp: 25;
  --mb-pc: 50;
}
.mb-30-60 {
  --mb-sp: 30;
  --mb-pc: 60;
}
.mb-40-80 {
  --mb-sp: 40;
  --mb-pc: 80;
}
.mb-50-100 {
  --mb-sp: 50;
  --mb-pc: 100;
}

/* 📥 上パディング（pt-） */
.pt-5-10 {
  --pt-sp: 5;
  --pt-pc: 10;
}
.pt-10-20 {
  --pt-sp: 10;
  --pt-pc: 20;
}
.pt-20-40 {
  --pt-sp: 20;
  --pt-pc: 40;
}
.pt-30-60 {
  --pt-sp: 30;
  --pt-pc: 60;
}
.pt-40-80 {
  --pt-sp: 40;
  --pt-pc: 80;
}
.pt-50-100 {
  --pt-sp: 50;
  --pt-pc: 100;
}

/* 📥 下パディング（pb-） */
.pb-5-10 {
  --pb-sp: 5;
  --pb-pc: 10;
}
.pb-10-20 {
  --pb-sp: 10;
  --pb-pc: 20;
}
.pb-20-40 {
  --pb-sp: 20;
  --pb-pc: 40;
}
.pb-30-60 {
  --pb-sp: 30;
  --pb-pc: 60;
}
.pb-40-80 {
  --pb-sp: 40;
  --pb-pc: 80;
}
.pb-50-100 {
  --pb-sp: 50;
  --pb-pc: 100;
}

/* --------------------------------------------------------------------------
   PC / SP 出し分け
   -------------------------------------------------------------------------- */
.sp-item {
  display: none;
}
.pc-item {
  display: block;
}
@media (max-width: 768px) {
  .sp-item {
    display: block;
  }
  .pc-item {
    display: none;
  }
}