/* =========================================================
   対面診療とオンライン診療の比較セクション ＋ FV直下アンカーnav
   ─────────────────────────────────────────────────────────
   読み込み: head_listing / head_all_no-online
             ※ head_basic には入れない（hrm3・Meta・アフィリへ降ろさないため）

   対象:   男性LP hrm2 gl/ms/yh 全26入口（Google / Yahoo / Microsoft）
   パーツ: parts/hrm2/comparison_online.php        … 比較表（gl/ms/yh 共通）
           parts/hrm2/trouble_sideeffect_online.php … お悩み＋nav（gl/ms 用）
           parts/hrm2/sideeffect_nav_online.php     … nav 単独（yh 用）

   由来:   ABテスト「オンライン診療と迷っている人は多い」（2026-08-05 開始 / JADE起案）。
           2026-08-31 テストパターン優位の判定を受け、css/ab-test.css から本実装へ移設。
           変更内容 ① 比較表を「対面診療 vs オンライン診療」に差し替え
                    ② FV直下アンカーnav 3つ目を「オンライン診療との違いを知りたい」に変更

   【重要】このCSSは sideeffect-care.css の【後】に読まれる（head_listing.php:40 と 41）。
           .trouble--navonly 系の打ち消しは後勝ちで効くが、詳細度はAB当時のまま維持している
           （読み込み順が変わっても壊れないようにするため）。
   ========================================================= */


/* アンカー着地先。fadeinは付けない（docs §8-3）。着地位置はここで微調整する */
.comparison--online {
  scroll-margin-top: 20px;
}

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

/* 既存 .comparison__table1 は 4列（見出し+3社）前提で width:25% が入っている。
   本表は 3列（見出し+2社）なので幅を上書きする。 */
.comparison--online .comparison__table1 thead th {
  width: 34%;
}
.comparison--online .comparison__table1 thead th:first-child {
  width: 32%;
}

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

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

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

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

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

/* 罫線: 既存は 1px solid #162c3f（濃紺・style.css:2687）。
   本表は2列比較で面積が広いため、セル境界を水色系にして圧迫感を抑える。
   ※共有パーツ側の .comparison__table1 を直接書き換えると
     comparison_basic を使う他ページに波及するので、--online 名前空間で上書きする。 */
.comparison--online .comparison__table1 th,
.comparison--online .comparison__table1 td {
  border: 2px solid #75c5d0;
  font-size: 16px;
}

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

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

/* ---- 背景色の塗り分け（PC表）------------------------------
   既存は 見出し列=#bae1e7 / Dr.AGAヘッダ=#f9d200 / 値セル=白。
   本表は2列比較なので、自院列とオンライン列を色で分ける。
     Dr.AGA列の値セル      … 白（既存どおり・強調のため明るく残す）
     オンライン診療ヘッダ  … #d3e6e8
     オンライン列の値セル  … #d4dedf
   tr内は th(見出し) が1列目なので、td は 1番目=自院 / 2番目=オンライン。 */

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

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

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

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

/* 2つ目のテーブル（オンライン診療）に同じ配色を当てる。 */
.comparison--online .comparison__wrapper .comparison__table2:nth-of-type(2) thead th {
  background-color: #d3e6e8;
}
.comparison--online .comparison__wrapper .comparison__table2:nth-of-type(2) tbody td {
  background-color: #d4dedf;
}

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

/* ---- ② アンカーnav 3つ目 --------------------------------- */
/* 前提（2026-08-05 実測）:
     .no-online の item2 は width:31% がメディアクエリ外で効いており、
     どの画面幅でも3カラム横並びのまま（1000pxブロックの width:40% は
     詳細度で負けるため no-online には効かない）。
     既存の文字サイズは段階指定（1001px以上=24px / 768px以下=20px）で、
     その間の 1000〜769px は24pxのまま幅だけ縮むため、文字数の多い本nav が溢れる。

   ボタン幅の実測（.inner は max-width:1000px / width:90%、item2 は 31%）:
     ┌ 1112px以上 … inner=1000px で頭打ち → ボタン≒310px 固定
     └ 1112px未満 … inner=90%          → ボタン ≒ 0.279vw で連続的に縮む
     ★ 1112px が「幅が固定される折れ点」。ここを境に係数を変える。

   nav 3つとも同じ指定に載せ、常に同サイズで揃うようにする。
   既存流儀 style.css:738 `clamp(32px, 6vw, 60px)` に倣う。

   ※ 本nav にだけ付く --online を起点にし、旧nav（sideeffect_nav 等）には影響させない。
   ※ 既存の 768px 指定（詳細度クラス3）に勝つため、こちらはクラス4で書く。 */

/* 1112px以上: inner が 1000px で頭打ち＝ボタン幅が固定される帯域。
   幅が変わらないので文字も固定（既存と同じ24px）。 */
.trouble__nav--online .trouble__list2 .trouble__item2 a {
  font-size: 24px;
  /* line-height は単位なしにして font-size に連動させる。
     比率は旧nav と同じ 32px ÷ 24px = 1.3333 なので、
     PC幅（24px）では 32px となり旧nav とボタン高さが完全に一致する。
     px固定にすると clamp で文字が縮んでも行間だけ残って間延びする。 */
  line-height: 1.3333;
}

/* 〜1111px: inner が 90% に切り替わり、幅がビューポートに連動して縮む帯域。
   ボタン実幅 ≒ 0.279vw に合わせ、文字も vw 連動にする。
   境界(1111px)で 23.9px となり、上の24pxから段差なく繋がる。
     1000px → 21.5px ／ 900px → 19.4px ／ 769px → 16.5px ／ 600px → 12.9px */
@media only screen and (max-width: 1111px) {
  .trouble__nav--online .trouble__list2 .trouble__item2 a {
    font-size: clamp(13px, 2.15vw, 24px);
  }
}

/* 〜599px: 3カラムのまま横幅が限界に近づく帯域。
   ここは 2.15vw を続けると 375px で 8px まで落ちて読めなくなるため、
   縮小を緩めて（係数を下げて）下限11pxで底打ちさせる。
   境界(599px)は上限13px＝直前600pxの 2.15vw=12.9px と一致するので段差が出ない。
     599px → 13.0px ／ 480px → 11.5px ／ 375px → 11.0px（下限） */
@media only screen and (max-width: 599px) {
  .trouble__nav--online .trouble__list2 .trouble__item2 a {
    font-size: clamp(11px, 2.4vw, 13px);
  }
}

/* b / barlow-sc は既存CSSで px 固定が当たっており（style.css:980-985、
   b=30px / barlow-sc=46px）、769px以上では a を clamp にしても追従しない。
   768px以下でのみ em 指定（1.25em / 1.53em）に切り替わる。
   → 全幅で em に統一し、a の clamp に連動させる。
      比率は既存の見た目を踏襲: b 30/24=1.25em、barlow-sc 46/24≒1.92em
   ※ 既存(クラス3) に勝つよう、こちらもクラス4で書く */
.trouble__nav--online .trouble__list2 .trouble__item2 a b {
  font-size: 1.25em;
}
.trouble__nav--online .trouble__list2 .trouble__item2 .barlow-sc {
  /* PC幅（24px）では旧nav と同じ 46px。
     狭い幅では em のままだと本文比で大きく見えすぎるため、
     clamp の上限で頭打ちにして肥大を防ぐ。 */
  font-size: min(1.92em, 46px);
}

/* 〜768px: 本文が clamp で小さくなる帯域。980 の比率も落として馴染ませる */
@media only screen and (max-width: 768px) {
  .trouble__nav--online .trouble__list2 .trouble__item2 .barlow-sc {
    font-size: 1.6em;
  }
}

/* 「初月980円の」の行は barlow-sc（46px）を含むため、
   行ボックスが 61.33px まで膨らみ下に余分なスキマができる（2026-08-07 実測）。
   数字を含む span だけ行間を詰めて、次の行との間隔を他の行と揃える。

   ※barlow-sc を含むのは常に1つ目の span（「初月980円の」）なので
     :has() を使わず :first-child で当てる（対応ブラウザを狭めないため）。 */
.trouble__nav--online .trouble__list2 .trouble__item2 a > span:first-child {
  line-height: 1;
}
.trouble__nav--online .trouble__list2 .trouble__item2 .barlow-sc {
  line-height: 1;
  vertical-align: baseline;
}

/* 【重要】矢印(a::after)との被り対策。
   768〜481px の既存 padding は `10px 5px 1.5em`（style.css:1074）で、
   この 1.5em は a の font-size 基準。clamp で文字を縮めると下パディングも
   一緒に縮むが、矢印は bottom:20px の固定値のため文字が矢印に被る
   （767px で3行になる3つ目の項目で実際に発生）。
   → 下パディングを em から実寸に変え、矢印ぶんの領域を常に確保する。

   矢印の実測（style.css）:
     481px以上 … bottom:20px + 高さ12px ＝ 下から32px を占める
     480px以下 … bottom:14px + 高さ12px ＝ 下から26px を占める（L1128）

   【重要】旧nav とボタン高さを揃えるため、上書きは 768〜481px だけに限定する。
     - 769px以上 … 既存は 34px / 40px の固定値。文字を縮めても影響しないので触らない
                    （ここを 38px に上書きしていたのが A/B の高さ差の原因。2026-08-07修正）
     - 768〜481px … 既存 1.5em が clamp に連動して縮むためここだけ固定値で上書き。
                    旧nav の実効値（20px × 1.5 = 30px）と同値にして高さを合わせる
     - 480px以下 … 既存が 26px の固定値なので触らない */
@media only screen and (max-width: 768px) and (min-width: 481px) {
  .trouble__nav--online .trouble__list2 .trouble__item2 a {
    padding-bottom: 30px;
  }
}

/* ---- ボタンの高さを固定（2026-08-07 指示）------------------
   文字量・行数で高さが変わるのを防ぎ、3つのボタンを同じ高さに揃える。
   旧nav の実測値（PC=148px）に合わせ、段階的に縮める。
     PC （769px以上）… 148px
     TAB（768〜481px）… 125px
     SP （480px以下） …  95px
   ※a は display:flex / height:100% なので、高さは li 側で決める。
   ※min-height ではなく height を使う。min-height は「最低値」なので
     中身が大きいと無視される（2026-08-07 実測で169.3pxになった）。
   ※a 側の padding-bottom が height に加算されないよう box-sizing を明示。 */
.trouble__nav--online .trouble__list2 .trouble__item2 {
  height: 148px;
}
.trouble__nav--online .trouble__list2 .trouble__item2 a {
  box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
  .trouble__nav--online .trouble__list2 .trouble__item2 {
    height: 125px;
  }
}

@media only screen and (max-width: 480px) {
  .trouble__nav--online .trouble__list2 .trouble__item2 {
    height: 95px;
  }
}

/* ---- nav 上下の余白（JADE指摘 2026-08-05）----------------
   sideeffect-care.css で .trouble--navonly に padding:40px 0 0 を入れているが、
   この40pxは Select!! 装飾（.trouble__list2::before / top:-83px の絶対配置）を
   収めるためのもの。装飾は 1000px以下で display:none になる（style.css:1022）ため、
   SPでは装飾が消えて余白だけが残り、nav上が間延びして見える。
   → 装飾が出る幅だけ余白を残し、消える幅では詰める。

   ※ab-test.css は sideeffect-care.css より前に読まれる（head_listing.php:38 と 40）。
     .trouble--navonly（クラス1）と同点だと後勝ちで負けるため、
     .trouble を足したクラス2で詳細度を上げて確実に勝たせる。 */
/* 全幅で padding を 0 に（JADE指示 2026-08-05）。
   Select!! 装飾ぶんの40pxは不要との判断。yh のみ（gl/ms は --navonly が付かない）。 */
.trouble.trouble--navonly-online {
  background: none;
  padding: 0px 0 0;
}

/* 480px以下: 既存 section { margin-top: 35px }（style.css:727）も詰める。
   ※section 全体ではなく nav セクションだけに限定する
     （症例・料金・FAQ 等の余白は現行のまま維持したいため）。 */
@media only screen and (max-width: 480px) {
  section.trouble--navonly-online {
    margin-top: 20px;
  }
}

/* 約物（「・」「（）」など）と仮名を詰め、可読性を保ったまま文字数を吸収する。
   palt＝プロポーショナルメトリクス。nav 3つとも同じ字詰めにして見た目を揃える。
   ※Noto Sans JP はローカル @font-face 読み込み（style.css:11-）。
     配信される woff の GPOS に palt/kern/halt/vpal を確認済み（2026-08-05 実測）。
   ※font-feature-settings は kern を暗黙に切ることがあるため font-kerning も明示する。 */
.trouble__nav--online .trouble__list2 .trouble__item2 a {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
}

/* 3つ目は文言が長いので、太字部分だけさらに字間を詰める */
.trouble__nav--online .trouble__item2--online a span b {
  letter-spacing: -0.02em;
}