ブランド色は #d6182c。バッジ専用の #d62828 と、商品一覧側にだけ出る緑 #1b9974（162 要素）がある。緑をトップページに持ち込まない。
Google Fonts の指定は family=Lato&family=Zen+Kaku+Gothic+New:wght@700。和文 Web フォントは「見出しの 8 要素」だけで、本文 686 要素は OS ローカル。下層ページには @font-face が 1 件も無い。
サイズに比例して px が変わる（36px→3.6px、28px→2.8px がどちらも 0.1em）。body に 1 回書いて継承させる設計ではない。和文と欧文で値も違う。
Zen Kaku Gothic New は 700 の 1 本しか読み込んでいない。実サイトは「楽しく、もっと健康に」に font-weight: 400 を当てているが、ファミリーに 700 しか存在しないので 700 で描画される。
実サイトの問題点: 下層のコピーライト行は font-family: Lato 単独で、フォールバックが 1 つも無い。@font-face が無い下層ではブラウザ既定書体で出る。新規実装では Lato, sans-serif と書く。
CTA は border-radius: 42px の赤ベタと白地赤枠のペアだけ。枠は両方とも 2px solid #d6182c。第3の形は存在しない。
バッジの角丸は 10px 0。左上と右下だけを丸め、カードの角に合わせて 0 0 0 10px / 0 0 10px の変種を使い分ける。
カードは角丸 10px ＋ 0 1px 3px rgba(145,145,145,0.6)（実測 62 要素）。影の色は黒ではなくグレー 60%。スペック表のラベル列は #e8e7e2 / 14px / weight 700（実測 180 要素）。
| 品番 | 19307 |
|---|---|
| 内容量 | 9.3g |
| 希望小売価格 | 198円 |
| 品番 | 19308 |
|---|---|
| 内容量 | 5.1g |
| 希望小売価格 | 198円 |
絞り込みボタンの 2px solid #e8e7e2 / 角丸 4px を入力欄にも展開した参考実装。フォーカスリングはブランド赤。
影の色を黒に丸めない。rgba(145,145,145,0.6) と rgba(128,128,123,0.1) を使い分けている。
gap の実測は 30px が最多。他に 0 30px / 20px / 12px / 2% / 5.7%。2カラムの比率は 55.5% : 42.5%。
html は 6 幅すべてで 10px 固定。動くのは body だけで、869px と 868px の 1px 差で 16px → 14px に落ちる（実測で確定）。行間比は 1.8 のまま変わらない。
メディアクエリの実測本数は max-width: 868px が 344 ルールで突出。他に 1109px（23）/ 760px（10）/ 478px（35）/ (any-hover: hover)（9）。