130年の信頼を未来へ
人やまち、地球に寄り添う人やまち、地球に寄り添うまちづくりを進めています。本文の字間は normal のままで、詰めは font-feature-settings: "palt" の 1 行だけで作っています。
Specification
| ルート | 5 段階の補間式。1440px→10px ／ 992px→8px（最小） ／ 991px→11.49px ／ 768px→10px ／ 767px→11.49px ／ 576px→10px ／ 575px→12.35px ／ 375px→10.00px |
|---|---|
| 本文 | 1.6rem（デスクトップ）／ 1.4rem（991.9px 以下）。1024px の本文 13.17px は 375px の 14.01px より小さい |
| 和文 | Noto Sans JP 400 / 500 / 700。既定は 500（Medium）。可視 500×123・400×71・700×56 |
| 欧文 | Josefin Sans 400（見出し）／ Montserrat 500（数字）。Roboto は宣言のみで 2 ページとも unloaded・可視 0 要素 |
| 900 を使わない | Google Fonts の URL が Noto+Sans+JP:wght@400;500;700 なので、900 を書いても 700 で出る |
| 行間 | 1.8（body・無単位）。実測比 1.20×58 / 1.30×49 / 1.00×54 / 1.10×22 |
| 字間 | normal が可視 177/193 要素。当てるのは事業見出し 0.21em と欧文見出し 0.05em だけ |
| OpenType | body { font-feature-settings: "palt" } の 1 行。実測 849 要素（トップ）／ 636 要素（下層） |
| 角丸 | 10px が既定（可視 33 要素）。バッジのみ 24px、丸アイコン 50% |
| 影 | box-shadow は 0 種。段差は面色（#fafafa / #f8f8f8 / #f2f2f2）で作る |
| CSS 変数 | 実サイトの :root は 0 件。色もサイズも実値で書かれている |
| 注記色 | ※必須 — #b3000b。注意書きのみ。CTA には使わない |
Color Palette