html { font-size: 62.5%; background: var(--color-type1) }。
ページの地は #e8e4d9 で、body は rgba(0,0,0,0) のまま。
:root の色変数は 17 個すべて自社トークンだが、命名が役割ではなく通し番号で、
実際に面として観測できたのは 6 個 ＋ 変数に無いベタ書きの #655c5d だけだった。
変数にあるからといって使わない。17 個のうち --color-type3 / --color-type8 / --color-type10 /
--color-type11 / --color-type12 / --color-type15〜17 は、トップと企業情報の全 DOM 走査で面としても文字としても出てこなかった。
body に line-height: 1.75em / letter-spacing: .05em /
font-feature-settings: "palt" / word-break: auto-phrase をまとめて書いている。
line-height は em なので 28px という絶対値が子へ降り、
letter-spacing は em のまま比率で効くという、ややこしい組み合わせになる。
palt は可視 583 要素に効いている。
フォールバックの誤りを写さない。実サイトは --font-type1: "hiragino-mincho-pron", sans-serif（明朝なのに sans-serif）、
--font-type2: "toppan-bunkyu-gothic-pr6n", serif（ゴシックなのに serif）と書いている。
Adobe Fonts が落ちると本文が明朝に、見出しがゴシックに化ける。正しくは逆。
font-weight: 700 は 2 ページの実測で 1 要素も出ない。
@font-face も normal と 600 の 2 本しか無いので、700 を当てると合成太字になる。
body { word-break: auto-phrase } を書いている。日本語の文節単位で改行位置を決める値で、
<br> や <wbr> を手で入れずに「ほんとうにいい／ものを」のような不自然な折り返しを避けられる。
未対応ブラウザでは normal にフォールバックするだけなので、書いておいて損が無い。
行頭記号は円ではなく 8px の横線。角丸を持たないこのサイトでは、点よりも線が馴染む。
押せるものはほぼ下線リンク。しかも下線は border-bottom ではなく
background-image: linear-gradient(90deg, …) で引いてある（ホバーで左右に伸ばすため）。
面色のボタンは検索ボタン 1 つだけで、これがサイト内で唯一の角丸（0 3px 3px 0）になっている。
box-shadow: inset 1px 1px 0 0 #fff, inset -1px -1px 0 0 #fff が実測 28 要素。
生成りの地 #e8e4d9 の上で、面を浮かせるのではなく彫る。
border-radius は 0。
数字も本文と同じ凸版文久ゴシックで組む。80px / line-height: 1.94。欧文専用書体に切り替えない。
#403d3c に差し替えるだけ。影は足さない
実測の box-shadow は 1 種類だけで、それが inset。
一般的なドロップシャドウを足さない——生成りの地の上では汚れて見える。
.guide::before { width: calc(100% - 80px); max-width: 1200px }）
| Viewport | html | body font-size | line-height | letter-spacing |
|---|---|---|---|---|
| 1440px | 10px | 16px（1.6rem） | 28px | 0.8px |
| 1200px | 10px | 16px（1.6rem） | 28px | 0.8px |
| 834px | 10px | 16px（1.6rem） | 28px | 0.8px |
| 375px | 10px | 14px（3.7333vw） | 24.5px | 0.7px |
モバイルだけ body { font-size: 3.7333333333vw } の流体。
1.75em / .05em の宣言がそのまま比率を保って縮むので、
letter-spacing を 0.8px に読み替えるとモバイルで字間だけ崩れる。
ブレークポイントは 768 / 769px が主軸で、1024 / 1200 / 1280 / 1600px に細かい調整が入る。