@charset "utf-8";

/*
 * File    : rwd-layout.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1921px (min-width)
 * 1900px
 * 1480px
 * 1280px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1921px (min-width)
 * **************************************** */
@media (min-width: 1921px){

    /* LAYOUT */
    .wrap-wide { max-width: 1920rem; }

    /* FOOTER */
    .footer__information { margin-right: 7.4vw; }

}



/* **************************************** *
 * 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; }

    /* LAYOUT */
    .wrap { max-width: inherit; margin: 0 100rem; }

    .transition-container__logo { width: 326rem; }

}



/* **************************************** *
 * 1280px
 * **************************************** */
@media (max-width: 1280px){

    html,
    html.safari.desktop { font-size: 0.078125vw; }

    /* LAYOUT */
    .wrap-narrow { max-width: inherit; margin: 0 24rem; }

    /* FOOTER */
    .footer__logo { margin-top: 120rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    html,
    html.safari.desktop { font-size: 0.13020833333333335vw; }

    /* LAYOUT */
    .main-container { padding-top: 46rem; padding-bottom: 150rem; }

    .wrap { margin: 0 24rem; }

    br.mdbr { display: block !important; }

    .transition-container__logo { width: 240rem; }

    /* PAGE */
    .article__header { padding-top: 55rem; padding-bottom: 50rem; }
    .article__title { font-size: 50rem; }

    /* HEADER */
    #header { height: 46rem; box-shadow: 0 4rem 10rem 0 rgba(0, 255, 49, 0.25); }
    #header:before { display: none; }
    .header__inner { margin: 0 24rem; }

    #logo { width: inherit; padding-top: 1rem; }
    #logo a { font-size: 20rem; }

    .menu-container { display: none; }

    .small-menu-controller { display: block; width: 30rem; height: 30rem; position: absolute; top: 8rem; right: 0; }
    .small-menu-controller .jt-icon { width: 100%; }

    .small-menu-container { width: 100%; height: 100%; padding-top: 46rem; position: fixed; top: 0; left: 0; background: var(--color-primary); overflow: hidden; z-index: 650; }
    .small-menu-container__inner { width: 100%; height: 100%; }
    .small-menu-nav { height: 100%; }
    #small-menu { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr 1fr 1fr 1.9636fr 1fr 1fr; }
    #small-menu li { display: block; position: relative; }
    #small-menu a { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; font-size: 30rem; font-weight: 500; }
    #small-menu > li { border-top: 1px solid var(--color-black); }
    #small-menu > li.menu-item-has-children { display: grid; grid-template-columns: repeat(2, 1fr); }
    #small-menu > li.menu-item-has-children > a:after { content: ''; width: 1px; height: 100%; position: absolute; top: 0; right: 0; background: var(--color-black); }
    #small-menu > li > ul { display: grid; grid-auto-rows: 1fr; }
    #small-menu > li > ul > li:not(:first-child) { border-top: 1px solid var(--color-black); }
    #small-menu > li.current-menu-item > a,
    #small-menu > li > ul > li.current-menu-item > a { background: var(--color-white); box-shadow: 6rem 0 10rem 0 rgba(0, 255, 49, 0.25) inset, 0 6rem 10rem 0 rgba(0, 255, 49, 0.50) inset; }

    .small-menu-container__close { display: block; width: 30rem; height: 30rem; margin: 0; padding: 0; position: absolute; top: 8rem; right: 24rem; background: transparent; border: none; opacity: 1; cursor: pointer; }
    .small-menu-container__close .jt-icon { width: 100%; }

    body.open-menu-fixed { width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
    body.open-menu #header { transform: none !important; opacity: 1 !important; visibility: visible !important; }
    body.open-menu #logo { z-index: 651; }

    /* FOOTER */
    .footer__inner { gap: 22rem; }
    .footer__inner > * { width: calc(50% - 11rem); }

    .footer__copyright { padding-left: 13rem; position: relative; font-size: 12rem; }
    .footer__copyright i { position: absolute; left: 0; top: 0; }
    .footer__copyright br { display: block; }

    .footer__information { display: flex; flex-direction: column; gap: 0; margin-right: 0; padding-right: 20rem; }
    .footer__information p { width: 100%; font-size: 12rem; }
    .footer__information p:last-child { margin-top: 10rem; }

    .footer__logo { margin-top: 58rem; }

    /* SCROLL TOP */
    .go-top { display: block; }

    /* 404 */
    .error-404__inner { flex-direction: column; gap: 0; padding: 0 40rem; }

    .error-404__txt { text-align: center; }
    .error-404__txt:before { display: none; }
    .error-404__txt > p + p { margin-top: 18rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    html,
    html.safari.desktop { font-size: 0.2666666666666667vw; }

    /* LAYOUT */
    .main-container { padding-bottom: 100rem; }

    br.mdbr { display: none !important; }
    br.smbr { display: block !important; }

    .transition-container__logo { width: 150rem; }

    /* PAGE */
    .article__header { padding-top: 40rem; padding-bottom: 40rem; }
    .article__title { font-size: 40rem; }

    /* HEADER */
    html.ios .small-menu-container { min-height: 100svh; max-height: -webkit-fill-available; }

    /* FOOTER */
    #footer { padding: 12rem 24rem 4rem; }

    .footer__copyright { padding-left: 9rem; font-size: 8rem; line-height: 1.25; }

    .footer__information p { font-size: 8rem; line-height: 1.25; }

    .footer__logo { margin-top: 32rem; }

}
