/* =========================================================
   株式会社プロキシー・コー（Proxy Co., Ltd.） — デザイントークン

   方針
     ・現行ロゴ（ネイビー〜ブルーのP＋シルバー）をそのまま使うため、
       サイト全体もロゴから抜いたブルー系で統一する。
     ・「何でも扱う商社」ではなく「海外製造を一括管理するパートナー」に
       見せたいので、彩度を抑えた紺＋鋼色。安っぽい原色は使わない。
     ・CTA だけ暖色（アンバー）にして、紺一色の中で確実に目立たせる。
     ・日本語Webフォントは読み込まない（表示速度優先＝OS標準ゴシック）。
       ラテンの小見出しのみ Barlow（latinサブセット＝軽量）。
   ========================================================= */
:root {
  /* --- 地色（白〜明るいブルー） ---
     ★2026-08-31 修正：先方より「全体が少し暗い。白・明るいブルーの面積を増やし、
       ロゴの濃いブルー／明るいブルーと調和させてほしい」。
       グレー寄りだった地色をブルー寄りへ振り、明るい面の温度を上げる。
       濃紺（--navy-900 / --ink-deep）は重要セクションと背景にだけ残す。 */
  --bg:           #FFFFFF;   /* ページ地色 */
  --bg-2:         #F7FAFE;   /* 交互セクション。★2026-08-31 さらに白へ寄せた */
  --bg-3:         #E9F2FC;   /* さらに一段沈めた面（数字バンドの帯） */
  --card:         #FFFFFF;   /* カード地色 */
  --white:        #FFFFFF;

  /* --- 明るいブルーの面（ロゴの明るいブルー由来） ---
     広い面をベタで塗るために使う。文字色には使わない。 */
  --sky:          #DCECFB;
  --sky-2:        #EFF6FE;
  --sky-line:     #C3DCF4;

  /* --- メイン（ネイビー〜ブルー：ロゴ由来） --- */
  --navy-900:     #0A2240;   /* 見出し・フッター地色 */
  --navy-800:     #123C6B;
  --navy-700:     #17529B;   /* ボタン地色（ロゴのブルー） */
  --navy-600:     #2C6FC0;

  /* --- 鋼色（シルバー：ロゴのスウッシュ由来） --- */
  --steel:        #7A8DA3;
  --steel-2:      #9DAFC2;
  --steel-soft:   #D3E2F0;   /* アイコン背景・淡い面 */
  --mist:         #EBF3FC;

  /* --- アクセント（アンバー／銅） --- */
  /* ★★2026-08-31：先方依頼「オレンジは『お問い合わせ』などCTAのアクセントに絞る」。
     装飾（小見出し・罫線・飾り・テキストリンク）で使っていたぶんは
     すべてブルー系（--cyan-deep / --cyan-2 / --sky-line）へ置き換え済み。
     ★このトークンを使ってよいのは次の3か所だけ：
       .btn--cta ／ .hdr-btn ／ .sp-cta__btn（＝すべて問い合わせ導線）
       ＋ :focus-visible（キーボード操作時にしか出ないので装飾には数えない）
     装飾でオレンジを使いたくなったら --cyan-deep を使うこと。 */
  --accent:       #C2762A;
  --accent-2:     #DD9542;
  --accent-soft:  #F0DCC0;

  /* --- 発光アクセント（シアン） ---
     メインビジュアルの光るネットワーク線と同じ色。
     「日本から世界へ出ていく」トーンを、下のセクションにも引き継ぐために使う。
     文字色には使わない（コントラスト不足）。線・グロー・数字の装飾に限定する。 */
  --cyan:         #3DA5F5;
  --cyan-2:       #7FC4FF;
  --cyan-deep:    #1A6FC4;
  --glow:         rgba(61, 165, 245, .45);
  --glow-soft:    rgba(61, 165, 245, .16);

  /* 濃紺の地（メインビジュアルの地色に合わせる） */
  --ink-deep:     #071A33;

  /* --- 文字 --- */
  --ink:          #24303D;   /* 本文 */
  --ink-soft:     #55677B;   /* 補足 */
  --ink-mute:     #8496A8;   /* さらに弱い補足 */

  /* --- 罫線 --- */
  --line:         #D8E2EC;
  --line-soft:    #E8EFF5;

  /* --- 書体 --- */
  /* 見出しも本文もゴシック。製造・貿易のBtoBサイトで明朝を使うと
     「和のブランド」寄りに見えるため、角のない現代的なゴシックで揃える。 */
  --head:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
           "Noto Sans JP", "Meiryo", sans-serif;
  --body:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic",
           "Noto Sans JP", "Meiryo", sans-serif;
  --latin: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* --- 行間・見出しサイズ（2026-08-31 追加）---
     ★先方§6「文字サイズ・行間・ボタンサイズを統一」への対応。
       実測で「同じ文字サイズなのに行間が4種類ある」状態だったので、
       本文系はすべて --lh-body に寄せた。
     ★新しく本文を書くときは必ずこのトークンを使う。数値を直接書かない。
     ★ナビ・小見出し・バッジなどのUIラベルは別（1.3〜1.65）。
       行が詰まっていること自体が意味を持つので、ここには寄せない。 */
  --lh-body:   1.9;    /* 本文・カード本文・注記・表のセル */
  --fs-h3:     17px;   /* カード見出し（サービス／課題／理由／品質管理／事例／対応領域／流れ） */
  --fs-h3-lg:  20px;   /* 大きめのカード見出し（国カード／比較カード） */

  /* --- レイアウト --- */
  --wrap:         1200px;
  --wrap-wide:    1320px;
  --read:         760px;
  --radius:       12px;      /* 角は control 寄りに小さめ＝工業製品らしさ */
  --radius-lg:    18px;
  --radius-pill:  999px;

  /* --- 影（弱く・寒色） --- */
  --shadow-sm: 0 3px 12px rgba(13, 38, 68, .06);
  --shadow:    0 14px 38px rgba(13, 38, 68, .09);
  --shadow-lg: 0 24px 64px rgba(13, 38, 68, .13);

  /* --- 余白スケール --- */
  --sec-pad:     84px;
  --sec-pad-sp:  56px;
}

@media (max-width: 760px) {
  :root {
    --radius:    10px;
    --radius-lg: 14px;
  }
}