# DESIGN.md — 瀬戸内国際芸術祭（Setouchi Triennale / ART SETOUCHI）

> 瀬戸内国際芸術祭（https://setouchi-artfest.jp/）のデザイン仕様書。
> 2010 年から 3 年ごとに開催される、瀬戸内海の島々を舞台にした国際芸術祭。総合ディレクターは北川フラム。**17 のエリアと 4 つの会期**を 1 サイトで案内する。
> **配色がそのまま瀬戸内海**。ファーストビューは空・島影・海の 3 層に塗り分けた図案で、その下の CSS の面色は `#cfe9f8`。UI の主色は `#0068b5`（濃い青）、面色は `#e2f1f7` / `#e9f2fc` と**すべて水色系**
> 最大の特徴は **見出しの字間**。セクション見出しは **`letter-spacing: 15.6px`（26px に対して 0.6em）**——文字の半分以上の空きを取る。日本語の見出しを**一文字ずつ島のように置く**組み方
> **会期を色で識別する**（全会期 `#323232` / 春 `#2f837b` / 夏 `#466ca6` / 秋 `#aa6255`）。**瀬戸内の四季をそのまま UI のラベル色にした**、この芸術祭固有の色分け
> 実サイトの computed style 実測（2026-08-15 取得。トップ ＋ 作品・イベント / 作家）に基づく。

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: **水色の階調だけで組む**。地は白、面は 3 段の水色（`#cfe9f8` / `#e2f1f7` / `#e9f2fc`）、主色は濃い青 `#0068b5`。**赤や黄は「会期」と「注目」の 2 か所にしか出さない**
- **瀬戸内国際芸術祭について**: 「海の復権」を掲げ、島々に作品を常設・期間展示する。**サイトの主機能は「どの島の、どの作品が、いつ見られるか」の案内**で、情報設計が会期と島の 2 軸で貫かれている
- **密度**: **中程度**。ファーストビューは図案化された瀬戸内海のイラストと最小限のナビだけ。以下は島・作品・ニュースのグリッドが続く
- **キーワード**: 瀬戸内ブルー `#0068b5`、空色 `#cfe9f8`、`letter-spacing: 0.6em` の見出し、会期 4 色、黄色の固定バナー、角丸ゼロ、明朝のロゴタイプ
- **特徴**:
  - **セクション見出しに `letter-spacing: 15.6px`（0.6em）**。「ART SETOUCHIとは」「瀬戸内海の島々と沿岸部の全17エリア」が、**一文字ずつ離れて並ぶ**
  - **島名は全角スペースで割る**（`直　島` `豊　島` `女木島`）。**2 文字の島名を 3 文字幅に開いて、3 文字の島名と列を揃える**——名簿組の伝統的な処理
  - **会期の 4 色**（全 `#323232` / 春 `#2f837b` / 夏 `#466ca6` / 秋 `#aa6255`）が**ラベルとして全ページに散る**。色が凡例そのものになっている
  - **本文の行間が 2.19**（16px → 35.04px）。**日本語サイトとしても相当広い**。島の情報を「読ませる」ための設定
  - **`border-radius` は原則 0px**。角丸になるのは**カテゴリチップ（30px のピル）だけ**
  - **影を 3 段持つ**。日本のサイトでは影を捨てる設計が多い中、**このサイトは `box-shadow` を役割別に 3 種類使い分ける**（バナー / カード / ボタン）
  - **ロゴタイプだけが明朝**（「瀬戸内国際芸術祭」＋ 欧文 `Setouchi Triennale`）。**本文・UI は Noto Sans JP の一択**
  - **右上に黄色 `#f5f57f` の固定バナー**。水色一色の中で、**黄色は「今すぐ確認すべき情報」にだけ使う**

---

## 2. Color Palette & Roles

> 実測値。地は `#ffffff`。ファーストビューの支配色は `#cfe9f8`（`pageBackground.viewportTopBySample` で最頻）。
> `html` / `body` ともに塗り指定を持たず、**面色はセクションごとに敷かれる**。

### Brand（ブランド）

- **Setouchi Blue** (`#0068b5`, rgb 0,104,181): **主色**。ボタンの文字、MENU の文字、ステータスラベル「募集中」の面、カテゴリチップの枠、ページトップボタン。**押せるもの・現在地はすべてこの青**
- **Sky** (`#cfe9f8`, rgb 207,233,248): **ファーストビューの面色**（CSS 側）。MENU ボタンの面。**ページを開いた瞬間に見える色**

**KV の図案の色**（画像／SVG の実測ピクセル。CSS トークンではない）:

| 層 | 色 | 備考 |
|----|-----|------|
| 空 | **`#32a7c7`** | 上半分。彩度の高いシアン |
| 島影 | **`#4091a4`** | 空より暗く沈めた島のシルエット |
| 海 | **`#99c6e2`** | 下半分。**空より淡くする**（遠景の海を明るく置く） |

- **図案は「空 → 島影 → 海」の 3 層を面で塗り分けるだけ**。グラデーションもテクスチャも使わない
- **CSS のトークン（`#cfe9f8` 等）と図案の色は別系統**。図案の色をボタンやラベルに転用しない
- **Sea Light** (`#e2f1f7`, rgb 226,241,247): PICK UP カードの面
- **Sea Pale** (`#e9f2fc`, rgb 233,242,252): フッターの面
- **Deep Sea** (`#227ea5`, rgb 34,126,165): 「アーカイブ」等の大きな導線ブロックの面
- **Mid Sea** (`#2e7c9e`, rgb 46,124,158): PICK UP の見出し文字、注記の強調
- **Slate Sea** (`#3a7b98`, rgb 58,123,152): ステータスラベル「申込不要」の面

### Season（会期の 4 色）— このサイト固有

| 会期 | 色 | rgb | 用途 |
|------|-----|-----|------|
| **全会期** | **`#323232`** | 50,50,50 | 通年公開のエリア・作品 |
| **春会期** | **`#2f837b`** | 47,131,123 | 春（新緑の緑青） |
| **夏会期** | **`#466ca6`** | 70,108,166 | 夏（藍） |
| **秋会期** | **`#aa6255`** | 170,98,85 | 秋（枯れた赤茶） |

- **4 色とも彩度を落としてある**。原色を使わず、**瀬戸内の風景の色に寄せている**
- **ラベルは角丸ゼロの矩形**。白文字 14px / weight 500 / `letter-spacing: 0.7px`

### Accent（注目）

- **Highlight Yellow** (`#f5f57f`, rgb 245,245,127): **右上の固定バナー「作品公開スケジュール」**。**サイトで唯一の暖色の面**。文字は `#323232`（黒文字を乗せる）

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

- **Ink** (`#323232`, rgb 50,50,50): **既定の文字色**。見出し・本文・ナビ。**純黒ではない**
- **Muted** (`#6d7682`, rgb 109,118,130): 日付、ステータスラベル「申込開始前」の面
- **Background** (`#ffffff`): ページ地色
- **Surface**: 白のカード（島名ラベルの帯など）

### Semantic（意味的な色）

- **Danger／Error**: **`#aa6255`（秋会期の色）を流用する**。新しい赤を持ち込まない
- **Warning**: `#f5f57f`（Highlight Yellow）＋ 文字 `#323232`
- **Success**: `#2f837b`（春会期の色）を流用する
- **Info**: `#0068b5`（Setouchi Blue）
- **非活性**: 面 `#6d7682` ／ 文字 `#ffffff`

---

## 3. Typography Rules

> **Noto Sans JP 一択**と、**見出しの極端な字間（最大 0.6em）**、**行間 2.19** の 3 点がこのサイトの核。

### 3.1 和文フォント

- **全要素**: **`"Noto Sans JP", sans-serif`**
  - **和文・欧文とも Noto Sans JP で組む**。欧文専用のフォントを持たない
  - **フォールバックは `sans-serif` のみ**。ヒラギノ・游ゴシック・メイリオを列挙しない。**Web フォントの読み込みに全面的に依存する**設計
  - **ロゴタイプ（「瀬戸内国際芸術祭」/ `Setouchi Triennale`）は画像**。明朝のレタリングで、Web フォント化されていない
- **ウェイト**: **400 / 500 / 700 の 3 段**
  - **500 が主役**。見出し・ラベル・本文の多くが 500 で組まれる
  - **700 は「タイトル」だけ**（記事タイトル・島名・ナビ・ボタン）
  - **400 は器（body / li のラッパー）に残る既定値**で、実際に読ませる文字にはほとんど出ない

### 3.2 欧文フォント

- **欧文専用フォントを持たない**。`ART SETOUCHI` `PICK UP` `MENU` `NEW` もすべて Noto Sans JP
- **欧文の見出しは大文字 ＋ 大きな字間**で作る（`PICK UP` = 25px / 700 / `letter-spacing: 5px` = 0.2em）
- **和欧混植の調整をしていない**。**Noto Sans JP は欧文グリフも持つため、混植でベースラインが揃う**——このサイトが 1 書体で済ませられる理由

### 3.3 font-family 指定

```css
/* body */
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323232;
letter-spacing: normal;          /* body 自体は開かない */
font-feature-settings: normal;   /* palt を使わない */

/* 本文ブロック */
font-size: 16px;
font-weight: 500;
line-height: 35.04px;            /* 2.19 */
letter-spacing: 0.8px;           /* 0.05em */
```

- **`font-feature-settings` は全要素 `normal`**。**`palt` も `chws` も使わない**
- **字間は要素ごとに px で指定する**（`0.7px` / `0.8px` / `1.25px` / `1.6px` / `5px` / `15.6px`）。**すべて「フォントサイズ × 0.05em」の倍数**になっている（0.05 / 0.05 / 0.05 / 0.1 / 0.2 / 0.6em）

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

| Role | Size | Weight | Line Height | Letter Spacing | Color | 備考 |
|------|------|--------|-------------|----------------|-------|------|
| **Section Head（大）** | **26px** | **500** | 1.65 (42.9px) | **15.6px (0.6em)** | `#323232` / `#ffffff` | 「ART SETOUCHIとは」「瀬戸内海の島々と沿岸部の全17エリア」。**サイト最大の字間** |
| **Section Head（英字）** | **25px** | **700** | 1.72 (43px) | **5px (0.2em)** | `#323232` | 「PICK UP」 |
| Section Head（和文） | 25px | **500** | 1.72 (43px) | **1.25px (0.05em)** | `#323232` | 「新着情報」。**同じ 25px でも和文は字間を 0.05em に落とす** |
| **島名ラベル** | **22px** | **700** | 1.0 | normal | `#323232` | 「直　島」。**全角スペースで文字を割る**。面は白 |
| PICK UP Text | 22px | 700 | 1.45 (31.9px) | normal | `#2e7c9e` | 「島・会場ごとの注意事項」 |
| Banner Text | 18px | 700 | 1.5 (27px) | normal | `#ffffff` | 告知バナー本文（面は `#0068b5`） |
| Article Title | 18px | 700 | 1.667 (30px) | 0.9px (0.05em) | `#323232` | 記事見出し |
| **Body** | **16px** | **500** | **2.19 (35.04px)** | **0.8px (0.05em)** | `#323232` / `#ffffff` | 本文。**行間 2.19** |
| Nav / Button | 16px | **700** | 1.5 (24px) | 0.8px (0.05em) | `#323232` | 「島・会場」「作品・イベント / 作家」 |
| Button (Primary) | 16px | **700** | 1.4 (22.4px) | **1.6px (0.1em)** | `#0068b5` | 「新着情報一覧」。**ボタンだけ字間 0.1em** |
| List Title | 16px | 700 | 1.44 (23.11px) | 0.8px (0.05em) | `#323232` | 一覧の記事タイトル |
| **会期ラベル** | **14px** | **500** | 1.0 | 0.7px (0.05em) | `#ffffff` | 「春会期」「夏会期」。面は会期の 4 色 |
| Fixed Banner | 14px | **700** | 1.0 | 0.7px (0.05em) | `#323232` | 「作品公開スケジュール」（面 `#f5f57f`） |
| List Item | 14px | 500 | **1.86 (26.04px)** | 0.7px (0.05em) | `#323232` | エリア一覧の島名 |
| Category Chip | 13px | 500 | 1.0 | normal | `#323232` | 「映画」。白地 ＋ 1px `#0068b5` のピル |
| Date | 13px | 500 | 1.0 | normal | `#6d7682` | 「2026年08月06日」 |
| Status Label | 12px | 500 | 1.0 | normal | `#ffffff` | 「募集中」「申込不要」「申込開始前」 |
| MENU / Caption | 12px | 500 | 1.0 | normal | `#0068b5` / `#2e7c9e` | 「MENU」「（瀬戸内国際芸術祭サポーター）」 |

- **weight 500 が基準、700 がタイトル**。**400 は器にしか残らない**
- **同じ 25px でも、英字は 0.2em、和文は 0.05em** と字間を変える。**大文字の欧文だけを大きく開く**
- **行間は用途で 4 段**: 1.0（ラベル）/ 1.4〜1.5（ボタン・ナビ）/ 1.65〜1.86（見出し・一覧）/ **2.19（本文）**

### 3.5 行間・字間

- **本文の行間 (line-height)**: **2.19**（16px → 35.04px）。**日本語サイトの中でも広い部類**
  - エリア一覧（14px）は **1.86**、記事タイトル（18px）は **1.667**
  - **ラベルは 1.0**（面の `padding` で高さを作る）
- **字間 (letter-spacing)**: **`0.05em` を基準に、用途で 0.1em / 0.2em / 0.6em へ拡大する**

| 用途 | px | em | 例 |
|------|-----|-----|-----|
| 本文・ナビ・記事タイトル | 0.7〜0.9px | **0.05em** | 全般の既定 |
| **ボタン** | 1.6px | **0.1em** | 「新着情報一覧」 |
| **英字の見出し** | 5px | **0.2em** | 「PICK UP」 |
| **セクション見出し（和文）** | **15.6px** | **0.6em** | 「ART SETOUCHIとは」 |
| ラベル・チップ・日付 | — | **normal** | 会期ラベル以外の小さい文字 |

**ガイドライン**:
- **0.05em を既定にする**。日本語本文で最も自然に効く量
- **セクション見出しの 0.6em は「島を並べる」ための記号**。**本文・カード・ボタンに持ち込まない**
- **0.6em を当てるときは行間も 1.65 以上取る**。字間だけ開くと行が団子になる
- **0.6em の見出しは中央寄せにする**。**左寄せだと最後の 1 文字の右にだけ空きが残って行末が揃わない**（`letter-spacing` は文字の後ろに空きを付けるため）
- **ラベル・チップは `normal`**。小さい面の中で字間を開くと窮屈になる
- **`palt` を使わない**。字間は `letter-spacing` だけで作る

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

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

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

- **島名の全角スペースを消さない**（`直　島` `豊　島` `男　木　島`）。**全角スペースは字間調整であって区切りではない**ので、`trim` や正規化で潰さない
- **島名は絶対に折り返さない**（`white-space: nowrap`）
- **会期名（「春会期」「秋会期」）は 1 行**に保つ
- **`作品・イベント / 作家` のスラッシュ前後の半角スペースを保つ**。ナビのラベルはこの形で 1 単位
- 日付（`2026年08月06日`）は**年月日の途中で折らない**
- **`letter-spacing: 0.6em` の見出しは `<br>` で改行位置を決める**。自動折り返しに任せると、行末の空きが不揃いになる
- エリア名 ＋ 会期ラベルの組は**縦積み**にする。横に並べて折り返さない

### 3.7 OpenType 機能

```css
font-feature-settings: normal;   /* 全要素。palt / chws を使わない */
```

- **このサイトは OpenType 機能を一切使わない**。約物の詰めは**しない**
- **代わりに `letter-spacing` を px で細かく指定する**。「詰めてから開く」ではなく「**開くだけ**」の設計
- **`palt` を足すと `letter-spacing: 0.6em` の見出しが崩れる**（約物が詰まった上に 0.6em が乗ると、記号の前後だけ空きが変わる）。**この字間設計と `palt` は両立しない**
- 実装で約物を詰めたい場合は、**見出しではなく本文ブロック（16px / 0.05em）にだけ `palt` を当てる**

### 3.8 縦書き

**このサイトは縦組みを使わない**。ロゴタイプも含めてすべて横組み。

- **縦組みが必要になった場合**（作品キャプション・展示解説など）は以下を目安にする:

```css
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 2.2;              /* 横組みの 2.19 をそのまま列間として使える */
letter-spacing: 0.8px;         /* 0.05em を維持する */
```

- **縦組みでも書体は Noto Sans JP のまま**。明朝に切り替えない（ロゴ以外に明朝を持ち込まない）
- **`letter-spacing: 0.6em` を縦組みに持ち込まない**。縦に 0.6em を当てると 1 列の文字数が半減する
- 縦中横は 2 桁まで（`text-combine-upright: all`）。会期の年号（`2026`）は 4 桁なので**縦中横にしない**

---

## 4. Component Stylings

### Buttons

**Primary Button（白地 ＋ 影）— 一覧への遷移**

- Background: **`#ffffff`**
- Text: **`#0068b5`**
- Border: **なし**
- Padding: **`17px 40px`**
- Border Radius: **`0px`**
- Shadow: **`0 0 6px 0 rgba(61, 77, 84, 0.28)`** — **枠の代わりに影で輪郭を作る**
- Font: **16px / weight 700 / lh 1.4 / `letter-spacing: 1.6px`（0.1em）**
- 例: 「新着情報一覧」
- **塗りではなく「白地 ＋ 青文字 ＋ 影」**。ボタンだけ字間を 0.1em に開く

**Block Link（面の大きい導線）**

- Background: **`#227ea5`**（濃い海色）／ Text: `#ffffff`
- Padding: **`39px 80px`** ／ Border Radius: **`0px`** ／ Shadow: なし
- Font: 16px / weight 400
- 例: 「アーカイブ／これまでの歩み・活動報告」
- **セクション級の大きい導線だけ塗りにする**

**Fixed Banner（右上固定）**

- Background: **`#f5f57f`**（唯一の暖色）／ Text: `#323232`
- Border Radius: **`0px`** ／ Shadow: **`0 3px 6px 0 rgba(0, 0, 0, 0.16)`**
- Font: **14px / weight 700 / `letter-spacing: 0.7px`**
- 例: 「作品公開スケジュール」
- **ヘッダーの右端に貼り付き、スクロールしても残る**

**MENU Button**

- Background: **`#cfe9f8`**（空色）／ Text: **`#0068b5`**
- Padding: `13px 0 0` ／ Border Radius: `0px`
- Font: 12px / weight 500
- **3 本線 ＋ 下に `MENU` の文字**。**面を空色にして、ページの一部として溶かす**

### Labels（会期・ステータス）

**会期ラベル**

- Background: **会期の 4 色**（`#323232` / `#2f837b` / `#466ca6` / `#aa6255`）
- Text: `#ffffff` ／ Padding: **`6px 0`**（幅は親に対して 100%）
- Border Radius: **`0px`** ／ Font: **14px / weight 500 / `letter-spacing: 0.7px`**
- **エリアカードの上端に帯として乗る**。角丸を付けない

**ステータスラベル**

| ラベル | 面 | 文字 |
|--------|-----|------|
| 募集中 | `#0068b5` | `#ffffff` |
| 申込不要 | `#3a7b98` | `#ffffff` |
| 申込開始前 | `#6d7682` | `#ffffff` |

- Border Radius: **`0px`** ／ Font: 12px / weight 500 / ls normal

**Category Chip（唯一の角丸）**

- Background: **`#ffffff`**
- Text: `#323232`
- Border: **`1px solid #0068b5`**
- Padding: **`4px 9px`**
- Border Radius: **`30px`** — **サイトで唯一のピル**
- Font: 13px / weight 500 / ls normal
- 例: 「映画」「パフォーマンス」
- **矩形のラベル（会期・ステータス）とピルのチップ（カテゴリ）を形で区別する**

### Cards

**PICK UP カード**

- Background: **`#e2f1f7`**（水色）
- Border Radius: **`0px`** ／ Padding: `30px 0 0`
- Shadow: **`0 3px 6px 0 rgba(33, 56, 121, 0.16)`** — **影の色に青（33,56,121）を混ぜる**。灰色の影を使わない
- 見出し: **22px / 700 / `#2e7c9e`**

**島カード**

- 画像の上に**白い帯**を重ね、その中に島名（22px / 700 / 全角スペース割り）を置く
- Border Radius: `0px` ／ 帯の Padding: `10px 0`

**記事カード**

- Background: `#ffffff` ／ 区切り: 1px の横罫
- 構成: 日付（13px / `#6d7682`）→ タイトル（16〜18px / **700**）→ `NEW` バッジ

### Inputs

実サイトに公開フォームが少ないため、**このサイトの原則（角丸ゼロ / 青の主色 / 影で輪郭）から導くと以下**。

- Background: `#ffffff`
- Border: **`1px solid #6d7682`**
- Border (focus): **`1px solid #0068b5`** ＋ **`0 0 6px 0 rgba(61,77,84,0.28)`**（ボタンと同じ影）
- Border Radius: **`0px`**（**チップ以外に角丸を使わない**）
- Padding: `12px 16px` ／ Font: 16px / weight 500 / `letter-spacing: 0.8px`
- Text Color: `#323232` ／ Placeholder: `#6d7682`
- Error: `1px solid #aa6255`（秋会期の色を流用）

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| XS | 6px |
| S | 10px |
| M | 17px |
| L | 30px |
| XL | 40px |
| XXL | 80px |

- **ボタンの `padding: 17px 40px`、ブロックリンクの `39px 80px`** と、**縦:横 ≒ 1:2.3** の比率が共通する

### Container

- Max Width: 1200px 目安
- ヘッダー: **全幅・白**。右端に黄色の固定バナーと MENU ボタンが**高さいっぱいで貼り付く**
- **ファーストビューは全幅ブリード**。空 → 海のグラデーションに島影と航路を図案で置く
- フッター: 面 `#e9f2fc`

### Grid

- 島・エリア一覧: **3〜4 カラム**（画像 ＋ 白帯の島名 ＋ 会期ラベル）
- 記事一覧: 1 カラム（横罫で区切る）
- PICK UP: **カルーセル**（Swiper）。カードは `#e2f1f7` の面
- Gutter: 30px 目安
- **セクションの区切りは面色**。罫線ではなく `#e2f1f7` / `#e9f2fc` の帯でセクションを分ける

---

## 6. Depth & Elevation

**このサイトは影を 3 段持つ**。日本のサイトでは影を捨てる設計が多い中、**役割別に使い分けている**点が特徴。

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | ラベル・チップ・ブロックリンク・フッター |
| 1 | **`0 3px 6px 0 rgba(0, 0, 0, 0.16)`** | **固定バナー（黄）**。ページの上に貼り付く要素 |
| 2 | **`0 3px 6px 0 rgba(33, 56, 121, 0.16)`** | **PICK UP カード**。**影に青を混ぜる**（灰色ではない） |
| 3 | **`0 0 6px 0 rgba(61, 77, 84, 0.28)`** | **プライマリボタン**。**オフセット 0 の全方向の影**で、枠の代わりに輪郭を作る |

- **カードの影には青（`rgb(33,56,121)`）を混ぜる**。水色の面の上で灰色の影は濁るため
- **ボタンの影はオフセット 0**（`0 0 6px`）。**下に落とすのではなく、全周に淡く滲ませて縁取りにする**
- **面色の 5 段**も併用する:

| 面 | 色 | 用途 |
|----|-----|------|
| 地 | `#ffffff` | ページ全体・記事カード |
| 空 | `#cfe9f8` | ファーストビュー・MENU ボタン |
| 海（淡） | `#e2f1f7` | PICK UP カード |
| 海（極淡） | `#e9f2fc` | フッター |
| 海（濃） | `#227ea5` | 大きな導線ブロック |

---

## 7. Do's and Don'ts

### Do（推奨）

- **書体は `"Noto Sans JP", sans-serif` の 1 本**にする。和欧とも同じ書体で組む
- **weight は 500 を基準に、タイトルだけ 700** にする
- **字間は 0.05em を既定**にし、**ボタン 0.1em / 英字見出し 0.2em / セクション見出し 0.6em** と用途で拡大する
- **セクション見出しの `letter-spacing: 0.6em` は中央寄せ ＋ `line-height: 1.65` 以上**とセットで使う
- **本文の `line-height` は 2.19**（16px → 35.04px）を守る
- **島名は全角スペースで割る**（`直　島`）。全角スペースを正規化で消さない
- **会期を色で識別する**（全 `#323232` / 春 `#2f837b` / 夏 `#466ca6` / 秋 `#aa6255`）。**この 4 色を他の用途に流用しない**
- **面色は水色の階調で作る**（`#cfe9f8` / `#e2f1f7` / `#e9f2fc` / `#227ea5`）
- **黄色 `#f5f57f` は「今すぐ確認すべき情報」にだけ使う**。サイト内で 1 箇所に限る
- **`border-radius: 0px` を原則**にし、**カテゴリチップだけ 30px のピル**にする
- **影は 3 段を役割で使い分ける**。**カードの影には青を混ぜ、ボタンの影はオフセット 0** にする
- **プライマリボタンは白地 ＋ 青文字 ＋ 影**。塗りにしない
- **セクションの区切りは罫線ではなく面色**で作る

### Don't（禁止）

- **`font-feature-settings: "palt"` を使わない**。この字間設計（0.05〜0.6em）と両立しない
- **セクション見出しの 0.6em を本文・カード・ボタンに持ち込まない**
- **0.6em の見出しを左寄せにしない**（行末の空きが不揃いになる）
- **島名の全角スペースを削らない・半角に置換しない**
- **会期の 4 色を「季節以外の意味」で使わない**（成功／警告などに転用しない）
- **角丸を増やさない**。8px / 16px のカード角丸を持ち込まない（0px か 30px のピルの二択）
- **プライマリボタンを塗りにしない**（白地 ＋ 影がこのサイトの形）
- **影を灰色（`rgba(0,0,0,…)`）でカードに落とさない**。水色の面の上で濁る
- **黄色 `#f5f57f` を装飾に使わない**。注目の 1 箇所だけ
- **書体を増やさない**。ロゴ以外に明朝を持ち込まない
- **本文の行間を 1.6 に詰めない**（2.19 がこのサイトの読み心地）
- **フォールバックを `sans-serif` だけにしたまま Web フォントの読み込み失敗を放置しない**。実装では `"Hiragino Sans", "Yu Gothic"` 等を足して劣化を抑える

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。**黄色バナーは画面下部に固定**（`sp-fixed-banners`）。セクション見出しの字間を 0.3em へ落とす |
| Tablet | 768–1024px | 島一覧は 2 カラム。ヘッダーナビはハンバーガーへ |
| Desktop | > 1024px | 島一覧 3〜4 カラム。ナビ常設 ＋ 右上に黄色バナー |

### タッチターゲット

- 最小サイズ: 44px × 44px（WCAG 基準）
- **Primary Button は `padding 17px 40px` ＋ 16px / lh 1.4 で高さ 56.4px**。基準を満たす
- **会期ラベルは `padding 6px 0` ＋ 14px で高さ 26px**。**ラベル単体をタップ対象にせず、カード全体をタップ領域にする**
- **Category Chip は `padding 4px 9px` ＋ 13px で高さ 21px**。**モバイルでは `padding 10px 16px` に広げて 40px 以上を確保する**
- **固定バナーはモバイルで画面下部へ移す**。高さ 56px 以上を確保する
- 島カードは**カード全体をタップ領域**にする

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

- 本文 16px は据え置く（`line-height: 2.19` も維持する）
- **Section Head 26px → 20px。`letter-spacing: 0.6em` は `0.3em` へ落とす**（0.6em のままだとモバイル幅で 1 行に 5 文字しか入らない）
- 英字見出し 25px → 18px。**`letter-spacing: 0.2em` は維持する**
- 島名 22px → 18px。**全角スペース割りは維持する**
- 記事タイトル 18px → 16px。**weight 700 は維持する**
- 会期ラベル 14px は据え置く（これ以上小さくすると帯が読めない）
- **`letter-spacing: 0.05em` の既定はモバイルでも維持する**

---

## 9. Agent Prompt Guide

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

```
Background:      #ffffff   （ページ地色）
Setouchi Blue:   #0068b5   （主色。ボタン文字・MENU・現在地・チップの枠）
Sky:             #cfe9f8   （ファーストビューの空色 / MENU ボタンの面）
Sea Light:       #e2f1f7   （PICK UP カードの面）
Sea Pale:        #e9f2fc   （フッターの面）
Deep Sea:        #227ea5   （大きな導線ブロックの面）
Mid Sea:         #2e7c9e   （PICK UP の見出し文字）
Slate Sea:       #3a7b98   （ステータス「申込不要」）
Highlight:       #f5f57f   （右上固定バナー。唯一の暖色。文字は #323232）
Season 全会期:    #323232   ／ 春 #2f837b ／ 夏 #466ca6 ／ 秋 #aa6255
Ink:             #323232   （既定の文字色。純黒ではない）
Muted:           #6d7682   （日付・非活性）
Font:            "Noto Sans JP", sans-serif  ← 和欧ともこれ 1 本。ロゴのみ明朝の画像
Weight:          500（基準）/ 700（タイトル・ナビ・ボタン）。400 は器のみ
Body:            16px / weight 500 / lh 2.19 (35.04px) / ls 0.8px (0.05em) / #323232
Line Height:     1.0（ラベル）/ 1.4〜1.5（ボタン・ナビ）/ 1.65〜1.86（見出し）/ 2.19（本文）
Letter Spacing:  0.05em（既定）/ 0.1em（ボタン）/ 0.2em（英字見出し）/ 0.6em（セクション見出し）
                 ラベル・チップ・日付は normal
Feature:         font-feature-settings: normal（palt も chws も使わない）
Radius:          0px（原則）/ 30px（カテゴリチップだけピル）
Shadow:          0 3px 6px rgba(0,0,0,.16)（固定バナー）
                 0 3px 6px rgba(33,56,121,.16)（カード。影に青を混ぜる）
                 0 0 6px rgba(61,77,84,.28)（ボタン。オフセット 0 で縁取り）
島名:             全角スペースで割る（直　島）。正規化で消さない
Container:       1200px
```

### プロンプト例

```
瀬戸内国際芸術祭のデザインシステムに従って、島と作品の一覧ページを作成してください。
- 書体は "Noto Sans JP", sans-serif の 1 本だけ。和文も欧文もこれで組む
- weight は 500 を基準にし、タイトル・ナビ・ボタンだけ 700 にする
- 本文は 16px / weight 500 / line-height 2.19（35.04px）/ letter-spacing 0.8px（0.05em）
- 字間は 0.05em を既定にして、用途で拡大する：
  ボタン 0.1em（1.6px）/ 英字見出し 0.2em（5px）/ セクション見出し 0.6em（15.6px）。
  0.6em の見出しは必ず中央寄せにして line-height 1.65 以上を取る。
  ラベル・チップ・日付は letter-spacing: normal
- font-feature-settings は normal のまま。palt も chws も使わない
- 配色は水色の階調で作る：
  地 #ffffff / 空 #cfe9f8 / 海（淡）#e2f1f7 / 海（極淡）#e9f2fc / 海（濃）#227ea5、
  主色 #0068b5、文字 #323232、日付 #6d7682
- 会期は 4 色で識別する：全会期 #323232 / 春 #2f837b / 夏 #466ca6 / 秋 #aa6255。
  角丸ゼロの帯（padding 6px 0 / 白文字 14px weight 500 / ls 0.7px）でカード上端に乗せる。
  この 4 色を季節以外の意味に転用しない
- 注目情報（作品公開スケジュール）だけ黄色 #f5f57f の固定バナーにする。
  サイト内で暖色はここ 1 箇所だけ
- border-radius は 0px を原則にする。角丸にしてよいのはカテゴリチップだけで、
  白地 ＋ 1px solid #0068b5 ＋ radius 30px ＋ padding 4px 9px ＋ 13px weight 500
- プライマリボタンは塗りにしない：白地 ＋ 文字 #0068b5 ＋ padding 17px 40px ＋
  16px weight 700 ＋ ls 1.6px ＋ box-shadow: 0 0 6px 0 rgba(61,77,84,.28)（オフセット 0 の縁取り）
- カードの影には青を混ぜる：0 3px 6px 0 rgba(33,56,121,.16)。灰色の影を使わない
- 島名は全角スペースで割って表示する（直　島 / 豊　島）。白い帯の中に 22px weight 700 で置き、
  white-space: nowrap で折り返さない
- セクションの区切りは罫線ではなく面色（#e2f1f7 / #e9f2fc）の帯で作る
- コンテナ幅は 1200px、島一覧は 3〜4 カラム、記事一覧は 1 カラム＋横罫
```