@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT (KMS)
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * SCROLL TOP
 * CONTAINER
 * 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-primary); background: var(--color-black); }
a { color: var(--color-primary); text-decoration: none; }

/* WRAP */
.wrap-full { position: relative; }
.wrap { max-width: 1200rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 760rem; margin: 0 auto; position: relative; }

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



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 120rem; position: absolute; z-index: 500; }
.header__inner { height: 100%; margin: 0 43rem 0 44rem; position: relative; }

/* LOGO */
#logo { position: absolute; left: 0; top: 40rem; }
#logo a { display: block; padding: 4rem 0; font-size: 24rem; line-height: 36rem; font-weight: 600; }

/* QUICK LINK */
.header__quicklink { display: flex; gap: 8rem; align-items: center; padding: 8rem 60rem; position: fixed; top: 37rem; right: 43rem; color: var(--color-white); background: var(--color-secondary); border-radius: 99rem; z-index: 500; transition: background-color .3s; }
.header__quicklink .jt-icon { width: 16rem; }
.header__quicklink .jt-icon svg path { fill: var(--color-white); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 0 43rem 70rem 44rem; position: relative; }
.footer__inner { display: flex; align-items: flex-start; justify-content: space-between; position: relative; margin-top: 66rem; }
.footer__group { display: flex; align-items: center; gap: 105rem; }

/* SHARE */
.footer__share { display: block; padding: 10rem; position: relative; }
.footer__share .jt-icon { width: 24rem; }

/* COPYRIGHT */
.footer__copyright { width: 100%; position: absolute; text-align: center; }



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.go-top { display: block; }

.go-top__icon { width: 56rem; height: 56rem; position: relative; background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--border-radius-01); transition: background-color .3s; }
.go-top__icon .jt-icon { width: 24rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
.go-top__icon .jt-icon svg path { fill: var(--color-black); }

.go-top__typo { display: block; margin-top: 8rem; text-align: center; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding: 200rem 43rem 60rem 44rem; }



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container { padding-top: 0; 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 { padding-top: 83rem; text-align: center; }
.error-404__inner h1 { margin-bottom: 40rem; }
.error-404__inner p + p { margin-top: 30rem; }
.error-404__controller { margin-top: 24rem; }
.error-404__controller .jt-btn__icon .jt-icon { width: 12rem; margin-right: -3rem; }



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

    /* HEADER */
    .header__quicklink:hover { background: rgba(221, 19, 0, 0.8); }

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