デザインモジュール一覧

ゴールドのヘアライン＋中央ロゴ＋タグライン。sticky で画面上部に固定。スクロールしても残る。用途：全ページの共通シェル。

状態：ロゴに hover（色変化なし）・focus。詳細は States。

水平ナビ。hover でゴールド下線＋薄いゴールド地。現在ページは aria-current="page" でゴールド下線。

状態：hover（ゴールド下線＋accent-soft 背景）／focus-visible（ネイビーリング）／aria-current（ゴールド下線）。

720px 以下で水平ナビを畳み、Menu ボタンで開閉。ボタンは aria-expanded を更新。開くと縦積みのフルワイドリスト。

<button class="nav-toggle" aria-expanded="false" aria-controls="primary-nav">Menu</button>
<nav class="main-nav" id="primary-nav">…</nav>
// JS: toggle 'open' + aria-expanded

状態：開閉は aria-expanded で同期。リンクは最低 48px のタップ領域。

Home › セクション › 記事名。現在地は aria-current で区別。記事ページの先頭に配置。

キーボード利用者向け。Tab でフォーカスされたときだけ表示し、本文へジャンプ。

ネイビー地・白文字。ロゴ＋タグライン＋ポリシーリンク＋コピーライト。リンク hover はゴールド。

ピル型（999px）。primary=ネイビー、gold=ゴールド、outline=枠のみ。同一ビューポートに solid primary は1つまで。disabled は opacity のみ下げる。

<a class="btn btn--primary" href="#">…</a>
<a class="btn btn--gold" href="#">…</a>
<a class="btn btn--outline" href="#">…</a>
<a class="btn btn--gold btn--sm" href="#">…</a>
<a class="btn btn--primary is-disabled" aria-disabled="true">…</a>

状態：hover（ネイビー⇄ゴールド反転）／focus-visible（リング）／active（1px 沈み）／disabled（opacity .45）。視覚は States。

本文中のリンクはネイビー＋下線（hover で色不変・下線維持）。外部リンクは末尾に ↗ を付ける。

「Our pick」等の強調ラベル。ネイビー地・白文字・全キャップス。

設備・属性の小ラベル。–fill は薄いゴールド地で強調。

更新日・著者・所要時間を並べる。アバターはイニシャル。

記事末尾の開示文。上部にヘアライン区切り。

情報の出典・参考文献。ネイビー左罫（角丸なし＝編集ライク）。

記事冒頭の大画像（16:9）＋キャプション。

キッカー→タイトル→サブ→メタの中央寄せ。

H2 はヘアライン＋ゴールドチック。上にキッカー（全キャップス）を置ける。アンカー用に scroll-margin-top を適用済み。

冒頭の導入文。Playfair で一段大きく。

強調引用。中央寄せ＋大きなゴールド引用符。

4種：Good to Know（既定・ゴールド左罫）、Tip（薄ゴールド地）、Warning（赤系）、Editorial Note（ネイビー左罫）。

手順・持ち物・おすすめの列挙。丸チェックマーク（ネイビー）。

左列を太字、ヘッダーはネイビー罫。狭い画面で横スクロールが必要な場合は .tbl-responsive で包む。

ネイティブ details/summary で実装。初期表示は閉じた状態（open属性なし）。開くと＋が回転。Open状態の見本は States。

<details class="faq-item">
  <summary>Question</summary>
  <div class="faq-answer">Answer</div>
</details>

記事末尾の関連リンク3点。

記事末尾のネイビー全幅バナー。タイトル＋補足＋ゴールドCTA。

Googleマップ iframe か地図画像を 16:9 に収める。下にキャプション＋「Googleマップで開く」。

本文中の画像。alt 必須。写真のクレジットは右寄せの .img-credit。

Photo: Coverstories Editorial

検索結果なし・データ未取得など。破線枠＋案内。error は赤系の枠。

横長のエリア画像＋角にフロストのタイトルカード（左上/左下に固定・枠内に収める）。

Akihabara

Electronics, anime, and useful rail connections.

ページ内アンカーへのピル型ナビ。目次代わり。

「一覧で把握」用の4マス統計（駅・主要路線・価格帯・最寄り）。モバイルは2列。

WordPress エリアページ対応。必須7項目：⭐評価・📍場所・🗺️地図・🏷️タグ・部屋情報・欠点・予約CTA。variant：featured（ゴールド枠）、text（画像なし）、compact（1列・密）。

<li class="hotel-card hotel-card--featured">
  <div class="hc-media"><img src="…" alt="…"></div>
  <div class="hc-body">
    <div class="hc-top"><div class="hc-name">…</div><span class="badge">Our pick</span></div>
    <div class="hotel-facts">⭐ 4.6 · 📍 Ueno · 🗺️ <a>Map</a></div>
    <p class="hc-blurb">…</p>
    <ul class="hc-chips"><li class="chip">…</li></ul>
    <div class="hc-specs">Room: Medium</div>
    <p class="hc-tradeoff"><strong>Trade-off:</strong> …</p>
    <div class="hc-foot"><a class="btn btn--gold btn--sm">Check rates</a></div>
  </div>
</li>

状態：hover（持ち上げ＋影）／focus（カード内リンクのリング）。variant の見た目は States。

評価・場所・地図・タグを一行に。ホテルカードのメタや独立ブロックに使う。

Pros/Cons の2カラム。チェックとダッシュで色分け。モバイルは1列。

主要駅・路線・所要時間の要約。エリアガイドの交通節に。

近隣エリアへのテキストリンク列。右に矢印。

全22エリアのリンク一覧（4列）。地図への導線は .map-open を併用。

画像＋キッカー＋タイトル＋説明＋「Read the guide →」の縦型カード。hover で持ち上げ＋画像ズーム。

Pop Culture & Transit

Akihabara

定義：coverstoriess-home.html inline CSS。hover/focus は States。

初訪日向けの大型特集（左テキスト＋右画像）。CTA は1つ。

Start here

First trip to Tokyo?

Compare the best areas

画像＋テキスト＋チップ＋CTA の横型特集。

Hotel Chains

Tokyo Hotel Chains Explained

Compare 30 chains

モノラインアイコン＋タイトル＋説明の小カード。

画像＋角にフロストのラベルカード。

Sushi Chains

Sushiro & Kura

カテゴリ間の導線。CTA バナー（#24）と関連カード（#23）をホームでも再利用。