@charset "utf-8";

@media (min-width: 769px) {
    .common_mv::before {
        background: url(../../img/green-service/area/mv.jpg) no-repeat 50% / cover;
    }
}
@media (max-width: 768px) {
    .common_mv::before {
        background: url(../../img/green-service/area/mv_sp.jpg) no-repeat 50% / cover;
    }
}

.lead::before {
    background: url(../../img/green-service/area/lead_bg.svg) no-repeat 100% 0 / contain;
    right: 0;
}
@media (min-width: 769px) {
    .lead::before {
        width: 563rem;
        max-width: 563px;
        padding-top: 480rem;
        top: -72px;
    }
}
@media (max-width: 768px) {
    .lead::before {
        width: 469rem;
        padding-top: 400rem;
        top: -52px;
    }
}

/* area */
.area_img {
    filter: drop-shadow(0 0 34.45px #ccc);
}
.area_list > li + li {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-green);
}
.area_list_ttl {
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--color-green);
}
.area_list_txt {
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: var(--color-black);
}
@media (min-width: 1330px) {
    .area_inner {
        display: flex;
        gap: 40rem;
    }
    .area_img_wrap {
        width: calc(100% - 40rem - 580px);
    }
    .area_list {
        width: 584px;
    }
    .area_list_ttl {
        font-size: 24px;
    }
    .area_list_txt {
        margin-top: 8px;
        font-size: 16px;
    }
}
@media (max-width: 1329px) and (min-width: 769px) {
    .area_list {
        margin-top: 24px;
    }
    .area_list_ttl {
        font-size: 24px;
    }
    .area_list_txt {
        margin-top: 8px;
        font-size: 16px;
    }
}
@media (max-width: 768px) {
    .area_img_wrap {
        width: 100%;
    }
    .area_list {
        margin-top: 24px;
    }
    .area_list_ttl {
        font-size: 20px;
    }
    .area_list_txt {
        margin-top: 8px;
        font-size: 14px;
    }
}