物流会社（信頼感・誠実／スタイリッシュ）

だれに向けたページか

物流をまとめて任せたい、メーカー・通販会社の物流担当者や経営者。 夜も止まらない物の流れを、濃紺と光る青で落ち着いて見せる。033（食品工場）の暖色の日の出と違い、こちらは夜の地球と航路。

色

文字

• 見出し：Zen Kaku Gothic Antique 700
• 英字・数字：Manrope 800（字間を少し広く）
• 本文：Zen Kaku Gothic Antique 400 16px

ページの構成と演出

1. メインビジュアル（A12）：濃紺の画面の下から、青い点でできた地球が昇ってくる。地球の上を、日本から世界の拠点へ光る弧（航路）が伸びる。見出し「止めない。遅らせない。運ぶを、まるごと。」
2. リボン（F06）：青から水色の太い帯が、「選ばれる理由」と「数字」の2つの区切りをまたいで、画面を横切りながら伸びていく（スクロールに合わせて描かれる）。カードはリボンの上に重なる
3. 選ばれる理由：3つの理由のカード
4. 数字：拠点数・車両数・出荷件数（見本の値）と、航空貨物の写真
5. サービス（B02）：区画を画面に止めたまま、倉庫・国内配送・冷蔵冷凍・海外への輸送・物流の代行の5件が1件ずつ切り替わる。「01／05」が進み、下に進み具合の線
6. はたらく人：スタッフの後ろ姿の写真と短い文、採用へのリンク
7. お問い合わせ：濃紺の面に大きなボタン
8. フッター

動きの決まり

• JSや GSAP が無いとき：地球の代わりに CSS の点描の半円。リボンは最初から描き終わった形。5件のサービスは縦に並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 地球は日本を正面にしたまま、左右に22度だけゆっくり振れる（片道 約44秒）。航路の弧は1回描いたら止める

写真（codex）

倉庫／トラック／港／冷蔵倉庫／仕分け／航空貨物／荷物を確かめるスタッフの後ろ姿、の7枚。会社名やロゴは写さない。

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

拠点数・車両数・出荷件数・認証・住所・電話は見本（〇〇）。会員が本物に替える。

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

• 濃紺の面は1ページに2回まで。リボンは1ページに1本まで
• 見出しは「Manrope の英字ラベル（--c-accent-text）＋日本語の見出し」の2段
• サービスの詳しいページは B02 の切り替えを使わず、縦に読ませる