/* ============================================================
   長澤工業株式会社 デザイントークン
   コンセプト：清潔な白基調＋濃紺文字＋青のアクセント（採用ページのみ黄を追加）
   指示書1-4に基づく指定。正式ブランドカラーの断定ではない
   ============================================================ */
:root {
  /* 色 */
  --c-navy: #16243e;         /* 文字・フッター用の濃紺 */
  --c-navy-sub: #3a4a66;
  --c-navy-mute: #76829a;
  --c-blue: #1a5fd6;         /* 見出し線・CTAの企業ブルー */
  --c-blue-dark: #12408f;
  --c-blue-tint: #eaf1fc;
  --c-yellow: #f3b627;       /* 採用ページだけのアクセント */
  --c-yellow-tint: #fef6e4;
  --c-error: #d5021a;        /* フォームのエラー表示専用。ブランド色と別に固定 */
  --c-error-dark: #b00016;
  --c-error-tint: #fdf1f2;
  --c-ink: var(--c-navy);    /* style.css が参照する文字色の別名 */
  --c-ink-sub: var(--c-navy-sub);
  --c-ink-mute: var(--c-navy-mute);
  --c-navy-deep: #0f2a5c;    /* フッター・ヒーローの重ね */
  --c-ph: #34465f;           /* 写真待ちの仮ブロック */
  --c-ph-2: #1f2f48;
  --c-line: #e2e6ed;
  --c-line-strong: #c9cfdb;
  --c-bg: #ffffff;
  --c-bg-soft: #f5f7fa;
  --c-bg-cool: #eef3f8;

  /* 文字 */
  --ff-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  /* 参考画像はすべてゴシック。旧明朝指定の箇所もゴシックで表示する */
  --ff-serif: var(--ff-sans);
  --ff-hand: "Yusei Magic", "Noto Sans JP", sans-serif;  /* 採用ヒーローの手書き風見出しのみ */
  --ff-en: "Inter", "Noto Sans JP", sans-serif;

  --fs-xs: 0.8125rem;        /* 13px。12pxは読みにくいので使わない */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-hero: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);

  /* 余白 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(64px, 5vw + 40px, 128px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1200px;

  /* 形 */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 25, 40, .08);
  --shadow: 0 6px 24px rgba(15, 25, 40, .10);

  --header-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1023px) {
  :root { --header-h: 68px; }
}

/* 採用ページ：参考画像02は青基調のまま。黄は見出しの一部（--c-yellow）だけに使うので、
   以前の「--c-blue を黄に置き換える」方式はやめた。クラス自体はフック用に残す */
body.theme-recruit { }