@charset "utf-8";

/* -----------------------------------------------------------
    アフターサポート
-------------------------------------------------------------- */
/* -----------------------------------------------------------
    top-area トップエリア
-------------------------------------------------------------- */
.top-area{
    padding: 60px 0;
    padding: 80px 0 80px;
    /* text-align: center; */
    background-color: #fff;
    position: relative;
    z-index: 1;
    border-radius: 0 0 160px 0;
}

.top-area .inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-items: center;
}

.top-area .img-box{
    position: relative;
}

.top-area .img-box .main-img{
    width: 447px;
}

.top-area .img-box .deco-pink{
    position: absolute;
    width: 43px;
    top: 50px;
    right: 20px;
    animation: fuwa01 1.8s ease-in-out infinite alternate-reverse;
}

.top-area .img-box .deco-yel{
    top: -10px;
    position: absolute;
    width: 64px;
    right: -30px;
    animation: fuwa02 1.8s ease-in-out infinite alternate-reverse;
}


@keyframes fuwa01 {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(10%);
    }
}

@keyframes fuwa02 {
    0% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(-10%);
    }
}
.top-area .txt-box{
    width: 800px;
    width: 700px;
}

.top-area .sec-catch{
    margin: 0 0 15px;
}

.top-area .txt+.txt{
    margin: 15px 0 0;
}
@media screen and (max-width: 768px) {
    .top-area{
        padding: 40px 20px;
        padding: 0 0 30px;
        text-align: left;
        border-radius: 0 0 40px 0;
    }

    .top-area .inner{
        flex-wrap: wrap;
    }

    .top-area .txt-box{
        width: 100%;
        padding: 25px 20px 10px;
    }

    .top-area .sec-catch{
        font-size: 2.6rem;
    }

    .top-area .img-box{
        width: 70%;
        width: 100%;
        padding: 0 20px;
        text-align: center;
        /* position: absolute;
        top: -30px;
        left: 0; */
    }

    .top-area .img-box .deco-pink{
        right: 20px;
        right: auto;
        left: 0px;
    }
    .top-area .img-box .deco-yel{
        right: -30px;
        right: 5px;
    }

    .top-area .img-box .main-img{
        width: auto;
        height: 200px;
    }
}

/* -----------------------------------------------------------
    service-area サービス内容
-------------------------------------------------------------- */
/* .service-area .sec-catch{
    color: #fff;
}

.service-area .txt.top{
    color: #fff;
} */

.service-area::after{
    position: absolute;
    content: "";
    /* background: url(../img/bg-deco01.svg) no-repeat center / cover; */
    background: url(../img/bg-check-wht.png) repeat bottom right var(--beige);
    width: 150px;
    height: 150px;
    right: 0;
    top: -149px;
    z-index: 0;
}

.service-area .inner::before{
    position: absolute;
    content: "";
    background: url(../img/illust-consul.png) no-repeat center / cover;
    height: 252px;
    aspect-ratio: 270 / 252;
    right: 0;
    top: 60px;
}

.service-box{
    padding: 40px;
    background-color: var(--pink);
    border-radius: 25px;
    margin: 50px 0 0;
    position: relative;
}

.service-box .box-ttl{
    text-align: center;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: bold;
    color: #fff;
    margin: 0 0 40px;
    background-color: var(--main);
    border-radius: 5px;
    /* display: inline-block;
    width: 280px; */
    padding: 10px 0;
    /* background: url(../img/ribon.png) no-repeat center / contain;
    width: 292px;
    height: 43px;
    line-height: 43px;
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    margin: 0 auto; */
}

.service-area .service-list .service-item{
    padding: 0 0 30px;
    border-bottom: dashed 1px var(--pink2);
    border-radius: 0;
}

.service-area .service-list .service-item:last-of-type{
    border-bottom: none;
    padding: 0;
}


@media screen and (max-width: 768px) {
    .service-area{
        padding: 40px 0;
    }

    .service-area::before{
        width: calc(100% - 20px);
        height: calc(100% - 80px);
        min-width: auto;
        border-radius: 20px;
        top: 40px;
    }

    .service-area .inner{
        padding: 40px 20px;
    }

    .service-area .inner::before{
        display: none;
    }

    .service-area .inner .sec-ttl{
        margin: 0 0 20px;
    }

    .service-area .inner .sec-catch{
        font-size: 2.6rem;
        margin: 0 0 30px;
    }

    .service-box{
        padding: 30px 20px;
        margin: 15px 0 0;
        border-radius: 20px;
    }

    .service-box .box-ttl{
        font-size: 2.4rem;
        margin: 0 0 30px;
    }

    .service-area .service-list .service-item{
        flex-wrap: wrap;
        gap: 20px;
    }

    .service-area .service-list .service-item .img{
        width: 100%;
        height: 180px;
    }

    .service-area .service-list .service-item .txt-box{
        width: 100%;
    }

    .service-area .service-list .service-item .txt-box .ser-ttl{
        font-size: 2.0rem;
    }

    .service-area .service-list .service-item .txt-box .ser-catch{
        font-size: 1.8rem;
    }
}