/* ============================================
   呼吸器内科ページ 専用CSS（.subject-lp--respiratory）
   --------------------------------------------
   subject.css（共通base）の「後」に header.php が自動読込。
   対象URL：/subjects/respiratory/（SEO版）および /subjects/lp/respiratory/（広告LP・作成時）
   ※ このファイルは assets/css/subjects/ 配下のため、画像参照は ../../img/... 基準
     （base の subject.css は assets/css/ 直下なので ../img/... 基準。1階層ぶん深い点に注意）

   方針：
   - 共通の見た目は subject.css（触らない）。呼吸器内科だけの微調整をここに書く。
   - すべて .subject-lp--respiratory 配下に書く（他科目に影響させない）。
   - 泌尿器科（urology）ベースをそのまま表示 → 崩れた箇所だけ下記で調整。

   調整が必要になった理由：
   1) メインキャッチが「呼吸器内科のオンライン診療」＝13文字。base（white-space: nowrap の
      1行組み）のままだと SP で1行に収まらないため縮小する。
      （内科11文字／眼科10文字／泌尿器科12文字／消化器内科13文字。消化器内科と同じ文字数
       なので、消化器内科の実績値をそのまま採用している）
   2) 症状サークルのラベルが「風邪/発熱/腹痛」（2文字）→「喘息/長引く咳/喘鳴」
      （最大4文字）で、2つ目「長引く咳」が 75px の丸からはみ出すため縮小する。
   3) FVの症状アイコンを暫定流用（共通 subject-img-respiratory.svg）。
      base は 38×38px の正方形固定で描画するため、非正方形だと歪む。
   ============================================ */


/* ============================================
   ★ FV：メインキャッチ（1行組みのまま縮小して吸収）
   --------------------------------------------
   base：SP 32px（480px〜36px）／ PC 40px。いずれも white-space: nowrap の1行組み。
   「呼吸器内科のオンライン診療」は13文字で、base のサイズだと SP で1行に収まらない。
   ※<br>で2行にすると、下の女性画像・チェック項目まで押し下がって
     FV全体のバランスが崩れるため、1行のままフォントサイズで吸収する方針。
   ============================================ */

/* SP（〜479px）：13文字 × 26px ≒ 340px で、375px端末でも1行に収まる */
.subject-lp--respiratory .fv-title {
  font-size: 26px;
  letter-spacing: 0.8px;
}

/* SP（480px〜767px）：横幅に余裕が出るぶん少し戻す */
@media (min-width: 480px) {
  .subject-lp--respiratory .fv-title {
    font-size: 32px;
    letter-spacing: 1.2px;
  }
}

/* PC（768px〜）：コンテナ960pxに対し 13文字 × 40px ≒ 520px で収まるため base のままでOK。
   女性画像を差し替えて重なりが出た場合のみ、下記のコメントを外して調整する。 */
/*
.subject-lp--respiratory .fv-pc-title {
  font-size: 38px;
  letter-spacing: 1.4px;
}
*/


/* ============================================
   ★ FV：症状サークル（喘息 / 長引く咳 / 喘鳴）
   --------------------------------------------
   base のラベルは SP 16px・PC 18px。内科は「風邪/発熱/腹痛」の2文字前提で
   丸のサイズ（SP 75px / PC 90px）が決まっている。
   2つ目の「長引く咳」は4文字ではみ出すため縮小する。
   （1つ目「喘息」・3つ目「喘鳴」は2文字なので base のままでOK）
   ============================================ */

/* SP：2番目（長引く咳）だけ縮小 */
.subject-lp--respiratory .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label {
  font-size: 13px;
  letter-spacing: 0;
}

@media (min-width: 480px) {
  .subject-lp--respiratory .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label {
    font-size: 15px;
  }
}

/* PC：丸が90pxと大きいぶん、2番目（長引く咳）のみ軽く縮小 */
@media (min-width: 768px) {
  .subject-lp--respiratory .fv-pc-symptoms .fv-pc-symptom:nth-child(2) .fv-pc-symptom-label {
    font-size: 15px;
    letter-spacing: 0;
  }
}

/* --------------------------------------------
   症状アイコンの暫定流用に伴う調整
   --------------------------------------------
   base は .fv-symptom-icon を 38×38px（PCは42×42px）の「正方形固定」で描画している。
   2026-08-21に差し替えた専用アイコン3点は縦横比がばらばら
   （asthma 262×266 / cough 225×256 / wheeze 332×259）なので、
   height固定＋width:auto（比率保持）に上書きして歪みを防いでいる。
   wheeze だけ横長で、42px高のとき幅が54px相当になる（他は37〜41px）。
   サークル（SP 75px / PC 90px）には収まっているが、差し替え時は要確認。
   -------------------------------------------- */
.subject-lp--respiratory .fv-symptom-icon {
  width: auto;
  height: 38px;
}
@media (min-width: 480px) {
  .subject-lp--respiratory .fv-symptom-icon {
    height: 42px;
  }
}
.subject-lp--respiratory .fv-pc-symptom-icon {
  width: auto;
  height: 42px;
}


/* ============================================
   ★ FV：女性画像（差し替え時の位置・サイズ調整）
   --------------------------------------------
   2026-08-21に呼吸器内科専用の fv_woman.webp（respiratory/ 配下）へ差し替え済み。
   ファイルの寸法は共通画像と同じ 628×948 だが、**画のなかの人物の位置と大きさが違う**ため、
   下の調整ブロックを有効にして実機で詰めてある（共通画像のときはコメントアウトされていた）。
   寸法が同じでも立ち位置は合わない、という前提で見ること。

   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--respiratory .fv-fg-woman {
  left: -11%;
  bottom: -22%;
  width: 80%;
  max-width: 340px;
}

@media (min-width: 480px) {
  .subject-lp--respiratory .fv-fg-woman {
    left: -11%;
    bottom: -16%;
    width: 76%;
    max-width: 450px;
  }
}

.subject-lp--respiratory .fv-pc-fg-woman {
  left: -44px;
  bottom: -134px;
  width: 340px;
}



/* ============================================
   ★ その他セクションの微調整
   - 必要になったら .subject-lp--respiratory 配下に追記していく。
   ============================================ */


/* --------------------------------------------
   症状カードのポップアップ：※注釈を小さく
   --------------------------------------------
   base の .symptom-popup-drugs は 20px。同じ大きさだと※書きが本文（お薬名）と
   同じ強さで読まれてしまうため、注釈だけ 16px に落とす。
   本文との間に余白を入れて、続き文ではなく注釈だと分かるようにしている。
   全科目共通の書き方（2026-08-28にサイト全体で統一）。

   ※ 現在ついているのは「喘鳴・ゼーゼーヒューヒュー」「吸入薬の継続処方・使い方」の2枚。※書きを持つカードを増やしたら、
     その <p class="symptom-popup-drugs"> の※以降も
     <span class="symptom-popup-drugs-note"> で括ること
     （span は display:block なので、直前の <br> は不要）。
   -------------------------------------------- */
.subject-lp--respiratory .symptom-popup-drugs-note {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}
