【湘南】共通UI 動作確認ページ
固定ページのカスタムHTMLに貼り付けて使う共通UI一覧です。
見出しバリエーション（XL / LG / MD）
MD：左バータイプ（.sim-ui-hd-bar）
セクション内の見出しに使用します。
MD：下線タイプ（.sim-ui-hd-line）
下線はテーマカラーの細い点線です。
テキスト・リンク
見出し／本文／リンク
点線の区切り（.sim-ui-dotRule）
ボタン（L / M / S / Disabled / Row）
注意枠（.sim-ui-note）
通常の案内枠です。（角丸 7px）
Warning 表示の例です。
Danger 表示の例です。
囲み（.sim-ui-box）
通常の囲み
本文テキストのまとまりに使用します。（角丸 7px）
Primary囲み
強調表示したい情報に使用します。
キー・バリュー（.sim-ui-kv）
表（横スクロール対応）
| 項目 | 内容 |
|---|---|
| 開催日 | 2026年（例） |
| 会場 | 湘南エリア（例） |
| 備考 | 2列テーブル用途の例です。 |
| 区分 | 内容A | 内容B | 内容C | 内容D |
|---|---|---|---|---|
| 行1 | — | — | — | — |
| 行2 | — | — | — | — |
タブ切り替え（.sim-ui-tabs）
タブ数は .sim-ui-tabs に style="--tabs:4;" で合わせる。パネルは薄グレー背景＋枠線で確認。
アコーディオン（ボタン型）
よくある質問（例）
ここに回答テキストが入ります。
- 箇条書き
- 箇条書き
注意事項（例）
注意事項の本文が入ります。
カード（横スクロール）
SPはカード間隔あり。PCはワイド指定に負けず固定幅で横スクロール。
画像（S / M / L + rounded）
角丸が不要な場合は .sim-ui-imgRounded を外します。
MAP（埋め込み）
余白ユーティリティ
下に小余白（.sim-ui-mb-sm）
下に中余白（.sim-ui-mb-md）
下に大余白（.sim-ui-mb-lg）
区切り線は .sim-ui-hr です。
