@charset "UTF-8";
/* =========================================================
   キャリアサバイバー デザイントークン
   すべての色・余白・文字サイズはここで定義する。
   個別のCSSやHTMLに生の値を書かないこと。
   ========================================================= */

:root {
  /* ---- ブランドカラー ---------------------------------
     緑 = ロゴ由来のブランド色。前進・就職・成長。
     紺 = 信頼・実務。見出しと構造に使う。
     橙 = 行動喚起。CTAだけに使い、乱用しない。       */
  --cs-green:        #00874b;
  --cs-green-dark:   #006b3c;
  --cs-green-light:  #e8f4ee;
  --cs-green-tint:   #f3f9f6;

  --cs-navy:         #12263f;
  --cs-navy-mid:     #1e3a5f;
  --cs-navy-light:   #eef2f7;

  --cs-accent:       #f2683c;
  --cs-accent-dark:  #d9522a;
  --cs-accent-light: #fef1ec;

  /* ---- テキスト ---- */
  --cs-text:         #1a1f2b;
  --cs-text-sub:     #4a5568;
  --cs-text-muted:   #6b7684;
  --cs-text-faint:   #9aa4b2;
  --cs-text-invert:  #ffffff;

  /* ---- 面と線 ---- */
  --cs-bg:           #ffffff;
  --cs-bg-soft:      #f7f9fb;
  --cs-bg-mute:      #eef1f5;
  --cs-border:       #e3e8ee;
  --cs-border-strong:#cfd7e0;

  /* ---- 状態色 ---- */
  --cs-warn:         #c77700;
  --cs-warn-bg:      #fff8ec;
  --cs-danger:       #c0392b;
  --cs-danger-bg:    #fdf0ee;
  --cs-info:         #1e6fa8;
  --cs-info-bg:      #eef6fc;

  /* ---- 書体 ---------------------------------------------
     Webフォントは読み込まない。端末標準の日本語ゴシックを
     使うことで初期表示を速くし、可読性も確保する。      */
  --cs-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
             "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
             "YuGothic", Meiryo, sans-serif;
  --cs-font-num: "Helvetica Neue", Arial, var(--cs-font);

  /* ---- 文字サイズ（モバイル基準） ---- */
  --cs-fs-2xs:  0.6875rem; /* 11px 補助ラベル */
  --cs-fs-xs:   0.75rem;   /* 12px */
  --cs-fs-sm:   0.8125rem; /* 13px */
  --cs-fs-base: 1rem;      /* 16px 本文 */
  --cs-fs-md:   1.0625rem; /* 17px */
  --cs-fs-lg:   1.1875rem; /* 19px */
  --cs-fs-xl:   1.375rem;  /* 22px h3 */
  --cs-fs-2xl:  1.5rem;    /* 24px h2 */
  --cs-fs-3xl:  1.75rem;   /* 28px h1 */
  --cs-fs-4xl:  1.8rem;    /* 29px hero（モバイルで折り返さない大きさ） */

  /* ---- 行間 ---- */
  --cs-lh-tight: 1.4;
  --cs-lh-snug:  1.6;
  --cs-lh-body:  1.95;  /* 日本語の長文はやや広め */
  --cs-lh-loose: 2.1;

  /* ---- 余白（4pxベース） ---- */
  --cs-sp-1: 0.25rem;
  --cs-sp-2: 0.5rem;
  --cs-sp-3: 0.75rem;
  --cs-sp-4: 1rem;
  --cs-sp-5: 1.25rem;
  --cs-sp-6: 1.5rem;
  --cs-sp-8: 2rem;
  --cs-sp-10: 2.5rem;
  --cs-sp-12: 3rem;
  --cs-sp-16: 4rem;
  --cs-sp-20: 5rem;

  /* ---- 角丸 ---- */
  --cs-r-sm: 6px;
  --cs-r:    10px;
  --cs-r-lg: 14px;
  --cs-r-xl: 20px;
  --cs-r-full: 999px;

  /* ---- 影（企業メディアらしく控えめに） ---- */
  --cs-shadow-sm: 0 1px 2px rgba(18, 38, 63, .06);
  --cs-shadow:    0 2px 8px rgba(18, 38, 63, .07);
  --cs-shadow-md: 0 6px 20px rgba(18, 38, 63, .09);
  --cs-shadow-lg: 0 12px 36px rgba(18, 38, 63, .12);

  /* ---- レイアウト幅 ---- */
  --cs-w-wide:    1180px; /* サイト最大幅 */
  --cs-w-content: 720px;  /* 本文カラム（日本語で読みやすい幅） */
  --cs-w-side:    320px;  /* サイドバー */
  --cs-gutter:    1.25rem;

  /* ---- その他 ---- */
  --cs-header-h: 60px;
  --cs-ease: cubic-bezier(.22, .61, .36, 1);
}

/* デスクトップでは文字と余白を少しだけ大きく */
@media (min-width: 900px) {
  :root {
    --cs-fs-base: 1.0625rem; /* 17px */
    --cs-fs-xl:   1.5rem;
    --cs-fs-2xl:  1.75rem;
    --cs-fs-3xl:  2.125rem;
    --cs-fs-4xl:  2.75rem;
    --cs-gutter:  2rem;
    --cs-header-h: 72px;
  }
}