@charset "UTF-8";
/*
 * flow.css
 *
 */


/* !制作の流れ
---------------------------------------------------------- */
.flowCts01 {
	max-width:1240px;
	margin:0 auto;
	padding:70px 20px 100px 20px;
}

ul.flowOutline li {
	font-size:20px;
	color:#111;
	line-height:1;
	padding:12px 15px;
	background:#F4D700;
	float:left;
	margin-right:30px;
	position: relative;
}
	ul.flowOutline li:after {
		content: '';
		position: absolute;
		top: 0;
		right: -44px;
		height: 0;
		width: 0;
		border: solid 22px transparent;
		border-left-color: #F4D700;
	}
	ul.flowOutline li:last-child:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		height: 0;
		width: 0;
		border: none;
	}
	
p.delivery {
	font-size:18px;
	float:left;
	margin-right:40px;
}
	p.delivery span {
		border:1px solid #111;
		padding:0.4em 0.6em;
		line-height:1;
		margin-right:15px;
		border-radius:4px;
	}
	
.flowBox {
	position:relative;
	width:auto;
	max-width:1000px;
	margin:0 auto 20px auto;
	border:5px solid #ECECEC;
	padding:40px;
}
	.flowBox img.step {
		position:absolute;
		display:block;
		width:80px;
		top:-40px;
		left:50%;
		margin-left:-40px;
	}
	.flowBox h3 {
		font-size:24px;
		font-weight:bold;
		text-align:center;
		margin-bottom:20px;
	}
	.flowBox div.left {
		width:60%;
		float:left;
	}
	.flowBox div.right {
		width:35%;
		float:right;
	}
		.flowBox div.right img {
			display:block;
			width:100%;
			border:5px solid #FFF;
			box-shadow:0px 0px 4px rgba(0,0,0,0.35);
		}

img.arrow {
	display:block;
	width:82px;
	margin:0 auto 50px auto;
}

.flowCts02 {
	margin-bottom:80px;
}


@media screen and (max-width:1039px){
.flowCts01 {
	padding:60px 20px 90px 20px;
}

ul.flowOutline li {
	font-size:18px;
	padding:11px 15px;
}
	ul.flowOutline li:after {
		content: '';
		position: absolute;
		top: 0;
		right: -40px;
		height: 0;
		width: 0;
		border: solid 20px transparent;
		border-left-color: #F4D700;
	}

p.delivery {
	font-size:16px;
	float:left;
	margin-right:40px;
}
	p.delivery span {
		border:1px solid #111;
		padding:0.4em 0.6em;
		line-height:1;
		margin-right:15px;
		border-radius:4px;
	}
	
.flowBox {
	margin:0 20px 20px 20px;
	padding:40px 30px 30px 30px;
}
	.flowBox h3 {
		font-size:22px;
	}
	
.flowCts02 {
	margin-bottom:70px;
}

}

@media screen and (max-width:767px){
.flowCts01 {
	padding:50px 15px 80px 15px;
}

ul.flowOutline li {
	font-size:14px;
	line-height:1.8;
	padding:0;
	background:none;
	float:left;
	margin-right:20px;
	position: relative;
	color:#111;
}
	ul.flowOutline li:after {
		content: '→';
		position: absolute;
		top: 0;
		right: -2px;
		height: 0;
		width: 0;
		border: none;
		color:#111;
	}
	
p.delivery {
	font-size:14px;
	float:none;
	margin-right:0;
	margin-bottom:12px;
}
	p.delivery span {
		border:1px solid #111;
		padding:0.4em 0.6em;
		line-height:1;
		margin-right:15px;
		border-radius:4px;
	}

.flowBox {
	position:relative;
	width:auto;
	max-width:1000px;
	margin:0 15px 20px 15px;
	border:5px solid #ECECEC;
	padding:40px 20px 30px 20px;
}
	.flowBox img.step {
		position:absolute;
		display:block;
		width:80px;
		top:-40px;
		left:50%;
		margin-left:-40px;
	}
	.flowBox h3 {
		font-size:16px;
	}
	.flowBox div.left {
		width:100%;
		float:none;
	}
	.flowBox div.right {
		width:100%;
		float:none;
		margin-bottom:20px;
	}
		.flowBox div.right img {
			width:100%;
			max-width:320px;
			margin:0 auto 20px auto; 
		}

img.arrow {
	display:block;
	width:60px;
	margin:0 auto 50px auto;
}

.flowCts02 {
	margin-bottom:60px;
}

}