@charset "utf-8";

/*
 * File    : company.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * COMPANY
 * HOVER
 */



/* **************************************** *
 * COMPANY
 * **************************************** */
/* LAYOUT */
body.page-template-company .main-container { padding-bottom: 0; }

/* INTRO */
.company-intro.article__section { padding: 234rem 0; text-align: center; }
.company-intro__desc { margin-top: 48rem; }
.company-intro__desc p + p { margin-top: 30rem; }

/* MEDIA */
.company-media.article__section { padding-bottom: 0; }

.company-media__thumb { position: relative; -webkit-user-select: none; user-select: none; }
.company-media__thumb:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; transition: opacity .3s; will-change: opacity; }
.company-media__thumb .jt-lazyload { padding-top: 136.66%; }
.company-media__logo { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; z-index: 1; pointer-events: none; }
.company-media__logo svg { width: 100%; height: auto; vertical-align: top; }
.company-media__logo path { fill: var(--color-white); }
.company-media .jt-marquee__item { width: 360rem; }

.jt-marquee__item--01 .company-media__logo svg { max-width: 260rem; width: 72.23%; }
.jt-marquee__item--02 .company-media__logo svg { max-width: 260rem; width: 72.23%; }
.jt-marquee__item--03 .company-media__logo svg { max-width: 280rem; width: 77.78%; }
.jt-marquee__item--04 .company-media__logo svg { max-width: 100rem; width: 27.78%; }
.jt-marquee__item--05 .company-media__logo svg { max-width: 300rem; width: 83.33%; }

/* ARCHIVE */
.company-archive.article__section { padding: 200rem 0; --archive-padding: 66rem; --archive-height: 156rem; }

.company-archive__title { text-align: center; }
.company-archive__list { margin-top: 120rem; --svg-scale: 1; }
.company-archive__item { position: relative;  border-top: 2rem solid var(--color-black); cursor: pointer; overflow: hidden; }
.company-archive__head, .company-archive__body { display: flex; justify-content: space-between; gap: 32rem; }
.company-archive__head { height: var(--archive-height); }
.company-archive__body { position: absolute; left: 0; top: 0; width: 100%; padding: var(--archive-padding) 0; background: var(--color-white); opacity: 0; visibility: hidden; }

.company-archive__column { display: flex; flex-direction: column; justify-content: center; }
.company-archive__column:nth-child(1) { width: 548rem; }
.company-archive__column:nth-child(2) { flex: 1; }
.company-archive__column:nth-child(3) { width: 316rem; align-items: flex-end; }

.company-archive__body .company-archive__column { justify-content: flex-start; }

.company-archive__logo { position: absolute; top: calc(var(--archive-height) / 2); transform: translateY(-50%); font-size: 0; will-change: opacity; }
.company-archive__logo svg { height: auto; overflow: visible; }
.company-archive__logo path { fill: var(--color-black); }

.company-archive__item--01 .company-archive__logo svg { width: calc(200rem * var(--svg-scale)); }
.company-archive__item--02 .company-archive__logo svg { width: calc(97rem * var(--svg-scale)); }
.company-archive__item--03 .company-archive__logo svg { width: calc(160rem * var(--svg-scale)); }
.company-archive__item--04 .company-archive__logo svg { width: calc(38rem * var(--svg-scale)); }
.company-archive__item--05 .company-archive__logo svg { width: calc(200rem * var(--svg-scale)); }

.company-archive__control { display: block; position: relative; width: 24rem; height: 24rem; transition: transform .3s; }
.company-archive__control:before, .company-archive__control:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--color-black); }
.company-archive__control:before { width: 100%; height: 4rem; }
.company-archive__control:after { width: 4rem; height: 100%; }

.company-archive__thumb { width: 200rem; }
.company-archive__thumb .jt-lazyload { padding-top: 130%; }

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

/* HISTORY */
.company-history.article__section { padding: 0; background: var(--color-gray-900); height: 100vh; max-height: 720rem; }
.company-history__container { display: flex; justify-content: space-between; max-width: 1360rem; margin: 0 auto; height: 100%; padding: 130rem 0; --year-width: 200rem; }
.company-history__title { color: var(--color-white); margin-top: 6rem; }
.company-history__body { position: relative; display: flex; gap: 32rem; height: 100%; overflow: hidden; }
.company-history__year { position: relative; width: var(--year-width); height: 100%; }
.company-history__year:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 328rem; background: linear-gradient(180deg, rgba(20, 20, 20, 0.00) 0%, var(--color-gray-900) 106.14%); pointer-events: none; z-index: 1; transition: opacity .3s, visibility .3s; }
.company-history__year-list { height: 100%; }
.company-history__year-item { height: auto; margin-bottom: 4rem; }
.company-history__year-item:last-child { margin-bottom: 0; }
.company-history__year-item > a { display: block; color: var(--color-white); opacity: .3; font-feature-settings: 'tnum'; transition: opacity .3s; }
.company-history__list { position: relative; width: 548rem; height: 100%; }
.company-history__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.company-history__content-list { margin-top: 10rem; }
.company-history__content-list > li { position: relative; padding-left: 48rem; color: var(--color-white); }
.company-history__content-list > li + li { margin-top: 16rem; }
.company-history__label { position: absolute; left: 0; top: 0; }

.company-history__year-item.company-history--active > a { opacity: 1; }
.company-history__content.company-history--active { opacity: 1; visibility: visible; }

.company-history--last .company-history__year:after { visibility: hidden; opacity: 0; }

/* LOCATION */
.company-location.article__section { padding: 213rem 0; }
.company-location__bg { position: absolute; inset: 0; background: no-repeat center center / cover; }
.company-location__bg-mobile { display: none; }
.company-location__title { text-align: center; }
.company-location__list { max-width: 896rem; margin: 80rem auto 0; }
.company-location__list > li { display: flex; gap: 32rem; border-top: 2rem solid var(--color-black); padding: 48rem 0 62rem; }
.company-location__label { width: 240rem; }
.company-location__content { flex: 1; }
.company-location__contact { display: flex; gap: 16rem; margin-top: 4rem; }
.company-location__contact a { transition: opacity .3s; }
.company-location__map { display: flex; gap: 24rem; margin-top: 32rem; }
.company-location__map a { display: flex; gap: 6rem; align-items: center; }
.company-location__map a > span { position: relative; }
.company-location__map 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); }
.company-location__map .jt-icon { position: relative; top: .5rem; width: 12rem; }
.company-location__map .jt-icon svg { overflow: visible; }



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

    /* MEDIA */
    .company-media__thumb:hover:before { opacity: 0; }

    /* ARCHIVE */
    .company-archive__item:hover .company-archive__control { transform: rotate(90deg); }

    .company-archive__sns a:hover { background: var(--color-black); }
    .company-archive__sns a:hover:before { transform: scale(1.24); }
    .company-archive__sns a:hover .jt-icon path { fill: var(--color-white); }

    /* HISTORY */
    .company-history__year-item > a:hover { opacity: 1; }

    /* LOCATION */
    .company-location__contact a:hover { opacity: .8; }
    .company-location__map a > span:hover:after { width: 100%; left: 0; right: auto; }

}