/*
 * File Info: LindbergPrecious
 * LindbergPrecious用スタイル
*/

/*============================================================
 * $
 * デスクトップ
============================================================*/
.visual_area,
.visual_area img {
	width: 100%;
}
.visual_area {
	position: relative;
}

.visual_right,
.visual_left {
	overflow: hidden;
	position: absolute;
}
.visual_right {
	right: 0;
	top: 0;
}
.visual_left {
	left: 0;
	bottom: 0;
}


.visual_right img {
	transform: translateX(100%);
	-webkit-animation: image_right-in .7s linear .3s;
	-moz-animation: image_right-in .7s linear .3s;
	-ms-animation: image_right-in .7s linear .3s;
	-o-animation: image_right-in .7s linear .3s;
	animation: image_right-in .7s linear .3s;

	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@-webkit-keyframes image_right-in {
	0% {-webkit-transform: translateX(100%);}
	100% {-webkit-transform: translateX(0);}
}
@-moz-keyframes image_right-in {
	0% {-moz-transform: translateX(100%);}
	100% {-moz-transform: translateX(0);}
}
@-ms-keyframes image_right-in {
	0% {-ms-transform: translateX(100%);}
	100% {-ms-transform: translateX(0);}
}
@-o-keyframes image_right-in {
	0% {-o-transform: translateX(100%);}
	100% {-o-transform: translateX(0);}
}
@keyframes image_right-in {
	0% {transform: translateX(100%);}
	100% {transform: translateX(0);}
}




.visual_left img {
	transform: translateX(-100%);
	-webkit-animation: image_left-in .7s linear .3s;
	-moz-animation: image_left-in .7s linear .3s;
	-ms-animation: image_left-in .7s linear .3s;
	-o-animation: image_left-in .7s linear .3s;
	animation: image_left-in .7s linear .3s;

	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@-webkit-keyframes image_left-in {
	0% {-webkit-transform: translateX(-100%);}
	100% {-webkit-transform: translateX(0);}
}
@-moz-keyframes image_left-in {
	0% {-moz-transform: translateX(-100%);}
	100% {-moz-transform: translateX(0);}
}
@-ms-keyframes image_left-in {
	0% {-ms-transform: translateX(-100%);}
	100% {-ms-transform: translateX(0);}
}
@-o-keyframes image_left-in {
	0% {-o-transform: translateX(-100%);}
	100% {-o-transform: translateX(0);}
}
@keyframes image_left-in {
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0);}
}









/*============================================================
 * $
 * モバイル
============================================================*/
@media screen and (max-width:768px){
	.visual_area {
		box-sizing: border-box;
	}
	.visual_right,
	.visual_left {
		width: 45%;
	}
}