@charset "UTF-8";
/* =====================================================================
   KAMIWAZA 公式サイト — デザイントークン
   =====================================================================
   アートディレクション「白地に、現場を。」（2026-08-29 採用）
   このファイルには値だけを置く。見た目の組み立ては kwz-site.css。

   確定事項（変更する場合は必ず合意を取り直すこと）
     - KAMIWAZAブルー #1273B8 … 白に対し 5.03:1（WCAG AA 通常文字を満たす）
     - 濃紺 #0B1420 … 全面背景に使ってよいのは Footer のみ
     - 影は使わない。境界は 1px の罫線で作る
     - 角丸は 2px
     - 面積目標 白46% / オフ白20% / 写真22% / ブルー5〜8% / 濃紺3〜5%
   ===================================================================== */

:root{
  /* --- 面 ------------------------------------------------------- */
  --kwz-paper:      #FFFFFF;   /* ページ基本背景 */
  --kwz-wash:       #F5F7F8;   /* セクションの交互背景。連続させない */
  --kwz-wash-2:     #ECEFF2;   /* プレースホルダ等のさらに一段濃い面 */

  /* --- 文字 ------------------------------------------------------ */
  --kwz-ink:        #16212C;   /* 本文・見出し。純黒は使わない */
  --kwz-ink-2:      #57687A;   /* 補助文。これより薄くしない */
  --kwz-ink-3:      #8A99A6;   /* ラベル・キャプション。本文には使わない */

  /* --- 罫線（影の代わり）----------------------------------------- */
  --kwz-rule:       #E1E6EA;
  --kwz-rule-2:     #C9D1D8;
  --kwz-rule-ink:   #16212C;   /* セクション見出しの太罫 2px */

  /* --- ブランド --------------------------------------------------- */
  --kwz-blue:       #1273B8;   /* 確定値。CTA・リンク・アイコン・数字の単位 */
  --kwz-blue-d:     #0E5B92;   /* hover / active */
  --kwz-blue-soft:  #EAF4FB;   /* 相談導線の背景・注記。面積3%まで */
  --kwz-navy:       #0B1420;   /* Footer のみ。全面背景として他では使わない */

  /* --- 状態色（ブランド色とは別系統）------------------------------ */
  --kwz-alert:      #A9502F;
  --kwz-alert-soft: #FBEFE9;

  /* --- 余白 ------------------------------------------------------- */
  --kwz-sp-1: 4px;
  --kwz-sp-2: 8px;
  --kwz-sp-3: 12px;
  --kwz-sp-4: 16px;
  --kwz-sp-5: 24px;
  --kwz-sp-6: 32px;
  --kwz-sp-7: 48px;
  --kwz-sp-8: 72px;
  --kwz-sp-9: 96px;
  --kwz-sec:  72px;            /* セクション上下（SP）*/
  --kwz-sec-lg: 120px;         /* セクション上下（PC）白ベースはここを削らない */

  /* --- レイアウト -------------------------------------------------- */
  --kwz-max:      1200px;      /* 12カラムの最大幅 */
  --kwz-gutter:   20px;        /* SP 左右余白 */
  --kwz-gutter-lg:24px;        /* PC ガター */

  /* --- 形状 -------------------------------------------------------- */
  --kwz-radius:   2px;         /* ボタン・カード・写真すべて共通 */
  --kwz-border:   1px;

  /* --- タイポグラフィ ---------------------------------------------- */
  /* Webフォントは未確定（B-11）。決定するまでシステムフォントで組む。
     確定したらこの2行の差し替えだけで全ページに反映される。 */
  --kwz-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
              "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", Meiryo, sans-serif;
  --kwz-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --kwz-mono: "SFMono-Regular", Consolas, "Roboto Mono", monospace;

  /* 中間サイズを使わない。大きいか小さいかの二極にする */
  --kwz-fs-hero:   26px;       /* FV見出し（SP）*/
  --kwz-fs-h2:     24px;       /* セクション見出し（SP）*/
  --kwz-fs-h3:     17px;
  --kwz-fs-body:   15px;
  --kwz-fs-small:  13px;
  --kwz-fs-cap:    12px;       /* キャプション */
  --kwz-fs-label:  11px;       /* 英字ラベル */
  --kwz-fs-num:    36px;       /* 数字（SP）*/

  --kwz-lh-body:   1.85;
  --kwz-lh-head:   1.45;

  /* --- 写真比率（3種＋FV専用の縦）--------------------------------- */
  --kwz-ar-wide:   16 / 9;
  --kwz-ar-photo:  3 / 2;
  --kwz-ar-square: 1 / 1;
  --kwz-ar-fv:     3 / 4;      /* FVのPCのみ。SPでは使わない */

  /* --- モーション --------------------------------------------------- */
  --kwz-dur: 240ms;
  --kwz-ease: cubic-bezier(.2,.6,.2,1);
}

@media (min-width: 768px){
  :root{
    --kwz-fs-hero: 40px;
    --kwz-fs-h2:   36px;
    --kwz-fs-h3:   19px;
    --kwz-fs-body: 16px;
    --kwz-fs-num:  56px;
  }
}

/* =====================================================================
   使ってはいけない値（レビュー用の覚え書き）
   - box-shadow …… 使わない。境界は --kwz-rule
   - #999 前後のグレー文字 …… 使わない。補助文でも --kwz-ink-2 まで
   - サービスごとの色（partner_services.service_color）…… サイトでは使わない
   - 絵文字アイコン …… 使わない。単色線画SVGのみ
   - 濃紺の全面背景 …… Footer 以外では作らない
   ===================================================================== */