@charset "utf-8";
.worksmodal #loader {background: rgba(0,0,0,0.3); z-index: 10000;}
#works-archive {border:none; padding-top: 0;}
#works-archive::after{display: none;}

.archives {display: flex; flex-wrap: wrap; align-content: space-between; padding: 0 20px; margin-bottom: 32px; align-items:stretch;}
.item {width: 33%; height: auto; position: relative; padding: 0 10px 20px; overflow: hidden;}
.item .mask{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; z-index: 10;}
.item .bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background-size: auto 100%; transition: 1s;}
.item .itemwrap {position: relative; height: 100%;}
.item img {width: 100%; height: 100%; position: relative; z-index: 0; transition:0.3s; opacity: 0; backface-visibility: hidden; }
.item.finish img {opacity: 0;}
.item .loader {position: absolute; transform: scale(0.5); transform-origin: center center; z-index: 11;}
/*
.item.finish .loader {background: rgba(255,255,255,1); display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: scale(1); margin: 0; opacity: 0; transition: opacity 0.3s;}
*/
/*.item.finish .loader span {display: none;}*/
.item a{display: block; position: relative; overflow: hidden; height: 100%; background-size:auto 100%; background-origin: border-box; background-position: center center; transition: background 0.3s; backface-visibility: visible;}
.item a::after{content: '拡大する'; position: absolute; left: 50%; top: 50%; z-index: 11; font-size:12px; width: 140px; height: 32px; border: 3px solid #fff; color: #fff; line-height: 26px; margin: -16px 0 0 -70px; transform: translate3d(0,10px,0); opacity: 0; transition: 0.3s;}
.item a::before{content: ''; position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; border: 0px solid #000; opacity: 0; transition: 0.3s;}
.item.finish a:hover::after{transform: translate3d(0,0,0); opacity: 1;}
.item.finish a:hover::before{opacity: 1; border-width: 8px;}
.item.finish a:hover .bg {transform: scale(1.1);}

.item.finish a:hover .loader{opacity: 1;}
@media screen and (min-width:1400px){
.item {width: 25%;}
.item a::after{font-size: 0.808081vw; width: 8.787879vw; height: 2.020202vw; line-height: 1.616162vw; margin: -1.010101vw 0 0 -4.393939vw;}
}
@media screen and (min-width:1920px){.item {width: 20%;}}

.workscategory {font-size: 0; line-height: 1; margin-bottom: 68px;}
.workscategory li {display: inline-block;font-size: 18px; line-height: 32px; padding: 0 1em; position: relative;}
.workscategory li + li {padding-left: 0.5em;}
.workscategory li + li::before{content: '/'; position: absolute; left: -0.5em; top: 0;}
.workscategory li a{color: #111; transition: 0.2s;}
.workscategory li a.active{ color: #ccc; text-decoration: none;}

#worksmask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -2000; background: rgba(0,0,0,0.0); transition: background 0.3s; opacity: 0;}
.worksmodal #worksmask {background: rgba(0,0,0,0.5); z-index: 2000; opacity: 1;}
.worksmodalend #worksmask {background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0;}
#works-slider {position: fixed; left: 0; top: 0; width: 100%; z-index: 2100; text-align: center; font-size: 0; line-height: 1; opacity: 0; transition: opacity 0.5s ,transform 1s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateX(101%);}
.worksmodalloaded #works-slider {opacity: 1; z-index: 2100; transform: translateX(0);}
/*.worksmodalend #works-slider { transform: translateX(-101%);}*/

#works-slider #scrollr {width: 100vw;}
#works-slider .slide {position: relative; border: 5px solid #111;}
#works-slider .slide li {float: left; text-align: center;}
#works-slider .slide img {width: 100%; height: auto; position: relative; z-index: 1; opacity: 0;}
#works-slider .slide .img {background-position: center top; background-size: auto 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-color: #111;}
#works-slider .slide .loader {position: absolute; transform: scale(0.5); transform-origin: center center; z-index: 0;}

.modalclose {width: 60px; height: 60px; position: fixed; right: 20px; top: -80px; z-index: 10000; font-size: 0; transition: 0.5s ; opacity: 0;}
.worksmodalloaded .modalclose {opacity: 1;}
.modalclose a{display: block; height: 100%; font-size: 0; background:rgba(0,0,0,1); }
.modalclose a::before,
.modalclose a::after{content: ''; width:40px; height: 2px; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -20px; background: #fff; transition: 0.5s;}
.modalclose a::before{margin: -0px 0 0 -20px; transform: rotate(135deg) translate3d(0,0,0); transition: 0.5s;}
.modalclose a::after{margin: -0 0 0 -20px; transform: rotate(-135deg) translate3d(0,0,0); transition: 0.5s;}
.modalclose a:hover {background-color: rgba(0,0,0,0.9);}
.modalclose a:hover::before {transform: rotate(135deg) translate3d(0,0,0) scale(0.8);}
.modalclose a:hover::after {transform: rotate(-135deg) translate3d(0,0,0) scale(0.8);}

.swiper-button-next {background: url(/img/next-prev.png) center right no-repeat !important;}
.swiper-button-prev {background: url(/img/next-prev.png) center left no-repeat !important; transform: rotate(180deg)}
.swiper-button-disabled {opacity: 0 !important;}

@media screen and (max-width:640px){

#works-slider {position: fixed; left: 0; top: 0;}
#works-archive p {font-size: 3.75vw;}

.archives {padding: 0 4.25vw; margin-bottom: 8vw;}
.item {width: 50%; height: auto; position: relative; padding: 0 2.125vw 4.25vw; overflow: hidden;}
.item img {height: 100% !important; width: auto;}
.workscategory {margin-bottom: 8vw; padding: 0 6.666667vw;}
.workscategory li {font-size: 3.733333vw; line-height: 6.666667vw;}
.item.finish a:hover::before{opacity: 1; border-width: 0;}

.modalclose {width: 8vw; height: 8vw; right: 2.666667vw; top: -10.666667vw;}
.modalclose a::before,
.modalclose a::after{content: ''; width:5.333333vw; height: 2px; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -2.666667vw;}
.modalclose a::before{margin: -0px 0 0 -2.666667vw;}
.modalclose a::after{margin: -0 0 0 -2.666667vw;}
.modalclose a:hover::before {transform: rotate(135deg) translate3d(0,0,0) scale(0.8);}
.modalclose a:hover::after {transform: rotate(-135deg) translate3d(0,0,0) scale(0.8);}

.swiper-button-next {background: url(/img/next-prev.png) center right no-repeat !important; filter: drop-shadow(0 0 1px #fff);}
.swiper-button-prev {background: url(/img/next-prev.png) center left no-repeat !important; transform: rotate(180deg); filter: drop-shadow(0 0 1px #fff);}
.swiper-button-disabled {opacity: 0 !important;}


}