色は すべて 9 段(-10 が最淡 → -90 が最濃)で定義されている。実装に出ているのはマゼンタ #df003a と ESG・事業部門の色だけで、--color-sub-red / -cream / -blue / -yellow の 4 系統(各 10 段・計 40 個)はクリームの -20 を除いて可視 0 要素。「サブカラーが 4 色ある」と読まないこと。
トップと下層で地色が違う。トップは #f8f6f1(クリーム)、下層は #f6f6f6(グレー)。どちらもトークン化されている。
可視 173 要素中 170 要素が letter-spacing: normal(下層は 55/55 = 全部)。CSS 全文でも宣言は 0.1em / 0.2em / 0.01em / 0.4em の 4 つしかなく、本文には 1 つも当たっていない。例外は部門名の 3 要素(24px に 0.1em = 2.4px)だけ。font-feature-settings も 0 要素で、Noto Sans JP の既定の字送りのまま組む。
html は 16px 固定だが body 自体が --text-md。4 幅で測ると 1440px → 16px / 1200px → 15.968px / 834px → 15.0896px / 375px → 14px と連続的に動く。px で書き写すとブレークポイント間で別物になる。
| Token | clamp 式 | 1440px | 1200px | 834px | 375px |
|---|---|---|---|---|---|
--text-2xs | 0.625rem, 0.568rem + 0.24vw, 0.75rem | 12 | 11.97 | 11.09 | 10 |
--text-xs | 0.75rem, 0.693rem + 0.24vw, 0.875rem | 14 | 13.97 | 13.09 | 12 |
--text-sm | 0.813rem, 0.756rem + 0.24vw, 0.938rem | 15.01 | 14.98 | 14.10 | 13.01 |
--text-md ★本文 | 0.875rem, 0.818rem + 0.24vw, 1rem | 16 | 15.97 | 15.09 | 14 |
--text-lg | 1rem, 0.943rem + 0.24vw, 1.125rem | 18 | 17.97 | 17.09 | 16 |
--text-xl | 1.063rem, 0.977rem + 0.36vw, 1.25rem | 20 | 19.95 | 18.63 | 17.01 |
--text-2xl | 1.125rem, 0.955rem + 0.73vw, 1.5rem | 24 | 24 | 21.37 | 18.02 |
--text-3xl ★見出し | 1.25rem, 0.966rem + 1.21vw, 1.875rem | 30 | 29.98 | 25.55 | 20 |
--text-4xl | 1.375rem, 0.977rem + 1.7vw, 2.25rem | 36 | 36 | 29.81 | 22.01 |
--text-5xl | 1.625rem, 1.17rem + 1.94vw, 2.625rem | 42 | 42 | 34.90 | 26 |
--line-height-xl: 2.2 は宣言のみで実装 0 要素。「このサイトは行間 2.2 を使う」と読まないこと。
本文の既定ウェイトは 500(Medium)。実測で可視 133 要素が 500、400 はフッターのリンク 6 要素だけ。Noto Sans JP の 400 / 500 / 700 を Google Fonts から読み込んでいるので 500 は合成ではなく実体。600 は存在しない(トークンにも無い)。--font-serif(游明朝のスタック)と koharu の @font-face は、どちらも可視 0 要素。宣言はあるが使われていない。
CTA は 白地 + 1px の枠 + border-radius: 40px、タブは 60px、カードは --r-l(10px)+ --shadow-l。タグだけ --r-s(3px)。--r-m(6px)は実測 0 要素。
数字(日付・業績)は --font-num(Roboto)で組む。和文と欧文と数字で書体を分ける 3 本立ての設計。
input / select はフォント継承が効かないので、font-family と font-weight: 500 を明示的に当て直す。枠は --color-input-border(#676767)、ホバーで #4d4d4d。
--shadow-s と --shadow-m は y オフセット 0 の全方向の影、--shadow-l だけ y に 4px 落ちる。カードを浮かせるのが --shadow-l、ボタンの縁取りが --shadow-s / --shadow-m という使い分け。
抽出でもう 1 つ検出される rgba(0,0,0,0.15) 0 0 2px, rgba(0,0,0,0.3) 0 2px 10px は Cookie 同意バー(trust360)のもので、サイト本体の語彙ではない。
--space-* が 34 段。値は常に「トークン番号 × 4px」(--space-6 = 24px)。別に --10px 〜 --60px という rem を px の名前で引くためのトークンも 22 段ある。
文字サイズはメディアクエリで上書きする必要がない。全段が clamp() の vw 連動なので、ブレークポイントをまたいで連続的に動く。行間は比率トークンなのでサイズに追従して自動で広がる。