/* =========================================================
   デザイントークン
   Figma「横浜ケミカル_山下最終編集用 / ページ 0820」から実測。
   PC = TOP_design_v1 (1440px) / SP = top-design-sp-mobile (390px)
   取得日 2026-09-03。値を変えるときは必ずFigmaと突き合わせること。
   ========================================================= */

:root {

  /* --- ブレークポイント方針（2026-09-02 合意・変更不可） ---------------
     767px以下   SPカンプ(390px)のレイアウト
     768px以上   PCカンプ(1440px)のレイアウトを可変幅で縮小
     1023px以下  グローバルナビはハンバーガー
     1024px以上  グローバルナビを横並び
     1440px以上  コンテンツ幅は固定、左右に余白
     ※ レイアウトBPとナビBPを分けるのが要点。統合しないこと。
     ※ 中間幅の文字サイズは固定値にせず clamp() で繋ぐこと。
     -------------------------------------------------------------------- */


  /* =====================================================
     色
     ===================================================== */

  /* ブランド */
  --color-blue:        #003F8F;   /* メインブルー。本文リンク・ボタン背景・強調 */
  --color-blue-dark:   #0050AD;   /* 補助ブルー */
  --color-navy:        #17213A;   /* 見出しの濃紺 */
  --color-navy-mid:    #1A3A6B;   /* 中間ネイビー */
  --color-navy-deep:   #0D2A4A;   /* 濃い紺。営業所名・沿革の年・用途見出し */
  --color-ink:         #333333;   /* 署名など */

  /* テキスト */
  --color-text:        #374151;   /* 本文 */
  --color-text-sub:    #607087;   /* 補助テキスト・キャプション */
  --color-text-mute:   #4B6280;   /* さらに弱いテキスト */
  --color-text-invert: #FFFFFF;

  /* 面・罫線 */
  --color-bg:          #FFFFFF;
  --color-bg-page:     #F5F5F5;   /* ページ背景 */
  --color-bg-light:    #F4F7FB;   /* セクションの淡い背景 */
  --color-bg-pale:     #D9E4F0;   /* 淡い青の面 */
  --color-border:      #E5E7EB;
  --color-border-hair: #EEEEEE;   /* 製品仕様表・用途カードの罫線（Figma実測） */
  --color-bg-hair:     #F9FAFB;   /* 製品仕様表のラベル行（SPのみ） */
  --color-border-blue: #D9E4F0;   /* カードの薄い青の枠 */
  --color-border-soft: #D7E0EA;   /* 下層ページの見出し下線・囲みボックス */
  --color-crumb:       #333333;   /* パンくずのリンク */
  --color-crumb-now:   #6B7280;   /* パンくずの現在ページ */
  --color-footer:      #254060;   /* フッター背景 */

  /* グラデーション */
  --grad-section: linear-gradient(180deg, #F7FBFF 0%, #EEF8FF 100%);
  --grad-cta:     linear-gradient(269.43deg, #0489E3 0.49%, #003F8F 99.51%);
  --grad-fv:      linear-gradient(90deg, rgba(0, 63, 143, 0.4) 0%, rgba(0, 95, 184, 0.396) 46%, rgba(0, 115, 195, 0.128) 72%, rgba(0, 74, 146, 0.032) 100%);


  /* =====================================================
     タイポグラフィ
     PCとSPで差があるものだけ clamp()。それ以外は共通。
     ===================================================== */

  /* Figmaで4種類使われている。用途を取り違えないこと。
     - Noto Sans JP  : 本文・ナビ・ボタン・日付・住所など「読ませる文字」
     - Noto Serif JP : 見出し全般（FV / キャッチ / h2 / カード見出し / Recruitサブ）※明朝
     - Inter         : 英字ラベル（Features / Products / News）
     - EB Garamond   : 大きな英字ディスプレイ（ENTRY / CONTACT） */
  --font-base:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif:   "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en:      "Inter", "Noto Sans JP", sans-serif;
  --font-en-display: "EB Garamond", "Times New Roman", serif;

  /* 可変（SP 390px → PC 1440px） */
  --fs-fv:      clamp(2.250rem, 1.693rem + 2.286vw, 3.750rem);  /* 36 → 60 */
  --fs-catch:   clamp(1.750rem, 1.332rem + 1.714vw, 2.875rem);  /* 28 → 46 */
  --fs-h2:      clamp(2.000rem, 1.954rem + 0.190vw, 2.125rem);  /* 32 → 34 */
  --fs-page-title: clamp(1.750rem, 1.518rem + 0.952vw, 2.250rem);  /* 28 → 36 下層ページ見出し（Aパターン） */
  --fs-display: clamp(3.000rem, 2.443rem + 2.286vw, 4.500rem);  /* 48 → 72  CONTACT */
  --fs-entry:   clamp(3.750rem, 2.868rem + 3.619vw, 6.125rem);  /* 60 → 98  ENTRY */
  --fs-tel:     clamp(1.125rem, 1.079rem + 0.190vw, 1.250rem);  /* 18 → 20 */

  /* 固定（PC・SP共通） */
  --fs-h3:      1.375rem;   /* 22px カード見出し */
  --fs-h4:      1.125rem;   /* 18px 小見出し */
  --fs-label:   1.125rem;   /* 18px 英字ラベル（Features / Products など） */
  --fs-button:  1.125rem;   /* 18px */
  --fs-body:    1rem;       /* 16px 本文 */
  --fs-body-sm: 0.875rem;   /* 14px 補助本文・日付 */
  --fs-caption: 0.8125rem;  /* 13px ラベル */
  --fs-body-xs: 0.8125rem;  /* 13px SPの本文・フッター・パンくず */
  --fs-note:    0.75rem;    /* 12px 注記（SPは11px → --fs-note-sp） */
  --fs-note-sp: 0.6875rem;  /* 11px SPのコピーライト */
  --fs-prose:   0.9375rem;  /* 15px 下層ページの本文 */
  --fs-prose-h: 1.125rem;   /* 18px 下層ページの節見出し */

  /* 行間 */
  --lh-fv:      1.4;
  --lh-catch:   1.5;
  --lh-h2:      1.45;
  --lh-h3:      1.2;    /* 22/26 */
  --lh-h4:      1.78;   /* 18/32 */
  --lh-body:    1.75;   /* 16/28 */
  --lh-body-sm: 1.8;    /* 14/25 */
  --lh-tight:   1.25;
  --lh-prose:   1.8;    /* 15/27 */

  /* ウェイト */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;


  /* =====================================================
     レイアウト
     ===================================================== */

  --container:        1200px;   /* コンテンツ幅。全セクション共通 */
  --container-crumb:  1152px;   /* パンくず（Figma: 1440 − padding144×2） */
  --container-prose:   704px;   /* 下層ページ本文のカラム幅 */
  --container-header: 1360px;   /* ヘッダーだけ広い（1440 − padding 40×2） */

  --gutter:        20px;   /* SPの左右余白 */
  --header-height: 52px;   /* SPヘッダー高さ（Figma実測）。768px以上で81pxに切替 */

  --space-section: 60px;   /* セクション上下。PC・SPとも60 */
  --space-card:    20px;   /* カード間 */
  --space-inline:  12px;   /* 見出しと本文の間など */
   /* SP */

  --button-padding: 14px 24px;
  --button-gap:     8px;

  --radius:    6px;   /* カード・ボタン */
  --radius-sm: 4px;   /* チップ・小さいボタン */

  --shadow-card: 0 8px 22px rgba(14, 64, 116, 0.09);
  --shadow-soft: 0 0 19px rgba(0, 52, 112, 0.08);
}


/* 768px以上：PCレイアウトへ */
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --header-height: 81px;   /* PCヘッダー高さ（Figma実測） */
    --button-padding: 0 28px;
    --button-gap: 10px;
  }
}