@charset "utf-8";

/* 受託加工のプロセス
========================================================= */

.processContents { width: 100%; max-width: 1200px; margin: 90px auto 0; }
.processContents div.title { font-size: 4.2rem; line-height: 4.2rem; font-weight: bold; text-align: center; }

.processContents div.flow { 
	background: url("/cms/cwc/product/coating/common/images/process_bg.png") repeat-y center top;
	background-size: 100%;
	position: relative;
	margin-top: 100px;
}
.processContents div.flow div.maskTop {
	width: 100%;
	height: 30px;
	background: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
}
.processContents div.flow div.maskBtm {
	width: 100%;
	height: 80px;
	background: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}

.processContents div.flow ul { overflow: hidden; position: relative; z-index: 100; }
.processContents div.flow ul li { width: calc(50% + 30px); max-width: 630px; display: table; }
.processContents div.flow ul li:nth-child(2n+1) { float: left; }
.processContents div.flow ul li:nth-child(2n) { float: right; }
.processContents div.flow ul li + li { margin-top: -70px; }

.processContents div.flow ul li div { display: table-cell; vertical-align: middle; }
.processContents div.flow ul li p.headline {
	font-size: 3.2rem;
	line-height: 4.0rem;
	font-weight: bold;
	padding: 0 20px 0 0;
}
.processContents div.flow ul li:nth-child(2n) p.headline { padding: 0 0 0 20px; }
.processContents div.flow ul li p.txt { font-size: 2.0rem; line-height: 3.2rem; padding: 10px 20px 0 0; }
.processContents div.flow ul li:nth-child(2n) p.txt { padding: 10px 0 0 20px; }
.processContents div.flow ul li div.img { width: 34.93%; max-width: 220px; }
.processContents div.flow ul li div.num {
	width: 25.4%;
	max-width: 160px;
	background: url("/cms/cwc/product/coating/common/images/process_line.gif") repeat-x left center;
}
.processContents div.flow ul li div.num img { width: 60px;}
.processContents div.flow ul li:nth-child(2n+1) div.num { text-align: right; }

.processContents div.flowSp { display: none; }

.processContents p.note { text-align: right; padding: 100px 0 0 0; }
.processContents p.note span { display: inline-block; }



@media screen and (max-width: 1200px) {
	.processContents { width: 90.625%; -webkit-transition: all 0.2s; transition: all 0.2s; }
	.processContents div.flow ul li + li { margin-top: -50px; }
	.processContents div.flow ul li p.headline { font-size: 1.8rem; line-height: 2.8rem; }
	.processContents div.flow ul li p.txt { font-size: 1.5rem; line-height: 2.2rem; }
}

@media screen and (max-width: 960px) {
	.processContents div.flow ul li + li { margin-top: -30px; }
}

@media screen and (max-width: 768px) {
	.processContents { margin: 35px auto 0; }
	.processContents div.title {  font-size: 2.2rem; line-height: 2.2rem; }
	
	.processContents div.flow { display: none; }
	.processContents div.flowSp { display: block; margin-top: 40px; }
	.processContents div.flowSp ul li { overflow: hidden; }
	.processContents div.flowSp ul li + li { margin-top: 30px; }
	.processContents div.flowSp ul li div.img { width: 120px; float: right; }
	.processContents div.flowSp ul li div.num { width: 30px; padding-top: 20px; }
	.processContents div.flowSp ul li p.headline {
		font-size: 1.8rem;
		line-height: 2.8rem;
		font-weight: bold;
		padding: 20px 0 0 0;
	}
	.processContents div.flowSp ul li p.txt { font-size: 1.5rem; line-height: 2.2rem; }
	.processContents div.flowSp ul li p.txt {
		width: 100%;
		display: block;
		clear: both;
		font-size: 1.5rem;
		line-height: 2.2rem;
		padding: 10px 0 0 0;
	}
	
	.processContents p.note { font-size: 1.2rem; line-height: 1.8rem; text-align: left; padding: 70px 0 0 0; }
}