コンテンツ構造

解剖

• SectionWrapper

  全幅bandとmax-width containerの責務を分離する。

• SectionHeader

  h2、補足、関連導線を同じ位置と順序へ揃える。

• Breadcrumbs

  階層をDOM順で示し、現在地をaria-currentで伝える。

• FormattedText

  sanitize済みHTMLを共通prose規則で表示する。

• ContentBanner

  店舗写真、タイトル、説明、詳細導線を一体で表示する。

状態

• 標準section

  whiteまたはgrayの全幅band内へ1280px containerを置く。

• 関連導線あり

  見出し右端へもっと見るを置き、見出し自身をリンクにしない。

• 長い階層

  パンくず領域だけを横スクロールし、body幅を広げない。

• 画像なし

  ContentBannerは画像なし面と日本語ラベルを表示する。

仕様値

container

max-width 1280px、px 16→24px

section spacing

py 56→80px

heading

20→24px、font-bold

breadcrumb

12px、horizontal overflow auto

formatted text

prose-sm、sanitized HTML

banner image

SP 4:3 / PC 16:9