/* ============================================================
   森修平 標準デザイン定義書 — デザイントークン v1.3
   (2026-09-12 制定 / v1.2 改訂 2026-09-16 / v1.3 改訂 2026-09-18)

   使い方:
   1. このファイルと components.css をプロジェクトにコピーして <link> で読み込む
      (tokens.css → components.css の順)
   2. 案件ごとに変えてよいのは「ブランド層」のみ
   3. 共通層・機能色・スケールは全案件で共通(変更禁止)
   ============================================================ */

:root {

  /* ------------------------------------------------------------
     1. ブランド層(案件ごとに差し替え可)
     デフォルト = ネイビー × ゴールド(FOPC / Up List 系)
     差し替え時のルール:
     - primary は白背景の上でコントラスト比 4.5:1 以上
     - on-primary は primary の上で 4.5:1 以上
     ------------------------------------------------------------ */
  --c-primary:        #14325F;   /* 主役。CTA・リンクの土台・見出しアクセント */
  --c-primary-dark:   #0D2344;   /* ホバー・押下 */
  --c-primary-light:  #2D5A96;   /* 補助・グラフ・装飾 */
  --c-primary-pale:   #EEF3FA;   /* 淡背景。この上に primary テキスト可 */
  --c-accent:         #C9A227;   /* 差し色。面積は画面の5%以下 */
  --c-on-primary:     #FFFFFF;   /* primary の上に載せる文字色 */

  /* ------------------------------------------------------------
     2. 共通層 — グレースケール(全案件共通・変更禁止)
     テキストに使えるのは 900 / 700 / 500 のみ
     ------------------------------------------------------------ */
  --c-ink:      #1A1E26;   /* 本文。純黒 #000 は使わない */
  --c-gray-700: #444B57;   /* 第二階層テキスト */
  --c-gray-500: #6E7683;   /* 補足・プレースホルダー。白地の上のみ4.5:1。gray-50・Pale等の淡い地の上のテキストは gray-700 */
  --c-gray-400: #9AA1AC;   /* 無効状態のテキスト・アイコン */
  --c-gray-300: #C6CBD3;   /* 罫線(強) */
  --c-gray-200: #E2E5EA;   /* 罫線(標準)・区切り */
  --c-gray-100: #F0F2F5;   /* 塗り分け背景 */
  --c-gray-50:  #F7F8FA;   /* セクション交互背景 */
  --c-white:    #FFFFFF;

  /* ------------------------------------------------------------
     3. 機能色(全案件共通・変更禁止)
     意味を持つ色。装飾に流用しない
     ------------------------------------------------------------ */
  --c-success:    #1B7F4D;
  --c-success-bg: #E8F5EE;
  --c-error:      #C7302B;
  --c-error-bg:   #FBEDEC;
  --c-warning:    #9A6700;
  --c-warning-bg: #FCF4E2;
  --c-info:       #0B5FCC;
  --c-info-bg:    #EAF2FD;
  --c-link:       #0B5FCC;
  --c-link-visited: #6D3FA8;
  --c-focus:      #FFD43B;   /* フォーカスリング(黒と二重)。変更禁止 */

  /* ------------------------------------------------------------
     4. タイポグラフィ
     ------------------------------------------------------------ */
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mono: "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;

  /* タイプスケール(px基準・remで実装してよい) */
  --fs-display: 48px;   /* Dsp-48 ヒーロー専用 */
  --fs-h1:      36px;   /* H1-36 ページタイトル */
  --fs-h2:      28px;   /* H2-28 セクション見出し */
  --fs-h3:      22px;   /* H3-22 小見出し */
  --fs-h4:      18px;   /* H4-18 項目見出し */
  --fs-body-l:  18px;   /* B-18 リード文 */
  --fs-body:    16px;   /* B-16 本文標準 */
  --fs-small:   14px;   /* B-14 補足(本文の最小) */
  --fs-caption: 12px;   /* C-12 注記・ラベル限定。これ未満は禁止 */

  --fw-normal: 400;
  --fw-bold:   700;

  --lh-heading: 1.4;    /* 見出し */
  --lh-body:    1.75;   /* 本文(1.5未満禁止) */
  --lh-dense:   1.3;    /* 管理画面・表 */
  --lh-ui:      1;      /* ボタン等の1行UI */

  --ls-heading: 0.02em;
  --ls-body:    0;

  /* ------------------------------------------------------------
     5. スペーシング(8px基準・4px補助)
     ------------------------------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* レイアウト */
  --w-container: 1120px;  /* コンテンツ最大幅 */
  --w-text:      720px;   /* 読み物1カラムの最大幅 */
  --pad-side-sp: 20px;    /* 画面端余白 モバイル */
  --pad-side-pc: 40px;    /* 画面端余白 PC */
  --h-header-sp: 64px;    /* ヘッダー高さ モバイル */
  --h-header-pc: 80px;    /* ヘッダー高さ PC */
  --h-tabbar:    56px;    /* 下部タブバー高さ(+セーフエリア) */
  /* ブレイクポイントは 768px の1点(メディアクエリで使用) */

  /* ------------------------------------------------------------
     6. 形状・エレベーション
     ------------------------------------------------------------ */
  --r-s:    8px;     /* 標準。ボタン・入力欄・小カード */
  --r-l:    16px;    /* 大カード・モーダル・シート */
  --r-full: 999px;   /* ピル。タグ・バッジ */

  --sh-low:  0 2px 6px rgba(20, 30, 45, 0.08);   /* カード */
  --sh-mid:  0 6px 16px rgba(20, 30, 45, 0.12);  /* ドロップダウン・浮遊UI */
  --sh-high: 0 12px 32px rgba(20, 30, 45, 0.22); /* モーダル */

  /* ------------------------------------------------------------
     7. モーション
     ------------------------------------------------------------ */
  --t-fast: 150ms;   /* ホバー・フォーカス */
  --t-base: 250ms;   /* 開閉・切替 */
  --t-slow: 400ms;   /* モーダル・ページ内演出 */
  --ease:   cubic-bezier(0.25, 0.1, 0.25, 1); /* ease 標準 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);     /* 出現に使う */

  /* ------------------------------------------------------------
     8. LP編(L-01)— LPでだけ使う値(v1.3 追加)
     数値はスマホ375px基準。PCはスマホ版を中央430pxで表示するため、PC用の値は持たない
     ------------------------------------------------------------ */
  --fs-lp-hero:   clamp(34px, 10.67vw, 40px); /* FVの大見出し。375pxで40px・320pxで34px。太さ900 */
  --fs-lp-h2:     clamp(27px, 8.53vw, 32px);  /* セクション見出し。375pxで32px・320pxで27.3px。太さ700・行間1.3 */
  --fs-lp-stat:   48px;                       /* 数字ブロックの数字。太さ700・行間1・tabular-nums */
  --lh-display:   1.25;                       /* 40px以上の見出しの行間 */
  --t-reveal:     600ms;                      /* LPのスクロール出現 */
  --ease-reveal:  cubic-bezier(0.16, 1, 0.3, 1); /* 速く出てゆっくり止まる */
}

/* フォーカスリング(全案件共通) */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.85);
}

/* モーション弱減設定への対応(必須) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}