@charset "UTF-8";
/* ============================================================
   tokens.css  デザイントークン定義
   ------------------------------------------------------------
   色・文字・余白・角丸・影・モーションのすべてをここで定義する。
   他のCSSからは必ず変数名で参照し、数値・色コードを直接書かない。

   トークンにない値が必要になった場合は、実装者の判断で追加せず、
   仕様書へ追記してから使用すること。

   ブレイクポイント（メディアクエリでは変数を使えないため、値を直記する）
     SP  〜767px
     TB  768px〜1023px
     PC  1024px〜
   ============================================================ */

:root {

  /* ==========================================================
     1. カラー
     ========================================================== */

  /* --- 1-1. ベース・テキスト --- */
  --color-bg:             #F8F9FA;   /* ページ全体の背景 */
  --color-surface:        #FFFFFF;   /* カード・パネルの背景 */
  --color-surface-alt:    #EEF1F4;   /* 交互配色のセクション背景 */
  --color-surface-deep:   #1F3B54;   /* ヒーロー等、濃色セクションの背景 */
  --color-border:         #D8DDE2;   /* 通常の境界線・区切り線 */
  --color-border-strong:  #B4BCC4;   /* 強調したい境界線・テーブル罫線 */
  --color-text:           #333333;   /* 本文テキスト */
  --color-text-sub:       #5A6169;   /* 補助テキスト・キャプション */
  --color-text-weak:      #868E96;   /* プレースホルダ・非活性テキスト */
  --color-text-inverse:   #FFFFFF;   /* 濃色背景上のテキスト */

  /* --- 1-2. プライマリ（主要CTA） ---
     背景に用いる場合の文字色は --color-text-inverse（コントラスト比 6.84:1） */
  --color-primary:        #2C5E89;
  --color-primary-hover:  #224A6D;
  --color-primary-light:  #E7EEF4;

  /* --- 1-3. アクセント（PR枠・最重要CTA） ---
     重要: --color-accent は白文字とのコントラスト比が 1.97:1 しかない。
     背景に用いる場合の文字色は必ず --color-text とし、白抜きにしない。 */
  --color-accent:         #F9A825;
  --color-accent-bg:      #FFF9EC;
  --color-pr:             #8A6A3B;   /* PR枠の枠線。AccentのCTAと区別する */

  /* --- 1-4. 状態色 ---
     エラーに赤を使わない。不安感を煽らない深いオレンジを用いる。 */
  --color-success:        #2E7D5B;
  --color-warning:        #8A6100;
  --color-error:          #A6531B;
  --color-error-bg:       #FDF4EC;
  --color-info:           #2C5E89;
  --color-focus:          #2C5E89;

  /* --- 1-5. オーバーレイ --- */
  --color-overlay:        rgba(0, 0, 0, .55);
  --color-skeleton:       #EDEDED;

  /* ==========================================================
     2. タイポグラフィ
     ========================================================== */

  /* --- 2-1. 書体 ---
     UDフォントを最優先。Webフォントは読み込み負荷のため使用しない。 */
  --font-base: "BIZ UDPGothic", "UD デジタル 教科書体 NP-R",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Noto Sans JP", "Meiryo", sans-serif;
  --font-accent: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", sans-serif;

  /* --- 2-2. サイズ（既定はSP。PCではメディアクエリで上書きする） ---
     html { font-size: 100%; } を前提とし、1rem = 16px 相当。 */
  --fs-display: 1.75rem;    /* SP 28px */
  --fs-h1:      1.625rem;   /* SP 26px */
  --fs-h2:      1.375rem;   /* SP 22px */
  --fs-h3:      1.1875rem;  /* SP 19px */
  --fs-body:    1.0625rem;  /* 17px（最小サイズ） */
  --fs-small:   0.9375rem;  /* 15px */
  --fs-caption: 0.9375rem;  /* 15px（12px等の極小文字は使用しない） */

  /* --- 2-3. 行間 --- */
  --lh-display: 1.3;
  --lh-heading: 1.4;
  --lh-h3:      1.5;
  --lh-body:    1.9;
  --lh-small:   1.7;

  /* --- 2-4. ウェイト（3段階のみ） --- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* --- 2-5. 字間 --- */
  --ls-base:    0.02em;
  --ls-heading: 0.04em;

  /* ==========================================================
     3. スペーシング（4px基準）
     rem で定義し、ブラウザの文字サイズ設定に追随させる。
     ========================================================== */
  --space-1:  0.25rem;   /* 4px  アイコンとテキストの間隔 */
  --space-2:  0.5rem;    /* 8px  インライン要素の間隔 */
  --space-3:  0.75rem;   /* 12px フォーム要素の内側余白 */
  --space-4:  1rem;      /* 16px カード内の標準余白 */
  --space-5:  1.5rem;    /* 24px カード間・要素グループ間 */
  --space-6:  2rem;      /* 32px 小セクション間 */
  --space-8:  3rem;      /* 48px セクション間（SP） */
  --space-10: 4rem;      /* 64px セクション間（PC） */
  --space-12: 6rem;      /* 96px 大セクション間（PC） */

  /* ==========================================================
     4. レイアウト
     ========================================================== */
  --container-max:    1120px;   /* コンテンツの最大幅 */
  --container-narrow: 760px;    /* 記事・固定ページの最大幅 */
  --gutter:           1rem;     /* 画面左右の余白（SP 16px） */
  --grid-gap:         1.5rem;   /* グリッドの間隔 24px */

  /* ==========================================================
     5. 角丸・影・境界線
     ========================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

  --border-width: 1px;

  /* ==========================================================
     6. コンポーネントの寸法
     ========================================================== */
  --tap-min:            44px;   /* 最小タップ領域 */
  --btn-height:         48px;   /* ボタン高さ（SP）。PCでは44pxに縮める */
  --input-height:       48px;   /* 入力欄の高さ */
  --tag-height:         32px;   /* タグ・チップの高さ */
  --header-height:      56px;   /* ヘッダー高さ（SP）。PCでは72px */
  --sticky-cta-height:  64px;   /* モバイル固定CTAバーの高さ */
  --modal-max:          560px;  /* モーダルの最大幅 */
  --accordion-min:      48px;   /* アコーディオン見出し行の最小高さ */
  --card-image-ratio:   4 / 3;  /* カード画像のアスペクト比 */
  --hero-image-ratio:   16 / 10; /* ヒーロー画像のアスペクト比（SP） */
  --icon-size-md:       48px;   /* ステップ・特徴アイコンの大きさ */
  --icon-size-lg:       64px;   /* 大きめアイコン */
  --focus-width:        2px;    /* フォーカスリングの太さ */
  --focus-offset:       2px;    /* フォーカスリングの外側余白 */
  --focus-ring-size:    3px;    /* 入力欄フォーカス時の内側リング */
  --modal-max-height:   90vh;   /* モーダル本体の最大高さ */
  --deflist-term-width: 200px;  /* スペック表・料金表の見出し列幅（TB以上） */
  --hidden-size:        1px;    /* 視覚的に隠す要素の寸法 */

  /* ==========================================================
     7. モーション
     ========================================================== */
  --duration-fast: 150ms;   /* ホバー・フォーカス */
  --duration-base: 250ms;   /* 開閉・フェード */
  --duration-skeleton: 1400ms;  /* スケルトンの明滅周期 */
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================
     8. 重ね順
     ここに定義した値以外を使用しない。z-index: 9999 等は禁止。
     ========================================================== */
  --z-base:       0;     /* 通常コンテンツ */
  --z-sticky:     100;   /* 追従ヘッダー */
  --z-sticky-cta: 200;   /* モバイル固定CTA */
  --z-overlay:    900;   /* 背面オーバーレイ */
  --z-modal:      1000;  /* モーダル・Lightbox */
}

/* ============================================================
   TB（768px〜）: 画面左右の余白を広げる
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;   /* 24px */
  }
}

/* ============================================================
   PC（1024px〜）: 文字サイズ・余白・ボタン高さを切り替える
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --fs-display: 2.5rem;     /* 40px */
    --fs-h1:      2rem;       /* 32px */
    --fs-h2:      1.625rem;   /* 26px */
    --fs-h3:      1.25rem;    /* 20px */

    --gutter:        2rem;    /* 32px */
    --btn-height:    44px;
    --header-height: 72px;
  }
}