/* ============================================================
   Reach-out Design Tokens
   ============================================================ */

:root {

  /* --------------------------------------------------
     Colors
  -------------------------------------------------- */
  --color-main:    #005E81;   /* メインカラー（ティール） */
  --color-black:   #231815;   /* テキスト・ボタン */
  --color-white:   #FFFFFF;
  --color-gray-lt: #DCDDDD;   /* sub01 / ボーダー */
  --color-gray-md: #919191;   /* sun03 / サブテキスト */
  --color-bg:      #FFFFFF;

  /* --------------------------------------------------
     Typography — Family
  -------------------------------------------------- */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Montserrat', sans-serif;

  /* --------------------------------------------------
     Typography — Size & Weight
  -------------------------------------------------- */
  /* Hero */
  --fz-hero:    64px;
  --fw-hero:    700;
  --lh-hero:    1.5;

  /* Section label（英語見出し: Service / Recruit …） */
  --fz-label:   48px;
  --fw-label:   600;   /* Montserrat SemiBold */
  --lh-label:   1;

  /* H2（日本語大見出し） */
  --fz-h2:      48px;
  --fw-h2:      700;
  --lh-h2:      1.5;

  /* H3 */
  --fz-h3:      32px;
  --fw-h3:      400;
  --lh-h3:      1;

  /* H4 */
  --fz-h4:      24px;
  --fw-h4:      500;
  --lh-h4:      2;

  /* Body */
  --fz-body:    16px;
  --fw-body:    400;
  --lh-body:    2;

  /* Body Bold */
  --fw-body-b:  700;

  /* Large */
  --fz-lg:      20px;
  --fw-lg:      400;
  --lh-lg:      2;

  /* Caption */
  --fz-cap:     12px;
  --fw-cap:     400;
  --lh-cap:     1.5;

  /* --------------------------------------------------
     Layout
  -------------------------------------------------- */
  --width-content:   1200px;
  --width-site:      1440px;
  --pad-side:        120px;   /* コンテンツ左右余白 (PC) */
  --pad-side-sp:      20px;   /* コンテンツ左右余白 (SP) */

  /* --------------------------------------------------
     Border Radius
  -------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;

  /* --------------------------------------------------
     Components — Header
  -------------------------------------------------- */
  --header-h:    64px;
  --header-bg:   rgba(255, 255, 255, 0.8);

  /* --------------------------------------------------
     Components — Button
  -------------------------------------------------- */
  --btn-primary-bg:    var(--color-black);
  --btn-primary-color: var(--color-white);
  --btn-white-bg:      var(--color-white);
  --btn-white-color:   var(--color-black);
  --btn-w:             464px;
  --btn-pad:           16px;

  /* --------------------------------------------------
     Components — Tag / Badge
  -------------------------------------------------- */
  --tag-bg:    var(--color-black);
  --tag-color: var(--color-white);
  --tag-pad:   4px 8px;

  /* --------------------------------------------------
     Breakpoints (参照用)
     SP: ~ 767px
     TAB: 768px ~ 1024px
     PC: 1025px ~
  -------------------------------------------------- */
}