/* =====================================================================
   UMJ Design Tokens — United Mind Japan コーポレート共通基盤
   2026-06 / cat-so01_child

   ねらい: コーポレート系ページ(会社概要/採用/サービス/官公庁 等)が
   バラバラに定義していた色・フォント・余白を、ひとつの正準トークンに集約する。
   各サービス(ONE SONG=ピンク, SONORY=ダーク, QUINSEL 等)の独自世界観は対象外。

   採用方法: 各コーポレートページの先頭で本ファイルを読み込み、
   ページ独自の --umj-* 定義を本トークンへ寄せていく(段階的移行)。

   【運用方針 — 重要】
   - 旧ロゴは青・赤・緑だが、新イメージは「オレンジ中心」。
   - **オレンジ(--umj-orange)が主役**。これを"引き立てる"のがトークンの役割。
   - navy / green は**控えめな脇役**(見出し・テキスト・構造・ごく稀なアクセント)。
     色を均等に多用すると「色の渋滞」になるため、面で多用しない。
   - 1画面の中で主役色は基本オレンジ1つ。navy はテキスト/信頼の要所、green はごく一部。
   ===================================================================== */
:root {
  /* ---- Brand（ロゴ UMJ: U=濃紺 / M=緑 / J=橙）---- */
  --umj-orange:        #F2811D;   /* 主役アクセント */
  --umj-orange-dark:   #D97108;
  --umj-orange-light:  #FFB066;
  --umj-navy:          #1E3A5F;   /* 信頼・見出し */
  --umj-navy-dark:     #14283F;
  --umj-green:         #5BA82E;   /* 成長・サブ */
  --umj-green-dark:    #44801F;

  /* ---- Neutrals ---- */
  --umj-text:     #1C1C1C;
  --umj-sub:      #4A4A4A;
  --umj-muted:    #8A8A8A;
  --umj-line:     #E6E3DE;
  --umj-bg:       #F7F6F4;
  --umj-bg-soft:  #FBFAF8;
  --umj-white:    #FFFFFF;

  /* ---- Typography ---- */
  --umj-serif:    'Noto Serif JP', serif;                  /* 見出し */
  --umj-display:  'Oswald', 'Noto Sans JP', sans-serif;    /* 数字・英字ラベル */
  --umj-sans:     'Noto Sans JP', system-ui, sans-serif;   /* 本文 */

  /* Type scale */
  --umj-fs-hero:  clamp(32px, 5vw, 56px);
  --umj-fs-h2:    clamp(24px, 3.5vw, 38px);
  --umj-fs-h3:    clamp(18px, 2vw, 22px);
  --umj-fs-body:  16px;
  --umj-fs-small: 13px;

  /* ---- Spacing（8の倍数）---- */
  --umj-s1: 8px;  --umj-s2: 16px; --umj-s3: 24px;
  --umj-s4: 40px; --umj-s5: 64px; --umj-s6: 96px;

  /* ---- Shape / Motion ---- */
  --umj-radius:    12px;
  --umj-radius-sm: 8px;
  --umj-shadow:    0 4px 32px rgba(0,0,0,.08);
  --umj-shadow-sm: 0 2px 12px rgba(0,0,0,.06);
  --umj-ease:      cubic-bezier(.16, 1, .3, 1);
}

/* =====================================================================
   共通ユーティリティ（採用は段階的に。既存を壊さないよう .umj- 名前空間）
   ===================================================================== */
.umj-label {
  font-family: var(--umj-display);
  font-size: var(--umj-fs-small);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--umj-orange); font-weight: 600;
}
.umj-h2 {
  font-family: var(--umj-serif);
  font-size: var(--umj-fs-h2); font-weight: 600;
  color: var(--umj-navy); line-height: 1.35; letter-spacing: .02em;
}
.umj-lead {
  font-family: var(--umj-sans);
  font-size: var(--umj-fs-body); line-height: 1.9; color: var(--umj-sub);
}
.umj-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px;
  font-family: var(--umj-sans); font-weight: 700; font-size: 15px;
  background: var(--umj-orange); color: #fff; text-decoration: none;
  box-shadow: 0 6px 20px rgba(242,129,29,.25);
  transition: transform .25s var(--umj-ease), box-shadow .25s var(--umj-ease);
}
.umj-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(242,129,29,.32); }
.umj-btn--navy  { background: var(--umj-navy);  box-shadow: 0 6px 20px rgba(30,58,95,.25); }
.umj-btn--green { background: var(--umj-green); box-shadow: 0 6px 20px rgba(91,168,46,.25); }
.umj-card {
  background: var(--umj-white); border-radius: var(--umj-radius);
  box-shadow: var(--umj-shadow); padding: var(--umj-s4);
  border: 1px solid var(--umj-line);
}

@media (prefers-reduced-motion: reduce) {
  .umj-btn,
  .umj-btn::before,
  .umj-btn::after,
  .umj-card,
  .umj-card::before,
  .umj-card::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

.umj-btn {
  min-height:44px;
  justify-content:center;
}

.umj-btn:focus-visible {
  outline:3px solid rgba(242,129,29,.85);
  outline-offset:3px;
}