/* ============================================
アレルギー科ページ 専用CSS（.subject-lp--allergy）
--------------------------------------------
subject.css（共通base）の「後」に header.php が自動読込。
対象URL：/subjects/allergy/（SEO版）および /subjects/lp/allergy/（広告LP・作成時）
※ このファイルは assets/css/subjects/ 配下のため、画像参照は ../../img/... 基準
（base の subject.css は assets/css/ 直下なので ../img/... 基準。1階層ぶん深い点に注意）
方針：
- 共通の見た目は subject.css（触らない）。アレルギー科だけの微調整をここに書く。
- すべて .subject-lp--allergy 配下に書く（他科目に影響させない）。
- 呼吸器内科（respiratory）ベースをそのまま表示 → 崩れた箇所だけ下記で調整。
調整が必要になった理由：
1) メインキャッチが「アレルギー科のオンライン診療」＝14文字で、全科目中の最長。
base（white-space: nowrap の1行組み）のままだと SP・PC とも収まらないため縮小する。
（内科11／眼科10／泌尿器科12／消化器内科13／呼吸器内科13 → アレルギー科14）
2) 症状サークルのラベルが「風邪/発熱/腹痛」（2文字）→「花粉症/目のかゆみ/じんましん」で、
2つ目・3つ目が5文字あり 75px の丸からはみ出すため縮小する。
3) FVの症状アイコンを他科目から暫定流用している（耳鼻科85×68・眼科75×68・皮膚科79×68）。
base は 38×38px の正方形固定で描画するため、そのままだと横長の絵が縦に潰れる。
⚠️ イラスト差し替え時（後日）に必ず見直すブロックが2つあります。
・「FV：症状アイコン」… 支給アイコンの縦横比に合わせて height を詰め直す
・「FV：女性画像」 … 現在は共通画像なので base のまま。専用画像に差し替えたら
コメントを外して left / bottom / width を実機で詰める
============================================ */
/* ============================================
★ FV：メインキャッチ（1行組みのまま縮小して吸収）
--------------------------------------------
base：SP 32px（480px〜36px）／ PC 40px。いずれも white-space: nowrap の1行組み。
「アレルギー科のオンライン診療」は14文字で、base のサイズだと1行に収まらない。
※
で2行にすると、下の女性画像・チェック項目まで押し下がって
FV全体のバランスが崩れるため、1行のままフォントサイズで吸収する方針。
============================================ */
/* SP（〜479px）：14文字 × 24px ≒ 336px で、375px端末でも1行に収まる
（呼吸器内科は13文字×26px＝338px。ほぼ同じ実寸に合わせている） */
.subject-lp--allergy .fv-title {
font-size: 24px;
letter-spacing: 0.8px;
}
/* SP（480px〜767px）：横幅に余裕が出るぶん少し戻す */
@media (min-width: 480px) {
.subject-lp--allergy .fv-title {
font-size: 30px;
letter-spacing: 1.2px;
}
}
/* PC（768px〜）：base 40px のままだと 14文字 × 40px ≒ 560px。
呼吸器内科（13文字×40px＝520px）より40px広がり、右の女性画像側に寄るため軽く縮小する。 */
@media (min-width: 768px) {
.subject-lp--allergy .fv-pc-title {
font-size: 38px;
letter-spacing: 1.4px;
}
}
/* ============================================
★ FV：症状サークル（花粉症 / 目のかゆみ / じんましん）
--------------------------------------------
base のラベルは SP 16px・PC 18px。内科は「風邪/発熱/腹痛」の2文字前提で
丸のサイズ（SP 75px / PC 90px）が決まっている。
2つ目「目のかゆみ」・3つ目「じんましん」は5文字ではみ出すため縮小する。
（1つ目「花粉症」は3文字なので base のままでOK）
数値は同じ5文字の泌尿器科「排尿の痛み」の実績値をそのまま採用している。
============================================ */
/* SP：2番目（目のかゆみ）・3番目（じんましん）を縮小 */
.subject-lp--allergy .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label,
.subject-lp--allergy .fv-symptoms .fv-symptom:nth-child(3) .fv-symptom-label {
font-size: 11px;
letter-spacing: 0;
}
@media (min-width: 480px) {
.subject-lp--allergy .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label,
.subject-lp--allergy .fv-symptoms .fv-symptom:nth-child(3) .fv-symptom-label {
font-size: 13px;
}
}
/* PC：丸が90pxと大きいぶん、2番目・3番目のみ軽く縮小 */
@media (min-width: 768px) {
.subject-lp--allergy .fv-pc-symptoms .fv-pc-symptom:nth-child(2) .fv-pc-symptom-label,
.subject-lp--allergy .fv-pc-symptoms .fv-pc-symptom:nth-child(3) .fv-pc-symptom-label {
font-size: 13px;
letter-spacing: 0;
}
}
/* --------------------------------------------
症状アイコンの比率保持
--------------------------------------------
base は .fv-symptom-icon を 38×38px（PCは42×42px）の「正方形固定」で描画している。
現在流用している3点はいずれも横長なので、そのままだと縦に潰れる。
花粉症 subject-img-otorhinolaryngology.svg 85×68（38px高のとき幅48px相当）
目のかゆみ subject-img-eye.svg 75×68（同 42px）
じんましん subject-img-dermatology.svg 79×68（同 44px）
height固定＋width:auto（比率保持）に上書きして歪みを防いでいる。
いずれもサークル（SP 75px / PC 90px）には収まっている。
@TODO アレルギー科専用イラストに差し替えたら、支給ファイルの縦横比を実測して
この height を詰め直すこと。縦長の絵になった場合は逆にはみ出す可能性がある。
-------------------------------------------- */
.subject-lp--allergy .fv-symptom-icon {
width: auto;
height: 38px;
}
@media (min-width: 480px) {
.subject-lp--allergy .fv-symptom-icon {
height: 42px;
}
}
.subject-lp--allergy .fv-pc-symptom-icon {
width: auto;
height: 42px;
}
/* ============================================
★ FV：女性画像（イラスト差し替え時に有効化する）
--------------------------------------------
現在は全科目共通の fv_woman.webp をそのまま使っているため、base の値で崩れない。
2026-08-27にアレルギー科専用の fv_woman.webp（allergy/ 配下）へ差し替え済み。
ファイルの寸法は共通画像と同じ628×948だが、画のなかの人物の立ち位置と大きさが違うため、
**PC側だけ**下のブロックを有効にして実機で詰めてある。
SP側は base の値のままで収まっていたので、コメントアウトしたまま残している
（今後さらに差し替えるときのために消していない）。
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で別々に効くので、必ず両方の表示を確認すること。
※SP用（.fv-fg-woman）とPC用（.fv-pc-fg-woman）は
allergy.php の中でも別々の ![]()
なので、src も2か所とも直すこと。
============================================ */
/*
.subject-lp--allergy .fv-fg-woman {
left: -1%;
bottom: -18%;
width: 74%;
max-width: 340px;
}
@media (min-width: 480px) {
.subject-lp--allergy .fv-fg-woman {
left: -1%;
bottom: -14%;
width: 72%;
max-width: 450px;
}
}
*/
.subject-lp--allergy .fv-pc-fg-woman {
left: 0;
bottom: -62px;
width: 290px;
}
/* ============================================
★ その他セクションの微調整
- 必要になったら .subject-lp--allergy 配下に追記していく。
============================================ */
/* --------------------------------------------
症状カードのポップアップ：※注釈を小さく
--------------------------------------------
base の .symptom-popup-drugs は 20px。同じ大きさだと※書きが本文（お薬名）と
同じ強さで読まれてしまうため、注釈だけ 16px に落とす。
本文との間に余白を入れて、続き文ではなく注釈だと分かるようにしている。
歯科（dental.css）・形成外科（plastic.css）と同じ方式。
※ 現在ついているのは 「いつものアレルギー薬の継続」の1枚。※書きを持つカードを増やしたら、
その