@charset "utf-8";
.container {
  display: flex; /* Flexboxを有効にする */
  flex-direction: column; /* 👈 デフォルトは縦並び */
  gap: 0px; /* 要素間の隙間 */
  padding: 0px;
  /*border: 0px solid #333;*/
}

.item {
  background-color: #f0f0f0;
  padding: 0px;
  /*border: 0px solid #ccc;*/
  text-align: center;
}


/* 画面幅が768px以上の時（大きい画面）に適用 */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* 👈 横並びに変更 */
    justify-content: space-around; /* 要素を均等に配置 */
  }
  
  .item {
    /* 横並びの時に要素の幅を均等にする設定 */
    flex: 1; 
  }
}