食品工場・OEM（信頼感・誠実）

だれに向けたページか

自社ブランドの食品を作りたい、飲食店・小売・通販の商品担当者。初めてOEMを頼む人も多い。 「この工場なら任せて大丈夫」と思える清潔さと手順の確かさを、明るい色で見せる。

色

ボタンはオレンジの面に --c-ink の文字（6.66）。白い文字はオレンジに載せない（2.46 で足りない）。

文字

• 見出し：Zen Maru Gothic 700（やわらかいが崩れない丸ゴシック）
• 英字・数字：Outfit 700
• 本文：Noto Sans JP 16px・行の高さ 1.9

ページの構成と演出

1. メインビジュアル（A12）：クリームの画面の下の地平線から、オレンジの点でできた地球がゆっくり昇り、回り続ける。工場のある日本の位置に黄色の印。見出し「あなたのレシピを、世界の食卓へ。」
2. ごあいさつ：数字（創業・取引先・品目）を3つ。数字は見本の値
3. 工場の一日（B04）：製造ラインの写真が画面いっぱいに止まり、その中の角丸の小窓だけが「原料→仕込み→充填→検査」と入れ替わる。左に工程名と番号「1／4」
4. つくれるもの（D01）：ソース・デザート・冷凍食品の3区切り。入るたびにページ全体の背景がその区切りの色に変わる
5. OEMの流れ：相談から納品まで5段の手順（番号つきの帯）
6. 衛生と品質：認証の札（〇〇認証 などの見本）
7. ご相談：オレンジの大きな入口ボタン
8. フッター

動きの決まり

• JSや GSAP が無いとき：地球の代わりに CSS の点描の半円（日の出の形）が出る。小窓の4工程は写真つきの4枚のカードで縦に並ぶ。3区切りはそれぞれの色の帯で並ぶ。全部読める
• prefers-reduced-motion のときは、地球は止まった1枚の絵になり、他は上と同じ「動かない版」
• 地球の回転はゆっくり（1周 40秒以上）。画面全体を揺らす・回す動きはしない

写真（codex）

製造ラインの全景／原料・仕込み・充填・検査の小窓4枚／ソース・デザート・冷凍食品、の8枚。人は後ろ姿か手だけ。

見本の値（会員が本物に替える）

創業年・取引先数・品目数・最小ロット・認証名・電話・住所はすべて見本（〇〇）。会員が本物に替える。

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

• 見出しは Zen Maru Gothic、上に Outfit の小さな英字ラベル（--c-accent-text）
• オレンジの面は1画面に1か所まで。広い面はクリームと --c-cat の淡い色で
• 演出は1ページに1つまで。工程の説明には B04（小窓）を使い回してよい