/*フローデザイン支援ＤＥＺＡ*/
    .flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 50px;
      margin-bottom: 80px;
      flex-wrap: wrap;
    }

    .box {
      background-color: #ffffaa;
      border: 5px solid #99cc33;
      border-radius: 8px;
      padding: 30px 40px;
      font-size: 20px;
      font-family: sans-serif;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }

   .arrow {
      width: 50px;
      height: 50px;
      background-color: #a8d944; /* 黄緑系 */
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrow::after {
      content: '';
      display: block;
      width: 14px;
      height: 14px;
      border-top: 4px solid white;
      border-right: 4px solid white;
      transform: rotate(45deg);
    }
    /* ↓↓↓ スマホ画面用レスポンシブ対応 ↓↓↓ */
    @media (max-width: 768px) {
   .flow {
      flex-direction: column;
      align-items: stretch;
      }

    .arrow {
      transform: rotate(90deg); /* 横向き→縦向きに変更 */
      margin: 10px auto; /* 中央に配置 */
     }
     }