Seikado

CSS Custom Properties が :root に定義されている。そのまま使うこと。

Base（紙と面）

• Main (#e5dfd5) — --main-color: ページ地色（生成り）。body に直接当たる。この色がサイトの印象そのもの
• Sub (#ffffff) — --sub-color: カード・ボタン・カレンダーの面。地色ではなく「載せるもの」の色

Point（差し色）

• Point (#003e7f) — --point-color: 紺。見出し（h1〜h4）、ヘッダーの開館日ブロック、展覧会ラベル、ステータスバッジの文字。サイトの主役色
• Point2 (#2c251f) — --point-color2: 焦茶。本文の文字色、イベントラベルの面、ナビの暗幕、画像下のグラデーション
• Point3 (#e0ba71) — --point-color3: 金。#update-box strong（更新情報の強調）に使う唯一の華やかな色。1.6rem
• Notice (#e05803) — --notice-color: 橙。注意書き（.attention 1.4rem）と、休館日を示す del の二重取り消し線（border-top: 4px double）

Accent（変数化されていない実測色）

• Ticket Red (#a0371e): チケット購入 CTA のバー。左下固定、350×60px
• Deep Red (#910000): グローバルナビ内のチケット関連項目の面
• Gold Chip (#dbd455): カレンダーの「イベント（スライドトーク等）」チップ。文字は #333

Calendar（開館日カレンダー専用）

• Closed (#d8d8d8): 休館日のセル
• Tint Pink (#f3e4ea): 日曜・特定日のセル
• Tint Mint (#ebf3f3): 平日のセル
• Sunday Text (#dd0000) / Saturday Text (#0000dd) / Weekday Text (#333333) / Date Text (#777777)

Neutral（罫）

• Hairline (#aaaaaa): 主役の罫線（実測 123 箇所）。セクション・テーブル・カードの区切り
• Hairline Light (#cccccc): 補助の罫
• Hairline White (#ffffff): 濃色の上に引く白罫（.white-line）
• Scrim (rgba(0, 0, 0, .8) / rgba(44, 37, 31, .7)): ナビ展開時の暗幕・画像のオーバーレイ
• Image Gradient: linear-gradient(to top, transparent 0%, transparent 50%, #2c251f 90%) — 画像上部に文字を置くための焦茶のかぶせ

明朝が骨格、ゴシックが本文。palt は使わず、字間 0.8px（px 固定）・行間 1.8 を全体に効かせる。

3.1 和文フォント

• 明朝体: Shippori Mincho（しっぽり明朝） — --mincho-font: 'Shippori Mincho', serif
• 見出し（h1〜h4）・グローバルナビ・ヒーロー・展覧会ラベル・ステータスバッジに使う
• weight は 300 / 400 / 500 / 700 を使い分ける（ナビの第 2 階層が 300、既定 400、小見出し・ナビ第 1 階層が 500、「開催中」バッジが 700）
• ゴシック体: Noto Sans JP — --gothic-font: 'Noto Sans JP', sans-serif
• 本文・注釈・ヘッダーのユーティリティ（LANGUAGE / ENGLISH / リンク集）・ボタンのラベルに使う
• 本文は weight 300（Light）。400 にしない
• 明朝を「見出し用の飾り」にしない。ナビもラベルも明朝で、ゴシックのほうが脇役という珍しい役割配分

3.2 欧文フォント

• セリフ: Minion Pro — --entitle-font: 'minion-pro', serif（Adobe Fonts）
• セクション名の英語表記専用（「News」「Collection」「Information / Access」）
• 24px / weight 400 / ls 0.48px（0.02em） / 色 #003e7f。和文見出しの上に小さく置く
• サンセリフ: 欧文専用の指定はなく、Noto Sans JP の欧文グリフに流す
• カレンダーだけ別スタック: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", …（テーブルの数字を等幅感のある欧文で揃えるため）

3.3 font-family 指定

:root {
  --main-color:   #e5dfd5;
  --sub-color:    #fff;
  --point-color:  #003e7f;
  --point-color2: #2c251f;
  --point-color3: #e0ba71;
  --notice-color: #e05803;
  --gothic-font: 'Noto Sans JP', sans-serif;
  --mincho-font: 'Shippori Mincho', serif;
  --entitle-font: 'minion-pro', serif;
}

html { font-size: 62.5%; }   /* ★ 1rem = 10px。以降すべて rem で書く */

body {
  background: var(--main-color);
  font-family: var(--mincho-font);   /* ★ 既定が明朝 */
  font-size: 1rem;                   /* = 10px（リセット用の基準） */
  line-height: 1.8;                  /* ★ 全体の基準 */
  letter-spacing: .08rem;            /* = 0.8px。px 固定で全サイズ共通 */
  font-feature-settings: normal;     /* palt は使わない */
}

/* 本文 */
p { font-family: var(--gothic-font); font-size: 1.4rem; font-weight: 300; }

/* セクションの英語表記 */
.en-title { font-family: var(--entitle-font); font-size: 2.4rem; letter-spacing: .048rem; color: var(--point-color); }

/* カレンダーだけ別スタック */
table { font-family: "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN",
                     "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif; }

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

• 明朝・ゴシックとも Google Fonts で完結する（Shippori Mincho / Noto Sans JP）。フォールバックは serif / sans-serif の 1 段だけで、游明朝やヒラギノを名指ししない
• Adobe Fonts に依存するのは英字の Minion Pro だけ。落ちても serif に落ちるため、和文の見え方は壊れない
• Minion Pro を使えない環境では、EB Garamond / Cormorant Garamond などオールドスタイルのセリフに置き換えると印象が近い（Noto Serif は現代的すぎる）

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

• weight は 300 / 400 / 500 / 700 の 4 値。ただし 700 は「開催中」バッジとカレンダーの曜日ヘッダー、LANGUAGE ラベルの 3 箇所だけ
• 本文の 300（Light）が最大の特徴。ここを 400 にすると全体の軽やかさが失われる

3.5 行間・字間

影を使わない。ボタンは白面 ＋ radius 10px、バッジは面色 ＋ radius 0 / 5px。

Buttons

White Button（サイトの標準）— .white-btn

• Background: #ffffff（生成りの地色から浮かせる）
• Text: #2c251f
• Border: なし（.white-line を足すと 1px solid #ffffff）
• Border Radius: 10px
• Size: 240 × 50px（.small） / .wide は幅いっぱい
• Font: ゴシック 16px / 400 / ls 0.8px
• 例: 「詳しく見る」「年間スケジュール」「所蔵品紹介」「アクセス」

Ticket CTA（サイトで最も強い導線）— .ticket-btn

• Background: #a0371e（赤茶）
• Text: #ffffff
• Border Radius: 0 10px 10px 0（左端だけ角ばる）
• Size: 350 × 60px / Padding: 0 0 0 20px
• 画面左下に固定表示し、右端に → を置く
• 例: 「チケット購入・日時指定予約」

Nav Ticket（ドロワー内）

• Background: #910000（深紅） / Text: #ffffff
• 明朝 13px / 500

Badges / Labels

• 大きいラベルは radius 0、小さいステータスは radius 5px という使い分け

Cards

• Background: #ffffff（生成りの地色に対して面を作る）
• Border: 1px solid #aaaaaa（影の代わり）
• Border Radius: 0〜10px
• Shadow: なし（サイト全体で 0 件）
• 構成: 画像 → ラベル（紺 or 焦茶）→ タイトル（明朝）→ 会期（明朝 13px）→ 白ボタン

Calendar（開館日カレンダー）

• 面: #ffffff / 罫: 1px solid #aaaaaa
• 曜日ヘッダー: 16.2px / 700。日 #dd0000 / 土 #0000dd / 平日 #333333
• 日付: 18px / 400 / #777777 / lh 1.8
• セルの色分け: 休館 #d8d8d8 / 日曜・特定日 #f3e4ea / 平日 #ebf3f3
• 休館日は del に border-top: 4px double #e05803 の二重取り消し線を重ねる
• フォントはここだけ "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", …

Header

• Background: #e5dfd5（地色と同じ）
• 開館日ブロック: #003e7f の面に白文字。「本日は」12px / 500、「開館日」18px / 500、「10:00 - 17:00」14px / 500
• ユーティリティ（リンク集 / サイトマップ / プレスルーム / ENGLISH）: ゴシック 12px / 400 / #003e7f
• LANGUAGE セレクタ: 白面 ＋ radius 30px（ピル）

Global Nav（ドロワー）

• Background: rgba(0, 0, 0, .8) の暗幕
• 第 1 階層: 明朝 13px / 500 / 白
• 第 2 階層: 明朝 11px / 300 / 白
• 画像の上に文字を置く箇所は linear-gradient(to top, transparent 0%, transparent 50%, #2c251f 90%) をかぶせる

Breakpoints

• max-width: 280px まで面倒を見るのが特徴。古い小型端末でカレンダーが破綻しないようにしている

レイアウトの切り替え

• グリッド: 3 カラム → 2 カラム → 1 カラム
• ナビ: 横並び ＋ ハンバーガー → 全画面ドロワー（rgba(0,0,0,.8) の暗幕）
• チケット CTA: 左下固定のまま。SP では幅いっぱいのバーにする
• カレンダー: 7 列を維持し、チップのテキストを省略表示に切り替える

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• 白ボタンは 50px 高なので基準を満たす。ラベル・チップ（padding 8px / 0 4px）はタップ領域を別途確保する

フォントサイズの調整

• 見出し: 36px → 24px、ヒーロー 38px → 24〜28px
• 本文 14px / lh 1.8 / weight 300 は下げない
• 字間 0.8px は px 固定のためそのまま維持（SP で小さくすると相対的に開いて見え、かえって読みやすい）