/* balloon */

#balloon {
  animation: 20s Roll ease-in-out infinite;
  position: relative;
}

#balloon span {
  display: block;
  animation: FloatHorizontal 14s ease-in-out infinite alternate;
}

#balloon .balloon_logo {
  animation: FloatVertical 16s ease-in-out infinite alternate;
}

@keyframes Roll {
  0% {
    transform: rotateZ(15deg) scale(0.9);
  }

  50% {
    transform: rotateZ(-15deg) scale(1.0);
  }

  100% {
    transform: rotateZ(15deg) scale(0.9);
  }
}

@keyframes FloatHorizontal {
  0% {
    transform: translate3d(2.5vw, 0, 0);
  }

  50% {
    transform: translate3d(-2.5vw, 0, 0);
  }

  100% {
    transform: translate3d(2.5vw, 0, 0);
  }
}

@keyframes FloatVertical {
  0% {
    transform: translate3d(0, 2.5vw, 0);
  }

  50% {
    transform: translate3d(0, -2.5vw, 0);
  }

  100% {
    transform: translate3d(0, 2.5vw, 0);
  }
}

/* balloon2 */
#balloon2 {
  animation: 15s Roll ease-in-out infinite;
}

#balloon2 span {
  display: block;
  animation: FloatHorizontal 15s ease-in-out infinite alternate;
}

#balloon2 .balloon_logo {
  animation: FloatVertical 11s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* balloon3 */
#balloon3 {
  animation: 10s Roll ease-in-out infinite;
}

#balloon3 span {
  display: block;
  animation: FloatHorizontal 26s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}

#balloon3 img {
  animation: FloatVertical 16s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

/* balloon4 */
#balloon4 {
  animation: 30s Roll ease-in-out infinite;
}

#balloon4 span {
  display: block;
  animation: FloatHorizontal 13s ease-out infinite alternate;
}

#balloon4 img {
  animation: FloatVertical 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}


@media screen and (max-width: 767px) {

  /* /* 横移動アニメーションの移動量を小さく */
  @keyframes FloatHorizontal_sm {
    0% {
      transform: translate3d(1vw, 0, 0);
    }

    50% {
      transform: translate3d(-1vw, 0, 0);
    }

    100% {
      transform: translate3d(1vw, 0, 0);
    }
  }

  /* 縦移動アニメーションの移動量を小さく */
  @keyframes FloatVertical_sm {
    0% {
      transform: translate3d(0, 1vw, 0);
    }

    50% {
      transform: translate3d(0, -1vw, 0);
    }

    100% {
      transform: translate3d(0, 1vw, 0);
    }
  }
}