@charset "utf-8";

/* ---------------------------------------------------------------------------------------------- */
/* ANIMATION                                                                                      */
/* ---------------------------------------------------------------------------------------------- */

#p-mc-container,
#p-mc-old-container {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: transform 0s cubic-bezier(0.8, 0.0, 0.2, 1.0), opacity 0s cubic-bezier(0.8, 0.0, 0.2, 1.0);
	        transition: transform 0s cubic-bezier(0.8, 0.0, 0.2, 1.0), opacity 0s cubic-bezier(0.8, 0.0, 0.2, 1.0);
}

#p-mc-container {
	z-index: 1;
}

#p-mc-old-container {
	z-index: 2;
}



.onloadstart #p-mc-container,
.onloadstart #p-mc-old-container {
	-webkit-transition-duration: 0s;
	        transition-duration: 0s;
}

.onloadajaxcontent #p-mc-container {
	opacity: 0;
	-webkit-transform: translateY(25vw);
	        transform: translateY(25vw);
}


.onready #p-mc-container {
	-webkit-transition-duration: 0.7s;
	        transition-duration: 0.7s;
}

.onready #p-mc-old-container {
	-webkit-transition-duration: 0.7s;
	        transition-duration: 0.7s;
}

.onready #p-mc-old-container {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}

.onready #p-mc-container {
	opacity: 1;
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}


/* .popstateの場合は重なりが逆 */
.popstate #p-mc-container {
	z-index: 2;
	opacity: 1;
}

.popstate #p-mc-old-container {
	z-index: 1;
	opacity: 1;
}

.popstate.onloadstart #p-mc-old-container {
	opacity: 1;
}

.popstate.onloadajaxcontent #p-mc-old-container {
	z-index: 2;
	opacity: 1;
}

.popstate.onloadajaxcontent #p-mc-container {
	z-index: 1;
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}

.popstate.onready #p-mc-old-container {
	opacity: 0;
	z-index: 1;
	-webkit-transform: translateY(50vw);
	        transform: translateY(50vw);
}

.popstate.onready #p-mc-container {
	z-index: 2;
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}

/* .popstate(forward)の場合は右から左へ -------------------- */

/* onloadajaxcontentまでは、そのまま待機 */
.popstate-forward .popstate #p-mc-container {
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}

.popstate-forward .popstate.onloadstart #p-mc-container {
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}

.popstate-forward .popstate.onloadajaxcontent #p-mc-container {
	/*opacity: 0;*/
	-webkit-transform: translateY(50vw);
	        transform: translateY(50vw);
}

.popstate-forward .popstate.onloadstart #p-mc-container,
.popstate-forward .popstate.onloadstart #p-mc-old-container {
	/*-webkit-transition-duration: 0s;
	        transition-duration: 0s;*/
}

.popstate-forward .popstate.onready #p-mc-container {
	-webkit-transform: translateX(0vw);
	        transform: translateX(0vw);
}

.popstate-forward .popstate.onready #p-mc-old-container {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}


/* .popstateでもforwordの場合は通常と同じようにする */

.popstate-forward #p-mc-container {
	z-index: 1 !important;
	opacity: 1 !important;
}

.popstate-forward #p-mc-old-container {
	z-index: 2 !important;
	opacity: 1 !important;
}

.popstate-forward .popstate.onloadstart #p-mc-container {
	opacity: 0;
}

.popstate-forward .popstate.onready #p-mc-container {
	opacity: 1;
}

.popstate-forward .popstate.onready #p-mc-old-container {
	opacity: 1;
}