/* CSS Document */
.vra_hp_over {
	width:100%;
	background:url('/img/vra_hp_over/bg.png');
	position:absolute;
	left:0;
	top:0;
	z-index:1000;
	height:100%;
	text-align:center;
	display:none;
}

.vra_hp_over .inner {
	max-width:960px;
	width:calc(100% - 30px);
	margin:auto;
	margin-top:100px;
	position:relative;
}

.vra_hp_over .inner .box {
	display:table;
	color:#ffffff;
	text-decoration:none;
	
	transition: background-size .2s;
}

.vra_hp_over .inner .box .content.desktop {
	display:table-cell;
}

.vra_hp_over .inner .box .content.mobile {
	display:none;
}

.vra_hp_over .inner .box.main {
	background:url('/img/vra_hp_over/main_bg.jpg') center center no-repeat;
	width:100%;
	height:400px;
	background-size:960px;
	
	transition: background-size .2s;
}

.vra_hp_over .inner .box.main:hover {
	background-size:1000px;
}

.vra_hp_over .inner .box.main h2 {
	font-size:48px;
	font-weight:normal;
	padding-top:30px;
	padding-bottom:35px;
}

.vra_hp_over .inner .box.main .button {
	font-weight:bold;
	color:#000000;
	font-size:16px;
	margin:auto;
	width:250px;
	height:50px;
	background:#ffffff;
	line-height:50px;
}

.vra_hp_over .inner .box .arrow {
	width:20px;
}

.vra_hp_over .inner .box.bottom {
	width:33.33334%;
	height:200px;
	float:left;
	background-position:center center;
	background-repeat:no-repeat;
	background-size: 320px;
	
	transition: background-size .2s;
}

.vra_hp_over .inner .box.bottom:hover {
	background-size:360px;
}

.vra_hp_over .inner .box.bottom p {
	line-height:120%;
	padding-top:10px;
	font-size:22px;
}

.vra_hp_over .inner .box.bottom.box_1 {background-image:url('/img/vra_hp_over/box_1_bg.jpg');}
.vra_hp_over .inner .box.bottom.box_2 {background-image:url('/img/vra_hp_over/box_2_bg.jpg');}
.vra_hp_over .inner .box.bottom.box_3 {background-image:url('/img/vra_hp_over/box_3_bg.jpg'); width:33.33335%}

.vra_hp_over .inner .box .content {
	display: table-cell;
	vertical-align:middle;
}

.vra_hp_over .clear {
	clear:both;
}

.vra_hp_over .inner .hp_over_close {
	display:block;
	position:absolute;
	right:0;
	top:-32px;
	cursor:pointer;
	width:22px;
	height:22px;
	background:url('/img/vra_hp_over/close.png') center center no-repeat;
}

@media screen and (max-width: 620px) {
	body {}
	
	.vra_hp_over {
		width:100%;
		background:url('/img/vra_hp_over/bg_mobile.png');
	}
	
	.vra_hp_over .inner .box .content.desktop {
		display:none;
	}
	
	.vra_hp_over .inner .box .content.mobile {
		display:table-cell;
	}
	
	.vra_hp_over .inner .box.bottom,
	.vra_hp_over .inner .box.main {
		width:100%;
		height:300px;
		min-width:220px;
		background-size:591px;
		
		font-weight:bold;
		font-size:33px;
	}
	
	.vra_hp_over .inner .box.bottom:hover,
	.vra_hp_over .inner .box.main:hover {		
		background-size:631px;
	}
	
	.vra_hp_over .inner .box.main {background-image:url('/img/vra_hp_over/main_bg_mobile.jpg');}
	.vra_hp_over .inner .box.bottom.box_1 {background-image:url('/img/vra_hp_over/box_1_bg_mobile.jpg');}
	.vra_hp_over .inner .box.bottom.box_2 {background-image:url('/img/vra_hp_over/box_2_bg_mobile.jpg');}
	.vra_hp_over .inner .box.bottom.box_3 {background-image:url('/img/vra_hp_over/box_3_bg_mobile.jpg'); width:100%;}
	
	.vra_hp_over .inner .box.bottom p,
	.vra_hp_over .inner .box.main p {
		font-size:33px;
	}
	
	.vra_hp_over .inner .box .arrow {
		width:30px;
	}
	
	.vra_hp_over .inner .hp_over_close {
		background-image:url('/img/vra_hp_over/close_mobile.png');
	}
	
}