青森県立美術館（AOMORI MUSEUM OF ART） DESIGN.md

青森県立美術館 / Aomori Museum of Art（https://www.aomori-museum.jp/）のデザイン仕様書。 2006 年開館、青木淳の設計。菊地敦己による VI は日本のグラフィックデザイン史に残る仕事として知られる。 最大の特徴は 文字色が黒ではなく #332200（暖かい焦茶） であること。ロゴも罫も SVG の塗りもすべてこの 1 色で、サイト全体が「墨」ではなく「土」の色で組まれている。 差し色は #91d2e5（淡い空色）の 1 色だけ。彩度を持つ色はこれしか存在しない。 border-radius は全要素 0px、box-shadow は 1 つも無い。角丸も影も使わず、2px / 3px のベタ罫だけで面を区切る。 そして letter-spacing が 0.2em / 0.12em / 0.06em / 0.03em / normal の 5 段に設計されている。字間そのものが階層を作る。 実サイトの computed style 実測（2026-08-15 取得。トップ ＋ TICKETS ＋ 展覧会詳細ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地に焦茶の線画。角丸ゼロ・影ゼロ・彩度ほぼゼロ。罫線の太さ（2px / 3px）と字間の広さだけで情報の階層を作る、製図的で禁欲的な設計
• 青森県立美術館について: 三内丸山遺跡の発掘現場（トレンチ）を意匠の起点にした建築。「掘り起こされた土の断面」に対応する色が #332200 で、サイトはそのアイデンティティをそのまま Web に移している
• 密度: 低い。トップは 巨大な SVG 見出し → 大きく字間を開いたリンク列 → 20 周年ロゴ → 展覧会カードという順で、1 画面あたりの情報量を抑えている
• キーワード: 焦茶 #332200、空色 #91d2e5、radius 0、影なし、ls 0.2em の大リンク、Noto Sans JP ＋ 約物半角
• 特徴:
  • 主文字色が #332200（rgb 51,34,0）。純黒 #000000 はサイト内に一切現れない。罫線・枠・SVG の fill もすべて同じ 1 色
  • 有彩色は #91d2e5（淡い空色）1 色のみ。20 周年ロゴの枠、年号の罫、開館ステータスの ○、Cookie バーのリンクにしか使わない
  • border-radius: 0px が全要素。ボタンもバッジも入力欄も角丸にしない
  • box-shadow: none が全要素。奥行きは 罫線の太さ（2px / 3px） だけで表す
  • 主ナビゲーションが 26px / weight 700 / letter-spacing: 0.2em の巨大なリンク列。リンクがそのまま見出しとして機能する
  • letter-spacing に 5 段の設計がある（0.2em / 0.12em / 0.06em / 0.03em / normal）。サイズではなく役割で字間が決まる
  • ロゴと大見出しは SVG 画像。菊地敦己による専用アルファベット／和文レタリングは Web フォントではないため、HTML テキストで再現しない
  • palt を掛けない（font-feature-settings: normal）。字間は詰めず、開く方向にだけ動かす

2. Color Palette & Roles

実測値。地は #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 body）。 uniqueBackgrounds に現れる有彩色は 1 つも無い。空色 #91d2e5 は面ではなく文字色・SVG の塗りとしてしか使われないため、背景色の集計には出てこない。このサイトを読むときは interactive の color と実スクリーンショットを必ず突き合わせること。

Brand（ブランド）

• Ink Brown (#332200, rgb 51,34,0): サイトを支配する唯一の主色。本文・見出し・罫線・枠・アイコンの fill・Cookie バーの面。純黒の代わりに使う
• Sky (#91d2e5, rgb 145,210,229): 唯一の差し色。20 周年ロゴの枠線、年号「2006 — 2026」の罫、「本日開館」の ○、Cookie バー上のリンク文字。面としてはほとんど塗らず、線と文字で使う

Neutral（ニュートラル）

• Background (#ffffff): ページ地色。純白
• Surface (#f4f4f4, rgb 244,244,244): 展覧会詳細の定義リスト（「会期」「休館日」「会場」の行）の面。唯一の面色
• Badge Gray (#cccccc, rgb 204,204,204): ステータスバッジ（「開催中」「開催予定」）の面。枠も同色の 2px
• Text Secondary: 独立した弱色を持たない。補足も #332200 のまま font-size を落として表す

Semantic（意味的な色）

意味色はサイト内に存在しない。実装で必要になった場合は以下を目安にする。

• Danger／Error: #8c2f14 目安。#332200 と同じ暖色系に寄せ、彩度を上げすぎない
• Warning: 新色を足さず、#332200 の 2px 枠 ＋ 太字で表す
• Success: #91d2e5（既存の Sky）を流用する
• 非活性: 面 #cccccc ／ 文字 #332200（バッジと同じ扱い）

3. Typography Rules

letter-spacing が 5 段に設計されているのがこのサイトの核。サイズではなく役割で字間が決まる（同じ 16px でも見出しは 0.12em、本文は 0.06em）。書体は Noto Sans JP に約物半角（YakuHanJP）を重ねた 2 段構成。

3.1 和文フォント

• 全要素共通: YakuHanJPs_Noto → NotoSansJP → sans-serif
• YakuHanJPs_Noto は「約物だけを差し替えるサブセット」。YakuHanJP は括弧・句読点（（）「」、。）を半角字形に置き換えるためだけのフォントで、仮名・漢字のグリフは持たない。先頭に置くことで約物だけが半角になり、後続の NotoSansJP が本体を描く
• 末尾の s は Sans 版、_Noto は Noto Sans JP と字形を合わせた版を指す
• ウェイト: @font-face は 300 / 500 / 700 を宣言。実際に読み込まれるのは 500（本文・UI の既定）と 700（見出し・バッジ・カードタイトル） の 2 段。300 は宣言のみで未使用
• 400 は body に指定が無いのに h1 / h2 で現れる。これはブラウザ既定の継承ではなく、大見出しだけ意図的に Regular に落としているもの

3.2 欧文フォント

• 欧文専用の書体を持たない。「AOMORI MUSEUM OF ART」「20TH」「2006 — 2026」はすべて SVG 画像（菊地敦己による専用アルファベット）で、Web フォントではない
• 本文中の英数字・日付（2026.8.14（金））は Noto Sans JP の字形で出る
• 例外はカルーセルの制御ボタン（Arial / 13.3333px）のみ。UA 既定が残っているだけなので、自社の設計には持ち込まない
• 等幅フォントは使わない
• preview.html での注記: Noto Sans JP は Google Fonts で取得できるため、本体の字形は実サイトと一致する。ただし YakuHanJPs_Noto は Google Fonts に無いため、約物の半角化は再現されない（yakuhanjp の CDN を読むか、font-feature-settings: "halt" で近似する）。SVG のロゴ・大見出しは再現不可

3.3 font-family 指定

css/* 全要素共通 */
font-family: YakuHanJPs_Noto, NotoSansJP, sans-serif;

/* body の既定 */
font-size: 18px;
font-weight: 500;              /* ← Regular ではなく Medium */
line-height: 1.75;             /* 31.5px */
letter-spacing: normal;        /* body は開かない。開くのは役割ごと */
color: #332200;                /* 純黒ではない */
font-feature-settings: normal; /* palt は使わない */

フォールバックの考え方:

• 約物用サブセットを最優先に置く。YakuHanJPs_Noto → NotoSansJP の順は**「約物だけ差し替える」ための必須の順序**で、入れ替えると効かない
• OS 標準書体（游ゴシック・ヒラギノ）を並べない。Noto Sans JP を必ず読み込む前提の、Web フォント単独の構成
• body の letter-spacing は normal。OPAM のような「body に字間を置いて全継承」型ではなく、役割ごとに個別に指定する設計

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

• 見出しほど weight が下がるという逆転がある。h1 / h2 は 400、カードタイトルや小見出しは 700。「大きい文字は細く、小さい文字は太く」で視覚的な重さを揃えている
• line-height は 3 段: 1.75（18px 基準の UI・大見出し・アクションリンク）／ 1.8（16px・13px の読み物）／ 1.0（バッジ・カレンダーの数字）。例外は「会期」ラベルの 1.25 のみ
• letter-spacing は em で指定されている（OPAM の px 固定とは逆）。サイズが変わっても見た目の字間比が保たれる

3.5 行間・字間

• 本文の行間 (line-height): 1.75（18px → 31.5px）。読み物ブロックは 1.8（16px → 28.8px）と、わずかに広げる
• 字間 (letter-spacing) は 5 段で設計されている:

• 重要なのは「サイズで決まらない」こと。同じ 16px でもカードタイトルは 0.12em、本文は 0.06em。役割が字間を決める
• body は normal。字間を継承させず、開きたい要素にだけ個別に当てる
• 0.2em を当てるのは 26px / weight 700 のリンクと日付だけ。文章には絶対に当てない
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• アクションリンクは「26px ＋ weight 700 ＋ ls 0.2em」の 3 点セットで作る。字間だけを真似すると痩せて見える
• バッジとカードタイトルは同じ 0.12em で揃える。ラベル系の字間を統一することで、カード内の情報が 1 つの塊に見える
• 本文（0.06em）と注記（0.03em）で字間を変える。サイズ差だけでなく字間差でも階層を作る
• body に字間を置かない。継承させると 0.2em のリンクとの落差が作れなくなる

3.6 禁則処理・改行ルール

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

禁則対象:

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

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

• YakuHanJPs_Noto が約物を半角にしているため、「」（） の前後に追加のマージンを入れない。二重に詰まる

• 展覧会名は長く記号を含む（青森県立美術館開館20周年 / 東日本大震災15年「志賀理江子 なぬもかぬも」展）。スラッシュ / の前後、鉤括弧の直前で折らない

• 会期表記（2026.10.31 - 2027.03.14）は全体を 1 行に保つ（white-space: nowrap）。ハイフンの前後で折らない

• 日付（2026.8.14（金））は曜日の括弧ごと 1 行にする

• letter-spacing: 0.2em を当てた行は折り返させない。字間が開いているため 2 行になると塊として読めなくなる。折り返しが起きるならサイズを落として 1 行に収める

• バッジのラベル（「開催中」「コレクション展」「ワークショップ」）は折り返さない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。代わりに YakuHanJPs_Noto で約物だけを物理的に半角字形へ差し替える。**「詰める」のではなく「約物専用のグリフに置き換える」**アプローチ
• この 2 つを併用しない。palt と約物半角フォントを重ねると括弧まわりが詰まりすぎる
• 字間は開く方向（0.03〜0.2em）にだけ動かす。負の letter-spacing はサイト内に存在しない
• カレンダーの日付は桁を揃えたいので、必要なら font-feature-settings: "tnum" を足す（現行サイトは未使用）

3.8 縦書き

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

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: YakuHanJPs_Noto, NotoSansJP, sans-serif;
font-weight: 500;
letter-spacing: 0.06em;   /* 読み物と同じ字間を維持する */
line-height: 1.9;         /* 縦組みは横組みの 1.8 より広げる */
color: #332200;

• 縦組み中の年号（2026）は text-combine-upright: all で縦中横にする
• letter-spacing: 0.2em を縦組みに持ち込まない。縦組みでは行長が伸びすぎる
• 2px の罫線は縦組みブロックの右端（行頭側）に置く。横組みの「見出しの下に罫」を 90 度回した位置

4. Component Stylings

全要素 border-radius: 0px / box-shadow: none。形の違いは枠線の太さ（2px / 3px）と面の有無だけで作る。

Buttons

Outline Button（枠 3px）— 主要な操作

• Background: #ffffff
• Text: #332200
• Border: 3px solid #332200
• Padding: 4px 28px
• Border Radius: 0px
• Font: 18px / weight 500 / lh 1.75 / ls normal
• 例: ヒーロー右下の「2026.8.14（金）○ 本日開館」ブロック
• 枠 3px はサイト内で最も太い線。「今いちばん押してほしいもの」にだけ使う

Text Link（大）— サイトの主ナビゲーション

• Background: なし
• Text: #332200
• Border: なし（末尾に → を置く）
• Font: 26px / weight 700 / lh 1.75 / letter-spacing: 0.2em
• 例: 「開館時間／休館日 →」「利用料金 →」「アクセスマップ →」「一覧をみる →」
• 面を持たないのに主 CTA として機能する。字間 0.2em ＋ 太字 ＋ 大きさの 3 点で押せることを示す
• 矢印は →（U+2192）をテキストで置く。アイコンフォントや SVG にしない

Header Link

• Text: #332200
• Font: 18px / weight 500 / lh 1.75 / ls normal
• 例: 「TICKETS」「MENU」
• ヘッダーだけ字間を開かない。大リンクとの対比を作るため

Badges

Status Badge（塗り）

• Background: #cccccc
• Text: #332200
• Border: 2px solid #cccccc（面と同色の枠を置いて高さを揃える）
• Padding: 8px（上下左右均等）
• Border Radius: 0px
• Font: 13px / weight 700 / lh 1.0 / ls 0.12em (1.56px)
• 例: 「開催中」「開催予定」
• 状態を表す。グレーの面だけで、色分けはしない

Category Badge（枠）

• Background: #ffffff
• Text: #332200
• Border: 2px solid #332200
• Padding: 8px
• Border Radius: 0px
• Font: 13px / weight 700 / lh 1.0 / ls 0.12em (1.56px)
• 例: 「企画展」「コレクション展」「一般開催」「ワークショップ」「その他」
• 分類を表す。カテゴリが何種類あっても色を増やさない。文字だけで区別する
• 状態＝塗り（#cccccc）／分類＝枠（#332200） の 2 種類しかバッジは存在しない

Cards（展覧会・イベント）

• Background: #ffffff（地と同色）
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 構成: サムネイル → バッジ 2 枚を横並び（分類 ＋ 状態） → タイトル（16px / 700 / ls 0.12em）→ 会期（16px / 700 / ls 0.12em）
• カードの輪郭を描かない。地と同色・枠なし・影なしで、サムネイルの矩形とテキストの塊だけでカードに見せる
• バッジは必ず「分類（枠）→ 状態（塗り）」の順に左から並べる

Definition List（展覧会詳細の「会期／休館日／会場」）

• Background: #f4f4f4（サイト唯一の面色）
• Border Radius: 0px
• ラベル: 16px / weight 700 / lh 1.25 / ls 0.12em
• 値: 16px / weight 700 / lh 2.0 / ls 0.12em
• ラベルだけ line-height: 1.25 に締める。値との行送りの差で 2 列に見せる

Inputs

実サイトのフォームは検索窓のみで、専用のスタイルを持たない。このサイトの原則（radius 0 / 影なし / 2px 罫）から導くと以下。

• Background: #ffffff
• Border: 2px solid #332200
• Border (focus): 3px solid #332200（色を変えず太さで示す。このサイトには focus 用の色が無い）
• Border Radius: 0px
• Padding: 12px 16px
• Font: 18px / weight 500 / Text Color: #332200
• Placeholder: #332200 の opacity 0.5

Cookie Bar

• Background: #332200（サイト唯一の暗い面）
• Text: #ffffff / 13px / weight 500 / lh 1.8 / ls 0.03em
• Link: #91d2e5（空色）／ 13px / weight 500
• 暗い面の上でだけ空色がリンク色として機能する。白地の上では空色をリンクに使わない

5. Layout Principles

Spacing Scale

Container

• Max Width: 1128px（h1 / h2 の getBoundingClientRect().width 実測値）
• 読み物カラム: 760px 目安
• Padding (horizontal): 40〜120px。1440px 幅で左右に約 115px ずつ余白を取る
• ヘッダーは全幅・白地・不透過。KV に重ねない
• ヒーローの大見出しは SVG 1 枚（PC / SP で別ファイルを出し分ける）

Grid

• Columns: 展覧会カードは 4 カラム（カード幅 255px 実測）、イベントカードも 4 カラム
• Gutter: 24px
• セクションの区切りは面色を変えない。すべて白地のまま、余白の量だけで区切る
• アクションリンクは横に並べて折り返す（「開館時間／休館日 →」「利用料金 →」が 1 行、「アクセスマップ →」「フロアマップ →」「サービス施設／設備 →」が次の行）。リンク列そのものがレイアウトの単位になっている
• 20 周年ロゴのような記念ブロックは 3px solid #91d2e5 の枠で囲み、中は白地

6. Depth & Elevation

実測の box-shadow は 0 段。サイト内に影が 1 つも存在しない。

• 奥行きを影で表さない。代わりに 枠線の太さを 3 段に分けている:

• 面の段は 地 #ffffff と 定義リストの #f4f4f4 の 2 段だけ
• WordPress の --wp--preset--shadow--*（natural / deep / sharp / outlined / crisp）は Gutenberg の既定値で、サイトでは 1 つも使われていない。ブロックエディタ由来の CSS 変数をブランドのトークンと取り違えないこと（--wp--preset--color--* の vivid-red / vivid-purple 等も同様に未使用）

7. Do's and Don'ts

Do（推奨）

• 主文字色を #332200（暖かい焦茶）にする。本文・見出し・罫線・SVG の fill をすべてこの 1 色で統一する
• 有彩色は #91d2e5（空色）1 色だけに絞る。しかも面ではなく線と文字で使う
• border-radius: 0px を全要素で守る。ボタンもバッジも入力欄も角丸にしない
• box-shadow を使わない。奥行きは**枠線の太さ（2px / 3px）**で表す
• アクションリンクは「26px ＋ weight 700 ＋ letter-spacing: 0.2em」の 3 点セットで作る
• letter-spacing を役割ごとに 5 段（0.2em / 0.12em / 0.06em / 0.03em / normal）で使い分ける。サイズで決めない
• body の letter-spacing は normal にして、開きたい要素にだけ当てる
• 大見出しほど weight を下げる（h1 / h2 は 400、カードタイトルは 700）
• バッジは 2 種類だけにする。分類＝白地 ＋ 2px 枠 #332200／状態＝面 #cccccc ＋ 同色 2px 枠
• バッジの枠を面と同色で置く（高さが揃う）
• カードに枠も影も付けない。サムネイルとテキストの塊だけでカードに見せる
• YakuHanJPs_Noto を NotoSansJP の前に置く（約物半角の必須条件）
• 矢印は → をテキストで置く（アイコン化しない）
• 面色は #f4f4f4 の 1 つだけにする

Don't（禁止）

• 純黒 #000000 を使わない。文字も罫も #332200
• #91d2e5 を広い面に塗らない。線と文字と ○ のためだけの色
• 角丸を作らない（pill も 4px も禁止）。radius 0 が設計そのもの
• 影を付けない。0 2px 8px のような一般的なカードシャドウを持ち込まない
• 色を増やさない。カテゴリが増えてもバッジの色を分けない（文字で区別する）
• letter-spacing をサイズで決めない。同じ 16px でもラベルは 0.12em、本文は 0.06em
• letter-spacing: 0.2em を文章に当てない。1 行のリンク・日付だけ
• letter-spacing: 0.2em の行を折り返させない（サイズを落として 1 行に収める）
• body に letter-spacing を置いて全継承させない（0.2em との落差が作れなくなる）
• palt を掛けない。約物は YakuHanJPs_Noto に任せる。両方を併用しない
• 負の letter-spacing を使わない（字間は開く方向だけ）
• 大見出しを太くしない（h1 / h2 は 400 を守る）
• 游ゴシック・ヒラギノをフォールバックに並べない。Noto Sans JP 単独の構成
• SVG のロゴ・大見出しを HTML テキストで再現しようとしない。専用レタリングは Web フォント化されていない
• --wp--preset--* の色・影・グラデーションをブランドトークンとして使わない（Gutenberg の既定値で、実サイトでは未使用）
• セクションごとに地色を変えない（全面白地 ＋ 余白で区切る）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。アクションリンクは 26px / lh 1.75 で高さ 45.5px を確保できているため、そのままで基準を満たす
• バッジは line-height: 1.0 ＋ padding: 8px で高さ 33px しかない。バッジ自体はタップ対象にしない（カード全体をタップ領域にする）
• 枠 3px のボタンは padding: 4px 28px で高さ 40px。モバイルでは padding: 10px 28px に広げて 52px を確保する
• カードはカード全体をタップ領域にする

フォントサイズの調整

• 本文 18px は据え置く（16px を下回らない）
• アクションリンク 26px → モバイルでは 20〜22px。letter-spacing: 0.2em は 0.15em に落とす（幅が収まらないため）。weight 700 は維持する
• Page Title 36px → モバイルでは 24〜26px。weight 400 は維持する
• Section Head 27px → 20〜22px
• Card Title 16px → 15px まで。letter-spacing: 0.12em は維持する
• Badge 13px → 12px。line-height: 1.0 と padding: 8px は維持する
• line-height の 3 段（1.75 / 1.8 / 1.0）はモバイルでも維持する
• border-radius: 0 と影なしはモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff   （ページ地色。純白）
Surface:         #f4f4f4   （定義リストの面。唯一の面色）
Ink Brown:       #332200   （主色。文字・罫線・枠・SVG の fill すべて。純黒は使わない）
Sky:             #91d2e5   （唯一の差し色。線と文字だけ。面には塗らない）
Badge Gray:      #cccccc   （状態バッジの面 ＋ 同色 2px 枠）
Font:            YakuHanJPs_Noto, NotoSansJP, sans-serif
                 （約物半角サブセットを Noto の前に置く。順序が必須）
Body:            18px / weight 500 / lh 1.75 / ls normal / #332200
Weight:          500（本文・UI）と 700（バッジ・カードタイトル・アクションリンク）。
                 h1 36px と h2 27px だけ 400（大見出しほど細い）
Line Height:     1.75（18px 基準・大見出し・アクションリンク）/
                 1.8（16px・13px の読み物）/ 1.0（バッジ・カレンダー数字）
Letter Spacing:  5 段。役割で決める（サイズで決めない）
                 0.2em  … アクションリンク 26px/700、日付表示
                 0.12em … バッジ、カードタイトル、カード日付、項目ラベル
                 0.06em … 16px の読み物本文
                 0.03em … 13px の注記、20px/26px の見出し
                 normal … body(18px)、h1(36px)、h2(27px)
Feature:         font-feature-settings: normal（palt は使わない。約物はフォントで解決）
Radius:          全要素 0px（例外なし）
Shadow:          全要素 none（影は存在しない）
Border:          2px（バッジ）/ 3px（主要操作・記念ブロック）の 2 段
Container:       1128px（読み物 760px）

プロンプト例

青森県立美術館のデザインシステムに従って、美術館の展覧会一覧ページを作成してください。
- フォントは YakuHanJPs_Noto, NotoSansJP, sans-serif。
  約物半角サブセットを Noto Sans JP の前に置く（この順序でないと約物が半角にならない）。
  游ゴシック・ヒラギノをフォールバックに並べない
- 主文字色は #332200（暖かい焦茶）。純黒 #000000 は一切使わない。
  本文・見出し・罫線・枠・アイコンの fill をすべてこの 1 色で統一する
- 有彩色は #91d2e5（淡い空色）1 色だけ。しかも面に塗らず、線と文字にだけ使う
- ページ地色は #ffffff。面色は定義リストの #f4f4f4 だけ。
  セクションごとに地色を変えず、余白の量だけで区切る
- border-radius は全要素 0px。box-shadow は使わない。
  奥行きは枠線の太さ（バッジ 2px / 主要操作 3px）だけで表す
- body は 18px / weight 500 / line-height 1.75 / letter-spacing normal
- letter-spacing はサイズではなく役割で決める：
  0.2em  … アクションリンク（26px / weight 700）と日付表示
  0.12em … バッジ、カードタイトル、カード日付、「会期」等の項目ラベル
  0.06em … 16px の読み物本文
  0.03em … 13px の注記、20px / 26px の見出し
  normal … body、h1(36px)、h2(27px)
  body には letter-spacing を置かない（継承させない）
- 大見出しほど weight を下げる。h1 36px と h2 27px は 400、
  カードタイトル 16px とバッジ 13px は 700
- 主ナビゲーションは面を持たないテキストリンクにする：
  26px / weight 700 / line-height 1.75 / letter-spacing 0.2em / 末尾に → をテキストで置く。
  この行は絶対に折り返させない
- バッジは 2 種類だけ：
  分類（企画展・コレクション展・ワークショップ）＝白地 ＋ 2px solid #332200
  状態（開催中・開催予定）＝面 #cccccc ＋ 2px solid #cccccc
  どちらも 13px / weight 700 / line-height 1.0 / letter-spacing 0.12em / padding 8px / radius 0
  カテゴリが増えても色を分けない（文字だけで区別する）
- カードは枠も影も付けない。地と同色の白のまま、
  サムネイルの矩形とテキストの塊だけでカードに見せる。
  バッジは必ず「分類（枠）→ 状態（塗り）」の順に左から並べる
- 主要な操作ブロックは白地 ＋ 3px solid #332200 / padding 4px 28px / radius 0 / 18px weight 500
- 入力欄のフォーカスは色を変えず、枠を 2px → 3px に太くして示す
- font-feature-settings は normal（palt は掛けない。約物はフォント側で解決する）
- 負の letter-spacing を使わない。字間は開く方向にだけ動かす
- コンテナ幅は 1128px、読み物カラムは 760px