Component Catalog
コンポーネントカタログ
操レディスホスピタル コンポーネントカタログ
COMP-01
ページヒーロー（Sub Page Hero）
すべてのサブページの最上部に配置するヒーローセクション。picture要素でPC/SP画像を切り替え。title-group is-pagetitle内にH2英語サブタイトルとH3日本語タイトルを配置。
このページの最上部がCOMP-01の実例です。PC（min-width:769px）とSP（max-width:768px）でヒーロー画像が切り替わります。
COMP-02
セクションフレーム（Section Frame）
すべてのコンテンツセクションのラッパー。背景色はwhite → white-ter → white → white-bisと交互に配置。anchor IDを付与。
これはCOMP-02セクションフレームの中のコンテンツです。背景色がwhite-bisの例です。
COMP-03
セクションタイトル（Section Title）
各セクションの見出し。H2（英語 subtitle、Playfair Display）+ H3（日本語 title、Noto Sans JP 太字）のペアで構成。左ボーダー装飾が自動付与。
Sample Title
サンプルタイトル
COMP-04
ボタン（3バリエーション）
使用可能なボタンは3種類のみ。wp:htmlで記述。wp:buttonsやLazy Block(common-button)は使用禁止。
A. 丸ボタン大（btn-circle）
丸ボタン大B. 丸ボタン小（btn-circle-xsmall）
丸ボタン小C. テキストボタン（btn）
テキストボタンCOMP-05
診療案内カード（横レイアウト）
診療科紹介やサービス紹介に使用。画像（29.5vw）+テキスト+ボタンの横並びレイアウト。SPでは縦積み。
COMP-06
医師紹介カード（Doctor Card）
医師紹介ページで使用。doctor-figure内に画像とdoctor-labels（H3役職+P氏名）を配置。経歴・資格はCOMP-08アコーディオンで展開。
サンプル科
山田 太郎
COMP-07
施設カード（Swiperスライド）
施設紹介スライダー内の各カード。facility-item内に画像・H4タイトル・説明文・小ボタンを配置。
(Swiperスライダーはページ内に専用JSが必要なため、ここではカード単体のサンプルを表示)
サンプル施設
施設の説明文サンプルです。施設カードはスライダー内で使用され、画像・タイトル・説明文・ボタンで構成されます。
COMP-08
FAQアコーディオン
Q&A（よくある質問）は必ずこのアコーディオン構造で表示。通常のリスト・段落・テーブルでのQ&A展開は禁止。accordion js-accordion faq-listクラスを使用。
初診の予約は必要ですか？
はい、ご予約をお勧めしております。お電話またはWEB予約をご利用ください。
駐車場はありますか？
はい、駐車場を完備しております。
クレジットカードは使えますか？
はい、各種クレジットカードをご利用いただけます。
COMP-09
ニュースリスト（Query Loop）
お知らせ一覧にはQuery Loopブロックを使用。list-border is-padding-medium has-last-border-mobileクラスで装飾。日付（8.5em幅）+タイトルの2カラム構成。
(Query LoopはWordPressの動的ブロックのため、プレビューではコードのみ表示)
COMP-10
CTAセクション（Call to Action）
全ページの最下部（フッター直前）に配置。primaryカラー（#b50070）背景。電話ボタンとWEB予約ボタン、受付時間を表示。
このページ最下部にCOMP-10の実例が配置されています。
COMP-11
PC/SP画像切り替え（Responsive Image）
ヒーロー画像や大型バナーで使用。picture要素でmin-width:769px（PC）とmax-width:768px（SP）で画像を切り替え。Lazy Block(common-img-device-change)は段階的に廃止。
Design Rules
デザインルール一覧
- ブランドカラー: Primary #b50070, Text #444444
- フォント: 本文 Noto Sans JP 14px, 英字見出し Playfair Display
- 背景色ローテーション: white → white-ter → white → white-bis
- ブレークポイント: 768px
- 全ページにH1(sr-only)必須
- ボタンはwp:htmlで記述（wp:buttons禁止）
- Q&AはCOMP-08アコーディオン必須
- Lazy Block使用禁止（段階的廃止）
Reservation
ご予約・お問い合わせ
受付時間: 月〜土 9:00〜12:00 / 16:00〜19:00（木・土は午前のみ）