/* ===================================================================
CSS
 file name  :  flow.css
=================================================================== */
@media screen and (min-width: 769px) {
/* =====================================
購入の流れ
======================================== */
#flow p{
	margin-top: 20px;
}
#flow ul#chart{
	margin-left:-10px;
}
#flow ul#chart li{
	float:left;
	margin-left:10px;
}
#flow .question{
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_q.png);
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process {
	background-color:#E2F5EF;
//	background-image:url(../images/flow/icon_1.png); 
//	background-position:15px 15px;
//	background-repeat:no-repeat;
	padding:20px 20px 15px 20px;
	color:#00306D;
	font-size:18px;
	margin-top:0px;
	font-weight:bold;
}
#flow .process1 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_1.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process2 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_2.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process3 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_3.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process4 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_4.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process5 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_5.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process6 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_6.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}


#flow .answer{
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_a.png);
	background-position:20px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .person{
	float:right;
	margin:auto auto 20px 40px;
}

ul#solution li {
    float: left;
    width: 320px;
    margin-top: 30px;
    margin-left: 15px;
	margin-right: 10px;
    height: 250px;
	font-size: 90%;
}
ul#solution li img {
	width: 90%;
}


}
@media screen and (max-width: 768px ){
/* スマートフォン用のスタイル記述 */
/* =====================================
購入の流れ
======================================== */
#flow p{
	margin:10px 20px;
}
#flow ul#chart{
	margin:10px 20px;
}
#flow ul#chart li{
	float:left;
	margin-bottom:10px;
	width:33%;
}
#flow .question{
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_q.png);
	background-position:20px 20px;
	background-repeat:no-repeat;
	background-size:25px auto;
	padding:10px 20px 10px 60px;
	color:#00306D;
	margin-top:10px;
	font-weight:bold;
}
#flow .process {
	background-color:#E2F5EF;
//	background-image:url(../images/flow/icon_1.png); 
//	background-position:15px 15px;
//	background-repeat:no-repeat;
	padding:20px 20px 15px 20px;
	color:#00306D;
	font-size:18px;
	margin-top:0px;
	font-weight:bold;
}
#flow .process1 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_1.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process2 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_2.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process3 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_3.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process4 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_4.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process5 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_5.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}
#flow .process6 {
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_6.png); 
	background-position:15px 15px;
	background-repeat:no-repeat;
	padding:15px 20px 15px 80px;
	color:#00306D;
	font-size:18px;
	margin-top:30px;
	font-weight:bold;
}


#flow .answer{
	background-color:#E2F5EF;
	background-image:url(../images/flow/icon_a.png);
	background-position:20px 20px;
	background-repeat:no-repeat;
	background-size:25px auto;
	padding:10px 20px 10px 60px;
	color:#00306D;
	margin-top:10px;
	font-weight:bold;
}
#flow .person{
	float:right;
	margin:auto auto 20px 10px;
	width:25%;
}
ul#solution {
    margin: 0 20px 20px 20px;
}
ul#solution li {
	padding-top: 30px;
    margin-top: 30px;
    margin: auto;
}

}