@charset "utf-8";

/*
 * File    : sub-works.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * SINGLE
 * POPUP
 * HOVER
 */



/* **************************************** *
 * SINGLE
 * **************************************** */
/* LAYOUT */
body.single-work .main-container { padding-bottom: 0; }

body.single-work .article__body { min-height: inherit; }

/* VIEW */
.works-view { padding-bottom: 100rem; background: var(--color-primary); }

.works-view__gallery { margin: 0 -24rem; position: relative; }
.works-view__gallery .jt-background-video { height: auto; position: relative; }
.works-view__gallery:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 10rem solid var(--color-primary); box-sizing: border-box; }

.works-view__overview { display: grid; grid-template-columns: 284fr 436fr 788fr 299fr; gap: 20rem; margin-top: 14rem; padding-left: 38rem; position: relative; }
.works-view__overview:before { content: ''; width: 22rem; height: 22rem; position: absolute; top: 0; left: 0; background: var(--color-black); border-radius: 50%; }
.works-view__overview-title,
.works-view__overview-date,
.works-view__overview-charge,
.works-view__overview-txt > * { display: block; font-size: 22rem; line-height: 1.25; font-weight: 500; }
.works-view__overview-txt > * + * { margin-top: 20rem; }
.works-view__overview-back { display: inline-block; position: relative; font-size: 22rem; line-height: 1.25; font-weight: 500; }
.works-view__overview-back:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; background: currentColor; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform .3s; }

.works-view__overview:first-child { margin-top: 0; padding-top: 24rem; }
.works-view__overview:first-child:before { top: 24rem; }

.works-view__overview-inner:nth-child(4) { text-align: right; }



/* **************************************** *
 * POPUP
 * **************************************** */
.works-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 999; }

.works-popup__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-primary); filter: blur(100rem); }

.works-popup__content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 80rem; position: relative; }
.works-popup__content .swiper { width: 100%; height: 100%; max-width: 1700rem; max-height: 900rem; }
.works-popup__content .swiper-slide { display: flex; justify-content: center; align-items: center; }
.works-popup__content .swiper-slide picture { display: block; max-width: 100%; max-height: 100%; }
.works-popup__content .swiper-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100vh; }
.works-popup__content .swiper-pagination { display: none; }

.works-popup__close { display: block; width: 80rem; height: 80rem; margin: 0; padding: 0; position: absolute; top: 90rem; right: 10rem; background: transparent; border: none; box-sizing: border-box; cursor: pointer; z-index: 2; }
.works-popup__close .jt-icon { width: 100%; transition: transform .3s; }

/* MOBILE */
html.mobile .works-popup__content .swiper-slide img { max-height: 100svh; }

/* MAC */
html.mac.safari .works-popup__bg { filter: blur(70rem); }



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

    /* SINGLE */
    .works-view__overview-back:hover:after { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); }

    /* POPUP */
    .works-popup__close:hover .jt-icon { transform: rotate(90deg); }

}