@charset "UTF-8";
h2{text-align:center;}
#main-column{border-bottom:solid 1px #a3a3a3;margin-bottom:20px;padding-bottom:30px;}
footer{text-align:center;}
.breadcrumb{margin:0;padding:0;text-align:center;}
#related-works section:last-of-type{margin-bottom:50px;}
#related-works section:not(:last-of-type){padding-bottom:30px;margin-bottom:40px;border-bottom:solid 1px #a3a3a3;}
#related-works ul{padding-bottom:5px;}
#related-works img{border-radius:6px;}
header,
.detail{padding:0 5%;}
.r-l{text-decoration:underline;text-decoration-thickness:7px;text-underline-offset:-2px;text-decoration-skip-ink:none;text-decoration-color:rgba(255,0,0,0.35);}
.pic-samlpe{width:100%;aspect-ratio:4/3;margin-bottom:30px;}
.transition-box {position:relative;display:inline-block;border:solid #a3a3a3 1px;border-radius:8px;padding:5px 30px 3px;cursor:pointer;}
.transition-link{text-decoration:none;}
.transition-link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;}
.slick-wrapper{position:relative;width:100%;height:3em;display:flex;justify-content:center;align-items:center;margin-bottom:5px;}.button-next,
.button-prev{cursor:pointer;transform:scale(0.6,1.2);}
.button-next{cursor:pointer;padding-left:2em;}
.button-prev{cursor:pointer;padding-right:2em;}
.current-page{text-align:center;vertical-align:baseline;}
.sample-viewer{position:relative;width:100%;aspect-ratio:4/3;margin:0 0 10px;touch-action:pan-y;}
.sample-viewer img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:6px;opacity:0;transition:opacity .35s ease;}
.sample-viewer img.is-current{opacity:1;z-index:2;}
.sample-viewer img.is-hidden{opacity:0;z-index:1;}
.sample-thumbs img{border-radius:3px;}
figure:has(> .is-active){position:relative;display:inline-block;}
figure:has(> .is-active)::before{content:"";position:absolute;left:0;right:0;height:4px;background-color:#adadad;border-radius:2px;bottom:-4px;}
.close-zoom-btn.zoom{z-index:5;opacity:1;pointer-events:auto;position:fixed;top:10px;right:10px;display:flex;height:50px;width:50px;justify-content:center;align-items:center;border-radius:4px;border:solid 1px #fff;background:rgba(87,87,87,.5);transition:background-color .3s;}
.close-zoom-btn:hover.zoom{cursor:pointer;background-color:#919191;}
.close-zoom-btn.zoom span{position:relative;display:block;width:20px;height:20px;}
.close-zoom-btn.zoom span:before,
.close-zoom-btn.zoom span:after{content:'';position:absolute;left:50%;top:50%;width:35px;height:2px;background:#fff;transform-origin:center;border-radius:1px;}
.close-zoom-btn.zoom span:before{transform:translate(-50%,-50%) rotate(45deg);}
.close-zoom-btn.zoom span:after {transform:translate(-50%,-50%) rotate(-45deg);}
.sample-container{margin-bottom:70px;}
.sample-container.zoom{height:100dvh;width:100%;position:fixed;top:0;right:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background-color:rgba(10,10,10,0.95);z-index:1000;}
.zoom .sample-viewer{height:calc(100dvh - 110px - 3em);width:auto;position:sticky;top:0;overflow-x:auto;touch-action:auto;}
.zoom .sample-viewer img{border-radius:0;}
.zoom .sample-thumbs{width:100%;position:fixed;bottom:0;}
#sample-burger{position:fixed;top:0;width: min(95vw, calc((100dvh - 110px - 3em) / 3 * 4));height:110%;box-sizing:border-box;padding:0 0 30px 10px;right:-98vw;z-index:99;direction:ltr;background-color:rgba(10,10,10,0.95);color:#fff;transition:all 0.3s;overflow-y:hidden;text-align:center;}
#sample-burger.is-open{right:0;z-index:100;}
.is-open .close-burger-btn{opacity:1;z-index:3;position:fixed;top:8px;right:5px;display:flex;height:30px;width:30px;justify-content:center;align-items:center;border-radius:4px;border:solid 1px #fff;background-color:rgba(87,87,87,0.4);}
.is-open .close-burger-btn:hover{cursor:pointer;background-color:#919191;transition:0.3s;}
.is-open .close-burger-btn span{position:relative;display:block;width:20px;height:20px;}
.is-open .close-burger-btn span:before,
.is-open .close-burger-btn span:after{content:'';position:absolute;left:50%;top:50%;width:35px;height:2px;background:#fff;transform-origin:center;border-radius:1px;}
.is-open .close-burger-btn span:before{transform:translate(-50%,-50%) rotate(45deg);}
.is-open .close-burger-btn span:after {transform:translate(-50%,-50%) rotate(-45deg);}
.is-open .close-burger-wrapper{content:'';opacity:1;z-index:-1;position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(87,87,87,0.4);}

@media screen and (min-width:721px){
h2{text-align:left;}
main{background:repeating-linear-gradient(-45deg,#f2f2f2 0,#f2f2f2 5px,#fff 5px,#fff 10px);padding-bottom:40px;margin-bottom:-30px;border-right:1px solid #f5f5f5;border-left:1px solid #f5f5f5;display:flex;justify-content:space-between;align-items:flex-start;}
footer{background-color:#fff;width:590px;border-radius:10px;margin-left:max(20px, calc((100vw - 1020px) / 2));}
#main-column{width:590px;height:auto;padding:15px;box-sizing:border-box;border-radius:10px;background:#fff;border-bottom:none;margin:0;}
#related-works{width:370px;background-color:#fff;padding:15px 5px 0 15px;position:sticky;bottom:5px;align-self:flex-end;border-radius:10px;}
#related-works ul{margin-top:0;margin-bottom:20px;}
#related-works section:last-of-type{margin-bottom:20px;}
.r-l{text-decoration-thickness:8px;text-underline-offset:-3px;}
.pic-samlpe{border-radius:6px;}
.sample-viewer{width:100%;border-radius:6px;}
.close-zoom-btn.zoom{position:absolute;right:25px;}
.sample-wrapper{z-index:-1;opacity:0;position:fixed;top:0;left:0;height:100vh;width:100vw;background:#fff;transition: .3s;}
.sample-container{margin-bottom:30px;}
#sample-burger{box-sizing:border-box;height:100%;padding:10px;}
.is-open .close-burger-btn{height:40px;width:40px;top:10px;right:10px;}
.is-open .close-burger-btn span:before{bottom:8px;}
.is-open .close-burger-btn span:after {top:8px;}
.hover-action{transition:all 0.3s ease;}
.hover-action:hover{color:#999999ff;transition:all 0.3s ease;transform:scale(0.95);background-color:#f2f2f2;}

}