/* 乗り換え（switch.html）: スマホ比較表の影・文字・列幅と、見出しの意味区切り改行。須藤さん指示 2026-09-13 */

/* 見出し: 語の途中では折り返さず、HTMLに入れた <wbr>（意味の区切り）でだけ改行する。
   収まらない場合だけ任意位置で折り返し、はみ出しを防ぐ。 */
html body.subpage.switch-page .sw-progress-worry h2,
html body.subpage.switch-page .sw-progress-reasons h2,
html body.subpage.switch-page .sw-progress-solution .solution-card h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 320px前後の小さい端末: 解決カード見出しの1区切り（最大9文字）がカード幅に収まるよう少しだけ縮める */
@media (max-width: 340px) {
  html body.subpage.switch-page .sw-progress-solution .solution-card h3 {
    font-size: 17px !important;
  }
}

/* スマホ（768px以下）: 比較表の影をなくす。外周は1pxの線だけ残す。 */
@media (max-width: 768px) {
  html body.subpage.switch-page .cmp-wrap {
    box-shadow: 0 0 0 1px rgba(22, 88, 160, .12) !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare th,
  html body.subpage.switch-page .cmp-wrap .compare td,
  html body.subpage.switch-page .cmp-wrap .compare tbody tr:last-child td:nth-child(2),
  html body.subpage.switch-page .cmp-wrap .cmp-product-mark {
    box-shadow: none !important;
  }
}

/* スマホ（600px以下・横スワイプの表）: 比較項目を小さくし、
   左の比較項目列＋1列＋次の列の半分が見える幅にそろえる。スワイプは列単位で止まる。 */
@media (max-width: 600px) {
  html body.subpage.switch-page .cmp-wrap {
    container-type: inline-size;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 96px;
  }
  html body.subpage.switch-page .cmp-wrap .compare {
    --cmp-head: 96px;
    --cmp-col: calc((100cqw - var(--cmp-head)) / 1.5);
    width: calc(var(--cmp-head) + var(--cmp-col) * 3) !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare thead th:first-child,
  html body.subpage.switch-page .cmp-wrap .compare tbody th {
    width: var(--cmp-head) !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare thead th .cmp-item-head strong {
    font-size: 11px !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare thead th:nth-child(n+2),
  html body.subpage.switch-page .cmp-wrap .compare tbody td {
    width: var(--cmp-col) !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare thead th:nth-child(n+2) {
    scroll-snap-align: start;
  }
  html body.subpage.switch-page .cmp-wrap .compare thead th:nth-child(3),
  html body.subpage.switch-page .cmp-wrap .compare thead th:nth-child(4) {
    height: 56px !important;
    padding: 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare .cmp-product-mark strong {
    font-size: 15px !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare tbody td {
    padding: 10px 8px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare tbody td:nth-child(2) {
    padding: 10px 8px 10px 36px !important;
    font-size: 12.5px !important;
    background-position: left 6px center !important;
    background-size: 24px 24px !important;
  }
  html body.subpage.switch-page .cmp-wrap .compare tbody tr:first-child td:nth-child(2) {
    font-size: 13px !important;
  }
}