/* =============================================================================
   Variables / Design Tokens
   Figma Variables（design/Cnf1K7MquYEBHSP9tQAIcB）から生成
   ============================================================================= */

/* ブレークポイント定数（メディアクエリ内で直接使用）
   sp: 620px / tablet: 768px / pc: 1024px / max-width: 1200px */

:root {
  /* Color */
  --color-primary: #005fa1; /* メインカラー（青） */
  --color-secondary: #75c03e; /* サブカラー（緑） */
  --color-black: #000000; /* 黒 */
  --color-notice: #2d2d2d; /* テキスト・注意書き */
  --color-white: #ffffff; /* 白 */
  --color-table-border: #d9d9d9; /* テーブル罫線 */
  --color-red: #ff0000; /* エラー・警告 */

  /* Color（Variables未登録） */
  --color-accent: #5caecc; /* アクセントカラー（水色） */
  --color-bg: #ece7d9; /* 背景色（ベージュ） */

  /* Font Family */
  --font-family-base: 'Noto Sans JP', sans-serif;
  --font-family-button: 'Work Sans', 'Noto Sans JP', sans-serif; /* PC/Button Font */
  --font-family-mincho: 'Zen Old Mincho', serif; /* 明朝体（コンセプト見出し等） */

  /* Font Size（固定値・PC/SP共通） */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;

  /* Text（用途別・PC値 or PC/SP共通） */
  --text-page-title: var(--font-size-40); /* PC → SP: 32px */
  --text-heading-1: var(--font-size-36); /* PC/SP共通 */
  --text-heading-2: var(--font-size-32); /* PC → SP: 26px */
  --text-heading-3: var(--font-size-24); /* PC/SP共通 */
  --text-heading-4: var(--font-size-26); /* PC/SP共通 */
  --text-heading-5: var(--font-size-24); /* PC/SP共通 */
  --text-heading-6: var(--font-size-22); /* PC/SP共通 */
  --text-paragraph-bold: var(--font-size-18); /* PC/SP共通 */
  --text-paragraph: var(--font-size-18); /* PC/SP共通 */
  --text-footer-menu: var(--font-size-28); /* PC → SP: 16px */
  --text-copyright: var(--font-size-18); /* PC → SP: 12px */
  --text-notice: var(--font-size-12); /* PC/SP共通 */

  /* Margin / Spacing（PC/SP共通） */
  --margin-4: 4px;
  --margin-8: 8px;
  --margin-12: 12px;
  --margin-16: 16px;
  --margin-24: 24px;
  --margin-32: 32px;
  --margin-40: 40px;
  --margin-48: 48px;
  --margin-56: 56px;
  --margin-64: 64px;
  --margin-72: 72px;
  --margin-80: 80px;
  --margin-88: 88px;
  --margin-92: 92px;
  --margin-120: 120px;

  /* Gap（PC値） */
  --gap-section: var(--margin-48); /* PC/SP共通 */
  --gap-header-main: var(--font-size-16); /* PC/SP共通 */
  --gap-main-area-top: var(--margin-48); /* PC → SP: 32px */
  --gap-main-area-bottom: var(--margin-120); /* PC → SP: 80px */

  /* Border Radius（PC/SP共通） */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-l: 32px;
  --radius-full: 999px;
}

/* SP値でオーバーライド（max-width: 1023px） */
@media (max-width: 1023px) {
  :root {
    /* Text（用途別・SP値） */
    --text-page-title: var(--font-size-32);
    --text-heading-2: var(--font-size-26);
    --text-footer-menu: var(--font-size-16);
    --text-copyright: var(--font-size-12);

    /* Gap（SP値） */
    --gap-main-area-top: var(--margin-32);
    --gap-main-area-bottom: var(--margin-80);
  }
}