@charset "UTF-8";
/* ==========================================================================
   ¥Today - デザイントークン
   出典: Figma "コーディング（FigmaAI）" / design-tokens コレクション
   色・余白・角丸は Figma Variables、文字設定は Text Styles、影は Effect Styles。
   Figma Variables は文字設定・影・グラデーションを保持できないため、
   その3つだけ Figma 側ではスタイルで管理している（このファイルでは変数化する）。
   ========================================================================== */

:root {
  /* ---- ブレークポイントと器 -------------------------------------------- */
  /* PC: ビューポート1280 / コンテンツ1040 / 左右120
     SP: ビューポート375  / コンテンツ345  / 左右15
     タブレット専用デザインなし。1024px未満はSPの挙動に寄せる。 */
  --bp-pc: 1024px;
  --container-max: 1040px;
  --gutter: 15px;

  /* ---- 色 --------------------------------------------------------------- */
  --color-brand-blue: #1f7fc4;
  --color-brand-blue-deep: #12608f;
  --color-brand-blue-mid: #4178bb;
  --color-brand-blue-soft: #7fa3d0;
  --color-brand-navy: #0f3b52;
  --color-brand-navy-dark: #15242e;
  --color-brand-yellow: #f5c518;

  --color-text-primary: #0f3b52;
  --color-text-secondary: #55636d;
  --color-text-muted: #8a96a0;
  --color-text-inverse: #ffffff;
  --color-text-black: #222222;

  --color-surface-base: #ffffff;
  --color-surface-subtle: #f4f7f9;
  --color-surface-tint: #e7f0f7;
  --color-surface-warm: #fff5eb;
  --color-surface-grey: #eef0f2;
  --color-surface-grey-light: #f6f6f6;
  --color-surface-navy: #0f3b52;
  --color-surface-green-tint: #e4f4ec;

  --color-border-default: #dce3e8;
  --color-border-strong: #b8c4cd;

  --color-accent-green: #27a85d;
  --color-cta-yellow: #f5c518;
  --color-utility-black: #000000;

  /* ---- グラデーション ---------------------------------------------------- */
  --gradient-cta-green: linear-gradient(90deg, #27a85d 0%, #4fd16c 100%);
  --gradient-cta-green-hover: linear-gradient(90deg, #1f8b4c 0%, #3fb85a 100%);
  --gradient-cta-yellow: linear-gradient(90deg, #ffd400 0%, #f9af00 100%);
  --gradient-fv: linear-gradient(180deg, #ffffff 0%, #e7f0f7 50%, #1f7fc4 100%);
  --gradient-section: linear-gradient(180deg, #f4f7f9 0%, #e7f0f7 100%);

  /* ---- 余白 -------------------------------------------------------------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;

  /* セクションの上下余白（SPが基準、PCで上書き） */
  --section-py: var(--space-80);
  --band-py: var(--space-56);

  /* ---- 角丸 -------------------------------------------------------------- */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-40: 40px;
  --radius-full: 999px;

  /* ---- 影 ---------------------------------------------------------------- */
  --shadow-card: 0 4px 16px rgba(15, 59, 82, 0.07);
  --shadow-button: 0 4px 16px rgba(13, 77, 38, 0.28);
  --shadow-float: 0 12px 32px rgba(8, 36, 51, 0.14);
  --shadow-button-hover: 0 6px 20px rgba(13, 77, 38, 0.34);

  /* ---- 書体 -------------------------------------------------------------- */
  --font-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Meiryo", sans-serif;
  --font-en: "Montserrat", var(--font-jp);

  /* ---- 文字（SPが基準。PCは下のメディアクエリで上書き） -------------------- */
  --fs-label-en: 16px;      --lh-label-en: 1;     --ls-label-en: 0.04em;
  --fs-label-sm: 11px;      --lh-label-sm: 1;     --ls-label-sm: 0.04em;
  --fs-display: 40px;       --lh-display: 1.32;
  --fs-h2: 28px;            --lh-h2: 1.32;
  --fs-h3: 20px;            --lh-h3: 1.28;
  --fs-h3-en: 20px;         --lh-h3-en: 1.28;
  --fs-card-title: 18px;    --lh-card-title: 1.48;
  --fs-strong: 15px;        --lh-strong: 1.5;
  --fs-lead: 15px;          --lh-lead: 1.85;
  --fs-body: 14px;          --lh-body: 1.85;
  --fs-body-sm: 13px;       --lh-body-sm: 1.8;
  --fs-caption: 12px;       --lh-caption: 1.5;
  --fs-note: 11px;          --lh-note: 1.6;
  --fs-num-lg: 40px;        --ls-num: -0.02em;
  --fs-num-md: 20px;
  --fs-num-unit: 15px;

  /* ---- 動き -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.25s;

  /* ---- 重なり ------------------------------------------------------------ */
  --z-header: 100;
  --z-drawer: 200;
  --z-sticky-cta: 150;
}

@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-120);
    --section-py: var(--space-100);
    --band-py: var(--space-48);

    --fs-label-en: 24px;
    --fs-display: 60px;       --lh-display: 1.1;
    --fs-h2: 40px;
    --fs-h3: 32px;           --lh-h3: 1.4;
    --fs-h3-en: 24px;
    --fs-card-title: 20px;
    --fs-strong: 16px;
    --fs-lead: 16px;
    --fs-body: 14px;          --lh-body: 1.65;
    --fs-caption: 13px;
    --fs-note: 12px;
    --fs-num-lg: 62px;
    --fs-num-md: 24px;
    --fs-num-unit: 17px;
  }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
  }
}