#top_bg {
    height: 100vh;
    margin-bottom: 100px;
}

#particles-js{ 
    position: absolute;
    z-index:-1;/*描画を一番下に*/
    width: 100vw;
    height: 100%;
    background-color:#f5f5f5;/*背景色*/
  }
  
#wrapper{
    display: flex;
    align-items: center;
}

#wrapper{
    position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
    z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
    width:100vw;
    height: 100%;
}






#top_bg .top_box {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#top_bg .scrollDown {
    bottom: 7%;
}

#top_bg .left_box {
    margin-top: 0%;
}
#top_bg .right_box {
    margin-top: 0%;
}



.fluid {
    width:60vh;/*横幅*/
    height: 45vh;/*縦幅*/
    margin: 0 40px;
    background: linear-gradient(45deg,#ff3037,#c4252b);/*背景色*/
    animation: fluidrotate 25s ease 0s infinite;/*アニメーションの設定*/
}
  
@keyframes fluidrotate {  
        
  0%, 100% {
      border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
      border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
      border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
      border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
      border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
      border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
      border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
        
}

@media screen and (max-width: 1024px){
    #top_bg, #particles-js {
        height: 700px;
    }

    .fluid {
        width: 25vh;/*横幅*/
        height: 20vh;/*縦幅*/
        margin: 0 0;
    }
}

@media screen and (max-width: 767px){
    .fluid {
        display: none;
    }
}