/* CSS Document */

html, body { background-color:rgb(190, 242, 255); }
#wrapper { margin:0; padding:0; }

#MainVisual { background: url(/img/main_mobile.png) no-repeat center top; padding-top: 280px; }
.box { position:relative; margin: 30px 15px; }
.box:before, .box:after { display: table; content: " "; }
.box:after { clear: both; }
.bennerBox { width:300px; height:300px; padding:10px; display:block; margin:0 auto; }
.box .b1 { background-color:rgb(17, 147, 208); }
.box .b2 { background-color:rgb(28, 199, 20); }
.box .b3 { background-color:rgb(29, 207, 129); }
.box .b4 { background-color:rgb(35, 49, 139); }
.box .student, .box .adult { display: block; margin-bottom: 20px; height: 244px; width: 100%; }
.box .student { background: url(/img/st_mobile.png) no-repeat center top; }
.box .adult { background: url(/img/adult_mobile.png) no-repeat center top; }

@media (min-width: 767px) {
	#MainVisual { background: url(/img/main.png) no-repeat center top; padding-top:800px; }
	.box { width:600px; height:300px; position:relative; margin: 40px auto 80px auto; }
	.bennerBox { width:300px; height:300px; padding:10px; display:inline-block; margin:0; float:left; }
	.box .student, .box .adult { position: absolute; top: -100px; display: block; background-image: none; width: auto; }
	.box .student { right:100%; margin-right:-12px; }
	.box .adult { left:50%; margin-left:-12px; }

}
@media (min-width: 992px) {

}
@media (min-width: 1200px) {


}