実測日 2026-09-24。https://www.kyuhaku.jp/ と /visit/visit_top.html の computed style と
インライン <style> から起こした。自社トークンは --kx-* の 9 個だけ。
ページの地色は #e4e4e4 で、カードが白。
自社トークン --kx-primary: #1a63bc があるのに、カードの見出しは Tailwind の任意値クラス
text-[#0d6efd]（Bootstrap の既定青）で書かれている。
Bootstrap から Tailwind へ移行したときの残留物であって、設計意図ではない。
--kx-text-muted: #666666 は宣言されているが可視 0 要素。使われている色として扱わないこと。
--kx-ff-base と --kx-ff-heading の違いは 5 番目が "Segoe UI" か
"Noto Sans JP" かだけ。macOS ではどちらもヒラギノ角ゴ ProN が当たるが、
Windows では見出しだけ Web フォント、本文はローカルの BIZ UDPGothic になる。
実測ではテキストを持つ 521 要素のうちヒラギノ角ゴ ProN が 517、Noto Sans JP は 4。
| 位置 | 名前 | 当たる環境 |
|---|---|---|
| 1–2 | "Hiragino Kaku Gothic ProN" / "Hiragino Sans" | macOS・iOS |
| 3–4 | -apple-system / BlinkMacSystemFont | Apple 系の保険 |
| 5 | "Segoe UI"（本文）/ "Noto Sans JP"（見出し） | ここが分岐点 |
| 6 | "BIZ UDPGothic" | Windows 10 (1809) 以降に標準搭載の UD フォント |
| 7–8 | "Yu Gothic Medium" / "Yu Gothic" | Windows の保険（Medium が先） |
| 9 | Meiryo | 旧 Windows |
★Windows の游ゴシック問題を「BIZ UDPGothic を游ゴシックより前に置く」ことで解いている。
このリポジトリの収録例では 5 つ目の流儀（SmartHR の AdjustedYuGothic、白鶴酒造の MyYuGothicM、
カリモク家具の Yu Gothic 上書き、東京オペラシティ AG のスタック順に続く）。
UD フォントは字形が読みやすく、游ゴシックの細さ問題も同時に避けられる。公共施設らしい選択。
| 役割 | font-size | px 換算 | weight |
|---|---|---|---|
| h1 | clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem) | 26 → 40px | 700 |
| h2 | clamp(1.375rem, 1.15rem + 1.1vw, 2rem) | 22 → 32px | 700 |
| h3 | clamp(1.1875rem, 1.05rem + 0.7vw, 1.625rem) | 19 → 26px | 600 |
| h4 | clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem) | 17 → 21px | 600 |
| h5 | 1rem | 16px | 600 |
| h6 | 0.875rem | 14px | 600 |
| 本文 | clamp(1rem, 0.975rem + 0.15vw, 1.0625rem) | 16 → 17px | 400 |
★固定 px に置き換えないこと。メディアクエリでサイズを書き直す設計になっていない。
可視 113 要素のうち 600 が 61、700 が 26、400 が 17、500 が 6、900 が 3。 本番書体のヒラギノ角ゴ ProN は W3 と W6 の 2 本しか持たないので、 600 を指定すると W6 がそのまま当たり、合成が入らない。 700 と 900 は W6 に対する合成太字になる。
★base 層は h1〜h6 { font-weight: 700 } と書いてあるが、h3〜h6 の規則が 600 に上書きしている。
実装を読むときは base だけを見ないこと。小見出しに 700 を使わない。
| ページ | 400 | 500 | 600 | 700 | 900 |
|---|---|---|---|---|---|
| トップ | 17 | 6 | 61 | 26 | 3 |
| ご利用案内（下層） | 88 | — | 50 | 26 | 2 |
このサイトで最も特徴的な設計。Desktop 0.04em / 1.8 → Tablet 0.035em / 1.75 →
Mobile 0.03em / 1.7。狭い画面で 0.04em を保つと 1 行の文字数が落ちて読みづらくなるため。
開館時間は 9 時 30 分から 17 時 00 分まで（入館は 16 時 30 分まで）です。
開館時間は 9 時 30 分から 17 時 00 分まで（入館は 16 時 30 分まで）です。
開館時間は 9 時 30 分から 17 時 00 分まで（入館は 16 時 30 分まで）です。
base 層の h1〜h6 に font-feature-settings: "palt" 1 と letter-spacing: 0.02em を
セットで書いている。本文には掛けていない（トップで 136 要素、下層で 76 要素が継承で palt を持つ）。
| 実測値（下層） | 出現 | 出どころ |
|---|---|---|
0.68px | 109 | body の 0.04em が px に解決され、サイズ違いの子要素まで継承されている |
| 0.42px | 35 | 中間コンテナ（14px × 0.03em）からの継承 |
| 0.32px | 17 | 見出しの 0.02em（16px） |
| 0.52px | 4 | 見出しの 0.02em（26px） |
★同じ 0.68px が 109 要素・サイズはバラバラ = 継承。
em は body に 1 回だけ書いて、子で再宣言しない。見出しだけ 0.02em を明示する。
★3 連の大ボタンだけ font-weight: 900。ヒラギノに W9 相当は無いので合成太字になる。多用しない。
| Level | Shadow | 用途 | 実測 |
|---|---|---|---|
| 0 | none | 本文・帯 | 大半 |
| 1 | 0 2px 12px rgba(0,0,0,0.06) | カード（基準） | 12 |
| 2 | 0 4px 12px rgba(0,0,0,0.15) | 3 連の大ボタン | 3 |
| 3 | 0 2px 8px rgba(0,0,0,0.1) | 開館状況パネル | 1 |
| 項目 | 値 |
|---|---|
| コンテナ | 1320px（幅いっぱいのセクションが 17 箇所・中身だけ 1320px） |
| root font-size | 16px |
| スクロールオフセット | --kx-scroll-offset: 105px（固定ヘッダー分） |
| 見出しの下マージン | h1–h3 = 1.5rem / h4–h5 = 1rem（モバイルは h1/h2 が 1rem） |
| ブレークポイント | 576 / 768 / 992 / 1200 / 1400px（Tailwind）＋ max-width: 767.98px・991.98px（Bootstrap 由来の端数） |
| アクセシビリティ | prefers-reduced-motion: reduce に 3 件対応（カルーセルの自動送りを止める） |
★このサイトの CSS には「旧サイトの computed 値を実測して base 層に移植した」というコメントが残っている。
Bootstrap で組まれていたサイトを Tailwind に載せ替えるとき、@layer base に旧サイトの数値を流し込んで
見た目を保っている。#0d6efd や small { font-size: 0.875em } はその名残。