/* クラス間ページ遷移アニメーション
 **************************************/
.page-move .page-bg {
  /* background: #f599c4;
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0; */
}

.page-move .page-bg {
  display: none;
  background: var(--background-color);
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

/*アニメーション*/
.page-move.active .page-bg {
  display: block;
  animation-name: bg-anime;
  animation-duration: 3.0s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@media (max-width: 767px) {
 .page-move.active .page-bg {
  animation-duration: 2.0s;

} 
}

@keyframes bg-anime {
  0% {
    transform-origin: center right;
    transform: scale(7,7) translateX(16%) skewX(45deg);
  }
  10% {
    transform-origin: center right;
    transform: scale(7,7) translateX(16%) skewX(45deg);
  }
  100% {
    transform-origin: center right;
    transform: scale(7,7) translateX(-500%) skewX(45deg);
  }
}