文喫（BUNKITSU） DESIGN.md

文喫 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 文字サイズ・ウェイト階層

• 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 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• palt が効いているため、約物は既に詰まっている。「」（） の前後に追加のマージンを入れない

• 記事タイトルは全角スペースを含む（新企画「文喫復刻選書」始動　第1弾は吉本隆明『言葉からの触手』）。全角スペースの直後で折るのは可、二重鉤括弧 『』 の直前では折らない

• キャッチコピーは意図した位置で改行させる（文化を喫する、 / 入場料のある本屋。）。<br> を打つか max-width で制御し、自動折り返しに任せない

• 店舗名（文喫 六本木）は半角スペースごと 1 行に保つ

• 住所（東京都港区六本木6-1-20 六本木電気ビルディング1F）は丁目・番地の数字列の途中で折らない

• 縦組みブロックは 1 行あたりの文字数を固定する（height を指定して行数をコントロールする）。自動で行が増えると掛軸の形が崩れる

• ボタンのラベル（「店舗を探す」「文喫の楽しみ方」）は折り返さない

3.7 OpenType 機能

cssfont-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 に由来）。

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 つも存在しない。

• 奥行きは面色の 3 段で表す:

• 線は 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 以上の余白を取る。密度を上げない
• キャッチコピーは意図した位置で改行させる（<br> か 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

タッチターゲット

• 最小サイズ: 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 つ入れない
- キャッチコピーは <br> か max-width で意図した位置に改行させる（自動折り返しに任せない）
- ページの最後は、アプリコット #fdeadf の帯（上下 padding 118px）に
  ロゴだけを中央に置いて閉じる
- コンテナ幅は 1320px、読み物カラムは 720px