@charset "UTF-8";
/* ==========================================================================
   大分みんなの法律事務所 交通事故サイト リニューアル
   design-tokens.css  —  デザイン値の定義のみ（見た目の指定は ui-kit.css）
   --------------------------------------------------------------------------
   ・プレフィックス： .oita-rv1-*（新サイト共通UI）
   ・既存の解決事例本文は .case-renewal-v1__* をそのまま利用する（改名しない）
   ・既存テーマ固有セレクタの上書きはこのファイルに書かず theme-bridge.css へ隔離する
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root {
  /* 色：ロゴのオレンジを主役にする。青は情報整理、緑はLINEのみ。
     枠で囲って目立たせるのではなく、色数を絞って優先順位を作る。 */
  --oita-rv1-brand:      #F08300; /* ロゴのオレンジ。ブランドとCV */
  --oita-rv1-brand-deep: #D96D00; /* ホバー */
  --oita-rv1-brand-pale: #FDF3E7; /* 面の敷き */
  --oita-rv1-tel:        #E2521B; /* 電話CTAのみ。最優先 */
  --oita-rv1-ink:        #123055; /* 濃紺。本文・見出し */
  --oita-rv1-ink-soft:   #5A6C82; /* 補足文 */
  --oita-rv1-sea:        #1B4B7E; /* 青。情報整理・リンク */
  --oita-rv1-sea-deep:   #0E3358; /* 濃い面 */
  --oita-rv1-sea-pale:   #EEF4FA; /* 淡いブルー */
  --oita-rv1-paper:      #FBFAF8; /* 背景 */
  --oita-rv1-line:       #DFE3E8; /* 罫線 */
  --oita-rv1-sun:        #F08300; /* 金額の強調（ブランドと同色） */
  --oita-rv1-alert:      #E2521B; /* 電話CTA */
  --oita-rv1-line-green: #06C755; /* LINEブランド色。例外 */
  --oita-rv1-white:      #FFFFFF;

  /* 文字：見出しと本文で2書体。見出しは字面が大きく可読性の高いゴシック。 */
  --oita-rv1-font-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --oita-rv1-font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --oita-rv1-font-num:  "Zen Kaku Gothic New", sans-serif;

  /* 型階層：本文16px（SP）/17px（PC）を基準に、1.25倍で刻む */
  --oita-rv1-fs-xs:   0.8125rem;
  --oita-rv1-fs-sm:   0.9375rem;
  --oita-rv1-fs-base: 1rem;
  --oita-rv1-fs-lg:   1.125rem;
  --oita-rv1-fs-xl:   1.375rem;
  --oita-rv1-fs-2xl:  1.75rem;
  --oita-rv1-fs-3xl:  2.25rem;
  --oita-rv1-fs-4xl:  2.875rem;

  --oita-rv1-lh-tight: 1.35;
  --oita-rv1-lh-base:  1.85; /* 日本語本文はやや広めに取る */

  /* 余白：4pxを基数にする */
  --oita-rv1-space-1: 0.25rem;
  --oita-rv1-space-2: 0.5rem;
  --oita-rv1-space-3: 0.75rem;
  --oita-rv1-space-4: 1rem;
  --oita-rv1-space-5: 1.5rem;
  --oita-rv1-space-6: 2rem;
  --oita-rv1-space-7: 3rem;
  --oita-rv1-space-8: 4.5rem;
  --oita-rv1-space-9: 6rem;

  /* 幅：本文は1行あたり40字前後で折り返す */
  --oita-rv1-width-text: 42rem;
  --oita-rv1-width-wide: 68rem;

  /* 角丸は用途で変える。カードは小さく、ボタンは大きく。全部同じにしない。 */
  --oita-rv1-radius-sm: 3px;
  --oita-rv1-radius-md: 6px;
  --oita-rv1-radius-pill: 999px;

  --oita-rv1-shadow-card: 0 1px 2px rgba(14, 42, 46, .06);
  --oita-rv1-shadow-lift: 0 6px 20px rgba(14, 42, 46, .12);

  /* z-index：重なり順を1か所で管理する */
  --oita-rv1-z-base: 1;
  --oita-rv1-z-header: 40;
  --oita-rv1-z-sticky: 50;
  --oita-rv1-z-overlay: 60;
  --oita-rv1-z-modal: 70;
}

@media (min-width: 768px) {
  :root {
    --oita-rv1-fs-base: 1.0625rem;
    --oita-rv1-fs-4xl: 3.5rem;
  }
}


/* --------------------------------------------------------------------------
   ブレークポイント（仕様値）
   CSS変数は @media の条件に使えないため、値は仕様としてここに記し、
   実際の @media には固定値を書く。ビルドを挟む場合はこの値を変数化する。
     sm  : 600px   … CTAを横並びにする
     md  : 640px   … カードを2列にする
     lg  : 768px   … 本文サイズを上げる／3列グリッドの前段
     xl  : 900px   … PCナビ表示・SP固定CTA非表示・3列グリッド
   -------------------------------------------------------------------------- */