/* ============================================
循環器内科ページ 専用CSS（.subject-lp--cardiology）
--------------------------------------------
subject.css（共通base）の「後」に header.php が自動読込。
対象URL：/subjects/cardiology/（SEO版）および /subjects/lp/cardiology/（広告LP・作成時）
※ このファイルは assets/css/subjects/ 配下のため、画像参照は ../../img/... 基準
（base の subject.css は assets/css/ 直下なので ../img/... 基準。1階層ぶん深い点に注意）
方針：
- 共通の見た目は subject.css（触らない）。循環器内科だけの微調整をここに書く。
- すべて .subject-lp--cardiology 配下に書く（他科目に影響させない）。
- 呼吸器内科（respiratory）ベースをそのまま表示 → 崩れた箇所だけ下記で調整。
調整が必要になった理由：
1) メインキャッチが「循環器内科のオンライン診療」＝13文字。base（white-space: nowrap の
1行組み）のままだと SP で1行に収まらないため縮小する。
（消化器内科・呼吸器内科と同じ13文字なので、実績値をそのまま採用している）
2) 症状サークルのラベルは「血圧／動悸／むくみ」で最大3文字。
base（SP 16px・PC 18px、丸は SP 75px / PC 90px）のままで収まるため縮小は不要。
3) FVの症状アイコンを暫定流用（共通 subject-img-internal.svg = 76×68 の非正方形）。
base は 38×38px の正方形固定で描画するため、そのままだと横に潰れる。
4) ⚠️ この科目だけ、症状ポップアップの先頭に救急誘導の一文（.symptom-popup-alert）を
置いている。base に無いクラスなのでここで定義する（→ 最下部）。
============================================ */
/* ============================================
★ FV：メインキャッチ（1行組みのまま縮小して吸収）
--------------------------------------------
base：SP 32px（480px〜36px）／ PC 40px。いずれも white-space: nowrap の1行組み。
「循環器内科のオンライン診療」は13文字で、base のサイズだと SP で1行に収まらない。
※
で2行にすると、下の女性画像・チェック項目まで押し下がって
FV全体のバランスが崩れるため、1行のままフォントサイズで吸収する方針。
============================================ */
/* SP（〜479px）：13文字 × 26px ≒ 340px で、375px端末でも1行に収まる */
.subject-lp--cardiology .fv-title {
font-size: 26px;
letter-spacing: 0.8px;
}
/* SP（480px〜767px）：横幅に余裕が出るぶん少し戻す */
@media (min-width: 480px) {
.subject-lp--cardiology .fv-title {
font-size: 32px;
letter-spacing: 1.2px;
}
}
/* PC（768px〜）：コンテナ960pxに対し 13文字 × 40px ≒ 520px で収まるため base のままでOK。
女性画像を差し替えて重なりが出た場合のみ、下記のコメントを外して調整する。 */
/*
.subject-lp--cardiology .fv-pc-title {
font-size: 38px;
letter-spacing: 1.4px;
}
*/
/* ============================================
★ FV：症状サークル（血圧 / 動悸 / むくみ）
--------------------------------------------
「血圧」「動悸」が2文字、「むくみ」が3文字なので、base（SP 16px・PC 18px）のままで丸に収まる。
縮小の指定は不要。専用アイコンに差し替えて崩れた場合のみ、
他科目（urology.css / respiratory.css）の書き方を参考に nth-child で調整すること。
============================================ */
/* --------------------------------------------
症状アイコンの暫定流用に伴う調整
--------------------------------------------
base は .fv-symptom-icon を 38×38px（PCは42×42px）の「正方形固定」で描画している。
⚠️ 共通フォルダに循環器内科のアイコンが無いため、暫定で subject-img-internal.svg
（76×68 の非正方形）を3つとも流用している。そのままだと横に潰れるので、
height固定＋width:auto（比率保持）に上書きする。
@TODO 循環器内科専用アイコン（cardiology/ 配下）に差し替えたら、寸法に合わせて見直すこと
（トリオ＝血圧・動悸・むくみを維持）。
「その他の診療科」リスト用の subject-img-cardiology.svg も併せて必要。
-------------------------------------------- */
.subject-lp--cardiology .fv-symptom-icon {
width: auto;
height: 38px;
}
@media (min-width: 480px) {
.subject-lp--cardiology .fv-symptom-icon {
height: 42px;
}
}
.subject-lp--cardiology .fv-pc-symptom-icon {
width: auto;
height: 42px;
}
/* ============================================
★ 症状ポップアップの救急誘導（この科目だけ追加）
--------------------------------------------
⚠️ 動悸は重い不整脈、むくみは心不全のサインであることがあり、対応が遅れると命に関わる。
そのため「繰り返す動悸」「足のむくみ」のポップアップでは、症状タグより先に
救急誘導の一文を読ませる必要がある。h3 の直後に .symptom-popup-alert を置いた。
（なお「胸の痛み」は心筋梗塞の代表症状のためカード化していない。注釈とFAQで救急へ誘導）
見落とされては意味がないので、他の注記（.symptom-popup-drugs の ※書き）より
目立たせている（枠線＋淡い背景＋やや大きめの文字）。
色は base の警告系トーンに寄せた指定を直接書いている（base に警告用の
カスタムプロパティが無いため）。
⚠️ この2枚のポップアップから .symptom-popup-alert を外さないこと。
============================================ */
.subject-lp--cardiology .symptom-popup-alert {
margin: 0 0 16px;
padding: 12px 14px;
border: 1px solid #e0a765;
border-left-width: 4px;
border-radius: 4px;
background: #fdf5ea;
color: #8a4b0a;
font-size: 13px;
font-weight: 700;
line-height: 1.65;
letter-spacing: 0;
text-align: left;
}
@media (min-width: 768px) {
.subject-lp--cardiology .symptom-popup-alert {
font-size: 12.5px;
padding: 12px 16px;
}
}
/* ============================================
★ FV：女性画像（差し替え時の位置・サイズ調整）
--------------------------------------------
現在は共通画像（assets/img/subjects/fv_woman.webp・628×948）を参照しているため
base の値のままで崩れない。
@TODO 循環器内科専用の fv_woman.webp（cardiology/ 配下）を作って差し替えたら、
縦横比・立ち位置が変わってほぼ必ず崩れるので、下記のコメントを外して調整すること。
base（subject.css）の値：
SP .fv-fg-woman { left: -1%; bottom: -18%; width: 74%; max-width: 340px; }
SP 480px〜 .fv-fg-woman { left: -1%; bottom: -14%; width: 72%; max-width: 450px; }
PC .fv-pc-fg-woman { left: -10px; bottom: -134px; width: 340px; }
※SP・PCで別々に効くので、必ず両方の表示を確認すること。
============================================ */
.subject-lp--cardiology .fv-fg-woman {
left: -10%;
bottom: -18%;
width: 74%;
max-width: 340px;
}
@media (min-width: 480px) {
.subject-lp--cardiology .fv-fg-woman {
left: -7%;
bottom: -14%;
width: 72%;
max-width: 450px;
}
}
.subject-lp--cardiology .fv-pc-fg-woman {
left: -4px;
bottom: -25px;
width: 270px;
}
/* ============================================
★ その他セクションの微調整
- 必要になったら .subject-lp--cardiology 配下に追記していく。
============================================ */
/* --------------------------------------------
症状カードのポップアップ：※注釈を小さく
--------------------------------------------
base の .symptom-popup-drugs は 20px。同じ大きさだと※書きが本文（お薬名）と
同じ強さで読まれてしまうため、注釈だけ 16px に落とす。
本文との間に余白を入れて、続き文ではなく注釈だと分かるようにしている。
全科目共通の書き方（2026-08-28にサイト全体で統一）。
※ 現在ついているのは「血圧のお薬と家庭血圧の相談」「繰り返す動悸・脈の乱れ」「足のむくみ」「心臓の検査後の経過相談」「飲み忘れ・飲み方の不安」「お薬が切れそうなときの相談」の6枚。※書きを持つカードを増やしたら、
その