@charset "utf-8";
/*------------------------------------------------------------
	service
------------------------------------------------------------*/
.pageTitle {
	background-image: url("../img/service/main_img.jpg");
}
.service {
    margin: 91px 0;
}
.service .ttlBox {
    margin-bottom: 96px;
    max-width: 1206px;
}
.service .ttl {
    margin-bottom: 7px;
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.vtn .service .ttl {
    letter-spacing: 0;
}
.service .subTxt {
    letter-spacing: 0.05em;
    line-height: 1.75;
}
.serviceList li {
    margin-bottom: 151px;
    position: relative;
}
.vtn .serviceList li {
    margin-bottom: 251px;
    position: relative;
}
.serviceList .photo {
    width: 50%;
}
.serviceList .textBox {
    padding: 42px 25px 64px 77px;
    width: 600px;
    position: absolute;
    left: 43.18%;
    top: 21%;
    box-sizing: border-box;
    background-color: #EBEBEB;
    box-shadow: -19px -17px 0 rgba(255, 255, 255, 1);
}
.serviceList .textBox h2 {
    margin-bottom: 68px;
    position: relative;
    font-size: 3.6rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.serviceList .textBox h2::before {
    width: 136px;
    height: 136px;
    position: absolute;
    top: -82px;
    left: -153px;
    display: block;
    content: "";
    background: url("../img/service/img01.png") no-repeat left top / 100%;
}
.serviceList .textBox h2::after {
    width: 486px;
    height: 1px;
    position: absolute;
    bottom: -20px;
    left: -35px;
    display: block;
    content: "";
    background-color: #fff;
}
.serviceList .textBox p {
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    line-height: 1.67;
}
.serviceList .textBox p:last-child {
    margin-bottom: 0;
}
.textBox h2{
    font-size: 1.4rem;
}
@media all and (min-width: 1000px) {
    .serviceList li:nth-child(2n) .photo {
        margin-left: auto;
        width: calc(50% + 54px);
    }
    .serviceList li:nth-child(2n) .textBox {
        padding: 51px 53px 78px 88px;
        width: 594px;
        right: 43.2%;
        top: 14%;
        left: auto;
        box-shadow: 16px -19px 0 rgba(255, 255, 255, 1);
    }
    .serviceList li:nth-child(2n) .textBox h2 {
        margin-bottom: 65px;
    }
    .serviceList li:nth-child(2n) .textBox h2::before {
        top: -88px;
        left: -159px;
    }
    .serviceList li:nth-child(2n) .textBox h2::after {
        width: 446px;
        bottom: -16px;
    }
    .serviceList li:nth-child(3) .photo {
        width: calc(50% + 47px);
    }
}
@media all and (min-width: 1000px) and (max-width: 1246px) {
    .service .ttlBox {
        margin: 0 20px 96px;
    }
    .serviceList .textBox {
        padding: 42px 14px 39px 46px!important;
        width: 525px!important;
        left: 39%;
    }
    .serviceList li:nth-child(2n) .textBox {
        right: 39%;
    }
    .serviceList .textBox h2 {
        margin-bottom: 36px!important;
    }
    .serviceList .textBox h2::before {
        width: 116px!important;
        height: 117px!important;
        top: -82px!important;
        left: -121px!important;
    }
}
@media all and (max-width: 999px) {
    .pageTitle {
        background-image: url("../img/service/sp_main_img.jpg");
    }
    .service {
        margin: 48px 0 10px;
    }
    .service .ttlBox {
        margin-bottom: 38px;
    }
    .service .ttl {
        margin: 0 -15px 29px 0;
        font-size: 2.4rem;
        line-height: 1.75;
    }
    .service .subTxt {
        letter-spacing: 0.05em;
        line-height: 1.934;
    }
    .serviceList li {
        margin-bottom: 0;
        position: relative;
    }
    .vtn .serviceList li {
        margin-bottom: 0;
        position: relative;
    }
    .serviceList li:last-child {
        margin-bottom: 0;
    }
    .serviceList .photo {
        width: auto;
    }
    .serviceList .photo img {
        width: 100%;
    }
    .serviceList .textBox {
        padding: 23px 25px 34px 37px;
        margin-left: 11.7%;
        width: auto;
        position: static;
        transform: translateY(-88px);
        box-sizing: border-box;
        background-color: #EBEBEB;
        box-shadow: -11px -10px 0 rgb(255 255 255), -11px 0 0 rgb(255 255 255), 0 -10px 0 rgb(255 255 255);
    }
    .serviceList .textBox h2 {
        margin: 0 22px 33px;
        position: relative;
        font-size: 2.8rem;
        font-weight: bold;
        letter-spacing: 0.05em;
    }
    .serviceList .textBox h2::before {
        width: 65px;
        height: 65px;
        top: -44px;
        left: -79px;
    }
    .serviceList .textBox h2::after {
        width: 117%;
        height: 1px;
        bottom: -8px;
        left: -25px;
    }
    .serviceList .textBox p {
        margin-bottom: 27px;
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        line-height: 1.93;
    }
    .serviceList .textBox p:last-child {
        margin-bottom: 0;
    }
}