/* =========================================================
   ABテスト専用CSS（女性LP faga / doctor）
   ─────────────────────────────────────────────────────────
   読み込み: lp-aga-ladies/parts/doctor/head_listing.php
             ※ head_listing は faga の gl/ms/yh 全25入口が共有する。
               CSSは全ページで先読みし、B案のDOMはOptimize Nextで配信された
               ページにだけ出る、という運用。管理画面側にCSSを貼る必要はない。

   運用ルール:
     - ABテスト中だけこのファイルに書く。名前空間を切って既存クラスと衝突させない
     - テスト終了時、採用なら本実装用のCSSへ移し、不採用ならこのファイルを空に戻す
       （ヘッダコメントと head の link は残す。次回ABで再びhead編集をしないため）
     - ABと無関係の常設ルールをここへ書かない

   【重要】このファイルは全25入口に降りる（A案ページにも読み込まれる）。
           セレクタは必ず --online-ab 名前空間に閉じること。
           裸の .comparison / .trouble__nav / .barlow を書かない。

   履歴:
     2026-08-10 オンライン診療比較AB 新規作成（↓）
   ========================================================= */


/* =========================================================
   オンライン診療比較AB  ─  「オンライン診療と迷っている人は多い」
   開始日: 2026-08-10
   対象:   女性LP faga doctor gl/ms/yh 全25入口
   Optimize Next: 女性版オンライン診療比較AB
   変更箇所: ① 比較表を「対面診療 vs オンライン診療」に差し替え
             ② FV直下アンカーnav 3つ目を「オンライン診療との違いを知りたい」に変更

   ※テスト終了時 → 本ブロックを削除しファイルを空に戻す（ヘッダコメントとlinkは残す）。
     採用時は恒久CSSへ移設すること。

   【男性版CSSとの違い】男性版 lp-aga/css/ab-test.css をコピーしないこと。
     - 女性版 nav は「円形ボタン」（border-radius:100% / 200px四方 / SPは28vw）。
       男性版は角丸の横長ボタンで高さ固定。レイアウトの前提が違う。
     - 女性版 nav には no-online クラスが付かない（男性版は付く）。
       → .no-online 前提のセレクタは効かない。
     - 数字フォントは .barlow（男性版は .barlow-sc）。
     - 実効CSSは style-isym.css（style.css は head から読まれていない）。
   ========================================================= */

/* ---- ① 比較表（対面 vs オンライン） ---------------------- */

/* アンカー着地先。fadeinは付けない（パーツ側で対応済み）。着地位置はここで微調整する */
.comparison--online-ab {
  scroll-margin-top: 20px;
}

/* リード文（B案で新設。既存比較表には無い要素） */
.comparison--online-ab .comparison__lead {
  font-size: 16px;
  line-height: 1.9;
  margin: 0 auto 32px;
  text-align: center;
}

/* 既存 .comparison__table1 は 4列（見出し+3社）前提で width:25%（style-isym.css:2665）。
   B案は 3列（見出し+2社）なので幅を上書きする。 */
.comparison--online-ab .comparison__table1 thead th {
  width: 34%;
}
.comparison--online-ab .comparison__table1 thead th:first-child {
  width: 32%;
}

/* 見出し列は既存（24px）より文字量が多いので、詰まらないよう調整 */
.comparison--online-ab .comparison__table1 tbody th {
  font-size: 20px;
  line-height: 1.4;
  padding: 16px 8px;
}
.comparison--online-ab .comparison__table1 tbody th small {
  display: block;
  font-size: 14px;
}

/* 対面診療（自院）列。既存 .comparison__aga（#9ed0f1）の配色を踏襲する */
.comparison--online-ab .comparison__table1 thead th.comparison__aga small {
  display: block;
  font-size: 16px;
  margin-top: 4px;
}

/* SP: 見出しに（対面診療）が入るぶん折り返す */
.comparison--online-ab .comparison__table2 thead th small {
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

/* 費用行（.comparison__cost1/2）は既存CSSで 20px / 18px に拡大される
   （style-isym.css:2680, 2722）。元の比較表は「初月980円」「20〜50万円」など
   短い金額だけだったため成立していたが、B案は両側とも文章量が多く、
   ここだけ文字が大きいと表全体のバランスが崩れる。
   → 費用行も他の行と同じサイズに揃える。 */
.comparison--online-ab .comparison__table1 .comparison__cost1 td {
  font-size: 16px;
  vertical-align: top;
}
.comparison--online-ab .comparison__table2 .comparison__cost2 td {
  font-size: inherit;
}

/* 既存 .comparison__cost1 span は 14px 指定。B案では small を使っているので
   注釈（税込・内服薬2種の一例）のサイズを明示しておく。 */
.comparison--online-ab .comparison__cost1 td small,
.comparison--online-ab .comparison__cost2 td small {
  font-size: 13px;
}

/* 罫線: 既存は 1px solid #162c3f（濃紺・style-isym.css:2649）。
   B案は2列比較で面積が広いため、セル境界を女性トンマナのピンク系にして
   圧迫感を抑える。見出し列の背景 #FCE0E8 と同系で、表全体がピンクでまとまる。
   共有パーツ側を書き換えると他ページに波及するので名前空間で上書き。 */
.comparison--online-ab .comparison__table1 th,
.comparison--online-ab .comparison__table1 td {
  border: 2px solid #fac2d2;
  font-size: 16px;
}

/* 既存は表の左右外周を消している（style-isym.css:2687-2692）。
   上の border 指定が後勝ちで復活してしまうため、同じ打ち消しを再指定する。 */
.comparison--online-ab .comparison__table1 tbody th,
.comparison--online-ab .comparison__table1 thead th:first-child {
  border-left: 0;
}
.comparison--online-ab .comparison__table1 thead th:last-child,
.comparison--online-ab .comparison__table1 td:last-child {
  border-right: 0;
}

/* SP表も既存は 1px solid #162c3f（style-isym.css:2699）。
   PCだけ色が変わってSPが濃紺のままだと不揃いになるので揃える。 */
.comparison--online-ab .comparison__table2 th,
.comparison--online-ab .comparison__table2 td {
  border: 2px solid #fac2d2;
}

/* ---- 背景色の塗り分け（PC表）------------------------------
   既存は 見出し列=#FCE0E8（ピンク） / Dr.AGAヘッダ=#9ed0f1（ブルー） / 値セル=白。
   B案は2列比較なので、自院列とオンライン列を色で分ける。
     Dr.AGA列の値セル      … 白（既存どおり・強調のため明るく残す）
     オンライン診療ヘッダ  … #dbeaf5（ブルーを薄めた色）
     オンライン列の値セル  … #eef3f7（さらに薄いグレー寄り）
   tr内は th(見出し) が1列目なので、td は 1番目=自院 / 2番目=オンライン。 */

/* Dr.AGA列（値セル）: 白 */
.comparison--online-ab .comparison__table1 tbody td:nth-of-type(1) {
  background-color: #fff;
}

/* オンライン診療（ヘッダセル） */
.comparison--online-ab .comparison__table1 thead th:nth-of-type(3) {
  background-color: #dbeaf5;
}

/* オンライン診療列（値セル） */
.comparison--online-ab .comparison__table1 tbody td:nth-of-type(2) {
  background-color: #eef3f7;
}

/* SP表は1テーブル1クリニックの縦積み構成。
   1つ目（Dr.AGA＝対面診療）の値セルは、PC表の「自院列=白」に合わせる。
   既存CSS（style-isym.css:2699-）は table2 の td に背景色を持たないため、
   指定しないとセクション背景が透けてPCと食い違う。 */
.comparison--online-ab .comparison__wrapper .comparison__table2:nth-of-type(1) tbody td {
  background-color: #fff;
}

/* 2つ目のテーブル（オンライン診療）に同じ配色を当てる。
   ※見出し列（tbody th）はPC表と同じく #FCE0E8 のまま残す。 */
.comparison--online-ab .comparison__wrapper .comparison__table2:nth-of-type(2) thead th {
  background-color: #dbeaf5;
}
.comparison--online-ab .comparison__wrapper .comparison__table2:nth-of-type(2) tbody td {
  background-color: #eef3f7;
}

@media only screen and (max-width: 768px) {
  .comparison--online-ab .comparison__lead {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 24px;
    text-align: left;
  }
  .comparison--online-ab .comparison__table2 tbody th {
    font-size: 15px;
    line-height: 1.4;
  }
  .comparison--online-ab .comparison__table2 tbody th small {
    display: block;
    font-size: 12px;
  }
}

/* ---- ② アンカーnav 3つ目 --------------------------------- */
/* 前提（2026-08-10 実測 / style-isym.css:898-945）:
     .trouble__item2 は width:25%（女性版は no-online が付かないため 33% にならない）
     a は円形ボタン: border-radius:100% / 200px四方 / font-size:24px / line-height:28px
     a b は 26px、.barlow は 40px
     768px以下は renew-doctor-20250120.css:1909-1916 が
       font-size:2.75vw / line-height:4vw / 28vw四方 に上書き（読込順で後勝ち）
     480px以下は同 1926-1929 が font-size:3vw / line-height:3.5vw

   B案の3つ目は「オンライン診療との違いを知りたい」で、A案の
   「副作用・効果について知りたい」より文字数が多い。
   円形ボタンは横幅が中央ほど広く上下が狭いため、行数が増えるとはみ出しやすい。
   → B案の項目だけ字間と行間を詰めて収める。ボタンサイズ自体は変えない
     （3つ並びのバランスが崩れるため）。

   ※ .trouble__nav--online-ab を起点にし、A案ページには影響させない。 */

/* B案3つ目のみ: 文字量増加分を字間・行間で吸収する */
.trouble__nav--online-ab .trouble__list2 .trouble__item2--online-ab a {
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* 太字部分（オンライン診療 / との違い）はさらに詰める */
.trouble__nav--online-ab .trouble__list2 .trouble__item2--online-ab a b {
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

@media only screen and (max-width: 768px) {
  /* 768px以下は renew-doctor-20250120.css が vw 指定で効く。
     同じ vw 単位で少しだけ小さくし、円からのはみ出しを防ぐ。 */
  .trouble__nav--online-ab .trouble__list2 .trouble__item2--online-ab a {
    font-size: 2.5vw;
    line-height: 3.4vw;
  }
  .trouble__nav--online-ab .trouble__list2 .trouble__item2--online-ab a b {
    font-size: 2.6vw;
  }
}

@media only screen and (max-width: 480px) {
  .trouble__nav--online-ab .trouble__list2 .trouble__item2--online-ab a {
    font-size: 2.8vw;
    line-height: 3.2vw;
  }
  .trouble__nav--online-ab .trouble__list2 .trouble__item2--online-ab a b {
    font-size: 2.9vw;
  }
}

/* ---- nav単独設置（yh）の余白 ------------------------------
   既存 .trouble--navonly（sideeffect-care.css:136-142）を踏襲する。
   B案でも設置位置・余白は変えないため、現状は追加指定なし。
   （必要になったら .trouble--navonly-online-ab でここに書く） */