@charset "UTF-8";

.intro { padding:20px 0 30px 0; max-width: 640px; margin: 0 auto; text-align: left;}
	.intro p { padding:10px 0; font-size:16px;}

.art { padding:20px 0; text-align: left;}
	.art p { padding:10px 0; font-size:16px;}
	.art ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0;}
	.art a { color:#000; text-decoration: underline;}
		.art a:hover { color:#0072BF;}


h2.btitle { display: block; width: 100%; text-align: center; margin-bottom: 20px; font-size: 24px;}
	#b1 h2.btitle {background: url("../images/business1.jpg") center / cover;}
	#b2 h2.btitle {background: url("../images/business2.jpg") center / cover;}
	h2.btitle strong { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 280px; background:rgba(0,0,0,.45); color:#FFF;}
	h2.btitle span::after { display: block; width: 100%; font-size: 12px; font-weight: normal; text-align: center;}
		#b1 h2.btitle span::after {content:"Substation construction"; }
		#b2 h2.btitle span::after {content:"Factory, building, tenant construction"; }

.works { padding:20px 0; text-align: center;}
	.works h3 { padding:30px 0 10px 0; font-size:16px;}
	.works table { border-collapse: collapse; }

@media all and (min-width:320px) {
	/* 320px+ settings */
	.art ul li { width:100%; padding: 10px 0;}
	.works table { width: 100%; margin:0; }
		.works th { display: block; padding: 20px 0 0 0; font-size: 16px; text-align: left;}
		.works td { display: block; padding: 0 0 20px 0; font-size: 16px; text-align: left; border-bottom: 1px solid #999;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	.art ul li { width:48%; padding: 10px 0;}
	.works table { width:auto; margin:0 auto; }
		.works th, .works td { display: table-cell; text-align: left; padding: 20px 20px; font-size: 16px; border-bottom: 1px solid #999; vertical-align: top;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}