@charset "utf-8";

.obj{
  position: absolute;
  pointer-events: none;
}

.obj1{
  top:-3vw;
  left:-4vw;
  width:857px;
  width: clamp(750px, 42.85vw, 857px);
  z-index:3;
}
.obj2{
  top:-3vw;
  right:-5vw;
  width:872px;
  width: clamp(770px, 43.60vw, 872px);
  z-index:3;
}
.obj3{
  top:35vw;
  left:-3vw;
  width:489px;
  width: clamp(400px, 24.45vw, 489px);
  z-index:3;
}
.obj4{
  top:35vw;
  right:-5vw;
  width:493px;
  width: clamp(430px, 24.65vw, 493px);
  z-index:3;
}
.obj5{
  top:20vw;
  left:-1vw;
  width:300px;
  width: clamp(220px, 15.00vw, 300px);
  z-index:3;
}
.obj6{
  top:20vw;
  right:-3vw;
  width:295px;
  width: clamp(215px, 14.75vw, 295px);
  z-index:3;
}
.fl1{
  top:-5vw;
  left:35vw;
  width:225px;
  width: clamp(200px, 11.25vw, 225px);
  animation: hanabi 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.2s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl2{
  top:-10vw;
  left:5vw;
  width: 608px;
  width: clamp(560px, 30.40vw, 608px);
  animation: hanabi 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.6s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl3{
  top:-5vw;
  left:-6vw;
  width: 362px;
  width: clamp(330px, 18.10vw, 362px);
  animation: hanabi 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.4s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl4{
  top:12vw;
  left:6vw;
  width: 304px;
  width: clamp(260px, 15.20vw, 304px);
  animation: hanabi 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.7s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl5{
  top:22vw;
  left:-6vw;
  width: 499px;
  width: clamp(450px, 24.95vw, 499px);
  animation: hanabi 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.3s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl6{
  top:42vw;
  left:-2vw;
  width: 330px;
  width: clamp(290px, 16.50vw, 330px);
  animation: hanabi 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.6s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl7{
  top:-5vw;
  right:35vw;
  width:283px;
  width: clamp(260px, 14.15vw, 283px);
  animation: hanabi 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.4s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl8{
  top:-5vw;
  right:18vw;
  width:330px;
  width: clamp(300px, 16.50vw, 330px);
  animation: hanabi 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.8s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl9{
  top:-4vw;
  right:-5vw;
  width:550px;
  width: clamp(520px, 27.50vw, 550px);
  animation: hanabi 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.4s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl10{
  top:22vw;
  right:4vw;
  width:279px;
  width: clamp(250px, 13.95vw, 279px);
  animation: hanabi 2.0s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.6s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl11{
  top:30vw;
  right:-5vw;
  width:453px;
  width: clamp(420px, 22.65vw, 453px);
  animation: hanabi 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 0.8s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
.fl12{
  top:44vw;
  right:8vw;
  width:270px;
  width: clamp(240px, 13.50vw, 270px);
  animation: hanabi 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.2s;
  transform: translateZ(0);
  will-change: transform, opacity;
  z-index:2;
}
@keyframes hanabi {
  0%   { opacity: 0;   transform: scale(0); }
  10%  { opacity: 1;   transform: scale(0.2); }
  60%  { opacity: 1;   transform: scale(1); }
  80%  { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1); }
}

@media screen and (max-width:1480px) {
  .obj1{
    top:-3vw;
    left:-4vw;
    width: clamp(600px, 50.68vw, 750px);
  }
  .obj2{
    top:-3vw;
    right:-5vw;
    width: clamp(620px, 52.03vw, 770px);
  }
  .obj3{
    top:45vw;
    left:-3vw;
    width: clamp(400px, 24.45vw, 489px);
  }
  .obj4{
    top:45vw;
    right:-5vw;
    width: clamp(430px, 24.65vw, 493px);
  }
  .obj5{
    top:25vw;
    left:-1vw;
    width: clamp(190px, 14.86vw, 220px);
  }
  .obj6{
    top:27vw;
    right:-3vw;
    width: clamp(190px, 14.53vw, 215px);
  }
  .fl4{
    top:15vw;
  }
  .fl5{
    top:26vw;
  }
  .fl6{
    top:50vw;
  }
  .fl10{
    top:26vw;
  }
  .fl11{
    top:38vw;
  }
  .fl12{
    top:52vw;
    right:6vw;
  }
}
@media screen and (max-width:1180px) {
  .obj1{
    top:-3vw;
    left:-4vw;
    width: clamp(420px, 44.07vw, 520px);
  }
  .obj2{
    top:-3vw;
    right:-5vw;
    width: clamp(420px, 44.92vw, 530px);
  }
  .obj3{
    top:50vw;
    left:-3vw;
    width: clamp(200px, 25.42vw, 300px);
  }
  .obj4{
    top:50vw;
    right:-5vw;
    width: clamp(220px, 27.12vw, 320px);
  }
  .obj5{
    top:25vw;
    left:-1vw;
    width: clamp(110px, 13.56vw, 160px);
  }
  .obj6{
    top:31vw;
    right:-3vw;
    width: clamp(120px, 14.41vw, 170px);
  }
  .fl1{
    top:-5vw;
    left:32vw;
    width: clamp(130px, 14.41vw, 170px);
  }
  .fl2{
    top:-10vw;
    left:5vw;
    width: clamp(390px, 38.98vw, 460px);
  }
  .fl3{
    top:-5vw;
    left:-8vw;
    width: clamp(220px, 23.73vw, 280px);
  }
  .fl4{
    top:18vw;
    left:4vw;
    width: clamp(180px, 17.80vw, 210px);
  }
  .fl5{
    top:31vw;
    left:-6vw;
    width: clamp(290px, 31.36vw, 370px);
  }
  .fl6{
    top:60vw;
    left:-8vw;
    width: clamp(160px, 17.80vw, 210px);
  }
  .fl7{
    top:-5vw;
    right:31vw;
    width: clamp(160px, 17.80vw, 210px);
  }
  .fl8{
    top:-3vw;
    right:16vw;
    width: clamp(190px, 19.49vw, 230px);
  }
  .fl9{
    top:-7vw;
    right:-8vw;
    width: clamp(300px, 33.05vw, 390px);
  }
  .fl10{
    top:22vw;
    right:-2vw;
    width: clamp(250px, 13.95vw, 279px);
  }
  .fl11{
    top:40vw;
    right:-5vw;
    width: clamp(210px, 23.73vw, 280px);
  }
  .fl12{
    top:59vw;
    right:-5vw;
    width: clamp(110px, 15.25vw, 180px);
  }
}
@media screen and (max-width:780px) {
  .obj1{
    top:-3vw;
    left:-4vw;
    width: clamp(260px, 41.03vw, 320px);
  }
  .obj2{
    top:-3vw;
    right:-5vw;
    width: clamp(260px, 41.03vw, 320px);
  }
  .fl5{
    top:51vw;
    left:-6vw;
    width: clamp(290px, 31.36vw, 370px);
  }
  .fl6{
    top:80vw;
    left:-8vw;
    width: clamp(160px, 17.80vw, 210px);
  }
  .fl11{
    top:55vw;
    right:-5vw;
    width: clamp(210px, 23.73vw, 280px);
  }
  .fl12{
    top:79vw;
    right:-5vw;
    width: clamp(110px, 15.25vw, 180px);
  }
}
@media screen and (max-width:500px) {
  .obj1{
    top:-3vw;
    left:-4vw;
    width: clamp(150px, 36.00vw, 180px);
  }
  .obj2{
    top:-3vw;
    right:-5vw;
    width: clamp(150px, 36.00vw, 180px);
  }
  .obj3{
    top:55vw;
    left:-3vw;
    width: clamp(120px, 36.00vw, 180px);
  }
  .obj4{
    top:55vw;
    right:-5vw;
    width: clamp(120px, 36.00vw, 180px);
  }
  .obj5{
    top:25vw;
    left:-1vw;
    width: clamp(70px, 16.00vw, 80px);
  }
  .obj6{
    top:31vw;
    right:-3vw;
    width: clamp(70px, 16.00vw, 80px);
  }
  .fl1{
    top:-5vw;
    left:32vw;
    width: clamp(70px, 16.00vw, 80px);
  }
  .fl2{
    top:-10vw;
    left:5vw;
    width: clamp(120px, 36.00vw, 180px);
  }
  .fl3{
    top:-5vw;
    left:-8vw;
    width: clamp(80px, 20.00vw, 100px);
  }
  .fl4{
    top:22vw;
    left:-4vw;
    width: clamp(180px, 17.80vw, 210px);
  }
  .fl5{
    top:56vw;
    left:-6vw;
    width: clamp(100px, 30.00vw, 150px);
  }
  .fl6{
    top:90vw;
    left:-2vw;
    width: clamp(60px, 16.00vw, 80px);
  }
  .fl8{
    top:-3vw;
    right:26vw;
    width: clamp(80px, 20.00vw, 100px);
  }
  .fl9{
    top:-7vw;
    right:-8vw;
    width: clamp(120px, 36.00vw, 180px);
  }
  .fl10{
    top:40vw;
    right:-4vw;
    width: clamp(80px, 20.00vw, 100px);
  }
  .fl11{
    top:70vw;
    right:-5vw;
    width: clamp(100px, 26.00vw, 130px);
  }
  .fl12{
    top:97vw;
    right:-5vw;
    width: clamp(80px, 18.00vw, 90px);
  }
}
@media screen and (max-width:320px) {
  .obj5{
    top:25vw;
    left:-1vw;
    width: clamp(40px, 16.00vw, 50px);
  }
  .obj6{
    top:31vw;
    right:-3vw;
    width: clamp(40px, 16.00vw, 50px);
  }
}