/* ===== ryokin.html ページ固有 ===== */

/* 【30】比較表: 項目列38%・値3列は等幅中央揃え・○セルは16px */
.sec--band .cmp { table-layout: fixed; }
.sec--band .cmp thead th:first-child, .sec--band .cmp tbody th { width: 38%; }
.sec--band .cmp td.mk { font-size: 16px; }

#plans .plans { align-items: stretch; }
/* 【31】モニター条件の凡例: 比較表・プラン行と同じ全幅に */
.sec--band .legend { max-width: none; }


/* v23（2026-08-09 恒久方針適用） */

/* 1) プラン3枚: 3枚とも白基調。plan-head（プラン名エリア）を帯として分離し、
   おすすめ（.plan--rec）だけ 青2px枠＋10px持ち上げ＋head薄青（--kg-t1）で目立たせる */
#plans .plan { padding: 0; }
#plans .plan-head { padding: 28px 32px 22px; border-bottom: 1px solid var(--kg-line); border-radius: 18px 18px 0 0; }
#plans .plan-body { padding: 26px 32px 38px; display: flex; flex-direction: column; flex: 1; }
#plans .plan-name { font-size: 17px; }
#plans .plan-price { font-size: clamp(40px, 4.2vw, 52px); color: var(--kg-ink); margin-top: 0; line-height: 1.15; }
#plans .plan-points { margin-top: 24px; }
#plans .plan-target { margin-top: auto; padding-top: 28px; }

#plans .plan--rec { background: #fff; color: var(--kg-body); border: 2px solid var(--kg-blue); box-shadow: var(--card-sh); transform: translateY(-10px); }
#plans .plan--rec .plan-head { background: var(--kg-t1); border-bottom: none; border-radius: 15px 15px 0 0; }
#plans .plan--rec .plan-name { color: var(--kg-ink); }
#plans .plan--rec .plan-catch { color: var(--kg-quiet); }
#plans .plan--rec .plan-price { color: var(--kg-ink); }
#plans .plan--rec .plan-points li { border-top-color: var(--kg-line); }
#plans .plan--rec .plan-target { color: var(--kg-quiet); }
#plans .plan-badge { background: var(--grad-btn); color: var(--kg-t2); box-shadow: none; }

/* 2) 比較表: PC(min-width:750px)は先頭列を左固定（横スクロール時も項目名が見える）。
   SPは既存 .cmp-wrap の横スクロールのまま（38%固定列が画面を覆うため固定しない） */
@media (min-width: 750px) {
  .sec--band .cmp tbody tr:not(.grp) > th { position: sticky; left: 0; z-index: 1; background: #fff; border-right: 1px solid var(--kg-line); }
  .sec--band .cmp thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--kg-deep); }
  .sec--band .cmp tbody tr:not(.grp) > td:first-of-type { border-left: none; }
}

/* 3) 凡例の脱カード化: 白角丸カードの連続（プラン3枚→凡例→凡例→表）を
   地の文＋1px罫線に緩める */
#plans .legend { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
#plans .inner > .legend { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--kg-line); }

/* SP */
@media (max-width: 749px) {
  #plans .plan--rec { transform: none; }
  #plans .plan-head { padding: 24px 24px 18px; }
  #plans .plan-body { padding: 22px 24px 30px; }
  #plans .inner > .legend { margin-top: 48px; padding-top: 26px; }
}


/* v25（2026-08-10 さき指示）: タブレット帯（750〜1023px） */
@media (min-width: 750px) and (max-width: 1023px) {

  /* 1) プラン3枚: 3列だと1枚216pxで日本語が8文字ごとに折り返す。
     3枚を比較させるカードは2列だと3枚目が半端になるため1列に落とす */
  #plans .plans { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #plans .plan--rec { transform: none; }
  #plans .plan-head { padding: 24px 28px 18px; }
  #plans .plan-body { padding: 22px 28px 30px; }

  /* 2) 比較表: v25では640pxまで詰めて「枠内に完全に収める」方針だったが、
     v28（デザインレビュー）で「列を縮めず横スクロール」に転換。
     820px＝レビュー指定の最小幅（実効の列幅は 項目311.6px＋値169.5px×3）。
     830px幅では48pxぶん横にスクロールする。
     列が広がったぶん、セルのpaddingも詰める必要がなくなったので戻す */
  .sec--band .cmp { min-width: 820px; }          /* v28: 640px → 820px */
  .sec--band .cmp thead th { padding: 15px 14px; }  /* v28: 14px 10px → */
  .sec--band .cmp tbody th { padding: 14px 16px; }  /* v28: 13px 12px → */
  .sec--band .cmp tbody td { padding: 14px 12px; }  /* v28: 13px 8px → */

  /* 3) 章の呼吸: 比較表ブロック前の96px（HTML側インラインstyle）はタブレット幅では
     開きすぎるので64pxに（上書きに!importantが要る） */
  #plans .inner > div:not([class]) { margin-top: 64px !important; }
  #plans .inner > .legend { margin-top: 56px; padding-top: 30px; }

  /* 比較表の見出しが直前の凡例に貼り付いていた（見出し前の間隔 < 凡例の行間）ので、
     章の切れ目として凡例の行間より広く空ける */
  .sec--band h2#compare { margin-top: 72px; }
}

/* v25（2026-08-10 さき指示）: SP（〜749px）比較表の可読性 */
@media (max-width: 749px) {

  /* 4) v25では560pxまで詰めていたため、値列が1列119.5pxまで潰れていた
     （＝レビュー指摘「4列を画面内へ押し込んでいるので文字が小さい」）。
     v28で635pxへ広げ、値列145px（レビュー指定の下限）を確保する。
     項目列は%ではなく200px固定。ここは幾何学的な制約で決まっている:
       固定した項目列 ＋ 値列1列 ＋ 終端余白 ≦ 表示幅（390pxで366px）
     を満たさないと、右端までスクロールしても最後の列（プレミアム）が
     固定列の下に潜ったままになり永久に読めない。
     200+145+16=361 ≦ 366 で成立（レビュー仕様の 245+145 は390pxでは成立せず、
     実測で最終列が左側90pxほど欠けたため、SPのみ数値を下げた） */
  .sec--band .cmp { min-width: 635px; }                                              /* v28: 560px → 635px（200+145×3） */
  .sec--band .cmp thead th:first-child, .sec--band .cmp tbody th { width: 200px; }   /* v28: 36%(=201.6px) → 200px */
  .sec--band .cmp thead th { padding: 15px 10px; }  /* v28: 13px 10px → */
  .sec--band .cmp tbody th { padding: 14px 12px; }  /* v28: 12px 10px → */
  .sec--band .cmp tbody td { padding: 14px 10px; }  /* v28: 12px 6px → */
  .sec--band .cmp tbody tr:not(.grp) > th { position: sticky; left: 0; z-index: 1; background: #fff; border-right: 1px solid var(--kg-line); }
  .sec--band .cmp thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--kg-deep); }
  .sec--band .cmp tbody tr:not(.grp) > td:first-of-type { border-left: none; }
  .sec--band .cmp td.mk { font-size: 15px; }

  /* 5) 見出しが直前の凡例に貼り付いていたので章の切れ目として空ける＋
     横スクロールできることを表の手前で知らせる（HTMLは触らずCSSのみ） */
  .sec--band h2#compare { margin-top: 72px; }
  .sec--band h2#compare::after {
    content: "※表は横にスクロールできます";
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.7;
    color: var(--kg-quiet);
  }
}

/* v25（2026-08-10 さき指示）: SP・タブレット共通の可読性／タップ領域
   上限を1024pxにしているのはiPad横（=検証幅1024）までタッチ端末として扱うため。
   レイアウトのタブレット帯は750〜1023pxのまま（1024pxはPC版レイアウト） */
@media (max-width: 1024px) {

  /* 6) 10px・11pxの文字を11.5px以上へ（字間は詰めて列幅内に収める） */
  .sec--band .cmp thead .rec span { font-size: 11.5px; letter-spacing: .06em; }
  #nagare .step-t small { font-size: 11.5px; letter-spacing: .12em; }

  /* 7) テキストリンクのタップ領域を32px以上に（高さ指定ではなくpaddingで確保） */
  .sec .tlink { padding-top: 3px; padding-bottom: 5px; }
}

/* v25（2026-08-10 さき指示）: SP・タブレット共通の余白リズム */
@media (max-width: 1023px) {

  /* 8) 「COMPARISON」アイブロウと見出しの間が72px（SP）あり、
     ページ標準のアイブロウ→見出し20pxから外れて対になって見えなかったので揃える。
     章の切れ目は直上のブロック余白（SP96px／タブレット64px）が担う */
  #plans .inner > div:not([class]) > .sec-catch { margin-top: 20px !important; }
}


/* ============================================================
   v28（2026-08-10 デザインレビュー対応）: 比較表の横スクロール化
   指摘「390pxでは4列を画面内へ全部押し込んでいるため文字が非常に小さい。
   横スクロールにしてください。列を縮めない」への対応。
   方針: 値列の下限145px（レビュー指定）を全帯で確保し、
   入り切らない分は表を縮めずに横スクロールへ逃がす。
   項目列は 750px以上=245px下限（実効311.6px）／SP=200px固定。
   SPだけ245pxにできない理由は下の 4) の式（最終列が固定列に潜るため）。
   罫線は既存どおり border-collapse:separate + セル側のborderで引いているため、
   最小幅を変えても現在の見た目（列柱・推奨列の帯・先頭列の左固定）は変わらない。
   ============================================================ */

/* 1) スクロールコンテナとしての作法。
   overscroll-behavior-inline:contain＝表を端まで振り切ってもページ側の横移動や
   ブラウザの「戻る」ジェスチャへ連鎖させない（iOS/Androidで誤爆しやすい） */
.cmp-wrap {
  position: relative;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 2) 列幅の下限。table-layout:fixedの%指定に対する保険として、
   どの帯でも値列を145pxより細くしない（レビュー指定の下限）。
   項目列245pxの下限は750px以上だけに効かせる。SPは上の 4) のとおり
   「固定列＋値列1列が画面に収まる」ことを優先して200pxにしているため */
.sec--band .cmp th, .sec--band .cmp td { min-width: 145px; }
@media (min-width: 750px) {
  .sec--band .cmp thead th:first-child, .sec--band .cmp tbody th { min-width: 245px; }
}

/* 3) 表が枠内に収まらない帯（＝横スクロールが出る 〜877px）では、
   表を画面の右端まで伸ばして「まだ右に続く」ことを見せる。
   ・境界877px: 表820px + .innerの左右padding28px×2 + 枠線2px = 878px。
     878px以上なら枠内に収まりスクロールしない（実測: 878でscroll無し／877で発生）
   ・負のmarginは .inner の左右padding（SP22px／タブレット28px）と同値。
     calc(50% − 50vw) は vw がスクロールバー幅を含むため、クラシック
     スクロールバー環境ではページ側に横スクロール（約sb/2）を生む。
     実測環境はoverlayで0だったが、安全側に倒して固定値を使う。
   ・padding-right を同値にすると、スクロール終端で表の右端が
     「伸ばさなかった場合と同じ位置」に戻る＝ページの版面と揃う */
@media (max-width: 749px) {
  /* SPだけ padding-right を16pxに抑える。22pxだと 200+145+22=367 で
     366pxの表示幅を1px超え、最終列が固定列に潜る（上の 4) の式） */
  .cmp-wrap { margin-right: -22px; padding-right: 16px; }
}
@media (min-width: 750px) and (max-width: 877px) {
  .cmp-wrap { margin-right: -28px; padding-right: 28px; }

  /* 4) タブレット帯でも横スクロールになるので、SP（〜749px）と同じ注記を表の直前に出す。
     HTMLにはテキストを足さず、見出しの::afterで出す（文言変更禁止のため） */
  .sec--band h2#compare::after {
    content: "※表は横にスクロールできます";
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.7;
    color: var(--kg-quiet);
  }
}

/* 5) SPの中でも表（635px）が枠内に収まる幅では、伸ばしもせず注記も出さない。
   境界675px: 635px + 終端余白16px = 651px を表示幅（vw−24px）が上回る幅。
   v25の注記はSP全域に出ていたため、584px以上では「スクロールできます」と
   書いてあるのに動かない状態だった（実測で675px以上に縮小） */
@media (min-width: 675px) and (max-width: 749px) {
  .cmp-wrap { margin-right: 0; padding-right: 0; }
  .sec--band h2#compare::after { content: none; }
}

/* 6) グループ見出し行（colspan=4）のラベルを左に固定する。
   横スクロールできる幅が広がったぶん、そのままだと「調査・商品データ」等が
   左へ流れて消え、どの区分を見ているか分からなくなる（830pxでも48px欠ける）。
   colspan=4のセル自体にstickyを付けても、セルが表と同じ幅で動く余地がないため
   無効（実測で確認）。そのため中身をspanで包み、spanをstickyにしている
   （HTMLはテキストを変えずspanで包むだけ）。
   left値はセルのpadding-leftと同値にして、非スクロール時にずれないようにする */
.sec--band .cmp .grp th > span { position: sticky; left: 12px; display: inline-block; }
@media (min-width: 750px) { .sec--band .cmp .grp th > span { left: 16px; } }