@charset "utf-8";

/*
 * File    : sub-company.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * ABOUT US
 * FOUNDER STORY
 * JOURNEY
 * LEADER SHIP
 * HOVER
 */


 
/* **************************************** *
 * ABOUT US
 * **************************************** */
/* LAYOUT */
body.page-template-about-us .main-container { padding-bottom: 0; }
body.page-template-about-us .article__visual { margin-bottom: 200rem; }

/* MISSION */
.about-mission.article__section { padding: 0; }
.about-mission .article__section-head { margin-bottom: 0; }
.about-mission { background: var(--color-gray-200); padding: 0; overflow: hidden; }
.about-mission__container { display: flex; align-items: center; height: var(--full-height, 100vh); padding: 0 calc(41.02% + 100rem) 0 70rem; }
.about-mission__desc { margin-top: 20rem; color: var(--color-gray-800); }
.about-mission__gallery { position: absolute; top: 0; right: 0; bottom: 0; width: 41.02%; max-width: 730rem; }
.about-mission__gallery .jt-marquee__item { width: 100%; border-radius: 16rem; margin-top: 20rem; overflow: hidden; }
.about-mission__gallery .jt-marquee__item .jt-lazyload { padding-top: 48.63%; }

/* TECHNOLOGY */
.about-technology__video { position: relative; padding-top: 49.59%; border-radius: 32rem; overflow: hidden; }
.about-technology__video:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; border: 10rem solid var(--color-black); z-index: 1; box-sizing: border-box; pointer-events: none; }

/* WHY */
.about-why { background: radial-gradient(93.51% 101.1% at 50.99% 42.79%, rgba(246, 250, 255, 0.60) 0%, rgba(201, 227, 255, 0.60) 50%, rgba(150, 199, 255, 0.60) 100%), #FFF; }
.about-why__container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20rem; }
.about-why__slider { width: 100%; border-radius: 32rem; }
.about-why__item { display: flex; align-items: center; justify-content: center; background: var(--color-white); }
.about-why__image { width: 61.37%; max-width: 540rem; aspect-ratio: 1 / 1; background: no-repeat center center / cover; }
.about-why__content { aspect-ratio: 1 / 0.7727; background: var(--color-white); border-radius: 32rem; padding: 60rem; }
.about-why__content p { color: var(--color-gray-800); }
.about-why__content-inner { display: flex; flex-direction: column; justify-content: center; gap: 24rem; height: 100%; }

/* STRENGTH */
.about-strength.article__section { padding: 0; }
.about-strength__container { display: flex; }
.about-strength__image { position: relative; width: 39.33%; max-width: 755rem; }
.about-strength__image-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.about-strength__content { flex: 1; display: flex; align-items: center; height: var(--full-height, 100vh); padding: 110rem; color: var(--color-white); transition: background .3s; }
.about-strength__content-inner { display: flex; flex-direction: column; gap: 8rem; max-width: 800rem; margin: 0 auto; height: 710rem; }
.about-strength__list > li { border-bottom: 2px solid var(--color-white); }
.about-strength__head { padding: 40rem 0; }
.about-strength__body { margin-top: -20rem; margin-bottom: 20rem; overflow: hidden; }
.about-strength__body-inner { margin-bottom: -20rem; padding-bottom: 40rem; }

.about-strength--init .about-strength__body-inner { transition: height .3s, padding .3s, visibility .3s, opacity .3s; }
.about-strength--init .about-strength__list > li:not(.about-strength--active) .about-strength__body-inner { height: 0 !important; opacity: 0; visibility: hidden; padding: 0; }

.about-strength:has(.about-strength__list > li:nth-child(1).about-strength--active) .about-strength__image--01 { opacity: 1; visibility: visible; }
.about-strength:has(.about-strength__list > li:nth-child(1).about-strength--active) .about-strength__content { background: var(--color-primary); }
.about-strength:has(.about-strength__list > li:nth-child(2).about-strength--active) .about-strength__image--02 { opacity: 1; visibility: visible; }
.about-strength:has(.about-strength__list > li:nth-child(2).about-strength--active) .about-strength__content { background: #166ACA; }
.about-strength:has(.about-strength__list > li:nth-child(3).about-strength--active) .about-strength__image--03 { opacity: 1; visibility: visible; }
.about-strength:has(.about-strength__list > li:nth-child(3).about-strength--active) .about-strength__content { background: #101E53; }

/* ROADMAP */
.about-roadmap.article__section { background: var(--color-gray-200); padding-bottom: 200rem; }
.about-roadmap .jt-category { margin-bottom: 40rem; }
.about-roadmap__slider { background: no-repeat center center / cover; border-radius: 32rem; }
.about-roadmap__item { display: flex; justify-content: space-between; }
.about-roadmap__model { position: relative; flex: 1; }
.about-roadmap__model-image { height: 100%; background: no-repeat center center / cover; }
.about-roadmap__model-marker { position: absolute; width: 34rem; height: 34rem; background: #F03F3F; border-radius: 50%; filter: blur(7.5rem); translate: -50% -50%; animation: bounce-marker 1.4s infinite linear; }
.about-roadmap__content { display: flex; flex-direction: column; justify-content: center; gap: 32rem; width: 44.39%; max-width: 790rem; aspect-ratio: 1 / 1.038; min-height: 100%; background: var(--color-white); margin: 40rem 40rem 40rem 0; margin-left: 0; border-radius: 32rem; padding: 60rem; text-align: center; }
.about-roadmap__content-image { max-width: 670rem; width: 100%; aspect-ratio: 1 / 0.6955; background: no-repeat center center / cover; }
.about-roadmap__content-desc { color: var(--color-gray-800); margin-top: 20rem; }
.about-roadmap__content-desc b { font-weight: 700; color: var(--color-primary); }

.about-roadmap__item--heart .about-roadmap__model-marker { top: 76%; left: 49.05%; }
.about-roadmap__item--brain .about-roadmap__model-marker { top: 18.33%; left: 60.73%; }
.about-roadmap__item--liver .about-roadmap__model-marker { top: 57.5%; left: 47%; }
.about-roadmap__item--eye .about-roadmap__model-marker { top: 28%; left: 56.5%; }
.about-roadmap__item--kidney .about-roadmap__model-marker { top: 71.88%; left: 45.68%; }

/* Keyframes */
@keyframes bounce-marker {
    0% { scale: .8; opacity: .6; }
    50% { scale: 1; opacity: 1; }
    100% { scale: .8; opacity: .6; }
}



/* **************************************** *
 * FOUNDER STORY
 * **************************************** */
body.page-template-founder-story .article__section { padding-top: 0; }

.founder-component + .founder-component { padding-top: 160rem; }
.founder-component__banner { display: grid; gap: 20rem; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.founder-component__banner-item { position: relative; aspect-ratio: 1 / 0.4324; border-radius: 16rem; overflow: hidden; }
.founder-component__banner-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.founder-component__banner-bg--mobile { display: none; }
.founder-component__banner:has(.founder-component__banner-item:nth-child(2)) .founder-component__banner-item { aspect-ratio: 1 / 0.8767; }
.founder-component__banner-caption { position: absolute; bottom: 0; left: 0; display: flex; text-align: right; align-items: end; justify-content: end; width: 100%; height: 110rem; padding: 12rem 20rem; background: linear-gradient(180deg, transparent 10%, #000 266%); box-sizing: border-box; }
.founder-component__banner-caption cite { color: var(--color-white); }
.founder-component__content { text-align: center; margin-top: 60rem; }
.founder-component__content:has(.founder-component__title) { margin-top: 80rem; }
.founder-component__title { margin-bottom: 80rem; }
.founder-component__title:has(+.founder-component__desc) { margin-bottom: 32rem; }
.founder-component__desc { color: var(--color-gray-800); }
.founder-component__desc p + p { margin-top: 24rem; }

.founder-partnership .founder-component__banner-bg { aspect-ratio: 1 / 0.4054; }



/* **************************************** *
 * JOURNEY
 * **************************************** */
.journey__container { position: relative; max-width: 1480rem; margin: 0 auto; padding-right: 150rem; margin-top: -140rem; --journey-gap: 160rem; }
.journey__item { display: flex; justify-content: space-between; gap: 100rem; padding-top: var(--journey-gap); }
.journey__sticky { position: absolute; left: 0; top: var(--journey-gap); bottom: 0; opacity: .6; }
.journey__sticky-inner { position: sticky; top: var(--journey-gap); }
.journey__sticky-title { color: var(--color-primary); font-size: 140rem; line-height: 126rem; font-weight: 700; font-feature-settings: 'tnum'; }
.journey__sticky-title > span { display: none; }
.journey__sticky-desc { color: var(--color-gray-900); margin-top: 20rem; }
.journey__item .journey__sticky { position: static; flex: 1; opacity: 1; }
.journey__item .journey__sticky-title { padding-left: 1.3em; }
.journey__content { width: 58.65%; max-width: 730rem; }
.journey__content-list + .journey__content-list { padding-top: var(--journey-gap); }
.journey__content-list > li { padding: 60rem 0; border-bottom: 1px solid var(--color-gray-400); }
.journey__content-list > li:first-child { padding-top: 0; }
.journey__content-list > li > b { display: block; }
.journey__content-sublist { margin-top: 24rem; }
.journey__content-sublist > li { position: relative; color: var(--color-gray-800); padding-left: 12rem; }
.journey__content-sublist > li + li { margin-top: 12rem; }
.journey__content-sublist > li:before { content: ''; position: absolute; width: 4rem; height: 4rem; background: var(--color-black); border-radius: 50%; left: 0; top: calc(var(--font-lineheight-primary-07) / 2 - 2rem); }
.journey__navigator { position: absolute; top: 0; right: calc(0px - ((100vw - 1480rem) / 2)); height: 100%; padding-right: 70rem; }
.journey__navigator-sticky { position: sticky; top: 0; height: var(--full-height, 100vh); display: flex; flex-direction: column; justify-content: center; gap: 4rem; }
.journey__navigator-list { display: flex; flex-direction: column; gap: 4rem; height: calc((var(--font-lineheight-primary-08) + 16rem + 4px) * 5 - 4rem); overflow: hidden; }
.journey__navigator-item > a { display: block; min-width: 120rem; text-align: center; color: var(--color-gray-700); font-feature-settings: 'tnum'; padding: 6rem 38rem; border: 2px solid transparent; border-radius: 22rem; transition: border .3s, color .3s; }
.journey__navigator-item.journey__navigator--current > a { border-color: var(--color-primary); color: var(--color-primary); }
.journey__navigator-item.journey__navigator--current > a > span { font-weight: 700; }
.journey__navigator-button { height: 24rem; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .3s, visibility .3s; }
.journey__navigator-button .jt-icon { width: 20rem; height: 20rem; vertical-align: middle; }
.journey__navigator-button .jt-icon path { fill: var(--color-gray-500); }
.journey__navigator-button--disabled { opacity: 0; visibility: hidden; }



/* **************************************** *
 * LEADER SHIP
 * **************************************** */
/* Layout */
body.page-template-leadership .main-container { background: var(--color-gray-100); }

/* Founders */
.leadership-founders { background: var(--color-gray-100); }
.leadership-list > li { display: flex; border-radius: 32rem; overflow: hidden; }
.leadership-list > li + li { margin-top: 40rem; }
.leadership-list__image { width: 29.06%; max-width: 430rem; }
.leadership-list__image .jt-lazyload { height: 100%; }
.leadership-list__image .jt-lazyload img { height: 100%; object-fit: cover; }
.leadership-list__content { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 536rem; padding: 60rem 80rem; background: #E8EAF7; }
.leadership-list__name { color: var(--color-primary); }
.leadership-list__position { display: block; margin-top: 4rem; color: var(--color-gray-800); }
.leadership-list__desc { margin-top: 36rem; }
.leadership-list__desc p { color: var(--color-gray-800); }
.leadership-list__desc p + p { margin-top: 16rem; }

/* Team */
.leadership-team { background: var(--color-gray-300); }
.leadership-team .leadership-list > li { border-radius: 0; }
.leadership-team .leadership-list__image { border-radius: 32rem; overflow: hidden; }
.leadership-team .leadership-list__image .jt-lazyload { padding-top: 111.62%; }
.leadership-team .leadership-list__content { min-height: 480rem; background: transparent; padding-right: 0; }

/* Core strength */
.leadership-core { background: var(--color-gray-100); }
.leadership-core .leadership-list > li { border-radius: 0; align-items: start; }
.leadership-core .leadership-list__image { border-radius: 32rem; overflow: hidden; }
.leadership-core .leadership-list__image .jt-lazyload { padding-top: 102.32%; }
.leadership-core .leadership-list__content { min-height: inherit; background: transparent; padding: 0 0 0 80rem; }



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

    /* JOURNEY */
    .journey__navigator-item > a:hover { color: var(--color-primary); }
    .journey__navigator-button:hover .jt-icon path { fill: var(--color-black); }

}