@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/


/*========= 流体シェイプを動かす ===============*/
.fluid {
  width:24vh;/*横幅*/
  height: 8vh;/*縦幅*/
  background:#cfc5c5d8;/*背景色*/
  animation: fluidrotate 50s ease 0s infinite;/*アニメーションの設定*/
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 90%;
}
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: 86% 54% 50% 50%/35% 61% 39% 65%;
}

}
.fluid {
    margin: -400px auto 0;
    z-index: 5000000000000000000000000000000000000000000000000000000000000000000000000000;
}
.fluid-1 {
    width:28vh;/*横幅*/
    height: 7vh;/*縦幅*/
    background:#f0ebebfd;/*背景色*/
    animation: fluidrotate 30s 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% 10%/56% 68% 32% 44%;
  }
  84% {
      border-radius: 10% 54% 50% 50%/35% 61% 39% 65%;
  }
  
  }
  .fluid-1 {
      margin: -90px auto ;
      text-align: center;
      margin-inline-start: 120px;
      z-index: 80000000000000000000000000000000000;
  }