body の font-family は "Hiragino Kaku Gothic ProN" だが、
それが効いているのは可視 309 要素のうち 11 要素だけ。実体は
YakuHanJP, "Noto Sans JP", sans-serif（176 要素）と
"Noto Sans JP", sans-serif（102 要素）。
computedStyles.body を根拠に書体を決めないこと。
| 用途 | font-family | 実測 |
|---|---|---|
| 見出し・リード・CTA（約物が出る文） | YakuHanJP, "Noto Sans JP", sans-serif | 176 要素 |
| ナビ・メガメニュー・リスト（短い語） | "Noto Sans JP", sans-serif | 102 要素 |
| 欧文ラベル | Outfit, sans-serif | 20 要素 |
| フッターの注記のみ | "Hiragino Kaku Gothic ProN" | 11 要素 |
★スタックを 2 系統に分けているのが設計。全域に YakuHanJP を当てていない。 約物が出てこない短い語（ナビ項目）には素の Noto Sans JP を使う。
#0078be が面 71 要素・文字 31 要素。本文は墨 #333333（225 要素）。
サービスブランド名だけ #0e3e6a（19 要素）に分けている。2 つの青を混ぜないこと。
YakuHanJP は「、。「」（）・：；」などの約物だけを収録したサブセットフォント。
先頭に置くと約物のアキだけが詰まり、かな漢字は次の "Noto Sans JP" が描く。
palt を使わずに約物を詰める手段。
YakuHanJP, "Noto Sans JP", sans-serif（176 要素）"Noto Sans JP", sans-serif（102 要素・約物は全角のまま）
★実サイトは font-feature-settings: "palt" を 860 要素に継承させ、YakuHanJP と併用している。
約物を詰める処理が二重に入っている状態。新規実装ではどちらか一方に寄せること——
YakuHanJP を使うなら palt は書かない、palt だけで済ませるなら YakuHanJP を読み込まない。
このプレビューは YakuHanJP 側に寄せている。
★YakuHanJP は 9 ウェイト宣言されているが loaded は 400 だけ。
400 以外を当てると約物だけ Noto Sans JP に落ちて全角に戻る。
★下層（/kodate/）では font-feature-settings が 0 要素。同じサイト内で palt の有無が分かれている。
html も body も font-size: 10px。
行間は 1.46（92 要素）と 1.40（84 要素）に集中していて、
日本語サイトの標準（1.7〜2.0）より詰まっている。広げてよいのは緊急告知（1.80）だけ。
可視 309 要素のうち 400 が 301 要素。600 はメガメニューの開閉ボタン 7 要素、
700 は緊急のお見舞い告知 1 要素だけ。
Noto Sans JP と Outfit は可変フォント（100〜900）で読み込んでいるのに、
太さで階層を作っていない。
★font-weight を 400 以外にすると YakuHanJP が外れる（loaded は 400 のみ）。
上の 600 / 700 のサンプルでは鉤括弧と読点が全角に戻っているはず。見出しを太くしてはいけない実務上の理由がこれ。
0.96px（79 要素）・0.36px（61 要素）・0.88px（18 要素）は継承値。
サイズが違うのに px が同じ＝上位要素に書いた em が px として降りている。
一方見出しは 0.1em / 0.08em を各要素に当てているので、サイズに比例して px が変わる。
0.1em を各要素に（30px→3px、15px→1.5px）
★継承値を em に読み替えないこと。
本文・ナビは上位要素に書いて px で降ろし、見出しにだけ em を当てる——
この使い分けそのものが設計。
writing-mode: vertical-rl は 5 要素。すべて Outfit の欧文ラベルで、
色は #c7c7c7 の淡いグレー。背景の装飾として置かれている。
下層（/kodate/）には縦組みが無い。
★15px / 400 / line-height: 19px（1.27）/ letter-spacing: 1.2px（0.08em）。
欧文を縦組みにすると字が横倒しになる。ここでは意図的にそうしている。
読ませる文字には使わないこと。外部ウィジェット由来ではない自前クラス（section-projects__copy）。
青は枠線と文字に使う。ベタ塗りにするのはメガメニューの開閉ボタンだけ。
border-radius は 4px（150 要素）が既定。
★:hover は @media (hover: hover) の中だけに書く。
実サイトは (hover: hover) と (hover: none) を両方宣言して、
タッチデバイスにはホバーの代わりの表現を当てている。
box-shadow: rgba(0,0,0,0.12) 0 0 10px 0 が実測 15 要素。
これ以外の影は無い。下に落とさず、全方向に均等にぼかす。
多彩な動画やこだわりが詰まった建築実例、注目のトピックスをご紹介します。
賃貸住宅・賃貸併用住宅・店舗・各種施設まで、土地の可能性を広げます。
戸建て・マンションのリフォームから事業用リノベーションまで。
★本文の行間は 1.40。1.80 に広げているのは緊急告知の 8 要素だけ。
日付は Noto Sans JP 12px・#666666。
| 項目 | 値 |
|---|---|
| コンテナ | 1200px（トップ 21 箇所・下層 1 箇所）。ほぼ唯一の幅 |
| 全幅帯 | calc(100% - 120px)（左右 60px ずつ余白） |
| root font-size | 10px（1.5rem = 15px） |
| 本文の行間 | 1.40（84 要素）／ ナビ・カード 1.46（92 要素）／ 緊急告知だけ 1.80 |
| 字間 | 継承 0.96px（YakuHanJP 系）/ 0.36px（Noto Sans JP 系）／ 見出しは 0.1em・0.08em |
gap | 4 / 14 / 15 / 30 / 32 / 50 / 58 / 80px（最頻値 50px・7 箇所） |
| 主ブレークポイント | screen and (max-width: 480px) 447 件 / min-width: 481px 47 件 |
| 縦向きタブレット | (min-width: 481px) and (max-width: 768px) and (max-aspect-ratio: 1/1) 3 件 |
| ホバーの扱い | (hover: hover) 19 件 / (hover: none) 19 件（両方書く） |
border-radius | 4px（150 要素・既定）／ 50%（116 要素・アイコン）／ 8px（6 要素） |
box-shadow | 1 種類 rgba(0,0,0,0.12) 0 0 10px 0（15 要素） |
| CSS Custom Properties | 自社トークン 1 個（他 1 個は Swiper 由来） |
★480px を境に二分している。中間のタブレット幅に専用レイアウトを持たず、
max-aspect-ratio: 1/1（画面が縦長かどうか）で縦向きタブレットだけを拾うのが特徴。
| トップ（コーポレート） | /kodate/（注文住宅） | |
|---|---|---|
| 和文スタック | YakuHanJP, "Noto Sans JP", sans-serif | "Noto Sans JP", sans-serif 単独 |
| 欧文 | Outfit（可変） | Oswald / Nobel-Book |
| font-weight | 400 / 600 / 700 | 300 / 400 / 500 / 700 / 900 |
| font-feature-settings | palt 860 要素 | 0 要素 |
| 字間 | 継承の px ＋ 見出しの em | normal が 174 要素 |
| body の font-size | 10px | 11px |
| 縦組み | 5 要素 | 0 |
★この DESIGN.md はコーポレート（トップ）側を採用している。
/kodate/ は font-weight: 300 の細い見出し（45px / 58px）と
Nobel-Book の大きな欧文（78px）という別の顔を持つ。
混ぜると字間（px 継承 vs normal）と太さ（400 一本 vs 300〜900）が衝突する。