@charset "UTF-8";

@keyframes fuwafuwa {
  0% {
    transform: translate(8px, 0);
  }

  100% {
    transform: translate(0, 8px);
  }
}

.top-detail__icons {
  position: absolute;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.top-detail__icon img {
  /* opacity: 0;
  transform: translateY(100%);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.43, 0.05, 0.17, 1);
  transition-duration: 6.2s; */
}

@media screen and (max-width: 768px) {
  .top-detail__icon img {
  }
}

.top-detail__icon.is-fire {
  /* animation: 2.4s ease-in-out fuwafuwa infinite alternate; */
}
.top-detail__icon.-type-1,
.top-detail__icon.-type-5,
.top-detail__icon.-type-7 {
  transition-duration: 3.8s;
  animation-duration: 1.8s;
}
.top-detail__icon.-type-3,
.top-detail__icon.-type-4,
.top-detail__icon.-type-6 {
  transition-duration: 3.0s;
  animation-duration: 2s;
},
.top-detail__icon.-type-8 {
  transition-duration: 2s;
}
.top-detail__icon.is-fire img {
  opacity: 1;
  transform: translateY(0);
}
.top-detail__icon {
  position: absolute;
}
@media screen and (min-width: 769px) {
  .top-detail__icon.-type-1 {
    width: 413px;
    left: calc(50% + 324px);
    top: 70px;
  }
  .top-detail__icon.-type-2 {
    width: 347px;
    top: 390px;
    left: calc(50% + 530px);
  }
  .top-detail__icon.-type-3 {
    width: 249px;
    top: 280px;
    left: calc(50% - 660px);
  }
  .top-detail__icon.-type-4 {
    width: 316px;
    top: 1562px;
    left: calc(50% + 470px);
  }
  .top-detail__icon.-type-5 {
    width: 351px;
    top: 1420px;
    left: calc(50% - 630px);
  }
  .top-detail__icon.-type-6 {
    width: 238px;
    top: 1710px;
    left: calc(50% - 500px);
  }
  .top-detail__icon.-type-7 {
    width: 316px;
    top: 2430px;
    left: calc(50% - 676px);
  }
  .top-detail__icon.-type-8 {
    width: 182px;
    top: 2560px;
    left: calc(50% + 450px);
  }
}

@media screen and (max-width: 768px) {
  .top-detail__icon.-type-1 {
    width: calc(295 / 2 * 1px);
    left: calc(50% + 170px * .5);
    top: 270px;
  }
  .top-detail__icon.-type-2 {
    width: calc(295 / 2 * 1px);
    left: calc(50% - 505px * .5);
    top: 320px;
  }
  .top-detail__icon.-type-3 {
    width: calc(249 / 2 * 1px);
    top: 1080px;
    left: calc(50% + 165px * .5);
  }
  .top-detail__icon.-type-4 {
    width: calc(242 / 2 * 1px);
    bottom: calc(-30 / 750 * 100vw);
    left: calc(50% - 440px * .5);
  }
  .top-detail__icon.-type-5 {
    width: calc(180 / 2 * 1px);
    bottom: calc(-50 / 750 * 100vw);
    left: 50%;
  }
  .top-detail__icon.-type-6 {
    width: calc(242 / 2 * 1px);
    bottom: calc(50 / 750 * 100vw);
    left: calc(50% + 120px * .5);
  }
  .top-detail__icon.-type-7,
  .top-detail__icon.-type-8 {
    display: none;
  }
}