/* メインビジュアル */
/* ************************************************************* */
.page-mv {
    background-image: url('../img/work-contents/work-contents__mv.jpg');
}

/* トータルソリューション */
/* ************************************************************* */
.solution {
    margin-bottom: 67px;
}

.gradation-heading-rl--green {
    display: inline-block;
    padding: 0.2em 0;
    margin-bottom: 50px;
    width: 100%;
    color: #fff;
    font-size: 24px;
    text-align: center;
    background: linear-gradient(to right, #fff 0%, #009D8E 30%, #009D8E 70%, #fff 100%);
}

/* 取扱機器 */
/* ************************************************************* */
#production {
    margin-top: -220px;
    padding-top: 220px;
}

.production .page-heading {
    margin-bottom: 30px;
}

.production__desc {
    font-size: 19px;
    text-align: center;
    line-height: 1.8em;
    margin-bottom: 40px;
}

.production__flex-three-col {
    display: flex;
    -moz-column-gap: 40px;
         column-gap: 40px;
    margin-bottom: 56px;
}

.production__item {
    width: 310px;
}

.production__item figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 310/ 284;
    border: 1px solid #898989;
}

.production__name {
    text-align: left;
    color: #fff;
    padding: 5px 0 5px 15px;
    margin-bottom: 28px;
    font-size: 17px;
    background: linear-gradient(to right, rgba(0, 91, 171, 0.7), #005BAB, #fff);
}

.production__flex-has-txt {
    margin-bottom: 56px;
}

.production__fig-txt-flex {
    display: flex;
    -moz-column-gap: 23px;
         column-gap: 23px;
}

.production__fig-flex {
    display: flex;
    -moz-column-gap: 40px;
         column-gap: 40px;
}

.production__txt-flex {
    display: flex;
    -moz-column-gap: 15px;
         column-gap: 15px;
}

.production__txt-flex p {
    font-size: 15px;
    white-space: nowrap;
    line-height: 1.75em;
}


@media screen and (max-width: 1221px) {
    /* トータルソリューション */
    /* ************************************************************* */
    .solution {
        margin-bottom: calc((67 / 1220) * 100vw);
    }

    .gradation-heading-rl--green {
        margin-bottom: calc((50 / 1220) * 100vw);
        font-size: clamp(18px, calc((24 / 1220) * 100vw), 24px);
    }

    /* 取扱機器 */
    /* ************************************************************* */
    #production {
        margin-top: calc((-220 / 1220) * 100vw);
        padding-top: calc((220 / 1220) * 100vw);
    }

    .production .page-heading {
        margin-bottom: calc((30 / 1220) * 100vw);
    }

    .production__desc {
        font-size: clamp(12px, calc((19 / 1220) * 100vw), 19px);
        margin-bottom: calc((40 / 1220) * 100vw);
    }

    .production__flex-three-col {
        -moz-column-gap: calc((40 / 1220) * 100vw);
             column-gap: calc((40 / 1220) * 100vw);
        margin-bottom: calc((56 / 1220) * 100vw);
    }

    .production__item {
        width: calc((310 / 1220) * 100vw);
    }

    .production__name {
        padding: calc((5 / 1220) * 100vw) 0 calc((5 / 1220) * 100vw) calc((15 / 1220) * 100vw);
        margin-bottom: calc((28 / 1220) * 100vw);
        font-size: clamp(13px, calc((17 / 1220) * 100vw), 17px);
    }

    .production__flex-has-txt {
        margin-bottom: calc((56 / 1220) * 100vw);
    }

    .production__fig-txt-flex {
        -moz-column-gap: calc((23 / 1220) * 100vw);
             column-gap: calc((23 / 1220) * 100vw);
    }

    .production__fig-flex {
        -moz-column-gap: calc((40 / 1220) * 100vw);
             column-gap: calc((40 / 1220) * 100vw);
    }

    .production__txt-flex {
        -moz-column-gap: calc((15 / 1220) * 100vw);
             column-gap: calc((15 / 1220) * 100vw);
    }

    .production__txt-flex p {
        font-size: clamp(12px, calc((15 / 1220) * 100vw), 15px);
    }
}

@media screen and (max-width: 1441px) {
    .production__txt-flex {
        flex-wrap: wrap;
        row-gap: 7px;
    }
}

@media screen and (max-width: 750px) {
    #production {
        margin-top: calc((-80 / 750) * 100vw);
        padding-top: calc((80 / 750) * 100vw);
    }

    .production__txt-flex p {
        white-space: normal;
    }

    .production__flex-three-col {
        row-gap: calc((40 / 1220)* 100vw);
        flex-wrap: wrap;
        justify-content: center;
    }

    .production__flex-three-col .production__item {
        min-width: 185px;
    }
}

@media screen and (max-width: 600px) {
    .production__fig-flex {
        flex-direction: column;
        row-gap: 10px;
    }
    
    .production__fig-flex .production__item {
        min-width: 185px;
    }

    .production__fig-txt-flex {
        width: 410px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {
    #production {
        margin-top:-37px;
        padding-top:37px;
    }

    .page-mv {
        background-image: url('../img/work-contents/work-contents__mv--sp.jpg');
        background-position: center;
    }

    .gradation-heading-rl--green {
        padding: 0.157em 0;
        margin-bottom: 15px;
        font-size: 13px;
    }

    .production .page-heading {
        margin-bottom: 9px;
    }

    .production__desc {
        font-size: 13px;
        margin-bottom: 23px;
    }
    
    .production__flex-three-col {
        flex-wrap: wrap;
        -moz-column-gap: 0;
             column-gap: 0;
        row-gap: 16px;
        margin-bottom: 28px;
    }

    .production__item {
        width: 100%;
    }

    .production__item figure {
        width: 100%;
        aspect-ratio: auto;
    }

    .production__name {
        padding: 5px 0 5px 13px;
        margin-bottom: 16px;
        font-size: 17px;
    }

    .production__fig-flex {
        -moz-column-gap: 0;
             column-gap: 0;
        row-gap: 20px;
        flex-direction: column;
    }
    
    .production__fig-txt-flex {
        row-gap: 20px;
        -moz-column-gap: 0;
             column-gap: 0;
        flex-direction: column;
        width: 100%;
    }

    .production__txt-flex {
        flex-direction: column;
        justify-content: center;
        row-gap: 20px;
    }

    .production__txt-flex p {
        text-align: center;
        font-size: 13px;
    }

    .production__flex-has-txt {
        margin-bottom: 20px;
    }
}