@charset "UTF-8";
main{padding-bottom:10px;margin-bottom:30px;}
footer{text-align:center;margin-bottom:50px;}
.breadcrumb{margin:0;padding:0;}
dl{display:grid;grid-template-columns:auto 1fr;margin:0;}
dt {grid-column:1;margin-top:5px;}
dd {grid-column:2;margin-inline-start:0;text-indent:-1em;padding-left:1em;margin-top:5px;}
dd::before{content:"\FF1A"}
.list-item,
.list-item{border-bottom:solid #a3a3a3 1px;padding:40px 0;}
.list-border{border-bottom:solid #a3a3a3 1px;}
.pic-samlpe{width:100%;}
header,
.detail{padding:0 5%;}
.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){
footer{margin-bottom:35px;}
.list-item{display:block;flex-direction:row;}
.pic-samlpe{width:40%;border-radius:6px;}
.explanation{float:right;width:58%;height:305px;position:relative;}
.list-link{position:absolute;bottom:0;right:0;}
.box-x{padding-bottom:17px;}
.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;}
}