デザインシステム

Container — 水平幅

size プロパティで最大幅を3段階＋full から選ぶ。left/right ガターは --vds-container-gutter（20px）で統一。

• size="wide"≒ 1180px — 本文＋写真の主要幅（既定）
• size="read"≒ 800px — 長文の読み幅
• size="measure"≒ 480px — キャプション・注記の最小可読幅
• size="full"FullBleed内で自前に幅制御するとき

Section — 縦リズム

spacing と surface の組み合わせで章のリズムと面を制御。章ブロックは spacing="asym" 推奨。

• 章ブロック標準（azumi推奨）

  spacing="asym" surface="subtle"

• 引用・補足など凹面

  spacing="compact" surface="inset"

• CTA帯・フッタ直前の締め

  spacing="default" surface="dark"

Grid — 列構成

cols プロパティでグリッドを選択。editorial は azumi の編集グリッド（1.2fr:1fr、769px 展開）。

• cols="2"

  均等2列（sm で展開）

  1

  2
• cols="3"

  均等3列（sm→lg で展開）

  1

  2

  3
• cols="editorial"

  1.2fr:1fr 非対称（769px 展開・iPad mini 対策）

  1

  2
• cols="5fr-7fr"

  5:7 非対称（lg で展開）

  1

  2

CanBusTimetableModal

アクセスページの CAN BUS 時刻表モーダル。ルートタブ切替・ESC クローズ・スクロールロック対応。

PartyPickerDisclosure

空室カレンダー連動の折りたたみ式人数選択コンポーネント（NEXT_PUBLIC_AVAILABILITY_CALENDAR_ENABLED=true のとき有効）。現状は空室カレンダー未実装のため /rooms・/rooms/[slug] で非表示。カレンダー実装後に再接続する想定で保持。

Hero — ページヒーロー

variant で高さを選ぶ。page は parallax 付き。compact は細帯。写真とセリフ h1 のみで構成。

• 北前基地

  variant="default"標準ヒーロー（≒692px）。トップや大判ページ向け。
• 北前基地

  variant="page"下層ページ標準（≒346px）。scroll parallax 付き。
• 北前基地

  variant="compact"細帯（≒187px）。FAQ やサブページ向け。

SectionHeader — 章見出し

eyebrow → h2 → body の3段構成。vds-eyebrow / vds-heading-2 / vds-body トークンで統一。

SectionHeaderWithAction — 見出し＋右肩CTA

左に eyebrow → 明朝ディスプレイ見出し（section 見出しスケール）→ body、右に主要 CTA。lg 幅で両端・ベースライン揃え。タイポは vds-eyebrow（sea）/ vds-heading-display × --vds-fs-section-heading / vds-body。用途: 旅の目的別プラン等「見出し＋右肩の予約CTA」。

EditorialSpread — 編集スプレッド

feature = CTA 付き章（ホーム向け）/ editorial = CTA なし連続フロー（cuisine/story 向け）。photoSide/reverse で構図を制御。

• ROOMS

  海を望む客室

  日本海を一望できる客室。加賀橋立の静けさを体感してください。

  photo
  variant="feature" photoSide="right"ホーム編集スプレッド。写真右・テキスト左。CTA リンク付き。
• photo

  ROOMS

  海を望む客室

  日本海を一望できる客室。加賀橋立の静けさを体感してください。

  variant="feature" photoSide="left"写真左・テキスト右。交互配置で rhythm を作る。

• ROOMS

  海を望む客室

  日本海を一望できる客室。加賀橋立の静けさを体感してください。

  photo
  variant="editorial" reverse={false}CTA なし編集フロー。cuisine/story ページの章ブロックに使用。

AtmosphericSection — 情緒背景章

写真背景＋SVG モーション付きの章ブロック。surface="dark" でネイビー帯、"paper"/"washi" で淡面。FinalCTA はこれをラップ。

• ご予約はこちら

  surface="dark" motion="sea"FinalCTA / 予約帯。濃紺＋白文字＋SVG モーション。

• 章コンテンツ

  surface="paper" motion="sea"アクセス情報など淡い章。ボーダー付き。

• 章コンテンツ

  surface="washi" motion="none"モーション無し。写真を渡すと薄い背景画像になる。

GuestVoicesSection — お客様のお声（レビュー節）

AtmosphericSection(washi) を地に、評価チップ＋口コミ CardCarousel を束ねた社会的証明の章。評価は機能情報なので system-heading（ゴシック）で扱う。データは content/socialProof.ts。R031: 実投稿の要約のみ・件数と検証時点を明示し、希少性煽りや盛りはしない。