/* =============================================================
 * スマホで横スクロールしていた箇所を、文字サイズで収める（v1.37.0）
 * -------------------------------------------------------------
 * 390px の画面では .pm-mock 側で zoom:0.8 がかかるため、
 * 実際に使える幅は 480px 相当。表や図はこれを超えると横スクロールになる。
 * 文字と余白を詰めて、スクロールせずに全体が見える状態にする。
 *
 * SVG の図（.fig / .tso-media-fig）はここでは扱わない。
 * 図の文字は viewBox の中で位置が決まっているため、縮めると
 * 2〜3px 相当まで潰れて読めなくなる（別途、図そのものの作り直しが必要）。
 * ============================================================= */

@media (max-width:640px){

  /* ---- 表：幅の下限を外し、文字と余白を詰める ---- */
  .pm-mock table.price,
  .pm-mock table.sol-table,
  .pm-mock .tablewrap table,
  .pm-mock .mkt-table,
  .pm-mock .kpi,
  .pm-mock .ngt,
  .pm-mock .fx-mx,
  .pm-mock .compare-table{
    min-width:0 !important;
    width:100% !important;
    font-size:10.5px !important;
    line-height:1.6 !important;
    table-layout:fixed !important;
  }
  .pm-mock table.price th,   .pm-mock table.price td,
  .pm-mock table.sol-table th, .pm-mock table.sol-table td,
  .pm-mock .tablewrap table th, .pm-mock .tablewrap table td,
  .pm-mock .mkt-table th,    .pm-mock .mkt-table td,
  .pm-mock .kpi th,          .pm-mock .kpi td,
  .pm-mock .ngt th,          .pm-mock .ngt td,
  .pm-mock .fx-mx th,        .pm-mock .fx-mx td,
  .pm-mock .compare-table th,.pm-mock .compare-table td{
    min-width:0 !important;
    padding:5px 4px !important;
    font-size:10.5px !important;
    line-height:1.6 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  /* 課題ページの比較表は v1.33.1 で thead/tbody を display:table にしていた。
     幅が収まるようになったので、通常の表に戻す。 */
  .pm-mock .chg .compare-table{ display:table !important; }
  .pm-mock .chg .compare-table thead{ display:table-header-group !important; min-width:0 !important; }
  .pm-mock .chg .compare-table tbody{ display:table-row-group !important; min-width:0 !important; }

  /* 収まったので「横にスクロールできます」の案内は出さない */
  .pm-mock .tablewrap::after{ content:none !important; }

  /* ---- 営業版SWOT（表ではなくグリッド）---- */
  .pm-mock .swotwrap > *{ min-width:0 !important; }
  .pm-mock .swotwrap{ font-size:11px !important; }

  /* ---- パンくず：横スクロールをやめて折り返す ---- */
  .pm-mock .pm-crumb{
    flex-wrap:wrap !important; white-space:normal !important;
    overflow-x:visible !important; row-gap:2px; font-size:12px !important;
  }
}

/* =============================================================
 * v1.88.0  文字サイズの統一（typography.css の8段階に寄せる）
 * -------------------------------------------------------------
 * 見出し 28 / 22・リード 21・本文 18・ボックス内 16・注記/タグ 14。
 * 0.5px 刻みと 14px 未満をなくすための上書き。自動で役割を判定して
 * 生成しているので、元の指定は書き換えていない。
 * 見た目がおかしい箇所は、このブロックの該当行を消せば元に戻る。
 * ヘッダー・ナビ・ボタン・数値の強調・ヒーローは対象外。
 * ============================================================= */

@media (max-width:640px){
  .pm-mock table.price{font-size:13px !important}
  .pm-mock table.sol-table{font-size:13px !important}
  .pm-mock .tablewrap table{font-size:13px !important}
  .pm-mock .mkt-table{font-size:13px !important}
  .pm-mock .kpi{font-size:13px !important}
  .pm-mock .ngt{font-size:13px !important}
  .pm-mock .fx-mx{font-size:13px !important}
  .pm-mock .compare-table{font-size:13px !important}
  .pm-mock table.price th{font-size:13px !important}
  .pm-mock table.price td{font-size:13px !important}
  .pm-mock table.sol-table th{font-size:13px !important}
  .pm-mock table.sol-table td{font-size:13px !important}
  .pm-mock .tablewrap table th{font-size:13px !important}
  .pm-mock .tablewrap table td{font-size:13px !important}
  .pm-mock .mkt-table th{font-size:13px !important}
  .pm-mock .mkt-table td{font-size:13px !important}
  .pm-mock .kpi th{font-size:13px !important}
  .pm-mock .kpi td{font-size:13px !important}
  .pm-mock .ngt th{font-size:13px !important}
  .pm-mock .ngt td{font-size:13px !important}
  .pm-mock .fx-mx th{font-size:13px !important}
  .pm-mock .fx-mx td{font-size:13px !important}
  .pm-mock .compare-table th{font-size:13px !important}
  .pm-mock .compare-table td{font-size:13px !important}
  .pm-mock .swotwrap{font-size:13px !important}
  .pm-mock .pm-crumb{font-size:13px !important}
}