/* デザイントークン（docs/design/00-tokens.md §5 をそのまま写し、要件由来の値を末尾に追加）。 */
:root {
  /* color */
  --jn-color-primary: #E40063;
  --jn-color-primary-soft: #FDE6F0;
  --jn-color-primary-line: rgba(228, 0, 99, 0.5);
  --jn-color-secondary: #34BFBD;
  --jn-color-navy: #1D3F56;
  --jn-color-text: #555555;
  --jn-color-text-strong: #333333;
  --jn-color-text-muted: #666666;
  --jn-color-white: #FFFFFF;
  --jn-color-border: #CCCCCC;
  --jn-color-placeholder: #D9D9D9;
  --jn-color-contact: #0387A8;
  --jn-color-contact-line: rgba(3, 135, 168, 0.5);
  --jn-color-corp-bg: #CDE7EE;
  --jn-color-deco-pink: #FF5D9B;
  --jn-color-keep-star: #FEA74B;
  --jn-color-fixedbar-bg: rgba(29, 63, 86, 0.2);
  --jn-color-footer-line: rgba(255, 255, 255, 0.1); /* 2px で引く（Figma 描画の #345267）。1px 白 20% の半画素描画と同じ見え */
  --jn-color-band-line: rgba(255, 255, 255, 0.5);
  --jn-color-map-dot: #00CAC2;       /* 判断保留: 検索ブロック単体版は #FF1465 */
  --jn-color-map-dot-alt: #FF1465;
  --jn-color-pref-dot: #E81A71;
  --jn-color-pref-pin: #0051B4;

  /* font */
  --jn-font-base: "Noto Sans JP", sans-serif;
  --jn-font-latin: "Inter", "Noto Sans JP", sans-serif;
  --jn-font-display: "Lato", "Noto Sans JP", sans-serif;
  --jn-lh-base: 1.4;
  --jn-lh-tight: 1.1;
  --jn-lh-loose: 1.8;
  --jn-ls-wide: 0.05em;
  --jn-ls-wider: 0.1em;

  /* font size（SP 基準。PC は下の media で上書き） */
  --jn-fs-section-title: 18px;   /* PC 20 */
  --jn-fs-card-title: 18px;
  --jn-fs-btn: 16px;             /* 艶ボタン。PC 18 */
  --jn-fs-btn-outline: 16px;     /* PC 18 */
  --jn-fs-choice: 13px;          /* 条件・国籍ボタン。PC 18 */
  --jn-fs-choice-wide: 16px;     /* 業種ボタン。PC 18 */
  --jn-fs-body: 14px;
  --jn-fs-band: 16px;            /* 記事見出し帯 */
  --jn-fs-contact-en: 40px;      /* PC 60 */
  --jn-fs-contact-ja: 24px;
  --jn-fs-footer-link: 12px;     /* PC 14 */
  --jn-fs-copyright: 10px;       /* PC 12 */

  /* radius */
  --jn-radius-lg: 20px;
  --jn-radius-md: 16px;
  --jn-radius-sm: 8px;
  --jn-radius-pill: 999px;

  /* effect */
  --jn-shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.25);
  --jn-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 28%);
  --jn-btn-border: 2px solid #FFFFFF;

  /* layout */
  --jn-container-wide: 1200px;   /* 検索カード群 */
  --jn-container: 1120px;        /* 本文 2 カラム */
  --jn-col-main: 760px;
  --jn-col-side: 280px;
  --jn-col-gap: 80px;
  --jn-gutter: 16px;             /* PC 20（tablet 時） */
  --jn-section-py: 28px;         /* PC 80 */
  --jn-header-h: 61px;           /* PC 88 */
  --jn-fixedbar-h: 68px;

  /* 以下は Figma に無い値（要件 04-frontend 由来。実装後に調整できるようトークン化） */
  --jn-color-muted-btn: #7A8288;      /* ログイン後の「ログアウト」ボタン地（§4.1「背景グレー等」）。白文字 18px 太字で 3.9:1 */
  --jn-color-focus: #0051B4;          /* フォーカスリング（§6。白・teal・pink いずれの地でも 3:1 以上） */
  --jn-container-narrow: 760px;       /* 規約型ページの本文幅（左カラム幅と同じ） */
  --jn-duration-hover: 0.2s;          /* §1 アニメーション */
  --jn-duration-modal: 0.2s;
  --jn-duration-collapse: 0.25s;
  /* ブレークポイント（参考値。media query では変数を使えないので各 CSS に直書き）
     sp: 〜767px / tablet: 768〜1079px（PC を縮小、ナビはメニューへ） / pc: 1080px〜 （04-frontend §1） */
}

@media (min-width: 768px) {
  :root {
    --jn-fs-section-title: 20px;
    --jn-fs-btn: 18px;
    --jn-fs-btn-outline: 18px;
    --jn-fs-choice: 18px;
    --jn-fs-choice-wide: 18px;
    --jn-fs-contact-en: 60px;
    --jn-fs-footer-link: 14px;
    --jn-fs-copyright: 12px;
    --jn-gutter: 20px;
    --jn-section-py: 80px;
    --jn-header-h: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --jn-duration-hover: 0s;
    --jn-duration-modal: 0s;
    --jn-duration-collapse: 0s;
  }
}