@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT (JSH)
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * CONTAINER
 * PAGE
 * 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); --header-height: 74rem; --minimize-height: 0rem; }
a { color: var(--color-primary); text-decoration: none; }
img { -webkit-user-select: none; -webkit-user-drag: none; user-select: none; }

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

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

/* CHANNEL.IO */
body.page-template-seminar #ch-plugin-entry,
body.page-template-contact #ch-plugin-entry { display: none !important; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: var(--header-height); position: fixed; top: 0; left: 0; background: var(--color-white); border-bottom: 1px solid transparent; z-index: 100; }
.header__inner { position: relative; max-width: 1600rem; margin: 0 auto; height: 100%; }

/* LOGO */
#logo { width: 130rem; position: absolute; left: 0; top: 17.5rem; z-index: 2; }
#logo a { display: block; padding: 4rem 0; }
#logo a svg, #logo a img { display: block; width: 100%; height: auto; }

/* MENU */
.menu-container { display: flex; justify-content: center; height: 100%; 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 { opacity: 0; visibility: hidden; }
.menu-description { display: block; margin-top: 4rem; color: var(--color-gray-800); font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-02); }

/* 1DEPTH */
#menu { display: flex; }
#menu > li { position: relative; }
#menu > li > a { position: relative; display: flex; align-items: center; justify-content: center; gap: 4rem; height: 100%; padding: 0 20rem; color: var(--color-black); font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
#menu > li.current-menu-item > a,
#menu > li.current-menu-ancestor > a,
#menu > li:has(.current-menu-item) > a { color: var(--color-primary); }
#menu > li.menu-item-has-children > a:after { content: ''; display: block; width: 24rem; height: 24rem; background: url(../images/icon/icon-chevron.svg) no-repeat center center / cover; transition: background .3s, transform .3s; }
#menu > li.menu-item-has-children.current-menu-item > a:after,
#menu > li.menu-item-has-children.current-menu-ancestor > a:after,
#menu > li.menu-item-has-children:has(.current-menu-item) > a:after { background-image: url(../images/icon/icon-chevron-active.svg); }

/* 2DEPTH */
#menu > li > ul { position: absolute; top: calc(100% - 10rem); left: -12rem; padding: 20rem; width: 260rem; background: var(--color-white); border-radius: 12rem; border: 1px solid var(--color-gray-400); }
#menu > li > ul > li { margin-bottom: 10rem; }
#menu > li > ul > li:last-child { margin-bottom: 0; }
#menu > li > ul > li > a { padding: 8rem 12rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-02); color: var(--color-gray-800); border-radius: 4rem; transition: background .3s; }
#menu > li > ul > li > a > span { display: inline-block; }
#menu > li > ul > li.current-menu-item > a,
#menu > li > ul > li.current-menu-ancestor > a { color: var(--color-primary); }
#menu > li > ul > li.current-menu-item > a > .menu-description,
#menu > li > ul > li.current-menu-ancestor > a > .menu-description { color: var(--color-primary); }

/* HAS DESCRIPTION */
#menu > li > ul:has(.menu-description) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 508rem; gap: 10rem 20rem; }
#menu > li > ul:has(.menu-description) > li { margin-bottom: 0; }

/* OPEN MENU */
#menu > li.open-menu > ul { opacity: 1; visibility: visible; }
#menu > li.open-menu > a { color: var(--color-primary); }
#menu > li.open-menu > a:after { background-image: url(../images/icon/icon-chevron-active.svg); }
#menu > li.menu-item-has-children.open-menu > a:after { transform: rotate(-180deg); }

/* UTILS */
.header__utils { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); display: flex; gap: 32rem; align-items: center; }
.header__utils a { transition: color .3s, background .3s; }
.header__utils-login { color: var(--color-gray-800); }
.header__utils-start { padding: 10rem 28rem; border-radius: 8rem; color: var(--color-white); background: var(--color-gray-800); }

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

/* MINIMIZE */
.minimize#header { border-bottom-color: var(--color-gray-400); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { position: relative; padding: 90rem 0 40rem; }
.footer__bg { position: absolute; inset: 0; background: no-repeat center top / cover; }
.footer__bg--mobile { display: none; }
.footer__inner { position: relative; max-width: 1600rem; margin: 0 auto; }
.footer__top { display: flex; justify-content: space-between; gap: 80rem; }
.footer__middle { display: flex; justify-content: space-between; gap: 80rem; margin-top: 160rem; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 80rem; margin-top: 30rem; }

.footer__top .footer__column:has(.footer__logo) { width: 252rem; }
.footer__top .footer__column:has(#footer-menu) { flex: 1; }

.footer__logo a { display: block; width: 132rem; font-size: 0; }
.footer__logo svg, .footer__logo img { display: block; width: 100%; height: auto; }

#footer-menu { display: flex; justify-content: space-between; gap: 20rem; }
#footer-menu > li > a { display: block; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-02); color: var(--color-black); pointer-events: none; }
#footer-menu > li > ul { margin-top: 16rem; }
#footer-menu > li > ul > li { margin-bottom: 14rem; }
#footer-menu > li > ul > li:last-child { margin-bottom: 0; }
#footer-menu > li > ul > li > a { display: block; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-gray-700); transition: color .3s; }

.footer__contact { display: flex; gap: 10rem; }
.footer__contact > a { color: var(--color-black); }
.footer__contact > span { color: var(--color-gray-700); }

.footer__info { display: flex; gap: 24rem; margin-top: 6rem; }
.footer__info > li > a { color: var(--color-gray-700); transition: color .3s; }

.footer__policy { display: flex; gap: 28rem; }
.footer__policy > li > a { color: var(--color-black); box-shadow: 0 2px 0 0 transparent; transition: box-shadow .3s; }

.footer__copyright { color: var(--color-gray-700); }

.footer__sns { display: flex; gap: 36rem; }
.footer__sns .jt-icon { width: 26rem; transition: transform .3s; }
.footer__sns .jt-icon path { fill: var(--color-black) }
.footer__sns > li { font-size: 0; }
.footer__sns > li > a { display: block; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding-top: calc(var(--header-height) + 81rem); padding-bottom: 200rem; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { margin-bottom: 80rem; text-align: center; }
.article__title span { position: relative; z-index: 1; }
.article__title span:before, .article__title span:after { content: ''; position: absolute; background: no-repeat center center / cover; z-index: -1; }
.article__header + .jt-category { margin-top: -40rem; }
.article__category { display: inline-block; margin-bottom: 4rem; color: var(--color-primary); }
.article__desc { margin-top: 16rem; color: var(--color-gray-700); }
.article__icon { font-size: 0; margin-bottom: 16rem; }
.article__icon .jt-icon { width: 72rem; }
.article__icon .jt-icon path { fill: var(--color-primary); }

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

/* PAGE SECTION */
.article__section { position: relative; padding-top: 200rem; }
.article__section:first-child { padding-top: 0; }
.article__section--secondary { padding-bottom: 200rem; }
.article__section-head { margin-bottom: 80rem; text-align: center; }
.article__section-title { position: relative; font-size: 0; }
.article__section-title span { position: relative; z-index: 1; }
.article__section-title span:before, .article__section-title span:after { content: ''; position: absolute; background: no-repeat center center / 100%; z-index: -1; }
.article__section-title em { color: var(--color-secondary); }
.article__section-desc { margin-top: 24rem; color: var(--color-gray-800); }
.article__section-control { margin-top: 80rem; display: flex; justify-content: center; gap: 10rem; }
.article__section-control:not(:has(*)) { display: none; }
.article__section-control > a { display: block; color: var(--color-black); transition: color .3s; }
.article__section-control > a > span { display: inline-block; padding: 4rem 0; box-shadow: inset 0 -2rem 0 0 currentColor; }

/* EDITOR */
.article__editor .jt-blocks > * { max-width: var(--wp--style--global--wide-size); }
.article__editor .jt-blocks > *.alignwide { max-width: var(--wp--style--global--wide-size); }
.article__editor .jt-blocks > *.alignfull { max-width: var(--wp--style--global--full-size); }



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

    /* HEADER */
    #menu > li > a:hover { color: var(--color-primary); }
    #menu > li > a:hover:after { background-image: url(../images/icon/icon-chevron-active.svg); }
    #menu > li > ul > li > a:hover { background: var(--color-gray-200); }

    .header__utils-login:hover { color: var(--color-primary); }
    .header__utils-start:hover { background: var(--color-primary); }

    /* FOOTER */
    #footer-menu > li > ul > li > a:hover { color: var(--color-black); }
    .footer__info > li > a:hover { color: var(--color-black); }
    .footer__sns > li > a:hover .jt-icon { transform: scale(1.2); }
    .footer__policy > li > a:hover { box-shadow: 0 2rem 0 0 var(--color-black); }
    
    /* PAGE */
    .article__section-control > a:hover { color: var(--color-primary); }

}