div.bg-gray {
        padding: 30px 30px 10px 30px;
        background-color: #eee;
        margin-top: 2em;
        margin-bottom: 2em;
    }

    div.border-gray {
        padding: 30px 30px 10px 30px;
        border: 1px #ddd solid;
        margin-top: 2em;
        margin-bottom: 2em;
    }


    /* ------------------------------------------------------------
       画像ブロックの回り込み（float）
       figure のクラスを :has() で拾い、親 .media-image-block を float。
       幅は max-width のみ指定＝画像を拡大しない（小さい画像は原寸のまま）。
       本文カラム 808px 基準:  20%≒161px / 33%≒266px / 50%≒404px
       回り込み解除はテーマ既存の <hr class="clearHidden"> を使う。
       ------------------------------------------------------------ */
    .media-image-block:has([class*="float-left-"]),
    .media-image-block:has([class*="float-right-"]) {
        display: inline-block;
        width: auto;
        max-width: 50%;
    }

    .media-image-block:has([class*="float-left-"]) {
        float: left;
        margin: .25em 1.5em 1.5em 0;
    }

    .media-image-block:has([class*="float-right-"]) {
        float: right;
        margin: .25em 0 1.5em 1.5em;
    }

    .media-image-block:has([class*="float-left-"]) > figure,
    .media-image-block:has([class*="float-right-"]) > figure {
        margin: 0;
        max-width: 100%;
    }

    .media-image-block:has([class*="float-left-"]) img,
    .media-image-block:has([class*="float-right-"]) img {
        max-width: 100%;
        height: auto;
    }

    /* float 直後の見出しは上パディングを消して画像と天を揃える。
       .column-block-editor の h2〜h4 は padding-top: var(--spacing-unit-top-heading)=32px を
       持つため、回り込みの隣に来ると大きな余白ができてしまう。
       テーマ既存の「> h2:first-child { padding-top: 0 }」と同じ考え方。 */
    .media-image-block:has([class*="float-left-"]) + :is(h2, h3, h4, h5, h6),
    .media-image-block:has([class*="float-right-"]) + :is(h2, h3, h4, h5, h6) {
        padding-top: 0;
        margin-top: 0;
    }

    /* 幅バケット（上限だけ変える） */
    .media-image-block:has(.float-left-20),
    .media-image-block:has(.float-right-20) { max-width: 20%; }

    .media-image-block:has(.float-left-33),
    .media-image-block:has(.float-right-33) { max-width: 33%; }

    .media-image-block:has(.float-left-50),
    .media-image-block:has(.float-right-50) { max-width: 50%; }

    /* 回り込み解除マーカー
       ブロックメニュー登録は clear-both。テーマ内製の clearHidden も同じ扱いにする。
       （bundle 側の .clearHidden は @layer utilities 内で hr に効かないことがあるため
         このレイヤー外CSSで明示的に定義して確実に優先させる） */
    hr.clear-both,
    hr.clearHidden {
        clear: both;
        visibility: hidden;
        border: none;
        height: 0;
        margin: 0;
        display: block;
    }

    /* 解除漏れの保険（本文ラッパー） */
    .js-outline2 {
        display: flow-root;
    }

    /* スマートフォンは回り込みを解除して縦積み */
    @media (max-width: 640px) {
        .media-image-block:has([class*="float-left-"]),
        .media-image-block:has([class*="float-right-"]) {
            display: block;
            float: none;
            max-width: 100%;
            margin: 0 0 1em;
        }
    }