/* 採用サイト デザイントークン（2026-10-15 / Figma「02_採用サイト_2026」_整理_1015 から作成）
   - 色：Figma 変数コレクション `color`
   - 影：Figma エフェクトスタイル `shadow/*`
   - 文字：Figma の実データ（Noto Sans JP / Noto Serif JP / Poppins）の段ごとの多数派
   2026-10-16：Noto Serif JP は字間2%・タイトルは SemiBold(600)。Noto Sans JP / Poppins の SemiBold は Bold(700) に置き換え。
   行間がとても大きい1行ラベル（多数派が250%超）は、実装では line-height:1 + 上下中央そろえで組む。 */

:root {
  /* ---------- 色 ---------- */
  --color-navy: #07084d;      /* 本文 */
  --color-blue: #003da6;      /* ブランド */
  --color-blue-500: #225fd8;
  --color-blue-300: #89adf4;
  --color-blue-200: #c2d6ff;
  --color-blue-100: #d8e5ff;
  --color-blue-50: #f5f8ff;
  --color-pink-500: #eb4e80;
  --color-pink-300: #f8b2c8;
  --color-pink-200: #ffd8e3;   /* タグ・淡い面（2026-10-15 濁りを解消：旧 #fadce5） */
  --color-pink-100: #ffe7ee;
  --color-pink-50: #fff1f5;    /* カードの背景（04_next SHE_02 AIX・アドバンスト／本人調整 10-15） */
  --color-gray-700: #4c4c51;
  --color-gray-300: #d9d9d9;
  --color-white: #ffffff;
  --color-navy-60: rgb(7 8 77 / 0.6);   /* 補足の文字 */

  /* ---------- 影（ずらし0・広がり0） ---------- */
  --shadow-pc-s: 0 0 6px rgb(0 61 166 / 0.2);
  --shadow-pc-m: 0 0 10px rgb(0 61 166 / 0.2);
  --shadow-pc-l: 0 0 20px rgb(0 61 166 / 0.15);
  --shadow-pc-pink-s: 0 0 6px rgb(235 78 128 / 0.2);
  --shadow-pc-pink-m: 0 0 10px rgb(235 78 128 / 0.2);
  /* 押せるカードのホバー（サイト内で統一・本人 10/20）＝0.3秒で6px浮いて、影が落ちる */
  --card-lift: translateY(-6px);
  --card-hover-shadow: 0 10px 14px rgb(0 61 166 / 0.18);
  --card-hover-shadow-pink: 0 10px 14px rgb(235 78 128 / 0.18);
  --card-hover-dur: .3s;
  /* すりガラスのまるボタン（閉じる・送る・メニュー・再生。2026-10-20 本人「背景が透けてぼける」） */
  --glass-bg: rgb(255 255 255 / 0.4);
  --glass-border: 0;   /* 縁の線はなし（本人 10/20） */
  --glass-blur: blur(12px) saturate(1.5);
  --glass-shadow: 0 4px 16px rgb(0 61 166 / 0.16);
  --shadow-pc-text-glow: 0 0 5px rgb(8 30 69 / 0.6);
  --shadow-sp-s: 0 0 3px rgb(0 61 166 / 0.2);
  --shadow-sp-m: 0 0 5px rgb(0 61 166 / 0.2);
  --shadow-sp-l: 0 0 10px rgb(0 61 166 / 0.15);
  --shadow-sp-pink-s: 0 0 3px rgb(235 78 128 / 0.2);
  --shadow-sp-pink-l: 0 0 10px rgb(235 78 128 / 0.15);
  --shadow-sp-text-glow: 0 0 3px rgb(8 30 69 / 0.6);
  /* 暗い背景の上に乗るもの専用（モーダルの板）。Figma に shadow/modal として同じ値で足す（2026-10-19 本人）
     Figma：ドロップシャドウ X0 Y20 ぼかし50 広がり0・色 #00000A 50% */
  --shadow-modal: 0 20px 50px rgb(0 0 10 / 0.5);

  /* ---------- 書体 ---------- */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Poppins", var(--font-sans);

  /* ---------- 文字サイズの段 ---------- */
  /* SP（〜767px） */
  --fs-10: 10px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-60: 60px;
}

/* ---------- 文字スタイル：PC（多数派の行間・字間） ----------
   名前は 書体-サイズ-太さ。字間は em 換算（Figma の % ÷ 100） */
@media (min-width: 768px) {
  .t-sans-12-regular  { font: 400 12px/1.5 var(--font-sans); letter-spacing: .08em; }
  .t-sans-12-medium   { font: 500 12px/1.5 var(--font-sans); letter-spacing: .02em; }
  .t-sans-14-regular  { font: 400 14px/1.7 var(--font-sans); letter-spacing: 0; }
  .t-sans-14-medium   { font: 500 14px/1.5 var(--font-sans); letter-spacing: .05em; }
  .t-sans-14-bold     { font: 700 14px/1.65 var(--font-sans); letter-spacing: .07em; }
  .t-sans-16-regular  { font: 400 16px/1.75 var(--font-sans); letter-spacing: 0; }   /* 本文 */
  .t-sans-16-medium   { font: 500 16px/1.4 var(--font-sans); letter-spacing: .05em; }
  .t-sans-16-bold     { font: 700 16px/1.75 var(--font-sans); letter-spacing: 0; }
  .t-sans-18-regular  { font: 400 18px/1.5 var(--font-sans); letter-spacing: .05em; }
  .t-sans-18-medium   { font: 500 18px/1.9 var(--font-sans); letter-spacing: .05em; }
  .t-sans-18-bold     { font: 700 18px/1.95 var(--font-sans); letter-spacing: .08em; }
  .t-sans-20-medium   { font: 500 20px/1.45 var(--font-sans); letter-spacing: .05em; }
  .t-sans-20-bold     { font: 700 20px/1 var(--font-sans); letter-spacing: .07em; }      /* 1行ラベル（Figma 390%） */
  .t-sans-24-medium   { font: 500 24px/1.75 var(--font-sans); letter-spacing: .05em; }
  .t-sans-24-bold     { font: 700 24px/1.35 var(--font-sans); letter-spacing: .05em; }
  .t-sans-28-medium   { font: 500 28px/1.5 var(--font-sans); letter-spacing: .05em; }
  .t-sans-28-bold     { font: 700 28px/1.6 var(--font-sans); letter-spacing: .02em; }
  .t-sans-35-bold     { font: 700 35px/1.75 var(--font-sans); letter-spacing: .07em; }
  .t-serif-20-medium  { font: 500 20px/1.4 var(--font-serif); letter-spacing: .02em; }
  .t-serif-20-bold    { font: 700 20px/1.5 var(--font-serif); letter-spacing: .02em; }
  .t-serif-24-semibold{ font: 600 24px/1.5 var(--font-serif); letter-spacing: .02em; }
  .t-serif-28-medium  { font: 500 28px/1.1 var(--font-serif); letter-spacing: .02em; }
  .t-serif-28-semibold{ font: 600 28px/1.5 var(--font-serif); letter-spacing: .02em; }
  .t-serif-40-semibold{ font: 600 40px/1.65 var(--font-serif); letter-spacing: .02em; }
  .t-serif-60-medium  { font: 500 60px/1.2 var(--font-serif); letter-spacing: .02em; }
  .t-en-12-medium     { font: 500 12px/1 var(--font-en); letter-spacing: .01em; }        /* 1行ラベル（Figma 510%） */
  .t-en-14-regular    { font: 400 14px/1 var(--font-en); letter-spacing: .05em; }        /* 1行ラベル（Figma 235%） */
  .t-en-14-medium     { font: 500 14px/1 var(--font-en); letter-spacing: .08em; }        /* 1行ラベル（Figma 245%） */
  .t-en-16-medium     { font: 500 16px/1 var(--font-en); letter-spacing: .08em; }        /* 1行ラベル（Figma 380%） */
  .t-en-20-medium     { font: 500 20px/1 var(--font-en); letter-spacing: .11em; }        /* 1行ラベル（Figma 305%） */
  .t-en-24-medium     { font: 500 24px/1.35 var(--font-en); letter-spacing: .15em; }
  .t-en-28-medium     { font: 500 28px/1.8 var(--font-en); letter-spacing: .08em; }
  .t-en-35-medium     { font: 500 35px/1.2 var(--font-en); letter-spacing: .08em; }
  .t-en-35-bold   { font: 700 35px/1.55 var(--font-en); letter-spacing: .02em; }
  .t-en-40-medium     { font: 500 40px/1.2 var(--font-en); letter-spacing: -.01em; }
  .t-en-50-medium     { font: 500 50px/1.2 var(--font-en); letter-spacing: -.01em; }
  .t-en-60-medium     { font: 500 60px/1 var(--font-en); letter-spacing: .01em; }
  .t-en-110-medium    { font: 500 110px/1.2 var(--font-en); letter-spacing: -.04em; }
  .t-en-160-medium    { font: 500 160px/1.2 var(--font-en); letter-spacing: -.04em; }
}

/* ---------- 文字スタイル：SP ---------- */
@media (max-width: 767px) {
  .t-sans-10-regular  { font: 400 10px/1.4 var(--font-sans); letter-spacing: .02em; }
  .t-sans-10-medium   { font: 500 10px/1.2 var(--font-sans); letter-spacing: .02em; }
  .t-sans-12-regular  { font: 400 12px/1.65 var(--font-sans); letter-spacing: 0; }
  .t-sans-12-medium   { font: 500 12px/1.5 var(--font-sans); letter-spacing: 0; }
  .t-sans-12-bold     { font: 700 12px/1.6 var(--font-sans); letter-spacing: 0; }
  .t-sans-13-regular  { font: 400 13px/1.75 var(--font-sans); letter-spacing: 0; }   /* 本文 */
  .t-sans-13-medium   { font: 500 13px/1.75 var(--font-sans); letter-spacing: 0; }
  .t-sans-14-regular  { font: 400 14px/1.55 var(--font-sans); letter-spacing: 0; }
  .t-sans-14-medium   { font: 500 14px/1.45 var(--font-sans); letter-spacing: .02em; }
  .t-sans-14-bold     { font: 700 14px/1.55 var(--font-sans); letter-spacing: 0; }
  .t-sans-16-medium   { font: 500 16px/1.85 var(--font-sans); letter-spacing: .05em; }
  .t-sans-16-bold     { font: 700 16px/1.55 var(--font-sans); letter-spacing: .02em; }
  .t-sans-18-medium   { font: 500 18px/1.5 var(--font-sans); letter-spacing: .02em; }
  .t-sans-18-bold     { font: 700 18px/1.5 var(--font-sans); letter-spacing: 0; }       /* Figma 255% は1行ラベル */
  .t-sans-20-medium   { font: 500 20px/1.05 var(--font-sans); letter-spacing: .07em; }
  .t-sans-24-medium   { font: 500 24px/1.4 var(--font-sans); letter-spacing: .02em; }
  .t-sans-24-bold     { font: 700 24px/1.35 var(--font-sans); letter-spacing: .02em; }
  .t-serif-16-medium  { font: 500 16px/1.4 var(--font-serif); letter-spacing: .02em; }
  .t-serif-16-semibold{ font: 600 16px/1.65 var(--font-serif); letter-spacing: .02em; }
  .t-serif-18-medium  { font: 500 18px/1.15 var(--font-serif); letter-spacing: .02em; }
  .t-serif-18-semibold{ font: 600 18px/1.55 var(--font-serif); letter-spacing: .02em; }
  .t-serif-20-semibold{ font: 600 20px/1.7 var(--font-serif); letter-spacing: .02em; }
  .t-en-10-regular    { font: 400 10px/1 var(--font-en); letter-spacing: .08em; }        /* 1行ラベル（Figma 260%） */
  .t-en-10-medium     { font: 500 10px/1.2 var(--font-en); letter-spacing: .04em; }
  .t-en-12-regular    { font: 400 12px/1.9 var(--font-en); letter-spacing: .1em; }
  .t-en-12-medium     { font: 500 12px/1.2 var(--font-en); letter-spacing: .02em; }
  .t-en-13-regular    { font: 400 13px/2.15 var(--font-en); letter-spacing: .06em; }
  .t-en-13-medium     { font: 500 13px/1.6 var(--font-en); letter-spacing: 0; }
  .t-en-14-medium     { font: 500 14px/1.2 var(--font-en); letter-spacing: 0; }
  .t-en-16-medium     { font: 500 16px/1 var(--font-en); letter-spacing: .05em; }        /* 1行ラベル（Figma 290%） */
  .t-en-16-bold   { font: 700 16px/1.55 var(--font-en); letter-spacing: .02em; }
  .t-en-18-medium     { font: 500 18px/1.7 var(--font-en); letter-spacing: .08em; }
  .t-en-20-regular    { font: 400 20px/1.2 var(--font-en); letter-spacing: .08em; }
  .t-en-20-medium     { font: 500 20px/1.2 var(--font-en); letter-spacing: .08em; }
  .t-en-20-bold   { font: 700 20px/1.5 var(--font-en); letter-spacing: .02em; }
  .t-en-24-medium     { font: 500 24px/1.2 var(--font-en); letter-spacing: -.01em; }
  .t-en-24-bold   { font: 700 24px/1.35 var(--font-en); letter-spacing: .02em; }
  .t-en-30-medium     { font: 500 30px/1 var(--font-en); letter-spacing: .01em; }
  .t-en-60-medium     { font: 500 60px/1.2 var(--font-en); letter-spacing: -.04em; }
}