@charset "UTF-8";
/* ページ遷移アニメーション */
/* 横スライド */
.left-slide-enter {
  opacity: 0;
  transform: translateX(100vw);
}

.left-slide-leave-to {
  opacity: 0;
  transform: translateX(-100vw);
}

.left-slide-enter-to,
.left-slide-leave,
.right-slide-enter-to,
.right-slide-leave {
  transform: translateX(0);
}

.left-slide-enter-active,
.left-slide-leave-active,
.right-slide-enter-active,
.right-slide-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.right-slide-enter {
  opacity: 0;
  transform: translateX(-100vw);
}

.right-slide-leave-to {
  opacity: 0;
  transform: translateX(100vw);
}

/* 縦スライド */
.bottom-in-slide-enter {
  transform: translate(0, 100vh);
  opacity: 0;
}

.bottom-in-slide-enter-to {
  opacity: 1;
}

.bottom-in-slide-enter-active {
  transition: 0.5s;
}

.bottom-in-slide-leave {
  transform: translate(0, 0);
  opacity: 1;
}

.bottom-in-slide-leave-to {
  transform: translate(0, -100vh);
  opacity: 0;
}

.bottom-in-slide-leave-active {
  transition: 0.5s;
}

.top-in-slide-enter {
  transform: translate(0, -100vh);
  opacity: 0;
}

.top-in-slide-enter-to {
  opacity: 1;
}

.top-in-slide-enter-active {
  transition: 0.5s;
}

.top-in-slide-leave {
  transform: translate(0, 0);
  opacity: 1;
}

.top-in-slide-leave-to {
  transform: translate(0, 100vh);
  opacity: 0;
}

.top-in-slide-leave-active {
  transition: 0.5s;
}

/* ドアスライド */
.left-door-enter {
  opacity: 0;
  transform: translateX(-100vw);
}

.left-door-leave-to {
  opacity: 0;
  transform: translateX(-100vw);
}

.left-door-enter-to,
.left-door-leave {
  transform: translateX(0);
}

.left-door-enter-active,
.left-door-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.right-door-enter {
  opacity: 0;
  transform: translateX(100vw);
}

.right-door-leave-to {
  opacity: 0;
  transform: translateX(100vw);
}

.right-door-enter-to,
.right-door-leave {
  transform: translateX(0);
}

.right-door-enter-active,
.right-door-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.top-door-enter {
  opacity: 0;
  transform: translateY(-100vh);
}

.top-door-leave-to {
  opacity: 0;
  transform: translateY(-100vh);
}

.top-door-enter-to,
.top-door-leave {
  transform: translateY(0);
}

.top-door-enter-active,
.top-door-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.bottom-door-enter {
  opacity: 0;
  transform: translateY(100vh);
}

.bottom-door-leave-to {
  opacity: 0;
  transform: translateY(100vh);
}

.bottom-door-enter-to,
.bottom-door-leave {
  transform: translateY(0);
}

.bottom-door-enter-active,
.bottom-door-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

/* fade */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* zoom */
.zoom-enter-active, .zoom-leave-active {
  transition: 0.5s;
}

.zoom-leave-to {
  transform: scale(1.03);
  opacity: 0;
}

.zoom-enter {
  transform: scale(0.97);
}

/* slider */
.next-enter-active,
.next-leave-active,
.prev-enter-active,
.prev-leave-active {
  transition: all 0.5s ease-out;
}

.next-enter {
  transform: translateX(100vw);
}

.next-enter-to {
  transform: translateX(0);
}

.next-leave {
  transform: translateX(0);
}

.next-leave-to {
  transform: translateX(-100vw);
}

.prev-enter {
  transform: translateX(-100vw);
}

.prev-enter-to {
  transform: translateX(0);
}

.prev-leave {
  transform: translateX(0);
}

.prev-leave-to {
  transform: translateX(100vw);
}