# DESIGN.md — 青森県立美術館（AOMORI MUSEUM OF ART）

> 青森県立美術館 / Aomori Museum of Art（https://www.aomori-museum.jp/）のデザイン仕様書。
> 2006 年開館、青木淳の設計。菊地敦己による VI は日本のグラフィックデザイン史に残る仕事として知られる。
> 最大の特徴は **文字色が黒ではなく `#332200`（暖かい焦茶）** であること。ロゴも罫も SVG の塗りもすべてこの 1 色で、サイト全体が「墨」ではなく「土」の色で組まれている。
> 差し色は **`#91d2e5`（淡い空色）の 1 色だけ**。彩度を持つ色はこれしか存在しない。
> **`border-radius` は全要素 `0px`**、**`box-shadow` は 1 つも無い**。角丸も影も使わず、**2px / 3px のベタ罫**だけで面を区切る。
> そして **`letter-spacing` が 0.2em / 0.12em / 0.06em / 0.03em / normal の 5 段に設計されている**。字間そのものが階層を作る。
> 実サイトの computed style 実測（2026-08-15 取得。トップ ＋ TICKETS ＋ 展覧会詳細ページ）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **白地に焦茶の線画**。角丸ゼロ・影ゼロ・彩度ほぼゼロ。**罫線の太さ（2px / 3px）と字間の広さだけで情報の階層を作る**、製図的で禁欲的な設計
- **青森県立美術館について**: 三内丸山遺跡の発掘現場（トレンチ）を意匠の起点にした建築。**「掘り起こされた土の断面」に対応する色が `#332200`** で、サイトはそのアイデンティティをそのまま Web に移している
- **密度**: 低い。トップは **巨大な SVG 見出し → 大きく字間を開いたリンク列 → 20 周年ロゴ → 展覧会カード**という順で、1 画面あたりの情報量を抑えている
- **キーワード**: 焦茶 `#332200`、空色 `#91d2e5`、radius 0、影なし、ls 0.2em の大リンク、Noto Sans JP ＋ 約物半角
- **特徴**:
  - **主文字色が `#332200`（rgb 51,34,0）**。純黒 `#000000` はサイト内に一切現れない。**罫線・枠・SVG の `fill` もすべて同じ 1 色**
  - **有彩色は `#91d2e5`（淡い空色）1 色のみ**。20 周年ロゴの枠、年号の罫、開館ステータスの `○`、Cookie バーのリンクにしか使わない
  - **`border-radius: 0px` が全要素**。ボタンもバッジも入力欄も角丸にしない
  - **`box-shadow: none` が全要素**。奥行きは **罫線の太さ（2px / 3px）** だけで表す
  - **主ナビゲーションが 26px / weight 700 / `letter-spacing: 0.2em`** の巨大なリンク列。**リンクがそのまま見出しとして機能する**
  - **`letter-spacing` に 5 段の設計がある**（0.2em / 0.12em / 0.06em / 0.03em / normal）。**サイズではなく役割で字間が決まる**
  - **ロゴと大見出しは SVG 画像**。菊地敦己による専用アルファベット／和文レタリングは Web フォントではないため、**HTML テキストで再現しない**
  - **`palt` を掛けない**（`font-feature-settings: normal`）。字間は詰めず、開く方向にだけ動かす

---

## 2. Color Palette & Roles

> 実測値。地は `#ffffff`（`pageBackground.resolved` = `rgb(255,255,255)` / 根拠 `body`）。
> **`uniqueBackgrounds` に現れる有彩色は 1 つも無い**。空色 `#91d2e5` は面ではなく**文字色・SVG の塗り**としてしか使われないため、背景色の集計には出てこない。**このサイトを読むときは `interactive` の `color` と実スクリーンショットを必ず突き合わせること**。

### Brand（ブランド）

- **Ink Brown** (`#332200`, rgb 51,34,0): **サイトを支配する唯一の主色**。本文・見出し・罫線・枠・アイコンの `fill`・Cookie バーの面。**純黒の代わりに使う**
- **Sky** (`#91d2e5`, rgb 145,210,229): **唯一の差し色**。20 周年ロゴの枠線、年号「2006 — 2026」の罫、「本日開館」の `○`、Cookie バー上のリンク文字。**面としてはほとんど塗らず、線と文字で使う**

### Neutral（ニュートラル）

- **Background** (`#ffffff`): ページ地色。**純白**
- **Surface** (`#f4f4f4`, rgb 244,244,244): 展覧会詳細の定義リスト（「会期」「休館日」「会場」の行）の面。**唯一の面色**
- **Badge Gray** (`#cccccc`, rgb 204,204,204): ステータスバッジ（「開催中」「開催予定」）の面。**枠も同色の 2px**
- **Text Secondary**: 独立した弱色を持たない。**補足も `#332200` のまま font-size を落として表す**

### Semantic（意味的な色）

意味色は**サイト内に存在しない**。実装で必要になった場合は以下を目安にする。

- **Danger／Error**: `#8c2f14` 目安。**`#332200` と同じ暖色系に寄せ、彩度を上げすぎない**
- **Warning**: 新色を足さず、**`#332200` の 2px 枠 ＋ 太字**で表す
- **Success**: `#91d2e5`（既存の Sky）を流用する
- **非活性**: 面 `#cccccc` ／ 文字 `#332200`（バッジと同じ扱い）

---

## 3. Typography Rules

> **`letter-spacing` が 5 段に設計されている**のがこのサイトの核。**サイズではなく役割で字間が決まる**（同じ 16px でも見出しは 0.12em、本文は 0.06em）。書体は Noto Sans JP に**約物半角（YakuHanJP）を重ねた 2 段構成**。

### 3.1 和文フォント

- **全要素共通**: **`YakuHanJPs_Noto` → `NotoSansJP` → `sans-serif`**
- **`YakuHanJPs_Noto` は「約物だけを差し替えるサブセット」**。`YakuHanJP` は括弧・句読点（`（）「」、。`）を**半角字形に置き換えるためだけのフォント**で、仮名・漢字のグリフは持たない。**先頭に置くことで約物だけが半角になり、後続の `NotoSansJP` が本体を描く**
- 末尾の `s` は **Sans 版**、`_Noto` は **Noto Sans JP と字形を合わせた版**を指す
- **ウェイト**: `@font-face` は **300 / 500 / 700** を宣言。実際に読み込まれるのは **500（本文・UI の既定）と 700（見出し・バッジ・カードタイトル）** の 2 段。**300 は宣言のみで未使用**
- **400 は body に指定が無いのに h1 / h2 で現れる**。これはブラウザ既定の継承ではなく、**大見出しだけ意図的に Regular に落としている**もの

### 3.2 欧文フォント

- **欧文専用の書体を持たない**。「AOMORI MUSEUM OF ART」「20TH」「2006 — 2026」は**すべて SVG 画像**（菊地敦己による専用アルファベット）で、Web フォントではない
- 本文中の英数字・日付（`2026.8.14（金）`）は **Noto Sans JP の字形**で出る
- 例外はカルーセルの制御ボタン（`Arial` / 13.3333px）のみ。**UA 既定が残っているだけなので、自社の設計には持ち込まない**
- 等幅フォントは使わない
- **preview.html での注記**: **Noto Sans JP は Google Fonts で取得できるため、本体の字形は実サイトと一致する**。ただし **`YakuHanJPs_Noto` は Google Fonts に無い**ため、約物の半角化は再現されない（`yakuhanjp` の CDN を読むか、`font-feature-settings: "halt"` で近似する）。**SVG のロゴ・大見出しは再現不可**

### 3.3 font-family 指定

```css
/* 全要素共通 */
font-family: YakuHanJPs_Noto, NotoSansJP, sans-serif;

/* body の既定 */
font-size: 18px;
font-weight: 500;              /* ← Regular ではなく Medium */
line-height: 1.75;             /* 31.5px */
letter-spacing: normal;        /* body は開かない。開くのは役割ごと */
color: #332200;                /* 純黒ではない */
font-feature-settings: normal; /* palt は使わない */
```

**フォールバックの考え方**:
- **約物用サブセットを最優先に置く**。`YakuHanJPs_Noto` → `NotoSansJP` の順は**「約物だけ差し替える」ための必須の順序**で、入れ替えると効かない
- **OS 標準書体（游ゴシック・ヒラギノ）を並べない**。Noto Sans JP を必ず読み込む前提の、Web フォント単独の構成
- **`body` の `letter-spacing` は `normal`**。OPAM のような「body に字間を置いて全継承」型ではなく、**役割ごとに個別に指定する**設計

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

| Role | Size | Weight | Line Height | Letter Spacing | Color | 備考 |
|------|------|--------|-------------|----------------|-------|------|
| Page Title (h1) | 36px | **400** | 1.75 (63px) | normal | `#332200` | **大見出しだけ Regular** |
| Section Head (h2) | 27px | **400** | 1.75 (47.25px) | normal | `#332200` | 「チケットの購入」「お知らせ」 |
| **Action Link** | **26px** | **700** | **1.75 (45.5px)** | **0.2em (5.2px)** | `#332200` | 「開館時間／休館日」「一覧をみる」。**このサイトの顔** |
| Date Display | 26px | **700** | 1.75 (45.5px) | **0.2em (5.2px)** | `#332200` | 「2026.8.14（金）」「本日開館」 |
| Detail Title (h2) | 26px | **700** | 1.8 (46.8px) | 0.03em (0.78px) | `#332200` | 展覧会詳細の展覧会名 |
| Sub Head (h3) | 20px | **700** | 1.7 (34px) | 0.03em (0.6px) | `#332200` | 「展示の見どころ」 |
| Caption Head (h3) | 21.06px | **400** | 1.75 (36.855px) | normal | `#332200` | 作家名・サポーター告知 |
| Body | 18px | **500** | **1.75 (31.5px)** | **normal** | `#332200` | `body` の基準 |
| Card Title (h3) | 16px | **700** | 1.8 (28.8px) | **0.12em (1.92px)** | `#332200` | 展覧会カードのタイトル |
| Card Date (p) | 16px | **700** | 1.8 (28.8px) | **0.12em (1.92px)** | `#332200` | 「2026.10.31 - 2027.03.14」 |
| Term Label (h4) | 16px | **700** | 1.25 (20px) | **0.12em (1.92px)** | `#332200` | 「会期」「当日券」。**行間だけ 1.25 に締める** |
| Reading Text (p) | 16px | **500** | 1.8 (28.8px) | **0.06em (0.96px)** | `#332200` | 展覧会解説の本文 |
| Badge | 13px | **700** | **1.0 (13px)** | **0.12em (1.56px)** | `#332200` | 「開催中」「企画展」 |
| Small (p) | 13px | **500** / 400 | 1.8 (23.4px) | **0.03em (0.39px)** | `#332200` | 注記・キャプション |
| Calendar Digit | 13px | **700** | **1.0 (13px)** | normal | `#332200` / `#91d2e5` | カレンダーの日付。**空色は開館日** |

- **見出しほど weight が下がる**という逆転がある。**h1 / h2 は 400、カードタイトルや小見出しは 700**。「大きい文字は細く、小さい文字は太く」で視覚的な重さを揃えている
- **`line-height` は 3 段**: **1.75**（18px 基準の UI・大見出し・アクションリンク）／ **1.8**（16px・13px の読み物）／ **1.0**（バッジ・カレンダーの数字）。例外は「会期」ラベルの 1.25 のみ
- **`letter-spacing` は em で指定されている**（OPAM の px 固定とは逆）。**サイズが変わっても見た目の字間比が保たれる**

### 3.5 行間・字間

- **本文の行間 (line-height)**: **1.75**（18px → 31.5px）。読み物ブロックは **1.8**（16px → 28.8px）と、**わずかに広げる**
- **字間 (letter-spacing) は 5 段で設計されている**:

| Tier | 値 | 使う場所 |
|------|-----|---------|
| **Wide** | **0.2em** | アクションリンク（26px/700）、日付表示。**このサイトの署名** |
| **Label** | **0.12em** | バッジ、カードタイトル、カード日付、「会期」等の項目ラベル |
| **Reading** | **0.06em** | 16px の読み物本文 |
| **Fine** | **0.03em** | 13px の注記、20px / 26px の見出し |
| **Normal** | `normal` | `body`（18px）、h1（36px）、h2（27px） |

- **重要なのは「サイズで決まらない」こと**。同じ 16px でもカードタイトルは 0.12em、本文は 0.06em。**役割が字間を決める**
- **`body` は `normal`**。字間を継承させず、**開きたい要素にだけ個別に当てる**
- **0.2em を当てるのは 26px / weight 700 のリンクと日付だけ**。文章には絶対に当てない
- **`palt` は使わない**（`font-feature-settings: normal`）

**ガイドライン**:
- **アクションリンクは「26px ＋ weight 700 ＋ ls 0.2em」の 3 点セット**で作る。字間だけを真似すると痩せて見える
- **バッジとカードタイトルは同じ 0.12em で揃える**。ラベル系の字間を統一することで、カード内の情報が 1 つの塊に見える
- **本文（0.06em）と注記（0.03em）で字間を変える**。サイズ差だけでなく字間差でも階層を作る
- **`body` に字間を置かない**。継承させると 0.2em のリンクとの落差が作れなくなる

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

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

**禁則対象**:
- 行頭禁止: `）」』】〕〉》、。，．・：；？！`
- 行末禁止: `（「『【〔〈《`

- **`YakuHanJPs_Noto` が約物を半角にしている**ため、`「」（）` の前後に**追加のマージンを入れない**。二重に詰まる
- 展覧会名は長く記号を含む（`青森県立美術館開館20周年 / 東日本大震災15年「志賀理江子 なぬもかぬも」展`）。**スラッシュ `/` の前後、鉤括弧の直前で折らない**
- 会期表記（`2026.10.31 - 2027.03.14`）は**全体を 1 行に保つ**（`white-space: nowrap`）。ハイフンの前後で折らない
- 日付（`2026.8.14（金）`）は**曜日の括弧ごと 1 行**にする
- **`letter-spacing: 0.2em` を当てた行は折り返させない**。字間が開いているため 2 行になると塊として読めなくなる。折り返しが起きるなら**サイズを落として 1 行に収める**
- バッジのラベル（「開催中」「コレクション展」「ワークショップ」）は折り返さない

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* palt を掛けない */
```

- **`palt` は使わない**。代わりに **`YakuHanJPs_Noto` で約物だけを物理的に半角字形へ差し替える**。**「詰める」のではなく「約物専用のグリフに置き換える」**アプローチ
- **この 2 つを併用しない**。`palt` と約物半角フォントを重ねると括弧まわりが詰まりすぎる
- 字間は**開く方向（0.03〜0.2em）にだけ動かす**。負の `letter-spacing` はサイト内に存在しない
- カレンダーの日付は桁を揃えたいので、必要なら `font-feature-settings: "tnum"` を足す（現行サイトは未使用）

### 3.8 縦書き

- 現行サイトは全面横組み（`writing-mode: horizontal-tb`）
- 作品キャプションや作家ステートメントで縦組みを使う場合は以下

```css
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: YakuHanJPs_Noto, NotoSansJP, sans-serif;
font-weight: 500;
letter-spacing: 0.06em;   /* 読み物と同じ字間を維持する */
line-height: 1.9;         /* 縦組みは横組みの 1.8 より広げる */
color: #332200;
```

- 縦組み中の年号（`2026`）は `text-combine-upright: all` で縦中横にする
- **`letter-spacing: 0.2em` を縦組みに持ち込まない**。縦組みでは行長が伸びすぎる
- **2px の罫線は縦組みブロックの右端（行頭側）に置く**。横組みの「見出しの下に罫」を 90 度回した位置

---

## 4. Component Stylings

> **全要素 `border-radius: 0px` / `box-shadow: none`**。形の違いは**枠線の太さ（2px / 3px）と面の有無**だけで作る。

### Buttons

**Outline Button（枠 3px）— 主要な操作**

- Background: **`#ffffff`**
- Text: `#332200`
- Border: **`3px solid #332200`**
- Padding: **`4px 28px`**
- Border Radius: **`0px`**
- Font: 18px / **weight 500** / lh 1.75 / ls normal
- 例: ヒーロー右下の「2026.8.14（金）○ 本日開館」ブロック
- **枠 3px はサイト内で最も太い線**。「今いちばん押してほしいもの」にだけ使う

**Text Link（大）— サイトの主ナビゲーション**

- Background: なし
- Text: `#332200`
- Border: なし（末尾に `→` を置く）
- Font: **26px / weight 700 / lh 1.75 / `letter-spacing: 0.2em`**
- 例: 「開館時間／休館日 →」「利用料金 →」「アクセスマップ →」「一覧をみる →」
- **面を持たないのに主 CTA として機能する**。**字間 0.2em ＋ 太字 ＋ 大きさ**の 3 点で押せることを示す
- **矢印は `→`（U+2192）をテキストで置く**。アイコンフォントや SVG にしない

**Header Link**

- Text: `#332200`
- Font: 18px / weight 500 / lh 1.75 / ls normal
- 例: 「TICKETS」「MENU」
- **ヘッダーだけ字間を開かない**。大リンクとの対比を作るため

### Badges

**Status Badge（塗り）**

- Background: **`#cccccc`**
- Text: `#332200`
- Border: **`2px solid #cccccc`**（面と同色の枠を置いて高さを揃える）
- Padding: **`8px`**（上下左右均等）
- Border Radius: **`0px`**
- Font: 13px / **weight 700** / **lh 1.0** / **ls 0.12em (1.56px)**
- 例: 「開催中」「開催予定」
- **状態を表す**。グレーの面だけで、色分けはしない

**Category Badge（枠）**

- Background: **`#ffffff`**
- Text: `#332200`
- Border: **`2px solid #332200`**
- Padding: **`8px`**
- Border Radius: **`0px`**
- Font: 13px / **weight 700** / **lh 1.0** / **ls 0.12em (1.56px)**
- 例: 「企画展」「コレクション展」「一般開催」「ワークショップ」「その他」
- **分類を表す**。**カテゴリが何種類あっても色を増やさない**。文字だけで区別する
- **状態＝塗り（`#cccccc`）／分類＝枠（`#332200`）** の 2 種類しかバッジは存在しない

### Cards（展覧会・イベント）

- Background: `#ffffff`（地と同色）
- Border: なし
- Border Radius: **`0px`**
- Shadow: **なし**
- 構成: サムネイル → **バッジ 2 枚を横並び（分類 ＋ 状態）** → タイトル（16px / 700 / ls 0.12em）→ 会期（16px / 700 / ls 0.12em）
- **カードの輪郭を描かない**。地と同色・枠なし・影なしで、**サムネイルの矩形とテキストの塊だけでカードに見せる**
- **バッジは必ず「分類（枠）→ 状態（塗り）」の順**に左から並べる

### Definition List（展覧会詳細の「会期／休館日／会場」）

- Background: **`#f4f4f4`**（サイト唯一の面色）
- Border Radius: **`0px`**
- ラベル: 16px / **weight 700** / **lh 1.25** / ls 0.12em
- 値: 16px / weight 700 / lh 2.0 / ls 0.12em
- **ラベルだけ `line-height: 1.25` に締める**。値との行送りの差で 2 列に見せる

### Inputs

実サイトのフォームは検索窓のみで、専用のスタイルを持たない。**このサイトの原則（radius 0 / 影なし / 2px 罫）から導くと以下**。

- Background: `#ffffff`
- Border: **`2px solid #332200`**
- Border (focus): **`3px solid #332200`**（**色を変えず太さで示す**。このサイトには focus 用の色が無い）
- Border Radius: **`0px`**
- Padding: `12px 16px`
- Font: 18px / weight 500 / Text Color: `#332200`
- Placeholder: `#332200` の opacity 0.5

### Cookie Bar

- Background: **`#332200`**（サイト唯一の暗い面）
- Text: `#ffffff` / 13px / weight 500 / lh 1.8 / ls 0.03em
- Link: **`#91d2e5`**（空色）／ 13px / weight 500
- **暗い面の上でだけ空色がリンク色として機能する**。白地の上では空色をリンクに使わない

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 4px |
| S | 8px |
| M | 16px |
| L | 24px |
| XL | 40px |
| XXL | 80px |
| XXXL | 120px |

### Container

- Max Width: **1128px**（h1 / h2 の `getBoundingClientRect().width` 実測値）
- 読み物カラム: **760px** 目安
- Padding (horizontal): 40〜120px。**1440px 幅で左右に約 115px ずつ余白**を取る
- ヘッダーは全幅・白地・不透過。**KV に重ねない**
- **ヒーローの大見出しは SVG 1 枚**（PC / SP で別ファイルを出し分ける）

### Grid

- Columns: 展覧会カードは **4 カラム**（カード幅 255px 実測）、イベントカードも 4 カラム
- Gutter: 24px
- **セクションの区切りは面色を変えない**。すべて白地のまま、**余白の量だけで区切る**
- **アクションリンクは横に並べて折り返す**（「開館時間／休館日 →」「利用料金 →」が 1 行、「アクセスマップ →」「フロアマップ →」「サービス施設／設備 →」が次の行）。**リンク列そのものがレイアウトの単位**になっている
- 20 周年ロゴのような記念ブロックは **`3px solid #91d2e5` の枠**で囲み、中は白地

---

## 6. Depth & Elevation

**実測の `box-shadow` は 0 段**。サイト内に影が 1 つも存在しない。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | **`none`** | **全要素**。カード・バッジ・ボタン・入力欄・ヘッダーのすべて |

- **奥行きを影で表さない**。代わりに **枠線の太さ**を 3 段に分けている:

| 太さ | 用途 |
|------|------|
| **2px** | バッジの枠（分類 `#332200` / 状態 `#cccccc`） |
| **3px** | 主要な操作ブロックの枠、20 周年ロゴの枠（`#91d2e5`） |
| なし | カード・見出し・本文 |

- 面の段は **地 `#ffffff` と 定義リストの `#f4f4f4` の 2 段だけ**
- **WordPress の `--wp--preset--shadow--*`（natural / deep / sharp / outlined / crisp）は Gutenberg の既定値で、サイトでは 1 つも使われていない**。**ブロックエディタ由来の CSS 変数をブランドのトークンと取り違えないこと**（`--wp--preset--color--*` の vivid-red / vivid-purple 等も同様に未使用）

---

## 7. Do's and Don'ts

### Do（推奨）

- **主文字色を `#332200`（暖かい焦茶）にする**。本文・見出し・罫線・SVG の `fill` をすべてこの 1 色で統一する
- **有彩色は `#91d2e5`（空色）1 色だけに絞る**。しかも**面ではなく線と文字**で使う
- **`border-radius: 0px` を全要素で守る**。ボタンもバッジも入力欄も角丸にしない
- **`box-shadow` を使わない**。奥行きは**枠線の太さ（2px / 3px）**で表す
- **アクションリンクは「26px ＋ weight 700 ＋ `letter-spacing: 0.2em`」の 3 点セット**で作る
- **`letter-spacing` を役割ごとに 5 段（0.2em / 0.12em / 0.06em / 0.03em / normal）で使い分ける**。サイズで決めない
- **`body` の `letter-spacing` は `normal`** にして、開きたい要素にだけ当てる
- **大見出しほど weight を下げる**（h1 / h2 は 400、カードタイトルは 700）
- **バッジは 2 種類だけ**にする。**分類＝白地 ＋ 2px 枠 `#332200`／状態＝面 `#cccccc` ＋ 同色 2px 枠**
- **バッジの枠を面と同色で置く**（高さが揃う）
- **カードに枠も影も付けない**。サムネイルとテキストの塊だけでカードに見せる
- **`YakuHanJPs_Noto` を `NotoSansJP` の前に置く**（約物半角の必須条件）
- **矢印は `→` をテキストで置く**（アイコン化しない）
- **面色は `#f4f4f4` の 1 つだけ**にする

### Don't（禁止）

- **純黒 `#000000` を使わない**。文字も罫も `#332200`
- **`#91d2e5` を広い面に塗らない**。線と文字と `○` のためだけの色
- **角丸を作らない**（pill も 4px も禁止）。radius 0 が設計そのもの
- **影を付けない**。`0 2px 8px` のような一般的なカードシャドウを持ち込まない
- **色を増やさない**。カテゴリが増えてもバッジの色を分けない（文字で区別する）
- **`letter-spacing` をサイズで決めない**。同じ 16px でもラベルは 0.12em、本文は 0.06em
- **`letter-spacing: 0.2em` を文章に当てない**。1 行のリンク・日付だけ
- **`letter-spacing: 0.2em` の行を折り返させない**（サイズを落として 1 行に収める）
- **`body` に `letter-spacing` を置いて全継承させない**（0.2em との落差が作れなくなる）
- **`palt` を掛けない**。約物は `YakuHanJPs_Noto` に任せる。**両方を併用しない**
- **負の `letter-spacing` を使わない**（字間は開く方向だけ）
- **大見出しを太くしない**（h1 / h2 は 400 を守る）
- **游ゴシック・ヒラギノをフォールバックに並べない**。Noto Sans JP 単独の構成
- **SVG のロゴ・大見出しを HTML テキストで再現しようとしない**。専用レタリングは Web フォント化されていない
- **`--wp--preset--*` の色・影・グラデーションをブランドトークンとして使わない**（Gutenberg の既定値で、実サイトでは未使用）
- **セクションごとに地色を変えない**（全面白地 ＋ 余白で区切る）

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。展覧会カードは 1 列。**大見出しは SP 用 SVG に差し替える**（`headline_visit-sp.svg`） |
| Tablet | 768–1024px | 2 カラム。アクションリンクは 2 列で折り返す |
| Desktop | > 1024px | 展覧会カードは 4 カラム。アクションリンクは 3〜4 個ずつ横並び |

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG 基準）。**アクションリンクは 26px / lh 1.75 で高さ 45.5px** を確保できているため、そのままで基準を満たす
- **バッジは `line-height: 1.0` ＋ `padding: 8px` で高さ 33px しかない**。**バッジ自体はタップ対象にしない**（カード全体をタップ領域にする）
- **枠 3px のボタンは `padding: 4px 28px` で高さ 40px**。モバイルでは `padding: 10px 28px` に広げて 52px を確保する
- カードは**カード全体をタップ領域**にする

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

- 本文 18px は据え置く（16px を下回らない）
- **アクションリンク 26px → モバイルでは 20〜22px。`letter-spacing: 0.2em` は 0.15em に落とす**（幅が収まらないため）。**weight 700 は維持する**
- Page Title 36px → モバイルでは 24〜26px。**weight 400 は維持する**
- Section Head 27px → 20〜22px
- Card Title 16px → 15px まで。**`letter-spacing: 0.12em` は維持する**
- Badge 13px → 12px。**`line-height: 1.0` と `padding: 8px` は維持する**
- **`line-height` の 3 段（1.75 / 1.8 / 1.0）はモバイルでも維持する**
- **`border-radius: 0` と影なしはモバイルでも維持する**

---

## 9. Agent Prompt Guide

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

```
Background:      #ffffff   （ページ地色。純白）
Surface:         #f4f4f4   （定義リストの面。唯一の面色）
Ink Brown:       #332200   （主色。文字・罫線・枠・SVG の fill すべて。純黒は使わない）
Sky:             #91d2e5   （唯一の差し色。線と文字だけ。面には塗らない）
Badge Gray:      #cccccc   （状態バッジの面 ＋ 同色 2px 枠）
Font:            YakuHanJPs_Noto, NotoSansJP, sans-serif
                 （約物半角サブセットを Noto の前に置く。順序が必須）
Body:            18px / weight 500 / lh 1.75 / ls normal / #332200
Weight:          500（本文・UI）と 700（バッジ・カードタイトル・アクションリンク）。
                 h1 36px と h2 27px だけ 400（大見出しほど細い）
Line Height:     1.75（18px 基準・大見出し・アクションリンク）/
                 1.8（16px・13px の読み物）/ 1.0（バッジ・カレンダー数字）
Letter Spacing:  5 段。役割で決める（サイズで決めない）
                 0.2em  … アクションリンク 26px/700、日付表示
                 0.12em … バッジ、カードタイトル、カード日付、項目ラベル
                 0.06em … 16px の読み物本文
                 0.03em … 13px の注記、20px/26px の見出し
                 normal … body(18px)、h1(36px)、h2(27px)
Feature:         font-feature-settings: normal（palt は使わない。約物はフォントで解決）
Radius:          全要素 0px（例外なし）
Shadow:          全要素 none（影は存在しない）
Border:          2px（バッジ）/ 3px（主要操作・記念ブロック）の 2 段
Container:       1128px（読み物 760px）
```

### プロンプト例

```
青森県立美術館のデザインシステムに従って、美術館の展覧会一覧ページを作成してください。
- フォントは YakuHanJPs_Noto, NotoSansJP, sans-serif。
  約物半角サブセットを Noto Sans JP の前に置く（この順序でないと約物が半角にならない）。
  游ゴシック・ヒラギノをフォールバックに並べない
- 主文字色は #332200（暖かい焦茶）。純黒 #000000 は一切使わない。
  本文・見出し・罫線・枠・アイコンの fill をすべてこの 1 色で統一する
- 有彩色は #91d2e5（淡い空色）1 色だけ。しかも面に塗らず、線と文字にだけ使う
- ページ地色は #ffffff。面色は定義リストの #f4f4f4 だけ。
  セクションごとに地色を変えず、余白の量だけで区切る
- border-radius は全要素 0px。box-shadow は使わない。
  奥行きは枠線の太さ（バッジ 2px / 主要操作 3px）だけで表す
- body は 18px / weight 500 / line-height 1.75 / letter-spacing normal
- letter-spacing はサイズではなく役割で決める：
  0.2em  … アクションリンク（26px / weight 700）と日付表示
  0.12em … バッジ、カードタイトル、カード日付、「会期」等の項目ラベル
  0.06em … 16px の読み物本文
  0.03em … 13px の注記、20px / 26px の見出し
  normal … body、h1(36px)、h2(27px)
  body には letter-spacing を置かない（継承させない）
- 大見出しほど weight を下げる。h1 36px と h2 27px は 400、
  カードタイトル 16px とバッジ 13px は 700
- 主ナビゲーションは面を持たないテキストリンクにする：
  26px / weight 700 / line-height 1.75 / letter-spacing 0.2em / 末尾に → をテキストで置く。
  この行は絶対に折り返させない
- バッジは 2 種類だけ：
  分類（企画展・コレクション展・ワークショップ）＝白地 ＋ 2px solid #332200
  状態（開催中・開催予定）＝面 #cccccc ＋ 2px solid #cccccc
  どちらも 13px / weight 700 / line-height 1.0 / letter-spacing 0.12em / padding 8px / radius 0
  カテゴリが増えても色を分けない（文字だけで区別する）
- カードは枠も影も付けない。地と同色の白のまま、
  サムネイルの矩形とテキストの塊だけでカードに見せる。
  バッジは必ず「分類（枠）→ 状態（塗り）」の順に左から並べる
- 主要な操作ブロックは白地 ＋ 3px solid #332200 / padding 4px 28px / radius 0 / 18px weight 500
- 入力欄のフォーカスは色を変えず、枠を 2px → 3px に太くして示す
- font-feature-settings は normal（palt は掛けない。約物はフォント側で解決する）
- 負の letter-spacing を使わない。字間は開く方向にだけ動かす
- コンテナ幅は 1128px、読み物カラムは 760px
```