@charset "utf-8";

/*
 * File    : rwd-layout.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * 2561px
 * 2000px ~ 2560px
 * 1900px
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * min-width 2561px
 * **************************************** */
@media (min-width: 2561px){

    /* FOOTER */
    #footer { max-width: 1816rem; margin: 0 auto; padding-left: 0; padding-right: 0; }

    /* CONTAINER */
    .main-container { max-width: 1816rem; margin: 0 auto; padding-left: 0; padding-right: 0; }

}



/* **************************************** *
 * 2000px
 * **************************************** */
@media (min-width: 2000px) and (max-width: 2560px) {

    html,
    html.safari.desktop { font-size: 0.05254860746190225vw; }

}



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

    html,
    html.safari.desktop { font-size: 0.0526vw; }    

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){
    
    html,
    html.safari.desktop { font-size: 0.06756756756756757vw; }

    /* VAR */
    :root {
        --font-size-en-01: 210rem;
        --font-size-en-02: 132rem;
        --font-size-en-03: 118rem;
        --font-size-en-04: 72rem;
        --font-size-en-05: 50rem;
        --font-size-en-06: 37rem;
        --font-size-en-07: 29rem;
        --font-size-en-08: 21rem;
        --font-size-en-09: 18rem;
        --font-size-en-10: 17rem;

        --font-lineheight-en-01: 210rem;
        --font-lineheight-en-02: 136rem;
        --font-lineheight-en-03: 127rem;
        --font-lineheight-en-04: 83rem;
        --font-lineheight-en-05: 57rem;
        --font-lineheight-en-06: 50rem;
        --font-lineheight-en-07: 43rem;
        --font-lineheight-en-08: 31rem;
        --font-lineheight-en-09: 29rem;
        --font-lineheight-en-10: 28rem;
    }

    /* HEADER */
    #header { height: 106rem; }

    #logo { top: 33rem; }
    
    .header__quicklink { gap: 7rem; padding-left: 52rem; padding-right: 52rem; top: 30rem; }
    .header__quicklink .jt-icon { width: 14rem; }

    /* FOOTER */
    #footer { padding-bottom: 64rem; }
    .footer__inner { margin-top: 60rem; }

    .footer__group { gap: 80rem; }

    .footer__share .jt-icon { width: 22rem; }

    /* SCROLL TOP */
    .go-top__icon { width: 50rem; height: 50rem; }
    .go-top__icon .jt-icon { width: 20rem; }

    .go-top__typo { margin-top: 6rem; }

    /* CONTAINER */
    .main-container { padding-top: 182rem; padding-bottom: 50rem; }

    /* 404 */
    .error-404__inner { padding-top: 76rem; }
    .error-404__inner h1 { margin-bottom: 36rem; }
    .error-404__inner p + p { margin-top: 26rem; }
    .error-404__controller { margin-top: 20rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.0833333333333333vw; }

    /* VAR */
    :root {
        --font-size-en-01: 190rem;
        --font-size-en-02: 117rem;
        --font-size-en-03: 108rem;
        --font-size-en-04: 65rem;
        --font-size-en-05: 45rem;
        --font-size-en-06: 34rem;
        --font-size-en-07: 27rem;
        --font-size-en-08: 19rem;
        --font-size-en-09: 17rem;
        --font-size-en-10: 16rem;
        --font-size-en-11: 15rem;
        --font-size-en-12: 14rem;

        --font-lineheight-en-01: 190rem;
        --font-lineheight-en-02: 121rem;
        --font-lineheight-en-03: 116rem;
        --font-lineheight-en-04: 75rem;
        --font-lineheight-en-05: 52rem;
        --font-lineheight-en-06: 46rem;
        --font-lineheight-en-07: 40rem;
        --font-lineheight-en-08: 28rem;
        --font-lineheight-en-09: 27rem;
        --font-lineheight-en-10: 26rem;
        --font-lineheight-en-11: 25rem;
        --font-lineheight-en-12: 24rem;
    }

    /* HEADER */
    #header { height: 100rem; }
    .header__inner { margin: 0 28rem; }

    #logo { top: 30rem; }
    #logo a { font-size: 23rem; line-height: 35rem; }

    .header__quicklink { gap: 6rem; padding: 7rem 44rem; right: 28rem; top: 28rem; }

    /* FOOTER */
    #footer { padding-left: 28rem; padding-right: 28rem; }

    .footer__group { gap: 40rem; }

    .footer__share { padding: 8rem; }

    /* SCROLL TOP */
    .go-top__icon { width: 48rem; height: 48rem; }

    /* CONTAINER */
    .main-container { padding: 168rem 28rem 50rem; }

    /* 404 */
    .error-404__inner { padding-top: 70rem; }
    .error-404__inner h1 { margin-bottom: 32rem; }
    .error-404__inner p + p { margin-top: 22rem; }
    .error-404__controller { margin-top: 16rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.13020833333333335vw; }

    /* VAR */
    :root {
        --font-size-en-01: 110rem;
        --font-size-en-02: 82rem;
        --font-size-en-03: 68rem;
        --font-size-en-04: 54rem;
        --font-size-en-05: 36rem;
        --font-size-en-06: 26rem;
        --font-size-en-07: 22rem;
        --font-size-en-08: 18rem;
        --font-size-en-09: 16rem;
        --font-size-en-10: 15rem;
        --font-size-en-11: 14rem;
        --font-size-en-12: 13rem;
        --font-size-en-13: 12rem;

        --font-lineheight-en-01: 110rem;
        --font-lineheight-en-02: 85rem;
        --font-lineheight-en-03: 74rem;
        --font-lineheight-en-04: 65rem;
        --font-lineheight-en-05: 44rem;
        --font-lineheight-en-06: 35rem;
        --font-lineheight-en-07: 33rem;
        --font-lineheight-en-08: 28rem;
        --font-lineheight-en-09: 25rem;
        --font-lineheight-en-10: 25rem;
        --font-lineheight-en-11: 23rem;
        --font-lineheight-en-12: 23rem;
        --font-lineheight-en-13: 20rem;
    }

    /* GLOBAL */
    .wrap { max-width: inherit; }
    .wrap-narrow { max-width: inherit; margin: 0 32rem; }

    br.mdbr { display: block; }

    /* HEADER */
    #header { height: 87rem; }
    .header__inner { margin: 0 24rem; }

    #logo { top: 26rem; }
    #logo a { font-size: 21rem; line-height: 30rem; }

    .header__quicklink { padding-left: 35rem; padding-right: 35rem; right: 24rem; top: 24rem; }
    .header__quicklink .jt-icon { width: 12rem; }

    /* FOOTER */
    #footer { padding: 0 24rem 58rem 24rem; }
    .footer__inner { margin-top: 54rem; flex-direction: column; }

    .footer__group { gap: 36rem; }

    .footer__share { padding: 6rem; }
    .footer__share .jt-icon { width: 20rem; }

    .footer__copyright { margin-top: 38rem; position: relative; text-align: left; order: 3; }

    /* SCROLL TOP */
    .go-top { position: absolute; right: 0; }

    .go-top__icon { width: 42rem; height: 42rem; }
    .go-top__icon .jt-icon { width: 16rem; }

    /* CONTAINER */
    .main-container { padding: 148rem 24rem 44rem; }

    /* 404 */
    .error-404__inner { padding-top: 38rem; }

}



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

    html,
    html.safari.desktop { font-size: 0.2564102564102564vw; }

    /* VAR */
    :root {
        --font-size-en-01: 78rem;
        --font-size-en-02: 43rem;
        --font-size-en-03: 40rem;
        --font-size-en-04: 32rem;
        --font-size-en-05: 26rem;
        --font-size-en-06: 24rem;
        --font-size-en-07: 19rem;
        --font-size-en-08: 17rem;
        --font-size-en-10: 14rem;
        --font-size-en-11: 13rem;
        --font-size-en-12: 12rem;

        --font-lineheight-en-01: 78rem;
        --font-lineheight-en-02: 45rem;
        --font-lineheight-en-03: 43rem;
        --font-lineheight-en-04: 38rem;
        --font-lineheight-en-05: 30rem;
        --font-lineheight-en-06: 32rem;
        --font-lineheight-en-07: 29rem;
        --font-lineheight-en-08: 26rem;
        --font-lineheight-en-10: 22rem;
        --font-lineheight-en-11: 21rem;
        --font-lineheight-en-12: 21rem;

        --border-radius-01: 6rem;
        --border-radius-02: 12rem;
    }

    /* GLOBAL */
    .wrap-narrow { margin: 0; }

    br.mdbr { display: none; }

    /* HEADER */
    #header { height: 76rem; }
    .header__inner { margin: 0 20rem; }

    #logo { top: 20rem; }
    #logo a { font-size: 19rem; line-height: 28rem; }

    .header__quicklink { padding-left: 28rem; padding-right: 28rem; right: 20rem; top: 20rem; }
    .header__quicklink .jt-icon { width: 10rem; }

    html.ios .header__quicklink { padding-bottom: 8rem; }

    /* FOOTER */
    #footer { padding: 0 20rem 50rem 20rem; }
    .footer__inner { margin-top: 36rem; }

    .footer__group { gap: 26rem; }

    .footer__share .jt-icon { width: 18rem; }

    /* SCROLL TOP */
    .go-top__icon { width: 36rem; height: 36rem; }

    .go-top__icon .jt-icon { width: 14rem; }

    .go-top__typo { margin-top: 3rem; scale: 0.9; }

    /* CONTAINER */
    .main-container { padding: 110rem 20rem 44rem; }

    /* 404 */
    .error-404__inner h1 { margin-bottom: 27rem; }
    .error-404__inner p + p { margin-top: 16rem; }
    .error-404__inner p br { display: none; }
    .error-404__controller .jt-btn__icon .jt-icon { width: 10rem; margin-right: -2rem; }

}