/* --------------------------------------------------
   リクルートボタン固定
-------------------------------------------------- */

.rec_btn {
  display: inline-block;
  position: absolute;
  pointer-events: all;
  right: 0.5em;
  bottom: 0.5em;
}


.rec_btn:hover .rec_btn_img.base {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.rec_btn:hover .rec_btn_img.hand {
  rotate: 0deg;
  translate: 0 0;
}

.rec_btn_img {
  position: absolute;
}

@media screen and (max-width: 480px) {
  .rec_btn_img {
    font-size: 3vw;
  }
}

.rec_btn_img.base {
  width: 9em;
  aspect-ratio: 1/1;
  position: relative;
  filter: drop-shadow(0.35em 0.35em 1.25em rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease-in-out;
}

.rec_btn_img.rotate_txt {
  width: 8.5em;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  animation: slow_rotate 20s linear 0s infinite;
  animation-direction: normal;
  transform-origin: center;
  will-change: transform;
}

.rec_btn_img.book {
  width: 7.35em;
  aspect-ratio: 145/115;
  top: -1.7em;
  left: 50%;
  translate: -50% 0;
}

.rec_btn_img.en_txt {
  width: 5.75em;
  aspect-ratio: 115/30;
  top: 4em;
  left: 50%;
  translate: -50% 0;
}

.rec_btn_img.ja_txt_wrap {
  display: flex;
  align-items: stretch;
  gap: 0.25em;
  line-height: 1;
  top: 6em;
  left: 50%;
  translate: -50% 0;
}

.rec_btn_img.ja_txt_wrap .ja_txt {
  width: 3.5em;
  aspect-ratio: 70/15;
}

.rec_btn_img.ja_txt_wrap .arrow {
  width: 1em;
  aspect-ratio: 20/23;
  animation: rec_btn_ya 4s ease-in-out infinite;
}

.rec_btn_img.balloon {
  width: 4.5em;
  aspect-ratio: 90/75;
  top: -2.25em;
  left: -0.6em;
  animation: rec_btn_balloon 4s ease-in-out infinite;
  transform-origin: right bottom;
}

.rec_btn_img.hand {
  width: 6.5em;
  aspect-ratio: 130/70;
  left: 5.7em;
  top: -0.2em;
  rotate: 25deg;
  translate: 5em 0;
  transition: translate 0.3s ease-in-out, rotate 0.15s ease-in-out 0.15s;
}

.rec_btn_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------
   アニメーション
-------------------------------------------------- */
@keyframes rec_btn_balloon {
  0%,
  100% {
    rotate: 0;
    translate: 0 0;
  }

  25%,
  75% {
    rotate: 5deg;
    translate: 0 -0.05em;
  }

  50% {
    rotate: -5deg;
    translate: 0 0.05em;
  }
}

@keyframes rec_btn_ya {
  0%,
  50%,
  100% {
    translate: 0 0;
  }

  25%,
  75% {
    translate: 0.25em 0;
  }
}

@keyframes slow_rotate {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}