.yohaku {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.yohaku2 {
  text-align: center; /* テキストを中央揃え */
}

.title {
  text-align: center;
  font-size: 2.0em;
  font-weight: bold;
}

.text-container {
  display: flex;
  flex-direction: column;
}

.kosugi-regular {
  font-family: "Kosugi", serif;
  font-weight: 400;
  font-style: bold;
  line-height: 1.5;
}

.noto-serifuniquifier {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
  line-height: 1.2;
  font-weight: 600;
}

.noto-serifuniquifier2 {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:"wdth" 100;
  line-height: 1.2;
}

.s00 {
  font-size: clamp(16px, 2.5vw, 48px); /* 最小値、理想的な値、最大値を設定 */
}

.c021 {
  text-align: center;
  font-size: 1.9em; /* 画面幅に応じてフォントサイズを変更 */
  color: #333;
}

.c02 {
  font-size: 0.9em; /* 画面幅に応じてフォントサイズを変更 */
  color: #0067C0;
  text-align: center;
}

.c022 {
  font-size: 1.2em; /* 画面幅に応じてフォントサイズを変更 */
  color: #000;
  text-align: left;
}

.s021 {
  text-align: center;
  font-size: 1.8em; /* 画面幅に応じてフォントサイズを変更 */
  color: #000;
}

.s03 {
  font-size: 1.4em; /* 画面幅に応じてフォントサイズを変更 */
  color: #000;
  text-align: center;
}


----------------------------------------------------------------------------

.flow-container {
  display: flex; /* フレックスボックスを使用 */
  align-items: center; /* 子要素を中央揃え */
  flex-direction: column; /* 子要素を縦に並べる */
  width: 100%; /* コンテナが幅いっぱいに広がる */
  margin: 0 auto; /* コンテナ自体を中央に配置 */
}


.flow04 {
  list-style: none; /* デフォルトの箇条書きを削除 */
  padding: 0; /* 不要な余白を削除 */
  width: 100%; /* リスト全体を幅いっぱいに */
  margin: 0 auto; /* コンテナ全体を中央揃え */
  max-width: 1000px;
}

.flow04 > li {
  display: flex; /* 数字と文章を横並びに */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: flex-start; /* 左寄せにして数字を揃える */
  margin-bottom: 20px; /* 各項目の間隔 */
  font-size: 1.4em; /* フォントサイズを調整 */
  flex-wrap: wrap; /* 小さい画面で折り返しを有効にする */
  width: 50%; /* リスト項目の幅を調整 */
  margin: 0 auto; /* リスト項目を中央に配置 */
  padding-top: 15px;
}

.icon04 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0067C0; /* 青色 */
  color: #fff; /* 白色 */
  font-size: 1.0em;
  font-weight: bold;
  border-radius: 50%;
  width: 40px; /* アイコンの幅を固定 */
  height: 40px; /* アイコンの高さを固定 */
  margin-right: 20px; /* 数字と文章の間隔 */
  flex-shrink: 0; /* アイコンのサイズを固定 */
  font-family: Arial, sans-serif;
}

.p-h2 {
  font-size: 1.8em;
  font-weight: bold;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, #fc00ff , #00dbde );/*テキストグラデーションカラー*/
  text-align: center;/*中央揃え*/
}

.vision-container {
  text-align: center; /* 子要素を中央に寄せる */
}

.vision-container img {
  margin: auto;
}

.c03 {
  display: inline-block; /* インラインブロックに設定 */
  color: #fff; /* テキストの色を白に設定 */
  background: #03256C;
  font-size: 1.5em;
  padding: 0px 10px;
  text-align: center; /* テキストを中央揃え */
  border-radius: 5px; /* 角を少し丸める */
  font-weight: bold;
  margin-bottom: 30px;
  margin-top: 50px;
}

.c03.active {
  animation-name: kf_c03;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes kf_c03 {
  0% {
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }
  100% {
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
  }
}



@media(max-width: 1117px){

  .flow04 > li {
    width: 100%; /* リスト項目の幅を調整 */
    padding: 10px;
    margin-left: 130px;
  }
}

/* メディアクエリを使って小さい画面サイズに対応 */
@media (max-width: 900px) {
  .vision-container > img {
    width: 50vh;
  }

  .kosugi-regular {
    margin-top: 10px;
  }

  .flow04 > li {
    margin-bottom: 0; /* 各項目の間隔 */
    padding: 5px;
    margin-left: 100px;
  }

  .icon04 {
    width: 30px;
    height: 30px;
    font-size: 0.7em;
  }

}

@media(max-width: 768px) {
  .flow-container {
    padding: 0 10px; /* 左右の余白を追加して見やすくする */
  }

  .flow04 > li {
    margin-left: 50px;
  }
}

  @media(max-width: 550px) {

    .flow04 > li {
      margin-left: 0;
      display: block;
      text-align: center;
    }

    .icon04 {
      margin: 0 auto;
    }
}