body {
  -webkit-text-size-adjust: 100%;
  padding: 10px;
}

h1 {
    font-size: 2em !important;
    padding: 0.2em 0.4em;
    color: #333333;
    background: #f4f4f4;
    border-left: solid 12px #e16655;
    border-bottom: solid 3px #dddddd;
  }

  h2 {
    font-size: 1.5em !important;
    padding: 0.2em 0.4em;
    color: white;
    background: #555555;
    border-left: solid 12px rgb(149, 158, 155);
  }

  .container {
    display: flex; /* Flexboxを使用 */
    flex-wrap: wrap; /* 画面サイズに応じて折り返し */
    align-items: center; /* 垂直方向中央揃え */
  }
  
  .image_l {
    flex: 1 0 170px; /* 画像の幅を指定、最小300px */
    margin-right: 20px; /* 右マージン */
  }
  
  .image_r {
    flex: 1 0 170px; /* 画像の幅を指定、最小300px */
    margin-left: 20px; /* 右マージン */
  }

  .text {
    flex: 2 0 170px; /* テキストの幅を指定、最小300px */
  }
  
  @media (max-width: 400px) { /* 画面サイズが768px以下の場合 */
    .container {
      flex-direction: column; /* 縦並びに変更 */
    }
  
    .image_l {
      margin-right: 0; /* 右マージンを削除 */
      margin-bottom: 10px; /* 下マージンを追加 */
    }

    .image_r {
      margin-left: 0; /* 左マージンを削除 */
      margin-bottom: 10px; /* 下マージンを追加 */
    }
  }