@charset "utf-8";

/*
 * File    : sub-about.css
 * Author  : STUDIO-JT (KMS)
 *
 * ABOUT COMMON COMPONENT
 * PURPOSE & VALUES
 * HISTORY
 * BRAND ASSETS
 * GLOBAL NETWORK
 */



/* **************************************** *
 * ABOUT COMMON COMPONENT
 * **************************************** */
/* INTRO */
.about-intro { margin-bottom: 80rem; }
.about-intro__inner { display: flex; flex-direction: column; gap: 30rem; }

.about-intro__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40rem; }

.about-intro__space { margin-bottom: 50rem; }



/* **************************************** *
 * PURPOSE & VALUES
 * **************************************** */
body.page-template-purpose-values .main-container { padding-bottom: 0; }

/* GLOBAL */
.purpose-section { padding: 100rem 0; }

.purpose-section__head { margin-bottom: 80rem; }
.purpose-section__sub { display: block; margin-top: 50rem; color: var(--color-primary); }
.purpose-section__desc { margin-top: 20rem; }
.purpose-section__sub + .purpose-section__desc { margin-top: 50rem; }

/* PROLOGUE */
.purpose-prologue { height: 400vh; position: relative; overflow: hidden; --prologue-height: 100vh; }
.purpose-prologue__inner { width: 100%; height: 100vh; position: relative; }

html.mobile .purpose-prologue { height: 500vh; --prologue-height: 100lvh; }
html.ios.chrome .purpose-prologue { --prologue-height: 100svh; }

.purpose-prologue__bg { width: 100%; height: var(--prologue-height); position: absolute; top: 0; left: 0; background: var(--color-gray-100); clip-path: inset(0 calc((100% - 1400rem) / 2) round 0); }
.purpose-prologue__bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; }
.purpose-prologue__bg-item:not(:first-child) { opacity: 0; }

.purpose-prologue__content { width: 100%; height: var(--prologue-height); position: absolute; top: 0; left: 0; }
.purpose-prologue__content > .wrap { height: 100%; }
.purpose-prologue__content-item { display: flex; gap: 0; width: 100%; position: absolute; top: 50%; left: 0; transform: translate3d(0, -50%, 0); opacity: 0; visibility: hidden; }
.purpose-prologue__content-col { flex: 1; padding: 40rem 50rem; }
.purpose-prologue__content-col:nth-child(1) { background: var(--color-primary); }
.purpose-prologue__content-col:nth-child(2) { color: var(--color-white); background: var(--color-black); }
.purpose-prologue__content b + p { margin-top: 16rem; }

/* FUTURE */
.purpose-future { color: var(--color-white); background: var(--color-black); }
.purpose-future .purpose-section__head { margin-bottom: 60rem; }

.purpose-future__card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40rem; }
.purpose-future__card > li { display: flex; align-items: stretch; }
.purpose-future__card-icon { width: 80rem; flex-shrink: 0; }
.purpose-future__card-icon > svg { display: block; width: 100%; height: auto; }
.purpose-future__card-txt { display: flex; align-items: center; padding: 10rem 20rem; background: var(--color-gray-700); flex: 1; }

/* PRODUCT */
.purpose-product { background: var(--color-secondary); }
.purpose-product.purpose-section { padding-top: 80rem; }

.purpose-product__card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40rem; }
.purpose-product__card > li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 62rem; padding: 50rem 40rem 70rem; background: var(--color-black); }
.purpose-product__card-icon { width: 150rem; }
.purpose-product__card-icon .jt-lazyload { padding-top: 100%; }
.purpose-product__card-txt { text-align: center; color: var(--color-white); }

/* VALUE */
.purpose-value { background: var(--color-gray-100); }
.purpose-value.purpose-section { padding-bottom: 120rem; }

.purpose-value__list-item { display: flex; }
.purpose-value__list-item > * { width: 50%; }

.purpose-value__list-image { align-self: flex-start; position: relative; overflow: hidden; }
.purpose-value__list-image .jt-lazyload { padding-top: 100%; }
.purpose-value__list-image-word { width: 233rem; position: absolute; }
.purpose-value__list-image-word svg { display: block; width: 100%; height: auto; }
.purpose-value__list-image-zoom { overflow: hidden; }
.purpose-value__list-image-zoom img { transform: scale(1.2); }

.purpose-value__card-contet { align-self: center; }
.purpose-value__card-contet > b { display: block; margin-top: 10rem; color: var(--color-primary); }
.purpose-value__card-contet > p { margin-top: 40rem; }

.purpose-value__list-item:nth-child(even) .purpose-value__list-image { order: 2; }
.purpose-value__list-item:nth-child(even) .purpose-value__card-contet { padding-right: 60rem; }
.purpose-value__list-item:nth-child(odd) .purpose-value__card-contet { padding-left: 60rem; }

.purpose-value__list-item:nth-child(1) .purpose-value__list-image-word { left: -1rem; bottom: -1rem; }
.purpose-value__list-item:nth-child(2) .purpose-value__list-image-word { right: -1rem; top: 50%; transform: translateY(-50%); }
.purpose-value__list-item:nth-child(3) .purpose-value__list-image-word { right: -1rem; top: -1rem; }

/* RECENT */
.purpose-recent.purpose-section { padding-top: 120rem; padding-bottom: 140rem; }
.purpose-recent .purpose-section__head { margin-bottom: 120rem; }

.purpose-recent__group { display: flex; flex-direction: column; gap: 120rem; }
.purpose-recent__group-title { margin-bottom: 60rem; }
.purpose-recent__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40rem; }
.purpose-recent__list-image { position: relative; }
.purpose-recent__list-image .jt-lazyload { padding-top: 37.5%; }
.purpose-recent__list-number { display: flex; align-items: center; justify-content: center; width: 80rem; height: 80rem; position: absolute; top: 0; left: 0; background: var(--color-primary); z-index: 2; }
.purpose-recent__list-name { display: block; margin-top: 20rem; }

/* COMMITMENT */
.purpose-commitment { padding: 120rem 0 554rem; background: no-repeat center / cover; }

.purpose-commitment__content { width: 100%; max-width: 680rem; }
.purpose-commitment__content > p { margin-top: 40rem; }
.purpose-commitment__content > b { display: block; margin-top: 30rem; color: var(--color-primary); }



/* **************************************** *
 * HISTORY
 * **************************************** */
/* CHANGE */
.history-change { padding: 80rem 0 154rem; background: var(--color-secondary); }

.history-change__title { margin-bottom: 104rem; }

.history-change__list { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 40rem; }
.history-change__list-item { --motion-y: 74rem; }
.history-change__list-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 118rem; height: 100%; padding: 40rem; color: var(--color-white); background: var(--color-black); }
.history-change__list-top > b { display: block; margin-bottom: 8rem; }
.history-change__list-bottom { display: flex; flex-direction: column; }
.history-change__list-logo .jt-lazyload { width: 100%; height: 100%; }
.history-change__list-item:last-child .history-change__list-top > b { color: var(--color-primary); }

.history-change__list > li:nth-child(1) .history-change__list-bottom { gap: 10rem; }
.history-change__list > li:nth-child(1) .history-change__list-logo { width: 134rem; aspect-ratio: 134 / 55; }
.history-change__list > li:nth-child(2) .history-change__list-bottom { gap: 30rem; }
.history-change__list > li:nth-child(2) .history-change__list-logo { width: 303rem; aspect-ratio: 303 / 42; }
.history-change__list > li:nth-child(3) .history-change__list-bottom { gap: 35rem; }
.history-change__list > li:nth-child(3) .history-change__list-logo { width: 292rem; aspect-ratio: 292 / 30; }

/* REPORT */
.history-report { margin-top: 100rem; }

.history-report__title { margin-bottom: 140rem; }

.history-report__group { display: flex; align-items: start; gap: 40rem; position: relative; }
.history-report__group > * { flex: 1; }
.history-report__group-head { display: grid; position: sticky; top: 80rem; }
.history-report__group-title { grid-area: 1 / 1; }
.history-report__group-title:not(:first-child) { opacity: 0; visibility: hidden; }
.history-report__group-title > p { margin-top: 19rem; }

.history-report__group-content { display: flex; flex-direction: column; gap: 150rem; }
.history-report__group-content .history-report__group-title { display: none; }

.history-report__list { display: flex; flex-direction: column; gap: 80rem; }
.history-report__list-year { display: block; padding: 7rem 0; border: solid var(--color-black); border-width: 3rem 0; }
.history-report__list-data > li { padding: 30rem 0 29rem; border-bottom: 1px solid var(--color-black); }
.history-report__list-data > li:last-child { padding-bottom: 0; border-bottom: none; }



/* **************************************** *
 * BRAND ASSETS
 * **************************************** */
/* SYSTEM */
.assets-system { padding: 200rem 0 40rem; background: var(--color-gray-100); }

.assets-system__logo { width: 1000rem; margin: 0 auto; }
.assets-system__logo .jt-lazyload { padding-top: 10.3%; }

.assets-system__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40rem; margin-top: 200rem; }
.assets-system__info > li { padding: 35rem 40rem; background: var(--color-white); }
.assets-system__info > li > b { display: block; margin-bottom: 20rem; }
.assets-system__info > li > ul > li { padding-left: 12rem; position: relative; }
.assets-system__info > li > ul > li:before { content: ''; width: 4rem; height: 4rem; position: absolute; top: 9rem; left: 0; background: var(--color-black); border-radius: 50%; }
.assets-system__info > li > ul > li + li { margin-top: 8rem; }

/* GUIDE */
.assets-guide { margin-top: 140rem; }
.assets-guide__item + .assets-guide__item { margin-top: 120rem; padding-top: 120rem; border-top: 1px solid var(--color-black); }

.assets-guide__head { display: flex; gap: 40rem; margin-bottom: 50rem; }
.assets-guide__head > * { flex: 1; }

.assets-guide__logo { display: flex; gap: 40rem; }
.assets-guide__logo > li { flex: 1; }
.assets-guide__logo-preview { display: flex; align-items: center; justify-content: center; height: 340rem; border: 1px solid var(--color-gray-200); }
.assets-guide__logo-preview .jt-lazyload { width: 487rem; max-width: 100%; aspect-ratio: 487 / 50; }
.assets-guide__logo .jt-btn__box { margin-top: 30rem; }
.assets-guide__white .assets-guide__logo-preview { background: var(--color-black); border-color: var(--color-black); }

.assets-guide__color { display: grid; grid-template-columns: 15fr 21fr 6fr 6fr 6fr 16fr; }
.assets-guide__color > li { display: flex; align-items: end; height: 300rem; padding: 20rem; position: relative; }
.assets-guide__color > li > p { width: calc(100% - 40rem); position: absolute; top: 20rem; left: 20rem; }
.assets-guide__color--orange { background: var(--color-primary); }
.assets-guide__color--charcoal { background: #252729; }
.assets-guide__color--charcoal > :is(b, p) { color: var(--color-primary); }
.assets-guide__color--light-gray { background: #E6EDF7; }
.assets-guide__color--medium-gray { background: #B0BDD1; }
.assets-guide__color--dark-gray { background: #505D70; }
.assets-guide__color--dark-gray > b { color: var(--color-white); }
.assets-guide__color--white { background: var(--color-white); border: 1px solid var(--color-gray-200); }



/* **************************************** *
 * GLOBAL NETWORK
 * **************************************** */
/* BANNER */
.network-banner { position: relative; overflow: hidden; }

.network-banner .jt-lazyload { padding-top: 29.16%; }

.network-banner__word { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.network-banner__word > .wrap { height: 100%; }
.network-banner__icon { position: absolute; height: 177rem; opacity: 0; }
.network-banner__icon svg { display: block; width: auto; height: 100%; }
.network-banner__icon.network-banner__icon--o { height: 186rem; }
.network-banner__icon--n { left: 0; bottom: -1rem; }
.network-banner__icon--h { left: 13.7%; top: 0; }
.network-banner__icon--a { left: 27.8%; top: 36.7%; }
.network-banner__icon--n2 { right: 15.1%; top: 36.7%; }
.network-banner__icon--o { right: 0; bottom: -16.5%; }

/* INFORMATION */
.network-information { margin-top: 80rem; }

.network-information__title { margin-bottom: 40rem; }

.network-information__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40rem; }
.network-information__list > li { display: flex; flex-direction: column; gap: 80rem; padding: 47rem 30rem 50rem 55rem; background: var(--color-gray-100); }

.network-information__area { position: relative; }
.network-information__area:before { content: ''; display: block; width: 15rem; height: 15rem; position: absolute; top: -17rem; left: -25rem; background: var(--color-primary); }

.network-information__data { display: flex; flex-direction: column; gap: 10rem; margin-top: auto; }
.network-information__data > li { display: flex; align-items: flex-start; gap: 18rem; }
.network-information__data > li > b { flex-shrink: 0; position: relative; font-weight: inherit; color: var(--color-primary); }
.network-information__data > li > b:after { content: ''; display: block; width: 2px; height: 100%; position: absolute; top: 0; right: -10rem; background: url(../images/sub/about/network-colon.svg) no-repeat center / 100% auto; }

/* CONTACT */
.network-contact { margin-top: 80rem; text-align: center; }

.network-contact__title { margin-bottom: 40rem; }