.fadeIn {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.fadeInUp {
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.opacity {
  opacity: 0;
  animation: opacity 1s ease-out forwards;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.--delay-1 {
  animation-delay: 1s !important;
}

.--delay-1-25 {
  animation-delay: 1.25s !important;
}

.--delay-2 {
  animation-delay: 2s !important;
}
.--delay-2-25 {
  animation-delay: 2.25s !important;
}

.--delay-2-5 {
  animation-delay: 2.5s !important;
}

.--delay-3-5 {
  animation-delay: 3.5s !important;
}

.--delay-4 {
  animation-delay: 4s !important;
}

.--delay-5 {
  animation-delay: 5s !important;
}

.puff-in-center {
  -webkit-animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715)
    both;
  animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-3-5 22:22:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 星型の要素 */
.star {
  background-image: url("/assets/dinosaurs/star-8f045c06.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  animation: starTwinkle 2s ease-in-out infinite;
  width: 64px;
  height: 64px;
  opacity: 0;
  z-index: 500;
}

@keyframes starTwinkle {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(2) rotate(360deg);
  }
}

.star.--dummy {
  opacity: 0.8;
  animation: none;
}

.star.--position-0 {
  width: calc(24px * 2.72);
  height: calc(24px * 2.72);
  top: calc(0px * 2.72);
  left: calc(0px * 2.72);
}

.star.--position-1 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(21px * 2.72);
  left: calc(95px * 2.72);
}

.star.--position-2 {
  width: calc(24px * 2.72);
  height: calc(24px * 2.72);
  top: calc(0px * 2.72);
  left: calc(181px * 2.72);
}

.star.--position-3 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(21px * 2.72);
  left: calc(267px * 2.72);
}

.star.--position-4 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(59px * 2.72);
  left: calc(9px * 2.72);
}

.star.--position-5 {
  width: calc(24px * 2.72);
  height: calc(24px * 2.72);
  top: calc(50px * 2.72);
  left: calc(273px * 2.72);
}

.star.--position-6 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(129px * 2.72);
  left: calc(9px * 2.72);
}

.star.--position-7 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(119px * 2.72);
  left: calc(299px * 2.72);
}

.star.--position-8 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(206px * 2.72);
  left: calc(9px * 2.72);
}

.star.--position-9 {
  width: calc(24px * 2.72);
  height: calc(24px * 2.72);
  top: calc(177px * 2.72);
  left: calc(289px * 2.72);
}

.star.--position-10 {
  width: calc(24px * 2.72);
  height: calc(24px * 2.72);
  top: calc(264px * 2.72);
  left: calc(0px * 2.72);
}

.star.--position-11 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(244px * 2.72);
  left: calc(54px * 2.72);
}

.star.--position-12 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(276px * 2.72);
  left: calc(149px * 2.72);
}

.star.--position-13 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(251px * 2.72);
  left: calc(189px * 2.72);
}

.star.--position-14 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(248px * 2.72);
  left: calc(273px * 2.72);
}

.star.--position-15 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(296px * 2.72);
  left: calc(299px * 2.72);
}

.star.--position-16 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(342px * 2.72);
  left: calc(9px * 2.72);
}

.star.--position-17 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(359px * 2.72);
  left: calc(41px * 2.72);
}

.star.--position-18 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(337px * 2.72);
  left: calc(133px * 2.72);
}

.star.--position-19 {
  width: calc(24px * 2.72);
  height: calc(24px * 2.72);
  top: calc(326px * 2.72);
  left: calc(273px * 2.72);
}

@media only screen and (max-width: 768px) {
  .star.--position-0 {
    width: 24px;
    height: 24px;
    top: 0;
    left: 0;
  }

  .star.--position-1 {
    width: 16px;
    height: 16px;
    top: 21px;
    left: 95px;
  }

  .star.--position-2 {
    width: 24px;
    height: 24px;
    top: 0px;
    left: 181px;
  }

  .star.--position-3 {
    width: 16px;
    height: 16px;
    top: 21px;
    left: 267px;
  }

  .star.--position-4 {
    width: 16px;
    height: 16px;
    top: 59px;
    left: 9px;
  }

  .star.--position-5 {
    width: 24px;
    height: 24px;
    top: 50px;
    left: 273px;
  }

  .star.--position-6 {
    width: 16px;
    height: 16px;
    top: 129px;
    left: 9px;
  }

  .star.--position-7 {
    width: 16px;
    height: 16px;
    top: 119px;
    left: 299px;
  }

  .star.--position-8 {
    width: 16px;
    height: 16px;
    top: 206px;
    left: 9px;
  }

  .star.--position-9 {
    width: 24px;
    height: 24px;
    top: 177px;
    left: 289px;
  }

  .star.--position-10 {
    width: 24px;
    height: 24px;
    top: 264px;
    left: 0px;
  }

  .star.--position-11 {
    width: 16px;
    height: 16px;
    top: 244px;
    left: 54px;
  }

  .star.--position-12 {
    width: 16px;
    height: 16px;
    top: 276px;
    left: 149px;
  }

  .star.--position-13 {
    width: 16px;
    height: 16px;
    top: 251px;
    left: 189px;
  }

  .star.--position-14 {
    width: 16px;
    height: 16px;
    top: 248px;
    left: 273px;
  }

  .star.--position-15 {
    width: 16px;
    height: 16px;
    top: 296px;
    left: 299px;
  }

  .star.--position-16 {
    width: 16px;
    height: 16px;
    top: 342px;
    left: 9px;
  }

  .star.--position-17 {
    width: 16px;
    height: 16px;
    top: 359px;
    left: 41px;
  }

  .star.--position-18 {
    width: 16px;
    height: 16px;
    top: 337px;
    left: 133px;
  }

  .star.--position-19 {
    width: 24px;
    height: 24px;
    top: 326px;
    left: 273px;
  }
}

.star_2 {
  background-image: url("/assets/dinosaurs/star_2-ae384671.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  animation: starTwinkle2 3s ease-in-out infinite;
  width: 64px;
  height: 64px;
  opacity: 0;
  z-index: 500;
}

@keyframes starTwinkle2 {
  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.4);
  }
}

.star_2.--dummy {
  opacity: 0.8;
  animation: none;
}

.star_2.--position-0 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: 0;
  left: 0;
}

.star_2.--position-1 {
  width: calc(16px * 2.72);
  height: calc(16p * 2.72) x;
  top: calc(21px * 2.72);
  left: calc(95px * 2.72);
}

.star_2.--position-2 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(0px * 2.72);
  left: calc(181px * 2.72);
}

.star_2.--position-3 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(21px * 2.72);
  left: calc(267px * 2.72);
}

.star_2.--position-4 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(59px * 2.72);
  left: calc(9px * 2.72);
}

.star_2.--position-5 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(50px * 2.72);
  left: calc(273px * 2.72);
}

.star_2.--position-6 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(129px * 2.72);
  left: calc(9px * 2.72);
}

.star_2.--position-7 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(119px * 2.72);
  left: calc(299px * 2.72);
}

.star_2.--position-8 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(206px * 2.72);
  left: calc(9px * 2.72);
}

.star_2.--position-9 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(177px * 2.72);
  left: calc(289px * 2.72);
}

.star_2.--position-10 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(264px * 2.72);
  left: calc(0px * 2.72);
}

.star_2.--position-11 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(244px * 2.72);
  left: calc(54px * 2.72);
}

.star_2.--position-12 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(276px * 2.72);
  left: calc(149px * 2.72);
}

.star_2.--position-13 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(251px * 2.72);
  left: calc(189px * 2.72);
}

.star_2.--position-14 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(248px * 2.72);
  left: calc(273px * 2.72);
}

.star_2.--position-15 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(296px * 2.72);
  left: calc(299px * 2.72);
}

.star_2.--position-16 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(342px * 2.72);
  left: calc(9px * 2.72);
}

.star_2.--position-17 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(359px * 2.72);
  left: calc(41px * 2.72);
}

.star_2.--position-18 {
  width: calc(16px * 2.72);
  height: calc(16px * 2.72);
  top: calc(337px * 2.72);
  left: calc(133px * 2.72);
}

.star_2.--position-19 {
  width: calc(32px * 2.72);
  height: calc(32px * 2.72);
  top: calc(326px * 2.72);
  left: calc(273px * 2.72);
}

@media only screen and (max-width: 768px) {
  .star_2.--position-0 {
    width: 32px;
    top: 0;
    left: 0;
  }

  .star_2.--position-1 {
    width: 16px;
    top: 21px;
    left: 95px;
  }

  .star_2.--position-2 {
    width: 32px;
    top: 0px;
    left: 181px;
  }

  .star_2.--position-3 {
    width: 32px;
    top: 21px;
    left: 267px;
  }

  .star_2.--position-4 {
    width: 16px;
    top: 59px;
    left: 9px;
  }

  .star_2.--position-5 {
    width: 32px;
    top: 50px;
    left: 273px;
  }

  .star_2.--position-6 {
    width: 32px;
    top: 129px;
    left: 9px;
  }

  .star_2.--position-7 {
    width: 16px;
    top: 119px;
    left: 299px;
  }

  .star_2.--position-8 {
    width: 32px;
    top: 206px;
    left: 9px;
  }

  .star_2.--position-9 {
    width: 32px;
    top: 177px;
    left: auto;
    right: 18px;
  }

  .star_2.--position-10 {
    width: 32px;
    top: 264px;
    left: 0px;
  }

  .star_2.--position-11 {
    width: 16px;
    top: 244px;
    left: 54px;
  }

  .star_2.--position-12 {
    width: 32px;
    top: 276px;
    left: 149px;
  }

  .star_2.--position-13 {
    width: 32px;
    top: 251px;
    left: 189px;
  }

  .star_2.--position-14 {
    width: 32px;
    top: 248px;
    left: 273px;
  }

  .star_2.--position-15 {
    width: 16px;
    top: 296px;
    left: 299px;
  }

  .star_2.--position-16 {
    width: 32px;
    top: 342px;
    left: 9px;
  }

  .star_2.--position-17 {
    width: 32px;
    top: 359px;
    left: 41px;
  }

  .star_2.--position-18 {
    width: 16px;
    top: 337px;
    left: 133px;
  }

  .star_2.--position-19 {
    width: 32px;
    top: 326px;
    left: auto;
    right: 7px;
  }
}

.bg_star {
  background-image: url("/assets/dinosaurs/bg_star-ecdfd96c.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 500;
  animation: bgStarAnimation 2s ease-in-out forwards;
}

.bg_dinosaur {
  background-image: url("/assets/dinosaurs/bg_dinosaur-df3808bc.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 500;
  animation: bgStarAnimation 2s ease-in-out forwards;
}

@keyframes bgStarAnimation {
  0% {
    opacity: 0;
    transform: scale(0.01) rotate(0deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(10) rotate(360deg);
    z-index: -1;
  }
}

.sparkleAnimation {
  animation: sparkleAnimation 2s ease-in-out forwards;
  opacity: 0;
}
@keyframes sparkleAnimation {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(10);
  }
}

.hissatsu_wrapper {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 900;
}

.dinosaur_skill-box {
  margin: auto;
  position: absolute;
  top: calc(50vh + 120px);
  left: 0;
  right: auto;
  z-index: 20;
  width: 100%;
  z-index: 600;
}

@media only screen and (max-width: 768px) {
  .dinosaur_skill-box {
    margin: auto;
    position: absolute;
    top: calc(50vh - 120px);
    left: 0;
    right: auto;
    z-index: 20;
    width: 100%;
    z-index: 600;
  }
}

.dinosaur_skill-box > .skill {
  margin: 0;
  padding: 0;
  width: 140vw;
  text-align: center;
  background: linear-gradient(to right, #16222a, #3a6073);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-4deg) translate(-50%, -50%);
}

/* https://gradient.page/ui-gradients/flare */
.dinosaur_skill-box > .skill.--fire {
  background: linear-gradient(to right, #f12711, #f5af19);
}
.dinosaur_skill-box > .skill > .line1.--fire {
  position: absolute;
  top: -1vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #f12711, #f5af19);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line2.--fire {
  position: absolute;
  top: -2vh;
  right: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #f12711, #f5af19);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line3.--fire {
  position: absolute;
  top: -3vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #f12711, #f5af19);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .line4.--fire {
  position: absolute;
  bottom: -1vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #f12711, #f5af19);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line5.--fire {
  position: absolute;
  bottom: -2vh;
  right: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #f12711, #f5af19);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line6.--fire {
  position: absolute;
  bottom: -3vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #f12711, #f5af19);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* https://gradient.page/ui-gradients/aqua-marine */
.dinosaur_skill-box > .skill.--water {
  background: linear-gradient(to right, #1a2980, #26d0ce);
}
.dinosaur_skill-box > .skill > .line1.--water {
  position: absolute;
  top: -1vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #1a2980, #26d0ce);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line2.--water {
  position: absolute;
  top: -2vh;
  right: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #1a2980, #26d0ce);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line3.--water {
  position: absolute;
  top: -3vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #1a2980, #26d0ce);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .line4.--water {
  position: absolute;
  bottom: -1vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #1a2980, #26d0ce);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line5.--water {
  position: absolute;
  bottom: -2vh;
  right: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #1a2980, #26d0ce);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line6.--water {
  position: absolute;
  bottom: -3vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #1a2980, #26d0ce);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* https://gradient.page/ui-gradients/juicy-orange */
.dinosaur_skill-box > .skill.--thunder {
  background: linear-gradient(to right, #ff8008, #ffc837);
}
.dinosaur_skill-box > .skill > .line1.--thunder {
  position: absolute;
  top: -1vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #ff8008, #ffc837);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line2.--thunder {
  position: absolute;
  top: -2vh;
  right: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #ff8008, #ffc837);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line3.--thunder {
  position: absolute;
  top: -3vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #ff8008, #ffc837);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .line4.--thunder {
  position: absolute;
  bottom: -1vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #ff8008, #ffc837);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line5.--thunder {
  position: absolute;
  bottom: -2vh;
  right: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #ff8008, #ffc837);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line6.--thunder {
  position: absolute;
  bottom: -3vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #ff8008, #ffc837);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* https://gradient.page/ui-gradients/cool-brown */
.dinosaur_skill-box > .skill.--ground {
  background: linear-gradient(to right, #603813, #b29f94);
}

.dinosaur_skill-box > .skill > .line1.--ground {
  position: absolute;
  top: -1vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #603813, #b29f94);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line2.--ground {
  position: absolute;
  top: -2vh;
  right: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #603813, #b29f94);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line3.--ground {
  position: absolute;
  top: -3vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #603813, #b29f94);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .line4.--ground {
  position: absolute;
  bottom: -1vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #603813, #b29f94);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line5.--ground {
  position: absolute;
  bottom: -2vh;
  right: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #603813, #b29f94);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line6.--ground {
  position: absolute;
  bottom: -3vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #603813, #b29f94);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* https://gradient.page/ui-gradients/young-grass */
.dinosaur_skill-box > .skill.--grass {
  background: linear-gradient(to right, #9be15d, #00e3ae);
}

.dinosaur_skill-box > .skill > .line1.--grass {
  position: absolute;
  top: -1vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #9be15d, #00e3ae);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line2.--grass {
  position: absolute;
  top: -2vh;
  right: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #9be15d, #00e3ae);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line3.--grass {
  position: absolute;
  top: -3vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #9be15d, #00e3ae);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .line4.--grass {
  position: absolute;
  bottom: -1vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #9be15d, #00e3ae);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line5.--grass {
  position: absolute;
  bottom: -2vh;
  right: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #9be15d, #00e3ae);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line6.--grass {
  position: absolute;
  bottom: -3vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #9be15d, #00e3ae);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* https://gradient.page/ui-gradients/skyline */
.dinosaur_skill-box > .skill.--sky {
  background: linear-gradient(to right, #1488cc, #2b32b2);
}

.dinosaur_skill-box > .skill > .line1.--sky {
  position: absolute;
  top: -1vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line2.--sky {
  position: absolute;
  top: -2vh;
  right: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line3.--sky {
  position: absolute;
  top: -3vh;
  left: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .line4.--sky {
  position: absolute;
  bottom: -1vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line5.--sky {
  position: absolute;
  bottom: -2vh;
  right: 0;
  width: 50vw;
  height: 2px;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
.dinosaur_skill-box > .skill > .line6.--sky {
  position: absolute;
  bottom: -3vh;
  left: 0;
  width: 75vw;
  height: 2px;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.dinosaur_skill-box > .skill > .flame {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  /* font-size: 32px;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 900;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}

@media only screen and (max-width: 768px) {
  .dinosaur_skill-box > .skill > .flame {
    max-width: 80vw;
  }
}

.skillMove {
  opacity: 0;
  animation: skillMove 1.5s ease-out forwards;
}
@keyframes skillMove {
  0% {
    /* translate: 100vw -40vh; */
    left: 150vw;
    opacity: 0;
  }
  5% {
    left: 0;
    opacity: 1;
  }
  95% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: -150vw;
    opacity: 0;
  }
}

.skillInnerMove {
  display: block;
  opacity: 0;
  animation: skillInnerMove 1.5s ease-out forwards;
}
@keyframes skillInnerMove {
  0% {
    /* translate: 100vw -40vh; */
    translate: 100vw;
    opacity: 0;
  }
  20% {
    translate: 20px;
    opacity: 1;
  }
  80% {
    translate: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: -100vw;
  }
}

.hissatsu {
  margin: auto;
  position: absolute;
  top: calc(50vh - 30px);
  left: 0;
  right: 0;
  z-index: 610;
}

.hissatsuMove {
  opacity: 0;
  animation: hissatsuMove 1.5s ease-out forwards;
}
.hissatsuMove > .image {
  margin: auto;
}
@keyframes hissatsuMove {
  0% {
    translate: 100vw -40vh;
    opacity: 0;
  }
  20% {
    translate: 5px -40vh;
    opacity: 1;
  }
  80% {
    translate: -5px -40vh;
    opacity: 1;
  }
  100% {
    translate: -100vw -40vh;
    opacity: 0;
  }
}

.hissatsu_remove {
  animation: hissatsuMove 0.1s ease-out forwards;
}

.dinosaur__skill-icons-box {
  position: absolute;
  top: 0;
  left: 200vw;
  z-index: 500;
  animation: skillIconMove 2s ease-out forwards;
}

.dinosaur__skill-icons-box > .icon-box {
  margin: auto;
  width: 88px;
  height: 88px;
  position: absolute;
  top: 0;
  left: 0;
  animation: skillIconInnerMove 0.5s ease-out infinite alternate;
}

.dinosaur__skill-icons-box > .image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes skillIconMove {
  0% {
    /* translate: 100vw -40vh; */
    top: 0vh;
    left: 200vw;
    opacity: 0;
  }
  5% {
    top: 0vh;
    left: 200vw;
    opacity: 1;
  }
  95% {
    top: 10vh;
    left: -200vw;
    opacity: 1;
  }
  100% {
    top: 10vh;
    left: -200vw;
    opacity: 0;
  }
}

@keyframes skillIconInnerMove {
  0% {
    transform: translateX(100px);
    transform: translateY(100px);
  }
  100% {
    transform: translateX(-100px);
    transform: translateY(-100px);
  }
}