/* =========================================================
   投稿本文（コラム）内のテーブルを横スクロール対応にする上書き
   - app.css は自動生成のため、ここに追記して app.css の後に読み込む
   - WordPress のテーブルは <figure class="wp-block-table"><table> で
     出力されるので、外側の figure をスクロールコンテナにする。
     （table 自体を block 化すると幅が崩れて余白の箱ができるため不可）
   ========================================================= */

/* 【重要】本文カラムが中身で押し広げられないようにする
   本文は .p_single_content{display:grid; grid-template-columns:1fr 300px}
   の Grid レイアウト。1fr トラックは既定で min-width:auto のため、
   幅広テーブルがあるとカラムごと伸びてページ全体が横スクロールしてしまう。
   min-width:0 でトラックが縮めるようにし、はみ出しは figure 内に閉じ込める。 */
.p_single_content_main {
  min-width: 0;
}

/* 外側のラッパーを横スクロールコンテナにする
   → 中身がはみ出した時だけ横スクロール、収まる時は普通の表示 */
.p_single_content_main_inner figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS の慣性スクロール */
}

/* テーブル本体は「中身ぶんの自然な幅」に戻す
   WordPress の has-fixed-layout による width:100% / 固定レイアウトを解除し、
   余分な空白の箱ができないようにする */
.p_single_content_main_inner figure.wp-block-table > table {
  table-layout: auto;
  max-width: none;
  background-color: #FFF;
}

/* セル内の文字を折り返さない（2段にしない） */
.p_single_content_main_inner figure.wp-block-table th,
.p_single_content_main_inner figure.wp-block-table td {
  white-space: nowrap;
}

/* スクロールバー（横にずらすバー）の見た目 */
.p_single_content_main_inner figure.wp-block-table::-webkit-scrollbar {
  height: 8px;
}
.p_single_content_main_inner figure.wp-block-table::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.p_single_content_main_inner figure.wp-block-table::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

/* 【SP専用】本文内のリサイズ画像が画面幅を超えて
   ページ全体が横スクロールするのを防ぐ。
   Gutenberg のリサイズ画像は <img style="width:568px"> のように
   インラインで固定幅が入るため、SP では auto に打ち消して画面内に収める。
   （PC はカラム幅に収まるので現状維持＝この上書きは SP のみ） */
@media (max-width: 740px) {
  /* 表(wp-block-table)とカード(c-column-card__thumb)の figure は除外 */
  .p_single_content_main_inner figure:not(.wp-block-table):not(.c-column-card__thumb) {
    display: block;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  /* カード画像(c-column-card__image)は除外（width:100% を維持） */
  .p_single_content_main_inner img:not(.c-column-card__image) {
    width: auto !important; /* インラインの固定幅(width:568px等)を打ち消す */
    max-width: 100%;
    height: auto;
  }
}