@charset "utf-8";

#works-list .inner-sct { padding: 70px 0 150px;}
#works-list .ctn { display: flex; flex-wrap: wrap; width: 94%; max-width: 1240px; margin: 0 auto 80px;}
#works-list .box { width: 50%; padding: 40px 18px;}
#works-list .box figure { display: block; width: 100%; max-width: 550px; margin: 0 auto; text-align: center;}
#works-list .box figure a { position: relative; display: block; width: 100%; padding-top: 60%; overflow: hidden; border: solid 0.5px #969696;}
#works-list .box figure a img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.3s ease;}
#works-list .box figure a img.none { width: 80%;}
#works-list .box figure a:hover img { transform: translate(-50%,-50%) scale(1.04); opacity: 0.85;}

#works-list .box dl { display: block; width: 100%; max-width: 550px; margin: 0 auto; padding: 20px 0px;}
#works-list .box dl dt { margin-bottom: 20px; font-size: clamp(16px,2.0vw,21px); font-weight: 600; letter-spacing: 0.15rem;}
#works-list .box dl dt span { display: block; margin-bottom: 10px; font-size: 16px;}
#works-list .box dl dd.txt { font-size: clamp(13px,1.4vw,16px); letter-spacing: 0.1rem;}

#works-list .box .more { display: block; width: 100%; max-width: 550px; margin: 0 auto;}
#works-list .box .more a { color: #000; font-size: clamp(18px,2.3vw,24px);
 text-decoration: underline; /* text-decoration-color: #00b4a5;*/ text-underline-offset: 3px; text-decoration-thickness: 1px;
}
#works-list .box .more a:hover { text-decoration: none;}

@media (max-width: 1281px) {
	#works-list .box { padding: 30px 12px;}
	#works-list .box .dl { padding: 12px 0px;}
}
@media (max-width: 801px) {
	#works-list .inner-sct { padding: 40px 0px 60px;}
	#works-list .ctn { margin-bottom: 40px;}
	#works-list .box { padding: 20px 12px;}
}
@media (max-width: 641px) {
	#works-list .box dl { padding: 12px 0;}
	#works-list .box dl dt { font-size: 14px; letter-spacing: 0.1rem;}
	#works-list .box dl dt span { margin-bottom: 8px; font-size: 12px; letter-spacing: 0.05rem;}
}
@media (max-width: 481px) {
	#works-list .inner-sct { padding: 20px 0px 50px;}
	#works-list .ctn { width: 88%; margin-bottom: 20px;}
	#works-list .box { display: block; width: 100%; padding: 20px 0px;}
	#works-list .box dl { padding: 12px 0 6px;}
	#works-list .box dl dt { margin-bottom: 8px; font-size: 16px;}
}




#works .inner-sct { padding: 80px 0 0px;}
#works .article-hd { width: 88%; max-width: 900px; margin: 0 auto;}
#works .article-hd h1 { margin-bottom: 30px; font-size: clamp(24px,3.6vw,36px); letter-spacing: 0.15rem; line-height: 1.4;}
#works .article-hd h1 span { display: block; margin-bottom: 15px; font-size: 18px;}
#works .article-hd p { font-size: 18px; letter-spacing: 0.1rem;}

#works .article-ctn { padding-top: 40px;}

#works .article-ctn .gallery { padding-bottom: 100px;}
#works .article-ctn .gallery .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#works .article-ctn .gallery .slideshow { margin-bottom: 8px;}
#works .article-ctn .gallery .slideshow img { width: 100%;}
#works .article-ctn .gallery .slideshow .slick-arrow{ width: 32px; height: 72px; position: absolute; top: 45%; z-index: 90; border: none;
 text-indent: -9999em; outline: none;
}
#works .article-ctn .gallery .slideshow .slick-prev { left: -50px; background: url('/img/arw-L.svg') no-repeat 50% 50% / 100% auto;}
#works .article-ctn .gallery .slideshow .slick-next { right: -50px; background: url('/img/arw-R.svg') no-repeat 50% 50% / 100% auto;}

#event .article-ctn .gallery .slide-th { display: flex; flex-wrap: wrap;}
#works .article-ctn .gallery .slide-th .slick-list { width: 100%;}
#works .article-ctn .gallery .slide-th .slick-track { transform: unset !important; width: 100% !important; display: flex; gap: 12px;}
#works .article-ctn .gallery .slide-th .slick-track:before { display: none;}
#works .article-ctn .gallery .slide-th .slick-track:after { display: none;}
#works .article-ctn .gallery .slide-th .slick-slide { flex: 0 0 18%;}
#works .article-ctn .gallery .slide-th .slick-slide { display: block !important; float: none !important;}
#works .article-ctn .gallery .slide-th .slick-slide img { width: 100%; opacity: 0.5;}
#works .article-ctn .gallery .slide-th .slick-slide.slick-current img { opacity: 1;}

/*
#works .article-ctn .gallery .slide-th { display: flex; flex-wrap: wrap;}
#works .article-ctn .gallery .slide-th ul { font-size: 0;}
#works .article-ctn .gallery .slide-th ul li { display: inline-block; width: 11.11115%; padding: 4px;}
#works .article-ctn .gallery .slide-th ul li img { width: 100%;}
*/


#works .article-ctn .stl {}
#works .article-ctn .stl h3 { font-weight: 400; text-align: center;}
#works .article-ctn .stl h3 span { display: inline-block; line-height: 1; vertical-align: baseline;}
#works .article-ctn .stl h3 span.eng { margin-right: 20px; color: #00b4a5; font-size: clamp(30px,6.0vw,50px); letter-spacing: 0.08rem;}
#works .article-ctn .stl h3 span.jp { font-size: clamp(20px,3.0vw,30px); letter-spacing: 0.15rem;}

#works .article-ctn .story { background: #f5fcfb; padding: 80px 0;}
#works .article-ctn .story .stl { margin-bottom: 60px;}
#works .article-ctn .story .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#works .article-ctn .story .tips { margin-bottom: 20px; padding-bottom: 18px; border-bottom: dashed 1px #969696;}
#works .article-ctn .story .tips h3 { position: relative; font-size: clamp(16px,2.4vw,24px); font-weight: 400; letter-spacing: 0.15rem; line-height: 1.25;}
#works .article-ctn .story .tips h3 br { display: none;}
#works .article-ctn .story .txt { margin-bottom: 80px;}
#works .article-ctn .story .txt:last-child { margin-bottom: 0px;}
#works .article-ctn .story .txt p { margin-bottom: 30px; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#works .article-ctn .story .txt p span { font-weight: 700;}
#works .article-ctn .story .txt figure img { width: 100%;}


#works .pager-nav { background: #efefef;}
#works .pager-nav .inner { position: relative; width: 88%; max-width: 1040px; margin: 0 auto; padding: 100px 200px;}
#works .pager-nav .prev,
#works .pager-nav .next { position: absolute; width: 180px; top: 50%; transform: translateY(-50%);}
#works .pager-nav .prev { left: 0;}
#works .pager-nav .next { right: 0;}
#works .pager-nav .prev a,
#works .pager-nav .next a { position: relative; width: 180px; text-decoration: none;}
#works .pager-nav .prev a:before,
#works .pager-nav .next a:after { content: ''; display: block; width: 12px; height: 24px; position: absolute; top: 30%;}
#works .pager-nav .prev a:before{ left: -20px; background: url('/img/arw-L-s.svg') no-repeat 50% 50% / 100% auto;}
#works .pager-nav .next a:after { right: -20px; background: url('/img/arw-R-s.svg') no-repeat 50% 50% / 100% auto;}
#works .pager-nav .prev a img,
#works .pager-nav .next a img{ display: block; width: 100%; margin-bottom: 8px;}
#works .pager-nav .prev a img.none,
#works .pager-nav .next a img.none { padding: 10px 20px;}
#works .pager-nav .prev a span,
#works .pager-nav .next a span{ display: block; text-align: center;}
#works .pager-nav .prev a:hover,
#works .pager-nav .next a:hover { opacity: 0.8}

#works .pager-nav .btn-back { width: 80%; max-width: 300px; margin: 0 auto;}
#works .pager-nav .btn-back a { display: block; border: solid 1px #373737;
 color: #373737; font-size: clamp(14px,1.8vw,18px); letter-spacing: 0.15rem; line-height: 1.4; text-align: center; text-decoration: none; transition: 0.3s ease;
}
#works .pager-nav .btn-back a span { display: block; padding: 12px 0; text-align: center;}
#works .pager-nav .btn-back a:hover{ background: #373737; color: #fff;}
@media (max-width: 1281px) {
	#works .article-hd p { font-size: 16px;}
	#works .article-ctn .gallery .slideshow { padding: 0 60px;}
	#works .article-ctn .gallery .slideshow .slick-arrow{ top: 42%;}
	#works .article-ctn .gallery .slideshow .slick-prev { left: 10px;}
	#works .article-ctn .gallery .slideshow .slick-next { right: 10px;}

	#works .article-ctn .story .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#works .inner-sct { padding: 40px 0 0px;}
	#works .article-hd h1 { margin-bottom: 20px;}
	#works .article-hd h1 span { margin-bottom: 12px; font-size: 14px;}
	#works .article-hd p { font-size: 14px;}

	#works .article-ctn { padding-top: 20px;}
	#works .article-ctn .gallery { padding-bottom: 60px;}
	#works .article-ctn .gallery .slideshow { margin-bottom: 8px; padding: 0 40px;}
	#works .article-ctn .gallery .slideshow .slick-arrow{ top: 42%; width: 25px; height: 58px;}
	#works .article-ctn .gallery .slideshow .slick-prev { left: 5px;}
	#works .article-ctn .gallery .slideshow .slick-next { right: 5px;}
	#works .article-ctn .gallery .slide-th { padding: 0 36px;}
	#works .article-ctn .gallery .slide-th .slick-track { flex-wrap: wrap; gap: 14px;}
	#works .article-ctn .gallery .slide-th .slick-slide { flex: 0 0 20%;}
	#works .article-ctn .gallery .slide-th .slick-slide figure { padding: 4px;}
	#works .article-ctn .gallery .slide-th ul li { width: 20%;}

	#works .article-ctn .story .stl { margin-bottom: 30px;}
	#works .article-ctn .story .txt { margin-bottom: 60px;}
	#works .article-ctn .story .txt p { font-size: 14px;}

	#works .pager-nav .inner { padding: 80px 150px;}
	#works .pager-nav .prev,
	#works .pager-nav .next { position: absolute; width: 150px;}
	#works .pager-nav .btn-back a span { padding: 10px 0;}
}
@media (max-width: 481px) {
/*	#works .inner-sct { padding: 40px 0 0px;}*/
	
	#works .article-hd {}
	#works .article-hd h1 { margin-bottom: 12px; font-size: 18px; letter-spacing: 0.1rem;}
	#works .article-hd h1 span { font-size: 12px;}
	#works .article-hd p { font-size: 13px;}

	#works .article-ctn .stl h3 span.jp { letter-spacing: 0.1rem;}

	#works .article-ctn .gallery { padding-bottom: 40px;}
	#works .article-ctn .gallery .slideshow { margin-bottom: 6px; padding: 0 25px;}
	#works .article-ctn .gallery .slideshow .slick-arrow{ top: 42%; width: 18px; height: 42px;}
	#works .article-ctn .gallery .slideshow .slick-prev { left: 0px;}
	#works .article-ctn .gallery .slideshow .slick-next { right: 0px;}
	#works .article-ctn .gallery .slide-th { padding: 0 23px;}
	#works .article-ctn .gallery .slide-th .slick-track { gap: 7px;}
	#works .article-ctn .gallery .slide-th ul li { padding: 2px;}

	#works .article-ctn .story { padding: 40px 0;}
	#works .article-ctn .story .stl { margin-bottom: 20px;}
	#works .article-ctn .story .tips { margin-bottom: 12px; padding-bottom: 10px;}
	#works .article-ctn .story .tips h3 { font-size: 16px; letter-spacing: 0.05rem;}
	#works .article-ctn .story .tips h3 br { display: block;}
	#works .article-ctn .story .txt { margin-bottom: 40px;}
	#works .article-ctn .story .txt p { margin-bottom: 16px; font-size: 13px; letter-spacing: 0.05rem;}

	#works .pager-nav .inner { padding: 40px 100px;}
	#works .pager-nav .prev,
	#works .pager-nav .next { position: absolute; width: 90px;}
	#works .pager-nav .prev a:before,
	#works .pager-nav .next a:after { width: 8px; height: 18px; top: 26%;}
	#works .pager-nav .prev a:before{ left: -14px;}
	#works .pager-nav .next a:after { right: -14px;}
	#works .pager-nav .prev a img,
	#works .pager-nav .next a img{ margin-bottom: 4px;}
	#works .pager-nav .prev a img.none,
	#works .pager-nav .next a img.none { padding: 0px 12px;}
	#works .pager-nav .prev a span,
	#works .pager-nav .next a span{ font-size: 12px;}

	#works .pager-nav .btn-back a { font-size: 13px; letter-spacing: 0.05rem;}
	#works .pager-nav .btn-back a span { padding: 6px 0;}

}