/* -----------------------------------------------------------
   法人・リフォームページ共通
-------------------------------------------------------------- */
@keyframes zoom-fade {
    0% {
        transform: translateX(-60px);
    }

    100% {
        transform: translateX(-240px);
    }
}

@keyframes zoom-fade-sp {
    0% {
        transform: translateX(-60px);
    }

    100% {
        transform: translateX(-120px);
    }
}

.service-box-user {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 80px 0 0;
}

.service-box-user.service-box-kitchen {
    gap: 40px 50px;
}

.service-box-user.service-box-wet {
    gap: 40px 35px;
}

.service-box-user.service-box-other {
    gap: 40px 35px;
}


.service-box-user.service-box-kitchen figure {
    width: calc( ( 100% - 100px ) / 3 );
}

.service-box-user.service-box-wet figure {
    width: calc( ( 100% - 105px ) / 4 );
}

.service-box-user.service-box-other figure {
    width: calc( ( 100% - 105px ) / 4 );
}

.service-box-user figure {
    flex-shrink: 0;
    /*transform: scale(0);*/
}

.service-box-user figcaption {
    text-align: center;
    margin: 10px 0 0;
    line-height: 1.5;
    letter-spacing: .05em;
    font-size: 2rem;
    font-weight: bold;
}

.service-box-user.service-box-kitchen figcaption{
    font-size: 2rem;
}

.service-box-user.service-box-wet figcaption{
    font-size: 1.8rem;
}

.service-box-user.service-box-other figcaption{
    font-size: 1.8rem;
}

.service-box-user figcaption small {
    display: block;
    font-size: 1.5rem;
    margin: 5px 0 0;
}

.service-box-user .annotation {
    font-size: 1.3rem;
    vertical-align: top;
    color: red;
}

.service-box-user .annotation-txt {
    color: red;
    display: block;
    font-size: 1.5rem;
}

.service-box-user img {
    width: 100%;
    aspect-ratio: 400/260;
}

@media screen and (max-width: 768px) {
    
    .service-box-user {
        gap: 40px 20px!important;
        margin: 30px 0 0!important;
    }

    .service-box-user figure {
        width: calc((100% - 20px) / 2)!important;
    }

    .service-box-user figcaption {
        font-size: 1.4rem!important;
        margin: 5px 0 0;
        text-align: left;
    }

}