@charset "utf-8"; /*------------------------------------------------------------ _tokens.css — デザイントークン ------------------------------------------------------------ 生成元: Figma Variables fileKey = VpTt5ASzizmgbPfdpeZdrW Collections = Colors(29) / Typography(23) / Border Radius(6) / Spacing(11) / Layout(8) 全77変数のうち 76 を出力（font/display は Figma表示専用のため除外） 生成日: 2026-08-12 ★このファイルを直接編集しないこと。 値の変更は Figma Variables 側で行い、再生成する（AI_design_kasamart/docs/tokens-spec.md）。 Mode 切替: :root → 現行（本番と同じ値） :root[data-tokens="expanded"] → 拡張後（012-7 の改修案） → を付けると拡張後の値に切り替わる 注意: html { font-size: 62.5% } が前提（1rem = 10px）。common2020.css:23 で指定済み。 ------------------------------------------------------------*/ :root { /* ---------- Layout（Mode差あり） ---------- */ --container-base: 1080px; --container-narrow: 1060px; --gutter-sp: 20px; --body-min: 1400px; --body-min-sp: 375px; /* ---------- Typography: font-size（Mode差あり） ---------- */ --fs-2xs: 1.1rem; /* 11px */ --fs-xs: 1.2rem; /* 12px */ --fs-sm: 1.4rem; /* 14px — body既定 */ --fs-base: 1.6rem; /* 16px */ --fs-md: 1.8rem; /* 18px */ --fs-lg: 2.1rem; /* 21px */ --fs-xl: 2.4rem; /* 24px */ --fs-2xl: 2.8rem; /* 28px */ --fs-3xl: 3.1rem; /* 31px */ --fs-4xl: 4.8rem; /* 48px */ /* 段階トークンに無い端数サイズ用の倍率。 calc(2.6rem * var(--fs-scale)) の形で使う。 これが無いと、拡大時に 2.4rem(→28px) が 2.6rem(→26px のまま) を追い越して 大小が逆転する。 */ --fs-scale: 1; /* ---------- Typography: その他（Mode差なし） ---------- */ /* Figma変数 font/base の値。Figma表示は font/display（Noto Sans JP）で 代替しているが、実装で正なのはこちら。 */ --font-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", "游ゴシック", Yu Gothic Medium, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, system-ui, sans-serif; --lh-tight: 1; --lh-snug: 1.4; --lh-normal: 1.5; --lh-relaxed: 1.6; --lh-loose: 1.7; /* 実測: 700が403件(60%) / 400が260件(39%)。500は1件で予備 */ --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* Figma は PERCENT 単位（em と等価）。実測: 0が414件(62%) / 0.05emが214件(32%) */ --ls-default: 0.05em; --ls-none: 0; /* ---------- Spacing（5px刻み / Mode差なし） ---------- */ --space-3xs: 5px; --space-2xs: 10px; --space-xs: 15px; --space-sm: 20px; --space-md: 25px; --space-lg: 30px; --space-xl: 40px; --space-2xl: 50px; --space-3xl: 60px; --space-4xl: 80px; --space-5xl: 100px; /* ---------- Border Radius（Mode差なし） ---------- */ --radius-sm: 5px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 20px; --radius-2xl: 30px; --radius-pill: 40px; --radius-circle: 50%; /* Figma未変数化（%はFLOAT変数で表現できないため） */ /* ---------- Color: Primary / Accent ---------- */ --color-primary: #004b9e; --color-primary-dark: #003f8d; --color-primary-light: #0068b7; /* 実装での使用実績なし */ --color-primary-muted: #376da8; --color-primary-pale: #d9e1f7; --color-accent-pink: #e4007f; --color-accent-pink-light: #ffc6c6; --color-accent-yellow: #f6ab00; --color-accent-yellow-light: #ffcc4d; /* 実装での使用実績なし */ /* ---------- Color: Status ---------- */ --color-error: #ff0000; --color-error-dark: #bf0000; --color-success: #5c913b; /* 実装での使用実績なし */ --color-success-light: #77b255; /* 実装での使用実績なし */ /* ---------- Color: Text ---------- */ --color-text-black: #000000; --color-text-dark: #231815; /* 実装での使用実績なし */ --color-text-primary: #333333; --color-text-secondary: #5a5a5a; --color-text-tertiary: #727171; --color-text-muted: #808080; /* 実装での使用実績なし */ --color-text-disabled: #878787; /* ---------- Color: Background ---------- */ --color-bg-white: #ffffff; --color-bg-light: #f4f4f4; --color-bg-gray: #eaeaea; --color-bg-gray-dark: #e2e2e2; /* ---------- Color: Border ---------- */ --color-border-default: #c0c0c0; --color-border-light: #dcdcdc; --color-border-medium: #a1a1a1; --color-border-dark: #707070; --color-border-input: #cccccc; } /*------------------------------------------------------------ Mode: 拡張後（012-7 の改修案） で切り替わる。差分は Layout と font-size のみ。 ------------------------------------------------------------*/ :root[data-tokens="expanded"] { --container-base: 1200px; --container-narrow: 1180px; --fs-2xs: 1.2rem; /* 11 → 12px */ --fs-xs: 1.4rem; /* 12 → 14px */ --fs-sm: 1.6rem; /* 14 → 16px */ --fs-base: 1.8rem; /* 16 → 18px */ --fs-md: 2rem; /* 18 → 20px */ --fs-lg: 2.4rem; /* 21 → 24px */ --fs-xl: 2.8rem; /* 24 → 28px */ --fs-2xl: 3.2rem; /* 28 → 32px */ --fs-3xl: 3.6rem; /* 31 → 36px */ --fs-4xl: 5.4rem; /* 48 → 54px */ --fs-scale: 1.15; /* 端数サイズ用（段階トークンの拡大率とほぼ同じ） */ } /*------------------------------------------------------------ ブレークポイント（参照用・@media では使用不可） --bp-sp: 812px @media screen and (max-width: 812px) 実測160回 --bp-pc: 813px @media screen and (min-width: 813px) 実測53回 --bp-xs: 599px @media (max-width: 599px) 実測78回 CSSカスタムプロパティは @media の条件式で評価されないため、 実CSSの @media は px 直値のままとする（tokens-spec.md 2章）。 ------------------------------------------------------------*/