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

   方針：
   - 共通の見た目は subject.css（触らない）。発熱・インフルエンザだけの微調整をここに書く。
   - すべて .subject-lp--influenza 配下に書く（他科目に影響させない）。
   - 内科（internal）ベースをそのまま表示 → 崩れた箇所だけ下記で調整。

   調整が必要になった理由：
   1) メインキャッチが「内科のオンライン診療」（11文字）→
      「発熱・インフルエンザのオンライン診療」（18文字）で7文字増える
      （base は white-space: nowrap の1行前提。そのままだと SP でも PC でも横にはみ出す）
   2) 症状サークルのラベルが「風邪/発熱/腹痛」（2文字）→「高熱/のどの痛み/咳」（最大5文字）
   3) FVの症状アイコンを暫定流用（耳鼻科の sore-throat 等、非正方形イラスト混在）
   ============================================ */


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

/* SP（〜479px）：<br> で「発熱・インフルエンザの／オンライン診療」の2行表示（心療内科LPと同様）。
   1行目11文字 × 30px ≒ 330px で、360px端末でも収まる */
.subject-lp--influenza .fv-title {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

/* SP（480px〜767px）：横幅に余裕が出るぶんベースと同じ36pxに戻す（1行目11文字 × 36px ≒ 396px） */
@media (min-width: 480px) {
  .subject-lp--influenza .fv-title {
    font-size: 36px;
    letter-spacing: 1px;
  }
}

/* PC（768px〜）：base の40pxだと 18文字 × 40px ≒ 720px となり、
   FVの装飾画像・症状サークルと重なるため縮小する（18文字 × 32px ≒ 576px）。
   ※実機で女性画像・サークルとの重なりを確認し、必要ならさらに詰めること。 */
@media (min-width: 768px) {
  .subject-lp--influenza .fv-pc-title {
    font-size: 32px;
    letter-spacing: 1px;
  }
}


/* ============================================
   ★ FV：症状サークル（高熱 / のどの痛み / 咳）
   --------------------------------------------
   base のラベルは SP 16px・PC 18px。内科は「風邪/発熱/腹痛」の2文字前提。
   2つ目の「のどの痛み」は5文字で、75pxの丸からはみ出すため縮小する。
   ============================================ */

/* SP：2番目（のどの痛み）だけ縮小 */
.subject-lp--influenza .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label {
  font-size: 12px;
  letter-spacing: 0;
}

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

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

/* --------------------------------------------
   症状アイコンの暫定流用に伴う調整
   --------------------------------------------
   base は .fv-symptom-icon を 38×38px（PCは42×42px）の「正方形固定」で描画している。
   暫定流用中のイラスト（耳鼻科 sore-throat 等）は非正方形のため、
   height固定＋width:auto（比率保持）に上書きして歪みを防ぐ。
   @TODO 発熱・インフルエンザ専用イラスト（influenza/ 配下）に差し替えたら、
         寸法に合わせてこのブロックを見直すこと。
   -------------------------------------------- */
.subject-lp--influenza .fv-symptom-icon {
  width: auto;
  height: 38px;
}
@media (min-width: 480px) {
  .subject-lp--influenza .fv-symptom-icon {
    height: 42px;
  }
}
.subject-lp--influenza .fv-pc-symptom-icon {
  width: auto;
  height: 42px;
}


/* ============================================
   ★ FV：女性画像（差し替え時の位置・サイズ調整）
   --------------------------------------------
   現在は内科の共通 fv_woman.webp を暫定使用しているため調整不要（baseのままでOK）。
   専用画像（influenza/fv_woman.webp）に差し替えたら、縦横比・立ち位置に合わせて
   下記のコメントを外して調整すること（値は消化器内科の実績値を初期値として記載）。

   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--influenza .fv-fg-woman {
  left: -14%;
  bottom: -18%;
  width: 74%;
  max-width: 340px;
}

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

.subject-lp--influenza .fv-pc-fg-woman {
  left: -10px;
  bottom: -22px;
  width: 250px;
}
*/


/* ============================================
   ★ その他セクションの微調整
   - 必要になったら .subject-lp--influenza 配下に追記していく。
   - 例：症状タグ「お子さまの発熱・インフルエンザ」（15文字）の折り返しが
     気になる場合など。
   ============================================ */




/* ============================================
   ★ TREATMENT（オンラインでも…治療を処方できます）
   --------------------------------------------
   SYMPTOMS の直後に入るセクション。
   Figma：PC node 7019:864 / SP node 7036:895（どちらも flu-covid-treatment）
   markup は subjects/influenza.php の「2-2. TREATMENT」。JSは不要。

   PCとSPで違うのは次の4点：
     1) 見出しのサイズと改行位置（PC 30px・2行／SP 24px・3行）
     2) ボックスの左右padding（PC 30px／SP 22px）
     3) 本文とイラストの並び（PC 横並び gap30／SP 縦並び gap20）
     4) イラストの幅（PC 171px／SP 145px）
   ボックス幅は Figma PC=700px で、共通コンテナ .inner-box-narrow（700px）と一致するため
   ボックス側では指定しない。
   ============================================ */

.subject-lp--influenza .treatment {
  background: #fff;
}


/* --------------------------------------------
   セクションタイトル
   Figma：PC 30px（＝共通 h2 の既定値）／SP 24px。
   ただしFigmaのSPアートボードは幅480px前提で、2行目
   「インフルエンザ・新型コロナ治療を」（16文字）は 16×24＝384px 必要。
   360〜390px端末では収まらず4行に折り返すため、
   479px以下だけ20px（16×20＝320px）に落とす。
   ※FVのメインキャッチと同じ考え方（このファイル上部の調整と揃えている）
   -------------------------------------------- */
.subject-lp--influenza .treatment-title {
  font-size: 20px;               /* SP（〜479px） */
  margin-bottom: 30px;
}

@media (min-width: 480px) {
  .subject-lp--influenza .treatment-title {
    font-size: 24px;              /* Figma SP */
  }
}

@media (min-width: 768px) {
  .subject-lp--influenza .treatment-title {
    font-size: 30px;              /* Figma PC（＝共通 h2 の既定値） */
    margin-bottom: 40px;
  }
}

/* 「インフルエンザ・新型コロナ治療を処方」だけアクセントカラー（Figma：#00accf） */
.subject-lp--influenza .treatment-title-accent {
  color: var(--c-accent);
}


/* --------------------------------------------
   水色ボックス
   Figma：bg #E8F8FF / radius 20 / padding PC 30px・SP 30px 22px
   -------------------------------------------- */
.subject-lp--influenza .treatment-box {
  background: #e8f8ff;
  border-radius: 20px;
  padding: 30px 22px;            /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp--influenza .treatment-box {
    padding: 30px;                /* PC */
  }
}


/* --------------------------------------------
   ボックス見出し + 区切り線
   Figma：20px / Bold / #00accf / line-height 1.6 / 中央揃え
   見出しと線の間は3px、線の下は30px。
   線は1pxの直線なのでCSSで再現（Figma：#BBD8F5）。
   -------------------------------------------- */
.subject-lp--influenza .treatment-box-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--c-accent);
  margin-bottom: 3px;            /* 共通 h3 の 16px を上書き */
}

.subject-lp--influenza .treatment-box-divider {
  width: 100%;
  height: 0;
  margin: 0 auto 30px;
  border: 0;
  border-top: 1px solid #bbd8f5;
}

@media (min-width: 768px) {
  /* PCはボックス内寸640pxに対して線が621px（Figma） */
  .subject-lp--influenza .treatment-box-divider {
    max-width: 621px;
  }
}


/* --------------------------------------------
   本文 + 検査キットイラスト
   Figma：SP＝縦並び gap20・イラスト中央／PC＝横並び gap30・上下中央
   -------------------------------------------- */
.subject-lp--influenza .treatment-box-body {
  display: flex;
  flex-direction: column;        /* SP基準 */
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .subject-lp--influenza .treatment-box-body {
    flex-direction: row;          /* PC */
    gap: 30px;
  }
}

/* Figma：16px / Regular / line-height 1.8 / #193255 */
.subject-lp--influenza .treatment-box-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
}

@media (min-width: 768px) {
  /* PCはイラストの残り幅（640 − 171 − 30 ≒ 439px）を本文が使う */
  .subject-lp--influenza .treatment-box-text {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Figma書き出し：kit.svg（145×110）。PCは等倍の171px相当まで拡大 */
.subject-lp--influenza .treatment-box-img {
  width: 145px;                  /* SP基準 */
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .subject-lp--influenza .treatment-box-img {
    width: 171px;                 /* PC（等倍） */
  }
}


/* --------------------------------------------
   注釈
   Figma：12px / Regular / line-height 1.7 / #193255
   -------------------------------------------- */
.subject-lp--influenza .treatment-box-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text);
}

/* ============================================
   ★ PREVENTION CTA（インフルエンザ予防薬の処方・検査キット）
   --------------------------------------------
   PRESCRIPTION の直後・STORIES（こんな方にご利用いただいています）の直前に入るセクション。
   Figma：PC node 7025:799 / SP node 7038:985（どちらも flu-covid-cta）
   markup は subjects/influenza.php の「3-2. PREVENTION CTA」。JSは不要。

   PCとSPで違うのは次の3点だけ（それ以外を@mediaで上書きしないこと）：
     1) ボタンの並び   … PC 横並び gap10／SP 縦並び gap20
     2) ボタンの寸法   … PC 270×60・文字16px／SP 幅100%(最大440)×84・文字20px
     3) 縦の間隔       … PC 見出し40／ボタン下22、SP はどちらも30
   加えて439px以下のみ、見出しの改行を1つ増やしている（下の -br-narrow のコメント参照）
   コンテナ幅は共通の .inner-box-narrow（700px）を使用。
   Figma PCのボタン2つの合計は 270+10+270＝550px で、700pxの中で中央寄せになる。

   矢印はFigmaでは三角形のSVG（12.256×14.708）で書き出されるが、
   共通の .cta-line-btn-arrow がまったく同じ三角形をCSSで描いているため、
   画像を増やさずそちらと同じ手法（border三角形・12×14px）で再現している。
   ============================================ */

.subject-lp--influenza .prevention-cta {
  background: #fff;
}


/* --------------------------------------------
   見出し
   Figma：20px / Black / line-height 1.4 / center / #193255
   ※共通 h2（30px）とはサイズが違うため、markup側も p にしている
   -------------------------------------------- */
.subject-lp--influenza .prevention-cta-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  color: var(--c-text);
  margin: 0 0 30px;              /* SP基準 */
}

@media (min-width: 768px) {
  .subject-lp--influenza .prevention-cta-title {
    margin-bottom: 40px;          /* PC */
  }
}

/* 「インフルエンザ予防薬の処方・検査キット」だけアクセントカラー（Figma：#00accf）。
   直後の「の」は本文色のままなので、spanで囲む範囲を広げないこと */
.subject-lp--influenza .prevention-cta-title-accent {
  color: var(--c-accent);
}

/* 439px以下だけ効く追加改行（markup側の <br class="prevention-cta-br-narrow">）
   FigmaのSPアートボードは幅440px。2行目「インフルエンザ予防薬の処方・検査キットの」は
   20文字×20px＝400px必要で、440pxなら収まるが実機（360〜430px）では収まらず
   「の」1文字だけが行末にこぼれてしまう。
   そこで439px以下だけ「…処方・／検査キットの」で割り、20pxのまま4行に組む。
   （TREATMENT見出しのように文字サイズを落とす手もあるが、20px→16pxだと本文と同じ大きさに
     なってしまうため、こちらは改行位置で吸収している）
   440px以上ではFigmaどおりの3行に戻る。 */
.subject-lp--influenza .prevention-cta-br-narrow {
  display: inline;
}

@media (min-width: 440px) {
  .subject-lp--influenza .prevention-cta-br-narrow {
    display: none;
  }
}


/* --------------------------------------------
   ボタンの並び
   Figma：SP＝縦並び gap20／PC＝横並び gap10（270+10+270＝550px を中央寄せ）
   -------------------------------------------- */
.subject-lp--influenza .prevention-cta-btns {
  display: flex;
  flex-direction: column;        /* SP基準 */
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .subject-lp--influenza .prevention-cta-btns {
    flex-direction: row;          /* PC */
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
  }
}


/* --------------------------------------------
   ボタン本体
   Figma：radius 44 / 文字 Black・白 / 中央揃え・2行
          SP＝幅440×高さ84・20px／PC＝幅270×高さ60・16px
   左右paddingは矢印の逃げぶん。PCは内寸210pxで、
   最長行「インフルエンザ予防薬の」（11文字×16px＝176px）が収まる値にしてある。
   SPは内寸が「画面幅−32−80」なので、最長行（11文字×20px＝220px）が収まるのは
   幅332px以上の端末。320px端末だけは3行に折り返すが、共通の .cta-btn（24.5px）も
   同様に収まらないため、この幅への個別対応はしていない。
   -------------------------------------------- */
.subject-lp--influenza .prevention-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 440px;              /* SP基準（Figma 440px） */
  min-height: 84px;
  padding: 12px 40px;
  border-radius: 44px;
  background: #7abee6;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: opacity .3s;
}

.subject-lp--influenza .prevention-cta-btn:hover {
  opacity: .9;
}

@media (min-width: 768px) {
  .subject-lp--influenza .prevention-cta-btn {
    width: 270px;                 /* PC */
    max-width: 270px;
    min-height: 60px;
    padding: 8px 30px;
    font-size: 16px;
  }
}

/* 2つ目（検査キットの購入＝アプリDL）はページ内で使っているピンク。
   当初はLINE緑（Figma）だったが、検査キットの販売がアプリのみの導線になったため
   2026-08-21に暖色系へ変更した（担当指定）。
   色は CASE セクションのサブタイトルと同じ #ef6f74 ＝ var(--c-cta) を流用している。
   Figmaのボタン同様、内側の影は付けずフラットのまま */
.subject-lp--influenza .prevention-cta-btn--app {
  background: var(--c-cta);
}


/* --------------------------------------------
   ボタン右の三角（Figmaのアイコンと同寸：12×14px）
   -------------------------------------------- */
.subject-lp--influenza .prevention-cta-btn-arrow {
  position: absolute;
  right: 28px;                   /* SP基準（Figma実測 ≒28px） */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #fff;
}

@media (min-width: 768px) {
  .subject-lp--influenza .prevention-cta-btn-arrow {
    right: 16px;                  /* PC */
  }
}


/* --------------------------------------------
   注釈
   Figma：14px / Regular / line-height 1.4 / center / #193255
   -------------------------------------------- */
.subject-lp--influenza .prevention-cta-note {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--c-text);
  margin: 0;
}


/* ============================================
   ★ SYMPTOM CHECK（こんな症状は診療・処方してもらえる？）
   --------------------------------------------
   STORIES（こんな方にご利用いただいています）の直後に入るセクション。
   Figma：PC node 7064:787 / SP node 7038:1001（どちらも flu-covid-check）
   markup は subjects/influenza.php の「4-2. SYMPTOM CHECK」、
   挙動は assets/js/subject.js の「SYMPTOM CHECK」ブロック。

   このコンテンツは発熱・インフルエンザページ専用のため、共通の subject.css ではなく
   このファイル（.subject-lp--influenza 配下）に置く。
   他科目にも横展開することになったら subject.css へ移すこと。

   PCとSPで数値はほぼ共通。違うのは次の3点だけ（それ以外を@mediaで上書きしないこと）：
     1) wizard-header … SPは幅100%、PCは幅400pxで中央寄せ
     2) 設問＋選択肢   … SPは幅100%、PCは幅640pxで中央寄せ
     3) 設問文の揃え   … SPは左揃え、PCは中央揃え
   カード幅は Figma PC=700px で、共通コンテナ .inner-box-narrow（700px）と一致するため
   カード側では指定しない。

   ※Figmaにあるのは最初の設問（q0）のみ。結果画面はデザインが無いため、
     同じトークン（色・角丸・余白）を流用して組んでいる。
   ============================================ */

.subject-lp--influenza .symptom-check {
  background: #fff;
  margin-bottom: 25px;
  padding-top:0;
}
@media (min-width: 768px) {
.subject-lp--influenza .symptom-check {
  background: #fff;
  margin-bottom: 30px;
}
}


/* --------------------------------------------
   見出し・リード文
   Figma：ttl 30px / Black / center / #193255（＝共通 h2 の既定値と一致するため
   サイズや色は指定しない）。ttl→リード 16px、リード→カード 30px。
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-title {
  margin-bottom: 16px;
}

/* 「診療・処方」だけアクセントカラー（Figma：#00accf ＝ var(--c-accent)） */
.subject-lp--influenza .symptom-check-title-accent {
  color: var(--c-accent);
}

.subject-lp--influenza .symptom-check-lead {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
  margin: 0 0 30px;
}


/* --------------------------------------------
   カード本体
   Figma：bg #F7F6F2 / radius 16 / padding 20（PC・SP共通）
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-card {
  background: #f7f6f2;
  border-radius: 16px;
  padding: 20px;
}


/* --------------------------------------------
   ステップ表記 + プログレスバー
   Figma：wizard-header pt12 / pb20、その下にカードの gap 16 が入るので
   プログレスバーと設問文の間は合計36px。
   PCのみ幅400pxで中央寄せ。
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-header {
  padding: 12px 0 20px;
  margin-bottom: 16px;           /* Figma：card の gap 16 に相当 */
}

@media (min-width: 768px) {
  .subject-lp--influenza .symptom-check-header {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.subject-lp--influenza .symptom-check-step {
  font-size: 12px;
  font-weight: 600;
  color: #1474b8;
  text-align: center;
  line-height: normal;
  margin: 0 0 18px;
}

/* Figma：h6 / gap4 / radius3 */
.subject-lp--influenza .symptom-check-progress {
  display: flex;
  gap: 4px;
  height: 6px;
}

.subject-lp--influenza .symptom-check-progress span {
  flex: 1 0 0;
  min-width: 1px;
  height: 100%;
  border-radius: 3px;
  background: #aeaeae;           /* 未通過 */
  transition: background .2s;
}

.subject-lp--influenza .symptom-check-progress span.is-done {
  background: var(--c-accent);   /* 通過済み（Figma：#00accf） */
}


/* --------------------------------------------
   設問の表示切替
   JSが無効な場合は最初の設問（q0）だけが出る
   PCのみ幅640pxで中央寄せ（Figma：question-container 640px）
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-view {
  display: none;
}

.subject-lp--influenza .symptom-check-view.is-active {
  display: block;
}

@media (min-width: 768px) {
  .subject-lp--influenza .symptom-check-view {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* --------------------------------------------
   設問文
   Figma：18px / Bold / line-height 1.4 / #1474B8
   揃えはSP＝左、PC＝中央
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-q {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #1474b8;
  margin: 0 0 16px;
}

@media (min-width: 768px) {
  .subject-lp--influenza .symptom-check-q {
    text-align: center;
  }
}


/* --------------------------------------------
   選択肢
   Figma：stack gap 12 / button bg #fff / border 1.5px #8EA7C9
          / radius 12 / padding 16 / gap 12（PC・SP共通）
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subject-lp--influenza .symptom-check-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1.5px solid #8ea7c9;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

/* hover/フォーカス時の見た目はFigmaに定義が無いため、ページ内の他ボタンに合わせた控えめな指定 */
.subject-lp--influenza .symptom-check-opt:hover,
.subject-lp--influenza .symptom-check-opt:focus-visible {
  border-color: #1474b8;
  background: #eaf2fa;
  box-shadow: 0 2px 8px rgba(20, 116, 184, .10);
}

/* Figma：option-text-group gap 4 */
.subject-lp--influenza .symptom-check-opt-label {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #211715;
  word-break: break-word;
}

.subject-lp--influenza .symptom-check-opt-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #6b6b66;
}

/* chevron-right（Figma書き出し：influenza/chevron-right.svg・16×16） */
.subject-lp--influenza .symptom-check-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}


/* --------------------------------------------
   「戻る」（Figmaに定義が無いため、テキストリンク相当の控えめな指定）
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-backbar {
  margin-top: 16px;
}

.subject-lp--influenza .symptom-check-back {
  background: none;
  border: none;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  color: #6b6b66;
  cursor: pointer;
}

.subject-lp--influenza .symptom-check-back:hover {
  color: #1474b8;
}


/* --------------------------------------------
   結果画面
   ※Figma未作成。設問画面と同じトークンで組んでいる。
     デザインが出たら要突き合わせ。
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto 16px;
}

.subject-lp--influenza .symptom-check-icon.is-ok {
  background: #e0f4f9;
  color: #0093b1;
}

.subject-lp--influenza .symptom-check-icon.is-ng {
  background: #fbeae8;
  color: #c94a3c;
}

.subject-lp--influenza .symptom-check-result-ttl {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #1474b8;
  margin: 0 0 8px;
}

.subject-lp--influenza .symptom-check-result-desc {
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  color: #6b6b66;
  margin: 0 0 20px;
}


/* --------------------------------------------
   結果画面のCTA
   1つ目＝WEB予約（$web_cta_url）／LINE相談は $line_url
   -------------------------------------------- */
.subject-lp--influenza .symptom-check-cta {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 16px;
  border: none;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}

.subject-lp--influenza .symptom-check-cta:hover {
  background: #0093b1;
}

/* 2つ目以降のCTAは間隔をあける */
.subject-lp--influenza .symptom-check-cta + .symptom-check-cta {
  margin-top: 10px;
}

.subject-lp--influenza .symptom-check-cta.is-secondary {
  background: #fff;
  color: #1474b8;
  border: 1.5px solid #8ea7c9;
}

.subject-lp--influenza .symptom-check-cta.is-secondary:hover {
  background: #eaf2fa;
}

.subject-lp--influenza .symptom-check-cta-sub {
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: #6b6b66;
  margin: 10px 0 0;
}

.subject-lp--influenza .symptom-check-restart {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: #1474b8;
  text-decoration: underline;
  cursor: pointer;
}