@charset "utf-8";



.flow_list > ul,
.flow_list > ul > li > ul{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	margin: 30px 0 0 0;
}
.flow_list > ul > li{
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
	position: relative;
	background:#e7f0ed;
	margin: 0 0 80px 0;
}
.flow_list > ul > li::before{
	position: absolute;
	width: 100px;
	height: 100px;
	text-align: center;
	font-size:100px;
    font-family: 'Font Awesome 5 Pro';
    content: "\f0d7";
	font-weight: 900;
	line-height: 1;
	bottom:-55px;
	left:0;
	right: 0;
	margin: auto;
	color:#e7f0ed;
}

.flow_list > ul > li:last-child::before{
    content: "";
}


.flow_list > ul > li > ul{
	border-top:1px solid #b2c9c3;
	margin: 30px 0 0 0;
	padding: 10px 0 0 0;
}


.flow_list > ul > li > ul > li{
	width: 70%;
	box-sizing: border-box;
	padding: 20px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-align:center;
    -moz-box-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    align-items:center;
}
.flow_list > ul > li > ul > li:nth-child(odd){
	width: 30%;
}

.flow_list > ul > li > ul > li img{
	width: 100%;
	max-width: 100%;
}

.num{
	font-size:28px;
	font-family: 'Dancing Script', cursive;
	color:#b2c9c3;
	display: inline-block;
}

.flow h3{
	display: inline-block;
	color: #4b7469;
	font-size:20px;
	padding: 0 0 0 10px;
}

@media screen and (max-width: 800px){
  .flow_list > ul > li{
      padding: 20px;
      margin: 0 0 60px 0;
  }
	
  .flow_list > ul > li > ul{
      margin: 20px 0 0 0;
      padding: 5px 0 0 0;
  }

  .flow_list > ul > li > ul > li{
      width: 100%;
      padding: 10px;
  }
  .flow_list > ul > li > ul > li:nth-child(odd){
      width: 90%;
	  max-width: 360px;
	  margin: 0 auto;
  }

}
@media screen and (max-width: 600px){
  .flow_list > ul > li > ul{
      margin: 10px 0 0 0;
      padding: 5px 0 0 0;
  }
	
  .num{
      font-size:20px;
  }

  .flow h3{
      font-size:18px;
      padding: 0 0 0 5px;
  }
}