@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 769px) {

.headArea {
background: url("../images/flow/hed_img.jpg") center center no-repeat;
background-size: cover;
}

.flow_wrap {
max-width: 1140px;
margin: 0 auto;
}

.flow_box {
position: relative;
padding-bottom: 88px;
padding-left: 200px;
}

.flow_box:before {
position:absolute;
left:60px;
width:1px;
height:100%;
background-color:#c1c1c1;
content:""
}

.flow_box:last-of-type::before {
content: none;
}

.flow_box_icon {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 120px;
border: 1px solid #c1c1c1;
border-radius: 50%;
background-color: #fff;
line-height: 120px;
text-align: center;
}

.flow_box_icon img{
width: 48%;
height:auto;
}

.flow_box_tit {
display: block;
font-size: 28px;
font-weight: 500;
line-height: 1;
}

.flow_box_tit span{
display: block;
color: #7e7e7e;
font-size: 18px;
font-family: 'Lato', sans-serif;
font-weight: 500;
padding-bottom: 15px;
}

.flow_box_txt {
padding-top: 24px;
margin: 0 0 30px;
}

.flow_img {
width: 35%;
float: right;
margin: 0 0 3% 3%;
}

.flow_img p{
font-size: 0.8em;
text-align: center;
}

}



/*sp*/
@media only screen and (max-width: 768px) {

.headArea {
background: url("../images/flow/hed_img.jpg") center center no-repeat;
background-size: cover;
}


.flow_wrap {
max-width: 90%;
margin: 0 auto;
}

.flow_box {
position: relative;
padding-bottom: 64px;
padding-left: 100px;
}

.flow_box:before {
position: absolute;
left: 40px;
width: 1px;
height: 100%;
background-color: #c1c1c1;
content: "";
}

.flow_box:last-of-type::before {
content: none;
}

.flow_box_icon {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border: 1px solid #c1c1c1;
border-radius: 50%;
background-color: #fff;
line-height: 80px;
text-align: center;
}

.flow_box_icon img{
width: 36%;
height:auto;
}

.flow_box_tit {
display: block;
font-size: 20px;
font-weight: 500;
line-height: 1;
}

.flow_box_tit span{
display: block;
color: #7e7e7e;
font-size: 16px;
font-family: 'Lato', sans-serif;
font-weight: 500;
padding-bottom: 15px;
}

.flow_box_txt {
padding-top: 24px;
margin: 0 0 30px;
}

.flow_img {
width: 60%;
margin:30px auto 0;
}

.flow_img p{
font-size: 0.8em;
text-align: center;
}

}