@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT (KMS)
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * CONTAINER
 * PAGE
 * BREADCRUMB
 * 404
 * HOVER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
html { font-size: 6.25%; }
html.safari.desktop { font-size: 1px; }

body { overflow-x: hidden; font-family: var(--font-primary); font-size: 16rem; word-break: keep-all; color: var(--color-black); background: var(--color-white); }
a { color: var(--color-primary); text-decoration: none; }

/* BR */
br.mdbr { display: none !important; }
br.smbr { display: none !important; }

/* WRAP */
.wrap-narrow { max-width: 872rem; margin: 0 auto; position: relative; }
.wrap { max-width: 1400rem; margin: 0 auto; position: relative; }
.wrap-wide { max-width: 1760rem; margin: 0 auto; position: relative; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 80rem; position: absolute; top: 0; left: 0; z-index: 500; transition: background-color .3s; }
#header.sticky { position: fixed; }
.header__inner { display: flex; justify-content: space-between; gap: 30rem; height: 100%; position: relative; }

.header__navigation, 
.header__facility { display: flex; gap: 2rem; }
:is(.header__navigation, .header__facility) > * { flex-shrink: 0; background: var(--color-white); }

/* LOGO */
#logo { width: 236rem; }
#logo a { display: flex; justify-content: center; height: 100%; }
#logo a :is(svg, img) { display: block; width: 156rem; height: auto; }

/* MENU */
#menu { display: flex; height: 100%; }
#menu a { display: block; white-space: nowrap; color: var(--color-black); transition: color .3s; }
#menu a span { position: relative; }

#menu > li { position: relative; }
#menu > li > a { display: flex; align-items: center; height: 100%; padding: 0 20rem 1rem 20rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
#menu > li:first-child > a { padding-left: 40rem; }
#menu > li:last-child > a { padding-right: 40rem; }
#menu > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary); }

#menu > li > ul { position: absolute; top: 100%; left: -20rem; background: var(--color-white); border: 1px solid var(--color-black); box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
#menu > li:first-child > ul { left: 0; }
#menu > li:hover > ul, 
#menu > li.focusin > ul { opacity: 1; visibility: visible; }
#menu > li > ul > li > a { padding: 10rem 39rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
#menu > li > ul > li:first-child > a { padding-top: 34rem; }
#menu > li > ul > li:last-child:not(:has(> ul)) > a { padding-bottom: 34rem; }
#menu > li > ul > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary); }

#menu > li > ul > li > ul > li > a { padding: 5rem 39rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
#menu > li > ul > li > ul > li:first-child > a { padding-top: 6rem; }
#menu > li > ul > li > ul > li:last-child > a { padding-bottom: 20rem; }
#menu > li > ul > li:last-child > ul > li:last-child > a { padding-bottom: 34rem; }
#menu > li > ul > li > ul > li > a > span { padding-left: 8rem; }
#menu > li > ul > li > ul > li > a > span:before { content: ''; width: 4rem; height: 1px; position: absolute; left: 0; top: 9rem; background: currentColor; }
#menu > li > ul > li > ul > li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary); }

/* NEWS */
.header__news { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; transition: opacity .3s; }
.header__news-link { display: flex; align-items: center; min-width: 0; padding: 5rem 0; color: var(--color-white); }
.header__news-link > b { flex: 1; min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.header__news-link > time { flex-shrink: 0; }
.header__news-link > time:before { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 14px; margin: 0 10rem; position: relative; top: -1rem; background: var(--color-white); opacity: 0.2; }

/* FACILITY */
.header__facility-btn { display: flex; align-items: center; justify-content: center; width: 80rem; transition: background-color .3s; }
.header__facility-btn .jt-accent-icon { width: 28rem; }

/* LANGUAGE */
.lang-controller { width: 80rem; position: relative; }

.lang-controller__btn { display: flex; align-items: center; justify-content: center; height: 100%; transition: background-color .3s; }
.lang-controller__btn .jt-accent-icon { width: 28rem; }

.lang-controller__menu { width: 100%; padding: 9rem 0; position: absolute; top: 100%; left: 0; background: var(--color-white); border: 1px solid var(--color-black); box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
.lang-controller__menu > li > a { display: block; padding: 10rem 0; text-align: center; color: inherit; transition: all .3s; }
.lang-controller__menu > li.lang-controller--current { display: none; }

.lang-controller:hover .lang-controller__menu { opacity: 1; visibility: visible; }

/* MOBILE */
.small-menu-controller, 
.small-menu-container { display: none; }

/* MINIMIZE */
.minimize#header { background: var(--color-white); }
.minimize#header .header__news { opacity: 0; visibility: hidden; }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 70rem 0 15rem; position: fixed; left: 0; bottom: 0; background: var(--color-gray-900); z-index: 1; overflow: hidden; opacity: 0; }

.footer__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.footer__content { max-width: 1760rem; margin: 0 auto; position: relative; }

.footer__top { position: relative; }
.footer__bottom { margin-top: 80rem; padding-top: 80rem; border-top: 2rem solid var(--color-gray-400); }

/* SUBSCRIBE */
.footer__subscribe > p { margin-bottom: 38rem; color: var(--color-white); }

.footer__subscribe form { display: flex; align-items: stretch; }
.footer__subscribe form input { display: block; width: 680rem; height: 80rem; padding: 0 30rem 2rem; font-size: var(--font-size-primary-07); line-height: 1; font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-white); border: none; border-radius: 0; outline: none; background: color-mix(in srgb, var(--color-white) 10%, transparent 90%); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); box-sizing: border-box; transition: border .3s; opacity: 1; }
.footer__subscribe form button { height: auto; padding: 0 34rem 2rem; color: var(--color-black); background: var(--color-white); border: none; cursor: pointer; transition: background-color .3s; }

/* SOCIAL */
.footer__sns-container { position: absolute; right: 0; bottom: 0; }

.footer__sns { display: flex; flex-wrap: wrap; gap: 2rem; }
.footer__sns > li { display: block; width: 80rem; height: 80rem; position: relative ; }
.footer__sns > li > a { display: block; width: 100%; height: 100%; background: color-mix(in srgb, var(--color-white) 10%, transparent 90%); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); transition: background-color .3s; }
.footer__sns .jt-icon { display: block; width: 34rem; margin: 0 auto; position: relative; top: 50%; transform: translate(0, -50%); }
.footer__sns .jt-icon path { fill: var(--color-white); }

.footer__sns-overlay { position: absolute; top: calc(100% + 2rem); right: 0; padding: 32rem; background: var(--color-white); opacity: 0; visibility: hidden; transition: all .3s; }
.footer__sns-overlay:before { content: ''; position: absolute; width: 100%; height: 2rem; top: -2rem; left: 0; }
.footer__sns-overlay .jt-lazyload { width: 180rem; aspect-ratio: 1 / 1; }

/* SLOGAN */
.footer__slogan { color: var(--color-white); }

/* LOGO */
.footer__logo { margin: 93rem 0 69rem; }
.footer__logo svg { display: block; width: 100%; height: auto; }

/* ADDITION */
.footer__addition { display: flex; justify-content: space-between; align-items: center; }

.footer__copyright { color: var(--color-white); }

#footer-menu { display: flex; flex-wrap: wrap; gap: 0 30rem; }
#footer-menu > li > a { display: flex; align-items: center; gap: 8rem; 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); color: var(--color-white); transition: color .3s; }
#footer-menu > li > a:before { content: ''; display: block; width: 4rem; height: 4rem; background: var(--color-white); border-radius: 50%; transition: background-color .3s; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { --main-container-pb: 140rem; padding-top: 294rem; padding-bottom: var(--main-container-pb); margin-bottom: 856rem; position: relative; background: var(--color-white); z-index: 2; }

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



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { margin-bottom: 80rem; }
.article__header-inner { padding-bottom: 50rem; border-bottom: 10rem solid var(--color-black); }

.article__header.article__header--simple { margin-bottom: 60rem; }
.article__header.article__header--simple .article__header-inner { padding-bottom: 0; border: none; }

/* PAGE VISUAL */
.main-container:has(.article-visual) { padding-top: 0; }

.article-visual { height: 100vh; min-height: 100svh; max-height: -webkit-fill-available; position: relative; background: var(--color-black); }
.article-visual > :is(.wrap-wide, .wrap) { height: 100%; }

.article-visual__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: no-repeat center / cover; overflow: hidden; }

.article-visual__content { display: flex; align-items: end; gap: 17rem; width: 100%; position: absolute; left: 0; bottom: 70rem; color: var(--color-white); }
.article-visual__content-item { flex: 1; }
.article-visual__content .jt-breadcrumb .jt-icon svg path { fill: var(--color-white); }
.article-visual__content .jt-btn__text { margin-top: 25rem; margin-bottom: -5rem; }

/* PAGE BODY */
.article__body { position: relative; min-height: 360rem; }



/* **************************************** *
 * BREADCRUMB
 * **************************************** */
.jt-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8rem; margin-bottom: 20rem; }
.jt-breadcrumb li { display: flex; }
.jt-breadcrumb li.jt-breadcrumb__separator { opacity: 0.4; }
.jt-breadcrumb :is(a, span) { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-11); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: inherit; }
.jt-breadcrumb a { transition: color .3s; }
.jt-breadcrumb .jt-icon { width: 12rem; }



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

.error-404 { display: flex; align-items: center; justify-content: center; height: 100vh; min-height: 100svh; max-height: -webkit-fill-available; }
.error-404__inner { margin-bottom: 60rem; padding: 27rem 0 12rem; border: solid var(--color-black); border-width: 3rem 0; }
.error-404 h1:after { content: ''; display: inline-block; vertical-align: baseline; width: 7rem; height: 7rem; margin-left: 4rem; position: relative; background: var(--color-primary); }
.error-404 p { margin-top: 10rem; }
.error-404__controller { margin-top: 34rem; padding-top: 11rem; border-top: 1px solid var(--color-black); }



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

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

    .header__facility-btn:hover { background: var(--color-primary); }

    .lang-controller:hover .lang-controller__btn { background: var(--color-primary); }
    .lang-controller__menu > li > a:hover { font-weight: 700; color: var(--color-primary); }

    /* FOOTER */
    #footer-menu > li > a:hover { color: var(--color-primary); }
    #footer-menu > li > a:hover:before { background: var(--color-primary); }

    .footer__sns > li > a:hover { background: var(--color-primary); }
    .footer__sns > li:hover .footer__sns-overlay { opacity: 1; visibility: visible; }

    .footer__subscribe form button:hover { background: var(--color-primary); }

    /* BREADCRUMB */
    .jt-breadcrumb a:hover { color: var(--color-primary); }
    
}