/* top */
.fv {
    background-image: url(../../service/image/pc/top_img.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 70vh;
    width: 100%;
    position: relative;
}

.fv::after {
    content: "";
    background-image: url(../../concept/image/pc/fv-bottom.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 1rem;
    width: 100%;
    position: absolute;
    bottom: -1rem;
    left: 0;
}

@media (max-width: 767px) {
    .fv {
        background-image: url(../../service/image/pc/top_img.png);
        height: 90vh;
        width: 100%;
        background-position: 39% 10%;
    }
}

/* service */
.service {
    margin-top: 7rem;
}

@media (max-width: 767px) {
    .service {
        padding: 0 20px;
        margin-top: 7rem;
    }
}

.service-container {
    max-width: 1000px;
    margin: 0 auto;
}

.util-title {
    position: relative;
    z-index: 10000;
}

.util-title::before {
    content: "";
    background-image: url(../image/pc/line.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 25%;
    width: 30%;
    position: absolute;
    top: 50%;
    left: 5%;
}

@media (max-width: 767px) {
    .util-title::before {
        width: 24%;
    }
}

.util-title::after {
    content: "";
    background-image: url(../image/pc/line.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 25%;
    width: 30%;
    position: absolute;
    top: 50%;
    right: 5%;
}

@media (max-width: 767px) {
    .util-title::after {
        width: 24%;
    }
}

.service-container span::before {
    content: "";
    width: 60px;
    height: 2px;
    background: #707070;
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .service-container span::before {
        top: 3rem;
    }
}

.service-item {
    display: flex;
    position: relative;
}

@media (max-width: 767px) {
    .service-item {
        display: block;
    }
}

.service-item::after{
    content: "";
    background-image: url(../image/pc/service-bottom-line.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 33px;
    width: 100%;
    position: absolute;
    bottom: -15%;
    right: 0;
}

.service-img {
    width: 450px;
    max-width: 100%;
}

.service-content {
    display: block;
    margin-left: auto;
}

@media (max-width: 767px) {
    .service-content {
        width: 100%;
        margin-left: 0;
        margin-top: 1.5rem;
    }
}

.service-img-logo {
    margin-left: 1.4rem;
}

@media (max-width: 767px) {
    .service-img-logo {
        width: 90px;
        height: 70px;
    }
}

.service-content-text {
    text-align: center;
    display: flex;
}

@media (max-width: 767px) {
    .service-content-text {
        width: 100%;
        margin: 0 auto;
    }
}

.service-title-sub-1 {
    text-align: left;
    margin-left: 4rem;
}

@media (max-width: 767px) {
    .service-title-sub-1 {
        margin-left: 2.5rem;
    }
}

.service-title-sub-2 {
    text-align: left;
    margin-left: 5rem;
}

@media (max-width: 767px) {
    .service-title-sub-2 {
        margin-left: 3.5rem;
    }
}

.service-title-sub-3 {
    text-align: left;
    margin-left: 6rem;
}

@media (max-width: 767px) {
    .service-title-sub-3 {
        margin-left: 4.3rem;
    }
}

.service-title-sub-4 {
    text-align: left;
    margin-left: 6rem;
}

@media (max-width: 767px) {
    .service-title-sub-4 {
        margin-left: 4.2rem;
    }
}

.service-title-sub-5 {
    text-align: left;
    margin-left: 4rem;
}

@media (max-width: 767px) {
    .service-title-sub-5 {
        margin-left: 2rem;
    }
}

.service-title {
    text-align: left;
    font-size: 2.5rem;
    margin-top: .5rem;
}

@media (max-width: 767px) {
    .service-title {
        font-size: 1.8rem;
    }
}

.service-text {
    text-align: left;
    line-height: 2;
    position: relative;
}

.service-radius-img {
    width: 65%;
    margin-left: -.5rem;
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .service-radius-img {
        width: 65%;
        margin: 0 auto;
    }
}

.service-item:not(:last-child) {
    margin-bottom: 10rem;
}

.service-item:nth-child(even) {
    flex-direction: row-reverse;
}

@media (max-width: 767px) {
    .service-btn {
        text-align: center;
        z-index: 101;
    }

    .service-btn .util-link {
        margin-top: 3rem;
        z-index: 101;

    }
}