TRANSIT GENERAL OFFICE（トランジットジェネラルオフィス） DESIGN.md

株式会社トランジットホールディングス／TRANSIT GENERAL OFFICE（https://www.transit-web.com/）のデザイン仕様書。 1996 年創業。「bills」「LOTUS」「SIDEWALK STAND」「@Home Cafe」など 150 店舗以上のカフェ・レストラン・ホテルを企画運営する、ライフスタイルオペレーションプラットフォーマー。 最大の特徴は、和文と欧文で書体・字間・ウェイトをすべて別建てにすること。和文は Ryo Gothic PlusN（凛ゴシック）、欧文は Futura PT で、Futura は例外なく letter-spacing: 0.1em、和文見出しは 0.08em、和文本文は 0.033em という三段の字間規律が全ページを貫く。 色は白地に純黒 #000000 のみ。有彩色を 1 色も持たないモノクロームで、彩度は写真だけが担う。 box-shadow は 1 つも使わない。区切りは #e5e5e5 の 1px 罫と #fafafa / #f2f2f2 の薄い面だけ。 実サイトの computed style 実測（2026-08-11 取得。トップ＋「COMPANY」ページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地・モノクローム・大きな写真。店舗写真の色が主役なので、UI からは彩度を完全に抜く。Futura PT の広い字間がスタイリング全体のリズムを決める
• TRANSIT GENERAL OFFICE について: 「遊び場を創ろう。」がタグライン。飲食・ホテル・空間プロデュースを横断する企業で、個々のブランドは強い個性を持つが、ホールディングスのサイトは徹底して中立。器としての中立さが意図されている
• 密度: 低〜中密度。トップは全幅 KV → 3 分割カード → ニュース の縦積み。1 画面あたりの要素数を絞り、写真を大きく見せる
• キーワード: 白地、モノクローム、Ryo Gothic PlusN、Futura PT、字間の三段規律（0.033em / 0.08em / 0.1em）、ゴースト pill、影なし
• 特徴:
  • 和文は Ryo Gothic PlusN（ryo-gothic-plusn、Adobe Fonts）。Adobe のオリジナル和文ゴシックで、字面が小さめ・ふところが締まり、欧文と混ざっても主張しすぎない
  • 欧文は Futura PT（futura-pt、Adobe Fonts）。ウェイトは 600（Demi）で固定。幾何学サンセリフの円と直線が、店舗写真の有機的な質感と対比を作る
  • 字間が三段に規律化されている。和文本文 0.033em（15px → 0.5px）→ 和文見出し 0.08em → Futura PT 0.1em。この 3 つ以外の値をほとんど使わない
  • Futura PT は例外なく 0.1em。40px でも 14px でも比率が変わらない。サイズに関わらず字間比を固定する
  • line-height: 2.0 が本文の基準（15px → 30px）。和文見出しは 1.5、Futura は 1.27〜1.29 と締まる
  • 有彩色を 1 色も持たない。#000000 / #333333 / #2c2c2c / #fafafa / #f2f2f2 / #e5e5e5 / #ffffff の 7 段のグレースケールのみ
  • box-shadow は 1 つも使わない（実測 0 件）
  • palt を掛けない（font-feature-settings: normal）
  • 絞り込みは border-radius: 25px の「ゴースト pill」（面色なし・1px solid #e5e5e5）。選択中だけ黒く塗る

2. Color Palette & Roles

実測値。地は純白 #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 body）、テキストは純黒 #000000。uniqueBackgrounds に有彩色が 1 件も現れない完全なモノクローム。

Brand（ブランド）

• Black (#000000, rgb 0,0,0): 唯一の主色。テキスト・アウトライン・選択中 pill の面・ページャーの現在位置。このサイトは純黒を積極的に使う（多くの日本語サイトが避ける選択を、あえて取っている）
• Charcoal (#2c2c2c, rgb 44,44,44): フッターの CONTACT ブロックの面。純黒より一段浅く、フッターだけを黒から浮かせる
• Dark Gray (#333333, rgb 51,51,51): ヘッダー・ナビのテキスト色。本文の純黒より一段弱い。「今いる場所」より「行き先」を弱く見せる

Neutral（面・罫）

• Background (#ffffff): ページ地色。純白
• Surface (#fafafa, rgb 250,250,250): VISION / GROUP COMPANIES / BOARD MEMBERS セクションの面。ほとんど白に見える薄さ
• Surface 2 (#f2f2f2, rgb 242,242,242): OUR BUSINESS セクションの面。#fafafa より一段濃い
• Border (#e5e5e5, rgb 229,229,229): ゴースト pill の枠、区切り罫
• Scrim (rgba(0,0,0,0.7)): カード写真の上に敷くオーバーレイ。白文字を必ず読ませるための固定値

Semantic（意味的な色）

サイト上に意味色は一切存在しない（有彩色ゼロ）。フォームのバリデーション等で必要になる場合は、モノクロームを壊さない最小限の彩度に留める。

• Danger／Error: 低彩度の赤（#a3352e 目安）。鮮やかな赤を使うとモノクロームが崩壊する
• Warning: グレースケールのまま太字と枠線で示すのが本来の作法。色に頼らない
• Success: 低彩度の緑（#3f6b48 目安）
• 非活性: #e5e5e5 の枠 ＋ #999999 の文字

3. Typography Rules

和文と欧文を完全に別建てにする。Ryo Gothic PlusN（和文）と Futura PT（欧文）で、書体・ウェイト・字間・行間のすべてを分ける。字間は 0.033em / 0.08em / 0.1em の三段しか使わない。

3.1 和文フォント

• 本文・見出し・UI すべて: Ryo Gothic PlusN（ryo-gothic-plusn、Adobe Fonts）。Adobe が開発したオリジナル和文ゴシック（凛ゴシック）。字面が小さめでふところが締まり、欧文と混植しても和文だけが太って見えない
• ウェイト: 400（本文）/ 600 / 700（見出し） の 3 段
• フォールバック: sans-serif のみ。ryo-gothic-plusn, sans-serif という 2 段の極端に短いチェーン
• 一部の UI パーツ（ハンバーガー・アイコンラベル）のみ "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif の別スタックを使う。本文系には持ち込まない
• 実装時は必ず Adobe Fonts のキットを読み込むこと。フォールバック側の設計がないため、外れると印象が大きく変わる

3.2 欧文フォント

• Futura PT（futura-pt、Adobe Fonts）。ウェイトは 600（Demi）で固定
• letter-spacing は例外なく 0.1em。40px → 4px / 30px → 3px / 18px → 1.8px / 16px → 1.6px / 14px → 1.4px。サイズが変わっても比率が変わらない
• line-height は 1.27〜1.29。和文（2.0）と比べて極端に締める
• 用途: グローバルナビ（HOME / COMPANY / BUSINESS / BRANDS / NEWS / RECRUIT / CONTACT）、セクション見出し（NEWS / VISION / COMPANY PROFILE / CONTACT）、日付（2026.08.06）、人名のローマ字（SADAHIRO NAKAMURA）、コピーライト
• 見出しは「Futura PT の英字を大きく、Ryo Gothic の和文を小さく」の 2 段組。英字が主で和文が従
• 等幅フォントは使わない
• preview.html での注記: ryo-gothic-plusn（凛ゴシック）/ futura-pt（Futura PT）はいずれも Adobe Fonts のドメインライセンスのため、ローカルの preview.html では表示できない。プレビューでは Google Fonts の Zen Kaku Gothic New（400 / 500 / 700）を和文の代替、Jost（600）を Futura PT の代替に用いる。Jost は Futura を参照した幾何学サンセリフで、円と直線の構成が最も近い。実装時は必ず Adobe Fonts を読み込むこと

3.3 font-family 指定

css/* 和文（本文・見出し・UI） */
font-family: ryo-gothic-plusn, sans-serif;

/* 欧文（ナビ・セクション見出し・日付） */
font-family: futura-pt, sans-serif;

/* アイコンラベル等の一部 UI（本文系には使わない） */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", sans-serif;

/* body の既定 */
font-size: 15px;
font-weight: 400;
line-height: 2.0;              /* 30px */
letter-spacing: 0.5px;         /* = 0.033em */
color: #000000;
font-feature-settings: normal; /* palt は使わない */

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

• チェーンを伸ばさない。sans-serif で即座に締める
• 和文と欧文を 1 つのスタックに混ぜない。font-family を要素ごとに切り替える設計で、フォールバックによる自動的な和欧分担に頼らない
• Futura PT を和文に当てない（和文グリフを持たないため、和文が sans-serif に落ちて崩れる）
• 和文に Futura PT を混ぜたスタックを書かない。必ず ryo-gothic-plusn 単独で指定する

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

• 字間は三段しかない: 和文本文 0.033em / 和文見出し 0.08em / Futura PT 0.1em
• Futura PT の 0.1em はサイズを問わず一定。49px でも 10px でも比率が変わらない
• 和文見出しは必ず weight 700。600 は Futura PT 専用
• line-height は 和文本文 2.0 / 和文見出し 1.5 / Futura PT 1.27〜1.29 の三段

3.5 行間・字間

• 本文の行間 (line-height): 2.0（15px → 30px）。長文の説明段落だけ 1.75 に締める
• 和文見出しの行間: 1.5（32px → 48px / 30px → 45px）。38px の Statement のみ 1.55
• Futura PT の行間: 1.27〜1.29。和文の 2.0 と比べて極端に締め、英字ブロックを塊として見せる
• 字間 (letter-spacing): 三段の規律
  • 和文本文: 0.033em（15px → 0.5px）。実装上は letter-spacing: 0.5px の px 固定
  • 和文見出し: 0.08em（38px → 3.04px / 32px → 2.56px / 30px → 2.4px）
  • Futura PT: 0.1em（全サイズ共通）
  • 例外はフッターの補足文のみ -0.01em
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 字間の三段（0.033 / 0.08 / 0.1em）以外の値を作らない。これがサイト全体のリズムを保っている
• Futura PT には必ず 0.1em を当てる。サイズを変えても字間比は変えない
• 和文の見出しは字間を 0.08em まで開き、weight を 700 にする。この 2 つはセットで動く
• 行間で和欧を分ける。和文 2.0 / 欧文 1.27〜1.29。同じブロックに置いても行送りを揃えない
• 本文の行間 2.0 を下回らない（長文でも 1.75 まで）

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 店舗・ブランド名は『L'AS TOKYO』のようにアポストロフィを含む欧文が二重かぎ括弧に入る。括弧の前後と欧文内部では改行させない

• 「ライフスタイルオペレーションプラットフォーマー」のような長いカタカナ語は、意味の切れ目（ライフスタイル／オペレーション／プラットフォーマー）で折る

• 日付（2026.08.06）とカテゴリバッジは同じ行に置き、間で折らない

• Futura PT の英字見出しは絶対に折らない（white-space: nowrap）。字間 0.1em の塊としての見え方が崩れる

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。Ryo Gothic PlusN の等幅の字面をそのまま使う
• Ryo Gothic PlusN は元々字面が小さめなので、palt で詰めると隙間が空きすぎて逆に読みにくくなる。字間は letter-spacing を開く方向でのみ調整する
• 和欧が別書体なので、混植部分では kern が効かない。和文と欧文を同じ行に混ぜず、行またはブロックで分ける設計にする

3.8 縦書き

• 現行サイトは全面横組み（writing-mode: horizontal-tb）
• 店舗紹介や理念ページで縦組みを見せる場合は以下

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: ryo-gothic-plusn, sans-serif;
letter-spacing: 0.08em;   /* 縦組みは見出しの字間に揃える */
line-height: 2.0;

• Futura PT は縦組みに使わない（幾何学サンセリフは縦中横で破綻する）。縦組み中の英字・数字は text-combine-upright: all で 2 桁までを縦中横にする

4. Component Stylings

Buttons

Ghost Pill（絞り込みチップ） — このサイトを象徴する形

• Background: transparent（面色を持たない）
• Text: #000000
• Border: 1px solid #e5e5e5
• Padding: 10px 24px
• Border Radius: 25px
• Font: Ryo Gothic PlusN / 13〜15px / weight 700 / lh 2.0 / ls 0.5px
• 例: 「すべて」「ニュースリリース」「メディア掲載」「グループ情報」「お知らせ」／「会社概要」「トップメッセージ」「ビジョン」「グループ会社」「沿革」
• 選択中は面を #000000 に塗り、文字を #ffffff に反転する。枠は消す
• 面色を持たないのが既定。塗るのは選択中の 1 つだけ

Text Button（矢印つきテキストリンク）

• Background: transparent
• Text: #000000
• Border: なし
• Border Radius: 6px（当たり判定の角丸。視覚的には見えない）
• Font: Ryo Gothic PlusN / 18px / weight 700
• 左に › を円で囲んだアイコンを置く
• 例: 「ニュースを詳しく見る」「ビジョンを詳しく見る」「採用情報を見る」

Back to Top（大きなピル）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 35px
• Font: Ryo Gothic PlusN / 18px / weight 700（見出し側は Futura PT 30px / ls 0.1em）
• 例: 「トップページに戻る」

Badges

Category Tag（白地・矩形）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Padding: 0 9px
• Border Radius: 0px — pill と矩形を役割で分ける
• Font: Ryo Gothic PlusN / 14px / weight 700 / lh 1.2
• 例: 「グループ情報」「ニュースリリース」「メディア掲載」
• 絞り込みは pill（radius 25px）、記事の属性表示は矩形（radius 0）

Pagination（円）

• Background: transparent（非選択）/ #000000（選択中）
• Border: 1px solid #000000
• Border Radius: 50%
• サイズ: 10px × 10px 前後
• KV カルーセルのインジケーター

Inputs

• Background: #ffffff
• Border: 1px solid #e5e5e5
• Border (focus): 1px solid #000000
• Border Radius: 0px
• Padding: 14px 16px
• Font: Ryo Gothic PlusN / 15px / weight 400 / lh 2.0 / ls 0.5px
• Text Color: #000000 / Placeholder: #999999
• ラベルは Futura PT / 14px / weight 600 / ls 0.1em で入力欄の上に置く

Cards（写真カード）

• Background: 写真
• Overlay: rgba(0,0,0,0.7) のスクリム（固定値。写真の明度に関わらず必ず掛ける）
• Border: なし
• Border Radius: 0px
• 構成（中央寄せの 2 段組）:
  • 上段: Futura PT / 25px / weight 600 / ls 0.1em / #ffffff（"TOP MESSAGE"）
  • 下段: Ryo Gothic PlusN / 18px / weight 700 / lh 2.0 / #ffffff（「メッセージ」）、左に › の円アイコン
• 英字が主、和文が従。英字を大きく上に、和文を小さく下に置く

Section Heading（英字主・和文従の 2 段組）

サイトを通じて使われる定型。福光屋（和文主・英字従）とは逆の構成。

html<h2 class="en">COMPANY PROFILE</h2>
<p class="ja">会社概要</p>

• 上段: Futura PT / 30px / weight 600 / lh 1.27 / ls 0.1em / #000000
• 下段: Ryo Gothic PlusN / 15〜16px / weight 700 / ls 0.5px / #000000
• 英字を大きく、和文を小さく。英字が意味の主役

Footer CONTACT Block

• Background: #2c2c2c（純黒ではなく一段浅い炭色）
• 見出し: Futura PT / 49px / weight 600 / ls 0.1em / #ffffff（"CONTACT"）
• 主文: Ryo Gothic PlusN / 18px / weight 700 / lh 2.0 / #ffffff
• 補足: Ryo Gothic PlusN / 13px / weight 400 / lh 1.44 / ls -0.13px / #ffffff
• リンク: Ryo Gothic PlusN / 15px / weight 700 / #ffffff
• コピーライト: Futura PT / 10px / weight 600 / ls 0.1em / #ffffff

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px（サイト全体の標準コンテナ）
• 読み物カラム: 760px
• Padding (horizontal): 24〜48px
• KV は左右に 48px の余白を残して置く（全幅ブリードにしない）。上下は全幅
• ヘッダーは全幅・白地・不透過。KV に重ねない

Grid

• Columns: トップの導線カードは 3 カラム、役員紹介は 3〜4 カラム、ニュースは 1 カラムのリスト
• Gutter: 24px
• セクションの面色で区切る: 白 #ffffff → #fafafa → #f2f2f2 の 3 段を交互に敷く
• ゴースト pill の絞り込みは右寄せでリストの上に置く

6. Depth & Elevation

実測の box-shadow は 0 件。このサイトは影を一切使わない。

• 奥行きは #ffffff → #fafafa → #f2f2f2 → #2c2c2c の 4 段の面と1px の罫 #e5e5e5 だけで表現する
• 落ち影・浮き上がりを作らない。カードもボタンも完全にフラット
• 写真の上に文字を置くときは必ず rgba(0,0,0,0.7) のスクリムを掛ける。写真の明度に応じて濃度を変えない（固定値で運用する）

7. Do's and Don'ts

Do（推奨）

• 和文は Ryo Gothic PlusN、欧文は Futura PT で、font-family を要素ごとに切り替える
• 字間は三段（和文本文 0.033em / 和文見出し 0.08em / Futura PT 0.1em）だけを使う
• Futura PT には必ず letter-spacing: 0.1em。サイズが変わっても比率を変えない
• Futura PT のウェイトは 600 で固定する
• 和文見出しは weight 700 ＋ ls 0.08em のセットで作る
• 行間で和欧を分ける。和文 2.0（見出し 1.5）/ Futura PT 1.27〜1.29
• セクション見出しは**「Futura PT 30px を大きく上、和文 15〜16px を小さく下」の 2 段組**（英字が主）
• 絞り込みは面色を持たないゴースト pill（radius 25px / 1px solid #e5e5e5）。選択中だけ黒く塗る
• 記事の属性表示は矩形バッジ（radius 0 / 1px solid #000000）。pill と役割で分ける
• 有彩色を使わない。#000000 / #2c2c2c / #333333 / #fafafa / #f2f2f2 / #e5e5e5 / #ffffff の 7 段で通す
• 純黒 #000000 を積極的に使う（このサイトは黒を避けない）
• セクションの区切りは**面色の 3 段（白 → #fafafa → #f2f2f2）**で作る
• 写真上の文字には必ず rgba(0,0,0,0.7) のスクリムを掛ける
• 影を使わない。面色と 1px の罫だけで構成する
• Adobe Fonts のキットを必ず読み込む（フォールバックが sans-serif だけのため）

Don't（禁止）

• 和文と欧文を 1 つの font-family スタックに混ぜない（必ず要素ごとに切り替える）
• Futura PT を和文に当てない（和文グリフを持たないため sans-serif に落ちて崩れる）
• Futura PT の字間を 0.1em から動かさない（サイズ別に調整しない）
• Futura PT のウェイトを 600 以外にしない
• 字間の三段以外の値を作らない（0.05em や 0.15em を挟むとリズムが崩れる）
• 和文と欧文の行送りを揃えない（和文 2.0 / 欧文 1.29 の差がこのサイトの手触り）
• 和文の見出しを weight 600 にしない（600 は Futura PT 専用。和文見出しは 700）
• 有彩色を足さない（uniqueBackgrounds に有彩色が 1 件も無い設計）
• セクション見出しを「和文主・英字従」にしない（このサイトは英字が主）
• ゴースト pill に面色を与えない（塗るのは選択中の 1 つだけ）
• 絞り込みチップに矩形を使わない／属性バッジに pill を使わない（形で役割を分ける）
• 写真上のスクリムの濃度を写真ごとに変えない（rgba(0,0,0,0.7) の固定値）
• palt を掛けない、字間を詰める方向に動かさない
• 影を作らない（box-shadow の実測は 0 件）
• 本文の行間を 1.75 未満にしない
• Futura PT の英字見出しを折り返させない（white-space: nowrap）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）。ゴースト pill は padding 10px 24px で高さ 44px を確保する
• 写真カードはカード全体をタップ領域にする
• ページャーの円（10px）は当たり判定を 44px に広げる（見た目は 10px のまま）
• モバイルでは pill の列を横スクロールさせ、折り返して 2 行にしない

フォントサイズの調整

• 本文 15px は据え置く（14px を下回らない）
• Futura PT の Page Title 40px → モバイルでは 26〜28px。letter-spacing: 0.1em は維持する
• 和文 Statement 38px → 22〜24px。letter-spacing: 0.08em と weight 700 は維持する
• Futura PT のナビ 16px は縮めない
• Copyright 10px は縮めない（ls 0.1em も維持）
• 字間の三段と行間（和文 2.0 / 欧文 1.29）はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff   （純白）
Black:          #000000   （唯一の主色。テキスト・枠・選択中の面）
Charcoal:       #2c2c2c   （フッター CONTACT ブロックの面）
Dark Gray:      #333333   （ヘッダー・ナビのテキスト）
Surface:        #fafafa   （VISION / GROUP COMPANIES セクションの面）
Surface 2:      #f2f2f2   （OUR BUSINESS セクションの面）
Border:         #e5e5e5   （ゴースト pill の枠・区切り罫）
Scrim:          rgba(0,0,0,0.7)   （写真上の固定オーバーレイ）
有彩色:          なし（実測 0 件）
JP:             ryo-gothic-plusn, sans-serif   ← 凛ゴシック（weight 400 / 700）
EN:             futura-pt, sans-serif          ← Futura PT（weight 600 固定 / ls 0.1em）
Body:           15px / weight 400 / lh 2.0 / ls 0.033em (0.5px)
JP Heading:     weight 700 / lh 1.5 / ls 0.08em
EN Heading:     Futura PT weight 600 / lh 1.27〜1.29 / ls 0.1em
Section Head:   Futura PT 30px（主）＋ 和文 15〜16px / weight 700（従）
Letter Spacing: 三段だけ — 和文本文 0.033em / 和文見出し 0.08em / Futura 0.1em
Feature:        font-feature-settings: normal（palt を使わない）
Radius:         ゴースト pill 25px / Back to Top 35px / ページャー 50% / それ以外 0
Shadow:         none（実測 0 件。面色と 1px 罫だけ）
Container:      1280px（読み物 760px）

プロンプト例

TRANSIT GENERAL OFFICE のデザインシステムに従って、飲食ブランドの一覧ページを作成してください。
- 和文は ryo-gothic-plusn（凛ゴシック。無ければ Zen Kaku Gothic New → sans-serif）、
  欧文は futura-pt（無ければ Jost → sans-serif）。1 つのスタックに混ぜず、
  要素ごとに font-family を切り替える
- letter-spacing は三段だけ使う：和文本文 0.033em（15px → 0.5px）/
  和文見出し 0.08em / Futura PT 0.1em。この 3 つ以外の値を作らない
- Futura PT は letter-spacing 0.1em・font-weight 600 で固定。サイズを変えても
  字間比とウェイトは変えない
- 和文見出しは font-weight 700 ＋ letter-spacing 0.08em のセットで作る
- 行間は和文 2.0（見出し 1.5）、Futura PT 1.27〜1.29。同じブロックでも行送りを揃えない
- セクション見出しは「Futura PT 30px を大きく上、和文 15〜16px / weight 700 を小さく下」
  の 2 段組（英字が主、和文が従）
- 絞り込みは面色を持たないゴースト pill：transparent / 1px solid #e5e5e5 /
  border-radius 25px / padding 10px 24px / 和文 13px weight 700。
  選択中だけ #000000 に塗って文字を白に反転し、枠を消す
- 記事の属性表示は矩形バッジ：#ffffff / 1px solid #000000 / border-radius 0 /
  14px weight 700。pill と矩形を役割で分ける
- 有彩色は 1 色も使わない。#000000 / #2c2c2c / #333333 / #fafafa / #f2f2f2 /
  #e5e5e5 / #ffffff の 7 段で通す（純黒は避けずに積極的に使う）
- セクションの区切りは面色の 3 段（白 → #fafafa → #f2f2f2）を交互に敷いて作る
- 写真の上に文字を置くときは必ず rgba(0,0,0,0.7) のスクリムを掛ける（濃度は固定）
- box-shadow は一切使わない。奥行きは面色と 1px solid #e5e5e5 の罫だけで作る
- Futura PT の英字見出しは white-space: nowrap で折り返させない
- コンテナ幅は最大 1280px、読み物カラムは 760px
- font-feature-settings は normal（palt は掛けない）