@charset "utf-8";

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



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

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

/* WRAP */
.wrap { max-width: 1360rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 800rem; margin: 0 auto; position: relative; }

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



/* **************************************** *
 * HEADER
 * **************************************** */
#header { --maximize-height: 200rem; --minimize-height: 80rem; --padding-bottom: 8rem; position: fixed; top: 0; left: 0; width: 100%; height: var(--minimize-height); background: var(--color-white); border-bottom: 2rem solid transparent; z-index: 500; transition: border-color .3s, background .3s; }
.header__inner { position: relative; display: flex; align-items: flex-end; height: 100%; max-width: 1360rem; margin: 0 auto; }

/* LOGO */
#logo { width: 200rem; height: auto; position: absolute; left: 0; bottom: 22rem; z-index: 2; }
#logo a { display: block; padding: 5rem 0; }
#logo a svg { display: block; width: 100%; height: auto; overflow: visible; }

/* MENU */
.menu-container { display: block; width: 100%; position: relative; font-size: 0; line-height: 1; text-align: center; z-index: 1; }
#menu { display: inline-block; vertical-align: middle; }
#menu a { display: block; transition: color .3s; }
#menu a span { position: relative; }

#menu ul.sub-menu { display: none; }

/* 1DEPTH */
#menu > li { display: inline-block; vertical-align: middle; position: relative; }
#menu > li > a { position: relative; display: block; padding: 27rem 18rem; font-family: var(--font-secondary); font-size: var(--font-size-secondary-06); line-height: var(--font-lineheight-secondary-06); font-weight: 700; letter-spacing: var(--letter-spacing-03); color: var(--color-black); text-transform: uppercase; }
#menu > li > a > span { display: inline-block; position: relative; }
#menu > li > a > span:after { content: ''; display: block; width: 0; height: 2rem; position: absolute; bottom: -2rem; right: 0; left: auto; background: currentColor; transition: width .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); }
#menu > li.current-menu-item > a > span:after, #menu > li.current-menu-ancestor > a > span:after { width: 100%; left: 0; right: auto; }

/* SEARCH */
.search-controller { position: absolute; bottom: 17rem; right: -10rem; z-index: 2; }
.search-controller__btn { position: relative; display: block; width: 44rem; height: 44rem; padding: 10rem; }
.search-controller__btn:before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--color-gray-100); opacity: 0; transition: opacity .3s; will-change: opacity; }
.search-controller__btn .jt-icon { position: relative; display: block; width: 100%; height: 100%; }

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

/* MINIMIZE */
.minimize#header { position: fixed; border-bottom-color: var(--color-black); }

/* TRANSPARENT */
body:has(.jt-single__header--visual) #header, body:has(.article__visual) #header { background: transparent; }
body:has(.jt-single__header--visual) .minimize#header, body:has(.article__visual) .minimize#header { background: var(--color-white); }
body:has(.jt-single__header--visual) #header:not(.minimize) #logo path, body:has(.article__visual) #header:not(.minimize) #logo path { fill: var(--color-white); }
body:has(.jt-single__header--visual) #header:not(.minimize) #menu > li > a, body:has(.article__visual) #header:not(.minimize) #menu > li > a { color: var(--color-white); }
body:has(.jt-single__header--visual) #header:not(.minimize) .search-controller__btn .jt-icon path, body:has(.article__visual) #header:not(.minimize) .search-controller__btn .jt-icon path { fill: var(--color-white); }

/* HOME HEADER LOGO */
.header__logo { position: absolute; width: 480rem; height: auto; bottom: calc(var(--minimize-height) - var(--padding-bottom) + 20rem); left: 50%; transform: translateX(-50%); }
.header__logo a { display: block; }
.header__logo a svg { display: block; width: 100%; height: auto; }

#header:has(.header__logo) { height: var(--maximize-height); padding-bottom: var(--padding-bottom); }
#header:has(.header__logo) #logo { opacity: 0; pointer-events: none; }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { position: relative; padding: 80rem 0 120rem; background: var(--color-gray-900); }
.footer__inner { position: relative; max-width: 1360rem; margin: 0 auto; }

.footer__group--01 { display: flex; gap: 70rem; align-items: center; }
.footer__group--02 { display: flex; gap: 24rem; position: absolute; right: 0; top: 0; }
.footer__group--03 { display: flex; align-items: flex-end; position: absolute; left: calc(100% - 424rem); bottom: 0; }
.footer__group--04 { display: flex; flex-direction: column; margin-top: 60rem; }

.footer__logo svg { width: 240rem; height: auto; vertical-align: top; overflow: visible; }
.footer__logo path { fill: var(--color-white); }

.footer__buttons { display: flex; gap: 20rem; }
.footer__buttons > a { display: block; padding: 8rem 18rem; color: var(--color-white); border: 2rem solid var(--color-white); border-radius: 21rem; transition: background .3s, color .3s; }

.footer__menu { width: 200rem; margin-top: -6rem; }
#footer-menu > li > a { display: inline-flex; color: var(--color-white); font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); letter-spacing: var(--letter-spacing-03); font-weight: 800; padding: 6rem 0; }
#footer-menu > li > a > span { position: relative; }
#footer-menu > li > a > span:after { content: ''; display: block; width: 0; height: 2rem; position: absolute; bottom: -2rem; right: 0; left: auto; background: currentColor; transition: width .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); }

.footer__links { width: 200rem; margin-top: -6rem; }
.footer__links > li > a { display: inline-flex; align-items: center; gap: 6rem; color: var(--color-white); padding: 6rem 0; }
.footer__links > li > a > span { position: relative; }
.footer__links > li > a > span:after { content: ''; display: block; width: 0; height: 2rem; position: absolute; bottom: -2rem; right: 0; left: auto; background: currentColor; transition: width .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.footer__links .jt-icon { position: relative; top: .5rem; width: 12rem; }
.footer__links .jt-icon svg { overflow: visible; }
.footer__links .jt-icon path { fill: var(--color-white); }

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

.footer__info { order: 1; margin-bottom: 16rem; }
.footer__info p { color: var(--color-white); }
.footer__info p + p { margin-top: 16rem; }
.footer__info a { color: inherit; }
.footer__info span { display: inline-block; margin-right: 0.7em; }

.footer__sns { display: flex; gap: 16rem; }
.footer__sns a { position: relative; display: flex; align-items: center; justify-content: center; width: 42rem; height: 42rem; border-radius: 50%; transition: background .3s; }
.footer__sns a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background: inherit; border: 2rem solid var(--color-white); box-sizing: border-box; transition: transform .3s; will-change: transform; }
.footer__sns .jt-icon { position: relative; width: 24rem; z-index: 1; }
.footer__sns .jt-icon path { fill: var(--color-white); }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { position: relative; padding-top: 160rem; padding-bottom: 160rem; background: var(--color-white); transition: padding-top .4s linear; }
.main-container:has(.article__visual) { padding-top: 0; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { padding-bottom: 80rem; text-align: center; overflow: hidden; }
.article__header--secondary { padding-bottom: 60rem; }
.article__desc { margin-top: 24rem; }
.article__link { margin-top: 24rem; }

/* PAGE VISUAL */
.article__visual { position: relative; height: 100vh; overflow: hidden; }
.article__visual:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); z-index: 1; }
.article__visual-bg { position: absolute; top: 0; left: 0; width: 100%; min-height: 120%; padding-top: 76.87%; background: no-repeat center center / cover; }
.article__visual-bg--mobile { display: none; }
.article__visual-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; }
.article__visual-title { color: var(--color-white); margin-top: 15rem; }
.article__visual-title svg { width: 800rem; height: auto; vertical-align: top; }
.article__visual-title path { fill: currentColor; }
.article__visual-desc { color: var(--color-white); margin-top: 34rem; }

/* PAGE BODY */
.article__body { position: relative; }
.article__section { position: relative; padding-bottom: 96rem; overflow: hidden; }
.article__section:last-child { padding-bottom: 0; }
.article__section:has(.jt-grid__sticky) { overflow: visible; }

/* ARTNOW */
body.page-template-artnow .article__title { font-size: 0; height: var(--font-lineheight-secondary-01); }
body.page-template-artnow .article__title i { display: inline-block; max-width: 300rem; }
body.page-template-artnow .article__title svg { width: 100%; height: auto; vertical-align: top; }
body.page-template-artnow .article__title path { fill: #97CE8B; }



/* **************************************** *
 * SECTION
 * **************************************** */
.jt-section { --padding-top: 82rem; --padding-bottom: 96rem; position: relative; overflow: hidden; padding: var(--padding-top) 0 var(--padding-bottom); }
.jt-section.jt-section--gray { background: var(--color-gray-100); padding-bottom: 112rem; }
.jt-section.jt-section--black { background: var(--color-gray-900); padding-top: 120rem; padding-bottom: 110rem; }
.jt-section:has(.jt-banner--middle), 
.jt-section:has(.jt-banner--bottom) { padding-top: 0; padding-bottom: 0; }
.jt-section:has(.jt-banner--bottom):last-child { padding-bottom: var(--padding-bottom); }
.jt-section:has(.jt-banner--bottom):has(+ .jt-section--gray),
.jt-section:has(.jt-banner--bottom):has(+ .jt-section--black) { padding-bottom: var(--padding-bottom); }
.jt-section__head { margin-bottom: 16rem; }
.jt-section__more { position: absolute; right: 0; top: 50%; padding-right: 18rem; transform: translate(0, -50%); transition: opacity .3s; }
.jt-section__more:before, .jt-section__more:after { content: ''; position: absolute; transform: translateY(-50%); background: var(--color-black); }
.jt-section__more:before { right: 5rem; top: 50%; width: 2px; height: 12rem; }
.jt-section__more:after { right: 0; top: 50%; width: 12rem; height: 2px; }

.jt-section:has(.jt-grid) { overflow: visible; }



/* **************************************** *
 * SEARCH
 * **************************************** */
/* HEADER SEARCH */
.search-container { position: fixed; inset: 0; z-index: 501; opacity: 0; visibility: hidden; }
.search-container__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.search-container__inner { position: absolute; top: 0; bottom: 0; right: 0; display: flex; flex-direction: column; gap: 36rem; width: 596rem; background: var(--color-gray-900); padding: 138rem 47rem 40rem; transform: translateX(100%); }
.search-container__close { position: absolute; top: 30rem; right: 37rem; padding: 10rem; border: 0; background: transparent; display: flex; align-items: center; gap: 8rem; color: var(--color-white); cursor: pointer; }
.search-container__close > * { opacity: .5; transition: opacity .3s; }
.search-container__close .jt-icon { width: 24rem; }
.search-container__close .jt-icon path { fill: currentColor; }

.search-container__keywords { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.search-container__keywords-list > li + li { margin-top: 12rem; }
.search-container__keywords-list > li > a { color: var(--color-white); opacity: .5; transition: opacity .3s; }

html.win .search-container__keywords { overflow: overlay; }
html.win .search-container__keywords::-webkit-scrollbar { width: 6rem; background: transparent; }
html.win .search-container__keywords::-webkit-scrollbar-thumb { background: var(--color-gray-800); }
html.ff .search-container__keywords { scrollbar-width: thin; }

.search-container__fleld .jt-search__input { height: 41rem; padding: 0 82rem 15rem 0; font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); color: var(--color-white); border-bottom-width: 2rem; border-bottom-color: var(--color-white); }
.search-container__fleld .jt-search__label { top: calc(var(--font-lineheight-primary-06) / 2); transform: translateY(-50%); font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); color: var(--color-white); }
.search-container__fleld .jt-search__submit { width: 44rem; height: 44rem; margin: 0; padding: 10rem; right: -10rem; top: -10rem; border-radius: 0; border: 0; }
.search-container__fleld .jt-search__submit:before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--color-black); opacity: 0; transition: opacity .3s; }
.search-container__fleld .jt-search__submit .jt-icon { position: relative; display: block; width: 100%; }
.search-container__fleld .jt-search__submit .jt-icon path { fill: var(--color-white); }
.search-container__fleld .jt-search__reset { right: 48rem; top: 0; }

/* SEARCH RESULT */
.jt-search-result__head { text-align: center; padding: 60rem 0; }

.jt-search-result__title { color: var(--color-gray-600); }
.jt-search-result__title > span { color: var(--color-black); }
.jt-search-result__title > span:before { content: "'"; }
.jt-search-result__title > span:after { content: "'"; }
.jt-search-result__title > sup { vertical-align: top; margin-left: 8rem; color: var(--color-black); }

.jt-search-result__desc { color: var(--color-gray-600); margin-top: 8rem; }

.jt-search-result__body h2 { margin-bottom: 16rem; margin-top: 68rem }

.jt-search-result__sort { display: flex; justify-content: flex-end; gap: 24rem; margin-bottom: 32rem; }
.jt-search-result__sort > a { position: relative; color: var(--color-black); opacity: .5; transition: opacity .3s; }
.jt-search-result__sort > a.jt-search-result__sort--active { opacity: 1; }
.jt-search-result__sort > a + a:before { content: ''; position: absolute; top: calc(var(--font-lineheight-primary-08) / 2 - 6rem); left: -13rem; width: 1px; height: 12rem; background: var(--color-gray-400); }

body.search .jt-thumb-list__title { color: var(--color-gray-600); }

/* HIGHLIGHT */
.jt-search--highlight { color: var(--color-black); }



/* **************************************** *
 * PRIVACY
 * **************************************** */
.privacy__revison { text-align: center; margin-top: 24rem; }
.privacy__revison .choices { display: inline-block; min-width: 147rem; text-align: left; vertical-align: top; }
.privacy__revison .choices[data-type*=select-one]:after { width: 16rem; right: 20rem; background-image: url(../images/icon/jt-icon/jt-chevron-bottom-tiny-2px-square.svg); }
.privacy__revison .choices__inner { border: 1px solid var(--color-black); font-family: var(--font-secondary); font-size: var(--font-size-secondary-08); line-height: var(--font-lineheight-secondary-08); font-weight: 700; padding: 7rem 40rem 7rem 21rem; height: 36rem; }
.privacy__revison .choices[data-type*=select-one] .choices__inner { padding-bottom: 7rem; }
.privacy__revison .choices__list--dropdown .choices__item, .privacy__revison .choices__list[aria-expanded] .choices__item { font-family: var(--font-secondary); font-size: var(--font-size-secondary-08); line-height: var(--font-lineheight-secondary-08); font-weight: 700; white-space: nowrap; padding: 8rem 21rem; }

html.mobile .privacy__revison .jt-choices__wrap { display: inline-block; vertical-align: top; }
html.mobile .privacy__revison .jt-choices__wrap:before { width: 16rem; right: 20rem; background-image: url(../images/icon/jt-icon/jt-chevron-bottom-tiny-2px-square.svg); }
html.mobile .privacy__revison .jt-choices__wrap > select { padding: 0 40rem 0 21rem; border: 1px solid var(--color-black); min-width: 147rem; height: 36rem; font-family: var(--font-secondary); font-size: var(--font-size-secondary-08); line-height: var(--font-lineheight-secondary-08); font-weight: 700; }
html.mobile .privacy__revison .jt-choices__wrap > select:focus { border-color: var(--color-black); }



/* **************************************** *
 * 404
 * **************************************** */
.error-404__title { margin-top: 40rem; font-size: 0; }
.error-404__title i { display: block; }
.error-404__title i svg { width: 100%; height: auto; vertical-align: top; }
.error-404__title path { fill: var(--color-black); }
.error-404__image { margin-top: 60rem; }
.error-404__image .jt-lazyload { padding-top: 45%; }
.error-404__desc { margin-top: 60rem; text-align: center; }
.error-404__control { margin-top: 60rem; margin-bottom: 110rem; text-align: center; }



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

    /* HEADER */
    #menu > li > a:hover > span:after { width: 100%; left: 0; right: auto; }

    /* SEARCH */
    .search-controller__btn:hover:before { opacity: 1; }
    .search-container__close:hover > * { opacity: 1; }
    .search-container__keywords-list > li > a:hover { opacity: 1; }
    .search-container__fleld .jt-search__submit:hover { background: inherit; }
    .search-container__fleld .jt-search__submit:hover:before { opacity: 1; }

    .jt-search-result__sort > a:hover { opacity: 1; }

    body:has(.jt-single__header--visual) #header:not(.minimize) .search-controller__btn:hover .jt-icon path { fill: var(--color-black); }

    /* FOOTER */
    .footer__buttons > a:hover { background: var(--color-white); color: var(--color-gray-900); }

    #footer-menu > li > a:hover > span:after { width: 100%; left: 0; right: auto; }

    .footer__links > li > a:hover > span:after { width: 100%; left: 0; right: auto; }

    .footer__sns a:hover { background: var(--color-white); }
    .footer__sns a:hover:before { transform: scale(1.24); }
    .footer__sns a:hover .jt-icon path { fill: var(--color-gray-900); }

    /* SECTION */
    .jt-section__more:hover { opacity: .5; }
    
}