/* buyshops-overflow.css（2026-10-03）
   店舗ページ（buyshops の個別ページ）だけで、スマホ幅の横はみ出しを止める。本文（DB）は変えず、表示だけを整える。
   読み込みは mu-plugin linxas-buyshops-overflow.php（is_singular('buyshops') のときだけ）。 */

/* 1. 競合店の欄の Google マップ埋め込み（iframe width="600" 固定）を本文の幅に収める。
      600×450 のものは高さを自動にして 4:3 を保つ（PC で幅 600 が入るときは見た目が変わらない）。 */
body.single-buyshops .main.shop .message-content iframe{ max-width:100%; }
body.single-buyshops .main.shop .message-content iframe[width="600"][height="450"]{ height:auto; aspect-ratio:600 / 450; }

/* 2. 比較表（table.has-fixed-layout.is-sticky-first-column）は外側の figure を横スクロールにする。
      店名の列の sticky（th.fixed01）はこの figure の中でそのまま効く。 */
body.single-buyshops .main.shop .message-content #rank_box{ max-width:100%; }
body.single-buyshops .main.shop .message-content figure.wp-block-flexible-table-block-table{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 3. 競合店ごとの詳細表（店舗名・URL・TEL・住所…の 2 列の表 figure.wp-block-table）。
      div.wp-block-image や figure.aligncenter の中に入れ子になっていても当たるよう、子孫セレクタで指定する。
      表の外側を本文の幅に収めて横スクロールにし、値の列（URL など）は長い文字列でも折り返す。 */
body.single-buyshops .main.shop .message-content figure.wp-block-table{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.single-buyshops .main.shop .message-content figure.wp-block-table td:nth-child(2){ overflow-wrap:anywhere; }

/* 4. 本文の段落の保険。展開されずに文字のまま残った短縮コード（[blogcard url="…"]）など、長い URL の文字列でも折り返す。 */
body.single-buyshops .main.shop .message-content p{ overflow-wrap:anywhere; }

/* 5. （2026-10-04 追加）figure に入っていない素の表（例：渋谷店の「じゃんぱら 渋谷道玄坂店」の店舗情報）。
      長い URL のセルが表の幅を押し広げ、360px 以下で横スクロールが出ていた。表を本文の幅に収め、セルの長い文字列を折り返す。
      比較表（table.has-fixed-layout・横スクロールの figure の中）は対象外。 */
body.single-buyshops .main.shop .message-content table:not(.has-fixed-layout){ max-width:100%; }
body.single-buyshops .main.shop .message-content table:not(.has-fixed-layout) td,
body.single-buyshops .main.shop .message-content table:not(.has-fixed-layout) th{ overflow-wrap:anywhere; word-break:break-word; }