焼肉店（スタイリッシュ／ポップ・元気）

だれに向けたページか

仕事帰りの2〜4人、記念日のカップル、肉好きの友だちグループ（20〜40代）。 「今夜ここに行こう」と数秒でお腹がすくページにする。上品すぎず、勢いのある黒と赤。

色

赤の面の上の文字は白（4.68）か --c-ink。黒の上で赤を文字に使うのは 24px 以上の大きな文字だけ（3.93）。

文字

• 大きな英字・数字：Bebas Neue
• 見出し・本文：M PLUS 1p（見出し 800・本文 400）

ページの構成と演出

1. メインビジュアル（A07）：画面を縦に3つに割り、炭火・霜降り・トングの写真が少しずつ時間をずらしてゆっくり寄っていく。各写真に縦書きの短い句「炭で、」「焼いて、」「頬ばる。」
2. 文字の帯（E08・脇役）：赤い帯に「黒毛和牛／一頭買い／炭火／生ビール」が流れ続ける（CSSだけ）
3. ほむらについて（F05）：カウンターの写真を黒×赤の二色刷りに。指をのせる（タップ）と本来の色に戻る
4. 8つの部位（F05）：大きな「08」。0 と 8 の穴に、丸く切った二色刷りの写真がはまる。スクロールで穴の中の写真が少し回る。下に部位の一覧と値段（〇〇）
5. コース：二色刷りの写真カード3つ
6. 文字の帯（逆向き・黒）
7. ご予約：炭の写真の上に暗い板と予約ボタン・電話
8. お店の案内・フッター

動きの決まり

• JSや GSAP が無いとき：3枚の写真は止まったまま、縦書きは最初から出ている。二色刷りは CSS（SVGのフィルター）だけで成り立つ。全部読める
• prefers-reduced-motion のときは、文字の帯も止まる
• 写真の拡大は 1.0→1.15 まで・8秒以上かけてゆっくり。画面全体は動かさない
• 値段・部位の数は見本の値。会員が本物に替える

写真（codex）

炭火の網・霜降り・トング（縦長3枚）／盛り合わせ／カウンター／ご飯とビール／炭、の7枚。顔は写さない。

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

• 大見出しは「Bebas Neue の英字＋M PLUS 1p の日本語」の2段
• 二色刷りの写真は1区切りに1枚まで。本来の色の写真と交互に使う
• 赤い面は1ページに2回まで。文字の帯は1ページに2本まで