section .inr{
	max-width: 930px;
}
.area{
	align-items: flex-start;
}
.area h4{
	background: #329637;
	color: #fff;
	padding: 3px 15px;
	font-weight: normal;
	margin-bottom: 15px;
	font-size: 110%;
	display: inline-block;
}
.area > *{
	width: 50%;
}
.area ul{
	padding-bottom: 30px;
	border-bottom: dotted 1px #329637;
	margin-bottom: 30px;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.area ul li{
	list-style: disc;
	list-style-type: disc;
	margin-left: 1em;
	margin-right: 1.4em;
}

ol.flow li{
	background: #fff;
	margin-bottom: 20px;
	padding: 30px;
	align-items: stretch;
}
ol.flow .step{
	width: 80px;
	background-color: #fafaaf;
	padding: 15px;
	margin-right: 30px;
	clip-path: polygon(0 0,100% 0, 100% 85%, 50% 100%,0 85%);
	display: flex;
	justify-content: center;
	align-items: center;
}
ol.flow .step p{
	font-weight: bold;
	color: #329637;
	line-height: 1.2;
}
ol.flow .step span{
	display: block;
	color: #329637;
	font-size: 200%;
	line-height: 1.2;
}
ol.flow .textarea{
	width: calc(100% - 110px);
}
ol.flow h4{
	border-bottom: 1px dotted #329637;
	font-size: 130%;
	font-weight: normal;
	padding-bottom: 20px;
	margin-bottom: 20px;
	position: relative;
	padding-left: 4rem;
}
ol.flow h4:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	background-image: url('../img/guide/ico_flow01.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 3rem;
    height: 3rem;
}
ol.flow li:nth-child(2) h4:before{
	background-image: url('../img/guide/ico_flow02.png');
}
ol.flow li:nth-child(3) h4:before{
	background-image: url('../img/guide/ico_flow03.png');
}
ol.flow li:nth-child(4) h4:before{
	background-image: url('../img/guide/ico_flow04.png');
}
ol.flow li:nth-child(5) h4:before{
	background-image: url('../img/guide/ico_flow05.png');
}
ol.flow li:nth-child(6) h4:before{
	background-image: url('../img/guide/ico_flow06.png');
}
ol.flow .textarea p{
	line-height: 2.0;
	font-weight: lighter;
}
ol.flow li:last-child .step{
	background: #fae628;
	clip-path: none;
}

@media screen and (max-width:640px){
	.area{
		flex-direction: column;
	}
	.area > *{
		width: 100%;
	}
	.area figure{
		max-width: 460px;
		margin: 0 auto 30px;
	}
}
@media screen and (max-width:420px){
	ol.flow li{
		padding: 20px;
	}
	ol.flow .step{
		width: 70px;
		margin-right: 20px;
	}
	ol.flow .textarea{
		width: calc(100% - 90px);
	}
	ol.flow h4{
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	ol.flow .textarea p{
		line-height: 1.8;
	}
}