:root {
  /* ============================================
     カラーパレット
     ============================================ */
  /* ベース（70%・背景） */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F5;
  --color-bg-dark: #1A1A1A;

  /* メイン（25%・ヘッダー/見出し/ボタン） */
  --color-primary: #222222;
  --color-secondary: #000000;

  /* アクセント（5%・CTA/強調） */
  --color-accent: #173286;
  --color-accent-hover: #0F2264;
  /* テキストリンク用の水色（白背景で判読できる明るめのブルー） */
  --color-link: #0E7FC0;
  --color-accent-light: #EAEEF7;
  /* アクセントカラー10%（カードのフレームなど淡い罫線用） */
  --color-accent-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
  /* 水色（採用ページ FV の斜めモチーフ用）とその10% */
  --color-sky: #0084CC;
  --color-sky-10: color-mix(in srgb, var(--color-sky) 10%, transparent);

  /* HERO・ページタイトル帯のネイビー全面背景 */
  --color-navy: #002060;
  /* HERO の斜めモチーフ用（ネイビーより少し暗い） */
  --color-navy-dark: #001C55;

  /* テキスト/補助 */
  --color-black: #111111;
  --color-white: #FFFFFF;
  --color-gray: #666666;
  --color-gray-light: #CCCCCC;

  /* メタリック背景（STRENGTH の数字と 主なめっき工程の番号で共有） */
  --gradient-metal: linear-gradient(135deg, #f7f7f7 0%, #d8d8d8 30%, #ffffff 50%, #bfbfbf 75%, #eaeaea 100%);
  --color-border: #E5E5E5;

  /* ============================================
     タイポグラフィ
     ============================================ */
  /* フォントファミリー
     ※ 数字・Latin は Inter（先頭）、日本語は Noto Sans JP に自動フォールバック */
  --font-jp: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* フォントサイズスケール（clamp で流動的に変化） */
  --fz-xs:   clamp(11px, 0.7vw + 8px, 12px);
  --fz-sm:   clamp(12px, 0.7vw + 9px, 14px);
  --fz-base: clamp(14px, 0.7vw + 11px, 16px);
  --fz-md:   clamp(15px, 0.8vw + 12px, 18px);
  --fz-lg:   clamp(18px, 1vw + 14px, 22px);
  --fz-xl:   clamp(22px, 1.5vw + 16px, 30px);
  --fz-2xl:  clamp(26px, 2vw + 18px, 40px);
  --fz-3xl:  clamp(30px, 3vw + 18px, 48px);

  /* フォントウェイト */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* 行間 */
  --lh-tight:   1.3;
  --lh-sm:      1.4;
  --lh-md:      1.6;
  --lh-lg:      1.8;
  --lh-relaxed: 1.9;

  /* 文字間 */
  --ls-tight:  -0.01em;
  --ls-sm:      0;
  --ls-md:      0.02em;
  --ls-wide:    0.1em;

  /* ============================================
     スペーシング
     ============================================ */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: clamp(60px, 8vw, 120px);

  /* ============================================
     レイアウト
     ============================================ */
  --container-max:    1200px;
  --container-narrow: 880px;
  --container-padding: clamp(20px, 4vw, 40px);

  /* ============================================
     トランジション / イージング
     ============================================ */
  --transition-speed: 0.3s;
  --transition-slow:  0.8s;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     角丸 / 影
     ============================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ============================================
     ヘッダー
     ============================================ */
  --header-height: 80px;
  --header-height-sp: 64px;
}