ブランド色は 3 つあり、行動の段階で使い分ける。ヘッダーの #e6842c は資料請求、
黄 #ecdb2b の 3 連ボタンはセミナー・相談会・ショールーム、水色 #76cfe3 はサービス種別のバッジ。
オレンジの上の文字は白ではなく黒（実測 rgb(0,0,0)）。
pageBackground.resolved をそのまま地色にしない。
heroCover.heroCovered: true（picture.mv__pic 1440×650）で、html / body はどちらも rgba(0,0,0,0)。
最大面積に出る rgba(0,0,0,.7) はハンバーガーメニューの暗幕で、静止状態では見えない。地色は #ffffff。
html { font-size: 24px } を実際に宣言している。1440 / 1200 / 834 / 375px の 4 条件で計測してすべて 24px 固定。
body の letter-spacing: 0.05em は 24px 基準なので計算値 1.2px になり、
11px の注記から 40px の見出しまでサイズが違うのに全部 1.2px（可視 247 要素中 131 要素）。
和文書体は Zen Kaku Gothic New の一本で、本文のウェイトは 500（154 要素）。
letter-spacing: 0.05em は body に 1 回だけ書いて継承させる。
子要素で書き直すと、そこだけサイズに比例して字間が変わり、継承した 1.2px と揃わなくなる。
実サイトで個別に当てているのは 8 箇所（0.75px / 2.25px / 1.4px / 2px / 3px など）だけ。
font-feature-settings は 0 要素。palt を足すとカタカナのサービス名が詰まって別物になる。
既定の行間は 1.4（135 要素）。読ませたい段落だけ 1.6（75 要素）、
さらに長い説明文で 2.0（9 要素）と、3 段階だけ持つ。
本文でも font-weight: 700 を使うのがこのサイトの流儀で、400 は 17 要素しか無い。
箇条書きの行頭記号は 9px の円。角丸が 8 種類あるこのサイトでは、丸が基本の形になる。
角丸を場所で使い分けるのがこのサイトの規則。申し込み動線の pill は 999px、本文中のボタンは 4px、
カードは 10px、チップは 16px。黒ボタンは 2px solid transparent の透明な枠を持ち、白地・黒枠のセカンダリと幅が揃う。
外部埋め込み由来の値を自社トークンに混ぜない。
HubSpot フォームの a.hs-button は border-radius: 720px、リンク色は #0270e0 で、
どちらもこのサイトのスケールに無い値。新規実装では 999px と #000000 に統一する。
カードの角丸は 10px、上端に貼り付くタブ型バッジだけ 0 0 10px 10px で下だけ丸める。
「お悩み」の吹き出しは 100px で、ほぼカプセルに近い形になる。
#000000 に差し替えるだけ。影は足さない
box-shadow は 2 ページの実測で 1 種類・1 要素だけ。
段差は #ffffff → #f2f2f2 → #f5f5f5 → #ddeaed の面色と、
4px → 10px → 16px → 999px の角丸で表す。
rgba(149,157,165,.2) 0 8px 24px は広く出回っている汎用値で、このサイトの署名的な影ではない。多用しない。
:root にある自社変数は --column-gap: 2.13% と --column-width-multiplier: 8.333（= 100/12）の
2 つだけ。色もフォントも変数化していない。gutter が px ではなく % なので、幅の変化はグリッドが吸収する。
| Viewport | html | body font-size | line-height | letter-spacing |
|---|---|---|---|---|
| 1440px | 24px | 24px | 33.6px | 1.2px |
| 1200px | 24px | 24px | 33.6px | 1.2px |
| 834px | 24px | 24px | 33.6px | 1.2px |
| 375px | 24px | 24px | 33.6px | 1.2px |
文字まわりはレスポンシブで一切変えない。4 条件すべてで html も body も同じ値だった。
切り替え点は @media (max-width: 767px) で、変わるのはレイアウトだけ。