@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT
 *
 * GLOBAL
 * CURSOR
 * HEADER
 * FOOTER
 * SCROLL TOP
 * CONTAINER
 * PAGE
 * 404
 * HOVER
 */



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

body { overflow-y: scroll; 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: inherit; text-decoration: none; }

/* WRAP */
.wrap-narrow { max-width: 1231rem; margin: 0 auto; position: relative; }
.wrap { max-width: 1590rem; margin: 0 auto; position: relative; }
.wrap-wide { padding: 0 24rem; margin: 0 auto; position: relative; }
.wrap-full { padding: 0 24rem; position: relative; }

/* INVERT */
body.is-invert { background: var(--color-primary); }

/* PAGE TRANSITION */
.transition-container { display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; }
.transition-container__inner { width: 100%; height: 100%; position: relative; background: var(--color-primary); }
.transition-container__logo { width: 367rem; position: absolute; top: 50%; left: 50%; background: url(../images/layout/transition-sprite.webp) no-repeat 0% 0% / 100% 5900%; transform: translate3d(-50%, -50%, 0); aspect-ratio: 367 / 138; }
.transition-container.complete .transition-container__logo { animation: transition-sprite 1.6s steps(58, end) forwards; }

html.mobile .transition-container { min-height: 100svh; max-height: -webkit-fill-available; }

@keyframes transition-sprite {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

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

/* SCROLL */
html.mobile body.scroll-fixed { width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; }
html.ios body.scroll-fixed { position: fixed; }



/* **************************************** *
 * CURSOR
 * **************************************** */
* { cursor: none !important; }

.custom-cursor { width: 12rem; height: 12rem; position: fixed; top: 0; left: 0; background: #000; border-radius: 50%; transform: translate(-50%, -50%); transition: none; opacity: 0; backface-visibility: hidden; pointer-events: none; z-index: 9999999; mix-blend-mode: difference; }
.custom-cursor__icon { width: 100%; height: 100%; background: #fff; border-radius: 50%; transform-origin: 50% 50%; transition: none; }

.custom-cursor.custom-cursor--visible { opacity: 1 }
.custom-cursor.custom-cursor--hidden { opacity: 0 }

.custom-cursor.custom-cursor--hover .custom-cursor__icon { transform: scale(1.6) }
.custom-cursor.custom-cursor--click .custom-cursor__icon { transform: scale(1.6); }

html.mobile * { cursor: auto !important }
html.mobile #custom-cursor { display: none !important; opacity: 0; visibility: hidden; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 40rem; position: fixed; top: 0; left: 0; background: var(--color-white); z-index: 500; transition: background-color .3s; }
#header:before { content: ''; width: 100%; height: 12rem; position: absolute; bottom: -12rem; left: 0; background: var(--color-neon-gradient); pointer-events: none; transition: all .3s; }

.header__inner { display: flex; justify-content: space-between; height: 100%; position: relative; }

/* LOGO */
#logo { width: 150rem; height: 100%; flex-shrink: 0; }
#logo a { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 16rem; font-weight: 500; line-height: 1; white-space: nowrap; }

/* MENU */
#menu { display: flex; height: 100%; }
#menu li { position: relative; }
#menu a { display: block; position: relative; font-size: 16rem; font-weight: 500; white-space: nowrap; color: var(--color-black); transition: color .3s; }

#menu ul.sub-menu { opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
#menu > li:hover > ul, 
#menu > li.focusin > ul { opacity: 1; visibility: visible; }

#menu > li { width: 120rem; }
#menu > li > a { display: flex; align-items: center; height: 100%; justify-content: center; }
#menu > li.current-menu-item > a,
#menu > li.current-menu-ancestor > a { box-shadow: 4rem 4rem 10rem 0 var(--color-neon) inset; }
#menu > li.menu-item--safety-design { width: auto; margin-left: 155rem; }
#menu > li.menu-item--safety-design > a { padding: 0 24rem; }

#menu > li > ul { width: 100%; position: absolute; top: 100%; left: 0; background: var(--color-white); box-sizing: border-box; }
#menu > li > ul > li > a { padding: 8rem 0; text-align: center; }
#menu > li > ul > li.current-menu-item > a, 
#menu > li > ul > li.current-menu-ancestor > a { box-shadow: 4rem 4rem 10rem 0 var(--color-neon) inset; }

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



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 24rem 24rem 15rem; position: relative; background: var(--color-primary); }

.footer__inner { display: flex; justify-content: space-between; }

/* COPYRIGHT */
.footer__copyright { font-size: 14rem; font-weight: 500; }
.footer__copyright i { font-style: normal; }
.footer__copyright br { display: none; }

/* INFORMATION */
.footer__information { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; direction: revert; gap: 21rem 87rem; margin-right: 44rem; }
.footer__information p { width: 236rem; font-size: 14rem; font-weight: 500; }

/* LOGO */
.footer__logo { margin-top: 58rem; }
.footer__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer__logo svg > path { fill: var(--color-black); }

.footer__logo-point { display: none; }



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.go-top { display: none; width: 44rem; height: 44rem; position: absolute; top: -54rem; right: 10rem; background: var(--color-black); border-radius: 50%; transition: opacity .3s; z-index: 499; }
.go-top .jt-icon { display: block; width: 24rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.go-top .jt-icon path { fill: var(--color-white); }

.go-top.go-top--fix { position: fixed; top: inherit; bottom: 10rem; } 
.go-top.go-top--hide { opacity: 0; z-index: -1; }

/* Hidden */
body:is(.home, .single, .page-template-about, .page-template-contact, .page-template-contact-complete) .go-top { display: none; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding-top: 40rem; padding-bottom: 200rem; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { padding-top: 65rem; padding-bottom: 60rem; }
.article__title { font-size: 60rem; line-height: 1.25; font-weight: 500; }

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



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container { padding-top: 0; padding-bottom: 0; }
body.error404 #footer { display: none; }

.error-404 { display: flex; align-items: center; justify-content: center; height: 100vh; }
.error-404__inner { display: flex; align-items: center; gap: 80rem; }
.error-404__title { font-size: 122rem; font-weight: 200; color: #666; }
.error-404__txt { position: relative; }
.error-404__txt:before { content: ''; display: block; width: 1px; height: 100%; position: absolute; top: 50%; left: -46rem; background: #666; transform: translateY(-50%); }
.error-404__txt > p { font-size: 16rem; font-weight: 500; color: #666; }
.error-404__txt > p + p { margin-top: 19rem; }

/* IOS 100vh helper */
html.mobile .error-404 { min-height: 100svh; max-height: -webkit-fill-available; }



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

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

    /* SCROLL TOP */
    .go-top:hover .jt-icon path  { fill: var(--color-primary); }
    
}