/* このファイルは src/styles/ から生成しています。直接編集しないでください。 */ /* ===================================================== VERID デザイントークン — 配色・寸法の正本 ===================================================== このファイルが色と寸法の唯一の定義元です。 ページ側・コンポーネント側は必ず var() 経由で参照し、 色の値（#xxxxxx）を直接書かないでください。 守るべき規則: 1. 色の追加は、ここに意味のある名前で定義してから使う （例: --state-alert。#dc2626 のような値をページに書かない） 2. 状態を示す色（ok / wait / alert / neutral）は意味に結びついている。 装飾のために状態色を使わない 3. テナント（士業事務所）ごとの差し替えは --primary / --accent の 2つだけを上書きする。他は追従して変わる 4. レスポンシブの段は下部の @media にまとめる。 個々のページで独自のブレークポイントを作らない ===================================================== */ :root { /* ===== 基調 ===== 操作・現在地は青。見出しは濃紺。金は「印」としてだけ使う。 */ --primary: #1a7fb5; --primary-dark: #14648f; --primary-edge: #b9dcee; /* 淡い縁 */ --primary-soft: #eaf5fb; /* 淡い面 */ --accent: #7a5f30; /* 金。証明・封緘の印 */ --accent-soft: #f6efdd; /* ===== 面 ===== */ --bg: #eef6fa; /* 画面の地 */ --bg-sunken: #f4f7f9; /* 一段沈んだ面 */ --surface: #ffffff; /* カード */ --surface-alt: #f9fbfc; /* 縞・見出し行 */ --overlay: rgba(18, 57, 92, .45); /* ===== 罫線 ===== */ --line: #e3eaef; --line-strong: #c8d4dd; /* ===== 文字 ===== 真っ黒は使わない。白地でのコントラスト比 4.5:1 を下限にする。 */ --heading: #12395c; /* 見出し */ --text: #1f2a35; /* 本文 */ --text-secondary: #4a5763; /* 補足 */ --text-muted: #6d7a86; /* 注記（4.5:1 の下限） */ --text-faint: #8b98a5; /* 罫線に近い添え字。本文には使わない */ --text-inverse: #ffffff; /* 濃い面（フッター・バナー・帯）の上に置く文字。 白地用の --text-secondary / --text-muted をそのまま乗せると読めない。 濃い面の上ではこの3つだけを使う。 */ --text-on-dark: #dbe7ef; --text-on-dark-muted: #a9bdcb; --accent-on-dark: #d9c18a; /* 濃い面の上の金 */ --line-on-dark: rgba(255, 255, 255, .14); /* ===== 状態 ===== 意味と結びついた色。装飾に流用しない。 */ --state-ok: #1f6b4c; --state-ok-bg: #e7f4ee; --state-wait: #7a5a25; --state-wait-bg: #fbf0dd; --state-alert: #8a2222; --state-alert-bg: #fbeaea; --state-neutral: #4a5763; --state-neutral-bg: #eef1f4; /* ===== 足元 ===== */ --footer-bg: #173a52; --footer-text: #dbe7ef; /* ===== 余白 ===== 8px を単位にする。ページ独自の余白値を作らない。 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px; /* ===== 文字寸法 ===== 本文 16px を下限にする（日本語の可読性と、iOS の自動拡大回避）。 */ --fs-caption: 13px; --fs-small: 14px; --fs-body: 16px; --fs-lead: 17px; --fs-title-s: 18px; --fs-title: 22px; --fs-page: 32px; --lh-tight: 1.45; --lh-body: 1.75; --lh-loose: 2; /* ===== 角丸 ===== */ --radius-sm: 6px; --radius: 10px; /* 操作・入力 */ --radius-card: 18px; /* カード */ /* ===== 影 ===== 重要さの段を作るためにある。3段だけ使い、間の値を作らない。 */ --shadow-flat: none; --shadow-card: 0 1px 2px rgba(18,57,92,.04), 0 10px 24px rgba(18,57,92,.05); --shadow-hero: 0 2px 6px rgba(18,57,92,.07), 0 24px 56px rgba(18,57,92,.13); --shadow-lift: 0 2px 4px rgba(18,57,92,.05), 0 16px 40px rgba(18,57,92,.10); --shadow-act: 0 2px 6px rgba(26,127,181,.28); /* ===== 版面 ===== */ --layout-max-width: 1120px; --layout-narrow-width: 760px; --layout-side-padding: 24px; --measure: 68ch; /* 本文の最大行長 */ --touch-target: 40px; /* 押せるものの最小寸法 */ --nav-height: 64px; /* ===== 重なり ===== */ --z-sticky: 200; --z-overlay: 400; --z-toast: 500; /* ===== 書体 ===== */ --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI', sans-serif; --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ===================================================== 旧トークンの読み替え （既存ページが参照している名前を、新しい配色へつなぐ） 新規のコードでこれらの名前を使わないでください。 ここは既存ページを一斉に追従させるためだけの層で、 置き換えが完了したら削除します。 ===================================================== */ :root { --navy-900: var(--footer-bg); --navy-800: var(--heading); --navy-700: var(--heading); --navy-600: var(--primary-dark); --gold: var(--accent); --gold-600: var(--accent); --gold-050: var(--accent-soft); --ink: var(--text); --ink-2: var(--text-secondary); --ink-3: var(--text-muted); --ok: var(--state-ok); --danger: var(--state-alert); --font-gothic: var(--font-sans); --font-mincho: var(--font-serif); --radius-lg: var(--radius-card); --shadow-sm: var(--shadow-card); --shadow: var(--shadow-card); --color-primary: var(--primary); --color-primary-light: var(--primary); --color-primary-dark: var(--primary-dark); --color-primary-bg: var(--primary-soft); --color-primary-border: var(--primary-edge); --color-secondary: var(--heading); --color-secondary-light: var(--primary); --color-secondary-bg: var(--bg-sunken); --color-gold: var(--accent); --color-gold-light: var(--accent); --color-gold-bg: var(--accent-soft); --color-danger: var(--state-alert); --color-danger-light: var(--state-alert); --color-danger-bg: var(--state-alert-bg); --color-warning: var(--state-wait); --color-warning-light: var(--state-wait); --color-warning-bg: var(--state-wait-bg); --color-info: var(--primary); --color-info-light: var(--primary); --color-info-bg: var(--primary-soft); --color-text-primary: var(--text); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-faint: var(--text-faint); --color-border: var(--line); --color-border-light: var(--line); --color-surface: var(--bg-sunken); --color-bg: var(--surface); --color-dark-surface: var(--heading); --color-dark-bg: var(--footer-bg); } /* ===================================================== レスポンシブ 段は3つだけ。ページごとに別のブレークポイントを作らないこと。 携帯 〜640px 1段組。余白と見出しを一段小さく、押せるものを大きく タブレット 641〜1024px 版面を画面幅に合わせる。段組は2列まで PC 1025px〜 既定値（上の :root） 変えるのは「余白・文字寸法・版面幅・角丸」だけで、 色は変えません（同じ画面が別物に見えないようにするため）。 ===================================================== */ /* ---- タブレット ---- */ @media (max-width: 1024px) { :root { --layout-max-width: 100%; --layout-side-padding: 20px; --fs-page: 28px; --fs-title: 20px; --sp-7: 72px; --sp-6: 48px; } } /* ---- 携帯 ---- */ @media (max-width: 640px) { :root { --layout-side-padding: 16px; --fs-page: 24px; --fs-title: 18px; --fs-title-s: 17px; --fs-lead: 16px; /* 本文は 16px のまま下げない（可読性と、入力欄での自動拡大回避） */ --sp-7: 56px; --sp-6: 40px; --sp-5: 28px; --radius-card: 12px; --touch-target: 44px; /* 指で押すため、PCより大きくする */ --nav-height: 56px; } } /* ---- 動きを望まない利用者 ---- */ @media (prefers-reduced-motion: reduce) { :root { --shadow-lift: var(--shadow-card); } }