/* コンテナ全体のスタイル */
.info-container {
  display: flex;
  flex-wrap: wrap; /* スマホ時に折り返す設定 */
  gap: 20px; /* ブロック間の隙間（任意で調整してください） */
  width: 100%;
  margin: 150px auto;
}

/* 各ブロックの基本スタイル */
.info-block {
  flex: 1; /* PCでは均等サイズ */
  min-width: 300px; /* 崩れ防止の最小幅 */
  padding: 3%; /* 指定のパディング */
  box-sizing: border-box; /* パディングを幅に含める */
  background-color: #f9f9f9; /* 背景色（任意） */
  border-radius: 8px;
}

/* タイトル(h3)のスタイル */
.info-block h3 {
  margin-top: 0;
  font-size: 1.5rem;
  border-left: 4px solid #007bff; /* アクセントの左線 */
  padding-left: 10px;
}

/* 説明文(p)のスタイル */
.info-block p {
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

/* 動画エリアのスタイル */
.video-wrapper video {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: auto;
  border-radius: 4px;
  display: block;
}

/* スマホ表示用のメディアクエリ (768px以下) */
@media (max-width: 768px) {
  .info-block {
    flex: 0 0 100%; /* 幅を100%にして強制的に縦並びにする */
    margin-bottom: 20px;
  }
}