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

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

   調整が必要になった理由：
   1) メインキャッチ「歯科のオンライン診療」は10文字（眼科と同じ）で、
      base（white-space: nowrap の1行組み）のままで収まるため縮小は不要。
   2) 症状サークルのラベルが「風邪/発熱/腹痛」（2文字）→「歯の痛み/歯並び/治療の相談」
      （最大5文字）。1つ目「歯の痛み」（4文字）と3つ目「治療の相談」（5文字）が
      75pxの丸からはみ出すため縮小する。
   3) FVの症状アイコンを暫定流用（共通 subject-img-internal.svg = 76×68 の非正方形）。
      base は 38×38px の正方形固定で描画するため、そのままだと横に潰れる。
   4) この科目だけ PRESCRIPTION に注記（.prescription-note）を足しているので、
      その分の余白とスタイルを定義する（base には無いクラス）。
   ============================================ */


/* ============================================
   ★ FV：メインキャッチ
   --------------------------------------------
   「歯科のオンライン診療」は10文字。眼科（10文字）と同じで、
   base（SP 32px／480px〜36px／PC 40px・white-space: nowrap）のままで
   375px端末でも1行に収まるため、フォント縮小は不要。

   女性画像を差し替えて重なりが出た場合のみ、下記のコメントを外して調整する。
   ============================================ */
/*
.subject-lp--dental .fv-title {
  font-size: 28px;
  letter-spacing: 0.8px;
}
.subject-lp--dental .fv-pc-title {
  font-size: 38px;
  letter-spacing: 1.4px;
}
*/


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

/* SP：1番目（歯の痛み・4文字） */
.subject-lp--dental .fv-symptoms .fv-symptom:nth-child(1) .fv-symptom-label {
  font-size: 13px;
  letter-spacing: 0;
}

/* SP：3番目（治療の相談・5文字）は1文字多いぶんさらに小さく */
.subject-lp--dental .fv-symptoms .fv-symptom:nth-child(3) .fv-symptom-label {
  font-size: 11px;
  letter-spacing: 0;
}

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

/* PC：丸が90pxと大きいぶん、いずれも軽い縮小で足りる */
@media (min-width: 768px) {
  .subject-lp--dental .fv-pc-symptoms .fv-pc-symptom:nth-child(1) .fv-pc-symptom-label {
    font-size: 15px;
    letter-spacing: 0;
  }
  .subject-lp--dental .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）の「正方形固定」で描画している。
   ⚠️ 共通フォルダに歯科のアイコンが無いため、暫定で subject-img-internal.svg
   （76×68 の非正方形）を3つとも流用している。そのままだと横に潰れるので、
   height固定＋width:auto（比率保持）に上書きする。
   @TODO 歯科専用アイコン（dental/ 配下）に差し替えたら、寸法に合わせて見直すこと
         （トリオ＝歯の痛み・歯並び・治療の相談を維持）。
         「その他の診療科」リスト用の subject-img-dental.svg も併せて必要。
   -------------------------------------------- */
.subject-lp--dental .fv-symptom-icon {
  width: auto;
  height: 38px;
}
@media (min-width: 480px) {
  .subject-lp--dental .fv-symptom-icon {
    height: 42px;
  }
}
.subject-lp--dental .fv-pc-symptom-icon {
  width: auto;
  height: 42px;
}


/* ============================================
   ★ PRESCRIPTION：お薬例の下の注記（この科目だけ追加）
   --------------------------------------------
   歯科のお薬は「痛みや腫れをやわらげるもの」であって治療そのものではない、
   という但し書きを .prescription-list の直後に置いている。
   base には .prescription-note が無いのでここで定義する。
   base の .prescription-list は margin-bottom: 40px なので、
   注記が離れて見えないよう、この科目だけ間隔を詰める。
   ============================================ */
.subject-lp--dental .prescription-list {
  margin-bottom: 12px;
}

/* 値は base の .symptoms-note に揃えている（SP16px左揃え → PC12px中央揃え） */
.subject-lp--dental .prescription-note {
  font-size: 16px;                /* SP基準 */
  line-height: 1.6;
  letter-spacing: -0.16px;
  text-align: left;               /* SP基準 */
  color: var(--c-text);
  margin: 0 0 40px;
}

@media (min-width: 768px) {
  .subject-lp--dental .prescription-note {
    font-size: 12px;              /* PC */
    text-align: center;
  }
}


/* ============================================
   ★ FV：女性画像（差し替え時の位置・サイズ調整）
   --------------------------------------------
   2026-08-26に歯科専用の fv_woman.webp（dental/ 配下）へ差し替え済み。
   ファイルの寸法は共通画像と同じ 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で別々に効くので、必ず両方の表示を確認すること。
   ============================================ */
/*
.subject-lp--dental .fv-fg-woman {
  left: -14%;
  bottom: -18%;
  width: 74%;
  max-width: 340px;
}

@media (min-width: 480px) {
  .subject-lp--dental .fv-fg-woman {
    left: -11%;
    bottom: -14%;
    width: 72%;
    max-width: 450px;
  }
}
*/
.subject-lp--dental .fv-pc-fg-woman {
  left: 50px;
  bottom: -86px;
  width: 300px;
}



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


/* ============================================
   ★ 相談カードのポップアップ：長いタグだけ折り返す
   --------------------------------------------
   base の .symptom-popup-tag は white-space: nowrap ＋ height: 34px 固定で、
   24px × 13文字 ＝ 312px。全角13文字を超えると360px端末ではみ出す
   （subjects/README.md の STEP4 に書いてある制約）。

   歯科には「自宅でホワイトニングをしたい方」（15文字）のように、症状名ではなく
   患者さんの状況をそのまま書くタグがあり13文字に収まらない。
   文言を削るとニュアンスが変わるため、折り返しを許可して逃がしている。

   ※ .symptom-popup-tag 全体ではなく、この修飾クラスを付けたタグだけに効かせること。
     全体にかけると line-height の変更で13文字以内の既存タグまで高さが変わる。
   ============================================ */
.subject-lp--dental .symptom-popup-tag--wrap {
  height: auto;
  min-height: 34px;
  white-space: normal;
  line-height: 1.35;
  padding-top: 5px;
  padding-bottom: 5px;
}


/* --------------------------------------------
   相談カードのポップアップ：※注釈を小さく
   --------------------------------------------
   base の .symptom-popup-drugs は 20px。同じ大きさだと※書きが本文と同じ強さで
   読まれてしまうため、注釈だけ 16px に落とす。
   本文との間に少し余白を入れて、続き文ではなく注釈だと分かるようにしている。

   ※2026-08-28に**このページの※書き7件すべて**を span で括り、大きさを揃えた。
     （それまではカード7（ホワイトニング）だけが16pxで、残り6件は base のまま20pxだった）
     ※書きを持つカードを増やしたら、その <p class="symptom-popup-drugs"> の※以降も
     <span class="symptom-popup-drugs-note"> で括ること
     （span は display:block なので、直前の <br> は不要）。
   -------------------------------------------- */
.subject-lp--dental .symptom-popup-drugs-note {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.5;
}