.hp_hidden {
  display: none !important;
}

.fade-up {
  opacity: 0;
}

.copy-animation>span {
  display: block;
  transform: translate3d(0, 100%, 0) skewY(12deg);
  transform-origin: left;
}

/* トップコピーアニメーション */
.copy-animation {
  overflow: hidden;
}

.animationAppear .copy-animation>span {
  animation: titleFadeUp 0.8s ease-in-out forwards;
}

.animationAppear .copy-animation2>span {
  animation-delay: 0.2s;
}

.animationAppear .copy-animation3>span {
  animation-delay: 0.4s;
}

@keyframes titleFadeUp {
  0% {
    transform: translate3d(0, 100%, 0) skewY(12deg);
  }

  100% {
    transform: translate3d(0, 0, 0) skewY(0);
  }
}

/* フェードアップ */

.fade-up.animationAppear {
  animation: fadeUp .8s forwards;
}

.p-top_fv-text .fade-up.animationAppear {
  animation-delay: 1s;
}

.p-top_fv-img.fade-up.animationAppear {
  animation-delay: 1.2s;
}

.p-top_about .fade-up.animationAppear {
  animation-delay: 0.8s;
}

.p-company_table.fade-up.animationAppear {
  animation-delay: 0.4s;
}

.p-contact_form.animationTrigger.fade-up {
  animation-delay: 0.4s;
}

@keyframes fadeUp {
  0% {
    position: relative;
    bottom: -20px;
    opacity: 0;
  }

  100% {
    position: relative;
    bottom: 0px;
    opacity: 1;
  }
}

.bl_contact.animationAppear h2::before {
  left: 8%;
}

/* KV背景アニメーション */
.bl_ellipse {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.moveUp {
  animation-name: moveUp;
}

.moveUp.rotate {
  animation-name: moveUpRotate;
}

.moveUp.rotate-r {
  animation-name: moveUpRotate-r;
}

.moveUpRight {
  animation-name: moveUpRight;
}

.moveUpRight.rotate {
  animation-name: moveUpRightRotate;
}

.moveUpRight.rotate-r {
  animation-name: moveUpRightRotate-r;
}

.moveUpLeft {
  animation-name: moveUpLeft;
}

.moveUpLeft.rotate {
  animation-name: moveUpLeftRotate;
}

.moveUpLeft.rotate-r {
  animation-name: moveUpLeftRotate-r;
}

.bl_ellipse.size-2 {
  animation-duration: 5s;
}

.bl_ellipse.size-1 {
  animation-duration: 6s;
}

@keyframes moveUp {
  0% {
    transform: translatex(0px) translatey(0px);
  }

  50% {
    transform: translatex(0px) translatey(-10px);
  }

  100% {
    transform: translatex(0px) translatey(0px);
  }
}

@keyframes moveUpRotate {
  0% {
    transform: rotate(30deg) translatex(0px) translatey(0px);
  }

  50% {
    transform: rotate(30deg) translatex(0px) translatey(-10px);
  }

  100% {
    transform: rotate(30deg) translatex(0px) translatey(0px);
  }
}


@keyframes moveUpRotate-r {
  0% {
    transform: rotate(-30deg) translatex(0px) translatey(0px);
  }

  50% {
    transform: rotate(-30deg) translatex(0px) translatey(-10px);
  }

  100% {
    transform: rotate(-30deg) translatex(0px) translatey(0px);
  }
}

@keyframes moveUpLeft {
  0% {
    transform: translatex(0px) translatey(0px);
  }

  50% {
    transform: translatex(-10px) translatey(-10px);
  }

  100% {
    transform: translatex(0px) translatey(0px);
  }
}

@keyframes moveUpLeftRotate {
  0% {
    transform: rotate(30deg) translatex(0px) translatey(0px);
  }

  50% {
    transform: rotate(30deg) translatex(-10px) translatey(-10px);
  }

  100% {
    transform: rotate(30deg) translatex(0px) translatey(0px);
  }
}


@keyframes moveUpLeftRotate-r {
  0% {
    transform: rotate(-30deg) translatex(0px) translatey(0px);
  }

  50% {
    transform: rotate(-30deg) translatex(-10px) translatey(-10px);
  }

  100% {
    transform: rotate(-30deg) translatex(0px) translatey(0px);
  }
}

@keyframes moveUpRight {
  0% {
    transform: translatex(0px) translatey(0px);
  }

  50% {
    transform: translatex(10px) translatey(-10px);
  }

  100% {
    transform: translatex(0px) translatey(0px);
  }
}


@keyframes moveUpRightRotate {
  0% {
    transform: rotate(30deg) translatex(0px) translatey(0px);
  }

  50% {
    transform: rotate(30deg) translatex(10px) translatey(-10px);
  }

  100% {
    transform: rotate(30deg) translatex(0px) translatey(0px);
  }
}


@keyframes moveUpRightRotate-r {
  0% {
    transform: rotate(-30deg) translatex(0px) translatey(0px);
  }

  50% {
    transform: rotate(-30deg) translatex(10px) translatey(-10px);
  }

  100% {
    transform: rotate(-30deg) translatex(0px) translatey(0px);
  }
}



.el_circle {
  animation: KVcircle 10s linear infinite;
  /* mix-blend-mode: multiply;
  -webkit-mix-blend-mode: multiply; */
  transform-origin: center 70%;
}

@keyframes KVcircle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* スクロールバー */
.el_scroll-bar::after {
  animation: scroll 2s ease-in-out infinite;
}

@keyframes scroll {
  0% {
    top: 0;
  }

  20% {
    top: 0;
  }

  60% {
    top: 80px;
    opacity: 1;
  }

  100% {
    top: 80px;
    opacity: 0;
  }
}

/* ハートアニメーション */
@-webkit-keyframes heart {
  0% {
    transform: rotate(-20deg) translateY(20px) scale(1);
    opacity: 0;
  }

  25% {
    transform: rotate(-20deg) translateY(0px) scale(1.5);
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: rotate(20deg) translateY(-50px) translateX(-15px) scale(0.8);
    opacity: 0;
  }
}

@keyframes heart {
  0% {
    transform: rotate(-20deg) translateY(20px) scale(1);
    opacity: 0;
  }

  25% {
    transform: rotate(-20deg) translateY(0px) scale(1.5);
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: rotate(20deg) translateY(-50px) translateX(-15px) scale(0.8);
    opacity: 0;
  }
}

@-webkit-keyframes heart2 {
  0% {
    transform: rotate(20deg) translateY(20px) scale(1);
    opacity: 0;
  }

  25% {
    transform: rotate(20deg) translateY(0px) scale(1.5);
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: rotate(-20deg) translateY(-50px) translateX(5px) scale(0.8);
    opacity: 0;
  }
}

@keyframes heart2 {
  0% {
    transform: rotate(20deg) translateY(20px) scale(1);
    opacity: 0;
  }

  25% {
    transform: rotate(20deg) translateY(0px) scale(1.5);
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: rotate(-20deg) translateY(-50px) translateX(5px) scale(0.8);
    opacity: 0;
  }
}

/* 背景色切り替わりアニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bg_c-animation::before {
  content: "";
  display: block;
  width: 100vw;
  height: calc(100% + 160px);
  background-color: transparent;
  position: absolute;
  top: -160px;
  left: calc((100% - 100vw) / 2);
  mix-blend-mode: multiply;
  -webkit-mix-blend-mode: multiply;
  transform: translate3d(0, 0, 0);
  transition: background 0.65s cubic-bezier(0.18, 0.06, 0.23, 1);
}

@media screen and (max-width: 1024px) {
  .bg_c-animation::before {
    height: calc(100% + 126px);
    top: -126px;
  }
}

@media screen and (max-width: 650px) {
  .bg_c-animation::before {
    height: calc(100% + 50px);
    top: -50px;
  }
}

.bg_c-animation:has(>.animationAppear).bg_c-animation::before {
  background-color: var(--c-black);
}

.c-entry__content:has(>.bg_c-animation>.animationAppear).c-entry__content>.bl_bg-graphic.position-fixed {
  animation: fadeIn 1.5s ease-in-out forwards;
}

.bg_c-animation h2,
.bg_c-animation p {
  transition: color 0.65s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.bg_c-animation:has(>.animationAppear).bg_c-animation h2,
.bg_c-animation:has(>.animationAppear).bg_c-animation p {
  color: #fff;
}


.bg_c-animation:has(>.p-recruit_business.animationAppear).p-recruit_business-joblist.bg_c-animation::before {
  background-color: var(--c-lightGray);
}

.bg_c-animation:has(>.p-recruit_joblist.animationAppear).p-recruit_business-joblist.bg_c-animation::before {
  background-color: var(--c-black);
}

.bg_c-animation:has(>.p-recruit_joblist.animationAppear).bg_c-animation .p-recruit_business_body h3::before {
  background-color: var(--c-lightGray);
}

.p-recruit_business-joblist h2,
.p-recruit_business-joblist p {
  color: var(--c-black) !important;
}

.bg_c-animation:has(>.p-recruit_joblist.animationAppear) h2,
.bg_c-animation:has(>.p-recruit_joblist.animationAppear) p {
  color: #fff !important;
}

.bg_c-animation:has(>.p-recruit_joblist.animationAppear).bg_c-animation .p-recruit_business_body h3::after {
  color: var(--c-black);
}

/* 自動スライドアニメーション */
.slide-animation {
  animation: loop-slide 30s infinite linear 0s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-3800px);
  }
}

@media screen and (max-width: 650px) {
  .slide-animation {
    animation-duration: 30s;
  }

  @keyframes loop-slide {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-1540px);
    }
  }
}

.p-recruit_message_img .slide-animation {
  animation: loop-slide2 10s infinite linear 0s both;
}

@keyframes loop-slide2 {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(-1120px);
  }
}

@media screen and (max-width: 650px) {
  .p-recruit_message_img .slide-animation {
    animation-duration: 10s;
  }

  @keyframes loop-slide2 {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-480px);
    }
  }
}