@charset "utf-8";

/*
 * File       : rwd-home.css
 * Author     : STUDIO-JT (KMS)
 *
 * SUMMARY:
 * 1480px
 * 1200px
 * 1023px
 * 860px
 * 540px
 */



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

    /* ROLE */
    .main-role .main-section__message-item:nth-child(1) p > span:first-child br { display: block; }

    .main-role__viewer { width: 400rem; margin-top: 0; }

    /* CURATOR */
    .main-curator__balls { max-width: 530rem; max-height: 530rem; }
    .main-curator__movie { max-height: 530rem; }

    /* SOLUTION */
    .main-solution__horizontal-progress-bar { width: 360rem; }

    .main-solution__list-basic > b { padding: 36rem; }
    .main-solution__list-hover { width: calc(100% + 4px); padding: 36rem 58rem; align-items: center; text-align: center; background: color-mix(in srgb, var(--main-black) 70%, transparent); }
    .main-solution__list-title:has(.jt-icon) { justify-content: center; }
    .main-solution__list-desc br { display: none; }
    .main-solution__list-link { width: 38rem; margin-top: 10rem; }

}

@media (max-width: 1480px) and (orientation: landscape){

    /* SOLUTION */
    .main-solution__horizontal-title { margin-bottom: 50rem; }

    .main-solution__horizontal-progress { margin-top: 54rem; }

}



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

    /* LOADING */
    .loading-overlay__logo svg { width: 170rem; }

    /* ROLE */
    .main-role__viewer { width: 350rem; }

    /* CURATOR */
    .main-curator__balls { max-width: 470rem; max-height: 470rem; }
    .main-curator__movie { max-height: 470rem; }

    /* SOLUTION */
    .main-solution__list-hover { padding: 36rem; }

    .main-solution__horizontal-progress-bar { width: 320rem; }

}

@media (max-width: 1200px) and (orientation: landscape){

    /* SOLUTION */
    .main-solution__horizontal-title { margin-bottom: 42rem; }
    .main-solution__horizontal-title > p { margin-top: 12rem; }

    .main-solution__horizontal-progress { margin-top: 46rem; }

}



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

    /* LOADING */
    .loading-overlay__logo svg { width: 154rem; }

    /* ROLE */
    .main-role__viewer { width: 260rem; }

    /* SOLUTION */
    .main-solution__horizontal-progress-bar { width: 270rem; height: 3rem; }

    .main-solution__list-basic > b { padding: 32rem; }
    .main-solution__list-hover { padding: 32rem 34rem; }
    .main-solution__list-link { width: 34rem; margin-top: 8rem; }

}

@media (max-width: 1023px) and (orientation: landscape){

    /* SOLUTION */
    .main-solution__horizontal-title { margin-bottom: 38rem; }
    .main-solution__horizontal-title > p { margin-top: 10rem; }

    .main-solution__horizontal-progress { margin-top: 42rem; }

}



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

    /* GLOBAL */
    .main-scroll-helper { bottom: 20rem; }

    /* ROLE */
    .main-role__viewer { width: 250rem; }

    /* SOLUTION */
    .main-solution__list-basic > b .jt-icon { width: 18rem; }

    .main-solution__list-title:has(.jt-icon) { gap: 0 4rem; }
    .main-solution__list-title .jt-icon { width: 18rem; }

}

@media (max-width: 860px) and (orientation: portrait){

    /* CURATOR */
    .main-curator__balls { width: 46vw; }
    .main-curator__movie { width: 92vw; }

}



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

    /* LOADING */
    .loading-overlay__logo svg { width: 140rem; }

    /* ROLE */
    .main-role__viewer { width: 200rem; }

    /* CURATOR */
    .main-curator__balls > span:nth-child(1),
    .main-curator__balls > span:nth-child(4) { display: none !important; }

    .main-curator__movie { aspect-ratio: 780 / 388; -webkit-mask-image: url(../images/main/curator-mobile-sprite.png); mask-image: url(../images/main/curator-mobile-sprite.png); }

    .main-curator .main-section__message-item .jt-typo--03 { font-size: 17rem; line-height: 26rem; }
    .main-curator .main-section__message-item .jt-typo--06 { font-size: 10rem; line-height: 18rem; }

    /* SOLUTION */
    .main-solution__horizontal-title > p { margin-top: 14rem; }

    .main-solution__horizontal-progress-bar { width: 220rem; }

    .main-solution__list-basic > b { padding: 30rem; }
    .main-solution__list-hover { padding: 30rem 32rem; }
    .main-solution__list-link { width: 32rem; margin-top: 6rem; }

}

@media (max-width: 540px) and (orientation: portrait){

    /* ROLE */
    .main-role__plane { width: 90vw; }
    .main-role__plane > *.main-role__plane--orb { transform: translate(-50%, -50%) rotate(90deg); }
    .main-role__filled { width: 90vw; }

    /* SOLUTION */
    .main-solution__horizontal-title { margin-bottom: 48rem; }

    .main-solution__horizontal-progress { margin-top: 52rem; }

    .main-solution__list-item { width: 280rem; }

}