/* モバイル幅向けの共通パッチ（2026-10-08調査の具体案にもとづく）。

   旧ページの固定幅の主因は #index-contents の width:980px であり、
   内部コンテンツはおおむね可変である。ここではその固定幅だけを解除し、
   はみ出す表やメディアは要素ごとに収める。

   旧ページでは <head> の外側に <div id="site-box"> があり、ブラウザは
   ページ側の <link>/<style> をすべて body 側へ落とすため、このファイル
   の規則は常にページ側CSSより「前」に来る。同詳細度では後勝ちで負けて
   しまうので、site.css と同じく !important で担保する。

   980px を超える幅では一切適用されないため、既存のPC表示への影響は無い。
   互換モード（quirks）のページでもメディアクエリは有効。 */

@media (max-width: 980px) {

    /* 旧レイアウトの固定幅を解除する */
    #index-contents {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* URL等の長い連続文字列が本文幅を突き抜けるのを防ぐ
           （継承するプロパティなので下層のテキスト全体に効く） */
        overflow-wrap: anywhere;
    }

    /* 画像や埋め込みが画面幅を超えないようにする。
       iframe には height:auto を付けない（height 属性が潰れて
       カレンダー等が縮んでしまうため、幅だけを丸める） */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    iframe {
        max-width: 100% !important;
    }

    /* はみ出す一覧テーブルは、そのテーブル内だけで横スクロールさせる */
    #index-contents table,
    .footer-table {
        display: block !important;
        width: max-content !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* Bootstrap の .row が持つ左右 -15px の負マージンを打ち消す。
       旧ページでは適切なコンテナ内に置かれていないため、
       そのままだと画面幅 +30px にはみ出す（hakkutsu7 等）。 */
    #index-contents .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 左右2段組（.gist + .photo 等）を縦積みにする。
       float していない要素に掛かっても無害。 */
    #index-contents .gist,
    #index-contents .photo {
        width: auto !important;
        float: none !important;
    }

    /* スライドショー等の固定幅コンテナを可変にする（中身の
       画像は上の img 規則で収まる） */
    #index-contents #slide {
        width: auto !important;
        max-width: 100% !important;
    }
}