<div class="subpageBox">
  <!-- 画像 -->
  <div class="subpageBoxL"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt="">
  </div>
  <!-- 文章 -->  
  <div class="subpageBoxR">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  </div>
</div>
/*画像+文章 style.css 1958-2022行目
========================================================================== */
.subpageBox {
    width: 97%;
    margin: 0 auto;
    padding: 16px;
}

@media (max-width: 763px) {
    .subpageBox {
        width: 96%;
        margin: 0 auto;
        padding: 0px 8px;
    }
}

.subpageBox:after,
.subpageBox:before {
    clear: both;
    content: "";
    display: block;
}


/*画像(左)文章(右*/
.subpageBoxL {
    width: 30%;
    float: left;
    padding: 8px;
}

.subpageBoxR {
    width: 66%;
    float: left;
    padding: 8px;
}

@media (max-width: 763px) {
    .subpageBoxL {
        width: 96%;
        float: none;
        padding: 8px;
    }

    .subpageBoxR {
        width: 96%;
        float: none;
        padding: 8px;
        font-size: 14px;
    }
}


@media (max-width:1028px) and (min-width: 764px) {

    .subpageBoxL {
        width: 40%;
        float: left;
        padding: 8px;
    }

    .subpageBoxR {
        width: 55%;
        float: left;
        padding: 8px;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.