# DESIGN.md — 角川武蔵野ミュージアム（Kadokawa Culture Museum）

> 角川武蔵野ミュージアム（https://kadcul.com/）のデザイン仕様書。
> 2020 年開館。隈研吾設計の巨大な花崗岩の塊の中に、図書館・美術館・博物館が同居する複合文化施設。
> 最大の特徴は **セクション見出しを `writing-mode: vertical-rl` の縦組みで組む**こと。「企画展／イベント／ライブラリー」「ニュース」「本棚劇場」が**縦に立ち、`letter-spacing: 0.2em` で開く**。**日本語サイトで縦組み見出しを主構造に据えた数少ない例**。
> 色は **墨 `#231815` と 山吹 `#ffcc00` の 2 色**。`#231815` は印刷業界の「スミ」（リッチブラック）で、**純黒より赤みのある温かい黒**。KADOKAWA という出版社の出自が色に出ている。
> **枠線はすべて `3px`**。1px の細い罫を使わず、**版画のような太い輪郭**で要素を囲む。
> **`box-shadow` は実測 0 件**。
> 実サイトの computed style 実測（2026-08-12 取得。トップ＋「イベント」ページ）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **白地に、墨の太い輪郭と縦組みの見出し**。装飾を持たず、**線の太さ（3px）と文字の向き（縦組み）だけ**で日本的な佇まいを作る
- **角川武蔵野ミュージアムについて**: 図書館・美術館・博物館が 1 棟に同居する「ミュージアム」。**扱うコンテンツの幅が極端に広い**（ラノベ・マンガ・現代アート・古典籍）ため、UI 側は徹底して中立に保ち、**展示のビジュアルに色を任せる**
- **密度**: 中〜高密度。トップは KV カルーセル → 重要なお知らせ（墨帯）→ トピックス（灰帯）→ 企画展／イベント／ライブラリー（クリーム地）→ フロアガイド の縦積み。**帯の色でセクションを切る**
- **キーワード**: 白地、墨 `#231815`、山吹 `#ffcc00`、縦組み見出し、`letter-spacing: 0.2em`、3px の枠線、影なし、Noto Sans JP
- **特徴**:
  - **セクション見出しが縦組み**（`writing-mode: vertical-rl`）。28px / weight 700 / **`letter-spacing: 5.6px = 0.2em`**。コンテンツ列の左に縦に立てる
  - **フロアガイドの小見出しも縦組み**（20px / weight 700 / **`letter-spacing: 4px = 0.2em`**）。「本棚劇場」「エディットタウン」「マンガ・ラノベ図書館」
  - **墨 `#231815` は純黒ではない**。rgb(35,24,21) の**赤みを帯びた黒**で、印刷の「スミ」に由来する。純黒 `#000000` は本文にしか使わない
  - **枠線はすべて `3px solid`**。ボタン・アウトライン・チケット CTA。**1px の罫を使わない**
  - **主 CTA は山吹 `#ffcc00` の pill ＋ 墨の 3px 枠**。ページ内で唯一の高彩度で、**「チケットを買う」だけがこの色**
  - **主 CTA 以外のボタンは `border-radius: 0`**。**pill は「チケット」専用の形**
  - **カテゴリバッジは矩形（radius 0）の小さな色面**。企画展＝紫 `#905ed3`、ライブラリー＝緑 `#4abf23`、イベント＝シアン `#38b9e1`、開催中＝墨、開催予定＝温灰 `#766965`
  - **`font-weight: 100`（Thin）が使われる**。「蔵書／収蔵品 検索」と日付表示。**日本語サイトで Thin を実運用する珍しい例**
  - **`box-shadow` は実測 0 件**。奥行きは帯の面色と 3px の枠だけ
  - **`palt` を掛けない**（`font-feature-settings: normal`）

---

## 2. Color Palette & Roles

> 実測値。地は純白 `#ffffff`（`pageBackground.resolved` = `rgb(255,255,255)` / 根拠 `body`）。**墨と山吹の 2 色が骨格**で、そこにカテゴリ識別用の高彩度が 4 色加わる。

### Brand（ブランド）

- **Sumi** (`#231815`, rgb 35,24,21): **主色**。テキスト、枠線、帯、バッジ、検索ボタンの面。**印刷の「スミ」に由来する赤みのある黒**。純黒 `#000000` より温かい
  > 出版社の色。CMYK のリッチブラックを RGB に落とした値で、KADOKAWA グループの紙媒体と地続きの色を Web 上でも使っている
- **Yamabuki** (`#ffcc00`, rgb 255,204,0): **唯一の高彩度アクセント**。「チケット購入はこちら」「チケット」の面。**この色は購買導線だけに使う**
- **Cream** (`#f7f3de`, rgb 247,243,222): 「企画展／イベント／ライブラリー」セクションの地。**紙の色**に寄せた温かい白
- **Black** (`#000000`): 本文テキストの色。**枠や面には使わない**（面は必ず `#231815`）

### Category（カテゴリ識別色）

- **Purple** (`#905ed3`, rgb 144,94,211): **企画展**バッジ
- **Green** (`#4abf23`, rgb 74,191,35): **ライブラリー**バッジ
- **Cyan** (`#38b9e1`, rgb 56,185,225): **イベント**バッジ
- **Warm Gray** (`#766965`, rgb 118,105,101): **開催予定**バッジ。**墨 `#231815` の彩度を落とした同系色**で、「まだ始まっていない」を弱さで示す
- **Sumi** (`#231815`): **開催中**バッジ。**現在進行中のものだけ主色を使う**

> **カテゴリの 3 色（紫・緑・シアン）は互いに補色関係を作らない配置**。彩度は高いが、いずれも 12px の小さなバッジにしか現れないため画面を支配しない。

### Neutral（面・罫）

- **Background** (`#ffffff`): ページ地色。純白
- **Surface** (`#e9e9e9`, rgb 233,233,233): トピックス帯、言語切替メニューの面
- **Ink Muted** (`#939393`, rgb 147,147,147): 写真クレジット（「写真：新津保建秀」）
- **Scrim** (`rgba(0,0,0,0.8)` ＋ **`repeating-linear-gradient(-45deg, rgba(0,0,0,0.2) 0 7.5px, transparent 0 15px)`**): モーダルのオーバーレイ。**単なる黒の半透明ではなく、45° のハッチングを重ねる**。このサイト固有の処理

### Semantic（意味的な色）

サイト上に明示的なエラー色・成功色は現れない。実装時は以下を目安にする。

- **Danger／Error**: `#c0392b` 目安。**山吹 `#ffcc00` と隣接させない**（購買導線と紛れる）
- **Warning**: **`#ffcc00` を流用しない**。山吹はチケット専用に温存し、警告には `#d98c00` 程度の一段沈んだ橙を当てる
- **Success**: `#4abf23`（既存の Green）を流用する
- **非活性**: 面 `#e9e9e9` ／ 文字 `#939393` ／ 枠 `3px solid #939393`

---

## 3. Typography Rules

> **縦組みの見出しと `letter-spacing: 0.2em`** がこのサイトの核。書体は Noto Sans JP 単独で、**ウェイトは 100 / 400 / 700 の 3 段**（Thin を実運用する）。

### 3.1 和文フォント

- **全要素共通**: **Noto Sans JP**（Google Fonts）。Adobe Fonts に依存しないため、**preview.html でも実サイトと同じ書体が出る**
- **ウェイト**: **100（Thin）/ 400（本文）/ 700（見出し・ボタン）** の 3 段
  - **100 は「蔵書／収蔵品 検索」と日付表示にだけ**当てる。**日本語で Thin を実用する珍しい設計**で、墨地の上に白い細字を置くコントラストが効いている
- **フォールバック**: `メイリオ` → `Meiryo` → `"ヒラギノ角ゴ ProN W3"` → `"Hiragino Kaku Gothic ProN"` → `游ゴシック` → `YuGothic` → `sans-serif`
- **メイリオを最優先のフォールバックに置く**（ヒラギノ・游ゴシックより先）。Windows 環境での可読性を最優先した順序
- **フォールバック側に Thin（100）を持つ書体が無い**。メイリオ・ヒラギノ・游ゴシックいずれも最軽量は Regular なので、**Noto Sans JP の 100 を必ず読み込む**こと。落ちると Thin の箇所が Regular になり印象が変わる

### 3.2 欧文フォント

- **欧文専用の書体を持たない**。「Kadokawa Culture Museum」もロゴ画像で、本文中の英数字は Noto Sans JP の字形で出る
- 例外はカルーセルの操作ボタン（Previous / Next / language）のみで、そこだけ `Arial` が当たる。**自社の設計には持ち込まない**
- 等幅フォントは使わない
- **preview.html での注記**: Noto Sans JP は Google Fonts から取得できるため、**代替フォントを立てる必要がない**。実サイトと同じ書体で確認できる（**ウェイト 100 / 400 / 700 の 3 つを読み込むこと**）

### 3.3 font-family 指定

```css
/* 全要素共通 */
font-family: "Noto Sans JP", メイリオ, Meiryo,
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             游ゴシック, YuGothic, sans-serif;

/* body の既定 */
font-size: 16px;
font-weight: 400;
line-height: 1.5;              /* 24px */
letter-spacing: 0.02em;        /* 0.32px */
color: #000000;
font-feature-settings: normal; /* palt は使わない */
```

**フォールバックの考え方**:
- **和文を先頭に置く**。欧文専用書体で先取りしない
- **メイリオをヒラギノより先に置く**。Windows 環境を優先した順序（ヌーラボと同じ方針だが、こちらはより徹底している）
- **要素ごとに `font-family` を切り替えない**。1 スタックで通す
- **Noto Sans JP の 100 / 400 / 700 の 3 ウェイトを必ず読み込む**。フォールバック側に Thin が無いため、100 が落ちると設計が崩れる

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

| Role | Size | Weight | Line Height | Letter Spacing | Writing Mode | 備考 |
|------|------|--------|-------------|----------------|--------------|------|
| Section Head (Vertical) | 28px | **700** | 1.5 (42px) | **0.2em (5.6px)** | **`vertical-rl`** | 「企画展／イベント／ライブラリー」「ニュース」 |
| Section Head | 28px | **700** | 1.5 (42px) | 0.011em (0.32px) | `horizontal-tb` | 「フロアガイド」「角川武蔵野ミュージアムを知る」 |
| Floor Head (Vertical) | 20px | **700** | 1.5 (30px) | **0.2em (4px)** | **`vertical-rl`** | 「本棚劇場」「エディットタウン」 |
| Article Head | 20px | **700** | 1.5 (30px) | 0.016em (0.32px) | `horizontal-tb` | 「館長通信 No.18」 |
| Body | 16px | 400 | **1.5 (24px)** | **0.02em (0.32px)** | `horizontal-tb` | `body` の基準 |
| Nav (Bold) | 16px | **700** | 1.5 (24px) | 0.02em (0.32px) | `horizontal-tb` | 「チケット」「営業カレンダー」 |
| Sub Head | 16px | **700** | 1.5 (24px) | 0.02em (0.32px) | `horizontal-tb` | 「トピックス」「館長挨拶」 |
| Nav (Mid) | 14px | **700** | 1.5 (21px) | 0.023em (0.32px) | `horizontal-tb` | 「企画展／イベント」（グローバルナビ） |
| Footer Nav | 14px | 400 | 1.5 (21px) | 0.023em (0.32px) | `horizontal-tb` | 「サイトマップ」 |
| Button (Outline) | 14px | **700** | 1.5 | 0.023em (0.32px) | `horizontal-tb` | 「くわしく見る」「特設ページはこちら」 |
| Util Nav | 12px | 400 | 1.5 (18px) | 0.027em (0.32px) | `horizontal-tb` | 「営業カレンダー」「本日の営業時間：」 |
| Ticket CTA | 12px | **700** | 1.5 (18px) | 0.027em (0.32px) | `horizontal-tb` | 「チケット購入はこちら」 |
| Button (Small) | 12px | **700** | 1.5 | 0.027em (0.32px) | `horizontal-tb` | 「続きを読む」「一覧へ」 |
| Search (Thin) | 12px | **100** | 1.5 (18px) | 0.027em (0.32px) | `horizontal-tb` | 「蔵書／収蔵品 検索」。**Thin** |
| Date (Thin) | 12px | **100** | 1.5 (18px) | 0.027em (0.32px) | `horizontal-tb` | 「2026/7/15」。**Thin** |
| Badge | 12px | 400 | 1.5 | 0.027em (0.32px) | `horizontal-tb` | 「企画展」「開催中」 |
| Credit | 10px | 400 | 1.5 (15px) | 0.032em (0.32px) | `horizontal-tb` | 「写真：新津保建秀」 |

- **`letter-spacing` は 2 系統**: 通常は **`0.32px` の px 固定**（16px で 0.02em）、**縦組み見出しだけ `0.2em`**（28px → 5.6px / 20px → 4px）
- **縦組みの `0.2em` は em 指定で、サイズが変わっても比率が保たれる**。横組みの `0.32px` とは指定方法自体が違う
- **`line-height` は全要素 1.5**。見出しも本文もバッジも同じ
- **ウェイトは 100 / 400 / 700 の 3 段**。**500 と 600 を使わない**
- **文字サイズは 28 / 20 / 16 / 14 / 12 / 10 の 6 段**。24px や 18px を作らない

### 3.5 行間・字間

- **本文の行間 (line-height)**: **1.5**（16px → 24px）。**全要素 1.5 で通す**
- **字間 (letter-spacing)**:
  - **横組み: `0.32px` の px 固定**（`body` から継承）。16px で 0.02em、28px で 0.011em、12px で 0.027em
  - **縦組みの見出し: `0.2em`**（28px → 5.6px / 20px → 4px）。**横組みの 10〜18 倍**に開く
- **縦組みだけ字間を極端に開く**のがこのサイトの手癖。**縦に並んだ文字を「一文字ずつ読ませる」ためのリズム**で、横組みの詰まった字間との対比が効いている
- **`palt` は使わない**（`font-feature-settings: normal`）

**ガイドライン**:
- **横組みの字間は `0.32px` の px 固定を `body` に置き、要素ごとに上書きしない**
- **縦組みの見出しには必ず `0.2em`** を当てる。px ではなく em で指定し、サイズが変わっても比率を保つ
- **横組みの文章に `0.2em` を当てない**。0.2em は縦組み見出し専用
- **行間 1.5 を全要素で守る**
- **ウェイトは 100 / 400 / 700 の 3 段だけ**。500 や 600 を挟まない
- **Thin（100）を当てるのは「墨地の上の白い細字」と「日付」だけ**。白地の上の黒文字に 100 を使わない（読めなくなる）

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

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

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

- **展覧会名は極端に長く、記号を含む**（「銀河鉄道999 THE GALAXY EXPERIENCE　あの旅は、まだ続いている。」）。**欧文の連なり（THE GALAXY EXPERIENCE）を内部で折らない**
- **「／」区切りの見出しは、スラッシュの後で折る**（「企画展／イベント／ライブラリー」→ 縦組みでは「企画展／イベント」「／ライブラリー」の 2 列）
- 「エディットタウン」「マンガ・ラノベ図書館」等のカタカナ語は、**中黒 `・` の前で折らない**
- 日付（`2026.07.14`）とタイトルは同じ行に置き、間で折らない
- **縦組みの見出しは折り返し位置を手動で決める**（`<br>` で明示）。自動折り返しに任せると列の高さが揃わない
- ボタンのラベル（「くわしく見る」「一覧へ」）は折り返さない（`white-space: nowrap`）

### 3.7 OpenType 機能

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

- **`palt` は使わない**。Noto Sans JP の等幅の字面をそのまま使う
- **縦組みでは特に `palt` を掛けない**。縦組みの `letter-spacing: 0.2em` は「開く」ための値で、`palt` の「詰める」方向と衝突する
- **和欧が同じ書体**なので `銀河鉄道999 THE GALAXY EXPERIENCE` のような混植でも字形が揃う
- 縦組みで英数字を扱う場合は `text-combine-upright` を使う（下記 3.8）

### 3.8 縦書き

**このサイトの設計の核**。セクション見出しとフロアガイドの小見出しが縦組みで、コンテンツ列の左に立つ。

```css
/* セクション見出し */
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: "Noto Sans JP", メイリオ, Meiryo,
             "ヒラギノ角ゴ ProN W3", 游ゴシック, sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.2em;   /* = 5.6px。縦組み専用の広い字間 */
color: #231815;

/* フロアガイドの小見出し */
font-size: 20px;
letter-spacing: 0.2em;   /* = 4px */
```

- **縦組み見出しは「コンテンツ列の左」に置く**。右ではなく左（`vertical-rl` の書字方向としては行が右から左に進むが、ブロック自体はレイアウトの左端に配置する）
- **`letter-spacing: 0.2em` は em 指定**。px で固定しない
- **複数行に割るときは `<br>` で明示**する（「企画展／イベント」「／ライブラリー」）。自動折り返しに任せると列の高さが揃わない
- 縦組み中の英数字・年号は **`text-combine-upright: all`** で 2 桁までを縦中横にする
- **本文は縦組みにしない**。縦組みは見出しだけの記号として温存する
- **バッジ・ボタンを縦組みブロックの中に入れない**（横長の要素が縦の行を割る）

---

## 4. Component Stylings

### Buttons

**Ticket CTA（山吹の pill）** — このサイトを象徴する形

- Background: **`#ffcc00`**（山吹）
- Text: **`#231815`**（墨）
- Border: **`3px solid #231815`**
- Padding: `0 16px`（ヘッダー内）／ `16px`（ナビ内）
- Border Radius: **`50px`** — **サイト内で pill はこれだけ**
- Font: 12〜16px / **weight 700** / lh 1.5 / ls 0.32px
- 例: 「チケット購入はこちら」「チケット」
- **購買導線だけがこの色・この形**。他の CTA に山吹や pill を使わない

**Filled Button（墨）**

- Background: **`#231815`**
- Text: `#ffffff`
- Border: **`3px solid #231815`**
- Padding: `6px 15px`
- Border Radius: **`0px`**
- Font: 14px / **weight 700**
- 例: 「特設ページはこちら」
- 検索ボタン（「蔵書／収蔵品 検索」）は同じ面色で **weight 100（Thin）/ 12px / padding `0 16px`**

**Outline Button（墨の 3px 枠）**

- Background: **`transparent`**
- Text: **`#231815`**
- Border: **`3px solid #231815`**
- Padding: `6px 20px`（小）／ `6px 15px`（中）
- Border Radius: **`0px`**
- Font: 12〜14px / **weight 700**
- 例: 「続きを読む」「一覧へ」「くわしく見る」「一覧」
- **左に `›` のシェブロンを置く**
- **枠は必ず 3px**。1px にしない

**Carousel Control**

- Background: `#231815`
- Border Radius: **`50%`**
- Padding: `1px 6px`
- 例: Previous / Next（KV カルーセル）

### Badges

**Category Badge（矩形の小さな色面）**

- Background: **`#905ed3`**（企画展）／ **`#4abf23`**（ライブラリー）／ **`#38b9e1`**（イベント）／ **`#231815`**（開催中）／ **`#766965`**（開催予定）
- Text: `#ffffff`
- Border: なし
- Padding: **`2px 5px`**（極端に小さい）
- Border Radius: **`0px`**
- Font: **12px / weight 400** / lh 1.5 / ls 0.32px
- **バッジは pill にしない**。pill はチケット専用の形
- **状態（開催中／開催予定）と分類（企画展／イベント／ライブラリー）を同じ形で並べる**。色だけで区別する
- **weight は 400**（ボタンの 700 と分ける）。バッジは「読ませる」ものであって「押させる」ものではない

### Bands（セクション帯）

**Important Band（重要なお知らせ）**

- Background: **`#231815`**（墨）
- Text: `#ffffff`
- 日付: **12px / weight 100（Thin）**
- 見出し: 16px / weight 400
- 右端に「一覧」のアウトラインボタン（**枠は `3px solid #ffffff`** に反転）
- **ページ最上部に置く全幅の帯**。白地との明度差で最優先の情報だと伝える

**Topics Band（トピックス）**

- Background: **`#e9e9e9`**
- Text: `#000000`
- 見出しラベル: 16px / weight 700 / `#231815`
- **墨帯のすぐ下に置く。濃 → 淡 の 2 段で優先度を示す**

**Content Band（企画展／イベント／ライブラリー）**

- Background: **`#f7f3de`**（クリーム）
- **左端に縦組みの見出し**（28px / weight 700 / ls 0.2em / `#231815`）
- 右にカードの横スクロール列

### Cards

- Background: `#ffffff`
- Border: なし
- Border Radius: **`0px`**
- Shadow: **なし**（実測 0 件）
- 構成: **サムネイル（展覧会ポスター）→ バッジ 2 つ（状態 ＋ 分類）→ タイトル（16px / weight 700）→ 期間・場所（12px）**
- **カードは矩形・影なし・枠なし**。展覧会ポスターの矩形がそのままカードの輪郭になる
- **ポスターに色を任せる**。カードの UI 側は色を持たない

### Modal Scrim（オーバーレイ）

このサイト固有の処理。**単なる黒の半透明ではない**。

```css
background-color: rgba(0, 0, 0, 0.8);
background-image: repeating-linear-gradient(
  -45deg,
  rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7.5px,
  rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px
);
```

- **`rgba(0,0,0,0.8)` の上に 45° のハッチング（7.5px の線 / 15px の周期）を重ねる**
- 版画やスクリーントーンを思わせる質感で、**「印刷物」としての出自を UI の質感に持ち込んでいる**
- **背景の写真が透けて見えつつ、ハッチングが均一なテクスチャを与える**

### Inputs

サイト上に独立した入力欄は現れない（検索は別ドメインの蔵書検索システムへ遷移する）。実装時は以下に揃える。

- Background: `#ffffff`
- Border: **`3px solid #231815`**（このサイトの枠は必ず 3px）
- Border (focus): `3px solid #ffcc00`（山吹）
- Border Radius: **`0px`**
- Padding: `10px 14px`
- Font: 16px / weight 400 / ls 0.32px
- Text Color: `#000000` / Placeholder: `#939393`

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 2px |
| S | 6px |
| M | 15px |
| L | 24px |
| XL | 48px |
| XXL | 80px |
| XXXL | 120px |

### Container

- Max Width: **1240px**（サイト全体の標準コンテナ）
- サブコンテナ: **1200px**
- 読み物カラム: **800px**
- Padding (horizontal): 24〜48px
- **KV カルーセルは全幅ブリード**（左右の隣スライドが見切れる）
- **帯（重要なお知らせ・トピックス）は全幅**、中身は 1240px に収める
- ヘッダーは全幅・白地・不透過。**2 段構成**（上段＝ユーティリティ ＋ チケット CTA、下段＝グローバルナビ）

### Grid

- Columns: 展覧会カードは **4 カラムの横スクロール列**、フロアガイドは 2 カラム、フッターは 4 カラム
- Gutter: 24px
- **セクションの区切りは帯の面色で作る**: 白 → 墨 `#231815` → `#e9e9e9` → 白 → クリーム `#f7f3de`
- **縦組み見出しはコンテンツ列の左に置き、幅 80〜120px の縦帯として確保する**
- カードの列は**横スクロール**（折り返さない）。左右に `‹ ›` のシェブロンを置く

---

## 6. Depth & Elevation

**実測の `box-shadow` は 0 件**。このサイトは影を一切使わない。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | **すべて**。白地・帯の面色・3px の枠だけで構成する |
| — | `rgba(0,0,0,0.8)` ＋ 45° ハッチング | モーダルのスクリム（影ではなくオーバーレイ） |

- 奥行きは **帯の面色（`#ffffff` → `#231815` → `#e9e9e9` → `#f7f3de`）と 3px の枠**だけで表現する
- **落ち影・浮き上がりを作らない**。カードもボタンも完全にフラット
- **「浮かせる」代わりに「囲む」**。3px の太い枠が影の役割を代替している
- モーダルのスクリムは**必ず 45° のハッチングとセット**で使う（`rgba(0,0,0,0.8)` 単独にしない）

---

## 7. Do's and Don'ts

### Do（推奨）

- **セクション見出しを `writing-mode: vertical-rl` の縦組みで組む**。28px / weight 700 / **`letter-spacing: 0.2em`**
- **縦組みの字間は em 指定（0.2em）**にする。px で固定しない
- **縦組みの折り返しは `<br>` で明示する**（自動折り返しに任せない）
- **墨は `#231815`（赤みのある黒）を使う**。純黒 `#000000` は本文テキストにだけ当て、面や枠には使わない
- **枠線はすべて `3px solid`** にする。1px の細い罫を使わない
- **山吹 `#ffcc00` はチケット購入導線だけ**に使い、`border-radius: 50px` の pill にする
- **チケット以外のボタンは `border-radius: 0`** にする。pill をチケット専用の形として温存する
- **カテゴリバッジは矩形（radius 0）・padding `2px 5px`・12px / weight 400**。状態と分類を同じ形で並べ、色だけで区別する
- **ウェイトは 100 / 400 / 700 の 3 段**で通す
- **Thin（100）は「墨地の上の白い細字」と「日付」だけ**に当てる
- **`line-height` は全要素 1.5**、横組みの `letter-spacing` は `0.32px` の px 固定を `body` に置く
- **セクションは帯の面色で切る**（白 → `#231815` → `#e9e9e9` → 白 → `#f7f3de`）
- **展覧会ポスターに色を任せ、カードの UI 側は色を持たない**
- **影を使わない**。奥行きは面色と 3px の枠で作る
- モーダルのスクリムは **`rgba(0,0,0,0.8)` ＋ 45° ハッチング**のセットで使う
- **Noto Sans JP の 100 / 400 / 700 を必ず読み込む**（フォールバックに Thin が無い）
- コンテナ幅は **1240px**、読み物カラムは **800px**

### Don't（禁止）

- **横組みの文章に `letter-spacing: 0.2em` を当てない**（0.2em は縦組み見出し専用）
- **本文を縦組みにしない**（縦組みは見出しの記号として温存する）
- **縦組みブロックの中にバッジやボタンを入れない**（横長の要素が縦の行を割る）
- **面や枠に純黒 `#000000` を使わない**（必ず墨 `#231815`）
- **枠線を 1px にしない**（すべて 3px）
- **チケット以外の CTA に山吹 `#ffcc00` を使わない**（Warning にも流用しない）
- **チケット以外のボタンを pill にしない**
- **バッジを pill にしない**（矩形 radius 0）
- **バッジの weight を 700 にしない**（バッジは 400、ボタンは 700 で役割を分ける）
- **ウェイト 500 / 600 を使わない**（100 / 400 / 700 の 3 段）
- **白地の上の黒文字に weight 100 を使わない**（読めなくなる。Thin は墨地の白抜きと日付だけ）
- **文字サイズに 24px / 18px を作らない**（28 / 20 / 16 / 14 / 12 / 10 の 6 段）
- **行間を要素ごとに変えない**（全要素 1.5）
- **`box-shadow` を作らない**（実測 0 件）
- **カードに枠や角丸を付けない**（ポスターの矩形がそのまま輪郭）
- **モーダルのスクリムをハッチングなしの単色にしない**
- `palt` を掛けない、字間を詰める方向に動かさない
- **カテゴリ色（紫・緑・シアン）を 12px のバッジより大きい面に広げない**

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。**縦組み見出しは横組みに切り替える**。ナビはドロワー、チケット CTA は固定表示で残す |
| Tablet | 768–1024px | 2 カラム。カードは 2 列の横スクロール |
| Desktop | > 1024px | 縦組み見出し ＋ 4 カラムの横スクロール列＋最大 1240px コンテナ |

### 縦組みのレスポンシブ

- **モバイルでは縦組みを解除する**（`writing-mode: horizontal-tb`）。縦帯の幅 80〜120px を確保できないため
- ただし**`letter-spacing: 0.2em` は横組みに切り替えても維持する**。見出しの手触りを残す
- タブレット（768px 以上）では縦組みを維持し、**幅を 60px に詰める**

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG 基準）。**チケット CTA は padding を `12px 24px` に広げて高さ 44px を確保する**（デスクトップの `0 16px` では足りない）
- アウトラインボタンは **padding `6px 20px` → モバイルで `12px 20px`** に広げる
- **バッジ（padding `2px 5px`）はタップ領域にしない**。表示専用
- カードは**カード全体をタップ領域**にする
- カルーセルのシェブロンは**当たり判定を 44px に広げる**（見た目は小さいまま）

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

- 本文 16px は据え置く（14px を下回らない）
- Section Head 28px → モバイルでは 20〜22px。**`letter-spacing: 0.2em` は維持する**（横組みに切り替えても）
- Floor Head 20px → 18px。**0.2em は維持**
- Article Head 20px → 18px
- ボタン 12〜14px は縮めない（タップ領域の高さが崩れる）
- **Thin（100）の 12px はモバイルでも 12px を維持する**。これ以上小さくすると Thin が判読できない
- **行間 1.5 と横組みの字間 0.32px はモバイルでも維持する**

---

## 9. Agent Prompt Guide

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

```
Background:      #ffffff   （純白）
Sumi:            #231815   （主色。印刷のスミ＝赤みのある黒。面・枠・帯・バッジ）
Yamabuki:        #ffcc00   （唯一の高彩度。チケット購入導線だけ）
Cream:           #f7f3de   （企画展セクションの地。紙の色）
Surface:         #e9e9e9   （トピックス帯・言語切替メニュー）
Black:           #000000   （本文テキストのみ。面や枠には使わない）
Ink Muted:       #939393   （写真クレジット・非活性）
Purple:          #905ed3   （企画展バッジ）
Green:           #4abf23   （ライブラリーバッジ・Success に流用）
Cyan:            #38b9e1   （イベントバッジ）
Warm Gray:       #766965   （開催予定バッジ。墨の彩度を落とした同系色）
Scrim:           rgba(0,0,0,0.8) ＋ repeating-linear-gradient(-45deg,
                 rgba(0,0,0,.2) 0 7.5px, transparent 0 15px)
Font:            "Noto Sans JP", メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3",
                 "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, sans-serif
Body:            16px / weight 400 / lh 1.5 / ls 0.02em (0.32px)
Weight:          100 / 400 / 700 の 3 段（500・600 は使わない）
                 100 は「墨地の上の白い細字」と日付だけ
Size:            28 / 20 / 16 / 14 / 12 / 10 の 6 段（24px・18px を作らない）
Line Height:     全要素 1.5
Letter Spacing:  横組み 0.32px（px 固定・body から継承）／
                 縦組み見出し 0.2em（em 指定）
Writing Mode:    セクション見出しとフロア小見出しは vertical-rl
Feature:         font-feature-settings: normal（palt を使わない）
Radius:          チケット CTA のみ pill 50px / カルーセル操作 50% /
                 それ以外はすべて 0
Border:          すべて 3px solid（1px の罫を使わない）
Shadow:          none（実測 0 件）
Container:       1240px（サブ 1200px、読み物 800px）
```

### プロンプト例

```
角川武蔵野ミュージアムのデザインシステムに従って、複合文化施設の展示一覧ページを作成してください。
- フォントは "Noto Sans JP", メイリオ, Meiryo, "ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, sans-serif の 1 スタックを全要素に当てる。
  Noto Sans JP の 100 / 400 / 700 の 3 ウェイトを必ず読み込む
- セクション見出しは writing-mode: vertical-rl の縦組みで組む。
  28px / weight 700 / line-height 1.5 / letter-spacing 0.2em（em 指定）/ 色 #231815。
  コンテンツ列の左に幅 80〜120px の縦帯として置き、折り返しは <br> で明示する
- 横組みの letter-spacing は 0.32px の px 固定を body に置いて全要素に継承させる。
  0.2em は縦組み見出し専用で、横組みの文章には当てない
- line-height は全要素 1.5。ウェイトは 100 / 400 / 700 の 3 段だけで、500・600 を使わない。
  weight 100（Thin）は墨地の上の白い細字と日付にだけ当てる
- 文字サイズは 28 / 20 / 16 / 14 / 12 / 10 の 6 段から選ぶ（24px・18px を作らない）
- 主色は墨 #231815（印刷のスミ＝赤みのある黒）。面・枠・帯・バッジはすべてこの色で、
  純黒 #000000 は本文テキストにだけ使う
- 枠線はすべて 3px solid にする。1px の細い罫を使わない
- チケット購入 CTA だけが山吹 #ffcc00：背景 #ffcc00 / 文字 #231815 /
  3px solid #231815 / border-radius 50px / 12〜16px weight 700。
  この色とこの pill は購買導線専用で、他の CTA や Warning に流用しない
- チケット以外のボタンは border-radius 0：
  塗り＝背景 #231815 / 白文字 / 3px solid #231815 / padding 6px 15px / 14px weight 700
  アウトライン＝transparent / 文字 #231815 / 3px solid #231815 /
  padding 6px 20px / 12〜14px weight 700、左に › のシェブロン
- カテゴリバッジは矩形（border-radius 0）・padding 2px 5px・12px weight 400・白文字。
  企画展 #905ed3 / ライブラリー #4abf23 / イベント #38b9e1 /
  開催中 #231815 / 開催予定 #766965。状態と分類を同じ形で並べ、色だけで区別する。
  バッジを pill にしない、weight を 700 にしない
- セクションは全幅の帯の面色で切る：白 → 墨 #231815 → #e9e9e9 → 白 → クリーム #f7f3de
- カードは矩形・枠なし・影なし。展覧会ポスターの矩形がそのまま輪郭になり、
  カードの UI 側は色を持たない（色はポスターに任せる）
- box-shadow は一切使わない。奥行きは帯の面色と 3px の枠だけで作る
- モーダルのスクリムは rgba(0,0,0,0.8) に
  repeating-linear-gradient(-45deg, rgba(0,0,0,.2) 0 7.5px, transparent 0 15px) を重ねる。
  単色の半透明にしない
- モバイル（≤767px）では縦組みを横組みに切り替えるが、letter-spacing 0.2em は維持する
- コンテナ幅は最大 1240px、読み物カラムは 800px
- font-feature-settings は normal（palt は掛けない）
```