@charset "UTF-8";
#hometop { width: 100%; position: relative; background:center center / cover;}
	#hometop h1 { display: block; height: 100px; padding:40px 0 0 0; margin: auto; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

#home { background:url("../images/home-bg.jpg") no-repeat center; }

.business { background:rgba(255,255,255,.8);}
	.business h2 {max-width: 780px; margin: 0 auto; padding: 20px 0;}
	.business h3 {max-width: 780px; margin: 0 auto; padding: 20px 0; text-align: left; border-bottom: 1px solid #333; }
	.business p {max-width: 780px; margin: 0 auto; padding: 20px 0; text-align: left; font-size: 16px;}

.works { background:rgba(255,255,255,.8);}
	.works p {max-width: 460px; margin: 0 auto; padding: 20px 0;}
		.worksphoto { text-align: right;}
			.worksphoto img { padding: 4px 0;}
		.workslink { text-align: center;}
			.workslink a { padding: 20px; display: flex; justify-content: center; align-items: center; color:#FFF; text-decoration: none; background:#000;}
				.workslink a::before { display: inline-block; padding-right: 20px; content:url("../images/works-pt.png");}
				.workslink a:hover { background:#777;}

#homenav {  padding-bottom: 60px;}
	#homenav ul { width: 100%; display: flex; flex-wrap: wrap; justify-content:center;}
		#homenav li { font-weight: bold;font-size: 24px;}
			#homenav li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; padding:20px 20px; color:#FFF; text-decoration: none; opacity:.8; background-size:100%;}
				#homenav li a::before { display: block; width: 100%; text-align: center;}
				#homenav li a:hover {opacity:1; background-size:110%;}
		.aboutus a {background:url("../images/aboutus-bg.jpg") no-repeat center;}
			.aboutus a::before { content: url("../images/aboutus-pt.png")}
		.recruit a {background:url("../images/recruit-bg.jpg") no-repeat center;}
			.recruit a::before { content: url("../images/recruit-pt.png")}


@media all and (min-width:320px) {
	/* 320px+ settings */
	#hometop { height: 280px;}
	#home { background:url("../images/home-bg.jpg") no-repeat center; }
	.business { padding: 20px 30px;}
		.business h3 { font-size: 16px; }
	.works { padding: 20px 30px;}
		.workslink { font-size: 18px;}
	#homenav li { width: 100%;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#hometop { height: 480px;}
	.business { padding: 20px 40px;}
		.business h3 { font-size: 18px; }
	.works { padding: 20px 40px;}
		.workslink { font-size: 20px;}
	#homenav li a { padding: 40px 0;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#home { background-size: contain; }
	.business { padding: 20px 40px;}
		.business h3 { font-size: 20px; }
	.works { padding: 20px 40px;}
		.workslink { font-size: 24px;}
	#homenav li { width: 40%;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#homenav li { width: 50%;}
	#homenav li a { height:260px;}
}