コンポーネント

各HTMLはインラインスタイルの見本です。色・書体・サイズ・余白の値はすべて foundations/tokens.css の変数（var(--…)）で書き、数値を直接書きません。

• 使うときは、ページで foundations/tokens.css を読み込みます。
• 直接書いてよいのは、値を持たない指定（0、100%、transparent）と、列の比率（1fr、1.3fr など）だけです。
• 新しい値が必要になったら、先に foundations/ に追加してから使います。

ファイル	用途
card.html	白＋枠のカード / グレーのカード
key-message.html	idea-50 の核メッセージ
badge.html	ピルバッジ・番号バッジ
table.html	段階・条件などの表
arrow-row.html	課題 → 取り組み の対比行
footer.html	社名とページ番号（親要素に position:relative が必要）

アプリ用（意味トークン・--fs-app-* で記述。data-theme="dark" で切替）

基本部品を組み合わせて、組み合わせの部品と画面（apps/screens/）を作ります。

• 組み合わせの部品は、使う基本部品の書き方をそのまま写します。基本部品を変えたら、写した先もそろえます（冒頭のコメントに使っている基本部品を書く）。
• 文言は「〇〇」「名称」などの中立の言葉にします。商材の言葉は examples/ の差分で入れます。
• 1行目のコメントを「基本部品：」「組み合わせ（…）：」で始めます（ドキュメントサイトの振り分けに使います）。

基本部品

ファイル	用途
button.html	ボタン（主・副・文字だけ）
segmented.html	切替ボタン群（P35 期間切替など）
delta.html	増減表示（▲▼＋符号＋色）
app-badge.html	バッジ（ラベル中立・強調、番号）
app-card.html	カードの枠
stat.html	大きな数字（KPI の値）
input.html	入力欄（ラベル＋入力＋補足）
select.html	選択欄（ラベル＋選択）

組み合わせ

ファイル	パターン	使う基本部品
kpi-card.html	P01	app-card、stat、delta
chart-card.html	P05・P08	app-card、segmented
ranking-row.html	P12	app-badge（番号）、delta
media-card.html	P14	app-card、delta
empty-state.html	P31	button（主）