# DESIGN.md — 大分県立美術館（OPAM）

> 大分県立美術館 / Oita Prefectural Art Museum（https://www.opam.jp/）のデザイン仕様書。
> 2015 年開館。坂茂の設計による、街に開かれた「出会いと五感のミュージアム」。
> 最大の特徴は、**すべてのボタン・バッジ・ステータスを pill（`border-radius: 100px`）で統一**すること。矩形のボタンが 1 つも存在しない。
> 色は **ティール `#027e73`（操作）と サンド `#dbcea5`（展覧会）の二軸**。**ティールは「押せるもの」、サンドは「展覧会というコンテンツ」**という役割分担が全ページで守られている。
> そして **`letter-spacing: 0.04em` と `font-weight: 500` が `body` に掛かる**。**本文が Regular ではなく Medium** で、地の文字がわずかに太い。
> 実サイトの computed style 実測（2026-08-12 取得。トップ＋「展覧会」ページ）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **明るいグレーの地に、丸い操作系**。すべての操作要素が pill で、角のある要素が存在しない。**「公共施設の情報の多さ」を、形の統一で整理している**
- **OPAM について**: 「出会いと五感のミュージアム」がコンセプト。**開館日カレンダー・展覧会・イベント・教育普及・カフェ・ショップ**と情報の種類が多く、それを**バッジの色で分類し、形（pill）で統一する**設計になっている
- **密度**: 高密度。トップは KV カルーセル → カレンダー（左に当日情報、右に月間カレンダー）→ 展覧会 → イベント → 施設 と続く。**1 画面に複数の情報種別が同時に並ぶ**ため、色による分類が効く
- **キーワード**: `#f6f6f6` の地、ティール `#027e73`、サンド `#dbcea5`、全 pill（radius 100px）、body weight 500、ls 0.04em、Noto Sans JP
- **特徴**:
  - **`border-radius: 100px` の pill が全操作要素の既定**。ボタン・バッジ・タブ・絞り込み・検索——すべて pill。**矩形のボタンが 1 つも存在しない**
  - **ステータスは `border-radius: 50%` の円**。「開催中」「開催予定」「開催終了」「申込不要」は**正円の中に文字を入れる**。pill（横長）と円（正円）を役割で分ける
  - **色の二軸**: **ティール `#027e73` = 押せるもの**（検索・絞り込み実行・アウトラインの枠）、**サンド `#dbcea5` = 展覧会というコンテンツ**（バッジ・当日情報ブロック）
  - **`body` に `font-weight: 500` が掛かる**。日本語サイトでは珍しく、**地の文字が Regular より一段太い**
  - **`letter-spacing: 0.04em` が `body` から全要素に継承される**。見出しも本文もバッジも同じ字間で、**例外は「本日開館」の 0.27em だけ**
  - **ページ背景は `#f6f6f6`**（純白ではない）。カードや情報ブロックを白で置くことで浮かせる
  - **`box-shadow` は 1 段だけ**（`rgba(0,0,0,0.16) 0 0 6px`）。**上下左右に均等な、方向を持たない影**
  - **`palt` を掛けない**（`font-feature-settings: normal`）

---

## 2. Color Palette & Roles

> 実測値。地は `#f6f6f6`（`pageBackground.resolved` = `rgb(246,246,246)` / 根拠 `viewportTopBySample`）。**ティール系（操作）とサンド系（コンテンツ）が明確に分離**しており、その 2 軸に補助色が加わる構成。

### Brand（ブランド）

- **Teal** (`#027e73`, rgb 2,126,115): **主色**。検索ボタン、「この条件で絞り込む」、アウトラインボタンの枠、「開館」バッジ、「開催中」ステータス円。**「押せるもの」の色**
- **Bright Teal** (`#1bbc9b`, rgb 27,188,155): 展覧会ページの月タブ（8月 / 9月 / 10月）の面。主色より明るく彩度が高い。**時間軸のナビゲーション専用**
- **Mint** (`#75cec6`, rgb 117,206,198): 「イベント」バッジの面。ティールの薄版
- **Pale Mint** (`#c7eae7`, rgb 199,234,231): 「開催予定」ステータス円の面。文字は **`#00675e`**（rgb 0,103,94）
- **Pale Green** (`#e7eee7`, rgb 231,238,231): 「印刷する」ボタンの面。**ほぼ無彩色に見える最も薄いティール**
- **Sand** (`#dbcea5`, rgb 219,206,165): **第 2 の主色**。「企画展」「コレクション展」「MAPO」「展覧会」バッジ、トップの当日情報ブロックの面。**「展覧会というコンテンツ」の色**
- **Gold** (`#c4aa5c`, rgb 196,170,92): サンドの濃版。区切り罫・強調
- **Apricot** (`#ecb576`, rgb 236,181,118): 「お知らせ」バッジの**枠線のみ**に使う（面は白）。**面を持たない唯一のバッジ色**
- **Navy** (`#374c9f`, rgb 55,76,159): 「申込不要」ステータス円の面。**ティール／サンドのどちらにも属さない情報**に当てる

### Calendar（カレンダー専用）

- **Sky** (`#c5d8f2`, rgb 197,216,242): **開館延長日（20 時まで）のセル**の面。カレンダー内でしか使わない
- **Pale Slate** (`#e2e5ec`, rgb 226,229,236): カレンダーの枠・区切り
- **Gray Legend** (`#d4d4d4`, rgb 212,212,212): 凡例ブロックの面、「カフェ」「ミュージアムショップ」バッジの面
- **Mid Gray** (`#757575`, rgb 117,117,117): 「開催終了」ステータス円の面（文字は白）

### Neutral（面・文字）

- **Background** (`#f6f6f6`, rgb 246,246,246): **ページ地色**。純白ではない
- **Surface** (`#ffffff`): カード・情報ブロック・アウトラインボタンの面。**地より明るいことで浮く**
- **Surface 2** (`#eef0ee`, rgb 238,240,238): フッター上部の面
- **Ink** (`#323131`, rgb 50,49,49): **主文字色**。純黒 `#000000` を使わない、わずかに赤みのある濃灰
- **Ink Muted** (`#5e606e`, rgb 94,96,110): 「検索条件をクリア」等の弱いラベル
- **Ink Form** (`#444746`, rgb 68,71,70): 入力欄の文字色
- **Border** (`#a3a3a3`, rgb 163,163,163): 「会期」等の弱い枠バッジ
- **Back to Top** (`#d5d6d5`, rgb 213,214,213): ページトップへボタンの面

### Semantic（意味的な色）

意味色はステータス円が担う。**エラー色は現れない**ため、実装時は以下を目安にする。

- **Danger／Error**: `#b3312a` 目安。**ティール `#027e73` と補色関係になるため彩度を落とす**
- **Warning**: `#c4aa5c`（既存の Gold）を流用する。新しい色を足さない
- **Success**: `#027e73`（既存の Teal）を流用する
- **非活性**: 面 `#d4d4d4` ／ 文字 `#757575`（「開催終了」と同じ扱い）

---

## 3. Typography Rules

> **`body` に `font-weight: 500` と `letter-spacing: 0.04em` が掛かる**のがこのサイトの核。地の文字が Medium で、字間が全要素に継承される。書体は Noto Sans JP 単独。

### 3.1 和文フォント

- **全要素共通**: **Noto Sans JP**（Google Fonts）。Adobe Fonts に依存しないため、**preview.html でも実サイトと同じ書体が出る**
- **ウェイト**: **500（本文・UI の既定）/ 700（見出し・ボタン）** の 2 段。**400 はフォーム入力欄と一部の枠バッジにしか現れない**
- **フォールバック**: `游ゴシック体` → `"Yu Gothic"` → `"ヒラギノ角ゴ ProN W3"` → `HiraKakuProN-W3` → `"ヒラギノ角ゴ Pro W3"` → `"Hiragino Kaku Gothic Pro"` → `sans-serif`
- **游ゴシックを先頭のフォールバックに置く**。ヒラギノは ProN / Pro の**両方を並べる**（環境差を吸収するための冗長な指定）
- **`font-weight: 500` を `body` に掛けているため、游ゴシックにフォールバックすると Medium が無い環境で Bold に飛ぶ**リスクがある。実装では **Noto Sans JP の 500 を必ず読み込む**こと

### 3.2 欧文フォント

- **欧文専用の書体を持たない**。「OPAM」「Oita Prefectural Art Museum」もロゴ画像で、本文中の英数字は Noto Sans JP の字形で出る
- 例外はカルーセルの閉じるアイコン（`×`）のみで、そこだけ `arial, sans-serif` が当たる。**自社の設計には持ち込まない**
- 等幅フォントは使わない
- **preview.html での注記**: Noto Sans JP は Google Fonts から取得できるため、**代替フォントを立てる必要がない**。実サイトと同じ書体で確認できる

### 3.3 font-family 指定

```css
/* 全要素共通 */
font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic",
             "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3,
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

/* body の既定 */
font-size: 16px;
font-weight: 500;              /* ← Regular ではなく Medium */
line-height: 1.5;              /* 24px */
letter-spacing: 0.04em;        /* 0.64px。全要素に継承される */
color: #323131;
font-feature-settings: normal; /* palt は使わない */
```

**フォールバックの考え方**:
- **和文を先頭に置く**。欧文専用書体で先取りしない
- **游ゴシックをヒラギノより先に置く**。Windows 環境を優先した順序
- **ヒラギノは ProN と Pro の両方**を並べる（`ProN` = JIS2004 字形、`Pro` = JIS90 字形。環境によってどちらかしか無いため）
- **`font-weight: 500` が全体に掛かることを前提にする**。Medium ウェイトを持たない書体にフォールバックすると Bold に合成されて太りすぎるため、**Noto Sans JP の 500 は必須**

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

| Role | Size | Weight | Line Height | Letter Spacing | Color | 備考 |
|------|------|--------|-------------|----------------|-------|------|
| Exhibition Title | 38px | **700** | 1.5 (57px) | 0.017em (0.64px) | `#323131` | 「ラブ! ヴァンガード!!」 |
| Open Status | 37px | **700** | 1.2 (44.4px) | **0.27em (10px)** | `#ffffff` | 「本日開館」。**唯一の極端な字間** |
| Page Title | 35px | **500** | 1.5 | 0.018em (0.64px) | `#323131` | 「展覧会」（h1） |
| Section Head | 28px | **700** | 1.5 (42px) | 0.023em (0.64px) | `#323131` | 「カレンダー」 |
| Facility Head | 28px | **500** | 1.5 (42px) | 0.023em (0.64px) | `#323131` | 「café Charité（カフェ シャリテ）」 |
| Nav Head | 24px | **700** | 1.5 (36px) | 0.027em (0.64px) | `#323131` | 「OPAM について」（メガメニュー） |
| Date | 22px | **700** | 1.5 (33px) | **0.09em (2px)** | `#323131` | 「2026年8月12日（水曜日）」 |
| Sub Head | 20px | **700** | 1.5 (30px) | 0.032em (0.64px) | `#323131` | 「トークセッション「東勝吉をめぐって」」 |
| Info | 20px | **500** | 1.5 (30px) | 0.032em (0.64px) | `#323131` | 「10時から19時まで（入場は閉館の30分前まで）」 |
| Nav | 19px | **500** | 1.5 (28.5px) | 0.034em (0.64px) | `#323131` | 「美術館コンセプト」 |
| Button (Primary) | 18px | **700** | 1.5 | 0.036em (0.64px) | `#ffffff` / `#323131` | 「この条件で絞り込む」「もっと見る」 |
| Nav (Mega) | 18px | **700** | 1.5 (27px) | 0.036em (0.64px) | `#323131` | メガメニューの項目 |
| Body | 16px | **500** | **1.5 (24px)** | **0.04em (0.64px)** | `#323131` | `body` の基準 |
| Badge | 16px | **500** | 1.5 (24px) | 0.04em (0.64px) | `#323131` | 「企画展」「イベント」 |
| Facility Badge | 20px | **500** | 1.5 (30px) | 0.032em (0.64px) | `#323131` | 「カフェ」「ミュージアムショップ」 |
| Header Util | 15px | **500** | 1.5 (22.5px) | 0.043em (0.64px) | `#ffffff` / `#323131` | 「検索」「本文へ」 |
| Small | 14px | **500** | 1.5 (21px) | 0.046em (0.64px) | `#323131` | 「閉じる」 |
| Frame Badge | 14px | **400** | 1.5 | 0.046em (0.64px) | `#323131` | 「会期」。**400 が現れる数少ない箇所** |
| Tag (New) | 12px | **700** | 1.5 | 0.053em (0.64px) | `#ffffff` | 「NEW」 |

- **`letter-spacing` は `0.64px` の px 固定**。`body` の 16px で 0.04em にあたり、**サイズが変わっても px 値が変わらない**ため、大きい文字ほど相対的な字間は詰まって見える
- **例外は 2 つだけ**: 「本日開館」の **10px（0.27em）** と、日付の **2px（0.09em）**
- **ウェイトは 500 と 700 の 2 段**。**400 は例外**（フォーム入力欄と「会期」枠バッジのみ）
- **`line-height` はほぼ全要素で 1.5**。見出しも本文もバッジも同じ。例外は「本日開館」の 1.2 のみ
- **見出しサイズは 38 / 35 / 28 / 24 / 22 / 20 / 19 / 18 の 8 段**と細かい。公共施設らしく情報階層が多い

### 3.5 行間・字間

- **本文の行間 (line-height)**: **1.5**（16px → 24px）。**見出しも 1.5 で、行間で階層を作らない**
- **例外**: 「本日開館」の 1.2 のみ（極端に字間を開くため行間を締める）
- **字間 (letter-spacing)**: **`0.64px` の px 固定を `body` から全要素に継承**
  - 16px で **0.04em**、28px で 0.023em、38px で 0.017em
  - **em ではなく px で固定しているため、文字が大きくなるほど字間の比率は下がる**。これは大見出しを塊として見せる効果を持つ
  - **例外**: 「本日開館」**10px（0.27em）**、日付「2026年8月12日（水曜日）」**2px（0.09em）**
- **`palt` は使わない**（`font-feature-settings: normal`）

**ガイドライン**:
- **`letter-spacing: 0.64px` を `body` に置き、個別要素で上書きしない**。これがサイト全体の統一感を作っている
- **字間を大きく開くのは「本日開館」のような 1 行のステータス表示だけ**。文章に 0.1em 以上を当てない
- **行間 1.5 を全要素で守る**。見出しだけ締める・本文だけ広げる、をしない
- **`font-weight: 500` を `body` に置く**。個別に 400 へ落とさない（フォーム入力欄は例外）
- 日付は **weight 700 ＋ ls 2px** のセットで作る（字間だけを真似しない）

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

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

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

- **展覧会名は長く、記号を含む**（「ラブ! ヴァンガード!! 前衛を愛した、あるコレクターの眼 ―草間彌生、ヘイター and more」）。**感嘆符の直後・ダッシュ `―` の直後で折らない**
- **施設名は「欧文（カタカナ）」の組**で書く（`café Charité（カフェ シャリテ）`）。**欧文と丸括弧の間で折らない**
- 日付（`2026年8月12日（水曜日）`）は**全体を 1 行に保つ**（`white-space: nowrap`）
- 時刻表記（`10時から19時まで`）は**数字と単位の間で折らない**
- バッジのラベル（「企画展」「コレクション展」「申込不要」）は折り返さない
- 「開館延長日（20時まで）」のような括弧つきの補足は、**括弧の前で折る**

### 3.7 OpenType 機能

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

- **`palt` は使わない**。Noto Sans JP の等幅の字面をそのまま使い、**`letter-spacing: 0.64px` で開く方向にのみ調整する**
- **`font-weight: 500` と `letter-spacing` の組み合わせが可読性を作っている**。`palt` で詰めると Medium の字面が密集して読みにくくなる
- **和欧が同じ書体**なので `café Charité（カフェ シャリテ）` のような混植でも字形が揃う
- カレンダーの日付は桁を揃えたいので、必要なら `font-feature-settings: "tnum"` を足す（現行サイトは未使用）

### 3.8 縦書き

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

```css
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: "Noto Sans JP", 游ゴシック体, "Yu Gothic",
             "ヒラギノ角ゴ ProN W3", sans-serif;
font-weight: 500;
letter-spacing: 0.04em;   /* 横組みと同じ字間を維持する */
line-height: 1.8;         /* 縦組みは横組みの 1.5 より広げる */
```

- 縦組み中の英数字・年号は `text-combine-upright: all` で 2 桁までを縦中横にする
- **pill のバッジは縦組みに入れない**（横長の形が縦組みの行を割る）。縦組みブロックの外に置く

---

## 4. Component Stylings

### Buttons

**Outline Pill（最も使用頻度の高い形）**

- Background: **`#ffffff`**
- Text: `#323131`
- Border: **`1px solid #027e73`**（ティール）
- Padding: **`10px 20px`**（幅広版は `10px 40px`）
- Border Radius: **`100px`**
- Font: 18px / **weight 700** / lh 1.5 / ls 0.64px
- 例: 「展覧会年間スケジュール」「もっと見る」「お知らせ一覧へ」「詳細を確認する」「検索条件をクリア」
- **枠だけがティール、文字は本文色**。**「押せる」ことを枠の色で示し、文字は読ませる**

**Filled Pill（決定操作）**

- Background: **`#027e73`**（ティール）
- Text: `#ffffff`
- Border: なし
- Padding: **`12px 40px`**
- Border Radius: **`100px`**
- Font: 18px / **weight 700** / lh 1.5
- 例: 「この条件で絞り込む」「検索」
- **面を塗るのは「実行する」操作だけ**。遷移は必ずアウトライン

**Soft Pill（副次操作）**

- Background: **`#e7eee7`**（ペールグリーン）
- Text: `#323131`
- Border: なし
- Padding: `12px 40px`
- Border Radius: **`100px`**
- Font: 18px / weight 700
- 例: 「印刷する」

**Tab Pill（絞り込みタブ）**

- Background: `#ffffff`（非選択）／ **`#dbcea5`**（選択中・展覧会）
- Text: `#323131`
- Border: **`1px solid #027e73`**（非選択）／ `1px solid #dbcea5`（選択中）
- Padding: **`5.4px 18px`**（`8px 16px` の版もある）
- Border Radius: **`100px`** / **`50px`**
- Font: 18px / weight 500（非選択）／ **700**（選択中）
- 例: 「開催中」「開催予定」「開催終了」／「展覧会」「貸館の展覧会」
- **選択中は面を塗り、weight を 500 → 700 に上げる**

**Search Pill（ヘッダー）**

- Background: **`#027e73`**
- Text: `#ffffff`
- Border Radius: **`20px`**（ヘッダー内は 20px、ページ内の検索は 100px）
- Padding: `10px`
- Font: 15px / weight 500

### Badges

**Category Pill（展覧会・イベント）** — このサイトを象徴する形

- Background: **`#dbcea5`**（企画展 / コレクション展 / MAPO / 展覧会）／ **`#75cec6`**（イベント）
- Text: `#323131`
- Border: **`1px solid` 面と同色**（面と同色の枠を置いて高さを安定させる）
- Padding: **`5px 16px`**
- Border Radius: **`100px`**
- Font: 16px / **weight 500** / lh 1.5 / ls 0.64px
- **展覧会系はサンド、イベント系はミント**。色でコンテンツの種類を分ける

**Outline Pill Badge（お知らせ）**

- Background: **`#ffffff`**
- Text: `#0a0a0a`
- Border: **`1px solid #ecb576`**（アプリコット）
- Padding: `5px 16px`
- Border Radius: **`100px`**
- Font: 12px / **weight 700**
- **面を持たない唯一のバッジ**。「お知らせ」だけ枠で表す

**NEW Tag**

- Background: **`#323131`**（本文色そのもの）
- Text: `#ffffff`
- Border: なし
- Padding: `5px 16px`
- Border Radius: **`100px`**
- Font: 12px / **weight 700**

**Facility Pill**

- Background: **`#d4d4d4`**
- Text: `#323131`
- Padding: **`8px 20px`**
- Border Radius: **`100px`**
- Font: 20px / weight 500
- 例: 「カフェ」「ミュージアムショップ」

**Frame Badge（会期）** — 唯一の矩形

- Background: `#ffffff`
- Text: `#323131`
- Border: **`1px solid #a3a3a3`**
- Padding: `5px 16px`
- Border Radius: **`0px`** — **サイト内で唯一の角ばった要素**
- Font: 14px / **weight 400**
- **「会期」「場所」等のラベル**にだけ使う。**操作要素ではないことを形で示す**

### Status Circles（ステータス円）

- Border Radius: **`50%`**（正円）
- Padding: `0`
- Font: 16px / weight 500 / `#ffffff`
- バリエーション:
  - **開催中 / 申込受付中**: 面 `#027e73` / 文字 `#ffffff`
  - **開催予定**: 面 `#c7eae7` / 文字 **`#00675e`**
  - **開催終了**: 面 `#757575` / 文字 `#ffffff`
  - **申込不要**: 面 `#374c9f` / 文字 `#ffffff`
- **pill（横長）と円（正円）を役割で分ける**。分類は pill、状態は円

### Inputs

**Search Input**

- Background: `#ffffff`
- Border: **なし**（`0px none`）
- Border Radius: **`25px`**
- Padding: `0 12px 0 0`
- Font: 16px / **weight 400** / Text Color: `#444746`
- **枠を持たず、pill の面だけで入力欄と分かる**

**Form Input**

- Background: **`#f6f6f6`**（ページ地色と同じ）
- Border: `1px solid #f6f6f6`
- Border (focus): `1px solid #027e73`（ティール）
- Border Radius: **`0px`**
- Padding: **`16px 24px`**
- Font: 16px / weight 400 / Text Color: `#323131`
- **面色を地色と同じにして、白いカードの上で凹んで見せる**

**Select（カレンダーの年月）**

- Background: `#ffffff`
- Border: `1px solid #027e73`
- Border Radius: **`31px`**
- Font: **30px / weight 700**（数字を大きく見せる）

### Cards

- Background: `#ffffff`（地の `#f6f6f6` より明るい）
- Border: なし
- Border Radius: `0px`（**カードは角丸にしない**。角丸は操作要素の記号）
- Shadow: `0 0 6px rgba(0,0,0,0.16)`
- 構成: サムネイル → カテゴリ pill → タイトル（20px / weight 700）→ 会期（枠バッジ ＋ 日付）
- **カードは矩形、中の操作要素は pill**。この対比が設計の骨格

### Today Block（当日情報）

- Background: **`#dbcea5`**（サンド）
- Border Radius: `0px`
- Padding: `32px 40px` 目安
- 構成: 日付（22px / weight 700 / **ls 2px**）→ 区切り罫 → 開館時間（20px / weight 500）
- **展覧会系の色をトップの当日情報にも当てる**。サンド＝「今日ここで見られるもの」

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 5px |
| S | 10px |
| M | 16px |
| L | 24px |
| XL | 40px |
| XXL | 64px |
| XXXL | 96px |

### Container

- Max Width: **1280px** 目安（サイトは `max-width: 100%` の流動レイアウトで、コンテナ幅を CSS 変数に持たない）
- 読み物カラム: **800px** 目安
- Padding (horizontal): 24〜80px
- **KV カルーセルは中央に寄せ、左右に余白を残す**（全幅ブリードにしない）
- ヘッダーは全幅・白地・不透過。KV に重ねない
- **「本日開館」のフローティングバッジは右下に固定**（`position: fixed`）

### Grid

- Columns: トップのカレンダーは **2 カラム（当日情報 / 月間カレンダー）**、展覧会一覧は **3 カラム**、施設紹介は 2 カラム
- Gutter: 24px
- **セクションの区切りは面色で作る**: 地 `#f6f6f6` の上に白いカードを置く。**セクションごとに地色を変えない**
- 絞り込み pill は**リストの上に横 1 列**で並べる
- カレンダーは **7 列の表組み**。開館延長日は `#c5d8f2`、休館日は空白で示す

---

## 6. Depth & Elevation

**実測の `box-shadow` は 1 段だけ**。方向を持たない均等な影で、カードをわずかに浮かせる。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | ボタン・バッジ・ステータス円・入力欄のすべて |
| 1 | **`0 0 6px rgba(0,0,0,0.16)`** | 展覧会カード、イベントカード、フローティングバッジ |

- **影に方向（オフセット）を持たせない**。`0 0 6px` で上下左右に均等に広げる。**「浮いている」ではなく「輪郭が柔らかい」表現**
- 奥行きは主に **地 `#f6f6f6` と面 `#ffffff` の 2 段**で表現する
- **ボタンに影を付けない**。pill は完全にフラット
- **バッジ・ステータス円にも影を付けない**

---

## 7. Do's and Don'ts

### Do（推奨）

- **すべての操作要素を pill（`border-radius: 100px`）にする**。ボタン・バッジ・タブ・絞り込みを形で統一する
- **ステータスは正円（`border-radius: 50%`）にする**。pill（分類）と円（状態）を役割で分ける
- **色を二軸で運用する**。ティール `#027e73` = 押せるもの、サンド `#dbcea5` = 展覧会というコンテンツ
- **遷移はアウトライン pill（白地 ＋ `1px solid #027e73`）、実行は塗り pill（面 `#027e73` ＋ 白文字）**
- **バッジの枠を面と同色で置く**（`1px solid` 面と同色）。高さを安定させる
- **`body` に `font-weight: 500`（Medium）を置く**。Regular にしない
- **`letter-spacing: 0.64px` を `body` に置き、全要素に継承させる**（px 固定）
- **`line-height` は全要素 1.5** で通す。行間で階層を作らない
- **ページ地色は `#f6f6f6`**、カードは `#ffffff`。**地より明るい面で浮かせる**
- **主文字色は `#323131`**（純黒を使わない）
- 「開催予定」の円は**面 `#c7eae7` ＋ 文字 `#00675e`** のセットで作る（薄い面には濃い同系色の文字）
- **影は `0 0 6px rgba(0,0,0,0.16)` の 1 段だけ**。オフセットを持たせない
- 日付は **weight 700 ＋ `letter-spacing: 2px`** のセットで作る
- カードは**矩形（radius 0）**、中の操作要素は pill。この対比を保つ
- **Noto Sans JP の 500 を必ず読み込む**（`body` の weight が 500 のため）

### Don't（禁止）

- **矩形のボタンを作らない**。操作要素は必ず pill（唯一の例外は「会期」枠バッジ）
- **カードを角丸にしない**。角丸は操作要素の記号として温存する
- **ティールとサンドの役割を入れ替えない**（ティール＝操作、サンド＝展覧会）
- **遷移ボタンの面を塗らない**（塗るのは「実行する」操作だけ）
- **`body` の `font-weight` を 400 にしない**（フォーム入力欄だけが例外）
- **`letter-spacing` を要素ごとに上書きしない**。`0.64px` の継承を壊さない
- **字間を 0.1em 以上に開くのは 1 行のステータス表示だけ**（「本日開館」）。文章には当てない
- **行間を要素ごとに変えない**（全要素 1.5）
- **ページ地を純白 `#ffffff` にしない**（`#f6f6f6` でないとカードが浮かない）
- **純黒 `#000000` を使わない**（主文字は `#323131`）
- **影にオフセットを付けない**（`0 2px 8px` のような方向を持つ影を作らない）
- **ボタン・バッジ・ステータス円に影を付けない**
- **新しい色を足さない**。Warning は既存の Gold `#c4aa5c`、Success は既存の Teal `#027e73` を流用する
- **`#c5d8f2`（スカイ）をカレンダーの外に持ち出さない**（開館延長日専用）
- `palt` を掛けない、字間を詰める方向に動かさない
- **游ゴシックへのフォールバックで weight 500 が Bold 合成されないよう、Noto Sans JP の読み込みを省略しない**

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。カレンダーは当日情報を上、月間カレンダーを下に。絞り込み pill は横スクロール |
| Tablet | 768–1024px | 2 カラム。展覧会一覧は 2 列 |
| Desktop | > 1024px | カレンダーは 2 カラム、展覧会一覧は 3 列 |

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG 基準）。アウトライン pill は **padding `10px 20px` ＋ 18px / lh 1.5 で高さ 47px** を確保する
- **絞り込みタブの `padding: 5.4px 18px` はモバイルで `10px 18px` に広げる**（既定のままでは高さが 40px を切る）
- ステータス円は**直径 44px 以上**にする（見た目が小さくても当たり判定を確保）
- カードは**カード全体をタップ領域**にする
- **カレンダーのセルは 44px × 44px 以上**。7 列が入らない場合は横スクロールさせる
- モバイルでは絞り込み pill の列を横スクロールさせ、**折り返して 2 行にしない**

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

- 本文 16px は据え置く（14px を下回らない）
- Exhibition Title 38px → モバイルでは 24〜26px。**weight 700 は維持する**
- 「本日開館」37px → 22〜24px。**`letter-spacing: 10px` は 6px 程度に落とす**（幅が収まらないため）
- Section Head 28px → 20〜22px
- Button 18px → 16px まで。**pill の高さ 44px は維持する**
- 日付 22px → 18px。**`letter-spacing: 2px` と weight 700 は維持する**
- **`letter-spacing: 0.64px` の全体継承と行間 1.5 はモバイルでも維持する**
- **`font-weight: 500` はモバイルでも維持する**

---

## 9. Agent Prompt Guide

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

```
Background:      #f6f6f6   （ページ地色。純白ではない）
Surface:         #ffffff   （カード・アウトライン pill の面。地より明るい）
Teal:            #027e73   （主色。押せるもの＝検索・実行・枠・開催中）
Bright Teal:     #1bbc9b   （月タブ専用）
Mint:            #75cec6   （イベントバッジ）
Pale Mint:       #c7eae7   （開催予定の円。文字は #00675e）
Pale Green:      #e7eee7   （印刷するボタン）
Sand:            #dbcea5   （第 2 の主色。展覧会バッジ・当日情報ブロック）
Gold:            #c4aa5c   （サンドの濃版。罫・Warning に流用）
Apricot:         #ecb576   （お知らせバッジの枠のみ。面は白）
Navy:            #374c9f   （申込不要の円）
Sky:             #c5d8f2   （開館延長日のカレンダーセル専用）
Gray Legend:     #d4d4d4   （凡例・施設バッジ）
Mid Gray:        #757575   （開催終了の円・非活性）
Ink:             #323131   （主文字色。純黒は使わない）
Ink Muted:       #5e606e   （弱いラベル）
Border:          #a3a3a3   （会期の枠バッジ）
Font:            "Noto Sans JP", 游ゴシック体, "Yu Gothic",
                 "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3,
                 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
Body:            16px / weight 500 / lh 1.5 / ls 0.04em (0.64px)
Weight:          500（本文・UI）と 700（見出し・ボタン）の 2 段。400 は例外
Line Height:     全要素 1.5（例外は「本日開館」の 1.2 のみ）
Letter Spacing:  0.64px を body に置いて全要素に継承（px 固定）
                 例外: 「本日開館」10px / 日付 2px
Feature:         font-feature-settings: normal（palt を使わない）
Radius:          操作要素は pill 100px / ステータスは円 50% /
                 検索窓 20〜25px / セレクト 31px / カードと会期バッジは 0
Shadow:          0 0 6px rgba(0,0,0,0.16) の 1 段のみ（オフセットなし）
Container:       1280px 目安（読み物 800px）
```

### プロンプト例

```
大分県立美術館（OPAM）のデザインシステムに従って、美術館の展覧会一覧ページを作成してください。
- フォントは "Noto Sans JP", 游ゴシック体, "Yu Gothic", "ヒラギノ角ゴ ProN W3",
  HiraKakuProN-W3, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif。
  ヒラギノは ProN と Pro の両方を並べる
- body に font-weight: 500（Medium）と letter-spacing: 0.64px を掛け、全要素に継承させる。
  Regular（400）に落とさない。字間は px 固定なので要素ごとに上書きしない
- line-height は全要素 1.5 で通す。見出しだけ締める・本文だけ広げる、をしない
- ウェイトは 500（本文・UI）と 700（見出し・ボタン）の 2 段だけ
- ページ地色は #f6f6f6、カードは #ffffff。地より明るい面でカードを浮かせる。
  主文字色は #323131 で、純黒 #000000 は使わない
- 色は二軸で運用する：ティール #027e73 = 押せるもの、サンド #dbcea5 = 展覧会というコンテンツ
- すべての操作要素を pill（border-radius: 100px）にする。矩形のボタンを作らない
  - 遷移ボタン：背景 #ffffff / 1px solid #027e73 / 文字 #323131 /
    padding 10px 20px / 18px weight 700
  - 実行ボタン：背景 #027e73 / 文字 #ffffff / 枠なし / padding 12px 40px / 18px weight 700
  - 絞り込みタブ：非選択は白地＋1px solid #027e73＋weight 500、
    選択中は面 #dbcea5＋weight 700
- カテゴリバッジも pill：展覧会系は面 #dbcea5、イベント系は面 #75cec6、
  文字 #323131 / padding 5px 16px / 16px weight 500 / 枠は面と同色の 1px solid
- 「お知らせ」バッジだけは面を持たず、白地＋1px solid #ecb576 で表す
- ステータスは正円（border-radius: 50%）にする。pill（分類）と円（状態）を形で分ける
  - 開催中：面 #027e73 / 白文字   開催予定：面 #c7eae7 / 文字 #00675e
  - 開催終了：面 #757575 / 白文字  申込不要：面 #374c9f / 白文字
- カードは矩形（border-radius: 0）にする。角丸は操作要素の記号として温存する。
  唯一の矩形バッジは「会期」（白地＋1px solid #a3a3a3＋14px weight 400）
- box-shadow は 0 0 6px rgba(0,0,0,0.16) の 1 段だけ。オフセットを付けない。
  ボタン・バッジ・ステータス円には影を付けない
- 日付は 22px / weight 700 / letter-spacing 2px のセットで作り、1 行に保つ
- 見出しサイズは 38 / 35 / 28 / 24 / 22 / 20 / 19 / 18 の階層から選ぶ
- 新しい色を足さない。Warning は #c4aa5c、Success は #027e73 を流用する
- コンテナ幅は 1280px 目安、読み物カラムは 800px
- font-feature-settings は normal（palt は掛けない）
```