CSS変数（特集ページ専用）

吸入薬カテゴリ色

変数名	色	用途
`--inhaler-saba`	#FF6B6B	短時間作用型（緊急性）
`--inhaler-ics-laba`	#4ECDC4	ICS/LABA配合剤
`--inhaler-smart`	#FFD93D	SMART療法
`--inhaler-triple`	#6C5CE7	トリプル療法

MR拮抗薬世代別色

変数名	色	用途
`--mr-gen1`	#3498db	第1世代（スピロノラクトン）
`--mr-gen2`	#27ae60	第2世代（エプレレノン）
`--mr-gen3`	#e74c3c	第3世代（エサキセレノン）
`--mr-gen4`	#9b59b6	第4世代（フィネレノン）

1. ヒーローセクション

feature-hero（特集ページトップ）

特集ページの最上部に配置する導入セクション

MR拮抗薬完全ガイド

ミネラルコルチコイド受容体拮抗薬の進化と使い分け

スピロノラクトンから始まったMR拮抗薬は、世代を重ねるごとに選択性と安全性が向上。各世代の特徴と臨床での使い分けを、最新のエビデンスとともに解説します。

<div class="feature-hero">
    <div class="feature-hero-container">
        <nav class="feature-breadcrumb">...</nav>
        <h1 class="feature-title">タイトル</h1>
        <p class="feature-subtitle">サブタイトル</p>
        <p class="feature-lead">リード文</p>
    </div>
</div>

2. セクションヘッダー付きカード

section-with-header + detail-card

ダークネイビーの見出しと白いカードが一体化したセクション

第1世代：スピロノラクトン

基本情報

商品名アルダクトンA

開発年 1959年

選択性非選択的

<div class="section-with-header">
    <h3>セクションタイトル</h3>
    <div class="detail-card">
        <h4>カードタイトル</h4>
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">ラベル</span>
                <span class="info-value">値</span>
            </div>
        </div>
    </div>
</div>

3. 比較カード

comparison-cards（汎用）

複数項目を並列比較するためのカード。グレーヘッダーがデフォルト

第1世代

薬剤名: スピロノラクトン
選択性: 非選択的
副作用: 女性化乳房、月経異常

第2世代

薬剤名: エプレレノン
選択性: 選択的
副作用: 性ホルモン関連副作用なし

<div class="comparison-cards">
    <div class="comparison-card">
        <h4>タイトル</h4>
        <ul>
            <li><strong>項目</strong>: 内容</li>
        </ul>
    </div>
</div>

comparison-cards（心不全用カラーバリエーション）

HFrEF（青）とHFpEF（赤）の比較に使用

HFrEF（収縮不全）

定義: LVEF ≤40%
頻度: 心不全の約50%
予後: 治療により改善

HFpEF（拡張不全）

定義: LVEF ≥50%
頻度: 心不全の約50%
予後: 治療法限定的

<div class="comparison-cards">
    <div class="comparison-card hfref-epi">...</div>
    <div class="comparison-card hfpef-epi">...</div>
</div>

comparison-cards（吸入薬用カラーバリエーション）

喘息（青緑）とCOPD（黄色）の比較に使用

喘息

病態: 可逆性の気道狭窄
炎症: 好酸球性
第一選択: ICS/LABA

COPD

病態: 不可逆性の気流制限
炎症: 好中球性
第一選択: LAMA/LABA

4. 比較テーブル

comparison-table（ダークネイビーヘッダー）

薬剤の詳細比較に使用。モバイルでは横スクロール＋固定列対応

項目	スピロノラクトンアルダクトンA®	エプレレノンセララ®	エサキセレノンミネブロ®
開発年	1959年	2002年	2019年
選択性	非選択的	選択的（100倍）	高選択的（1000倍）
半減期	1.6時間	4-6時間	19時間
性ホルモン関連副作用	あり	なし	なし

<div class="comparison-table-wrapper">
    <table class="comparison-table">
        <thead>
            <tr>
                <th>項目</th>
                <th>薬剤A<br><small>商品名</small></th>
            </tr>
        </thead>
        <tbody>...</tbody>
    </table>
</div>

5. ポイントカード

point-cards（吸入薬カラー）

要点を視覚的に表示。ボーダーの色が自動で変わる

SABA

短時間作用型β2刺激薬

発作時の頓用
即効性（5分）
作用時間4-6時間

ICS/LABA

吸入ステロイド/長時間作用型β2刺激薬

喘息の第一選択
1日1-2回定期吸入
抗炎症＋気管支拡張

SMART療法

維持＋頓用療法

シムビコートのみ
定期＋発作時使用
コンプライアンス向上

トリプル療法

ICS/LABA/LAMA配合剤

重症喘息/COPD
3成分配合
1日1回吸入

<div class="point-cards">
    <div class="point-card">
        <h4>タイトル</h4>
        <p>説明</p>
        <ul>...</ul>
    </div>
</div>

point-cards（MR拮抗薬カラー）

MR拮抗薬特集ページ用のカラーバリエーション

第1世代

スピロノラクトン

第2世代

エプレレノン

第3世代

エサキセレノン

第4世代

フィネレノン

<div class="point-cards mr-antagonist-feature">
    <div class="point-card">...</div>
</div>

6. 汎用ボックス（components.cssから）

特集ページでも使える汎用ボックス

薬剤ページと共通のボックススタイル

エビデンス

RALES試験では、スピロノラクトンが重症心不全患者の死亡率を30%減少させました。

注意: 腎機能低下患者では高カリウム血症のリスクが高まります。

ポイント: エサキセレノンは非ステロイド骨格を持つ初のMR拮抗薬です。

使い分けのコツ

女性・若年者：エプレレノン、エサキセレノン
コスト重視：スピロノラクトン
腎機能低下：フィネレノン

7. その他の要素

セクションタイトル

特集ページ内の大見出し

薬剤選択のポイント

<h2 class="section-title">セクションタイトル</h2>

フィーチャーバッジ

カテゴリやステータスの表示に使用

新薬重要推奨

8. レスポンシブ対応について

自動的なレスポンシブ対応

すべてのコンポーネントは以下のブレークポイントで自動的に最適化されます：

768px以下（タブレット）:
- comparison-cardsが1列表示に
- 比較テーブルが横スクロール可能に（項目列固定）
- point-cardsのグリッドが調整
480px以下（モバイル）:
- フォントサイズの最適化
- パディングの調整
- ヒーローセクションのコンパクト化

9. 使用上の注意

特集ページ作成のベストプラクティス

構造を明確に: feature-heroから始め、セクションごとに情報を整理
比較を活用: comparison-card、comparison-table、point-cardで視覚的に比較
色の使い分け: CSS変数を活用してカテゴリごとに色分け
モバイルファースト: レスポンシブ対応は自動だが、コンテンツ量に注意
共通コンポーネント活用: components.cssのボックスも併用可能

注意事項:

comparison-tableは必ずcomparison-table-wrapperで囲む
point-cardsは4つまでが推奨（それ以上は2段になる）
特集ページ専用のCSS変数は他のページでは使用不可
section-with-headerのh3直後は必ずdetail-card