@charset "utf-8";
#post-purchase .mvarea{
    background: url(/html/user_data/assets/img/post-purchase/post-purchase_kv.webp) no-repeat center;
    background-size: cover;
}
#post-purchase .tel{
    margin: 30px 0;
}

#post-purchase .tel a{
    font-size: clamp(20px, 4.5vw, 30px);
    line-height: 1;
}

.center.manual__text{
    position: relative;
    margin-top: 120px;
}
.center.manual__text::before{
    display: block;
    content: "";
    background: url(/html/user_data/assets/img/post-purchase/manual.svg) no-repeat center;
    width: 46px;
    height: 56px;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%);
}
.manual__link{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}
.manual__link a{
    background: var(--color-mainColor);
    color: var(--color-white);
    padding: 20px 16px 16px 20px;
    line-height: 1;
    border-radius: 3px;
}
.overhaul__box{
    display: flex;
    gap: 30px;
    align-items: center;
}
.overhaul__box img{
    width: 40%;
}
.overhaul__box .overhaul__text{
    width: calc(60% - 30px);
}
.overhaul__box .overhaul__text p{
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.flow .overhaul__box{
    align-items: start;
}
.overhaul__img{
    display: block;
    width: 30%;
}
.overhaul__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.overhaul__ul{
    list-style: none;
    margin-bottom: 0;
    margin-top: 10px;
}
.overhaul__step{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.overhaul__step__titleBox{
    display: flex;
    width: 30%;
    align-items: center;
}
.overhaul__step__box{
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--color-mainColor);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}
.overhaul__step__number{
    font-size: 40px;
}
.overhaul__step__title {
    text-align: left;
    color: var(--color-mainColor);
    display: flex;
    align-items: center;
    margin: 0;
}
.overhaul__step__text{
    flex: 1;
}
.point__box{
    display: grid;
    gap: 50px 30px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 30px;
}
.point__box__content{
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 20px;
    justify-items: center;
}
.point__box__title{
    margin-bottom: 0;
}

.price__table{
    width: 100%;
    margin-bottom: 70px;
}
.price__icon{
    color: var(--color-white);
    background: var(--color-mainColor);
    padding: 5px 20px 3px;
    border-radius: 50px;
}
.price_table__name,.price_table__price,.price_table__deadline{
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
}
.price_table__name{
    width: 70%;
}
.price_table__price{
    width: 15%;
}
.price_table__deadline{
    width: 15%;
}
.contactImg{
    text-align: center;
    margin-bottom: 20px;
}
.contactImg__text{
    text-align: center;
    margin-top: 20px;
}


@media screen and (max-width:767px){
    .post-purchase.contact p.center{
        text-align: justify;
    }
    .manual__link{
        flex-direction: column;
        text-align: center;
    }
    .overhaul__box{
        flex-direction: column;
    }
    .overhaul__box img{
        width: 100%;
        order: 1;
    }
    .overhaul__box .overhaul__text{
        width: 100%;
        order: 2;
    }
    .overhaul__ul{
        padding: 0;
    }
    .overhaul__img{
        width: 100%;
        height: 60vw;
    }
    .overhaul__step{
        flex-direction: column;
        gap: 20px;
    }
    .overhaul__step__titleBox{
        width: 100%;
    }
    .point__box{
        grid-template-columns: 1fr;
    }
    .price__table tr{
        display: flex;
        flex-direction: column;
    }
    .price_table__name,.price_table__price,.price_table__deadline{
        width: 100%;
        padding: 20px;
    }
    .price_table__name{
        background: var(--color-mainColor);
        color: var(--color-white);
    }
    .price__table tr:first-of-type{
        display: none;
    }
    .price_table__price::before{
        display: inline-block;
        content: "料金";
        margin-right: 1.5rem;
    }
    .price_table__deadline::before{
        display: inline-block;
        content: "納期";
        margin-right: 1.5rem;
    }
}