@charset "utf-8";

/*
 * File    : rwd-usecases.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    .usecases-resources { padding: 120rem 0; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    .usecases-outcomes { padding: 100rem 0; }
    .usecases-outcomes__rate > li { padding: 40rem; align-items: center; }

    .usecases-achievement { padding: 100rem 0; }

    .usecases-feature { padding: 100rem 0; }

    .usecases-resources { padding: 100rem 0; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    .usecases-outcomes { padding: 80rem 0; }
    .usecases-outcomes__rate { flex-direction: column; }
    .usecases-outcomes__rate > li { padding: 30rem; }
    .usecases-outcomes__rate > li + li { border-top: 16rem solid var(--color-gray-100); }
    .usecases-outcomes__rate-number { width: 160rem; }
    .usecases-outcomes__rate-desc { flex: 1; }

    .usecases-achievement { padding: 80rem 0; }

    .usecases-feature { padding: 80rem 0; }

    .usecases-resources { padding: 80rem 0; }
    .usecases-resources .jt-board__grid { display: flex; overflow: auto; margin: 0 -30rem; padding: 0 30rem; scrollbar-width: none; }
    .usecases-resources .jt-board__grid::-webkit-scrollbar { display: none; }
    .usecases-resources .jt-board__grid > li { flex-shrink: 0; width: 344rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    .usecases-outcomes { padding: 60rem 0; }
    .usecases-outcomes__rate { margin-top: 20rem; }
    .usecases-outcomes__rate > li { padding: 20rem; }
    .usecases-outcomes__rate > li + li { border-width: 10rem; }
    .usecases-outcomes__rate-number { width: 100rem; }

    .usecases-achievement { padding: 60rem 0; }

    .usecases-feature { padding: 60rem 0; }

    .usecases-resources { padding: 60rem 0; }
    .usecases-resources .jt-board__grid { margin: 0 -20rem; padding: 0 20rem; gap: 10rem; }
    .usecases-resources .jt-board__grid > li { width: 280rem; }
}