🚀 新規事業

2026-06-25_未来共創コミュニティHP_再現仕様書

最終更新 2026年06月26日 ／ 40_新規事業/TERASU/2026-06-25_未来共創コミュニティHP_再現仕様書.md

未来共創コミュニティ HP（カラー版）再現仕様書 — Reproduction Spec

対象実体: /Users/oogushisaki/local-previews/mirai-kyoso-bw/index.html（白黒検証版）
本仕様の正本ルール: 色・フォント種別・写真は「グローバル基盤」の原版マップを正とする。レイアウト・余白・グリッド・clamp値・文言・レスポンシブ・挙動・id/アンカー・file実値hexはfile実値を正とする（白黒版の表示用hex/serifは色・フォントの“見た目”には使わないが、構造記述としてのfile実値hexは併記する）。

1. この仕様書の使い方

この仕様書は、ページを「セクション」の積み重ねとして定義している。各セクションには 領域名・スロット（差し替え可能な枠）・寸法・原版色・文言 が記載されている。再現を依頼するときは、次の形式で指示すれば1か所ずつ確実に再現できる。

  • 基本形: 「○○セクションの△△に□□を置いて」
  • 例: 「ヒーローの背景に交流会の横長写真を置いて」
  • 例: 「SERVICEのカード①のアイコンを吹き出し（AIインタビュー）にして」
  • 例: 「ABOUTの本文を□□のテキストに差し替えて」
  • 色を指定するとき: 「ネイビー #1B2A47」「ゴールド #C0A062」のように、本書の配色パレット表の色名で指す。
  • 写真を指定するとき: 各セクションの「スロット表」に書いた 原版の写真内容 を基準に差し替える（白黒版でプレースホルダ枠の箇所も、原版は写真が入る）。
  • section番号で指すとき: 「3. ページ全体のセクション順マップ」の 番号（01〜12） で呼ぶ（例: 「section 06（分科会）の③タイルを差し替えて」）。

各セクションのブループリントは「位置・背景・グリッド・スロット・文言・色・挙動・レスポンシブ」を統一フォーマットで持つ。寸法はすべてfile実値の clamp/px、見た目の色はすべて原版hex（構造記述用に file実値hexも併記）で書いてある。

2. グローバル基盤（全セクション共通の土台）

ページ全体に効く設計基盤。各セクションはこの土台の上に組む。

2-1. 配色パレット（原版・唯一の正）

基調2色を必ず守る：ネイビー #1B2A47 / ゴールド #C0A062。

役割 色名 hex（原版） file変数／file実値hex（白黒・見た目には不採用） 主な用途
基調1 ネイビー #1B2A47（濃 #16243F / やや明 #22335A） --dark #15171c / --dark-2 #1d2027 ヘッダー背景・ヒーロー暗幕・円形バッジ・分科会タイル・最終CTA暗幕
基調2 ゴールド（真鍮系） #C0A062（淡 #C8AE76 / 濃 #B0904E） （白黒版になし） 主要CTA塗り＋白文字・SERVICE円アイコン・各「一覧を見る」矢印・eyebrow小ラベル・装飾
見出し文字 濃紺寄りの黒 #1B2333 --ink #16181c 見出し・主要テキスト・ボタン枠/文字
本文文字 本文グレー #5B616C --ink-2 #4b4e55 本文・リード・リンク文字
補足文字 補足グレー #8A8F98 --muted #8b8e95 キャプション・役職・日付曜日・eyebrow文字（※eyebrow色は原版ゴールド）・会員プレースホルダ文字
罫線 ライトグレー #E7E6E2 --line #e6e6e3 区切り線・カード枠・テーブル罫
背景（白） 白 #FFFFFF --bg #ffffff 基本背景・白セクション
背景（淡） 淡グレージュ #F6F5F2 --alt #f5f4f2 淡色セクション（SERVICE / イベント+インタビュー / 会員紹介 / FAQ）
プレースホルダ塗り — #E7E6E2 --ph #e6e5e2 画像枠の地
プレースホルダ文字（.ph::afterの「画像」ラベル） — #A6A59F --ph-ink #a6a59f 「画像」ラベル文字
暗領域上の文字 白 #FFFFFF / 補助 rgba(255,255,255,.82) --on-dark #f1f0ed / --on-dark-2 #a9abb0 ナビ文字・暗背景上テキスト・フッター本文
暗領域上の罫線 白半透明 rgba(255,255,255,.16〜.1) --on-line 暗背景上の区切り
フッター背景 原版＝ネイビー #1B2A47（最濃 #16243F 相当） file実値 #101216（--darkでも--dark-2でもない独自hex） フッター .ft 背景
フッターコピーライト文字 くすんだ補助色 file実値 #6f7177（.ft-cr{color:#6f7177}・「約」ではなく実値で断定） コピーライト行

注: フッター背景は file 上唯一の独自hex #101216（CSS変数を経由しない直書き）。原版では他の暗領域と同じくネイビー #1B2A47 に翻訳する。構造を触る際は file の #101216 を起点に置換すること。

2-2. タイポグラフィ（原版・すべてゴシック）

用途 原版フォント weight file変数（不採用分）
日本語（本文・ラベル） Noto Sans JP（モダンゴシック） 400–500 --jp（採用）
見出し（ヒーローキャッチ＋各 .s-ttl） Noto Sans JP ゴシック Bold〜Black 700–900 --serif（Noto Serif JP）は使わない。原版はゴシック太字
数字（100 / 700 / 1,000 / 06.20 等） Inter（太めサンセリフ） 600–800 --en（採用）
矢印・記号（→ / ‹ › / COMPANY LOGO） Inter — --en（採用）
  • ロードフォント実体（file <head>・Google Fonts 実値）: Noto+Sans+JP:wght@400;500;700;900 / Noto+Serif+JP:wght@600;700 / Inter:wght@500;600;700;800。
  • Noto Serif JP は 600;700 のみロード（file の見出しが serif のため）。原版はゴシックで描くため Noto Serif JP は不要＝再現時はロードからも外してよい。
  • 本文 weight 一覧（400–900 / 600–800）はこの 3 ファミリのロード済み weight と整合する（Noto Sans JP=400/500/700/900、Inter=500/600/700/800）。
  • body基本: font-size:15px / line-height:1.85 / font-feature-settings:"palt"（約物詰め） / -webkit-font-smoothing:antialiased。
  • 原版のみの装飾: SERVICE見出し「未来共創コミュニティでできること」の直上に、小さな手書き風スクリプト体の装飾文字1つ（ゴールド #C0A062）。白黒版HTMLには無い（file非搭載）→ 再現時に追加する原版基準要素。

2-3. グリッド・コンテナ・余白

項目 値
コンテナ .wrap 最大幅 1200px（--maxw）／ margin:0 auto
.wrap 左右padding（ガター） clamp(18px, 4.5vw, 64px)（--gut。375px時≒18px / 1422px超で64px固定）
section 上下padding padding-block: clamp(56px, 7.5vw, 108px)
例外 STATS は style="padding-block:0" で上下0に上書き（罫線で隣接接続）。1 <section> 内に .wrap を複数回並べる箇所あり（各 .wrap が独立で中央寄せ・gut保持）

リセット: *{margin:0;padding:0;box-sizing:border-box} / html{scroll-behavior:smooth} / html,body{max-width:100vw;overflow-x:clip}（横スクロール禁止の床）/ img{display:block;max-width:100%} / a{color:inherit;text-decoration:none}。

2-4. 共通部品

eyebrow .eye（セクション上の英字小ラベル）

プロパティ 値
フォント Inter（--en）／ weight 600 ／ font-size:.72rem ／ letter-spacing:.26em ／ text-transform:uppercase
色 原版＝ゴールド #C0A062（白黒版 --muted）
表示 inline-flex; align-items:center; gap:10px ／ margin-bottom:16px
先頭装飾 ::before width:24px; height:1px の横線。色もゴールド #C0A062
中央版 .eye.c justify-content:center（SERVICE / FAQ で使用）

逐語: About / Service / Community / Case / Member / FAQ（uppercase表示で ABOUT, SERVICE…）。

セクション見出し .s-ttl

プロパティ 値
フォント 原版＝Noto Sans JP ゴシック Bold〜Black（700–900）（--serifは使わない）
サイズ font-size:clamp(1.5rem, 3vw, 2.3rem) ／ line-height:1.45 ／ letter-spacing:.03em
色 見出し色 #1B2333

ボタン全種

ベース .btn: inline-flex; align-items:center; justify-content:center; gap:.6em; font-weight:700; font-size:.9rem; letter-spacing:.04em; padding:1em 2em; border-radius:2px; border:1px solid; transition:.28s ease; white-space:nowrap。矢印 .ar（Inter）はホバーで translateX(4px)。

クラス 原版・通常 原版・ホバー file素の定義（白黒・見た目不採用） 使用箇所
.btn--fill ゴールド #C0A062 塗り＋白文字（枠もゴールド） 濃ゴールド #B0904E インク黒塗り＋白文字 主要CTA
.btn--ghost 透明＋文字/枠＝濃紺 #1B2333 ネイビー #1B2A47 塗り＋白文字 同（濃紺＝--ink） 「詳しく見る」「イベント一覧を見る」
.btn--ondark ゴールド #C0A062 塗り＋白文字 わずかに濃ゴールド #B0904E へ沈む background:#fff; color:var(--ink); border-color:#fff／ホバー #e3e2df（白塗り＋黒字） 最終CTAボタン
.btn--line-d 透明＋白文字＋枠 rgba(255,255,255,.6) 白塗り＋文字ネイビー #1B2333＋白枠 同 ヒーロー「開催予定を見る」
  • ヒーロー内 .btn--fill 上書き: file実値は .fv__cta .btn--fill{background:#fff; color:var(--ink); border-color:#fff}（ホバー #dedcd8）＝白塗り黒字だが、原版はゴールド #C0A062 塗り＋白文字（主要CTA扱い）。
  • ヘッダーCTA .hcta: border:1px solid #fff; padding:.7em 1.4em; border-radius:2px; font-weight:700; font-size:.8rem、ホバーで 背景#fff＋文字ネイビー。逐語「無料イベントに参加する」。
  • テキストリンク .lnk: inline-flex; gap:.5em; font-weight:600; font-size:.84rem、文字＝濃紺 #1B2333 / 矢印「→」＝ゴールド #C0A062。矢印は Inter、ホバー translateX(3px)。逐語例: 分科会一覧を見る → ほか各セクション。

プレースホルダ .ph（画像枠）

position:relative; background:#E7E6E2; overflow:hidden。::after で content:"画像"（中央配置・色 #A6A59F・font-size:.72rem・letter-spacing:.16em・Noto Sans JP）。修飾 .ph.np は content:""（ラベル非表示＝枠のみ）。原版では各 .ph に実写真が入る（写真内容は各セクションのスロット表参照）。

注: .ph::after の「画像」ラベル文字色 #A6A59F（--ph-ink）と、会員紹介 .mem の文字色 --muted（#8b8e95＝原版マップ #8A8F98 系）は別物。会員のセルは .ph ではなく .mem クラスでテキスト直書き（後述10章）。

2-5. reveal アニメーション .rv

状態 指定
初期 .rv opacity:0; transform:translateY(24px)／ transition opacity .8s cubic-bezier(.16,1,.3,1), transform .8s 同カーブ
表示 .rv.in opacity:1; transform:none
ディレイ修飾 .d1=.08s / .d2=.16s / .d3=.24s / .d4=.32s

付与パターン: グループ先頭に .rv、兄弟に .d1, .d2… を巡回付与し、左→右/上→下にスタッガー登場。

2-6. 固定ヘッダー .hdr の挙動

状態 指定（原版色付き）
初期 position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(21,23,28,0)（完全透明・ヒーロー上に乗る）／ padding:16px 0／ transition background/box-shadow/padding .35s
.solid（60px超スクロール時） background:rgba(21,23,28,.96)（ネイビー #1B2A47 を96%不透明）／ box-shadow:0 1px 0 rgba(255,255,255,.06)／ padding:10px 0

2-7. 末尾 <script>（IIFE・4挙動）

  1. ヘッダー solid 切替: scrollY>60 で .solid 付与/解除。scroll を passive 登録 ＋ 初期化で即1回実行。
  2. ハンバーガー開閉: #burger クリックで #hnav に open トグル。ナビ内 a クリックで open 除去（自動クローズ）。
  3. reveal（IntersectionObserver）: 交差で .in 付与＋unobserve。rootMargin:'0px 0px -8% 0px' / threshold:.04。全 .rv を observe。
  4. 保険タイマー: 3500ms 後に未表示 .rv へ強制 .in（フェイルセーフ）。

2-8. レスポンシブ方針（ブレークポイント）

  • @media(max-width:1000px): .split→1カラム(gap48px) / .svc-grid6→3列 / .bk-grid7→4列 / .case-grid4→2列 / .mem-grid6→3列（.mem:nth-child(3n)右罫消し）。
  • @media(max-width:760px): .hnavがフルスクリーンドロワー化（fixed inset:0; background:rgba(21,23,28,.98)＝ネイビー98%; 縦中央 gap22px; 初期 translateX(100%)→.openで none; ナビ文字1.05rem）。.burger表示。ヒーロー .fv__badge非表示。.stats-in4→2列 / .about-grid1列 / .svc-grid2列 / .bk-grid2列 / .iv-grid3列維持 / .case-grid2列 / .faq-grid1列(gap0) / .mem-grid2列 / .ft-in縦積み。
  • @media(max-width:430px): .case-grid と .iv-grid を 1fr 1fr（共に2列）。

2-9. 角丸・影・罫線リズム（早見）

要素 border-radius box-shadow border
ボタン/タグ 2px なし 1px solid（種別で色）
カード .svc 3px hover 0 16px 34px rgba(0,0,0,.07) 1px solid #E7E6E2
分科会 .bk 3px なし なし（オーバーレイ縁取り）
画像枠 .pic/.ph 3px（case picは上のみ 3px 3px 0 0） なし なし
丸ナビ .car-btn 50% なし 1px solid #E7E6E2（hoverでネイビー）
ヒーローバッジ .fv__badge 50% なし 1px solid rgba(255,255,255,.5)
SERVICE円アイコン .svc__ic 50% なし 1px solid ゴールド #C0A062（線もゴールド）

3. ページ全体のセクション順マップ

# セクション id / class 受け側id（アンカー） 背景（原版） 要点
01 固定ヘッダー .hdr — 透明→ネイビー96% ロゴ無・ナビ7項目＋白枠CTA
02 ヒーロー（FV） .fv — 交流会写真＋ネイビー暗幕 全画面・キャッチ3行・ゴールド主CTA＋ゴーストCTA・右下円バッジ
03 実績バー（STATS） .stats — 白 #FFFFFF 数字4枚・縦罫区切り・padding-block:0
04 未来共創コミュニティとは（ABOUT） #about about 実在 白 #FFFFFF 左コラージュ／右テキスト2カラム
05 できること（SERVICE） #service .alt service 実在 淡色 #F6F5F2 円アイコンカード6枚・中央見出し
06 分科会紹介（COMMUNITY） #community community 実在 白 #FFFFFF ネイビー縦長タイル7枚
07 開催予定のイベント .split 左（<section class="alt">） events 受け側id欠落（後述） 淡色 #F6F5F2 イベント3行＋ゴーストボタン
08 最新インタビュー .iv-grid（.split 右） interview 実在（.iv-grid に付与） 淡色 #F6F5F2 人物カード3×2＝6枚（07と同一セクション内2カラム）
09 成功事例（CASE） <section id="case"> .case-grid case 実在 白 #FFFFFF 写真＋本文カード4枚・丸ナビ
10 会員紹介（MEMBER） <section id="member"> .mem-grid .alt member 実在 淡色 #F6F5F2 COMPANY LOGO 枠6セル格子
11 よくあるご質問（FAQ） #faq faq 実在 白 #FFFFFF アコーディオン2列6問
12 最終CTA #cta .final cta 実在 交流会写真＋ネイビー暗幕 中央寄せ・ゴールドCTA
— フッター #footer .ft footer 実在 原版＝ネイビー #1B2A47（file実値 #101216） ナビ7＋規約＋SNS4＋コピーライト

アンカー整合性の注意（重要）: ナビ／フッターは7リンクを持つが、#events だけ受け側 id が file 内に存在しない。イベントを内包する <section class="alt"> には id が付いていないため、#events クリックはジャンプ先なし（ページ最上部相当の挙動）。#interview は .iv-grid に id="interview" が付与され実在、#about #service #community #member #case #faq #cta #footer はいずれも実在。再現時は <section class="alt">（イベント+インタビュー）に id="events" を追加して受け側を補完するのが望ましい（原版意図はイベント節へのジャンプ）。

4. 各セクションのブループリント

01. 固定ヘッダー .hdr

位置: 画面上端全幅固定（fixed; inset:0 0 auto 0; z-index:100）。初期透明、60px超スクロールで .solid（ネイビー #1B2A47 を96%・padding 16→10px・下辺に白6%ライン）。
内部: .wrap > .hdr-in（flex; align-items:center; justify-content:space-between; gap:18px）。左＝ナビ .hnav、右＝ハンバーガー .burger（PC非表示）。

ナビ .hnav（flex; gap:clamp(12px,1.6vw,26px)）。リンク .hnav a: 白文字 #FFFFFF・font-size:.82rem・weight500・letter-spacing:.03em・padding-bottom:2px。ホバー下線 ::after（bottom:-1px; height:1px; background:#fff; width:0→100%; transition:width .3s）。

# 文言 href 受け側id実在? 種別
1 未来共創コミュニティとは #about ○ リンク
2 分科会 #community ○ リンク
3 イベント #events ✗（欠落） リンク
4 インタビュー #interview ○ リンク
5 会員紹介 #member ○ リンク
6 料金プラン #faq ○ リンク
7 お問い合わせ #footer ○ リンク
8 無料イベントに参加する #cta ○ .hcta（白枠ボタン・ホバーで白塗り＋文字ネイビー）

ハンバーガー .burger: 760px以下で display:flex。flex-direction:column; gap:5px; width:28px、span×3＝height:2px; background:#fff。z-index:120、aria-label="メニュー"。
レスポンシブ: 〜1000px 横並び維持。760px以下で .burger 出現＋ .hnav フルスクリーンスライド（ネイビー98%・縦中央 gap22px・右からスライドイン .4s・文字1.05rem）。

02. ヒーロー .fv

位置: ヘッダー直下＝最初のセクション。position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; color:#fff。

背景レイヤー .fv__bg（奥→手前3層）

層 指定 原版
ベース塗り inset:0; z-index:0; background:#15171c ネイビー #1B2A47
写真 img width/height:100%; object-fit:cover（白黒版 filter:grayscale(1) contrast(1.04) brightness(.92)）／ src＝/assets/hero.png カラー実写真（grayscale外す）。ビジネス交流会の横長写真＝明るいモダンな会場でスーツの男女が立ち歓談
暗幕 ::after linear-gradient(100deg, rgba(13,15,19,.86) 0%, .62 45%, .34 100%) ネイビー暗幕。100deg＝左濃(86%)→右薄(34%)

画像srcの注意: ヒーロー背景 img と最終CTA背景 img は file 上 同一ファイル /assets/hero.png を参照している。原版でも「ビジネス交流会の横長写真」で内容は同一系統だが、file構造としては同一srcである点に留意（差し替え時は2箇所が連動。別写真にしたい場合は片方のsrcを分ける）。

スロット一覧

スロット 要素 文言（逐語・<br>位置） 寸法・色
キャッチ h1.fv__catch.rv 未来を共に創る、／経営者・専門家の／共創コミュニティ ゴシック700–900・clamp(2.1rem,5.4vw,3.9rem)・line-height:1.34・letter-spacing:.04em・白#FFFFFF・左揃え
サブ p.fv__sub.rv.d1 AIインタビュー×マッチングで、／新しいビジネスの可能性を広げます。 margin-top:26px・clamp(.95rem,1.5vw,1.12rem)・line-height:1.95・max-width:34em・白86%
CTA群 .fv__cta.rv.d2 （下記2ボタン） margin-top:40px; flex; flex-wrap:wrap; gap:14px
主CTA .btn.btn--fill 無料イベントに参加する → → #cta ゴールド #C0A062 塗り＋白文字（枠もゴールド／file実値は白塗り黒字）。ホバー濃ゴールド #B0904E
サブCTA .btn.btn--line-d 開催予定を見る（矢印なし）→ #events（受け側id欠落・要補完） 透明＋白文字＋白60%枠。ホバー白塗り＋文字ネイビー
円バッジ .fv__badge.rv.d3 信頼でつながり、／ビジネスが／加速する場所 右下絶対配置（後述）

内側 .fv__in: .wrap 併用・z-index:2・padding-top:96px; padding-bottom:60px。

円形バッジ .fv__badge: absolute; right:clamp(16px,4vw,60px); bottom:clamp(40px,6vw,80px); z-index:2。width:clamp(120px,15vw,168px); aspect-ratio:1; border-radius:50%。枠 1px solid rgba(255,255,255,.5)、背景 rgba(21,23,28,.5)（ネイビー50%）、backdrop-filter:blur(3px)、display:grid; place-items:center; text-align:center; padding:18px。文字 .78rem / line-height:1.7 / weight500 / 白#FFFFFF。760px以下 display:none。

reveal順: キャッチ(遅延0)→サブ(.08s)→CTA(.16s)→バッジ(.24s)。
レスポンシブ: 〜1000px clampで自動縮小。760px以下＝バッジ消える＋ヘッダーハンバーガー化＋CTAが折返し得る。

03. 実績バー .stats（STATS）

位置: ヒーロー直下（上から2番目）。<section class="stats" style="padding-block:0">、背景白 #FFFFFF、下辺 border-bottom:1px solid #E7E6E2。CSS側 .stats{background:var(--bg);border-bottom:1px solid var(--line)}、padding-block:0 は inline style 上書き（セクション上下padding=0／内側カラムpaddingで高さ決定）。
グリッド .stats-in（.wrap併用）: display:grid; grid-template-columns:repeat(4,1fr); gap:0。カラム区切り＝各 .stat 右に border-right:1px solid #E7E6E2、最終のみ右罫なし（縦罫3本）。

各カラム .stat: padding:clamp(28px,4vw,46px) clamp(14px,2vw,28px); text-align:center; flex column; align-items:center; gap:6px。上から「アイコン→数字+単位→ラベル」。

  • アイコン .stat__ic: SVG 34×34・viewBox 0 0 24 24; fill:none; stroke:currentColor; stroke-width:1.6・色#1B2333（opacity.85）（ゴールド指定なし）・margin-bottom:6px。
  • 数字 .stat__v: Inter weight800・clamp(1.9rem,3.6vw,2.9rem)・line-height:1・letter-spacing:-.02em・#1B2333・flex; align-items:baseline; gap:.18em。単位 .u＝Noto Sans JP weight700・.42em・letter-spacing:.02em。
  • ラベル .stat__l: .8rem・letter-spacing:.03em・本文グレー #5B616C。
列 アイコン図柄 数字 単位 ラベル reveal
1 人物2人（頭円＋肩） 100 名以上 インタビュー実施 遅延0
2 右肩上がり折れ線 700 回以上 交流会・イベント開催 .d1
3 書類＋横線3本 1,000 本以上 記事・インタビュー掲載 .d2
4 棒グラフ4本＋基線 数千万 円規模 のマッチング実績 .d3

レスポンシブ: 1000px=4列維持。760px以下=1fr 1fr（2×2）。罫線処理＝.stat:nth-child(2n){border-right:0}（偶数セル右罫消し）＋.stat:nth-child(-n+2){border-bottom:1px solid #E7E6E2}（上段2セルに下罫追加）。430px=2×2維持。ホバーなし。

04. 未来共創コミュニティとは #about（ABOUT）

位置: STATS直下（上から3番目）。<section id="about">（受け側id実在）、背景白 #FFFFFF、section共通padding。
グリッド .about-grid（.wrap併用）: grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center。左＝写真コラージュ、右＝テキスト。

左：コラージュ .about-collage: grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:12px。全タイル .ph.np（ラベルなし・無地#E7E6E2枠）。大タイルは grid-column:1/-1 で上段全幅、下段に小2枚（.sm ＋ .sm.s3{grid-column:span 1}＝下段右）。

タイル クラス 配置 アスペクト比 原版写真
大 .ph.big.np grid-column:1/-1（上段全幅） 16/8（2:1横長） 円卓の会議シーン
小1 .ph.sm.np 下段左 16/10 会議/交流の様子
小2 .ph.sm.s3.np 下段右（grid-column:span 1） 16/10（.sm継承） 会議/交流の様子

右：テキスト .about-body

スロット 要素 文言 色・寸法
eyebrow .eye About ゴールド #C0A062（横線も）・margin-bottom:16px
見出し .s-ttl 未来共創コミュニティとは ゴシック700+・clamp(1.5rem,3vw,2.3rem)・#1B2333・左揃え
本文 .about-body .s-lead（スコープ付き定義・ABOUT配下のみ有効／汎用 .s-lead 定義は無し） 未来共創コミュニティは、経営者・専門家・企業が信頼でつながり、互いの強みを活かして新しい価値を生み出す共創の場です。AIインタビューで想い・強み・課題を可視化し、最適な出会いと共創のきっかけを提供します。 .97rem・line-height:2・#5B616C・margin-top:18px
ボタン .btn.btn--ghost 詳しく見る → 透明＋濃紺 #1B2333枠/文字・margin-top:30px。ホバー＝ネイビー #1B2A47 塗り＋白文字

reveal: コラージュ.rv(遅延0)→テキスト.rv.d1。
レスポンシブ: 1000px=2カラム維持。760px以下=1カラム縦積み（上コラージュ→下テキスト、行間 clamp(30,5vw,72)）。

05. できること #service .alt（SERVICE 6枚）

位置: ABOUT直下（上から4番目）。<section id="service" class="alt" style="background:var(--alt)">（受け側id実在）、背景淡色 #F6F5F2。.wrap を2つ使用（①中央見出し ②グリッド）。
見出しブロック（中央 .wrap text-align:center）: eyebrow .eye.c＝Service（ゴールド #C0A062）／見出し .s-ttl＝未来共創コミュニティでできること（ゴシック700+・#1B2333・中央）。見出し直上に手書き風スクリプト装飾1点（ゴールド #C0A062）を追加（原版のみ・file非搭載）。

グリッド .svc-grid: margin-top:clamp(36px,4vw,56px); grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.4vw,18px)。

カード .svc: border:1px solid #E7E6E2; border-radius:3px; padding:30px 18px 26px; text-align:center; background:#FFFFFF; transition:.3s。ホバー translateY(-5px)+box-shadow 0 16px 34px rgba(0,0,0,.07)。
- 円アイコン .svc__ic: 48×48; border-radius:50%; border:1px solid ゴールド #C0A062・margin:0 auto 16px; display:grid; place-items:center。内SVG 23×23; stroke-width:1.6・線もゴールド #C0A062。
- タイトル .svc__t: ゴシック700・.92rem・letter-spacing:.02em・margin-bottom:10px・#1B2333。
- 説明 .svc__d: .76rem・line-height:1.85・#5B616C。

# アイコン図柄 タイトル 説明 reveal
① 吹き出し＋横線2本 AIインタビュー AIが想いや強みを引き出し、魅力を言語化します。 .rv
② 交差する2リンク（チェーン） ビジネスマッチング 信頼できる経営者同士で新しいビジネスのきっかけを創出します。 .d1
③ 頭2＋肩2（グループ） イベント 交流会や勉強会などリアルな場で人脈を広げられます。 .d2
④ 同心円＋放射4本（ターゲット） 分科会 同じテーマの仲間と学び、共に成長できる環境があります。 .d3
⑤ 拡声器＋音波弧 PR・ブランディング インタビュー記事で企業やサービスの魅力を発信できます。 .d1
⑥ 頭1＋肩＋右上に輝き 専門家相談 各分野の専門家に相談でき、課題解決をサポートします。 .d2

レスポンシブ: .svc-grid 6→3列(≤1000)→2列(≤760、430継承)。

06. 分科会紹介 #community（7タイル）

位置: SERVICE直下（上から5番目）。<section id="community">（受け側id実在）、背景白 #FFFFFF。単一 .wrap 内に .head-row＋.bk-grid。
見出し行 .head-row: flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap。左＝eyebrow Community（ゴールド #C0A062）＋見出し 分科会紹介（ゴシック700+・#1B2333）。右＝リンク .lnk＝分科会一覧を見る →（文字濃紺 #1B2333／矢印ゴールド #C0A062）→ #community。

タイルグリッド .bk-grid: margin-top:clamp(30px,3.5vw,48px); grid; grid-template-columns:repeat(7,1fr); gap:10px。

タイル .bk（<a href="#community">）: relative; aspect-ratio:3/4.4（縦長）; border-radius:3px; overflow:hidden; background:#1d2027→原版＝写真＋ネイビー #1B2A47 オーバーレイ。color:#fff; flex; align-items:flex-end; padding:16px 12px; transition:.3s。ホバー translateY(-5px)。
- オーバーレイ ::before: inset:0; linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.5)); opacity:.9→原版＝ネイビー暗幕（下ほど濃く）。
- ラベル .bk__l: relative; z-index:1・ゴシック700・.84rem・line-height:1.5・白 #FFFFFF。

# ラベル（<br>位置） reveal 原版写真
① マーケティング／分科会 .rv マーケ系シーン＋ネイビー暗幕
② 士業・師業／分科会 .d1 専門職＋ネイビー暗幕
③ AI活用／分科会 .d2 AI/テック＋ネイビー暗幕
④ 映像クリエイター／分科会 .d3 映像制作＋ネイビー暗幕
⑤ 事業承継・M&A／分科会（M&amp;A） .d1 事業承継/M&A＋ネイビー暗幕
⑥ セキュリティ／分科会 .d2 セキュリティ＋ネイビー暗幕
⑦ ヘルス＆／ビューティー／分科会（3行） .d3 健康・美容＋ネイビー暗幕

レスポンシブ: .bk-grid 7→4列(≤1000)→2列(≤760、430継承)。gap10px固定。

07. 開催予定のイベント ＋ 08. 最新インタビュー（2カラム .split）

位置: 分科会直下（上から6番目）。<section class="alt" style="background:var(--alt)">（受け側 id 無し＝#events のジャンプ先欠落・再現時は id="events" 付与を推奨）、背景淡色 #F6F5F2。左＝イベント／右＝インタビューを1セクションに内包。
.split: grid; grid-template-columns:0.92fr 1.18fr（右やや広）; gap:clamp(34px,4.5vw,68px); align-items:start。
各カラムヘッダ .blk-head: flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px。h2＝ゴシック700・clamp(1.3rem,2.4vw,1.7rem)・letter-spacing:.03em・#1B2333。右に .lnk（文字濃紺 #1B2333／矢印ゴールド #C0A062）。

07. イベント（左）

DOM: .blk-head（見出し開催予定のイベント＋リンクイベント一覧を見る →）→ .ev×3 → .ev-foot。

イベント行 .ev（<a href="#events">）: grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:20px 0; border-top:1px solid #E7E6E2。最終行のみ border-bottom 追加（.ev:last-of-type{border-bottom}。.ev-foot は div で .ev ではないため、3行目イベントが :last-of-type に該当）。
- 日付 .ev__d: Inter700・中央・min-width:54px。<b>＝block; 1.45rem; line-height:1・濃紺 #1B2333（ゴールドにしない）。<span>＝.66rem・補足グレー #8A8F98。
- タグ .ev__tag: inline-block; .64rem; letter-spacing:.08em; border:1px solid #E7E6E2; padding:2px 10px; border-radius:2px; margin-bottom:7px・文字#5B616C・背景透明。
- タイトル .ev__t: ゴシック700・.92rem・line-height:1.5・#1B2333。
- 場所 .ev__p: .74rem; margin-top:4px・#8A8F98。

行 日付<b> 曜日<span> タグ タイトル（<br>） 場所
1 06.20 (金) 19:00〜 交流会 未来共創交流会 in 東京／〜信頼でつながる経営者の輪〜 東京都・渋谷区
2 07.15 (火) 19:00〜 オンラインセミナー AI活用で変わるビジネスの未来／〜ChatGPT最新活用事例〜 オンライン開催
3 08.01 (金) 18:30〜 交流会 事業承継・M&A成功のポイント／〜実例から学ぶ実践セミナー〜 東京都・港区

下部ボタン .ev-foot > .btn.btn--ghost: margin-top:26px・イベント一覧を見る →。枠/文字＝ネイビー #1B2A47・透明背景。ホバー＝ネイビー塗り＋白文字。（※左カラムは上部 .lnk と下部 .btn の2か所「イベント一覧を見る」あり）

08. インタビュー（右）

DOM: .blk-head（見出し最新インタビュー＋リンクインタビュー一覧を見る →）→ .iv-grid（ボタンなし）。
.iv-grid（受け側id＝id="interview" 実在・#interview のジャンプ先）: grid; grid-template-columns:repeat(3,1fr); gap:18px 16px。
カード .iv（<a href="#interview">）: 上から写真→役職→氏名。
- 写真 .pic: aspect-ratio:1/1; border-radius:3px; margin-bottom:12px。白黒版＝.ph（#E7E6E2＋「画像」#A6A59F、.iv .pic.ph::after{filter:grayscale(1)}）。原版＝人物バストアップ実写真（ビジネス装の男女・正方形）。
- 役職 .iv__role: .68rem; letter-spacing:.04em・#8A8F98。
- 氏名 .iv__name: ゴシック700・.86rem; margin-top:3px・#1B2333。

# 位置 役職 氏名
1 1行左 株式会社A 代表取締役 鈴木 健太 様
2 1行中 B社 取締役 田中 美咲 様
3 1行右 株式会社C 代表取締役 山本 裕介 様
4 2行左 D社 代表 佐藤 大輔 様
5 2行中 E社 代表取締役 伊藤 真衣 様
6 2行右 F社 代表 中村 健太 様

reveal: 左ブロック .rv、右ブロック .rv.d1（ブロック単位・行/カード個別hoverなし）。
レスポンシブ: .split ≤1000で1カラム(gap48px・上イベント→下インタビュー)。.iv-grid 3列維持(〜760)→1fr 1fr(≤430)。

09. 成功事例 <section id="case"> .case-grid（CASE 4枚）

位置: イベント+インタビュー直下（上から8番目）。<section id="case">（受け側id case 実在）、背景白 #FFFFFF。
ヘッダ行 .car-head: flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(26px,3vw,42px)。左＝eyebrow Case（ゴールド #C0A062）＋見出し 成功事例（ゴシック700+・#1B2333）。右ブロック（flex; align-items:center; gap:18px; flex-wrap:wrap）＝リンク 成功事例一覧を見る →（文字濃紺/矢印ゴールド）＋丸ナビ。
丸ナビ .car-nav > .car-btn×2: ‹(aria前へ)・›(aria次へ)。38×38; border-radius:50%; border:1px solid #E7E6E2; background:#fff; display:grid; place-items:center、矢印Inter・色#5B616C寄り。ホバー＝枠/矢印ネイビー #1B2A47/#1B2333（JS連動なし・見た目のみ）。

グリッド .case-grid: grid; grid-template-columns:repeat(4,1fr); gap:16px。
カード .case: 写真 .pic ＋ 本文 .case__body の縦積み（リンクなし・静的）。
- 写真 .pic.ph: aspect-ratio:16/10; border-radius:3px 3px 0 0。白黒版＝#E7E6E2＋「画像」#A6A59F（filter:grayscale(1)）。原版＝シーン写真（会議/握手/オフィス）。
- 本文 .case__body: border:1px solid #E7E6E2; border-top:0; border-radius:0 0 3px 3px; padding:18px 18px 22px。
- .case__t: ゴシック700・.9rem; line-height:1.6; letter-spacing:.01em・#1B2333（<br>で2行）。
- .case__c: #8A8F98・.74rem; margin-top:10px; padding-top:10px; border-top:1px solid #E7E6E2。

# タイトル（<br>位置） 会社名 reveal
1 新規事業のパートナーと出会い／半年で売上3,000万円を達成 株式会社G 代表取締役 遅延0
2 分科会での出会いから／協業プロジェクトがスタート 株式会社H 代表取締役 .d1
3 未来共創のPRで／採用応募数が3倍に増加 株式会社I 人事部長 .d2
4 専門家相談で資金調達に成功／新規事業を加速 株式会社J 代表取締役 .d3

レスポンシブ: .case-grid 4→2列(≤1000)→2列維持(≤760/≤430、430で .case-grid,.iv-grid{1fr 1fr})。

10. 会員紹介 <section id="member"> .mem-grid .alt（MEMBER 6セル）

位置: 成功事例直下（上から9番目）。<section id="member" class="alt">（受け側id member 実在）、背景淡色 #F6F5F2。
ヘッダ行 .car-head: 09と同構造。左＝eyebrow Member（ゴールド #C0A062）＋見出し 会員紹介 （一部）（（一部）は <span style="font-size:.6em; font-weight:500; color:var(--muted)">＝補足グレー #8A8F98）。右＝リンク 会員一覧を見る →（文字濃紺/矢印ゴールド）＋丸ナビ（09同仕様）。

グリッド .mem-grid（.rv 全体1ブロックで登場・段差なし）: grid; grid-template-columns:repeat(6,1fr); border:1px solid #E7E6E2。各 .mem 右に border-right:1px solid #E7E6E2（最終のみ省略）＝格子。
セル .mem: 逐語 COMPANY（<br>）LOGO。aspect-ratio:5/2.2; display:grid; place-items:center; text-align:center。文字＝Inter・.66rem; letter-spacing:.12em; line-height:1.5・色＝var(--muted)（file実値 #8b8e95／原版マップでは補足グレー #8A8F98 系）。※ .ph::after の「画像」ラベル色 #A6A59F とは別物（会員セルは .mem で --muted）。背景指定なし（淡色#F6F5F2が透ける）。原版＝COMPANY LOGO プレースホルダ（実ロゴ未定枠）のまま。

レスポンシブ: .mem-grid 6→3列(≤1000、nth-child(3n)右罫消し)→2列(≤760/≤430、nth-child(2n)右罫消し)。

11. よくあるご質問 #faq（FAQ）

位置: 会員紹介直下（後ろから3番目）。<section id="faq">（受け側id faq 実在＝料金プランリンクの飛び先）、背景白 #FFFFFF。.wrap を2つ（①中央見出し ②グリッド）。
見出しブロック（中央）: eyebrow .eye.c＝FAQ（ゴールド #C0A062）／見出し .s-ttl＝よくあるご質問（ゴシック700+・#1B2333・中央）。

グリッド .faq-grid: margin-top:clamp(30px,3.5vw,46px); grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,60px)。左 <div>/右 <div> に各3問。

アコーディオン details.faq（ネイティブ <details>）: border-bottom:1px solid #E7E6E2・背景透明。
- summary: list-style:none＋marker非表示・cursor:pointer・flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 4px。フォント ゴシック weight500・.88rem; letter-spacing:.02em・文字ダーク（#1B2333〜#5B616C）。
- 開閉アイコン .pm: +（Inter・font-weight:400・font-size:1.2rem・#8A8F98（--muted）・flex:none）。details[open] .pm{transform:rotate(45deg)}（×状に）transition:transform .3s。
- 回答 .faq__a: padding:0 4px 22px・#5B616C・.82rem; line-height:1.95。

列 質問 回答
左1 未来共創コミュニティとはどのようなコミュニティですか？ 経営者・専門家・企業が信頼でつながり、学びと出会いから新しい価値を生み出す共創コミュニティです。AIインタビュー・マッチング・分科会・イベントを通じて事業の機会を広げます。
左2 誰でも参加できますか？ 経営者・士業・専門家・BtoB企業の方を中心に、ご参加いただけます。まずは無料イベントからお気軽にご参加ください。
左3 無料イベントへの参加方法を教えてください。 本ページの「無料イベントに参加する」ボタンよりお申し込みいただけます。オンライン・オフラインどちらの開催にも対応しています。
右1 料金プランについて教えてください。 ご関心や目的に応じて最適なプランをご用意しています。まずは無料イベントにご参加いただき、詳細はその場でご案内します。
右2 分科会にはどのように参加できますか？ 会員の方は関心テーマの分科会にご参加いただけます。各分科会では第一線の実務家と知見を持ち寄り、専門性を深めます。
右3 インタビュー記事はどのように掲載されますか？ AIインタビューで言語化した想いや強みをもとに記事を制作し、コミュニティメディアに掲載。企業やサービスの魅力を発信します。

reveal: 各 details.faq に .rv、右列3問に .d1 追加。
レスポンシブ: 1000px=2カラム維持。760px以下=1fr（gap0・左3→右3の順縦並び）。430px継承。

12. 最終CTA #cta .final

位置: FAQ直下（最後から2番目）。<section class="final" id="cta">（受け側id cta 実在）、position:relative; text-align:center; overflow:hidden; color:#fff。
背景 .final__bg（absolute; inset:0; z-index:0）: ベース塗り #15171c→ネイビー #1B2A47。写真 img（src＝/assets/hero.png＝ヒーロー背景と同一ファイル、object-fit:cover、白黒版 filter:grayscale(1) brightness(.4)）→原版＝ビジネス交流会の横長写真（明るい会場でスーツの男女が歓談）・カラー＋暗め。暗幕 ::after＝rgba(15,17,22,.7)→ネイビー暗幕 約70%。

中身 .final .wrap（relative; z-index:2・中央）

順 要素 文言 色・寸法
1 h2 まずは無料イベントに参加しませんか？ ゴシック700・clamp(1.6rem,3.6vw,2.7rem)・line-height:1.45; letter-spacing:.04em・白 #FFFFFF・中央・.rv
2 p 未来を共に創る仲間との出会いが、あなたのビジネスを加速させます。 .95rem; margin-top:20px・白82% rgba(255,255,255,.82)・.rv.d1
3 ボタンラッパ （下記） margin-top:36px・.rv.d2

CTAボタン .btn.btn--ondark: 無料イベントに参加する →。padding 1em 2em・border-radius:2px・ゴシック700。原版＝ゴールド #C0A062 塗り＋白文字 #FFFFFF（枠もゴールド）。ホバーで濃ゴールド #B0904E 寄りに沈む＋矢印 translateX(4px)。※file実値は background:#fff; color:var(--ink); border-color:#fff（白塗り黒字・ホバー #e3e2df）＝見た目は原版ゴールドに翻訳。
レスポンシブ: 中央1カラム固定・専用分岐なし（overflow:hiddenで横スクロール防止）。

位置: 最終CTA直下＝最下部。<section id="footer" class="ft">（受け側id footer 実在＝お問い合わせ/規約リンクの飛び先）。背景＝原版ネイビー #1B2A47（最濃 #16243F 相当）。※file実値は .ft{background:#101216}＝CSS変数を経由しない独自hex（--dark #15171c でも --dark-2 #1d2027 でもない直書き）。再現時はこの #101216 を起点にネイビー #1B2A47 へ翻訳。padding-block:48px 30px・補助文字 rgba(255,255,255,.82)・font-size:.8rem。.wrap。
上段 .ft-in: flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap。左＝ナビ／右＝メタ。

  • ナビ .ft-nav: flex; gap:clamp(14px,2vw,26px); flex-wrap:wrap。リンク白寄り（--on-dark）・ホバー#fff。7項目＝ヘッダーと同一（未来共創コミュニティとは#about／分科会#community／イベント#events（受け側id欠落）／インタビュー#interview／会員紹介#member／料金プラン#faq／お問い合わせ#footer）。
  • メタ .ft-meta: flex; align-items:center; gap:18px; flex-wrap:wrap。規約3リンク（会社概要｜プライバシーポリシー｜利用規約、全て#footer）、区切り |＝<span style="color:#3a3c42">（暗グレー）。ホバー#fff。
  • SNS .ft-sns: flex; gap:14px。アイコン 17×17・補助色・ホバー#fff。順序＝Facebook→X→Instagram→LinkedIn。Facebook/X/LinkedIn＝fill:currentColor（塗り）、Instagram＝枠/円は線画stroke-width:1.8＋右上ドットのみ塗り。

下段 .ft-cr: 逐語 ©2026 未来共創コミュニティ / MIRAI KYOSO COMMUNITY。margin-top:26px; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; font-size:.72rem・文字色＝file実値 #6f7177（くすんだ補助色・断定値）・左揃え。
レスポンシブ: 760px以下 .ft-in{flex-direction:column; align-items:flex-start; gap:18px}（縦積み）。フッターに .rv なし（常時表示）。全リンク同一ページ内アンカー＋スムーズスクロール（ただし #events のみ受け側id欠落のため要補完）。

5. 原版スクショとの差分メモ（白黒版→原版の翻訳一覧）

白黒検証版（file）と原版カラースクショの差。再現時は必ず原版側を採用する。

5-1. 色（最重要）

対象 白黒版file（file実値hex） 原版（採用）
ヘッダー/ヒーロー暗幕/円バッジ/分科会タイル/最終CTA暗幕 #15171c #16181c #1d2027 等インク黒 ネイビー #1B2A47（濃 #16243F）
フッター背景 #101216（独自直書きhex・CSS変数非経由） ネイビー #1B2A47（最濃 #16243F 相当）
フッターコピーライト文字 #6f7177 くすんだ補助色（実値 #6f7177 を踏襲可）
主要CTA .btn--fill・最終CTA .btn--ondark（file黒塗り/白塗り） インク黒塗り／background:#fff;color:var(--ink)（白塗り黒字） ゴールド #C0A062 塗り＋白文字（ホバー濃ゴールド #B0904E）
ヒーロー主CTA（file .fv__cta .btn--fill{background:#fff;color:var(--ink)}） 白塗り黒字 ゴールド #C0A062 塗り＋白文字
SERVICE円アイコン枠・線 インク黒 ゴールド #C0A062
eyebrow（— ABOUT/SERVICE/… 文字＋横線） --muted（#8b8e95） ゴールド #C0A062
「一覧を見る」リンク矢印 グレー 文字＝濃紺 #1B2333／矢印＝ゴールド #C0A062
イベント日付数字 .ev__d b — 濃紺 #1B2333（ゴールドにしない）
会員 .mem セル文字 --muted（#8b8e95） 補足グレー #8A8F98 系（.ph::after の #A6A59F とは別）
淡色背景/罫線/プレースホルダ/本文グレー/白文字 — マップ該当色そのまま

5-2. フォント

  • file は見出し .s-ttl・ヒーローキャッチに serif（Noto Serif JP 600;700 ロード） を使用 → 原版はゴシックの太字（Noto Sans JP 700–900）。仕様は必ずゴシックで記述・再現する。Noto Serif JP のロードは不要（再現時はGoogle Fontsの該当行も外してよい）。
  • 本文/ラベルは Noto Sans JP（採用）、数字/矢印は Inter（採用）。ロード実体は Noto Sans JP 400;500;700;900 / Inter 500;600;700;800。

5-3. 写真（白黒版はプレースホルダ枠／原版は実写真・カラー）

箇所 src / 形態 原版の写真内容
ヒーロー背景 <img src="/assets/hero.png"> ビジネス交流会の横長写真（明るいモダン会場でスーツの男女が立ち歓談）＋ネイビー暗幕（左濃→右薄）
ABOUTコラージュ .ph.np 3枚（大1＋小2） 大＝円卓の会議シーン／小2＝会議・交流の様子
分科会7タイル .bk（背景写真＋オーバーレイ） 各テーマを表す写真orグラフィック＋ネイビーオーバーレイ＋白ラベル
インタビュー6枚 .iv .pic.ph 人物バストアップ写真（ビジネス装の男女・正方形〜4:3）
成功事例4枚 .case .pic.ph シーン写真（会議/握手/オフィス）＋下キャプション
会員紹介 .mem（テキスト直書き） 「COMPANY LOGO」プレースホルダ（実ロゴ未定・横長セル）※原版でも枠のまま
最終CTA背景 <img src="/assets/hero.png">（ヒーローと同一ファイル） 交流会写真＋ネイビー暗幕

同一src注意: ヒーロー背景と最終CTA背景は file 上 同一の /assets/hero.png を参照。写真内容は同系統（交流会）だが、構造としては1ファイルを2箇所で使い回している。別カットにしたい場合は片方のsrcを差し替える。

5-4. 白黒版で割愛した装飾（原版のみ・再現時に追加）

  • SERVICE見出し「未来共創コミュニティでできること」の直上に、小さな手書き風スクリプト体の装飾文字1つ（ゴールド #C0A062）。file 非搭載のため要追加。
  • インタビュー写真の filter:grayscale(1)、ヒーロー/最終CTA写真の grayscale(1) 等の白黒フィルタは外す（カラー写真にする）。コントラスト/明度の微調整は任意で踏襲可。

5-5. 構造の補完事項（file実値に欠落・再現時に直す）

  • #events の受け側 id 欠落: ナビ／フッター／ヒーローサブCTA／イベント行が #events を指すが、イベントを内包する <section class="alt"> に id が無い。再現時は当該セクションに id="events" を付与してジャンプ先を成立させる（原版意図はイベント節へのスクロール）。
  • フッター背景 #101216・コピーライト #6f7177 は file唯一の独自直書きhex。色は原版へ翻訳しつつ、置換対象として把握しておく。

参照: 土台CSS＝file 13–223行 / ヘッダーHTML 227–241行 / script 495–507行。本仕様のレイアウト・余白・clamp・文言・挙動・id/アンカー・file実値hexはfile実値、見た目の色・フォント種別・写真は原版マップを正とする。