# DESIGN.md — 根津美術館（Nezu Museum）

> 根津美術館（https://www.nezu-muse.or.jp/）のデザイン仕様書。
> 1941 年開館、東京・南青山。東武鉄道の社長を務めた実業家・初代根津嘉一郎の日本・東洋古美術コレクションを基礎とする私立美術館。国宝『燕子花図屏風』（尾形光琳）を所蔵する。2009 年に**隈研吾**設計の本館が竣工し、竹垣に沿う長いアプローチが館の顔になった。
> 最大の特徴は、**サイト全体が明朝体で組まれていること**。`body { font-family: "Noto Serif JP" }` が起点で、ゴシック（Noto Sans JP）は**日付・ナビ・表組みという「読ませない情報」だけ**に使われる。古美術館としての品位を、色ではなく書体の選択で作っている。
> ブランド色は **金茶 `#aa855a`** の 1 色だけ。チケット購入 CTA・現在言語・展示室ラベル・**フォーカスリング**がすべてこの色。
> 組版の要点は 2 つ。ひとつは **`body` が 13px 基準で、文字サイズを全部 % で積むレガシー手法**（`124%` = 16px、`404%` = 52px）。もうひとつは **可変フォントの重みを 100〜700 まで全域使う**こと（本文は `600`、大見出しは逆に `300` や `100` へ**細く**なる）。
> 実サイトの computed style 実測（2026-07-30 取得。トップ＋開催中の展覧会＋美術館について）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **明朝体・白地・金茶 1 色。影は 1 つも使わない。** ファーストビューは隈研吾の竹垣アプローチの写真で全面を占め、UI は写真の上に白文字を置くだけ。下層ページは白地に明朝の 1 カラム。**装飾を足さず、書体と余白だけで格を出す**
- **根津美術館について**: 私立美術館として**展覧会の会期と開館状況が最優先**。ファーストビューの下端に「日付パネル（黒地）＋本日の開館状況＋チケット購入（金茶）」の 3 連が固定され、休館中は「Attention」の半透明白パネルが写真に重なる。**庭園を持つ館なので「いまの庭園」という季節のコンテンツがトップに常設される**
- **密度**: 低密度。作品名・寸法・時代といった古美術のメタ情報は表組みに追い出し、本文は明朝で 1.7 の行間でゆったり流す
- **キーワード**: Noto Serif JP（明朝）全域、金茶 `#aa855a` 単色、影ゼロ、radius 3〜4px、13px 基準の % ラダー、可変フォント 100〜700
- **特徴**:
  - **明朝が既定、ゴシックが例外**。`body` は `"Noto Serif JP", serif`。`"Noto Sans JP", sans-serif` に切り替わるのは **① グローバルナビ ② 会期の日付（`2026年8月15日（土）～10月12日（月・祝）`）③ カレンダーの表組み ④ 開館情報のリスト** だけ。**「数字と操作はゴシック、言葉は明朝」**という切り分け
  - **文字サイズが全部パーセント**。`body { font: 13px/1.231 arial... }` というリセットが 13px を敷き、そこに `124%` / `139%` / `154%` / `170%` / `185%` / `216%` / `247%` / `262%` / `293%` / `372%` / `404%` を積む。**YUI Fonts 系の古典的な手法**で、`16px` と思っている本文は実際には `16.12px`（13 × 1.24）。実測値が `18.07px` `20.02px` `22.1px` `32.11px` `52.52px` のように端数だらけになるのはこれが理由
  - **可変フォントの重みを両方向に振る**。自己ホストの `NotoSerifJP-VariableFont_wght.woff2`（`font-weight: 200 900`）を使い、**本文の既定が `600`**。そこから小見出しは `700` へ太らせ、**大きな見出しは `300`、国宝名などの特大表示は `100` へ細らせる**。「大きい字ほど細く」という明朝組みの定石を可変フォントで実装している
  - **`box-shadow` がサイト全体で 1 つも使われていない**。奥行きは写真・半透明の白パネル・黒帯だけで作る
  - **角丸は 3px と 4px の 2 段**。チケット購入ボタンは `3px`、詳細リンクは `4px`。日付パネルに隣接するボタンだけ **片側だけ丸める**（`border-radius: 0 3px 3px 0`）
  - **フォーカスリングがブランド色**。`:focus-visible` で文字色・ボーダー・背景がすべて `#aa855a` に変わる（`outline` は使わない）
  - **カレンダーで曜日を色分けする**。土曜 `#003f8c`（紺）、日曜・祝日 `#a60000`（臙脂）。**和暦カレンダーの慣習的な配色**をそのまま Web に持ち込んでいる
  - CSS Custom Properties は **0 個**。すべて実値で書かれている

---

## 2. Color Palette & Roles

> 実測値。地は白 `#ffffff`、文字は `#333333`。**有彩色はブランドの金茶 1 色＋カレンダーの曜日色＋お知らせバッジの水色**に限られる。

### Brand（ブランド）

- **金茶 / Kincha** (`#aa855a`): **唯一のブランドカラー**。チケット購入 CTA の面、現在の言語（`JP`）、展示室ラベル（`展示室2`）、会期ステータス（`予告`）、**そしてフォーカスリング**。竹と土壁の中間のような、古美術館らしい落ち着いた茶
- **Ink** (`#333333`): 見出し・本文。**純黒は使わない**
- **Paper** (`#ffffff`): 地色（下層ページ）

> **注**: トップページのファーストビューは**全面が写真**なので、ページ背景色として観測されるのは写真上のスクリム（`rgba(0, 0, 0, 0.35)`）。**地色は下層ページの `#ffffff` が正**。

### Surface（面）

- **Background** (`#ffffff`): ページ地色
- **Nav Active** (`#fff8f1`): **現在のセクションを示すサイドナビの面**。金茶をごく薄めた生成り
- **Panel Light** (`#f7f7f7`): お知らせ・重要文化財ラベルの面
- **Panel** (`#f2f2f2`): 区切りブロックの面
- **Tag** (`#eeeeee`): 作品分類タグ（`漆工` `彫刻` `陶磁` `考古・鏡` `宝飾時計`）の面
- **Ink Panel** (`#333333`): **日付パネル・フッター・「終了」ステータス**の地。白文字を載せる
- **Scrim** (`rgba(0, 0, 0, 0.35)`): ファーストビュー写真の上に敷く覆い。ナビの白文字を読ませるため
- **Scrim Strong** (`rgba(0, 0, 0, 0.5)`): 言語切替周りの濃いスクリム
- **Attention Panel** (`rgba(255, 255, 255, 0.8)`): **休館告知の半透明白パネル**。写真を透かして見せる

### Neutral（文字・罫）

- **Text Primary** (`#333333`): 見出し・本文
- **Text Inverse** (`#ffffff`): 写真上のナビ・黒帯・フッターの文字
- **Text Muted** (`#aaaaaa`): **非選択の言語（`EN`）**
- **Border** (`#999999`): 一般の罫（`1px solid`）
- **Border Inverse** (`#ffffff`): 写真上・黒地上の罫（`1px solid`）
- **Calendar Closed** (`#dddddd`): **カレンダーの休館日セル**。トップページで最も出現回数が多い面色（21 回）

### Semantic（意味的な色）

| Role | Value | 用途 |
|------|-------|------|
| 開館日 | `#9bb8dc` | **カレンダーの開館日セル**（淡い藍） |
| 本日 | `#ffd46e` | **今日の日付マーカー**（`border-radius: 50%` の丸） |
| 休館日 | `#dddddd` | カレンダーの休館日セル |
| 土曜 | `#003f8c` | カレンダーの土曜の文字色（紺） |
| 日曜・祝日 | `#a60000` | カレンダーの日曜・祝日の文字色（臙脂） |
| お知らせ | 面 `#c2e3f7` / 文字 `#1e2d59` | ニュース種別バッジ（`お知らせ`） |
| 重要文化財 | 面 `#f7f7f7` / 文字 `#597d52` | **作品の指定区分ラベル**（緑。`重要文化財` `国宝` 等） |
| 会期ステータス（予告） | 面 `#aa855a` / 文字 `#ffffff` | `予告` |
| 会期ステータス（終了） | 面 `#333333` / 文字 `#ffffff` | `終了` |

- **カレンダーは色だけに頼らず凡例を併記する**（開館 / 休館 / 本日）
- `重要文化財` の緑 `#597d52` は**作品情報だけに使う**。UI の成功色ではない

> **注**: Swiper（スライダーライブラリ）既定の `#007aff` がページャに出るが、**根津美術館のブランドカラーではない**。実装で流用しないこと。

---

## 3. Typography Rules

### 3.1 和文フォント

- **明朝体（既定）**: **Noto Serif JP**。自己ホストの可変フォント。**サイトの既定書体はこちら**
- **ゴシック体（限定）**: **Noto Sans JP**。自己ホストの可変フォント。**ナビ・日付・表組み・開館情報のみ**

```css
/* 自己ホストの可変フォント（原典の @font-face） */
@font-face {
  font-family: "Noto Serif JP";
  src: url("/common/fonts/NotoSerifJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;      /* 可変軸 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("/common/fonts/NotoSansJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;      /* 可変軸 */
  font-style: normal;
  font-display: swap;
}
```

- **Google Fonts ではなく自己ホスト**。1 リクエストで全ウェイトが載る可変フォントなので、100〜700 を自由に使える設計になっている

### 3.2 欧文フォント

- **専用の欧文フォントを持たない**。`NEZUCAFÉ` `Attention` `MENU` `JP / EN` などの欧文は **Noto Serif JP / Noto Sans JP 内蔵の欧文グリフ**で組む
- **等幅**: 定義なし

### 3.3 font-family 指定

```css
/* 既定（明朝） */
body {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1.7;
  color: #333333;
}

/* ゴシックに切り替える箇所（ナビ・日付・表組み・開館情報） */
font-family: "Noto Sans JP", sans-serif;
```

**フォールバックの考え方**:
- **和文単独指定 + generic family のみ**。游明朝・ヒラギノ明朝への段階的フォールバックは持たない
- 可変フォントの読み込みが失敗した場合は OS の `serif`（macOS: ヒラギノ明朝 / Windows: MS P明朝）に落ちる。**`font-display: swap` なので初回描画は代替書体で出る**
- 実装で移植する場合、フォールバックを足すなら `"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif` の順を推奨

### 3.4 文字サイズ・ウェイト階層

**文字サイズは `body` の 13px を基準にした % で積む。** リセット CSS の `body { font: 13px/1.231 arial, helvetica, clean, sans-serif }` が基準を作り、サイト側の `body` は `font-size` を上書きせず `font-family` / `font-weight` / `line-height` だけを指定する。

| % | 実測 px | 名目 px | 主な用途 |
|---|---------|---------|----------|
| `100%` | 13px | 13 | 継承の基準（直接は使わない） |
| `108%` | 14.04px | 14 | 最小テキスト・バッジ |
| `116%` | 15.08px | 15 | パンくず |
| **`124%`** | **16.12px** | **16** | **小見出し・リンク・サイドナビ** |
| `131%` | 17.03px | 17 | |
| **`139%`** | **18.07px** | **18** | **本文・リード・会期の日付** |
| `147%` | 19.11px | 19 | |
| **`154%`** | **20.02px** | **20** | **h4 / h5・フッター見出し** |
| **`170%`** | **22.1px** | **22** | **h4（大）・アイコン** |
| **`185%`** | **24.05px** | **24** | **h4（特大）・カレンダーの月** |
| `200%` / `208%` | 26 / 27.04px | 26 / 27 | 会期の年月 |
| **`216%`** | **28.08px** | **28** | **h3（下層ページのセクション見出し）** |
| `231%` | 30.03px | 30 | |
| **`247%`** | **32.11px** | **32** | **h1（ページタイトル）** |
| `262%` | 34.06px | 34 | h1（1024px 以下） |
| `277%` | 36.01px | 36 | |
| **`293%`** | **38.09px** | **38** | **h2（記事タイトル）** |
| `308%` | 40.04px | 40 | |
| `340%` | 44.2px | 44 | |
| `372%` | 48.36px | 48 | 会期の年月（大） |
| **`404%`** | **52.52px** | **52** | **トップページのセクション見出し（`展覧会` `コレクション`）** |

- **`16.12px` `18.07px` `32.11px` のような端数は端数の事故ではなく、% × 13px の計算結果**。実装で `16px` に丸めると字面が変わる。**移植するなら 13px 基準の % をそのまま持ち込むのが安全**
- 実測の階層:

| Role | Font | Size | Weight | Line Height | 備考 |
|------|------|------|--------|-------------|------|
| Top Section | Noto Serif JP | 52.52px | **300** | 52.52px (1.0) | `展覧会` `コレクション` |
| Article Title (h2) | Noto Serif JP | 38.09px | 700 | 64.75px (1.7) | ls `3px` |
| Page Title (h1) | Noto Serif JP | 32.11px | 600 | 54.59px (1.7) | ls `3px` |
| Section (h3) | Noto Serif JP | 28.08px | 700 | 28.08px (1.0) | 下層の `概要` `展示作品` |
| Sub (h4) | Noto Serif JP | 22.1〜24.05px | 700 | 1.7 | 作品名・施設名 |
| Sub (h5) | Noto Serif JP | 20.02〜22.1px | 700 | 1.5〜1.7 | |
| Body | Noto Serif JP | 16.12〜18.07px | **600** | 27.40〜30.72px (1.7) | 段落によって 124% / 139% を使い分ける |
| Body（作品解説） | Noto Sans JP | 18.07px | 400 | 30.72px (1.7) | 会期・寸法など事実情報 |
| 作品名（特大） | Noto Serif JP | 20.02px | **100** | 30.03px (1.5) | `国宝燕子花図` |
| Link / SideNav | Noto Serif JP | 16.12px | 600 | 27.40px (1.7) | |
| Global Nav | Noto Sans JP | 18.07px | 500 | 30.72px (1.7) | |
| Table (会期表) | Noto Sans JP | 18.07px | 400 | 30.72px (1.7) | th のみ 700 |
| Badge | Noto Serif JP | 18.07px | 600 | 26px | `重要文化財` |
| Date Panel | Noto Serif JP | 22.1〜27.04px | 600 | 1.0 | `2026` / `0730` |

**ウェイトは 100 / 200 / 300 / 400 / 500 / 600 / 700 の 7 段を使う**（可変フォントの軸をフルに使う）。

| Weight | 用途 |
|--------|------|
| `100` | **作品名の特大表示**（`国宝燕子花図`）。極細の明朝 |
| `300` | **トップページの大見出し**（52.52px）。大きい字を細く |
| `400` | ゴシックの本文・表組み |
| `500` | グローバルナビ（ゴシック） |
| **`600`** | **body の既定**。本文・リンク・バッジ |
| `700` | 見出し（h2〜h5）・th |

- **「大きい字ほど細く、小さい字ほど太く」**が原則。52.52px は `300`、18.07px は `600`。明朝体の組版としては正統だが、Web では珍しい

### 3.5 行間・字間

- **本文の行間**: **`1.7`**（`body` で全域に指定）。`30.72px / 18.07px` `27.40px / 16.12px` `54.59px / 32.11px` がすべて 1.7 で一致する
- **見出しの行間**: `1.0`（52.52px のトップ見出し、28.08px の h3）／ `1.5`（h5・特大作品名）／ `1.3` `1.4` `1.6` `2.5` も部分的に使う
- **字間**: **既定は `normal`**。字間を入れるのは**ページタイトル（h1）と記事タイトル（h2）だけ**で、`letter-spacing: 3px`

| 対象 | letter-spacing | em 換算 |
|------|----------------|---------|
| h1（32.11px） | `3px` | `0.093em` |
| h2（38.09px） | `3px` | `0.079em` |
| h2 サブ（24.06px） | `3px` | `0.125em` |
| その他すべて | `normal` | — |

- **`3px` を px で固定しているので、字が小さいほど相対的な字間が広くなる**。24.06px のサブタイトルでは `0.125em` に達する。移植時は em に読み替えず px のまま持ち込むと再現しやすい

### 3.6 禁則処理・改行ルール

```css
word-break: normal;
overflow-wrap: break-word;
line-break: strict;
```

- 展覧会名は「はじめての古美術鑑賞」／「―美術のなかの文字―」のように **`<span>` で意図的に 2 行に割る**。自動折り返しに任せない
- 作品名に含まれる `　`（全角スペース）を区切りに使っている箇所がある（`竹雀図　`）。**トリムせずそのまま出す**

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* 全域 */
```

- **`palt` を一切使っていない**。明朝体を等幅のまま流し、字詰めは行わない。**約物のアキがそのまま残るのが根津美術館の字面**
- 見出しの詰まりは `palt` ではなく `letter-spacing: 3px`（＝逆に開ける）で調整している

### 3.8 縦書き

該当なし（横組みのみ）。

---

## 4. Component Stylings

### Buttons

**Primary（チケット購入）**
- Background: `#aa855a`
- Text: `#ffffff`
- Font: Noto Serif JP `16.12px` / `600`
- Padding: `25px 20px`（縦長のサイドボタン）／ `15px 20px`（本文中）
- Border Radius: `3px`
- **日付パネルに隣接する版は片側だけ丸める**: `border-radius: 0 3px 3px 0` ／ `3px 0 0 3px`

**Secondary（詳細はこちら）**
- Background: `#333333`
- Text: `#ffffff`
- Font: Noto Serif JP `18.07px` / `600`
- Padding: `15px 20px`
- Border Radius: `4px`

**Ghost（写真・黒地の上）**
- Background: `transparent`
- Text: `#ffffff`
- Border: `1px solid #ffffff`
- Padding: `10px`
- Border Radius: `3px`

### Badges / Tags

| 種類 | 面 | 文字 | Padding | Radius |
|------|----|------|---------|--------|
| 会期（予告） | `#aa855a` | `#ffffff` | `0 20px` | `0` |
| 会期（終了） | `#333333` | `#ffffff` | `0 0 2px` | `0` |
| 作品分類 | `#eeeeee` | `#333333` | `0 10px 2px` | `0` |
| 指定区分 | `#f7f7f7` | `#597d52` | `0 10px 2px` | `0` |
| ニュース種別 | `#c2e3f7` | `#1e2d59` | `0 16px` | `0` |
| 本日（カレンダー） | `#ffd46e` | `#333333` | `0` | `50%` |

- **バッジは角丸を持たない（`radius: 0`）**。丸いのは「本日」マーカーだけ

### Inputs

- Background: `#ffffff`
- Border: `1px solid #999999`
- Border Radius: `3px`
- Padding: `10px 15px`
- Font: Noto Serif JP `16.12px` / `600`
- **Focus**: 下記の `:focus-visible` に従う

### Focus

```css
/* テキストリンク */
:focus-visible { color: #aa855a; text-decoration: underline; }

/* ボタン・面を持つ要素 */
:focus-visible {
  border: 1px solid #aa855a;
  background: #aa855a;
  color: #ffffff;
  text-decoration: none;
}

/* 既に金茶の面を持つ要素（チケット購入など） */
:focus-visible { opacity: 0.8; text-decoration: none; }
```

- **`outline` を使わず、色と下線で示す**。ブランド色 `#aa855a` がそのままフォーカス色
- 金茶の面を既に持つボタンは**不透明度 0.8 に落として**示す

### Cards

- Background: `#ffffff`（面色を持たない）
- Border: なし／必要なら `1px solid #999999`
- Border Radius: `0`
- Shadow: **なし**
- 展覧会カードは**写真 ＋ 明朝の見出し ＋ ゴシックの会期**の 3 層で構成する

### Side Navigation

- 通常: 面 `#ffffff` / 文字 `#333333` / Padding `15px 10px`
- 現在地: 面 **`#fff8f1`** / 文字 `#333333`
- Font: Noto Serif JP `16.12px` / `600`
- Radius: `0`

---

## 5. Layout Principles

### Spacing Scale

CSS 変数を持たないため、実測値から読み取れる刻みは以下。

| Token | Value |
|-------|-------|
| XS | `2px` |
| S | `5px` |
| M | `10px` |
| L | `15px` |
| XL | `20px` |
| XXL | `25px` |
| 3XL | `50px` |
| Section | `80px` / `90px`（フッター上下） |

- **5px 刻み**が基本。4px グリッドではない

### Container

- Max Width: 明示的な `max-width` を持たず、`width: 100%` ＋ 左右パディングで構成する
- Padding (horizontal): `15px`（モバイル）〜 `80px`（デスクトップのフッター実測）
- ファーストビューは**フルブリード**（写真が viewport 全面）

### Grid

- 展覧会・コレクションは 2〜4 カラム。下層の本文は 1 カラム
- カレンダーは `<table>` の 7 列（曜日）

---

## 6. Depth & Elevation

**`box-shadow` はサイト全体で 1 つも使われていない。**

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | **すべての要素** |

奥行きは以下で作る。

| 手法 | 値 | 用途 |
|------|----|------|
| スクリム | `rgba(0, 0, 0, 0.35)` | ファーストビュー写真の上（ナビを読ませる） |
| 濃いスクリム | `rgba(0, 0, 0, 0.5)` | 言語切替の周辺 |
| 半透明の白パネル | `rgba(255, 255, 255, 0.8)` | **休館告知**。写真を透かす |
| 黒帯 | `#333333` | 日付パネル・フッター |

- **「浮かせる」のではなく「透かす」**。古美術館らしい、紙や障子に近い階層表現

---

## 7. Do's and Don'ts

### Do（推奨）

- **本文・見出しは明朝（Noto Serif JP）で組む**。これがこの館の第一の性格
- **ゴシック（Noto Sans JP）は日付・ナビ・表組み・開館情報に限る**。「数字と操作はゴシック、言葉は明朝」
- **`body` の既定ウェイトを `600` にする**。明朝の `400` では画面上で細すぎる
- **大きな見出しはウェイトを下げる**（52.52px → `300`、特大の作品名 → `100`）
- `line-height: 1.7` を本文の既定にする
- **字間は h1 / h2 のみ `letter-spacing: 3px`**、他は `normal`
- 文字サイズは **13px 基準の %**（`124%` = 16.12px…）で積む。移植時は端数を丸めない
- 影を使わず、スクリムと半透明パネルで階層を作る
- カレンダーの土曜 `#003f8c` / 日曜・祝日 `#a60000` を守る
- **フォーカスは `#aa855a`**（色 + 下線、または面の反転）

### Don't（禁止）

- **`font-feature-settings: "palt"` を追加しない**。原典は全域 `normal`。字詰めを入れると明朝の字面が変わる
- **文字色に純黒 `#000000` を使わない**。`#333333`
- **金茶 `#aa855a` 以外のブランド色を持ち込まない**。有彩色は金茶とカレンダーの曜日色だけ
- **`box-shadow` を追加しない**（1 つも使われていない）
- **角丸を 4px より大きくしない**。ピル（`9999px`）は使わない
- **バッジに角丸を付けない**（`radius: 0`。丸いのは「本日」マーカーだけ）
- 緑 `#597d52` を成功色として使わない（`重要文化財` 等の指定区分専用）
- Swiper 既定の `#007aff` を流用しない
- `letter-spacing: 3px` を本文に広げない（読みづらくなる）

---

## 8. Responsive Behavior

### Breakpoints

**`max-width` ベース（デスクトップファースト）**。段が多い。

| Query | 用途 |
|-------|------|
| `max-width: 1600px` | ワイド調整 |
| `max-width: 1400px` | 大型デスクトップ |
| `max-width: 1200px` | デスクトップ |
| `max-width: 1024px` | **小型デスクトップ / タブレット横。見出しを 1 段落とす** |
| `max-width: 940px` | タブレット |
| `max-width: 768px` | **タブレット縦。主要な切り替え点** |
| `max-width: 650px` / `640px` | スマホ横 |
| `max-width: 520px` | スマホ |

### フォントサイズの調整

**見出しだけを % の段で落とし、本文は動かさない。**

| 要素 | 1440px | 1024px | 768px |
|------|--------|--------|-------|
| h1 | 32.11px (`247%`) | 28.08px (`216%`) | 22.1px (`170%`) |
| h2 | 38.09px (`293%`) | 34.06px (`262%`) | 28.08px (`216%`) |
| h3 | 28.08px (`216%`) | 24.05px (`185%`) | 20.02px (`154%`) |
| 本文 p | **16.12px（不変）** | 16.12px | 16.12px |

- **本文は全ブレークポイントで `16.12px` のまま**。行間だけ 1.7 → 1.74（`28px`）に微調整される
- `clamp()` / `vw` は使わない。**すべてメディアクエリの段切り**

### タッチターゲット

- チケット購入ボタンは `padding: 25px 20px` で高さ 70px 以上を確保
- 詳細リンクは `15px 20px` ＋ `18.07px × 1.7` で高さ約 61px

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Brand (金茶):     #aa855a  （CTA / 現在地 / 展示室ラベル / フォーカス）
Text:             #333333
Text Inverse:     #ffffff
Background:       #ffffff
Nav Active:       #fff8f1
Panel:            #f7f7f7 / #f2f2f2
Tag:              #eeeeee
Ink Panel:        #333333
Calendar 開館/休館/本日: #9bb8dc / #dddddd / #ffd46e
Calendar 土/日祝:  #003f8c / #a60000
Font (既定・明朝):  "Noto Serif JP", serif        ← 本文・見出し
Font (限定・ゴシック): "Noto Sans JP", sans-serif  ← 日付・ナビ・表組み
Base:             13px（% で積む。124% = 16.12px / 139% = 18.07px / 404% = 52.52px）
Body Size:        16.12px（124%）〜 18.07px（139%）
Body Weight:      600  ← 明朝なので太めが既定
Line Height:      1.7
Letter Spacing:   normal（h1 / h2 のみ 3px）
Font Feature:     normal（palt は使わない）
Radius:           3px（ボタン） / 4px（リンク） / 0（バッジ）
Shadow:           none（全域）
Focus:            color: #aa855a + underline ／ 面は #aa855a に反転
```

### プロンプト例

```
根津美術館のデザインシステムに従って、展覧会一覧ページを作成してください。
- 地色 #ffffff、文字 #333333
- 本文・見出しは "Noto Serif JP", serif（明朝）。body の font-weight は 600、line-height は 1.7
- 会期の日付と表組みだけ "Noto Sans JP", sans-serif（400）に切り替える
- ページタイトル（h1）: 32.11px / 600 / letter-spacing 3px
- 展覧会名（h2）: 38.09px / 700 / letter-spacing 3px。それ以外は letter-spacing: normal
- font-feature-settings は normal（palt を付けない）
- 「チケット購入」ボタン: 背景 #aa855a / 文字 #ffffff / radius 3px / padding 15px 20px / 16.12px / 600
- 「詳細はこちら」ボタン: 背景 #333333 / radius 4px
- 会期ステータスのバッジ: 開催予定は #aa855a、終了は #333333、いずれも radius 0
- 指定区分ラベル（重要文化財）: 面 #f7f7f7 / 文字 #597d52 / radius 0
- box-shadow は一切使わない
- フォーカスは outline ではなく color: #aa855a + text-decoration: underline
```