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

/* !パンフレット制作の流れ
---------------------------------------------------------- */
ul.flowOutline li {
	font-size:16px;
	font-weight:bold;
	color:#FFF;
	line-height:1;
	padding:12px 15px;
	background:#C29A63;
	float:left;
	margin-right:30px;
	position: relative;
}
	ul.flowOutline li:after {
		content: '';
		position: absolute;
		top: 0;
		right: -40px;
		height: 0;
		width: 0;
		border: solid 20px transparent;
		border-left-color: #C29A63;
	}
	ul.flowOutline li:last-child:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		height: 0;
		width: 0;
		border: none;
	}
	
p.delivery {
	font-size:16px;
	float:left;
	margin-right:40px;
}
	p.delivery span {
		background:#D7D7D7;
		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;
	background:#FFF;
	border:5px solid #F8D8DC;
	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;
}

@media screen and (max-width:1039px){
p.delivery {
	margin-right:34px;
}

.flowBox {
	padding:40px 30px 30px 30px;
}
}

@media screen and (max-width:767px){
ul.flowOutline li {
	font-size:14px;
	color:#FFF;
	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 {
		padding:0.4em 0.6em;
		line-height:1;
		margin-right:15px;
		border-radius:4px;
	}
	
.flowBox {
	padding:40px 20px 30px 20px;
}
	.flowBox h3 {
		font-size:16px;
	}
	.flowBox div.left {
		width:100%;
		float:none;
	}
	.flowBox div.right {
		width:100%;
		float:none;
		margin-bottom:20xp;
	}
		.flowBox div.right img {
			width:100%;
			max-width:400px;
			margin:0 auto 20px auto; 
		}
}