@charset "utf-8";

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



/* **************************************** *
 * 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-primary-01: 120rem;
        --font-size-primary-02: 70rem;
        --font-size-primary-03: 46rem;
        --font-size-primary-04: 38rem;
        --font-size-primary-05: 30rem;
        --font-size-primary-06: 23rem;
        --font-size-primary-07: 19rem;
    }

    /* LAYOUT */
    .main-container { --main-container-pb: 120rem; padding-top: 250rem; margin-bottom: 697rem; }
    body:is(
        .single:not(.single-by-industry, .single-by-applications), 
        .search, 
        [class*=tax-], 
        .page-template-privacy,
        .page-template-contact
    ) .main-container { padding-top: 180rem; }

    .wrap-wide { max-width: inherit; margin: 0 40rem; }
    .wrap { max-width: inherit; margin: 0 86rem; }

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

    #logo { width: 216rem; }
    #logo a :is(svg, img) { width: 142rem; }

    #menu > li > a { padding-left: 18rem; padding-right: 18rem; }
    #menu > li:first-child > a { padding-left: 36rem; }
    #menu > li:last-child > a { padding-right: 36rem; }
    #menu > li > ul { left: -18rem; }
    #menu > li > ul > li > a { padding: 9rem 35rem; }
    #menu > li > ul > li:first-child > a { padding-top: 32rem; }
    #menu > li > ul > li:last-child:not(:has(> ul)) > a { padding-bottom: 32rem; }
    #menu > li > ul > li > ul > li > a { padding-left: 35rem; padding-right: 35rem; }
    #menu > li > ul > li > ul > li:first-child > a { padding-top: 5rem; }
    #menu > li > ul > li > ul > li:last-child > a { padding-bottom: 18rem; }
    #menu > li > ul > li:last-child > ul > li:last-child > a { padding-bottom: 32rem; }

    .header__news { display: none; }

    .header__facility-btn { width: 72rem; }
    .header__facility-btn .jt-accent-icon { width: 26rem; }

    .lang-controller { width: 72rem; }
    .lang-controller__btn .jt-accent-icon { width: 26rem; }
    .lang-controller__menu { padding: 8rem 0; }
    .lang-controller__menu > li > a { padding: 8rem 0; }

    /* FOOTER */
    #footer { padding-top: 62rem; }

    .footer__content { max-width: inherit; margin: 0 40rem; }

    .footer__bottom { margin-top: 60rem; padding-top: 50rem; }

    .footer__subscribe > p { margin-bottom: 30rem; }
    .footer__subscribe form input { width: 640rem; height: 72rem; padding-left: 26rem; padding-right: 26rem; }
    .footer__subscribe form button { padding-left: 30rem; padding-right: 30rem; }

    .footer__sns > li { width: 72rem; height: 72rem; }
    .footer__sns .jt-icon { width: 30rem; }
    .footer__sns-overlay { padding: 30rem; }
    .footer__sns-overlay .jt-lazyload { width: 160rem; }

    .footer__logo { margin: 70rem 0 50rem; }

    /* PAGE */
    .article__header { margin-bottom: 72rem; }
    .article__header-inner { padding-bottom: 45rem; }

    .article__header.article__header--simple { margin-bottom: 50rem; }

    .article-visual__content { bottom: 60rem; }

    /* 404 */
    body.error404 .main-container { padding-top: 72rem; }

}



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

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

    /* VAR */
    :root {
        --font-size-primary-01: 95rem;
        --font-size-primary-02: 56rem;
        --font-size-primary-03: 43rem;
        --font-size-primary-04: 35rem;
        --font-size-primary-05: 27rem;
        --font-size-primary-06: 21rem;
        --font-size-primary-07: 18rem;
    }

    /* LAYOUT */
    .main-container { --main-container-pb: 108rem; padding-top: 200rem; margin-bottom: 577rem; }
    body:is(
        .single:not(.single-by-industry, .single-by-applications), 
        .search, 
        [class*=tax-], 
        .page-template-privacy,
        .page-template-contact
    ) .main-container { padding-top: 160rem; }

    .wrap, 
    .wrap-wide { margin: 0 36rem; }
    .wrap-narrow { max-width: 800rem; }

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

    #logo { width: 204rem; }
    #logo a :is(svg, img) { width: 137rem; }

    #menu > li > a { padding-left: 16rem; padding-right: 16rem; }
    #menu > li:first-child > a { padding-left: 32rem; }
    #menu > li:last-child > a { padding-right: 32rem; }
    #menu > li > ul { left: -16rem; }
    #menu > li > ul > li > a { padding: 8rem 28rem; }
    #menu > li > ul > li:first-child > a { padding-top: 25rem; }
    #menu > li > ul > li:last-child:not(:has(> ul)) > a { padding-bottom: 25rem; }
    #menu > li > ul > li > ul > li > a { padding: 4rem 28rem; }
    #menu > li > ul > li > ul > li:first-child > a { padding-top: 4rem; }
    #menu > li > ul > li > ul > li:last-child > a { padding-bottom: 12rem; }
    #menu > li > ul > li:last-child > ul > li:last-child > a { padding-bottom: 25rem; }

    .header__facility-btn { width: 70rem; }

    .lang-controller { width: 70rem; }
    .lang-controller__menu > li > a { padding: 7rem 0; }

    /* FOOTER */
    #footer { padding-top: 52rem; }

    .footer__content { margin: 0 36rem; }

    .footer__bottom { margin-top: 50rem; padding-top: 40rem; }

    .footer__subscribe > p { margin-bottom: 20rem; }
    .footer__subscribe form input { width: 586rem; height: 70rem; }

    .footer__sns > li { width: 70rem; height: 70rem; }
    .footer__sns .jt-icon { width: 28rem; }
    .footer__sns-overlay { padding: 27rem; }
    .footer__sns-overlay .jt-lazyload { width: 158rem; }

    .footer__logo { margin: 40rem 0; }

    #footer-menu { gap: 0 26rem; }

    /* PAGE */
    .article__header { margin-bottom: 62rem; }
    .article__header-inner { padding-bottom: 36rem; border-bottom-width: 8rem; }

    .article__header.article__header--simple { margin-bottom: 45rem; }

    .article-visual__content { bottom: 50rem; }

    /* 404 */
    body.error404 .main-container { padding-top: 70rem; }

}



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

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

    /* VAR */
    :root {
        --font-size-primary-01: 62rem;
        --font-size-primary-02: 46rem;
        --font-size-primary-03: 38rem;
        --font-size-primary-04: 32rem;
        --font-size-primary-05: 23rem;
        --font-size-primary-06: 19rem;
        --font-size-primary-07: 17rem;
        --font-size-primary-08: 15rem;
        --font-size-primary-09: 13rem;
    }

    /* LAYOUT */
    .main-container { --main-container-pb: 100rem; padding-top: 145rem; margin-bottom: 0; }
    body:is(
        .single:not(.single-by-industry, .single-by-applications), 
        .search, 
        [class*=tax-], 
        .page-template-privacy,
        .page-template-contact
    ) .main-container { padding-top: 145rem; }

    .wrap, 
    .wrap-wide { margin: 0 24rem; }
    .wrap-narrow { max-width: inherit; margin: 0 24rem; }

    br.mdbr { display: block !important; }

    /* HEADER */
    #header { height: 68rem; background: var(--color-white); transition: none; }

    #logo { width: inherit; padding: 24rem; }

    .menu-container { display: none; }

    .small-menu-controller { display: block; width: 40rem; height: 40rem; position: absolute; top: 14rem; right: 16rem; }
    .small-menu-controller .jt-accent-icon { width: 28rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }

    .lang-controller { display: none; }

    .contact-controller { display: none; }

    .search-controller { width: 40rem; height: 40rem; position: absolute; top: 14rem; right: 64rem; }
    .search-controller .jt-accent-icon { width: 28rem; }

    .small-menu-container { width: 100%; height: 100%; padding-top: 68rem; position: fixed; top: 0; left: 0; background: var(--color-white); overflow: hidden; z-index: 650; }
    .small-menu-container__inner { width: 100%; height: 100%; padding: 0 24rem 30rem; position: relative; overflow-y: scroll; }

    #small-menu a { display: block; color: inherit; transition: color .3s; }
    #small-menu span { position: relative; }
    #small-menu > li { border: solid var(--color-black); border-width: 2px 0; }
    #small-menu > li + li { margin-top: -2px; }
    #small-menu > li > a { padding: 18rem 0 20rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
    #small-menu > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary); }
    #small-menu > li > ul { display: none; border-top: 1px solid var(--color-gray-200); }
    #small-menu > li > ul > li > a { padding: 12rem 0; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
    #small-menu > li > ul > li:first-child > a { padding-top: 24rem; }
    #small-menu > li > ul > li:last-child:not(:has(> ul)) > a { padding-bottom: 24rem; }
    #small-menu > li > ul > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary); }
    #small-menu > li > ul > li > ul > li > a { padding: 5rem 0; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
    #small-menu > li > ul > li > ul > li:first-child > a { padding-top: 6rem; }
    #small-menu > li > ul > li > ul > li:last-child > a { padding-bottom: 12rem; }
    #small-menu > li > ul > li:last-child > ul > li:last-child > a { padding-bottom: 24rem; }
    #small-menu > li > ul > li > ul > li > a > span { padding-left: 8rem; }
    #small-menu > li > ul > li > ul > li > a > span:before { content: ''; width: 4rem; height: 1px; position: absolute; left: 0; top: 8rem; background: currentColor; }
    #small-menu > li > ul > li > ul > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary); }

    .small-menu-container__close { display: block; width: 40rem; height: 40rem; margin: 0; padding: 0; position: absolute; top: 14rem; right: 16rem; background: transparent; border: none; opacity: 1; }
    .small-menu-container__close .jt-accent-icon { width: 28rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }

    .small-menu-container__contact { display: flex; align-items: center; justify-content: center; gap: 8rem; max-width: 240rem; margin: 30rem auto 0; padding: 14rem 24rem; color: inherit; border: 3rem solid var(--color-black); transition: color .3s, background-color .3s; }
    .small-menu-container__contact .jt-accent-icon { width: 18rem; }

    .small-menu-container__lang { display: flex; gap: 0; position: absolute; top: 16rem; right: 70rem; }
    .small-menu-container__lang > li > a { display: block; padding: 8rem 10rem; color: inherit; transition: color .3s; }
    .small-menu-container__lang > li.small-menu-container__lang--current { display: none; }

    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 { padding-bottom: 50rem; position: relative; opacity: 1; }

    .footer__content { margin: 0 24rem; }

    .footer__bottom { padding-top: 50rem; }

    .footer__subscribe > p { margin-bottom: 30rem; }
    .footer__subscribe form input { width: 100%; height: 64rem; padding-left: 22rem; padding-right: 22rem; }

    .footer__sns-container { margin-top: 50rem; position: relative; }
    .footer__sns > li { width: 55rem; height: 55rem; }
    .footer__sns .jt-icon { width: 22rem; }
    .footer__sns-overlay { padding: 20rem; }
    .footer__sns-overlay .jt-lazyload { width: 129rem; }

    .footer__logo { margin-bottom: 48rem; }

    .footer__addition { flex-direction: column; justify-content: start; align-items: start; gap: 18rem; }
    .footer__copyright { order: 2; }

    #footer-menu { gap: 0 30rem; }
    #footer-menu > li > a { padding: 2rem 0 2rem 12rem; }
    #footer-menu > li > a:before { top: 9rem; }

    /* PAGE */
    .article__header { margin-bottom: 55rem; }
    .article__header-inner { padding-bottom: 28rem; border-bottom-width: 6rem; }

    .article__header.article__header--simple { margin-bottom: 40rem; }

    .main-container:has(.article-visual) { padding-top: 68rem; }
    .article-visual { height: inherit; min-height: inherit; max-height: inherit; }
    .article-visual__bg { padding-top: 49.74%; position: relative; }
    .article-visual__content { flex-direction: column; align-items: start; gap: 40rem; padding: 40rem 0 60rem; position: relative; bottom: inherit; background: var(--color-black); }
    .article-visual__content .jt-btn__text { margin-top: 19rem; margin-bottom: -4rem; }

    /* BREADCRUMB */
    .jt-breadcrumb { margin-bottom: 18rem; }

    /* 404 */
    body.error404 .main-container { padding-top: 68rem; }

    .error-404__inner { padding-top: 25rem; }
    .error-404__controller { margin-top: 30rem; }

}



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

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

    /* VAR */
    :root {
        --font-size-primary-01: 54rem;
        --font-size-primary-02: 38rem;
        --font-size-primary-03: 34rem;
        --font-size-primary-04: 28rem;
        --font-size-primary-05: 22rem;
        --font-size-primary-06: 18rem;
        --font-size-primary-07: 16rem;
        --font-size-primary-08: 14rem;

        --font-lineheight-primary-01: 1.1;
        --font-lineheight-primary-02: 1.2;
        --font-lineheight-primary-05: 1.5;
        --font-lineheight-primary-06: 1.5;
    }

    /* LAYOUT */
    .main-container { --main-container-pb: 90rem; padding-top: 118rem; } 
    body:is(
        .single:not(.single-by-industry, .single-by-applications), 
        .search, 
        [class*=tax-], 
        .page-template-privacy,
        .page-template-contact
    ) .main-container { padding-top: 118rem; }

    .wrap, 
    .wrap-wide,
    .wrap-narrow { margin: 0 20rem; }

    br.mdbr { display: none !important; }
    br.smbr { display: block !important; }

    /* HEADER */
    #logo { padding: 20rem; }

    .small-menu-controller { right: 14rem; }

    .search-controller { right: 62rem; }

    .small-menu-container__inner { padding-left: 20rem; padding-right: 20rem; }

    #small-menu > li > a { padding: 16rem 0 18rem; }
    #small-menu > li > ul > li > a { padding: 10rem 0; }
    #small-menu > li > ul > li:first-child > a { padding-top: 20rem; }
    #small-menu > li > ul > li:last-child:not(:has(> ul)) > a { padding-bottom: 20rem; }
    #small-menu > li > ul > li > ul > li:last-child > a { padding-bottom: 10rem; }
    #small-menu > li > ul > li:last-child > ul > li:last-child > a { padding-bottom: 20rem; }

    .small-menu-container__close { right: 14rem; }

    .small-menu-container__contact { padding-top: 12rem; padding-bottom: 12rem; }

    .small-menu-container__lang { right: 68rem; }

    /* FOOTER */
    .footer__content { margin: 0 20rem; }

    .footer__subscribe form { flex-direction: column; gap: 10rem; }
    .footer__subscribe form input { height: 50rem; padding-left: 20rem; padding-right: 20rem; }
    .footer__subscribe form button { height: 50rem; padding-left: 24rem; padding-right: 24rem; }

    .footer__sns { justify-content: center; gap: 30rem; }
    .footer__sns > li { width: 40rem; height: 40rem; }
    .footer__sns > li > a { background: transparent; backdrop-filter: none; }
    .footer__sns .jt-icon { width: 36rem; }
    .footer__sns-overlay { padding: 16rem; top: calc(100% + 10rem); right: -16rem; }
    .footer__sns-overlay:before { height: 10rem; top: -10rem; }
    .footer__sns-overlay .jt-lazyload { width: 110rem; }

    /* PAGE */
    .article__header { margin-bottom: 48rem; }
    .article__header-inner { padding-bottom: 23rem; border-bottom-width: 5rem; }

    .article__header.article__header--simple { margin-bottom: 30rem; }

    /* BREADCRUMB */
    .jt-breadcrumb { margin-bottom: 11rem; }

    /* 404 */
    body.error404 .main-container { padding-top: 0; }

    .error-404__inner { margin-top: 34rem; margin-bottom: 0; padding: 22rem 0 10rem; }
    .error-404 h1:after { width: 6rem; height: 6rem; }
    .error-404 p br { display: none; }
    .error-404__controller { margin-top: 26rem; padding-top: 10rem; }

}



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* HEADER */
    #small-menu > li:hover > a,
    #small-menu > li > ul > li:hover > a,
    #small-menu > li > ul > li > ul > li:hover > a { color: var(--color-primary); }

    .small-menu-container__contact:hover { color: var(--color-white); background: var(--color-black); }
    .small-menu-container__contact:hover .jt-accent-icon path[fill="black"] { fill: var(--color-white); }

    .small-menu-container__lang > li > a:hover { font-weight: 700; color: var(--color-primary); }

}

@media (max-width: 860px) and (hover: hover) and (pointer: fine) {

    /* HEADER */
    .header__facility-btn:hover { background: inherit; }

}

@media (max-width: 540px) and (hover: hover) and (pointer: fine) {

    /* FOOTER */
    .footer__sns > li > a:hover { background: transparent; }

}