@charset "utf-8";
.anime_box {width: 100%; /*width: 90%; max-width: 900px;*/ margin: 0 auto; aspect-ratio: 1/1; position: absolute !important; /*animation: floating-parent 1s ease-in infinite alternate;*/}
.anime_box2 {width: 100%; /*width: 90%; max-width: 900px;*/ margin: 0 auto; aspect-ratio: 1/1; position: absolute !important; text-align:center;}

.ball0 {margin: 0; width: 80px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/}
.ball_inr0 {margin: 0; animation: floating-x0 30s ease-in-out infinite alternate; animation-delay: 0.5s}
.ball_inr0 img {margin: 10px auto 7px auto !important;}
.ball_name {font-size: 9px; background-color: #fff; border-radius: 5px; padding: 4px; text-align:center; line-height: 10px; white-space: nowrap; width: max-content; margin: auto;}

.ball1 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans1 0.5s forwards;}
.ball_inr1 {margin: 0; animation: floating-x1 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr1 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr1 {animation: floating-x1 1s ease-in-out infinite alternate;}*/

.ball2 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans2 0.5s forwards;}
.ball_inr2 {margin: 0; animation: floating-x2 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr2 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr2 {animation: floating-x2 1s ease-in-out infinite alternate;}*/

.ball3 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans3 0.5s forwards;}
.ball_inr3 {margin: 0; animation: floating-x3 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr3 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr3 {animation: floating-x3 1s ease-in-out infinite alternate;}*/

.ball4 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans4 0.5s forwards;}
.ball_inr4 {margin: 0; animation: floating-x4 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr4 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr4 {animation: floating-x4 1s ease-in-out infinite alternate;}*/

.ball5 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans5 0.5s forwards;}
.ball_inr5 {margin: 0; animation: floating-x5 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr5 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr5 {animation: floating-x5 1s ease-in-out infinite alternate;}*/

.ball6 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans6 0.5s forwards;}
.ball_inr6 {margin: 0; animation: floating-x6 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr6 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr6 {animation: floating-x6 1s ease-in-out infinite alternate;}*/

.ball7 {margin: 0; width: 100px; position: absolute !important; left: calc(50% - 40px); top: 200px; /*transform: translate(-50%, -50%);*/ animation:trans7 0.5s forwards;}
.ball_inr7 {margin: 0; animation: floating-x7 30s ease-in-out infinite alternate; animation-delay: 0.5s text-align:center;}
.ball_inr7 img {margin: 10px auto 7px auto !important;}
/*.ball_txt_inr7 {animation: floating-x7 1s ease-in-out infinite alternate;}*/

.ball_mask {
  background-color: #fff;
  opacity: 0.4;
  position: absolute !important;
  width: 100%;
  height: 80%;
  display: none;
  pointer-events: none;
}

.ball1 .new,
.ball2 .new,
.ball3 .new,
.ball4 .new,
.ball5 .new,
.ball6 .new,
.ball7 .new {
  width: 20px;
  right: 10px;
  top: 45px;
  position: absolute;
}

.ball1 .ase,
.ball2 .ase,
.ball3 .ase,
.ball4 .ase,
.ball5 .ase,
.ball6 .ase,
.ball7 .ase {
  width: 30px;
  right: -0px;
  top: 35px;
  position: absolute;
  display: none;
}

.ball1 .icon,
.ball2 .icon,
.ball3 .icon,
.ball4 .icon,
.ball5 .icon,
.ball6 .icon,
.ball7 .icon {
  width: 72px;
}

@keyframes floating-parent {
  0% {
    transform: scale(98%);
  }
  100% {
    transform: scale(102%);
  }
}

@keyframes trans0 {
 to {
  transform: translate(0%, 0%);
 }
}
@keyframes floating-x0 {
  0% {
    transform: translate(0%,0%);
  }
  5% {
    transform: translate(1%,10%);
  }
  10% {
    transform: translate(-1%,-0%);
  }
  17% {
    transform: translate(-1%,5%);
  }
  18% {
    transform: translate(-1%,7%);
  }
  20% {
    transform: translate(1%,-10%);
  }
  25% {
    transform: translate(-1%,10%);
  }
  30% {
    transform: translate(1%,-10%);
  }
  35% {
    transform: translate(-1%,10%);
  }
  40% {
    transform: translate(1%,-10%);
  }
  45% {
    transform: translate(-1%,10%);
  }
  50% {
    transform: translate(1%,-10%);
  }
  55% {
    transform: translate(-1%,10%);
  }
  60% {
    transform: translate(1%,-10%);;
  }
  65% {
    transform: translate(-1%,10%);
  }
  70% {
    transform: translate(1%,-10%);
  }
  75% {
    transform: translate(-1%,10%);
  }
  80% {
    transform: translate(1%,-10%);
  }
  85% {
    transform: translate(-1%,10%);
  }
  90% {
    transform: translate(1%,-10%);
  }
  95% {
    transform: translate(-1%,10%);
  }
  100% {
    transform: translate(1%,-10%);
  }
}
/*
@keyframes floating-y {
  0% {
    transform: translateY(-20%);
  }
  100% {
    transform: translateY(20%);
  }
}
*/

@keyframes trans1 {
/*
 60% {
  transform: translate(-135px, -180px);
 }
 70% {
  transform: translate(-105px, -130px);
 }*/
 100% {
  transform: translate(-145px, -205px);
 }
/*
 to {
  transform: translate(-135px, -180px);
 }
*/
}
@keyframes floating-x1 {
  0% {
    transform: translate(-1%,10%);
  }
  5% {
    transform: translate(1%,-15%);
  }
  10% {
    transform: translate(0%,-10%);
  }
  15% {
    transform: translate(1%,0%);
  }
  20% {
    transform: translate(-1%,10%) scale(0.85);
  }
  25% {
    transform: translate(0%,0%) scale(0.86);
  }
  30% {
    transform: translate(3%,-6%) scale(0.86);
  }
  40% {
    transform: translate(-1%,10%) scale(0.95);
  }
  50% {
    transform: translate(4%,-3%) scale(0.9);
  }
  60% {
    transform: translate(-2%,10%);
  }
  70% {
    transform: translate(1%,-10%);
  }
  80% {
    transform: translate(-2%,10%);
  }
  90% {
    transform: translate(2%,-5%);
  }
  100% {
    transform: translate(1%,-10%);
  }
}

@keyframes trans2 {
/*
 60% {
  transform: translate(5px, -165px);
 }
 70% {
  transform: translate(3px, -135px);
 }*/
 100% {
  transform: translate(5px, -180px);
 }
}
@keyframes floating-x2 {
  0% {
    transform: translate(-1%,10%);
  }
  10% {
    transform: translate(1%,-10%) scale(0.9);
  }
  20% {
    transform: translate(-1%,10%) scale(0.9);
  }
  30% {
    transform: translate(1%,-10%) scale(0.9);
  }
  40% {
    transform: translate(-1%,10%) scale(0.9);
  }
  50% {
    transform: translate(2%,-10%);
  }
  60% {
    transform: translate(-2%,10%);
  }
  70% {
    transform: translate(1%,-10%);
  }
  80% {
    transform: translate(-1%,10%);
  }
  90% {
    transform: translate(2%,-5%);
  }
  100% {
    transform: translate(1%,-10%);
  }
}

@keyframes trans3 {
/*
 60% {
  transform: translate(120px, -110px);
 }
 70% {
  transform: translate(100px, -80px);
 }*/
 100% {
  transform: translate(130px, -120px);
 }
}
@keyframes floating-x3 {
  0% {
    transform: translate(1%,10%);
  }
  10% {
    transform: translate(-1%,-10%);
  }
  20% {
    transform: translate(1%,10%) scale(0.8);
  }
  30% {
    transform: translate(-3%,-10%) scale(0.8);
  }
  40% {
    transform: translate(1%,10%) scale(0.9);
  }
  50% {
    transform: translate(-1%,-10%);
  }
  60% {
    transform: translate(3%,10%);
  }
  70% {
    transform: translate(-1%,-10%) scale(0.8);
  }
  80% {
    transform: translate(1%,10%);
  }
  90% {
    transform: translate(-2%,-5%);
  }
  100% {
    transform: translate(-1%,-10%);
  }
}

@keyframes trans4 {
/*
 60% {
  transform: translate(135px, 80px);
 }
 70% {
  transform: translate(115px, 60px);
 }*/
 100% {
  transform: translate(135px, 80px);
 }
}
@keyframes floating-x4 {
  0% {
    transform: translate(1%,10%);
  }
  10% {
    transform: translate(-1%,-10%);
  }
  20% {
    transform: translate(3%,10%);
  }
  30% {
    transform: translate(-1%,-10%) scale(0.9);
  }
  40% {
    transform: translate(1%,5%);
  }
  50% {
    transform: translate(-3%,-10%);
  }
  60% {
    transform: translate(1%,10%) scale(0.9);
  }
  70% {
    transform: translate(-3%,-4%);
  }
  80% {
    transform: translate(1%,10%);
  }
  90% {
    transform: translate(-2%,-4%) scale(0.9);
  }
  100% {
    transform: translate(-1%,-10%);
  }
}

@keyframes trans5 {
/*
 60% {
  transform: translate(10px, 160px);
 }
 70% {
  transform: translate(7px, 150px);
 }*/
 100% {
  transform: translate(10px, 190px);
 }
}
@keyframes floating-x5 {
  0% {
    transform: translate(-1%,10%);
  }
  5% {
    transform: translate(-1%,-10%);
  }
  10% {
    transform: translate(2%,10%);
  }
  15% {
    transform: translate(-1%,10%) scale(0.9);
  }
  20% {
    transform: translate(-1%,10%) scale(0.9);
  }
  25% {
    transform: translate(-1%,10%) scale(0.9);
  }
  30% {
    transform: translate(1%,-0%);
  }
  40% {
    transform: translate(-2%,-10%) scale(0.9);
  }
  50% {
    transform: translate(2%,-10%);
  }
  60% {
    transform: translate(-1%,-10%);
  }
  70% {
    transform: translate(1%,-7%) scale(0.85);
  }
  80% {
    transform: translate(-2%,-8%);
  }
  90% {
    transform: translate(2%,-10%);
  }
  100% {
    transform: translate(1%,-12%);
  }
}

@keyframes trans6 {
/*
 60% {
  transform: translate(-135px, 190px);
 }
 70% {
  transform: translate(-105px, 150px);
 }*/
 100% {
  transform: translate(-135px, 230px);
 }
}
@keyframes floating-x6 {
  0% {
    transform: translate(1%,10%) scale(0.9);
  }
  10% {
    transform: translate(-2%,-7%);
  }
  20% {
    transform: translate(2%,8%);
  }
  30% {
    transform: translate(-1%,-10%) scale(0.8);
  }
  40% {
    transform: translate(1%,10%);
  }
  50% {
    transform: translate(-3%,-6%);
  }
  60% {
    transform: translate(1%,10%) scale(0.9);
  }
  70% {
    transform: translate(-2%,-7%);
  }
  80% {
    transform: translate(1%,10%);
  }
  90% {
    transform: translate(-3%,-7%);
  }
  100% {
    transform: translate(-1%,-10%);
  }
}

@keyframes trans7 {
/*
 60% {
  transform: translate(-130px, 10px);
 }
 70% {
  transform: translate(-100px, 6px);
 }*/
 100% {
  transform: translate(-130px, 10px);
 }
}
@keyframes floating-x7 {
  0% {
    transform: translate(1%,7%) scale(0.9);
  }
  10% {
    transform: translate(-2%,-10%);
  }
  20% {
    transform: translate(2%,10%);
  }
  30% {
    transform: translate(-1%,-6%);
  }
  40% {
    transform: translate(1%,10%) scale(0.9);
  }
  50% {
    transform: translate(-1%,-10%);
  }
  60% {
    transform: translate(3%,5%);
  }
  70% {
    transform: translate(-2%,-4%) scale(0.9);
  }
  80% {
    transform: translate(1%,10%);
  }
  90% {
    transform: translate(-4%,-5%);
  }
  100% {
    transform: translate(-1%,-10%) scale(0.9);
  }
}