@charset "utf-8";
/* CSS Document */

/* 3つを並べる親コンテナ */
.container-flex-three {
  display: flex; /* Flexコンテナとして設定 */
  align-items: flex-start; /* 上揃え（中央揃えならcenter） */
  gap: 15px; /* 各要素の間の隙間 */
  width: 100%;
  box-sizing: border-box;
}

/* PC：テキストBOXの幅（3等分から隙間を引いた計算） */
.text-content-flex-three {
  flex: 0 0 calc(33.333% - 10.333px); /* 3等分の幅に調整 */
  box-sizing: border-box;
}

/* PC：画像2つをまとめる枠（残り3分之2の幅を持たせる） */
.images-combined-wrapper {
  flex: 0 0 calc(66.666% - 5.666px); /* 残り2ブロック分の幅 */
  display: flex; /* 中の画像2つを横並びにする */
  gap: 15px; /* 画像と画像の間の隙間 */
  box-sizing: border-box;
}

/* PC：画像BOX1・2共通の幅（全体の3等分になるように設定） */
.image-wrapper-flex-three {
  flex: 0 0 calc(50% - 10px); /* 2つの画像をさらに半分に割る */
  max-width: calc(50% - 10px);
  box-sizing: border-box;
}

.image-wrapper-flex-three img {
  width: 100%; /* 画像をBOXの幅にフィットさせる */
  height: auto; /* アスペクト比維持 */
  display: block; /* 下部の不要な隙間を消す */
}

/* --- レスポンシブ表示（スマホ用：480px以下） --- */
@media (max-width: 480px) {
  .container-flex-three {
    flex-direction: column; /* 全体を縦並び（テキストが上、画像枠が下）に変更 */
    gap: 15px; /* スマホ用の隙間に調整 */
  }

  /* スマホ：テキストBOXを横幅いっぱいに */
  .text-content-flex-three {
    width: 100%;
    flex: 0 0 100%;
  }

  /* スマホ：画像2つを包む枠も横幅いっぱいに */
  .images-combined-wrapper {
    width: 100%;
    flex: 0 0 100%;
    gap: 10px; /* スマホ時の画像同士の隙間を少し狭く */
  }

  /* スマホ：画像BOX1と2は「横並び」を維持して、それぞれ50%ずつの幅にする */
  .image-wrapper-flex-three {
    flex: 0 0 calc(50% - 5px); /* gapが10pxなので、半分から5px引く */
    max-width: calc(50% - 5px);
  }
}