@charset "UTF-8";

#title{
	margin-bottom: 3em
}

#title > h2{
	text-align: center;
	margin: 1em auto 1em;
}

#title > h2 span:first-child{
	position: relative;
	top: -1em;
	display: inline-block;
	max-width: 180px
}

#title >div{
	border: solid 3px rgba(56, 181, 73, 0.5);
	border-radius: 10px;
	padding: 1em;
	box-shadow: 0 3px 3px #ccc;
	background: #fff;
	text-align: center;
	width: 100%;
	max-width: 800px;
	margin: 0 auto
}

#title >div p{
	font-size: 2em;
	font-weight: bold;
	color: #007042;
	display: flex;
	justify-content: center;
	align-items: center
}

#title >div p span{
	display: inline-block;
	margin-right: .3em;
}

#title >div h2{
	color: #39b54a;
	font-weight: bold;
	font-size: 2.5em;
	display: inline-block;
	justify-content: center;
	align-items: center
}

#title >div img{vertical-align: bottom}


@media (min-width: 668px) {
	#title >div h2{display: flex;}
	#title >div h2:before,#title >div h2:after{
		content: '';
		width: 30px;
		height: 40px;
		display: inline-block
	}
	#title >div h2:before{
		background: url(../images/line/side_left.png)no-repeat center;
		background-size: contain;
	}
	#title >div h2:after{
		background: url(../images/line/side_right.png)no-repeat center;
		background-size: contain;
	}
	#title >div h2 br{display: none}
}	

@media (max-width: 880px) {
	#title > h2 span:first-child{transform: rotate(12deg)}
}	

/********************************
	   section common
*********************************/

.flow_wrap h3{
	text-align: center;
	margin: 0 auto;
	font-size: 1.8em;
	position: relative;
}

.flow_wrap dl{display: flex;flex-wrap: wrap;}


@media (min-width: 668px) {
	.flow_wrap h3{font-size: 2.5em}
}	
	



/*   flow1   */
#flow1{
	margin-bottom: 3em
}
#flow1 h3{
	border-bottom: dashed 3px #4dad59;
	padding-bottom: .5em;
	margin-bottom: 2em}

#flow1 h3 span{
	color: #39b54a;
	font-weight: bold
}

#flow1 h3:before{
	content: '';
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	left: 0;
	right: 0;
	top: 85%;
	margin: 0 auto;
	border-bottom: 3px dashed #4dad59;
	border-left: 3px dashed #4dad59;
	background-color: #fff;
	transform: rotate(-45deg);
}

#flow1 ul{
	max-width: 800px;
    margin: 1em auto;
}

#flow1 li{
	padding: .6em 1em;
	background: -webkit-linear-gradient(#ff7000 0%, #ffa700 100%);
	border-radius: 5px;
	position: relative;
	color: #fff;
	font-weight: bold;
	font-size: 1.3em;
	margin-bottom: 10px
}


#flow1 ul li:before{
	font-family: icomoon;
	content: "\ea54";
	margin-right: .5em;
	font-size: .8em
}

#flow1 dl{
	justify-content: space-around;
	align-items: center;
	max-width: 880px;
	margin: 0 auto
}


@media (min-width: 668px) {
	#flow1 li{font-size: 1.6em;}
	#flow1 dt{width: 30%}
	#flow1 dd{width: 65%}
}



/*   flow2   */

#flow2{}

#flow2 h3{
	font-size: 1.6em;
	color:#fff;
	background: #00b900;
	padding: 1em;
}


.line_title{
	text-align: center;
	font-weight: bold;
	font-size: 1.3em;
	margin-bottom: 1em
}

.line_title span{display: block;}

.line_title h2{
	display: inline-block;
	background:linear-gradient(transparent 60%, #ff6 60%);
}

@media (min-width: 668px) {
	#flow2 h3{font-size: 2.5em}
	.line_title{font-size: 1.5em}
}


.bg_b{
	background: #e9fbdd;
	padding: 3em 2em;
	margin: 0 auto
}

#flow2 dl{
	justify-content: center;
	flex-direction: column;
	text-align: center
}

#flow2 dd{
	border: solid 3px #39b54a;
	border-radius: 50px;
	background: #fff;
	box-shadow: 0 3px 3px #ccc;
	font-weight: bold;
	font-size: 1.2em;
	max-width: 800px;
	padding: .8em 1.5em;
	color: #39b54a;
	margin: .5em auto 0;
}

@media screen and (max-width: 667px) {
	#flow2 p br{display: none}
}	


@media (min-width: 668px) {
	#flow2 dd{min-width: 600px;}
}	

@media (min-width: 1000px) {}	

/*   flow3   */


#flow3{padding: 3em 0;text-align: center}

#flow3 >p{
	font-weight: bold;
	font-size: 1.3em;
	text-align: center;
	margin: 1px auto;
	background: #ff9a00;
	color: #fff;
	display: inline-block;
	text-align: center;
	padding: 5px;
}
#flow3 h3{margin: .5em auto 2em}


#flow3 h3 span{color: #ff9a00;font-size: 1.2em;
	border-bottom: solid 2px rgba(255, 154, 0, 0.55);
	padding: 0 5px 
}

#flow3 dl{justify-content: center;}

#flow3 dd{
	margin: 0 1em;
	text-align: center
}

#flow3 dd h4{
	padding: 1em 0;
    color: #2aabe2;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.8em;
}

#flow3 dd p{
	line-height: 1.8em;
	font-size: 1.2em
}



#flow3 a{
	display: block;
    margin: 1em auto;
    background: #39b54a;
    color: #fff;
    border-radius: 2em;
    border: solid 3px #39b54a;
    position: relative;
    top: -3px;
    padding: 1em;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3em;
    max-width: 400px;
    margin: 3em auto;
}

#flow3 a:hover{top: 0}


@media screen and (max-width: 667px) {
	#flow3 dd p br{display: none}
}
@media (min-width: 668px) {
	#flow3 dd h4{font-size: 1.8em;}
	#flow3 dd h4,#flow3 dd p{text-align: left}
	#flow3 h3 br{display: none}
}