/* 全ページ共通: スマホでPC幅のコンテンツが横にはみ出す問題を防ぐ。 */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* グリッド／flex内の本体が内容幅で横に伸びることを防ぐ。 */
  .main-wrapper,
  .main-wrapper > *,
  #kn-main,
  .main-content,
  .content,
  .article-body,
  article,
  main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #kn-main,
  .main-wrapper > #kn-main,
  .main-content,
  main {
    width: 100% !important;
  }

  /* 本体直下のPC向けセクションを、親コンテナの横幅に従わせる。 */
  #kn-main > *,
  .main-content > *,
  .content > *,
  article > *,
  .page-hero,
  .merit-bar,
  .compare-section,
  .guide-section,
  .faq-section,
  .not-recommend-section,
  .internal-nav-section,
  .section-block,
  .rank-card,
  .author-box,
  .editor-box,
  .update-meta-box,
  .experience-box,
  .multi-filter,
  .router-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 固定横幅を持ちやすいカード・グリッド・CTAを親幅内に制限する。 */
  .grid,
  .cards,
  .card-grid,
  .router-grid,
  .guide-grid,
  .compare-grid,
  .summary-cta-inner,
  .related-articles-grid,
  .contextual-end-grid,
  .end-cta-grid,
  .cta-btn-group,
  .hero-cta-group {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 見出し行は短い画面で折り返し、タイトル幅が親要素を押し広げないようにする。 */
  .section-divider,
  .section-head,
  .faq-q,
  .update-meta-box {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .section-divider-title,
  .section-divider-count,
  .page-title,
  .hero-title,
  h1, h2, h3 {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 横に長い比較表だけは画面幅で切らず、表の中で横スクロールできるようにする。 */
  table,
  .compare-table,
  .vs-table,
  .score-tbl,
  .cost-tbl {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table th,
  table td {
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* 画面下の固定導線も、横幅と操作領域をスマホ幅に合わせる。 */
  .fixed-cta,
  #sticky-footer-bar,
  #universal-floating-cta {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .fixed-cta-btn,
  #sticky-footer-bar .sfb-btn,
  #universal-floating-cta a {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
}