:root {
  /* color */
  --color-font: #333333;
  --color-font-en: #000000;
  --color-font-wh: #ffffff;
  --color-font-gr: #595757;
  --color-font-or: #EC6C00;

  --color-primary: #EC6C00;
  --color-secondary: #008cbe;
  --color-tertiary: #065095;
  --color-accent: #dc3434;

  --color-bg-bk: #333333;
  --color-bg-wh: #ffffff;
  --color-bg-gr: #D3D3D4;
  --color-bg-lgr: #e6e6e6;
  --color-bg-or: #ec6c00;

  --color-border: #d9d9d9;
  --color-border-bk: #333333;
  --color-border-wh: #ffffff;
  --color-border-or: #ec6c00;

  --back-bar: rgba(255, 255, 255, 0.4);
  --backdrop: rgb(32 32 32 / 30%);

  /* font family */
  --ff-jp: "Noto Sans JP", sans-serif;
  --ff-en: "Inter", sans-serif;
}

*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );

  font-size: var(--clamp);
}

/* bodyにデフォルト値を設定する */
body {
  container-type: inline-size;
  container-name: root;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 14;
  --clamp-max: 16;
  color: var(--color-font);
  line-height: 1.6;
}

:root {
  --fz-special30-115: clamp(30px, 8.43px + 5.53vw, 115px);
  /* ==========================================
     【実務向けclamp余白設定】
     ・基準幅：最大 1280px 〜 最小 390px
     ========================================== */

  /* 【基準値】PC: 60px (3.75rem) / SP: 30px (1.875rem)
  ・推奨値（計算式）：1.05rem + 3.371vw
  ※アクセシビリティを阻害しない rem + vw 計算値。
  */
  --spc-base: clamp(1.875rem, 1.05rem + 3.371vw, 3.75rem);

  /* --spc-base（60px-30px）を元にスケーリング（実務向け倍率） */
  --spc-500-250: calc(var(--spc-base) * 8.333); /* PC: 約500px / SP: 約250px */
  --spc-160-80: calc(var(--spc-base) * 2.667); /* PC: 約160px / SP: 約80px */
  --spc-150-75: calc(var(--spc-base) * 2.5);   /* PC: 150px   / SP: 75px */
  --spc-140-70: calc(var(--spc-base) * 2.333); /* PC: 約140px / SP: 約70px */
  --spc-120-60: calc(var(--spc-base) * 2);     /* PC: 120px    / SP: 60px */
  --spc-100-50: calc(var(--spc-base) * 1.667); /* PC: 約100px / SP: 約50px */
  --spc-80-40:  calc(var(--spc-base) * 1.333); /* PC: 約80px  / SP: 約40px */
  --spc-60-30:  var(--spc-base);               /* PC: 60px     / SP: 30px */
  --spc-50-25:  calc(var(--spc-base) * 0.833); /* PC: 約50px  / SP: 約25px */
  --spc-40-20:  calc(var(--spc-base) * 0.667); /* PC: 約40px  / SP: 約20px */
  --spc-30-15:  calc(var(--spc-base) * 0.5);   /* PC: 30px     / SP: 15px */
  --spc-20-10:  calc(var(--spc-base) * 0.333); /* PC: 約20px  / SP: 約10px */
  --spc-16-8: calc(var(--spc-base) * 0.267); /* PC: 約16px / SP: 約8px */
  --spc-10-5:   calc(var(--spc-base) * 0.167); /* PC: 約10px  / SP: 約5px */
  --spc-8-4:    calc(var(--spc-base) * 0.133); /* PC: 約8px   / SP: 約4px */
  --spc-4-2:    calc(var(--spc-base) * 0.067); /* PC: 約4px   / SP: 約2px */

/* ==========================================
     【実務向けclamp余白設定】
     ・基準幅：最大 1280px 〜 最小 390px
     ========================================== */

  /* ------------------------------------------
     ① 50%縮小グループ（PC:SP = 2:1）
     基準値 PC: 60px / SP: 30px
     ------------------------------------------ */
  --spc-base: clamp(1.875rem, 1.05rem + 3.371vw, 3.75rem);

  /* --spc-base を元にスケーリング */
  --len-500-250: calc(var(--spc-base) * 8.333); /* PC: 約500px / SP: 約250px */
  --len-950-475: calc(var(--spc-base) * 15.833); /* PC: 約950px / SP: 約475px */
  --len-620-310: calc(var(--spc-base) * 10.333);/* PC: 620px / SP: 310px */
  --len-500-250: calc(var(--spc-base) * 8.333); /* PC: 約500px / SP: 約250px */
  --len-400-200: calc(var(--spc-base) * 6.667); /* PC: 約400px / SP: 約200px */
  --len-340-170: calc(var(--spc-base) * 5.667); /* PC: 340px / SP: 170px */
  --len-250-125: calc(var(--spc-base) * 4.167); /* PC: 約250px / SP: 約125px */
  --len-200-100: calc(var(--spc-base) * 3.333); /* PC: 約200px / SP: 約100px */
  --len-190-95:  calc(var(--spc-base) * 3.167); /* PC: 約190px / SP: 約95px */
  --len-130-65:  calc(var(--spc-base) * 2.167); /* PC: 約130px / SP: 約65px */
  --len-110-55:  calc(var(--spc-base) * 1.833); /* PC: 約110px / SP: 約55px */
  --len-100-50:  calc(var(--spc-base) * 1.667); /* PC: 約100px / SP: 約50px */
  --len-80-40:   calc(var(--spc-base) * 1.333); /* PC: 約80px  / SP: 約40px */
  --len-70-35:   calc(var(--spc-base) * 1.167); /* PC: 約70px  / SP: 約35px */
  --len-60-30:   var(--spc-base);               /* PC: 60px   / SP: 30px */
  --len-40-20:   calc(var(--spc-base) * 0.667); /* PC: 約40px  / SP: 約20px */
  --len-30-15:   calc(var(--spc-base) * 0.5);   /* PC: 30px    / SP: 15px */
  --len-24-12:   calc(var(--spc-base) * 0.4);
  --len-20-10:   calc(var(--spc-base) * 0.333); /* PC: 約20px  / SP: 約10px */
  --len-16-8:    calc(var(--spc-base) * 0.267); /* PC: 約16px  / SP: 約8px */
  --len-8-4:     calc(var(--spc-base) * 0.133); /* PC: 約8px   / SP: 約4px */
  --len-4-2:     calc(var(--spc-base) * 0.067); /* PC: 約4px   / SP: 約2px */
  --len-2-1:     calc(var(--spc-base) * 0.033); /* PC: 約2px   / SP: 約1px */


  /* ------------------------------------------
    比率が異なるグループ（個別定義）
    ※すべて基準幅「1280px〜390px」で計算
     ------------------------------------------ */
  /* PC: 600px / SP: 200px (1:0.333) 【追加】 */
  --len-600-200: clamp(12.5rem, -1.573rem + 57.73vw, 37.5rem);
  
  /* PC: 48px / SP: 16px (1:0.33) */
  --len-48-16: clamp(1rem, 0.326rem + 2.753vw, 3rem);

  /* PC: 24px / SP: 14px (1:0.58) */
  --len-24-14: clamp(0.875rem, 0.601rem + 1.124vw, 1.5rem);

  /* PC: 10px / SP: 6px (1:0.6) */
  --len-10-6: clamp(0.375rem, 0.264rem + 0.449vw, 0.625rem);

  /* PC: 4px / SP: 2px (数値が小さいため個別推奨) */
  --len-4-2: clamp(0.125rem, 0.07rem + 0.225vw, 0.25rem);

}

/* デフォルト（スマホ向け：まずはPC用を消し、SP用を出す） */
.is-pc {
  display: none;
}
.is-sp {
  display: revert;
}

/* PC向け（全体コンテナ 'root' の幅が 768px を超えたとき） */
@container root (width > 768px) {
  .is-sp {
    display: none;
  }
  .is-pc {
    display: revert; /* 元の表示状態（blockやinline等）に戻す */
  }
}

body:has(dialog[open]) {
  /* 背景ページのスクロールを止める */
  overflow: hidden;
}

.u-ib {
  display: inline-block;
}

.ff-en {
  font-family: var(--ff-en);
  color: var(--color-font-en);
}


button {
  /* OSやブラウザ特有のUIを無効化 */
  appearance: none;
  
  /* 背景とボーダーを初期化 */
  background: transparent;
  border: none;
  
  /* 余白の初期化 */
  margin: 0;
  padding: 0;

  
  /* クリック可能な要素として明示 */
  cursor: pointer;
}

/* アクセシビリティ対策 */
button:focus-visible {
  outline: 2px auto Highlight;
  outline-offset: 2px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}