@charset "utf-8";
/* 1\. デフォルト (小さい画面/縦並び) 📱

メディアクエリを設定しないデフォルトの状態を、**縦並び**（`flex-direction: column;`）とします。

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

.item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  text-align: left;
}

.container2 {
  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: left;
}
.font0{font-size: 200%;
font-weight: bold;
line-height: inherit;}

.font1-1{font-size: 160%;
font-weight: bold;
line-height: inherit;
color: #33417F;}

.font1-2{font-size: 160%;
font-weight: bold;
line-height: inherit;
color: #BF8322;}


.font2{font-size: 110%;
font-weight: bold;
line-height: inherit;}

/*#### 2\. 大きい画面 (横一列) 🖥️

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

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

.font1-1{font-size: 220%;
font-weight: bold;
line-height: inherit;
color: #33417F;}
	
.font1-1-1{font-size: 220%;
font-weight: bold;
line-height: inherit;
color: #E72CE8;}


.font1-2{font-size: 220%;
font-weight: bold;
line-height: inherit;
color: #BF8322;}

.font2{font-size: 110%;
font-weight: bold;
line-height: inherit;}    
}


/*.t-2{
    background-color: #F0DEC1;
}
.t-1{
    background-color: #BDCCFB;
}*/