.container9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 90%;
  margin: auto;/* container9の天地 */
  transition: all 0.5s ease;
}

/* 通常：2列×3段（例） */
.box1, .box2, .box3 {
  width: 480px;
  height: 100px;
  margin:0 2% 0 0; /* 横並び時のmargin */
}
.box4, .box5, .box6 {
  width: 200px;
  height: 100px;
  margin:0 0 0 2%; /* 横並び時のmargin */
}

/* --- 700px以下になったら縦1列に変更 --- */
@media (max-width: 700px) {
  .container9 {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 80%;
    transition: all 0.5s ease;
    margin:1% 0 1% 0; /* 縦並び時のmargin */
  }

  /* 並び順を強制変更 */
  .box1 { order: 1; }
  .box2 { order: 2; }
  .box3 { order: 3; }
  .box4 { order: 4; }
  .box5 { order: 5; }
  .box6 { order: 6; }
}