/* =========================================================
   ABテスト専用CSS  ─  副作用セクションABテスト
   開始日: 2026-07-07
   対象:   男性LP hrm2 全17ページ（all/tky/osk/ngy/kyt/kob/stm/fkk/ykh の gl+ms）
           ※ CSSは全hrm2に効くが、B案DOMはOptimize Nextで配信された時だけ出る
   Optimize Next: 副作用セクションAB（変更3点＝アンカー文言/位置＋副作用セクション新設）
   Notion:  「予約の前に、特に見たい情報があるのだけど…」
   ─────────────────────────────────────────────────────────
   ※テスト終了時 → 本ファイルを空にする or 削除し、
     head_listing / head_basic / head_all_no-online の
     <link ... ab-test.css> 行を削除すること。
     撤去確認: grep -rn "ab-test.css" lp-aga/
   ─────────────────────────────────────────────────────────
   命名: 既存クラスと衝突させないため全て .sideeffect-ab 名前空間配下。
   トンマナ実値（既存LPから採取）:
     緑アクセント #58bba2 / 濃紺テキスト #162c3f
     セクション見出しは既存 .section__title（en+ja 2段）を踏襲
   ========================================================= */

/* ===== ① アンカーリンク：3つ目を「副作用について知りたい」に差し替えた時の微調整枠 =====
   （既存 .trouble__list2 .trouble__item2 のスタイルをそのまま使うため原則不要。
     文言が2行→リンク内の行数が変わる場合の調整だけここに書く） */


/* ===== ② アンカーリンクをFV直下へ移動した時の余白調整枠 =====
   （移動はOptimize NextのDOM操作で行う。移動先での上下marginズレが出たらここで補正） */


/* =========================================================
   ③ 副作用セクション新設（.sideeffect-ab）
   設置位置: 比較表(comparison)の直後 / 選ばれる理由(strength)の直前
   ========================================================= */
.sideeffect-ab {
  /* セクション外枠。既存セクションの左右innerに合わせる（.inner 相当を内包する想定） */
  padding: 0;
  /* アンカー着地位置を40px上で止める（行き過ぎ防止・レイアウトは崩さない） */
  scroll-margin-top: 40px;
}

.sideeffect-ab .inner {
  /* 既存 .inner に合わせた最大幅・左右余白は本体CSSの .inner が効くため、
     ここでは上書きしない。B案DOM側で <div class="inner"> を使う。 */
}

/* --- 見出し（既存 .section__title を流用するので最小限） --- */
.sideeffect-ab .section__title {
  /* 既存の .section__title がそのまま効く。色や余白の微調整が要ればここ。 */
}

/* --- リード文 --- */
.sideeffect-ab__lead {
  color: #162c3f;
  line-height: 1.8;
  margin-bottom: 24px;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
}

/* --- 「Dr.AGAクリニックの副作用への対応体制」3項目カード --- */
.sideeffect-ab__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.sideeffect-ab__card {
  border: 0;
  border-radius: 0;
  background: rgba(88, 187, 162, 0.2);
  overflow: hidden;
}

.sideeffect-ab__card-head {
  background: #58bba2;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  padding: 14px 12px;
  line-height: 1.5;
}

.sideeffect-ab__card-body {
  padding: 16px;
  color: #162c3f;
  line-height: 1.8;
  font-size: 0.95em;
}

/* --- 副作用ページへのリンク（小テキスト） --- */
.sideeffect-ab__pagelink {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
}
.sideeffect-ab__pagelink a {
  color: #2c587e;
  text-decoration: underline;
}

/* --- 締め＋カウンセリング誘導 --- */
.sideeffect-ab__closing {
  margin-top: 24px;
  text-align: center;
  color: #162c3f;
  line-height: 1.8;
}

/* --- セクション末尾CTA（既存 .reservation を流用） --- */
.sideeffect-ab .reservation {
  margin-top: 32px;
  padding: 0;
  background: transparent;
}

/* ===== レスポンシブ（SP：カード縦積み） ===== */
@media screen and (max-width: 767px) {
  .sideeffect-ab__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sideeffect-ab__card-head {
    font-size: 16px;
  }
  .sideeffect-ab__card-head br {
    display: none;
  }
}


.reservation__inner::before {
  display: none;
}

@media only screen and (max-width: 768px) {
  .reservation__inner {
      width: 100%;
  }
}

.trouble__nav.no-online {
  margin-bottom: 40px;
}