@charset "utf-8";
/* 泡のアニメーション */
/* Bubble animation -> bub */
.bub-container {
  position: relative;
  margin: auto;
}
.bub-1 {
  position: absolute;
  margin: auto;
  animation-name: bubble; /*アニメーション名*/
  animation-iteration-count: infinite; /*無限ループ*/
  animation-duration: 6s; /*アニメーション間隔*/
  animation-delay: 4s;
}
.bub-2 {
  position: absolute;
  margin: auto;
  animation-name: bubble2;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-delay: 0s;
}
.bub-3 {
  position: absolute;
  margin: auto;
  animation-name: bubble3;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-delay: 1s;
}
.bub-4 {
  position: absolute;
  margin: auto;
  animation-name: bubble4;
  animation-iteration-count: infinite;
  animation-duration: 7s;
  animation-delay: 3s;
}
.bub-5 {
  position: absolute;
  margin: auto;
  animation-name: bubble5;
  animation-iteration-count: infinite;
  animation-duration: 7s;
  animation-delay: 0s;
}
.bub-6 {
  position: absolute;
  margin: auto;
  animation-name: bubble6;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-delay: 0s;
}
.bub-7 {
  position: absolute;
  margin: auto;
  animation-name: bubble7;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-delay: 1s;
}
.bub-8 {
  position: absolute;
  margin: auto;
  animation-name: bubble8;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-delay: 2s;
}
.bub-9 {
  position: absolute;
  margin: auto;
  animation-name: bubble9;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-delay: 3s;
}
.bub-10 {
  position: absolute;
  margin: auto;
  animation-name: bubble10;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-delay: 3s;
}
@keyframes bubble {
  from {
    top: 15%;
    left: 60%;
    opacity: 0.3;
    width: 2%;
  }
  to {
    top: 13%;
    left: 85%;
    opacity: 0.8;
    width: 9%;
  }
}
@keyframes bubble2 {
  from {
    top: 18%;
    left: 72%;
    opacity: 0.2;
    width: 2%;
  }
  to {
    top: 16%;
    left: 80%;
    opacity: 0.8;
    width: 10%;
  }
}
@keyframes bubble3 {
  from {
    top: 25%;
    left: 75%;
    width: 2%;
    opacity: 0.2;
  }
  to {
    top: 23%;
    left: 85%;
    width: 6%;
    opacity: 0.5;
  }
}
@keyframes bubble4 {
  from {
    top: 10%;
    left: 68%;
    width: 3%;
    opacity: 0;
  }
  to {
    top: 8%;
    left: 85%;
    width: 9%;
    opacity: 0.6;
  }
}
@keyframes bubble5 {
  from {
    top: 26%;
    left: 70%;
    width: 2%;
    opacity: 0.5;
  }
  to {
    top: 25%;
    left: 80%;
    width: 10%;
    opacity: 0.6;
  }
}
@keyframes bubble6 {
  from {
    top: 13%;
    left: 66%;
    width: 1%;
    opacity: 0.2;
  }
  to {
    top: 12%;
    left: 80%;
    width: 3%;
    opacity: 0.5;
  }
}
@keyframes bubble7 {
  from {
    top: 21%;
    left: 70%;
    width: 2%;
    opacity: 0.3;
  }
  to {
    top: 20%;
    left: 90%;
    width: 4%;
    opacity: 0.9;
  }
}
@keyframes bubble8 {
  from {
    top: 22%;
    left: 63%;
    width: 2%;
    opacity: 0.2;
  }
  to {
    top: 20%;
    left: 70%;
    width: 6%;
    opacity: 0.5;
  }
}
@keyframes bubble9 {
  from {
    top: 10%;
    left: 55%;
    width: 2%;
    opacity: 0.2;
  }
  to {
    top: 8%;
    left: 68%;
    width: 4%;
    opacity: 0.5;
  }
}
@keyframes bubble10 {
  from {
    top: 10%;
    left: 50%;
    width: 2%;
    opacity: 0.2;
  }
  to {
    top: 8%;
    left: 66%;
    width: 4%;
    opacity: 0.5;
  }
}