@media screen and (min-width: 850px) {
  .mainviual{
    margin-top: 80px;
    height: 40vh;
    & h1{
      font-size: 250%;
    }
  }
  .category_wrap{
    max-width: 1100px;
    margin: 60px auto 80px;
    & .title{
      font-size: 230%;
    }
    & ul {
      width: 95%;
      margin: 0 auto;
      justify-content: flex-start;
      & li{
        width: calc(95% / var(--num));
        margin: 0 calc(5% / calc(var(--num) * 2)) 30px;
      }
    }
  }
  .maintenance{
    max-width: 1100px;
    margin: 0 auto 80px;
    & h3{
      font-size: 230%;
    }
    & .title{
      font-size: 200%;
      font-weight: bold;
      line-height: 1.3;
      color: #f40;
    }
    & .text{
      font-size: 140%;
    }
    & ul{
      margin-bottom: 50px;
      display: flex;
      flex-wrap: wrap;
      & li{
        padding: 10px;
        font-size: 146.5%;
        display: flex;
        align-items: center;
        & span{
          margin: 0 5px 3px 0;
        }
      }
    }
  }
  .flow_wrap{
    max-width: 1100px;
    margin: 0 auto 100px;
    & h3{
      font-size: 200%;
      margin-bottom: 0;
    }
    & ul{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      position: relative;
      z-index: 0;
      padding: 100px 0;
      margin: 0 0 120px;
      &::before{
        content: '';
        width: 5px;
        height: 100%;
        background: #3093d8;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: auto;
      }
      & li{
        width: 40%;
        margin-top: -30px;
        background: #fff;
        position: relative;
        &:nth-of-type(odd){
          border: 2px solid #3093d8;
          &::before{
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: var(--accent);
            position: absolute;
            top: 0;
            bottom: 0;
            right: -122px;
            left: unset;
            margin: auto;
          }
          &::after{
            content: '';
            width: 200px;
            height: 2px;
            background: #3093d8;
            position: absolute;
            top: 0;
            bottom: 0;
            right: -120px;
            z-index: -1;
            margin: auto;
          }
        }
        &:nth-of-type(even){
          border: 2px solid var(--accent);
          margin: -30px 0 0 auto;
          &::before{
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: #3093d8;
            position: absolute;
            top: 0;
            bottom: 0;
            left: -122px;
            right: unset;
            margin: auto;
          }
          &::after{
            content: '';
            width: 200px;
            height: 2px;
            background: var(--accent);
            position: absolute;
            top: 0;
            bottom: 0;
            left: -120px;
            z-index: -1;
            margin: auto;
          }
        }
        & p{
          &:first-of-type{
            text-align: center;
            font-size: 130%;
          }
          &:last-of-type{
            margin: 0;
            padding: 10px 15px;
          }
        }
      }
    }
  }
}