@charset "utf-8";


/*========= 流体シェイプを動かす ===============*/
.fluid-whit01 {
  width: 55vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#ffffff;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: -2%;
  left: -3%;
}
@media screen and (max-width: 768px) {
  .fluid-whit01 {
    width: 35vh;/*横幅*/
    height: 30vh;/*縦幅*/
  }
}
.fluid-whit02 {
  width: 70vh;/*横幅*/
  height: 60vh;/*縦幅*/
  background:#ffffff;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: 12%;
  right: -3%;
}
@media screen and (max-width: 768px) {
    .fluid-whit02 {
      width: 50vh;/*横幅*/
      height: 40vh;/*縦幅*/
      top: -5%;
      right: -10%;
  }
}
.fluid-whit03 {
  width: 55vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#ffffff;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  bottom: 20%;
  left: 0;
}
@media screen and (max-width: 768px) {
  .fluid-whit03 {
    width: 35vh;/*横幅*/
    height: 30vh;/*縦幅*/
    bottom: 30%;
    left: -3%;
 }
}
.fluid-whit04 {
  width: 55vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#ffffff;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: 10%;
  right: -3%;
}
@media screen and (max-width: 768px) {
  .fluid-whit04 {
    display: none;
 }
}
.fluid-whit05 {
  width: 40vh;/*横幅*/
  height: 35vh;/*縦幅*/
  background:#ffffff;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: 0%;
  left: -5%;
}
@media screen and (max-width: 768px) {
  .fluid-whit05 {
    width: 35vh;/*横幅*/
    height: 30vh;/*縦幅*/
    top: -2%;
    left: -3%;
 }
}
.fluid-whit06 {
  width: 60vh;/*横幅*/
  height: 50vh;/*縦幅*/
  background:#ffffff;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  bottom: 15%;
  right: -5%;
}
@media screen and (max-width: 768px) {
    .fluid-whit06 {
      width: 35vh;/*横幅*/
      height: 26vh;/*縦幅*/
      bottom: 10%;
      right: -10%;
  }
}




.fluid-baige01 {
  width:30vw;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#fbf8e5;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: 20%;
  left: 0%;
}
@media screen and (max-width: 768px) {
  .fluid-baige01 {
    width:45vh;/*横幅*/
    height: 35vh;/*縦幅*/
    top: 35%;
  }
}
.fluid-baige02 {
  width: 50vw;/*横幅*/
  height: 80vh;/*縦幅*/
  background: #fbf8e5;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: 3%;
  right: 0;
}
@media screen and (max-width: 768px) {
  .fluid-baige02 {
    width: 55vh;/*横幅*/
    height: 50vh;/*縦幅*/
    top: 15%;
  }
}
.fluid-baige03 {
  width: 15vw;/*横幅*/
  height: 20vh;/*縦幅*/
  background: #fbf8e5;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  bottom: 3%;
  left: 30%;
}
@media screen and (max-width: 768px) {
  .fluid-baige03 {
    width:25vh;/*横幅*/
    height: 20vh;/*縦幅*/
  }
}
.fluid-baige04 {
  width:40vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#fbf8e5;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  top: 20%;
  left: 10%;
}
@media screen and (max-width: 768px) {
  .fluid-baige04 {
    width:30vh;/*横幅*/
    height: 20vh;/*縦幅*/
    top: 1%;
    left: 15%;
  }
}

.fluid-baige05 {
  width: 60vw;/*横幅*/
  height: 80vh;/*縦幅*/
  background: #fbf8e5;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  bottom: 10%;
  right: 0;
}
@media screen and (max-width: 768px) {
  .fluid-baige05 {
    width: 75vh;/*横幅*/
    height: 50vh;/*縦幅*/
    bottom: 2%;
  }
}
.fluid-baige06 {
  width:30vw;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#fbf8e5;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  position: absolute;
  bottom: 20%;
  left: -2%;
}
@media screen and (max-width: 768px) {
  .fluid-baige06 {
    width:55vh;/*横幅*/
    height: 35vh;/*縦幅*/
    bottom: 10%;
 }
}




@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%;
}
    
}