.curtainbg1, .curtainbg2 {
    display: block;
    content: "";
    position:fixed;
    z-index: 99999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: #FFF;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

.curtainbg1 {
    top: 0%;
    transform: scaleX(0);
    animation-name:curtainAnimeLeft;
}

.curtainbg2 {
    bottom: 0%;
    transform: scaleX(1);
    animation-name:curtainAnimeRight;
}

@keyframes curtainAnimeLeft {
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

@keyframes curtainAnimeRight {
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

.fadeout {
  animation : fadeOut 0.8s;
  animation-fill-mode: both;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*bodyにpageOnクラスがついたら出現*/
body.pageOn #container{
	animation-name:PageAnimeOn;
	animation-duration:1s;
	animation-delay: 0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeOn{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}