@charset "utf-8";


/*---------------------------------
    sub_sec-flow 
----------------------------------*/
/*---------- .flow_item_container  --*/
.sub_flow_container{
    max-width: 100rem;
    margin-inline: auto;
}
.flow_item{
    width: 100%;
        padding: 3rem;
        border-radius: 2rem;
        background: #fff;
    position: relative;
        align-items: flex-start;
}
    .flow_item:not(:last-of-type){
        margin-bottom: 5rem;
    }
    .flow_item:not(:last-of-type)::after{
        width: 0;
        height: 0;
            border-style: solid;
            border-right: 3rem solid transparent;
            border-left: 3rem solid transparent;
            border-top: 2.5rem solid var(--color_yellow);
            border-bottom: 0;
        position: absolute;
            left: 50%;
            bottom: -5rem;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        display: block;
        content: "";
    }
.flow_item .flow_img{
    width: 40rem;
        margin-right: 3rem;
    position: relative;
        left: 0;
}
/*--- flow_Notxt_block --*/
.flow_item .flow_txt{
    width: calc(100% - 43rem);
    display: table;
}
/*---flow_No_block--*/
.flow_item .flow_mds{
    padding: 0.8em 1em 0.8em 11rem;
    font-size: 2.8rem;
        line-height: 1.5;
        text-align: left;
        letter-spacing: 0.1em;
    display: block;
    position: relative;
}
    .flow_item .flow_mds::before{
        width: 10.5rem;
        height: 8rem;        
        position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        display: block;
        content: "";
    }
    .flow_item:nth-of-type(1) .flow_mds::before{ background: url(../images/flow_img01.png) no-repeat; background-size: contain;}
    .flow_item:nth-of-type(2) .flow_mds::before{ background: url(../images/flow_img02.png) no-repeat; background-size: contain;}
    .flow_item:nth-of-type(3) .flow_mds::before{ background: url(../images/flow_img03.png) no-repeat; background-size: contain;}
    .flow_item:nth-of-type(4) .flow_mds::before{ background: url(../images/flow_img04.png) no-repeat; background-size: contain;}
    .flow_item:nth-of-type(5) .flow_mds::before{ background: url(../images/flow_img05.png) no-repeat; background-size: contain;}
    .flow_item:nth-of-type(6) .flow_mds::before{ background: url(../images/flow_img06.png) no-repeat; background-size: contain;}

.flow_item .flow_mds .flow_No{
    font-size: 1.8rem;
        line-height: 1;
        text-align: left;
        font-weight: 700;
        display: block;
}
    .flow_item:nth-of-type(1) .flow_No{ color: var(--color_yellow);}
    .flow_item:nth-of-type(2) .flow_No{ color: var(--color_green);}
    .flow_item:nth-of-type(3) .flow_No{ color: var(--color_orange);}
    .flow_item:nth-of-type(4) .flow_No{ color: var(--color_blue);}
    .flow_item:nth-of-type(5) .flow_No{ color: var(--color_red);}
    .flow_item:nth-of-type(6) .flow_No{ color: var(--color_yellow);}

.flow_item .flow_mds .flow_No .step_No{
        margin-top: 0.1em;
    font-size: 2.6rem;
    font-weight: 700;
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width:960px) and (min-width:600px){

    .flow_item .flow_img{
        width: 30rem;
            margin-right: 3rem;
    }
    /*--- flow_Notxt_block --*/
    .flow_item .flow_txt{
        width: calc(100% - 33rem);
    }
}

/*-------------tab-----------------------*/
@media screen and (max-width:760px) and (min-width:600px){
    .sub_flow_container {
        max-width: 55rem;
    }
    .flow_item{
        flex-direction: column;
    }
    .flow_item .flow_img{
        width: 100%;
            margin-right: 3rem;
    }
    /*--- flow_Notxt_block --*/
    .flow_item .flow_txt{
        width: 100%;
    }
}
/*-------------SP-----------------------*/
@media screen and (max-width:599px){
    .sub_flow_container {
        max-width: unset;
    }
    .flow_item{
        padding: 4rem 4rem 6rem 4rem;
        flex-direction: column;
    }
    .flow_item .flow_img{
        width: 100%;
            margin-right: 3rem;
    }
    /*--- flow_Notxt_block --*/
    .flow_item .flow_txt{
        width: 100%;
    }
    .flow_item .flow_mds .flow_No{
        font-size: clamp(16px, 3.2rem, 32px);
    }
    .flow_item .flow_mds .flow_No .step_No{
        font-size: clamp(20px, 4rem, 40px);
    }
    .flow_item .flow_mds{
        padding: 0.8em 0 0.8em 16rem;
        padding-bottom: 0.5em;
        margin-bottom: 0;
        font-size: clamp(20px, 4.1rem, 41px);
    }
    .flow_item .flow_mds::before {
        width: 15rem;
        height: 10rem;
    }
}