/* ==========================================================================
   社割NEXT コーポレートサイト デザイントークン
   出典: Figma「社割NEXTコーポレートサイト」Design ページ
         実装参考用 01〜04（node 698:2477 / 698:2531 / 698:3372 / 698:3645）と
         TOP_PC（node 537:11354）のバリアブル定義
   キー名は Figma の「実装キー案」に合わせている
   ========================================================================== */
:root {
  /* ---- フォント（実装仕様 01） ---- */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "Roboto", "Noto Sans JP", sans-serif;

  /* ---- 色：共通カラー12種（実装仕様 03） ---- */
  --color-brand-default: linear-gradient(90deg, #e8822e 0%, #ff673b 96.15%);
  --color-brand-hover: linear-gradient(90deg, #eb6a00 0%, #df3200 96.15%);
  --color-background-base: #fafafa;
  --color-background-accent: #ffe6d9;
  --color-white: #ffffff;
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #9ca3af;
  --color-text-inverse-muted: #b5b5b5;
  --color-border-default: #e5e7eb;
  --color-status-error: #ef4444;
  --color-decoration-orange: #ffc583;

  /* ---- 色：バリアブルにあるが共通12種の表に無いもの（値は Figma のまま） ---- */
  --color-primary: #ff5900;            /* Primary / Decoration/Orange */
  --color-secondary: #e8822e;          /* Secondary（グラデーションの始点と同じ） */
  --color-charcoal: #4e454a;           /* Charcoal（ロゴの色） */
  --color-text-strong: #181818;        /* Text/Primary */
  --color-text-dark: #272828;          /* Text/Dark */
  --color-text-sub: #4d4d4d;           /* Text/Secondary */
  --color-text-tertiary: #6a6a6a;      /* Text/Tertiary */
  --color-background-warm: #fbfaf9;    /* Background/Warm */
  --color-background-dark: #262626;    /* Background/Dark（フッター） */
  --color-background-orange-50: #fff4e8; /* orange300 */
  --color-border-grey: #d1d5db;        /* Border/Grey（入力欄の枠） */
  --color-decoration-orange-medium: #ffae53;

  /* お知らせのタグ・絞り込みボタンの文字（#41。カテゴリの色分けをやめ、どのカテゴリも同じ色にした） */
  --color-tag-text: #6b7280;

  /* ---- 影（実装仕様 04・1種類だけ） ---- */
  --shadow-default: 0 0 3.24px 0 rgba(0, 0, 0, 0.18);

  /* ---- 余白（バリアブル spacing/*） ---- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-36: 36px; --space-40: 40px; --space-44: 44px; --space-48: 48px;
  --space-56: 56px; --space-60: 60px; --space-64: 64px; --space-80: 80px;
  --space-96: 96px; --space-104: 104px; --space-120: 120px;

  /* ---- レイアウト ---- */
  --content-width: 1200px;   /* PCの本文幅（1440pxのアートボードで左右120px） */
  --bp-pc: 1025px;           /* 参考値。メディアクエリには変数が使えないので下の注記を参照 */
}

/* ブレークポイント（デザイン側の指定・#prd-design-デザイン 2026-10-06）
   - 〜399px        : SP（アートボード 390px）
   - 400px〜1024px  : タブレット。SPのデザインを踏襲し、余白だけ伸ばす
   - 1025px〜       : PC（アートボード 1440px）
   このキットでは SP を基準に書き、@media (min-width: 1025px) で PC に切り替える */

/* ==========================================================================
   文字スタイル（実装仕様 02・15種）
   ========================================================================== */
.type-heading-lg   { font: 700 32px/1.4 var(--font-jp); letter-spacing: 0; }
.type-heading-md   { font: 700 24px/1.4 var(--font-jp); letter-spacing: 0; }
.type-heading-sm   { font: 700 20px/1.4 var(--font-jp); letter-spacing: 0; }
.type-body-lg        { font: 500 16px/1.6 var(--font-jp); letter-spacing: 0; }
.type-body-lg-strong { font: 700 16px/1.6 var(--font-jp); letter-spacing: 0; }
.type-body-md        { font: 500 14px/1.6 var(--font-jp); letter-spacing: 0; }
.type-body-md-strong { font: 700 14px/1.6 var(--font-jp); letter-spacing: 0; }
.type-body-sm        { font: 400 12px/1.6 var(--font-jp); letter-spacing: 0; }
.type-body-sm-strong { font: 700 12px/1.6 var(--font-jp); letter-spacing: 0; }
.type-label-md     { font: 700 16px/1 var(--font-jp); letter-spacing: 0; }
.type-label-sm     { font: 700 14px/1 var(--font-jp); letter-spacing: 0; }
.type-caption-xs   { font: 500 10px/1.6 var(--font-jp); letter-spacing: 0; }
.type-latin-meta         { font: 400 12px/1.4 var(--font-en); letter-spacing: 0; }
.type-latin-label-strong { font: 700 16px/1.4 var(--font-en); letter-spacing: 0; }
.type-number-step        { font: 700 32px/1 var(--font-en); letter-spacing: 0; }