バウハウス構成 Bauhaus Kousei

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/bauhaus-kousei/DESIGN.md

# DESIGN.md — バウハウス構成 / bauhaus-kousei

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

1920年代の構成主義ポスターの規律をWebに。円・三角・矩形は「装飾」ではなく**レイアウトの骨格**。
原色の面と対角線がコンテンツを運ぶ。「黄黒ストライプ＋Futura」のような安直な様式記号に頼らず、
図形はすべて構造として機能させる（意味なく浮遊させない）。

**キーワード**: 構成 / 対角線 / 原色の面 / 規律 / 非対称
**この見た目が向く場面**: デザイン教育・アート系スクール・クリエイティブイベント・展覧会・文化施設

## 2. タイポグラフィ

- 和文見出し: Zen Kaku Gothic New / ウェイト 900（本文との落差を大きく取る）
- 和文本文: Zen Kaku Gothic New / ウェイト 400 / サイズ 16px / 行間 1.85 / 字間 0（詰めない）
- 欧文・数字: Jost（幾何サンセリフ）。**大文字＋字間 +0.12em** でポスター的に組む。
  和文との使い分け: ラベル・年号・英字見出し・巨大な構成要素としての数字はすべて Jost。
  本文和文中の英字混植は行わない（Jost はラベル・数字専用、本文の地の文には使わない）
- 見出しスケール: h1 40〜76px（`clamp(40px, 7vw, 76px)`）／ h2 30〜44px／ラベル 13〜15px。
  **級数の跳躍を大きく取る**（本文16pxに対しh1は最大76px＝4.75倍）
- 特記: 縦ラベル（`transform: rotate(-90deg)`）は**1画面（1セクション）につき1回まで**。
  ヒーローとカリキュラムの2箇所のみで使用し、乱用しない
- 節番号ラベル（`.sec-no`、見出し直上の小型英字eyebrow）は、**和文見出しの機械的な英訳を
  並べない**。「コース案内→Courses」のような辞書訳ではなく、学校固有の呼称・コードネームを当てる
  （本デモでは §1 の構成主義／バウハウスの文脈に沿い、Grundlehre（基礎課程）・Meister（担当教員）・
  Werkschau（成果展）・Aufnahme（入学）というバウハウス由来の語彙をコードネームとして採用し、
  和文見出しの直訳にしない）。さらに**全セクションに機械的に付けない**——
  **縦ラベル（rotate(-90deg)）を配置するセクションでは、sec-noを必ず省略すること
  （縦ラベルとsec-noの同一セクション内共存は禁止。推奨ではなく禁止事項）**。
  新しいセクションに縦ラベルを追加した直後に、そのセクションのsec-headからsec-noを
  削除したか必ず確認する。原本のカリキュラム節と同じ趣旨のHTMLコメント
  （<!-- この節はeyebrowを置かない：縦ラベルが既に節の識別子として機能している -->）を、
  縦ラベルを使う全セクションに残し、「消しても成立するか」をセクションごとに点検すること

## 3. カラー（vivid-multi）

紙・墨の無彩色ペアに、赤・青・黄の三原色を**面**として使う。緑は排他的に追加しない
（信号色トリオ「赤・黄・緑」を避けるため。青を三色目に選定）。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 紙（ベース） | #f5f1e8 | 60%以上 |
| 墨（本文・見出し・ink面） | #21201d | 25% |
| 赤（面・帯・図形） | #c33127 | 8% |
| 青（面・帯・図形） | #1d5bb8 | 5% |
| 黄（面・図形のアクセント） | #e8b50a | 2% |

- 配色ルール: 赤・青・黄は**面（ブロック・対角の帯・SVG図形）としてのみ**使う。本文の地の文
  の文字色として常用しない（見出し・ラベルの一部を色文字にするのは可、多用しない）
- **面に文字を載せる場合は必ずコントラスト実測に基づき固定する**（§9 の `--on-*` 変数を使う。
  自己判断で白文字/墨文字を選ばない）
- **グローバルな `h1, h2, h3 { color: var(--color-ink); }`（要素セレクタ）は、色面を背景に持つ
  見出しに対しても墨色を強制してしまう**。要素セレクタは祖先の背景色を考慮しないため、
  赤面・墨面などに置いた見出しでは必ず個別クラスで `color` を `--on-*` に上書きすること
  （例: `.course-a h3 { color: var(--on-red); }` / `.course-b h3 { color: var(--on-ink); }`。
  `.expo .sec-head h2 { color: var(--on-ink); }` と同じパターン）。紙地の見出し（`.course-c h3`等）
  はグローバル色のままでよい。**新しく色面つきの見出しを追加するたびに、この上書きを忘れていないか
  必ず点検する**（構造的に取りこぼしやすい箇所）
- **副次テキスト（ラベル・小口の`dt`・メタ情報など）を薄く見せたい場合も `opacity` プロパティは使わない**。
  `opacity` は背景ごとの実測コントラストを保証できず（同じ数値でも面によって比率が変わる／
  親要素の`opacity`と乗算で意図せず低下する）、AA基準を割り込む温床になる。必ず
  `color: rgba(r, g, b, a)` の**固定色**として書き、背景ごとに実測4.5:1以上を満たす alpha を
  個別に確定してCSSコメントに実測値を残す（§9 参照）。同じ役割のラベルが複数背景に跨る場合
  （例: コースカードの赤面/墨面/紙面）は背景ごとに別ルールを立て、1つの数値で兼用しない
- **赤帯・青帯（`.hero-band` / `.expo-band` 等の `transform: rotate()` 帯）に載せる副次テキスト
  （サブキャプション・英字ラベル等）は、紙色をさらに alpha 減衰させることを原則禁止する**。
  地の「紙 on 赤 = 4.92:1」「紙 on 青 = 5.75:1」自体が最小限の余裕しかないため、`rgba()` で
  少しでも透過させると小型文字のAA基準（4.5:1）を割り込みやすい。**推奨のデフォルト解は
  `.hero-band .sub` と同様に減衰せず `var(--on-red)` / `var(--on-blue)` をそのまま使うこと**。
  新規に alpha 値を発明する前に、まずこの非減衰パターンで足りるかを検討する。どうしても
  視覚的に弱く見せたい場合のみ、alpha値を個別に実測し4.5:1（小型文字）を満たすことを確認した
  うえで、CSSコメントに実測値を残すことを必須とする（§9 の `.course-a dl dt` を0.95ではなく
  0.98まで引き上げた記述と同じ厳密さを、帯内副次テキストにも適用範囲として明記する。詳細コード
  例は §9「帯内の副次テキストは減衰させない」参照）
- 3色を等しい大きさの隣接ブロックで並べない（後述 §8・国旗的トリコロールの回避）

## 4. レイアウト・余白（broken-grid）

- コンテンツ最大幅: 1280px（`.wrap`）/ セクション内側パディング 32px（モバイル20px）
- グリッドの性格: **等サイズ3カラムを禁止**。コースカードは6カラムグリッド上で
  大＋縦長＋横長の非対称な矩形に組む（§9 コード例参照）
- セクション間余白: 108px 基準（モバイル72px）/ 要素間は 8px の倍数
- ヒーローの構成: 中央寄せにしない。対角に回転させた赤い帯（校名）を上部に置き、
  黄の円が帯の右下角に重なり、見出しはその下に大きく左揃えで展開。青の三角形は
  ヒーローとコース案内の境界をまたいで配置し、次節へ視線を引き継ぐ（§9 コード例参照）
- 数字（01/02/03等）は特大の構成要素として使う。コースカードの背景に薄い透過色で
  巨大な号数を置き、見出し・本文はその手前に重ねる
- **対角の帯（hero-band/expo-band等）は見出し要素の代替として使わない**。帯を新設する
  セクションには必ずそのセクション本来の `.sec-head`（`h2`を含む）を併置すること
  （詳細と正例は §9「対角の帯」参照）

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 紙地・sticky・下端3px墨罫線。ナビリンクは通常時墨色、
  ホバーで下線が左から右へ伸びる（赤の下線、0.18s）。本文リンクとは別扱い
  （本文中のリンクは `.link-arrow` で下線常時＋矢印移動ホバー）
- `.link-arrow` の背景差分: 紙地では通常時墨・ホバーで赤へ反転する（赤 on 紙は実測AA適合）。
  **黄地だけは例外**——赤文字/赤罫線は黄地で実測2.92:1となりWCAG AA不合格
  のため使わない。黄地版はテキスト・罫線を墨のまま固定し（墨 on 黄 = 8.57:1）、代わりに
  リンク左の小さな墨の矩形マーカーがホバーで右へ移動・拡大する「面の伸縮」で状態変化を示す。
  紙地版（文字色反転）とは意図的に別の型にし、同じホバー手癖を使い回さない。
  **この黄×赤の禁止は`.link-arrow`に限らず色面全般の一般則**——黄と赤の組み合わせは
  地・文字のどちらの向きでも実測2.9:1前後でAA未達。**赤面・墨面のホバー等で黄色文字を
  新規採用する場合も同様に事前実測し**（黄 on 赤 = 実測2.92:1でNG）、AA未達なら
  文字色でなく「下線の伸縮・面のマーカー移動」など別の状態変化で代替すること
- 角丸: 0px（全要素直角。circleのみSVGの正円として例外的に丸い形を持つが、
  これは装飾図形としての「円」であり、角丸border-radiusの使用ではない）
- 影: 使わない（box-shadow 不使用。奥行きは色面の重なりと対角の傾きで作る）
- ボタン: CTAは**サイト全体で1つのみ**（ヒーローの「入学案内」）。直角・墨地／白抜き文字、
  ホバーで赤地に反転。他の誘導はすべて `.link-arrow`（下線＋矢印）のテキストリンクとする
- カード的要素: コースカードは色面のブロック（赤・墨・黄枠+紙地の3種で構成し、
  3色を横並びの均等ブロックにしない）。罫線区切りではなく面の切り替えで領域を示す
- フォーム要素: 本デモでは使用しない（入学案内は情報表示＋リンクのみ）
- 画像の扱い: 写真は使わず、SVGの幾何図形（円・三角・矩形・直線）と教員の「担当図形マーク」
  で統一。図形の色は §3 の5色に限定
- アクセント色の適用範囲: 赤＝帯・CTA hover・数字ラベル／青＝三角・タイムラインの点・
  修了展の帯／黄＝ヒーローの円・コースC枠線・入学案内サイドパネル。色ごとに役割を固定し、
  同じ色を全箇所に機械的に使い回さない

## 6. モーション（rich）

- 量: rich。スクロールに応じて図形が**ゆっくり回転・平行移動**する（transform/opacityのみ）
- 役割差＋階段ディレイ: 見出し（`.reveal--lead`）は1.15sの長い遷移で先頭・遅延なし、
  本文・メタ情報（`.reveal--body`）は0.75s、カード群（`.reveal--card`）は0.65sで
  セクション内のインデックスに応じて90ms刻み・最大360msまでディレイを階段状に付与
  （すべて同じ0.6sで一律フェードしない）
- 図形は**スクロール位置に連動**して変化する。ヒーローの黄円は `scrollY * 0.03deg` で
  緩やかに回転し続け、青三角は `(scrollY - 260) * 0.06px`（±30pxにクランプ）で
  上下にドリフトする。**自動ループ・CSS `animation: infinite` は使わない**
  （ユーザーがスクロールを止めれば図形も止まる）
- `prefers-reduced-motion: reduce` 時は reveal を即時表示（transition なし）、
  scroll連動の transform 更新を行わない

## 7. 写真・イラスト・図版

- 写真は使わない。円・三角・矩形・直線のみのSVGで構成する
- 図形の色は必ず §3 の5色（紙・墨・赤・青・黄）に限定。グラデーション・ドロップシャドウ・
  角丸を図形に一切使わない
- 教員紹介は顔写真の代わりに、担当領域を示す幾何図形マーク（矩形・帯・円・三角の輪郭）を使う

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / システムフォント任せにしない（Zen Kaku Gothic New / Jost で組む）
- 紫〜青の装飾グラデーションを使わない。**グラデーション・box-shadow・border-radius を
  一切使わない**（図形も面も常にフラット・直角。SVGの正円のみ形状としての「丸」を許容する）
- 緑を追加しない（赤・青・黄の3色構成を厳守。信号色トリオ「赤黄緑」を作らない）
- 「黄と黒のストライプ＋幾何学フォント」に頼ったバウハウス風テンプレの記号化をしない。
  図形は必ずレイアウトの骨格として機能させ、意味なく浮かせる埋め草にしない
- 円・三角・矩形を等サイズの3カラムに横並びさせない（コースカードは非対称サイズで組む）
- CTAボタンをサイト内に複数作らない（「入学案内」の1つのみ。他はテキストリンクで誘導）
- 面（赤・青・黄のブロック）に載せる文字色を実測せず選ばない（§9 の `--on-*` 変数を用いる。
  黄地に白/紙色の文字を置かない＝実測1.69:1でNG）
- 黄と赤を地・文字のどちらの向きでも組み合わせない（実測2.9:1前後でAA未達。ホバー等の
  状態変化で黄文字を新規採用する場合も同様。§5の代替パターンを使う）
- 紙地用の副次ラベルalpha（0.70）を、クラス名が同じという理由だけで色面コンテナ内に
  流用しない（判定はクラス名でなく実際の祖先背景で行い、色面ごとに再実測する。§9参照）
- 副次テキストの減衰表現に `opacity` プロパティを使わない（`color: rgba()` の固定色＋実測
  コメントで代替する。§3・§9参照）
- 赤帯・青帯（`.hero-band`/`.expo-band`等）内の副次テキストに安易な alpha 減衰をかけない
  （地の「紙 on 赤 4.92:1」「紙 on 青 5.75:1」はぎりぎりの余裕しかない。デフォルトは
  `var(--on-red)`/`var(--on-blue)` を非減衰のまま使い、どうしても減衰する場合のみ実測
  4.5:1確認＋コメント必須。§3・§9参照）
- 対角の帯を見出し（`.sec-head h2`等）の代替として使わない（帯は校名・展覧会名等を運ぶ
  装飾的なレイアウト骨格であり、見出し階層 h1→h2→h3 を成立させる責務は常に通常の見出し
  要素が負う。§4・§9参照）
- 縦ラベル（`rotate(-90deg)`）を1画面に2つ以上重ねない
- 縦ラベルを使うセクションで sec-no を併用しない（vert-label と sec-no の
  同一セクション内共存は禁止。原本のカリキュラム節を正例とする）
- 絵文字・既製アイコンセットをアイコンに使わない（自作インラインSVGの幾何図形のみ）
- 無限ループのCSSアニメーション・マーキー・数字のカウントアップを使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-paper: #f5f1e8;
  --color-ink: #21201d;
  --color-red: #c33127;
  --color-blue: #1d5bb8;
  --color-yellow: #e8b50a;

  /* 面に文字を載せるときの色（実測コントラスト、WCAG AA 4.5:1基準） */
  --on-red: var(--color-paper);    /* 紙 on 赤 = 4.92:1 */
  --on-blue: var(--color-paper);   /* 紙 on 青 = 5.75:1 */
  --on-yellow: var(--color-ink);   /* 墨 on 黄 = 8.57:1（紙/白は1.69:1でNG） */
  --on-ink: var(--color-paper);    /* 紙 on 墨 = 14.45:1 */

  --font-heading: "Zen Kaku Gothic New";
  --font-body: "Zen Kaku Gothic New";
  --font-latin: "Jost";

  --space-unit: 8px;
  --radius: 0;
  --max-width: 1280px;
  --gutter: 24px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap`

### 対角の帯（ヒーロー・修了展で使用する構造要素）

帯はCSSの `transform: rotate()` を使ったブロック（グラデーションなし・単色塗り）。
装飾SVG図形（円・三角）とは別に、これは「校名／展覧会名を運ぶレイアウトの骨格」として扱う。

```css
.hero-band {
  background: var(--color-red);
  color: var(--on-red);            /* 紙色文字。実測4.92:1 */
  transform: rotate(-3.4deg);
  margin: 30px -60px 46px -12px;   /* 左右にはみ出し、ポスターの断ち切りを再現 */
  padding: 26px 60px 26px 44px;
  width: calc(100% + 90px);
}
```

`html, body` には `overflow-x: hidden` を必ず指定すること（帯のはみ出しはビューポート幅を
超えるが、意図的な断ち切りであり横スクロールを発生させてはならない）。

**帯は見出し要素の代替ではない。** 対角の帯（`.hero-band` / `.expo-band` 等）は、そのセクション
が本来持つ `.sec-head`（`h2` を含む）を省略してよい根拠には**ならない**。帯はあくまで校名・
展覧会名などを運ぶ装飾的なレイアウト骨格であり、見出し階層（h1→h2→h3）を成立させる責務は
常に通常の見出し要素が負う。修了展セクションの実装——`.sec-head h2` と `.expo-band` を常に
セットで使う構成——を正例とする。帯を新設・追加するときは、必ず同一セクション内に
`.sec-head h2`（または相当する見出し要素）が存在するかを合わせて点検すること
（帯だけでh2を省略した実装はNG）。

```html
<!-- 正例: 帯とセクション見出しは常にセットで使う（修了展セクションの実装） -->
<section class="expo">
  <div class="sec-head"><p class="sec-no">Werkschau</p><h2>修了展</h2></div>
  <div class="expo-band"><span class="sub">2025年度 卒業・修了制作展</span></div>
  <!-- ...本文... -->
</section>
```

```html
<!-- 誤例: 帯だけでh2を省略している（見出し階層が断絶する） -->
<section class="expo">
  <div class="expo-band"><span class="sub">2025年度 卒業・修了制作展</span></div>
  <!-- h2がどこにもない -->
</section>
```

### 帯内の副次テキストは減衰させない（`.hero-band` / `.expo-band` の`.sub`等）

赤帯・青帯は地の文字色（紙 on 赤 = 4.92:1、紙 on 青 = 5.75:1）自体に最小限の余裕しかないため、
帯内のサブキャプション・英字ラベルなど副次テキストであっても `rgba()` によるalpha減衰は
原則禁止する。

```css
/* 推奨デフォルト: 減衰せず on-* をそのまま使う（新規alphaを発明する前にまずこれを検討する） */
.hero-band .sub { color: var(--on-red); }   /* 紙 on 赤 = 4.92:1 のまま。alpha減衰しない */
.expo-band .sub { color: var(--on-blue); }  /* 紙 on 青 = 5.75:1 のまま。alpha減衰しない */
```

視覚的に弱く見せたい場合でも、まず上記の非減衰パターンで足りるかを検討すること。どうしても
減衰が必要な場合のみ、個別に実測し4.5:1（小型文字基準）を満たすことを確認したうえで、実測値を
CSSコメントに残す（§3の`.course-a dl dt`を0.95→0.98へ引き上げた記述と同じ厳密さを適用する）。

```css
/* どうしても減衰が必要な場合の例（実測必須。安易な数値の使い回しは禁止） */
.hero-band .caption { color: rgba(245, 241, 232, 0.90); font-weight: 600; }
/* 実測 4.55:1（紙 on 赤、14px時点。フォントサイズを変えたら再実測すること） */
```

### 節をまたぐ図形（円・三角）

```html
<svg class="hero-circle shape-spin" viewBox="0 0 300 300" aria-hidden="true">
  <circle cx="150" cy="150" r="128" fill="var(--color-yellow)"/>
</svg>
<svg class="hero-triangle shape-drift" viewBox="0 0 260 220" aria-hidden="true">
  <polygon points="130,10 250,205 10,205" fill="none" stroke="var(--color-blue)" stroke-width="6"/>
</svg>
```

```css
.hero-circle { position: absolute; top: -10px; right: -30px; width: 300px; height: 300px; z-index: 1; }
/* 帯の右下角に重ねる。ヒーロー全体に対して absolute、bandより手前(z-index高)にはしない */
.hero-triangle { position: absolute; left: 40%; bottom: -96px; width: 260px; height: 220px; z-index: 4; }
/* bottom を負の値にしてヒーローセクションの下端をまたぎ、次セクションに突き出す */
```

### コースカード：非対称6カラム（等サイズ3カラム禁止の実装）

```css
.course-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(60px, auto);
  gap: 20px;
}
.course-a { grid-column: 1 / 5; grid-row: 1 / 3; background: var(--color-red); color: var(--on-red); }
.course-b { grid-column: 5 / 7; grid-row: 1 / 4; background: var(--color-ink); color: var(--on-ink); }
.course-c { grid-column: 1 / 5; grid-row: 3 / 4; background: var(--color-paper); border: 3px solid var(--color-yellow); }
/* 大（赤・横長）＋ 縦長（墨）＋ 横長（紙地に黄枠）の3種で組む。
   3色を隣接ブロックの塗りとして横並びにしない（国旗的トリコロールの回避） */

/* グローバル h1,h2,h3{color:var(--color-ink)} は色面を無視するため、色面カードのh3は
   個別に --on-* で上書きする（紙面のcourse-cは上書き不要） */
.course-a h3 { color: var(--on-red); } /* 実測 4.92:1 */
.course-b h3 { color: var(--on-ink); } /* 実測 14.45:1 */
```

巨大な号数はカード内に半透明の watermark として重ねる（rgba透過。グラデーションではない）。

```css
.course .num {
  position: absolute; right: 14px; top: -6px;
  font-family: var(--font-latin); font-weight: 700; font-size: clamp(90px, 11vw, 148px);
}
.course-a .num { color: rgba(245, 241, 232, 0.28); } /* 紙色を28%不透明度で重ねるのみ */
```

### 副次テキストの色（背景ごとの固定alpha、`opacity`プロパティは使わない）

`.course dl dt`（コース詳細のラベル）は赤面/墨面/紙面の3背景に跨って使われるため、
共通の`opacity`ではなく背景別に実測4.5:1以上のalphaを個別に確定して固定色を当てる。
赤面は素の紙文字でも4.92:1しか余裕がないため、alphaを大きく下げられない点に注意
（0.85程度まで下げると3.9:1台に落ちてAA未達になる）。赤面（`.course-a dl dt`）は11pxの
小型テキストでAA基準に対する余裕がほぼゼロになりやすいため、alphaは0.95ではなく0.98程度まで
引き上げ、フォントウェイトも600に上げて視認の安全マージンを確保すること。

```css
.course dl dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-latin); }
.course-a dl dt { color: rgba(245, 241, 232, 0.98); font-weight: 600; } /* 実測 4.78:1（紙 on 赤） */
.course-b dl dt { color: rgba(245, 241, 232, 0.60); } /* 実測 6.05:1（紙 on 墨） */
.course-c dl dt { color: rgba(33, 32, 29, 0.70); }     /* 実測 5.69:1（墨 on 紙） */
```

背景が常に紙地1種類であることが**そのコンポーネントの構造上保証されている**場合に限り、
「墨 on 紙」の実測値（0.70 alpha = 5.69:1）を共通して使ってよい。
**この判定はクラス名ではなく実際の祖先背景で行うこと。** ラベルのクラス名（`.adm-row dt` 等）は、
業種・構成が変わった際に紙地以外の色面コンテナ（例: 黄地のサイドパネルに受付・アクセス情報を
統合する等）へ移設される可能性がある。同じクラス名を色面コンテナの内側で再利用する場合は、
紙地用の値を機械的に流用せず、**そのコンテナの背景色で必ず再実測**し、下記の黄地用のように
個別ルールを立てること。

```css
.hero-meta .lbl { color: rgba(33, 32, 29, 0.70); /* 実測 5.69:1（墨 on 紙） */ }

/* 黄地（サイドパネル等）の副次ラベルは紙地用の0.70をそのまま流用しない。
   黄背景では0.70は実測4.37:1でAA(4.5:1)未達。0.72で4.59:1まで回復するが、
   小型テキストの安全マージンを見て0.78〜0.80まで引き上げること。 */
.on-yellow-panel dt { color: rgba(33, 32, 29, 0.80); } /* 実測 5.58:1（墨 on 黄） */
```

### モーション：役割差＋階段ディレイ＋スクロール連動の図形

```js
// reveal: セクションごとにインデックスを振り、90ms刻み・最大360msで階段ディレイ
document.querySelectorAll('.reveal').forEach(function (el) {
  var idx = /* セクション内での出現順 */ 0;
  el.style.transitionDelay = Math.min(idx * 90, 360) + 'ms';
});

// スクロール連動の図形（自動ループなし。scrollイベント駆動のみ）
window.addEventListener('scroll', function () {
  requestAnimationFrame(function () {
    var y = window.scrollY;
    document.querySelectorAll('.shape-spin').forEach(function (el) {
      el.style.transform = 'rotate(' + ((y * 0.03) % 360).toFixed(2) + 'deg)';
    });
    document.querySelectorAll('.shape-drift').forEach(function (el) {
      var offset = Math.max(-30, Math.min(30, (y - 260) * 0.06));
      el.style.transform = 'translateY(' + offset.toFixed(1) + 'px)';
    });
  });
}, { passive: true });
```

`prefers-reduced-motion: reduce` では上記のイベントリスナーを登録せず、`.reveal` は
即座に `visible` クラスを付与し、`.shape-spin` / `.shape-drift` の transform を `none` に固定する。