クラフトビール醸造所（ポップ・元気／スタイリッシュ）

だれに向けたページか

クラフトビールが好きな20〜40代、週末に寄り道できる場所を探している人、飲食店の仕入れ担当。 「昼は明るく元気、夜はかっこいい」二つの顔をページの中で見せる。

色

ビールのカードの色：ペールエール #ffc93c／IPA #ff8a1f／アンバー #e8572a／スタウト #2a1c14。 上の3色の文字は --c-ink（4.95以上）、スタウトだけ白とクリーム。

夜（D02）は --c-page と --c-fg を入れ替える。前後の区切りも同じ変数で色を取るので、はみ出した部分も読める。

文字

• 英字・数字：Bricolage Grotesque（800）
• 日本語：Murecho（見出し 900・本文 400）

ページの構成と演出

1. メインビジュアル（A08）：画面いっぱいの「CRAFT」「BEER」。その真ん中に切り抜きのビールグラスとホップが重なる。スクロールすると上の段は左右に、下の段は逆向きに割れて、グラスは上へ抜ける
2. つくり方：麦芽・ホップ・タンクの3つの手順。数字つき
3. 定番の4種（B05）：ペールエール・IPA・アンバー・スタウトの色のカードが、スクロールで上に積み重なる。奥のカードは少し小さく暗くなる（積み重なり自体は CSS の sticky だけで動く）
4. 夜のタップルーム（D02）：近づくとページ全体が白から黒に反転。夜の写真と営業時間（金土日のみ）
5. イベント・お取り扱い店：黒のまま。注ぐ手の写真
6. お店の案内：白に戻る
7. フッター

動きの決まり

• JSや GSAP が無いとき：文字は割れず、カードは CSS だけで積み重なる。夜の区切りは最初から黒。全部読める
• prefers-reduced-motion のときは、カードは積み重ならずに縦に並ぶ
• 20歳未満の飲酒・飲酒運転の注意をフッターに必ず置く
• 度数・値段・営業時間は見本の値（〇〇）。会員が本物に替える

写真（codex）

切り抜きのグラス・ホップ（切り抜き）／タンク／注ぐ手／タップルーム／4種の飲み比べ／麦芽、の7枚。顔は写さない。

下層ページを作るときの決まり

• 見出しは「Bricolage Grotesque の英字＋Murecho の日本語」
• 黒（夜）の区切りは1ページに1回まで
• ビールの4色は、ビールの話をするときだけ使う