/*流体シェイプ*/
.fluid {
  z-index: -1;
  top: 3%;
  left: 24%;

  position: absolute;
  width: 45vh; /*横幅*/
  height: 45vh; /*縦幅*/
  background: #eef669; /*背景色*/
  animation: fluidrotate 30s ease 0s infinite; /*アニメーションの設定*/
}
@media (max-width: 1200px) {
  .fluid {
    width: 43vh;
    height: 43vh;
    top: 3%;
    left: 17%;
  }
}
@media (max-width: 992px) {
  .fluid {
    width: 41vh;
    height: 41vh;
    top: 4%;
    left: 10%;
  }
}
@media (max-width: 768px) {
  .fluid {
    width: 36vh;
    height: 36vh;
    top: 2%;
    left: 6%;
  }
}
@media (max-width: 576px) {
  .fluid {
    width: 32vh;
    height: 32vh;
    top: 3%;
    left: 4%;
  }
}
@media (max-width: 466px) {
  .fluid {
    width: 29vh;
    height: 29vh;
    top: 6%;
    left: 4%;
  }
}
@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%;
  }
}