@charset "utf-8";
/* CSS Document */
.container-flex {
  display: flex; /* Flexコンテナとして設定 */
  align-items: center; /* 垂直方向の中央揃え（必要に応じて調整） */
  gap: 20px; /* 画像とテキストの間に20pxの隙間 */
  width: 100%; /* 親要素の幅に合わせて調整 */
}

.image-wrapper-flex {
  flex: 0 0 calc(33.333% - 20px / 2); /* 画像の幅を親要素の1/3に設定。gapを考慮して調整 */
  /* flex-basis: calc(33.333% - 10px); としてもOK */
  max-width: calc(33.333% - 20px / 2); /* はみ出し防止 */
  box-sizing: border-box; /* paddingやborderを幅に含める */
}

.image-wrapper-flex img {
  width: 100%; /* 画像をラッパーの幅に合わせる */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 画像の下にできる余白を削除 */
}

.text-content-flex {
  flex: 1; /* 残りのスペースを全てテキストに割り当てる */
  box-sizing: border-box; /* paddingやborderを幅に含める */
}