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

.item {
  background-color: #0C2E20;
  padding: 00px;
  border: 0px solid #ccc;
  text-align: center;
}

/*大きい画面 (横一列)

一定の画面幅（例: 768px）を超えたら、`flex-direction`を**横並び**（`row`）に切り替えます。*/


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