/* 写し。直すのは fiz-design-system/src/tokens.css（このファイルは直接編集しない） */
@charset "UTF-8";
/* ============================================================
   FIZ デザインシステムの決まりの元。
   値を変えるときはここだけを直し、写すスクリプトで開発サイトに写す
   （fiz-design-system/決まりの値を開発サイトに写す.sh）。
   正は、開発サイト（fiz-dev.local）のサービス4ページで実際に使っている値
   （service-dads.css で DADS に合わせて直した後の値）。React 側（styles.css）
   にしか無かった変数名（--color-primary など）は同じ名前のまま残している。
   基準: /Users/nishidafiz/FIZ_AII_pj/出力のデザインの決まり.md（DADS）

   ---- 赤の使い方の決まり（2026-09-24 本人見直し。全ページ共通） ----
   1. 文字には赤を使わない：見出し・カードの見出し・説明文・本文・項目名など、読ませる文字は #212121 か #595959
   2. 小さな目印には赤（#C10000）を使う：アイコン、タグ・バッジ、見出しの上の英字ラベル、
      番号（課題・理由・流れの丸番号、FAQのQ）、矢印、沿革のマーカー、料金カードの英字ラベル、実績カードのタグなど。
      タグ・バッジは赤地に白字でよい（白字が4.5:1を満たすこと）
   3. 大きな面の赤は絞る：ヘッダーの帯・フッターの帯・ドロワー・ボタンだけ。
      ページの途中の赤い帯や色つきの背景は使わない
   4. 「いまどこにいるか」の赤（目次の現在地・ページ送りの現在ページ・お問い合わせのステップ）は残す
   5. 押して絞り込む・切り替えるボタン（実績一覧のタグの絞り込みなど）は目印ではなく操作の部品なので、赤にしない。
      枠と文字は #212121、選ばれているものは #212121 地に白字（2026-09-24 本人決定）
   ============================================================ */

:root {
  /* ---- 色 ---- */
  --color-primary: #C10000;    /* ブランドレッド。文字には使わない。目印（アイコン・タグ・番号・矢印など）・ボタン・帯（ヘッダー/フッター/ドロワー）だけに使う */
  --color-text: #212121;       /* 本文・見出し・ダーク背景の文字色 */
  --color-white: #FFFFFF;      /* 基本背景・反転テキスト */
  --color-gray: #A1A1A1;       /* 文字には使わない。罫線・飾り専用（白背景で4.5:1に届かないため） */
  --color-gray-light: #EFEFEF; /* 薄背景・区切りセクション */
  --color-border: #CCCCCC;     /* 罫線・ボーダー */
  --color-dark-sub: #3A3838;   /* ボタンのグラデーション・図の濃い面などの補助色 */
  --color-muted: #595959;      /* 白背景で4.5:1以上のコントラストを満たす補助文字色（パンくず・FAQの答えなど） */
  --color-bg-soft: #FAFAFA;    /* 「選ばれる理由」などの薄い背景 */
  --color-bg-pink: #F5E7E7;    /* （2026-09-24以降は未使用。薄いピンクの背景は --color-bg-neutral に置き換えた） */
  --color-bg-neutral: #F2F2F2; /* DADSの薄い背景。提供価値のセクション・CTA帯など、赤をやめた面の背景に使う */

  /* ---- フォント ---- */
  --font-en: "Josefin Sans", sans-serif; /* 英語見出し・eyebrow・数字 */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* 日本語全般 */

  /* ---- 文字の大きさの段階（DADS: 本文16px以上・補助文字も最小14px） ---- */
  --font-size-min: 14px;   /* 本文・補助文字の最小。これより小さくしない（ラベル・パンくず・チップ・タグなど） */
  --font-size-body: 16px;  /* 読ませる文（段落・カードの説明・FAQの答え・流れの説明など）の基準 */

  /* ---- 太さ（DADS: 400と700の2段階だけ。500・600・900は使わない） ---- */
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* ---- 行間 ---- */
  --line-height-body: 1.8;    /* 本文（.svc の基準値） */
  --line-height-heading: 1.4; /* 見出し（h2など） */

  /* ---- 余白の段階（8の倍数） ---- */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---- 角丸 ---- */
  --radius-pill: 100vh;  /* ボタン・タグ（FIZ の標準はピル型） */
  --radius-card: 10px;   /* カード・画像・実績カード */
  --radius-sm: 5px;      /* 小さめの箱（バッジなど） */

  /* ---- 最大幅 ---- */
  --max-width-content: 1200px; /* .svc-wrap（コンテンツ全体の中央寄せ幅） */

  /* ---- 動きの速さ ---- */
  --ease: cubic-bezier(0.4, 0.4, 0, 1);
  --duration: 0.3s;

  /* ---- 余白の使い方（2026-09-24 本人決定） ----
     ページの中の余白は、置き場所の役割ごとに下の変数を使う。値はスマホを既定にし、
     PC（1024px以上）は @media (min-width: 1024px) の :root で上書きする。
     ヘッダーは position: fixed で浮いている（common.scss:221、top 30px）。
     高さは SP 60px・PC 70px のため、下端は画面上端から SP 90px・PC 100px になる。
     「ヘッダーの下端から」の余白は、見た目の距離であって padding-top の値そのものではない。
     ヘッダーを避ける上余白は calc(ヘッダーの下端 + 下の変数) で組む
     （例: padding-top: calc(var(--header-bottom-sp) + var(--space-after-header))）。 */
  --header-bottom-sp: 90px;  /* 固定ヘッダーの下端（画面上端から。SP） */
  --header-bottom-pc: 100px; /* 固定ヘッダーの下端（画面上端から。PC） */

  --space-after-header: 24px;               /* ヘッダー下端 → パンくず上端 */
  --space-after-header-no-breadcrumb: 48px; /* パンくずが無いページ: ヘッダー下端 → 題名上端 */
  --space-breadcrumb-to-title: 24px;        /* パンくず下端 → ページの題名のまとまり上端 */
  --space-band-to-breadcrumb: 16px;         /* 写真の帯に題名が乗るページ: 帯下端 → パンくず上端（2026-09-29）。パンくず下端 → 最初の中身は --space-title-to-content */
  --space-title-to-content: 40px;           /* 題名のまとまり下端 → 最初の中身上端 */
  --space-section-y: var(--space-40);       /* セクションの上下の余白（それぞれ） */
  --space-section-heading: var(--space-16); /* セクションの見出し → その中身 */
}

/* ---- ブレークポイント ----
   CSS変数はメディアクエリの条件には使えないため、数値をそのまま書く決まりにする。
   タブレット: @media (min-width: 768px)
   PC        : @media (min-width: 1024px)
*/

@media (min-width: 1024px) {
  :root {
    --space-after-header: 32px;
    --space-after-header-no-breadcrumb: 72px;
    --space-breadcrumb-to-title: 40px;
    --space-band-to-breadcrumb: 24px;
    --space-title-to-content: 64px;
    --space-section-y: var(--space-64);
    --space-section-heading: var(--space-24);
  }
}