@charset "utf-8";
/* CSS Document */

#flow{
	width:90%;
	max-width:1000px;
	margin:50px auto 120px;
	text-align:left;
	counter-reset: number;
}

#flow h2{
	border-bottom:2px solid #4f4f4f;
	padding-bottom:15px;
	margin-bottom:30px;
	font-size:22px;
  	font-family: 'Roboto', sans-serif;
	letter-spacing:1px;
}


#flow h2 span{
	display:inline-block;
	font-size:13px;
	font-weight:normal;
	padding-left:25px;
	vertical-align:middle;
}


#flow .box{
	width:31%;
	display:inline-block;
	margin:0 2% 80px 0;
	vertical-align:top;
}

#flow .box:nth-of-type(3){
	margin-right:0;
}

#flow .box dl{
	counter-increment: number;
	margin-top:10px;
	font-size:12px
}

#flow .box dl:before{
	content:"[ STEP" counter(number) "]";
}


#flow .box dt{
	font-weight:bold;
	margin:5px 0 10px;
	font-size:16px;
}

#flow .box li{
	border:1px solid #1C1C1C;
	text-align:center;
	margin:5px 0 15px;
	font-size:13px;
}

#flow .box li a{
	padding:3px 0;
	display:block;
}

#flow .box p{
	border:1px solid #1C1C1C;
	margin-top:15px;
	padding:10px;
	font-size:13px;
}

#flow .inner{
	width:47%;
	display:inline-block;
	vertical-align:top;
	margin-right:5%;
}

#flow .inner:nth-child(even){
	margin-right:0;
}


#flow .inner p{
	font-size:14px;
	line-height:1.6
}



#flow .contact{
	width:100%;
	background:#F7C7CE;
	text-align:center;
	margin:80px auto;
	padding:4% 0;
}


#flow .contact dt{
	font-weight:bold;
	margin-bottom:10px
}

@media only screen and (max-width: 700px) { 
#flow .inner{
	width:100%;
	display:block;
	margin:0 auto 30px;
}

#flow .inner:nth-child(even){
	margin-right:auto;
}


}

@media only screen and (max-width: 640px) { 
#flow .box{
	width:100%;
	display:block;
	margin:0 auto 80px;
	text-align:center;
}

#flow .box:nth-of-type(3){
	margin-right:auto;
}
}