@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * HERO
 * DX
 * SECTOR
 * NETWORK
 * PR CENTER
 * HOVER
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 0; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { height: 100vh; min-height: 100svh; max-height: -webkit-fill-available; position: relative; }
/* html.android .main-visual { height: 100svh; } */

.main-visual__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.main-visual__bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .4); }
.main-visual__picture { width: 100%; height: 100%; position: relative; background: no-repeat center center / cover; }
.main-visual__picture--small { display: none; }

.main-visual__content { width: 100%; padding-top: 57rem; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); }
.main-visual__title { display: block; text-align: center; color: var(--color-white); }

/* Fix JS loading time */
.main-visual__title { opacity: 0; }

.main-visual .swiper-control { opacity: 0; }



/* **************************************** *
 * HERO
 * **************************************** */
.main-hero { position: relative; }

/* VISUAL */
.main-hero__visual { width: 100%; height: var(--section-fvh); position: sticky; top: 0; }

/* TYPO */
.main-hero__typo { width: 100%; position: absolute; left: 0; top: calc(var(--section-fvh) - 150rem); text-align: center; color: var(--color-white); transition: color .4s; z-index: 2; }
.main-hero__typo b { display: block; transform: scale(0.29); transform-origin: top; }

/* SPACE */
.main-hero__space { position: relative; }
.main-hero__space-spacer { height: 352rem; }
.main-hero__space-plane { height: var(--section-fvh); background: var(--color-quaternary); }

/* SLOGAN */
.main-hero__slogan { height: calc(var(--section-fvh) * 4); position: relative; background: var(--color-quaternary); }
.main-hero__slogan-inner { width: 100%; height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }

.main-hero__slogan-overlay { --clip-vertical-space: 50%; --clip-horizontal-space: 50%; width: 100%; height: 100%; position: relative; -webkit-clip-path: inset(var(--clip-vertical-space) var(--clip-horizontal-space) var(--clip-vertical-space) var(--clip-horizontal-space) round 0); clip-path: inset(var(--clip-vertical-space) var(--clip-horizontal-space) var(--clip-vertical-space) var(--clip-horizontal-space) round 0); }

.main-hero__slogan-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.main-hero__slogan-bg > span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; }
.main-hero__slogan-bg > span:last-child { opacity: 0; }

.main-hero__slogan-text { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding-bottom: .05em; position: relative; color: var(--color-white); }
.main-hero__slogan-text-line { display: flex; gap: 0.175em; height: 1.15em; padding: 0 0.1em; overflow: hidden; }
.main-hero__slogan-text-line:not(:first-child) { margin-top: -.05em; }
.main-hero__slogan-text-word { display: flex; }
.main-hero__slogan-text-char { display: inline-block; position: relative; }
.main-hero__slogan-text-char > span:last-child { position: absolute; top: -100%; left: 0; }



/* **************************************** *
 * DX
 * **************************************** */
.main-dx { height: calc(var(--section-fvh) * 3); position: relative; }
.main-dx__inner { width: 100%; height: var(--section-fvh); position: sticky; top: 0; }

.main-dx__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.main-dx__typo { height: 100%; position: relative; }
.main-dx__typo-item { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; color: var(--color-white); }
/*
.main-dx__typo-words { display: inline-block; vertical-align: top; position: relative; overflow: hidden; }
.main-dx__typo-words > span { display: block; }
*/



/* **************************************** *
 * SECTOR
 * **************************************** */
.main-sector {
    height: calc(var(--section-fvh) * 9);
    position: relative;
}
.main-sector__inner { width: 100%; height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }

/* BACKGROUND */
.main-sector__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* KEYWORD */
.main-sector__first { width: 100%; height: 100%; position: relative; z-index: 1; }
.main-sector__first > .wrap-full { height: 100%; }
.main-sector__first-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; color: var(--color-white); }

.main-sector__keyword {
    /* --base-ratio: 0.5; */
    /* --base-size: 1920; */
    /* --base-percent: 100vw; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: max(calc(776rem * var(--base-ratio)), calc(calc(776 / var(--base-size)) * var(--base-percent))); */
    /* height: max(calc(264rem * var(--base-ratio)), calc(calc(264 / var(--base-size)) * var(--base-percent))); */
    width: 776rem;
    height: 264rem;
    position: relative;
}
.main-sector__keyword-cat { align-items: start; position: absolute; top: 0; left: 0; }
.main-sector__keyword-one { align-items: end; position: absolute; right: 0; bottom: 0; }
.main-sector__keyword-line {
    width: 100%;
    height: 10rem;
    padding-left: 600rem;
    padding-right: 460rem;
    /* height: max(calc(10rem * var(--base-ratio)), calc(calc(10 / var(--base-size)) * var(--base-percent))); */
    /* padding-left: max(calc(600rem * var(--base-ratio)), calc(calc(600 / var(--base-size)) * var(--base-percent))); */
    /* padding-right: max(calc(460rem * var(--base-ratio)), calc(calc(460 / var(--base-size)) * var(--base-percent))); */
    position: relative;
}
.main-sector__keyword-line > span { display: block; width: 100%; height: 100%; }

/* BUSINESS */
.main-sector__second { --sector-mask-top: 100%; --sector-mask-right: 100%; --sector-mask-bottom: 100%; --sector-mask-left: 100%; width: 100%; height: 100%; margin-top: calc(var(--section-fvh) * -1); position: relative; z-index: 2; -webkit-clip-path: inset(var(--sector-mask-top) var(--sector-mask-right) var(--sector-mask-bottom) var(--sector-mask-left)); clip-path: inset(var(--sector-mask-top) var(--sector-mask-right) var(--sector-mask-bottom) var(--sector-mask-left)); }

.main-sector__second-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--color-white); z-index: 2; }

.main-sector__business { width: 100%; height: 100%; position: relative; background: var(--color-primary); z-index: 1; }
.main-sector__business > li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: translateY(100%); transition: transform 1s, opacity 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.main-sector__business-content { width: 100%; position: absolute; left: 0; top: 50%; text-align: center; color: var(--color-white); transform: translateY(-50%); }
.main-sector__business-content p { margin-top: 32rem; }
.main-sector__business > li.main-sector__business--active { transform: translateY(0); }
.main-sector__business > li.main-sector__business--active.main-sector__business--end {
    /* transform: translateY(-90%) scale(0.7) rotate(10deg); */
    transform: translateY(50%) scale(0.9);
    opacity: 0;
}



/* **************************************** *
 * NETWORK
 * **************************************** */
.main-network { height: calc(var(--section-fvh) * 3); position: relative; background: #000; }
.main-network__inner { width: 100%; height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }

/* BACKGROUND */
.main-network__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.jt-globe { height: 84.8vh; max-height: 809rem; aspect-ratio: 1 / 1; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.jt-globe__poster { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: no-repeat center/ cover; z-index: 10; }

.jt-globe__canvas { cursor: grab; touch-action: pan-y; }
.jt-globe__canvas.is-grabbing { cursor: grabbing; }

.jt-globe__labels { position: absolute; pointer-events: none; }
.jt-globe__label { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .3s; }
.jt-globe__label > span { display: block; padding: 4rem 16rem; font-size: var(--font-size-primary-12); line-height: var(--font-lineheight-primary-12); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-primary); background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(2.5rem); backdrop-filter: blur(2.5rem); border-radius: var(--border-radius-06); transform: scale(.6); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.jt-globe__label.jt-globe__label--hq > span { color: var(--color-primary); background: var(--color-quaternary); backdrop-filter: none; }

.jt-globe__labels.is-visible .jt-globe__label { opacity: 1; transition-delay: calc(var(--i) * .07s); }
.jt-globe__labels.is-visible .jt-globe__label > span { transform: scale(1); transition-delay: calc(var(--i) * .07s); }

.jt-globe__labels .jt-globe__label.is-back,
.jt-globe__labels.is-visible .jt-globe__label.is-back { opacity: 0; transition-delay: 0s; }

/* INTRO */
.main-network__intro { width: 100%; position: absolute; left: 0; top: calc(50% + 26rem); text-align: center; color: var(--color-white); transform: translateY(-50%); }
.main-network__intro p { margin-top: 16rem; }

/* DETAIL */
.main-network__detail { width: 756rem; height: 100%; padding: 0 156rem 0 100rem; display: flex; align-items: center; position: absolute; top: 0; right: 0; background: var(--color-primary); opacity: 0; visibility: hidden; }
.main-network__detail-inner { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 60rem; color: var(--color-white); }

.main-network__list { width: 100%; }
.main-network__list > li { display: grid; grid-template-columns: 50rem 1fr; align-items: center; gap: 40rem; padding: 28rem 0; }
.main-network__list > li:first-child { padding-top: 0; }
.main-network__list > li:last-child { padding-bottom: 0; }
.main-network__list > li:not(:first-child) { border-top: 2rem solid rgba(255, 255, 255, .5); }
.main-network__list p { margin-top: 4rem; opacity: .5; }



/* **************************************** *
 * PR CENTER
 * **************************************** */
.main-media { padding-top: 120rem; }

/* TITLE */
.main-media__title { margin-bottom: 50rem; color: var(--color-primary); }

/* LIST */
.main-media__horizontal { display: flex; position: relative; overflow: hidden; z-index: 1; }

.main-media__list { display: flex; gap: 32rem; padding: 0 40rem; position: relative; }
.main-media__list-item { width: 520rem; aspect-ratio: 520 / 672; border-radius: var(--border-radius-05); overflow: hidden; }

.main-media__list-link { display: block; width: 100%; height: 100%; padding: 54rem 50rem 100rem; position: relative; color: inherit; background: var(--color-gray-300); border-radius: inherit; transition: background-color .3s; }

.main-media__list-meta { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 64rem; }
.main-media__list-meta > * { color: var(--color-primary); transition: color .3s; }
.main-media__list-date { opacity: .5; }
.main-media__list-channel { width: 32rem; }
.main-media__list-channel .jt-icon { display: block; width: 100%; }
.main-media__list-channel .jt-icon svg path { fill: var(--color-white); }

.main-media__list-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color: var(--color-primary); transition: color .3s; }
.main-media__list-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 20rem; transition: color .3s; }

.main-media__list-icon { width: 28rem; position: absolute; right: 50rem; bottom: 51rem; }
.main-media__list-icon .jt-icon { display: block; width: 100%; }
.main-media__list-icon .jt-icon svg path { fill: var(--color-gray-600); }

.main-media__list-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.main-media__list-image .jt-lazyload { height: 100%; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); }

.main-media__list-item--secondary .main-media__list-link { background: var(--color-gray-400); }
.main-media__list-item--secondary .main-media__list-type { color: var(--color-white); }

.main-media__list-item--more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; border: 1px solid var(--color-primary); transition: background-color .3s; }
.main-media__list-item--more > b { color: var(--color-primary); }
.main-media__list-item--more > * { transition: color .3s; }



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

    /* PR CENTER */
    .main-media__list-item--primary .main-media__list-link:hover { background: var(--color-tertiary); }
    .main-media__list-item--primary .main-media__list-link:hover :is(.main-media__list-meta > *, .main-media__list-title, .main-media__list-desc) { color: var(--color-white); }
    .main-media__list-item--primary .main-media__list-link:hover .main-media__list-icon .jt-icon svg path { fill: var(--color-white); }

    .main-media__list-item--secondary .main-media__list-link:hover .main-media__list-image .jt-lazyload { transform: scale(1.03); }

    .main-media__list-item--more:hover { background: var(--color-primary); }
    .main-media__list-item--more:hover > * { color: var(--color-white); }

}