@charset "utf-8";

body {
    background-color: #eff0eb;
}

.cont h1 {
    background-image: url(../images/title.png);
}

#business .lead {
    font-size: 24px;
    font-weight: bold;
}

#business p {
    margin-bottom: 20px;
}

#business div {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 25px;
}

#business div > img {
    float: left;
}

#business div p {
    float: right;
    width: 450px;
}

#business div p.catch {
    background: url(../images/timing_catch.png) no-repeat center center #494441;
    padding-top: 60px;
    width: 450px;
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
}

#business div p.lead {
    background: url(../images/timing_lead.png) no-repeat center center;
    padding-top: 60px;
    width: 450px;
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
}

#business div p:last-child {
    margin-bottom: 0;
}

#business ul {
    font-size: 18px;
}

#business ul li {
    position: relative;
    margin-left: 30px;
}

#business ul li::before {
    content: url(../images/check_list.png);
    position: absolute;
    left: -30px;
    bottom: -2px;
}

#flow h2 {
    position: relative;
    border-left: 8px solid #494441;
    background: transparent;
}

#flow h2::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    border-bottom: 2px solid #fff;
}

#flow ul {
    margin-bottom: 50px;
}

#flow ul li {
    width: 82px;
    float: left;
    margin-right: 21px;
    position: relative;
}

#flow ul li p {
    background: url(../images/flow1.png) no-repeat center center #494441;
    height: 0;
    padding-top: 280px;
    overflow: hidden;
}

#flow ul li:nth-child(2) p {
    background-image: url(../images/flow2.png)
}

#flow ul li:nth-child(3) p {
    background-image: url(../images/flow3.png)
}

#flow ul li:nth-child(4) p {
    background-image: url(../images/flow4.png)
}

#flow ul li:nth-child(5) p {
    background-image: url(../images/flow5.png)
}

#flow ul li:nth-child(6) p {
    background-image: url(../images/flow6.png)
}

#flow ul li:nth-child(7) p {
    background-image: url(../images/flow7.png)
}

#flow ul li::after {
    content: url(../images/triangle.png);
    position: absolute;
    right: -16px;
    top: 118px;
}

#flow ul li:last-child::after {
    content: none;
}

#flow ul li:last-child {
    margin-right: 0;
}

#flow div {
    background-color: #494441;
    padding: 20px;
}

#flow h3:last-of-type {
    background: url(../images/estimate_title.png) no-repeat center center #fff;
    padding: 180px 0 0 0;
    width: 160px;
    height: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    border-left: 0;
    border-bottom: 0;
    float: left;
}

#flow div.clearfix p {
    width: 480px;
    float: right;
    overflow: hidden;
    margin-bottom: 16px;
}

#flow .clearfix:last-child p.lead {
    background: url(../images/estimate_lead.png)#ff6c3f;
    padding-top: 40px;
    width: 480px;
    height: 0;

}

#flow .clearfix:last-child p:nth-last-of-type(2) {
    background: url(../images/estimate_text.png) no-repeat center center;
    padding-top: 90px;
    width: 480px;
    height: 0;
}

#flow .clearfix:last-child p:last-of-type {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
}

.link a {
    background: url(../../images/common/btn/contact_btn.png) no-repeat center center #494441;
    background-size: 100%;
    padding-top: 50px;
    width: 310px;
    height: 0;
    margin: 30px auto 0;
    display: block;
    overflow: hidden;
    border-radius: 5px;
}


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

    .cont h1 {
        background-image: url(../images/title_sp.png);
    }
    #business .lead {
        font-size: 21px;
    }

    #business .lead br {
        display: none;
    }

    #business p {
        margin-bottom: 15px;
    }

    #business div {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 25px;
    }

    #business div > img {
        float: none;
        margin-bottom: 20px;
        background: url(../images/timing_img_sp.jpg) no-repeat center center;
        background-size: 100%;
        padding-top: 42.3728813%;
        width: 100%;
        height: 0;
        overflow: hidden;
    }

    #business div p {
        float: none;
        width: 100%;
    }

    #business div p.catch {
        background-image: url(../images/timing_catch_sp.png);
        background-size: 100%;
        padding-top: 13.559322%;
        width: 100%;
    }

    #business div p.lead {
        background-image: url(../images/timing_lead_sp.png);
        background-size: 100%;
        padding-top: 29.4915254%;
        width: 100%;
    }

    #business ul {
        font-size: 18px;
    }

    #business ul li {
        position: relative;
        margin-left: 30px;
    }

    #business ul li::before {
        background-image: url(../images/check_list_sp.png);
        content: "";
        display: block;
        background-size: contain;
        height: 20px;
        width: 24px;
        left: -30px;
        bottom: auto;
        top: 4px;
    }

    #flow h2 {
        position: relative;
        border-left: 8px solid #494441;
        background: transparent;
    }

    #flow h2::after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        height: 0;
        width: 100%;
        border-bottom: 2px solid #fff;
    }

    #flow ul {
        margin-bottom: 50px;
        overflow: hidden;
    }
    
    #flow ul li {
        float: none;
        margin-right: 0;
        margin-bottom: 25px;
        width: 100%;
    }

    #flow ul li p {
        background: url(../images/flow1_sp.png) no-repeat center center #494441;
        background-size: 100%;
        height: 0;
        padding-top: 14.9253731%;
    }

    #flow ul li:nth-child(2) p {
        background-image: url(../images/flow2_sp.png)
    }

    #flow ul li:nth-child(3) p {
        background-image: url(../images/flow3_sp.png)
    }

    #flow ul li:nth-child(4) p {
        background-image: url(../images/flow4_sp.png)
    }

    #flow ul li:nth-child(5) p {
        background-image: url(../images/flow5_sp.png)
    }

    #flow ul li:nth-child(6) p {
        background-image: url(../images/flow6_sp.png)
    }

    #flow ul li:nth-child(7) p {
        background-image: url(../images/flow7_sp.png)
    }

    #flow ul li::after {
        content: "";
        background-image: url(../images/triangle_sp.png);
        background-size: contain;
        width: 22px;
        height: 17px;
        display: inline-block;
        right: 48.7313433%;
        top: auto;
        bottom: -22px;
    }

    #flow ul li:last-child::after {
        content: none;
    }

    #flow ul li:last-child {
        margin-right: 0;
        margin-bottom: 0;
    }

    #flow div {
        background-color: #494441;
        padding: 20px;
    }

    #flow h3:last-of-type {
        background-image: url(../images/estimate_title_sp.png) ;
        background-size: 100%;
        padding: 24.5762711% 0 0 0;
        width: 100%;
        margin-bottom: 20px;
        border-left: 0;
        border-bottom: 0;
        float: none;
    }

    #flow div.clearfix p {
        width: 100%;
        float: none;
    }

    #flow .clearfix:last-child p.lead {
        background-image: url(../images/estimate_lead_sp.png);
        background-size: 100%;
        padding-top: 10.1694915%;
        width: 100%;
        height: 0;

    }

    #flow .clearfix:last-child p:nth-last-of-type(2) {
        background-image: url(../images/estimate_text_sp.png) ;
        background-size: 100%;
        padding-top: 34.5762711%;
        width: 100%;
    }

    #flow .clearfix:last-child p:last-of-type {
        font-size: 14px;
        color: #fff;
        margin-bottom: 0;
    }

    .link a {
        background: url(../../images/common/btn/contact_btn_sp.png) no-repeat center center #494441;
        background-size: 100%;
        padding-top: 17.9104477%;
        width: 100%;
        margin: 15px auto 0;
    }

}