@charset "UTF-8";
/*------------------------------

  採用の流れCss

------------------------------*/
.flow{
    position: relative;
}
.flow:after{
    content: '';
    position: absolute;
    top: 0;
    left: 61px;
    z-index: -1;
    width: 1px;
    height: 100%;
    border-right: dashed 1px #01a797;
}
.flow li{
    position: relative;
}
.flow li:after{
    content: url("../img/ico_next.png");
    line-height: 0;
    display: block;
    width: auto;
    max-width: 122px;
    margin: 0 auto 0 0;
}
.flow li:last-child:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background: #fff;
}
.flow .flex{
    justify-content: space-between;
}
.flow .num{
    width: 15%;
    min-width: 122px;
    max-width: 122px;
    height: 122px;
    font-family: Arial, Helvetica, "sans-serif";
    font-weight: bold;
    
    background: #01a797;
    color: #ffef00;
    border-radius: 50%;
    
    padding: 28px 0;
    position: relative;
    z-index: 1;
}
.flow .num span{
    display: block;
    font-size: 40px;
}
.flow .txt{
    min-height: 160px;
    width: 85%;
    text-align: left;
}
.flow .txt p{
    /*width: 65%;*/
    padding-right: 40px;
}
.flow .txt .img{
    width: 35%;
}


/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
    .flow:after {
        left: 39px;
    }
    .flow li:after {
        max-width: 80px;
    }
    .flow .num{
        width: 20%;
        min-width: 80px;
        max-width: 80px;
        height: 80px;
        padding: 15px 0;
    }
    .flow .num span{
        font-size: 32px;
    }
    .flow .txt{
        min-height: 130px;
        width: 80%;
    }
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
    .flow .num{
        width: 30%;
    }
    .flow .txt{
        min-height: 100px;
        width: 70%;
    }
    .flow .txt p{
        width: 100%;
        padding-right: 0;
    }
    .flow .txt .img{
        width: 100%;
        margin: 15px 0;
    }
}