@charset "utf-8";

/*
 * File    : rwd-works.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1480px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* SINGLE */
    .works-view__overview { padding-left: 36rem; }
    .works-view__overview:before { width: 20rem; height: 20rem; }
    .works-view__overview-title, 
    .works-view__overview-date, 
    .works-view__overview-charge, 
    .works-view__overview-txt > *,
    .works-view__overview-back { font-size: 20rem; }

    /* POPUP */
    .works-popup__content { padding: 0 71rem; }

    .works-popup__close { width: 70rem; height: 70rem; top: 35rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* LIST */
    body.page-template-works { background: #F0F0F0; }

    /* SINGLE */
    .works-view__gallery:after { border-width: 8rem; }

    .works-view__overview { display: flex; flex-wrap: wrap; gap: 10rem 20rem; margin: 12rem -16rem 0; padding-left: 0; }
    .works-view__overview:before { width: 16rem; height: 16rem; }
    .works-view__overview-inner:nth-child(1) { width: 40%; padding-left: 28rem; }
    .works-view__overview-inner:nth-child(2) { width: calc(60% - 20rem); }
    .works-view__overview-inner:nth-child(3) { width: 100%; }
    .works-view__overview-inner:nth-child(4) { width: 100%; padding-top: 20rem; text-align: left; }
    .works-view__overview-title, 
    .works-view__overview-date, 
    .works-view__overview-charge, 
    .works-view__overview-txt > *,
    .works-view__overview-back { font-size: 16rem; }
    .works-view__overview-txt > * + * { margin-top: 18rem; }

    .works-view__overview:first-child { padding-top: 20rem; }
    .works-view__overview:first-child:before { top: 20rem; }

    /* POPUP */
    .works-popup__bg,
    html.mac.safari .works-popup__bg { filter: blur(47rem); }

    .works-popup__content { padding: 57rem 42rem 86rem; align-items: start; }
    .works-popup__content .swiper { max-width: 450rem; max-height: 900rem; }
    .works-popup__content .swiper-slide img { max-height: calc(100vh - 143rem); }
    html.mobile .works-popup__content .swiper-slide img { max-height: calc(100svh - 143rem); }
    .works-popup__content .swiper-navigation { display: none; }
    .works-popup__content .swiper-pagination { display: block; }

    .works-popup__close { width: 36rem; height: 36rem; top: 35rem; right: 21rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* SINGLE */
    .works-view__overview { margin-top: 2rem; }
    .works-view__overview:before { width: 8rem; height: 8rem; top: -1rem; }
    .works-view__overview-inner:nth-child(1) { padding-left: 16rem; }
    .works-view__overview-title, 
    .works-view__overview-date, 
    .works-view__overview-charge, 
    .works-view__overview-txt > *,
    .works-view__overview-back { font-size: 12rem; }
    .works-view__overview-txt > * + * { margin-top: 12rem; }

    /* POPUP */
    .works-popup__content { padding-left: 37rem; padding-right: 37rem; }
    .works-popup__content .swiper { max-width: 300rem; max-height: 600rem; }

    .works-popup__close { width: 30rem; height: 30rem; top: 31rem; right: 24rem; }

}