/* ========================================
   デザイントークン（Figma variables 準拠）
   ======================================== */
:root {
  /* カラー */
  --color-main: #2f6fb5;
  --color-base: #f2f6fb;
  --color-accent: #0d2a52;
  --color-white: #ffffff;
  --color-gray-light: #ebf0f6;
  --color-gray-placeholder: #d9d9d9;
  --color-gray-card: #f2f2f2;
  --color-text: #000000;
  --color-text-muted: rgba(13, 42, 82, 0.1);
  --color-breadcrumb: #a7a7a7;

  /* フォント */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Inter", sans-serif;

  /* レイアウト */
  --container-max: 1302px;
  --container-padding: clamp(20px, 4vw, 103px);
  --section-gap: clamp(60px, 8vw, 120px);

  /* 角丸 */
  --radius-pill: 100px;
  --radius-btn: 53px;
  --radius-card: 30px;
  --radius-nav: 30px;

  /* ボタンサイズ（Figma準拠） */
  --btn-width-xl: 412px;
  --btn-height-xl: 106px;
  --btn-font-xl: 20px;
  --btn-padding-xl: 24px 48px;
  --btn-padding-xl-icon: 24px 56px 24px 48px;

  --btn-width-lg: 372px;
  --btn-height-lg: 96px;
  --btn-font-lg: 20px;
  --btn-padding-lg: 14px 40px;

  --btn-width-md: 412px;
  --btn-height-md: 78px;
  --btn-font-md: 20px;
  --btn-padding-md: 14px 40px 14px 48px;

  --btn-width-sm: 268px;
  --btn-height-sm: 64px;
  --btn-font-sm: 16px;
  --btn-padding-sm: 0 28px 0 24px;

  --btn-height-xs: 41px;
  --btn-font-xs: 18px;
  --btn-padding-xs: 0 27px;
  --btn-width-xs-login: 110px;
  --btn-width-xs-contact: 140px;

  /* ブレークポイント（参考値） */
  --bp-wide: 1220px;
  --bp-desktop: 1024px;
  --bp-tablet: 900px;
  --bp-mobile: 768px;
  --bp-mobile-sm: 480px;

  /* トランジション */
  --transition: 0.3s ease;
}
