# DESIGN.md — 文喫（BUNKITSU）
> 文喫 BUNKITSU（https://bunkitsu.jp/）のデザイン仕様書。
> 日本出版販売が 2018 年に六本木で始めた「入場料のある本屋」。「文化を喫する」を掲げ、書店を滞在の場として再定義した。
> 最大の特徴は **和文に筑紫ゴシック（`TsukuGoPr5-D`）、欧文ラベルに Bookman Old Style（`BookmanOldStylePro-Regular`）という和欧 2 書体の使い分け**。**欧文はセリフ、和文はゴシック**という逆転した組み合わせが、この店の「本屋らしさ」を作っている。
> そして **セクション見出しが縦組み**（`writing-mode: vertical-rl`）で、しかも **`letter-spacing: 31.5px`（1.05em）という極端な字間**で組まれる。縦の罫線を添えて掛軸のように置く。
> **`font-feature-settings: "palt"` が `body` から全要素に継承される**。約物を詰めた上で `letter-spacing: 0.512px`（0.02em）で開き直す、二段構えの字送り。
> **CTA はすべて `border-radius: 38px` のピル**で、**面は `#fdeadf`（淡いアプリコット）、枠は `1px solid #000000`**。塗りと細い黒枠を同時に持つ。
> 実サイトの computed style 実測（2026-08-15 取得。トップ ＋「文喫の楽しみ方」＋「お知らせ」）に基づく。
---
## 1. Visual Theme & Atmosphere
- **デザイン方針**: **白地に、余白を大量に取った縦横混在の組版**。ページの大半が白で、**要素と要素の間に画面 1 つ分近い空きを置く**。密度ではなく「間」で本屋の静けさを表す
- **文喫について**: 「文化を喫する、入場料のある本屋。」がコンセプト。**無料エリアと入場料エリアが分かれる**という独特の業態を、サイトでは**縦組みの見出し（本のたたずまい）と横組みの案内文（実用情報）の使い分け**で表現している
- **密度**: **極端に低い**。1440×900 のファーストビューは KV 1 枚とロゴだけ。スクロールしても、1 画面にセクション 1 つしか入らない
- **キーワード**: 筑紫ゴシック、Bookman Old Style、縦組み見出し、`palt`、アプリコット `#fdeadf`、radius 38px、余白過多
- **特徴**:
- **和文＝ゴシック（筑紫ゴシック Pro5 D）／欧文＝セリフ（Bookman Old Style）**。通常と逆の組み合わせ。**欧文ラベルは常に和文見出しの上に小さく置かれる**（`Store` / `How to use` / `Information`）
- **セクション見出しが縦組み**。`writing-mode: vertical-rl` ＋ **`letter-spacing: 31.5px`（1.05em）** ＋ 左側に 1px の縦罫。**「店 舗」の 2 文字が縦に 1 文字ずつ離れて並ぶ**
- **本文コピーにも縦組みを使う**（「自由で楽しい、みんなの居場所です。」）。**複数行を右から左へ流す**、書籍そのものの組み方
- **`font-feature-settings: "palt"` が `body` から全要素に継承される**。約物が詰まった上で `letter-spacing: 0.02em` を足す設計
- **CTA ピルの padding が上下非対称**（`9.6px 40px 12px`）。**下を上より 2.4px 厚くして、和文の字面が視覚的に中央へ来るよう補正している**
- **`border-radius: 38px` の完全なピル**。角丸のボタンは 1 つも無い
- **`box-shadow` を使わない**。奥行きは面色（`#fdeadf` / `#f4f4f4`）と 1px の細罫だけ
- **ロゴ「文喫」は明朝系のレタリング画像**。本文のゴシックとは別物で、**Web フォント化されていない**
---
## 2. Color Palette & Roles
> 実測値。地は `#ffffff`（`pageBackground.resolved` = `rgb(255,255,255)` / 根拠 `body`）。
> **有彩色は アプリコット `#fdeadf` と 深緑 `#34806f` の 2 色だけ**。それ以外は白・黒・グレー。
### Brand（ブランド）
- **Apricot** (`#fdeadf`, rgb 253,234,223): **主色**。全 CTA ピルの面、フッター上部の帯。**`uniqueBackgrounds` で最頻（10 回）の色**で、実質これがブランドカラー
- **Forest** (`#34806f`, rgb 52,128,111): **第 2 の色**。ニュースカードの「詳しくみる」アウトラインピル（枠と文字の両方）。**アプリコットが「進む」なら深緑は「読む」**という役割分担
### Neutral（ニュートラル）
- **Ink** (`#000000`): **見出し・CTA の文字・枠線**。このサイトは**純黒を使う**
- **Body Ink** (`#28292b`, rgb 40,41,43): `body` の既定文字色。ハンバーガーメニュー内のリンク。**わずかに青みのある黒**
- **Muted** (`#5d5d5d`, rgb 93,93,93): 住所・注記・キャプション
- **Background** (`#ffffff`): ページ地色。**純白**
- **Surface** (`#f4f4f4`, rgb 244,244,244): 「スペースのご利用について」等の情報ブロックの面
- **Border**: 独立した罫色を持たない。**`1px solid #000000` か `1px solid #34806f` の 2 択**
### Semantic（意味的な色）
意味色は**サイト内に存在しない**。実装で必要になった場合は以下を目安にする。
- **Danger／Error**: `#b34a3a` 目安。**アプリコット `#fdeadf` の濃版**に寄せる（新しい色相を持ち込まない）
- **Warning**: `#fdeadf`（既存の Apricot）＋ `1px solid #000000` で表す
- **Success**: `#34806f`（既存の Forest）を流用する
- **非活性**: 面 `#f4f4f4` ／ 文字 `#5d5d5d`
---
## 3. Typography Rules
> **和文ゴシック ＋ 欧文セリフ**、**`palt` の全継承**、**縦組み見出し**の 3 点がこのサイトの核。
### 3.1 和文フォント
- **見出し・本文・UI すべて**: **`TsukuGoPr5-D`（筑紫ゴシック Pro5 D）→ `sans-serif`**
- フォントワークス「筑紫ゴシック」の Pro5 ウェイト D。**懐が狭く、仮名が小ぶりで縦長**。同じゴシックでも游ゴシックや Noto Sans JP より**明朝寄りの情緒**がある
- **ライセンスは Adobe Fonts / FONTPLUS 系のドメイン配信**。ローカルの preview では表示されない（後述）
- **`body` のフォールバックチェーン**: `noto-sans-cjk-jp` → `"ヒラギノ角ゴ Pro"` → `"Hiragino Kaku Gothic Pro"` → `メイリオ` → `Meiryo` → `"sans-serif"`
- **ヒラギノは `ProN` ではなく `Pro`**（JIS90 字形）。**Apple JP と同じ選択**で、`ProN` を並べていない
- **Windows は メイリオ**。游ゴシックを飛ばしてメイリオを指定している（筑紫ゴシックの縦長な字面に近いのはメイリオという判断）
- 末尾の `"sans-serif"` が**クォートで囲まれている**（`"sans-serif"`）。これは CSS のジェネリックファミリーとしては無効で、`sans-serif` という名のフォントを探しに行く。**実害は無いが、自社の実装では真似しない**
- **ウェイト**: **400（本文・見出し・ナビ）** が基本。**500（CTA ピル）**、**700（ニュースカードのタイトル）** の 3 段
- **見出しが 400 のまま**。44px の h1 も 36px の h2 も Regular で、**サイズだけで階層を作る**
### 3.2 欧文フォント
- **欧文ラベル専用**: **`BookmanOldStylePro-Regular` → `serif`**
- **セリフ体**。`Store` / `Exclusive Use` / `How to use` / `Information` / `Not Found` といった**セクションの英語見出しにだけ**使う
- **本文中の英数字には使わない**（本文の英数字は筑紫ゴシックの字形で出る）
- **和文ゴシック × 欧文セリフ**という組み合わせが、このサイトの署名。**逆にしない**
- 例外はハンバーガーの `Arial`（UA 既定）のみ。**自社の設計には持ち込まない**
- **preview.html での注記**: **`TsukuGoPr5-D` と `BookmanOldStylePro-Regular` はどちらもドメインライセンスのため、ローカルでは表示されない**
- 和文の代替: **Zen Kaku Gothic New**（Google Fonts）。筑紫ゴシックと同じく**仮名が小ぶりで縦長**、フォントワークス系の情緒に最も近い。Noto Sans JP は字面が広すぎて別物になる
- 欧文の代替: **Bitter**（Google Fonts）。Bookman Old Style と同系統の**太めのスラブ／トランジショナル・セリフ**
### 3.3 font-family 指定
```css
/* body（フォールバックの本体） */
font-family: noto-sans-cjk-jp, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
メイリオ, Meiryo, sans-serif;
/* 見出し・本文・UI（実際に当たる書体） */
font-family: TsukuGoPr5-D, sans-serif;
/* 欧文ラベルのみ */
font-family: BookmanOldStylePro-Regular, serif;
/* body の既定 */
font-size: 25.6px; /* = 1.6rem。各要素が個別に上書きする */
font-weight: 400;
line-height: 1.6; /* 40.96px */
letter-spacing: 0.512px; /* 0.02em。全要素に継承される */
color: #28292b;
font-feature-settings: "palt"; /* ← 全要素に継承される */
```
- **`body` の `font-size: 25.6px` は「継承の基準」であって本文サイズではない**。実際の本文は 16px / 18px で個別に指定される。**この 25.6px をそのまま本文に使わないこと**
- **`letter-spacing: 0.512px` は `body` に置かれ、全要素に継承される**。**16px なら 0.032em、44px なら 0.012em** と、大きい文字ほど相対的に詰まる（px 固定のため）
- **CTA ピルだけ `letter-spacing: normal`** に戻す。ボタンの文字は開かない
### 3.4 文字サイズ・ウェイト階層
| Role | Font | Size | Weight | Line Height | Letter Spacing | Color | 備考 |
|------|------|------|--------|-------------|----------------|-------|------|
| Page Title (h1) | 筑紫ゴシック | 44px | **400** | 1.25 (55px) | 0.512px | `#000000` | 「文喫の楽しみ方」 |
| Page Title / List (h1) | 筑紫ゴシック | 44px | **400** | 1.6 (70.4px) | 0.512px | `#000000` | 「お知らせ」。**一覧ページは行間を広げる** |
| Lead (h2) | 筑紫ゴシック | 36px | **400** | 1.6 (57.6px) | 0.512px | `#000000` | 「文化を喫する、入場料のある本屋。」 |
| **Section Head（縦組み）** | 筑紫ゴシック | **30px** | **400** | 1.5 (45px) | **31.5px (1.05em)** | `#000000` | 「店舗」。**`writing-mode: vertical-rl`** |
| Section Head（横組み） | 筑紫ゴシック | 30px | 400 | 1.5 (45px) | 0.512px | `#000000` | 「スペースのご利用について」 |
| **English Label** | **Bookman** | **24px** | **400** | 1.5 (36px) | -0.48px (-0.02em) | `#000000` | 「Store」。**唯一の負の字間** |
| English Label (news) | **Bookman** | 24px | 400 | 1.6 (38.4px) | 0.512px | `#000000` | 「Information」「How to use」 |
| Sub Head (h3) | 筑紫ゴシック | 24px | **400** | 1.6 (38.4px) | 0.512px | `#000000` | 「読書・ワークなど目的にあわせた滞在」 |
| Store Name | 筑紫ゴシック | 24px | 400 | 1.5 (36px) | 0.512px | `#000000` | 「文喫 六本木」 |
| English Label (small) | **Bookman** | 20px | 400 | 1.6 (32px) | 0.512px | `#000000` | 「Exclusive Use」 |
| Nav (drawer) | 筑紫ゴシック | 20px | 400 | 1.6 (32px) | 0.512px | `#28292b` | 「トップページ」 |
| Card Title | 筑紫ゴシック | 18px | **700** | 1.6 (28.8px) | 0.512px | `#000000` | ニュース記事タイトル。**700 が出る唯一の箇所** |
| Reading Text | 筑紫ゴシック | 18px | 400 | **1.75 (31.5px)** | 0.512px | `#000000` | 「文喫の楽しみ方」の解説本文 |
| Body | 筑紫ゴシック | 16px | 400 | 1.6 (25.6px) | 0.512px | `#000000` | 一般本文 |
| Body (loose) | 筑紫ゴシック | 16px | 400 | **1.75 (28px)** | 0.512px | `#000000` | 説明文ブロック |
| **Button (L)** | 筑紫ゴシック | **16px** | **500** | 1.75 (28px) | **normal** | `#000000` | 「文喫の楽しみ方」「一覧を見る」 |
| Footer Nav | 筑紫ゴシック | 16px | 400 | **1.0 (16px)** | 0.512px | `#000000` | 「文喫の楽しみ方」 |
| Breadcrumb | 筑紫ゴシック | 14px | 400 | 1.6 (22.4px) | 0.512px | `#000000` | 「TOP」 |
| **Button (S)** | 筑紫ゴシック | **14px** | **500** | 1.75 (24.5px) | **normal** | `#000000` / `#34806f` | 「店舗を探す」「詳しくみる」 |
| Meta | 筑紫ゴシック | 14px | 400 | 1.5 (21px) | 0.512px | `#5d5d5d` | 住所 |
| Caption | 筑紫ゴシック | 12px | 400 | 1.6 (19.2px) | 0.512px | `#5d5d5d` | 「※こちらはイメージ図です」 |
| Chip | 筑紫ゴシック | 12px | 400 | 1.6 (19.2px) | 0.512px | `#000000` | 「MAP」 |
- **weight 400 が基本**。**500 はボタンだけ、700 はニュースカードのタイトルだけ**。見出しを太らせない
- **`line-height` は 1.6 が基準**。**読み物ブロックだけ 1.75 に広げ、フッターナビだけ 1.0 に締める**
- **`letter-spacing: 0.512px` が全体に継承される**。**例外は 3 つだけ**: 縦組み見出しの **31.5px**、Bookman ラベルの **-0.48px**、ボタンの **normal**
### 3.5 行間・字間
- **本文の行間 (line-height)**: **1.6**（16px → 25.6px）。**読み物は 1.75**（18px → 31.5px）に広げる
- **字間 (letter-spacing)**: **`0.512px` の px 固定を `body` から全要素に継承**
- 16px で 0.032em、24px で 0.021em、44px で 0.012em。**大きい文字ほど相対的に詰まる**
- **これは意図的**。`palt` で詰めた約物の上に一律の px を足すことで、**小さい文字ほど字間が効き、大見出しは塊として締まる**
- **例外は 3 つ**:
1. **縦組みのセクション見出し: `31.5px`（1.05em）** — 文字 1 つ分以上の間隔。「店」と「舗」が完全に離れる
2. **Bookman の欧文ラベル（24px）: `-0.48px`（-0.02em）** — **サイト唯一の負の字間**。セリフ体を締めて和文見出しと重心を合わせる
3. **CTA ピル: `normal`** — ボタンの文字は開かない
**ガイドライン**:
- **`letter-spacing: 0.512px` を `body` に置き、個別要素で上書きしない**（例外は上記 3 つのみ）
- **縦組み見出しの 1.05em は「セクションの記号」**。横組みには絶対に持ち込まない
- **Bookman ラベルの負の字間は Bookman を使うときだけ**。和文に負の字間を当てない
- **ボタンの `letter-spacing: normal` を守る**。ピルの中で字間を開くと横に伸びて形が崩れる
- **`palt` を全体に掛けたまま `letter-spacing` で開き直す**。この二段構えがこのサイトの字送り
### 3.6 禁則処理・改行ルール
```css
overflow-wrap: break-word;
line-break: strict;
word-break: normal;
```
**禁則対象**:
- 行頭禁止: `）」』】〕〉》、。，．・：；？！`
- 行末禁止: `（「『【〔〈《`
- **`palt` が効いているため、約物は既に詰まっている**。`「」（）` の前後に追加のマージンを入れない
- **記事タイトルは全角スペースを含む**（`新企画「文喫復刻選書」始動 第1弾は吉本隆明『言葉からの触手』`）。**全角スペースの直後で折る**のは可、二重鉤括弧 `『』` の直前では折らない
- **キャッチコピーは意図した位置で改行させる**（`文化を喫する、` / `入場料のある本屋。`）。`
` を打つか `max-width` で制御し、**自動折り返しに任せない**
- 店舗名（`文喫 六本木`）は**半角スペースごと 1 行**に保つ
- 住所（`東京都港区六本木6-1-20 六本木電気ビルディング1F`）は**丁目・番地の数字列の途中で折らない**
- **縦組みブロックは 1 行あたりの文字数を固定する**（`height` を指定して行数をコントロールする）。自動で行が増えると掛軸の形が崩れる
- ボタンのラベル（「店舗を探す」「文喫の楽しみ方」）は折り返さない
### 3.7 OpenType 機能
```css
font-feature-settings: "palt"; /* body から全要素に継承 */
```
- **`palt` を `body` に置いて全要素へ継承させる**。約物（`「」（）、。`）が自動で詰まる
- **その上で `letter-spacing: 0.512px` で開き直す**。**「詰めてから開く」の二段構え**が、筑紫ゴシックの縦長な字面を読みやすくしている
- **`palt` と `letter-spacing` をセットで考える**。`palt` だけだと詰まりすぎ、`letter-spacing` だけだと約物が空く
- **Bookman（欧文）にも `palt` が継承されるが、欧文には影響しない**。代わりに **`-0.48px` の負の字間**で締めている
- 縦組みでは `palt` の代わりに **`vpal`** を使うのが本来の指定だが、現行サイトは `palt` のまま。**縦組みブロックでは `font-feature-settings: "vpal"` に切り替える**と約物の縦位置が正しく詰まる
### 3.8 縦書き
**このサイトは縦組みを日常的に使う**。セクション見出しとキャッチコピーの両方。
```css
/* セクション見出し（「店 舗」） */
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: TsukuGoPr5-D, sans-serif;
font-size: 30px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 31.5px; /* 1.05em。文字 1 つ分以上開ける */
color: #000000;
border-left: 1px solid #000000; /* 行頭側（右）ではなく左に罫を置く */
padding-left: 24px;
font-feature-settings: "vpal"; /* 縦組みでは palt ではなく vpal */
```
```css
/* キャッチコピー本文（「自由で楽しい、みんなの居場所です。」） */
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 16px;
line-height: 2.4; /* 縦組みは行間を大きく取る（列の間隔になる） */
letter-spacing: 0.512px; /* 横組みと同じ字間を維持する */
height: 320px; /* 高さを固定して行数をコントロールする */
```
- **セクション見出しは「欧文ラベル（Bookman・横組み）→ 縦組みの和文見出し」の順**に上から置く。欧文は横、和文は縦
- **縦罫は見出しブロックの左側**に置く（`border-left`）。右ではない
- 縦組み中の英数字・年号は `text-combine-upright: all` で 2 桁までを縦中横にする
- **ピルの CTA を縦組みブロックの中に入れない**。横長のピルが縦の列を割る。縦組みブロックの下に横組みで置く
- **縦組みの `line-height` は列の間隔**になる。横組みの 1.6 より広い **2.2〜2.4** を取る
---
## 4. Component Stylings
### Buttons
**Primary Pill（大）— 主要な遷移**
- Background: **`#fdeadf`**（アプリコット）
- Text: `#000000`
- Border: **`1px solid #000000`**
- Padding: **`9.6px 40px 12px`** — **上下非対称。下を 2.4px 厚くする**
- Border Radius: **`38px`**
- Font: 筑紫ゴシック / **16px / weight 500 / lh 1.75 / `letter-spacing: normal`**
- 例: 「文喫の楽しみ方」「一覧を見る」「トップページにもどる」
- **面を塗り、かつ細い黒枠を持つ**。塗りボタンなのに輪郭を描くのがこのサイトの特徴
- **padding の下が厚いのは和文の視覚補正**。等分にすると文字が下に沈んで見える
**Primary Pill（小）**
- Background: **`#fdeadf`**
- Text: `#000000`
- Border: **`1px solid #000000`**
- Padding: **`3.5px 16.8px 5.6px`** — **同じく下を厚く**
- Border Radius: **`38px`**
- Font: **14px / weight 500 / lh 1.75 / ls normal**
- 例: 「店舗を探す」「詳しくみる」「店舗一覧」
**Outline Pill（深緑）— 記事への遷移**
- Background: **`#ffffff`**
- Text: **`#34806f`**
- Border: **`1px solid #34806f`**
- Padding: `3.5px 16.8px 5.6px`
- Border Radius: **`38px`**
- Font: 14px / weight 500 / ls normal
- 例: ニュースカードの「詳しくみる」
- **アプリコット＝サイト内の主要な遷移、深緑＝記事を読む**。役割で色を分ける
**Chip（MAP）**
- Background: **透明**
- Text: `#000000`
- Border: **`1px solid #000000`**
- Padding: **`0 7px 0.5px 7.14px`** — **左右も微妙に非対称**
- Border Radius: **`38px`**
- Font: **12px / weight 400 / ls 0.512px**
- 例: 住所の末尾に付く「MAP」
- **面を持たない最小のピル**。本文の行内に置く
### Cards（ニュース）
- Background: `#ffffff`
- Border: なし（**カード間の区切りは 1px の横罫**）
- Border Radius: **`0px`** — **ボタンは 38px のピル、カードは角丸ゼロ**
- Shadow: **なし**
- Padding: **`51.2px 58.88px 51.2px 20px`**（上下 51.2px ＝ 3.2rem、右 58.88px、左 20px）
- 構成: 日付 → タイトル（18px / **700**）→ 「詳しくみる」アウトラインピル
- **カードの中でだけ weight 700 が使われる**。他はすべて 400
### Information Block
- Background: **`#f4f4f4`**
- Border Radius: **`0px`**
- Padding: `48px 40px` 目安
- 見出し: 30px / weight 400（**横組み**。縦組みは使わない）
- 例: 「スペースのご利用について」
- **実用情報のブロックだけ面を敷いて横組みにする**。詩的な部分（縦組み）と実務的な部分（横組み・面あり）を書式で分ける
### Footer Band
- Background: **`#fdeadf`**（アプリコット）
- Padding: **`118.15px 0`**（上下に約 7.4rem）
- 中央にロゴ「文喫」の画像を 1 つだけ置く
- **フッターの上に、ロゴだけのアプリコットの帯**。CTA と同じ色で、ページを閉じる
### Inputs
実サイトに公開フォームが無いため、**このサイトの原則（ピル / 1px 黒枠 / palt）から導くと以下**。
- Background: `#ffffff`
- Border: **`1px solid #000000`**
- Border (focus): **`1px solid #34806f`**（深緑）
- Border Radius: **`38px`**（ボタンと揃える）
- Padding: `9.6px 24px 12px`（**ボタンと同じ非対称 padding**）
- Font: 筑紫ゴシック / 16px / weight 400 / Text Color: `#000000`
- Placeholder: `#5d5d5d`
- Textarea だけ **`border-radius: 8px`**（ピルにすると複数行が入らない）
---
## 5. Layout Principles
### Spacing Scale
`0.8rem = 12.8px` を単位とする **1.6rem 系のスケール**（`body` の 25.6px = 1.6rem に由来）。
| Token | Value |
|-------|-------|
| XS | 6.4px (0.4rem) |
| S | 12.8px (0.8rem) |
| M | 20px |
| L | 40px |
| XL | 51.2px (3.2rem) |
| XXL | 80px |
| XXXL | **118.15px**（フッター帯の上下） |
### Container
- Max Width: **1320px**（1440px 幅で左右に 60px ずつ）
- 読み物カラム: **720px** 目安
- Padding (horizontal): 20〜60px
- **KV は全幅ブリード**（左右 60px の余白を残した「ほぼ全幅」）。**3 枚の写真を横に並べ、その上に白文字のキャッチを重ねる**
- ヘッダーは**全幅・透過**。**KV に重ねる**（ロゴだけが白い写真の上に乗る）
- **ヘッダー中央にロゴ、左に欧文ワードマーク、右にハンバーガー**という 3 分割
### Grid
- Columns: ニュース一覧は **1 カラム（横罫で区切る）**、店舗一覧は 2〜3 カラム
- Gutter: 40px
- **セクションの間に画面 1 つ分近い余白を置く**。実測で **セクション間の空きが 300〜500px**
- **セクション見出しは中央寄せ**。縦組みの見出しがページの中心軸に立つ
- **情報ブロック（`#f4f4f4`）だけが面を持つ**。それ以外のセクションは白地のまま余白で区切る
---
## 6. Depth & Elevation
**実測の `box-shadow` は 0 段**。サイト内に影が 1 つも存在しない。
| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | **`none`** | **全要素**。ボタン・カード・ヘッダー・情報ブロックのすべて |
- **奥行きは面色の 3 段で表す**:
| 面 | 色 | 用途 |
|----|-----|------|
| 地 | `#ffffff` | ページ全体 |
| 情報ブロック | `#f4f4f4` | 実用情報のセクション |
| CTA・フッター帯 | `#fdeadf` | 押せるもの、ページの終端 |
- **線は 1px のみ**。`1px solid #000000`（ボタン枠・カードの区切り・縦組み見出しの罫）と `1px solid #34806f`（深緑のアウトラインピル）の 2 種類
- **WordPress の `--wp--preset--*`（色・スペーシング・フォントサイズ）は Gutenberg の既定値で、サイトでは使われていない**。ブランドトークンと取り違えないこと
---
## 7. Do's and Don'ts
### Do（推奨）
- **和文はゴシック（筑紫ゴシック Pro5 D）、欧文ラベルはセリフ（Bookman Old Style）にする**。この逆転がブランドの署名
- **セクション見出しは「欧文ラベル（横組み・Bookman）→ 和文見出し（縦組み）」の 2 段**で組む
- **縦組み見出しに `letter-spacing: 1.05em` を当てる**。文字 1 つ分以上開けて、左に 1px の縦罫を添える
- **`font-feature-settings: "palt"` を `body` に置いて全継承させ、その上で `letter-spacing: 0.512px` で開き直す**
- **weight は 400 を基本にする**。500 はボタンだけ、700 はニュースカードのタイトルだけ
- **CTA はすべて `border-radius: 38px` のピル**にする
- **ピルの padding を上下非対称にする**（下を上より 2.4px 厚く。和文の視覚補正）
- **塗りピルにも `1px solid #000000` の枠を付ける**。塗りと輪郭を同時に持たせる
- **アプリコット `#fdeadf` = 主要な遷移、深緑 `#34806f` = 記事を読む** の役割分担を守る
- **カードは角丸ゼロ**にする。ピル（38px）とカード（0px）の対比を保つ
- **`box-shadow` を使わない**。奥行きは面色 3 段（白 / `#f4f4f4` / `#fdeadf`）と 1px 罫で作る
- **セクション間に 300px 以上の余白を取る**。密度を上げない
- **キャッチコピーは意図した位置で改行させる**（`
` か `max-width` で制御）
- **フッターの上にアプリコットのロゴ帯**を置いてページを閉じる
- 縦組みでは **`font-feature-settings: "vpal"`** に切り替える
### Don't（禁止）
- **和文をセリフ（明朝）、欧文をサンセリフにしない**。組み合わせを逆にするとブランドが消える
- **見出しを太らせない**（44px の h1 も 400 のまま）
- **`letter-spacing` を要素ごとに上書きしない**。例外は縦組み見出し（31.5px）・Bookman ラベル（-0.48px）・ボタン（normal）の 3 つだけ
- **縦組みの 1.05em を横組みに持ち込まない**
- **和文に負の `letter-spacing` を当てない**（負の字間は Bookman ラベルだけ）
- **ボタンの中で `letter-spacing` を開かない**（`normal` を守る）
- **ピルの padding を上下均等にしない**（和文が下に沈んで見える）
- **塗りピルの枠を省略しない**（`1px solid #000000` はセットで 1 つの形）
- **カードを角丸にしない**。角丸はピルだけの記号
- **影を付けない**。`0 2px 8px` のような一般的なカードシャドウを持ち込まない
- **色を増やさない**。有彩色はアプリコットと深緑の 2 色だけ
- **アプリコットと深緑の役割を入れ替えない**
- **セクションを詰めない**。余白を削ると本屋の静けさが消える
- **縦組みブロックにピルを入れない**（横長の形が縦の列を割る）
- **縦組みの行数を自動に任せない**（`height` を固定する）
- **`body` の `font-size: 25.6px` を本文サイズとして使わない**（あれは継承の基準）
- **フォールバックの末尾を `"sans-serif"` とクォートで囲まない**（実サイトの記述は誤りで、ジェネリックファミリーとして機能しない）
- **`--wp--preset--*` をブランドトークンとして使わない**（Gutenberg の既定値）
---
## 8. Responsive Behavior
### Breakpoints
| Name | Width | 説明 |
|------|-------|------|
| Mobile | ≤ 767px | 1 カラム。KV は 1 枚に。**縦組み見出しは維持する**（`letter-spacing` を 0.6em に落とす） |
| Tablet | 768–1024px | 2 カラム。セクション間の余白を 200px 程度に詰める |
| Desktop | > 1024px | KV は 3 枚並び。セクション間 300〜500px |
### タッチターゲット
- 最小サイズ: 44px × 44px（WCAG 基準）
- **Primary Pill（大）は `padding 9.6px 40px 12px` ＋ 16px / lh 1.75 で高さ 49.6px**。基準を満たす
- **Primary Pill（小）は `padding 3.5px 16.8px 5.6px` ＋ 14px / lh 1.75 で高さ 33.6px**。**モバイルでは `padding 9.6px 20px 12px` に広げて 46px を確保する**
- **Chip（MAP）は高さ 20px しかない**。**モバイルでは住所行ごとタップ領域にする**（チップ単独を押させない）
- カードは**カード全体をタップ領域**にする
- **ハンバーガーは 44px × 44px 以上**を確保する
### フォントサイズの調整
- 本文 16px は据え置く（14px を下回らない）
- Page Title 44px → モバイルでは 28〜30px。**weight 400 は維持する**
- Lead 36px → 24〜26px
- **縦組みセクション見出し 30px → 22〜24px。`letter-spacing: 31.5px` は `0.6em` 程度に落とす**（画面高が足りなくなるため）。**縦組みそのものは維持する**
- English Label（Bookman）24px → 18px。**負の字間 -0.02em は維持する**
- Card Title 18px → 16px。**weight 700 は維持する**
- Button 16px → 15px まで。**`padding` は縦方向に広げて高さ 46px を確保する**
- **`letter-spacing: 0.512px` の全体継承と `palt` はモバイルでも維持する**
- **読み物の `line-height: 1.75` はモバイルでも維持する**（1.6 に落とさない）
---
## 9. Agent Prompt Guide
### クイックリファレンス
```
Background: #ffffff （ページ地色。純白）
Surface: #f4f4f4 （実用情報ブロックの面）
Apricot: #fdeadf （主色。全 CTA ピルの面 ＋ フッター帯）
Forest: #34806f （第 2 色。記事への遷移＝アウトラインピルの枠と文字）
Ink: #000000 （見出し・CTA の文字・枠線。純黒を使う）
Body Ink: #28292b （body の既定文字色）
Muted: #5d5d5d （住所・注記・キャプション）
Font (和文): TsukuGoPr5-D, sans-serif ← 筑紫ゴシック Pro5 D
Font (欧文ラベル): BookmanOldStylePro-Regular, serif ← セリフ。和文ゴシックとの逆転
Fallback: noto-sans-cjk-jp, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
メイリオ, Meiryo, sans-serif ← ProN ではなく Pro
Body: 16px / weight 400 / lh 1.6 / ls 0.512px (0.02em) / #000000
（body の 25.6px は継承の基準で、本文サイズではない）
Weight: 400 が基本。500 はボタンのみ、700 はニュースカードのタイトルのみ
Line Height: 1.6（基準）/ 1.75（読み物・ボタン）/ 1.0（フッターナビ）
Letter Spacing: 0.512px を body に置いて全継承（px 固定）
例外 3 つ: 縦組み見出し 31.5px (1.05em) /
Bookman ラベル -0.48px (-0.02em) / ボタン normal
Feature: font-feature-settings: "palt" を body に置いて全継承
（縦組みブロックだけ "vpal" に切り替える）
Radius: CTA ピル 38px / カード・情報ブロック 0px（対比を保つ）
Shadow: 全要素 none（影は存在しない）
Border: 1px solid #000000（ボタン枠・区切り・縦罫）/
1px solid #34806f（深緑アウトライン）
縦組み: セクション見出しとキャッチコピーで日常的に使う
writing-mode: vertical-rl / 左に 1px の縦罫 / 上に Bookman の欧文ラベル
Container: 1320px（読み物 720px）
Section Gap: 300〜500px（余白でセクションを区切る）
```
### プロンプト例
```
文喫（BUNKITSU）のデザインシステムに従って、書店の「店舗紹介」ページを作成してください。
- 和文は TsukuGoPr5-D, sans-serif（筑紫ゴシック Pro5 D）。
欧文のセクションラベルだけ BookmanOldStylePro-Regular, serif（セリフ体）。
この「和文ゴシック × 欧文セリフ」の逆転を必ず守る。
フォールバックは noto-sans-cjk-jp, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
メイリオ, Meiryo, sans-serif（ヒラギノは ProN ではなく Pro）
- body に font-feature-settings: "palt" と letter-spacing: 0.512px を置き、全要素に継承させる。
「palt で詰めてから letter-spacing で開き直す」二段構えにする。
字間の例外は 3 つだけ：縦組み見出し 31.5px / Bookman ラベル -0.48px / ボタン normal
- 本文は 16px / weight 400 / line-height 1.6。読み物ブロックだけ 1.75 に広げる
- weight は 400 を基本にする。500 はボタンだけ、700 はニュースカードのタイトルだけ。
44px の見出しも 400 のままにして、サイズだけで階層を作る
- セクション見出しは 2 段で組む：
上に Bookman の欧文ラベル（24px / 横組み / letter-spacing -0.48px）、
下に和文の見出しを縦組み（writing-mode: vertical-rl / 30px / weight 400 /
letter-spacing 31.5px = 1.05em / 左に border-left: 1px solid #000000 / padding-left 24px）。
縦組みブロックでは font-feature-settings を "vpal" に切り替える
- 縦組みの本文コピーも使う（line-height 2.4、height を固定して行数をコントロールする）。
縦組みブロックの中にピルを入れない
- CTA はすべて border-radius: 38px のピル：
主要な遷移＝面 #fdeadf ＋ 1px solid #000000 ＋ 文字 #000000 /
padding 9.6px 40px 12px（下を上より 2.4px 厚く。和文の視覚補正）/ 16px weight 500 / ls normal
小サイズ＝padding 3.5px 16.8px 5.6px / 14px weight 500
記事への遷移＝白地 ＋ 1px solid #34806f ＋ 文字 #34806f / radius 38px / 14px weight 500
塗りピルにも必ず黒枠を付ける（塗りと輪郭をセットで持たせる）
- カードは border-radius: 0px。ピル（38px）とカード（0px）の対比を保つ。
カード間の区切りは 1px の横罫だけ。カードの中だけ weight 700 を使う
- box-shadow は一切使わない。奥行きは面色 3 段で表す：
白 #ffffff（地）/ #f4f4f4（実用情報ブロック）/ #fdeadf（CTA・フッター帯）
- 有彩色はアプリコット #fdeadf と深緑 #34806f の 2 色だけ。色を増やさない
- セクションの間に 300px 以上の余白を取る。1 画面にセクションを 2 つ入れない
- キャッチコピーは
か max-width で意図した位置に改行させる（自動折り返しに任せない）
- ページの最後は、アプリコット #fdeadf の帯（上下 padding 118px）に
ロゴだけを中央に置いて閉じる
- コンテナ幅は 1320px、読み物カラムは 720px
```