/* ============================================
   全科目共通 広告LP 専用CSS（/subjects-lp/all/）
   --------------------------------------------
   common/css/common.css（＝テーマの subject.css 共通base）の「後」に読み込む。
   このLP固有の上書きだけをここに書く（他ページ・他科目には影響しない）。
   ※画像参照が必要な場合は ./img/ を基準にする（このファイルは all/css/ 配下）。
   ============================================ */

/* --------------------------------------------
   FV：メインタイトル「SOKUYAKUオンライン診療」

   元の「内科のオンライン診療」（全角10文字）より横幅が広い。
   .fv-title は white-space:nowrap のため、SPでは
   32px のままだと画面幅を超えて横スクロールが発生する。
     例）375px幅・32px … 必要幅 約384px / 使える幅 343px
   そこで viewport 連動の clamp() にして、狭い端末では自動で縮む
   ようにする（480px以上では従来どおり最大32px相当で頭打ち）。
   ※PC版（.fv-pc-title / 40px・コンテナ960px）は
     必要幅 約480px で収まるため調整不要。
   -------------------------------------------- */
.subject-lp--all .fv-title {
  font-size: clamp(22px, 7.2vw, 32px);
}

@media (min-width: 480px) {
  .subject-lp--all .fv-title {
    font-size: 32px;
  }
}
.subject-lp--all .fv-pc-title {
  font-size: 36px;
  letter-spacing: 1.6px;
}
.subject-lp--all .fv-pc-subtitle {
    top: 178px;
}
/* --------------------------------------------
   FV：症状サークルのラベル
   「花粉症」は3文字で他（風邪・皮膚＝2文字）より長いため、
   円からはみ出したり折り返したりしないよう保険をかける。
   -------------------------------------------- */
.subject-lp .fv-symptom-label,
.subject-lp .fv-pc-symptom-label {
  white-space: nowrap;
}

.subject-lp .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label {
  font-size: 14px;
}

@media (min-width: 480px) {
  .subject-lp .fv-symptoms .fv-symptom:nth-child(2) .fv-symptom-label {
    font-size: 16px;
    letter-spacing: 0.64px;
  }
  .subject-lp .fv-pc-symptoms .fv-pc-symptom:nth-child(2) .fv-pc-symptom-label {
    font-size: 16px;
    letter-spacing: 0.64px;
  }
}


/* --------------------------------------------
   アプリDL CTA（吹き出し + ストアボタン）のまとまり
   .fv-foot / .flow-cta / .difference-cta は
   common.css 側が display:flex（横並び）なので、
   縦積み・中央寄せにするためのラッパー。
   -------------------------------------------- */
.subject-lp .fv-foot{
  z-index: 1;
}
   .subject-lp .app-dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* --------------------------------------------
   PC版FV（650px〜）のCTA枠の調整

   .fv-pc は height:388px 固定で、中の要素はすべて絶対配置。
   CTAは bottom 起点で上に伸びるため、
   「テキスト＋ストアボタン」に置き換えて背が高くなったぶん、
   真上のチェック項目（.fv-pc-checks / top:238px・約32px高）と
   重なってしまう。そのため下記を調整する：
     ・max-width:320px を解除（ストアボタン2つが収まらないため）
     ・bottom を 30px → 20px に下げる
     ・ストアボタンとリード文を一回り小さくする
   → CTA高さ 約77px、上端 388-20-77 = 約291px となり、
     チェック項目の下端（約270px）との間に約20pxの余白が確保できる。

   ※ .fv-pc の表示切替は 650px から始まるため、
     ここでの分岐も 768px ではなく 650px に合わせる。
   -------------------------------------------- */
@media (min-width: 650px) {
  .subject-lp .fv-pc-cta {
    max-width: none;
    bottom: 20px;
  }

  /* リード文：小さめ＋ボタンとの余白を詰める */
  .subject-lp .fv-pc-cta .app-dl-text {
    font-size: 16px;
    letter-spacing: 0.64px;
    margin-bottom: 6px;
  }

  /* ストアボタン：表示高さ 50px相当（本文CTAの60pxより控えめ）
     ※後方の .cta-app-buttons--cta 側のPC指定（180/202px）と
       詳細度が並ばないよう、セレクタを1段深くして必ず勝たせる */
  .subject-lp .fv-pc-cta .cta-app-buttons--cta .cta-app-btn--ios img {
    width: 150px;                      /* 50 × 3.00 */
  }
  .subject-lp .fv-pc-cta .cta-app-buttons--cta .cta-app-btn--android img {
    width: 168px;                      /* 50 × 3.36 */
  }
}


/* --------------------------------------------
   FVのリード文「今すぐ無料でダウンロード」
   FVは要素が詰まっていて吹き出しだと窮屈なため、
   テキストのみ（吹き出しなし）で軽く見せる。
   -------------------------------------------- */
.subject-lp .app-dl-text {
  margin: 0 0 8px;
  text-align: center;
  color: var(--c-text);                /* #193255 */
  font-size: 16px;                     /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.64px;
}

@media (min-width: 768px) {
  .subject-lp .app-dl-text {
    font-size: 18px;                   /* PC */
    letter-spacing: 0.72px;
    margin-bottom: 10px;
  }
}


/* --------------------------------------------
   吹き出し「無料でダウンロードする」（流れ後 / 違い後）
   - .cta-app-sub と同じ pill + 下向き三角の形状
   - 白背景セクション（difference等）でも視認できるよう
     白地ではなくメインカラー塗りにしている
   -------------------------------------------- */
.subject-lp .app-dl-bubble {
  position: relative;
  display: inline-block;
  background: var(--c-primary);        /* #06b4d7 */
  color: #fff;
  border-radius: 50px;                 /* pill形状 */
  margin: 0 0 18px;
  padding: 10px 24px;
  text-align: center;
  font-size: 18px;                     /* SP基準 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.72px;
}

/* 吹き出しの三角（尻尾） */
.subject-lp .app-dl-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 10px solid var(--c-primary);
}

@media (min-width: 768px) {
  .subject-lp .app-dl-bubble {
    font-size: 20px;                   /* PC */
    letter-spacing: 0.8px;
    padding: 12px 28px;
    margin-bottom: 20px;
  }
}


/* --------------------------------------------
   CTA：WEB予約ボタン → アプリストアボタンに置換
   （FV-SP / FV-PC / 流れ後 / 違い後 / 追従バナー の5箇所）

   .cta-app-buttons のレイアウト（flex・中央寄せ・gap）は
   common.css をそのまま利用し、ここではサイズだけ指定する。

   ★縦横比について
     btn_ios.webp     … 360 × 120（3.00 : 1）
     btn_android.webp … 403 × 120（3.36 : 1）
   2枚は横幅比が違うため、height を固定すると
   base.min.css の max-width:100% が効いたときに幅だけ縮み、
   比率が崩れてボタン上のテキストが縦長になる。
   そこで「幅を指定・高さは auto」の幅基準サイズ指定にし、
   同じ表示高さに揃うよう幅を比率ぶん変えている。
   -------------------------------------------- */
.subject-lp .cta-app-buttons--cta,
.subject-lp .cta-app-buttons--banner {
  margin: 0 auto;
}

/* 高さは常に比率追従（height 固定はしない） */
.subject-lp .cta-app-buttons--cta .cta-app-btn img,
.subject-lp .cta-app-buttons--banner .cta-app-btn img {
  height: auto;
  max-width: 100%;
  object-fit: contain;                 /* 万一幅が制限されても潰さない保険 */
}


/* ---- CTA本文（FV・流れ後・違い後）：表示高さ 48px相当（SP） ---- */
.subject-lp .cta-app-buttons--cta .cta-app-btn--ios img {
  width: 144px;                        /* 48 × 3.00 */
}
.subject-lp .cta-app-buttons--cta .cta-app-btn--android img {
  width: 161px;                        /* 48 × 3.36 */
}

@media (min-width: 768px) {
  /* 表示高さ 60px相当（PC） */
  .subject-lp .cta-app-buttons--cta .cta-app-btn--ios img {
    width: 180px;                      /* 60 × 3.00 */
  }
  .subject-lp .cta-app-buttons--cta .cta-app-btn--android img {
    width: 202px;                      /* 60 × 3.36 */
  }
}


/* ---- 追従バナー：表示高さ 52px相当（SP） ----
   ※SP幅320px級の端末では2つ＋gapで枠を超えるが、
     img は max-width:100% ＋ height:auto なので
     比率を保ったまま自動で縮む（潰れない）。            */
.subject-lp .cta-app-buttons--banner .cta-app-btn--ios img {
  width: 156px;                        /* 52 × 3.00 */
}
.subject-lp .cta-app-buttons--banner .cta-app-btn--android img {
  width: 175px;                        /* 52 × 3.36 */
}

@media (min-width: 768px) {
  /* 表示高さ 64px相当（PC） */
  .subject-lp .cta-app-buttons--banner .cta-app-btn--ios img {
    width: 192px;                      /* 64 × 3.00 */
  }
  .subject-lp .cta-app-buttons--banner .cta-app-btn--android img {
    width: 215px;                      /* 64 × 3.36 */
  }
}

  .subject-lp--all .symptoms-title-s {
    font-size: 24px;
  }
  .subject-lp--all .prescription-title-s {
    font-size: 24px;
  }

@media (min-width: 768px) {
  .subject-lp--all .symptoms-title-s {
    font-size: 26px;
  }
  .subject-lp--all .prescription-title-s {
    font-size: 26px;
  }
}


.subject-lp .review-subtitle {
    font-size: 20px;
    line-height: 1.4;
}