@charset "utf-8";
.cont_img h1 {
    background-image: url(../images/page_title.png);
}

@media only screen and (max-width: 768px) {
    .cont_img h1 {
        background-image: url(../images/page_title_sp.png);
    }
}


/*============================
RESET
============================*/

.box h3 {
    margin: 0;
    padding: 0;
    border: none;
}


/*============================
BASE
============================*/

.box {
    margin-bottom: 40px;
}

.box:last-of-type {
    margin-bottom: 0;
}

.box .photo {
    display: flex;
    -js-display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box .photo .before,
.box .photo .working,
.box .photo .after {
    width: 232px;
    position: relative;
}

/*
.box .photo .after {
    width: 700px;
    position: relative;
    margin-top: 2px;
}
*/

.box .photo .before::after,
.box .photo .working::after,
.box .photo .after::after {
    content: "";
    width: 130px;
    height: 47px;
    background: url(../images/icon_before.png) no-repeat top left;
    background-size: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.box .photo .working::after {
    background-image: url(../images/icon_working.png);
}

.box .photo .after::after {
    background-image: url(../images/icon_after.png);
}

.box .photo .before img,
.box .photo .working img,
.box .photo .after img {
    width: 100%;
}

.box .text {
    background: #eee;
    padding: 15px 20px;
    margin-top: 2px;
}

.box .text p {
    font-size: 16px;
    font-weight: bold;
}

@media only screen and (max-width: 768px) {
    .box {
        margin-bottom: 20px;
    }
    .box .text ul li {
        float: none;
    }
    .box .text ul li::after {
        display: none;
    }
    .box .photo .before,
    .box .photo .working,
    .box .photo .after {
        width: 100%;
    }
    
    .box .photo .working,
    .box .photo .after{
        margin-top: 2px;
    }
    
    /* 実績の写真 画像置換 */
    .box .photo .before img,
    .box .photo .working img,
    .box .photo .after img {
        width: 100%;
        padding-top: 59.70%;
        height: 0;
        overflow: hidden;
        background: url(../images/before01_sp.jpg) no-repeat left top;
        background-size: 100%;
    }
    /* 実績１ */
    .box .photo .before img.before01 {
        background-image: url(../images/before01_sp.jpg);
    }
    .box .photo .working img.working01 {
        background-image: url(../images/working01_sp.jpg);
    }
    .box .photo .after img.after01 {
        background-image: url(../images/after01_sp.jpg);
    }
    
    /* 実績２ */
    
    .box .photo .before img.before02 {
        background-image: url(../images/before02_sp.jpg);
    }
    .box .photo .working img.working02{
        background-image: url(../images/working02_sp.jpg);
    }
    .box .photo .after img.after02 {
        background-image: url(../images/after02_sp.jpg);
    }
    /* 実績３ */
    
    .box .photo .before img.before03 {
        background-image: url(../images/before03_sp.jpg);
    }
    .box .photo .working img.working03 {
        background-image: url(../images/working03_sp.jpg);
    }
    .box .photo .after img.after03 {
        background-image: url(../images/after03_sp.jpg);
    }
    
    /* 実績4 */
    
    .box .photo .before img.before04 {
        background-image: url(../images/before04_sp.jpg);
    }
    .box .photo .working img.working04 {
        background-image: url(../images/working04_sp.jpg);
    }
    .box .photo .after img.after04 {
        background-image: url(../images/after04_sp.jpg);
    }
    
    /* ビフォー・アフターのアイコン */
    .box .photo .before::after,
    .box .photo .working::after,
    .box .photo .after::after {
        width: 100px;
        height: 0;
        padding-top: 47px;
        background-image: url(../images/icon_before_sp.png);
    }
    .box .photo .working::after {
        background-image: url(../images/icon_working_sp.png);
    }
    .box .photo .after::after {
        background-image: url(../images/icon_after_sp.png);
    }

}