.d-n {
  display: none !important;
}

.arrow-top {
  border-top: solid 1px #fff;
  border-left: solid 1px #fff;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  transition: all 2s;
  opacity: 0;
}

.arrow-top.active {
  opacity: 1;
}

.arrow-bottom {
  border-bottom: solid 1px #fff;
  border-right: solid 1px #fff;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  transition: all 2s;
  opacity: 0;
}

.arrow-bottom.active {
  opacity: 1;
}

.bounce {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

.move-btn {
  transition: all 2s;
  opacity: 0;
}
.move-btn.active {
  opacity: 1;
}

.spSlideImg {
  transition: all 5s;
  transform: translateX(0%);
}

.spSlideImg.active {
  transform: translateX(-22.5%);
}

.slideImg {
  transition: all 20s;
}

.slideImg.active {
  transform: scale(1.25);
}

/* アニメーション */
.section-animation {
  opacity: 0;
  animation-name: default-animation;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

.slideIn {
  animation-name: SlideIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.slideOut {
  animation-name: SlideOut;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.logo-animation {
  animation-name: logo-animation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.bgc-animation {
  animation-name: bgc-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.menu-fadein {
  animation-name: menu-fadein;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

.menu-fadeout {
  animation-name: menu-fadeout;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

.menu-fadeout ul {
  animation-name: menu-fadeout-ul;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.section-description {
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 2s;
  transform: translateX(0%);
  opacity: 1;
}

.section-description.close {
  transform: translateX(100%);
  opacity: 0;
}

/* 動的に画面の高さを設定 */
.full-screen-height {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
}

@keyframes default-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes section-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes SlideIn {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

@keyframes SlideOut {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(100%);
  }
}

@keyframes logo-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bgc-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sp-slide-animation {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* sp用アニメーション */
@keyframes menu-fadein {
  0% {
    opacity: 0;
    height: 0px;
  }
  1% {
    height: calc(calc(var(--vh, 1vh) * 100) - 116px);
  }
  100% {
    opacity: 0.93;
    height: calc(calc(var(--vh, 1vh) * 100) - 116px);
  }
}

@keyframes menu-fadeout {
  0% {
    opacity: 0.93;
    height: calc(calc(var(--vh, 1vh) * 100) - 116px);
  }

  99% {
    height: calc(calc(var(--vh, 1vh) * 100) - 116px);
  }
  100% {
    height: 0px;
    opacity: 0;
  }
}
/* end sp用アニメーション */

@keyframes menu-fadeout-ul {
  0% {
    height: auto;
  }
  99% {
    height: auto;
  }
  100% {
    height: 0px;
  }
}

/* PC用アニメーション */
@media (min-width: 640px) {
  @keyframes menu-fadein {
    0% {
      opacity: 0;
      height: 0px;
    }
    1% {
      height: calc(calc(var(--vh, 1vh) * 100) - 160px);
    }
    100% {
      opacity: 0.93;
      height: calc(100vh - 160px);
    }
  }

  @keyframes menu-fadeout {
    0% {
      opacity: 0.93;
      height: calc(100vh - 160px);
    }

    99% {
      height: calc(100vh - 160px);
    }
    100% {
      height: 0px;
      opacity: 0;
    }
  }
}
