@charset "utf-8";

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

#event-list .box .txt { display: block; width: 100%; max-width: 550px; margin: 0 auto; padding: 30px 15px 20px;}
#event-list .box .txt p { font-size: clamp(16px,2.0vw,21px); letter-spacing: 0.15rem;}
#event-list .box ul { width: 100%; max-width: 550px; margin: 0 auto; padding: 15px; border-top: dashed 1px #969696; border-bottom: solid 1px #969696;}
#event-list .box ul li { position: relative; padding-left: 90px; font-size: clamp(13px,1.4vw,16px); letter-spacing: 0.1rem;}
#event-list .box ul li span { position: absolute; left: 0;}

@media (max-width: 1281px) {
	#event-list .box { padding: 40px 12px;}
	#event-list .box .txt { padding: 20px 10px 15px;}
	#event-list .box ul { padding: 12px 10px;}
}
@media (max-width: 801px) {
	#event-list .inner-sct { padding: 40px 0px 60px;}
	#event-list .ctn { margin-bottom: 40px;}
	#event-list .box { width: 50%; padding: 20px 12px;}
	#event-list .box ul li { padding-left: 72px;}
}
@media (max-width: 641px) {
	#event-list .box .txt { padding: 12px 10px 8px;}
	#event-list .box .txt p { font-size: 16px;}
}
@media (max-width: 481px) {
	#event-list .inner-sct { padding: 30px 0px 50px;}
	#event-list .ctn { margin-bottom: 20px;}
	#event-list .box { padding: 16px 6px;}
	#event-list .box figure a img.none { padding: 20px;}
	#event-list .box .txt p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.4;}
	#event-list .box ul { padding: 8px 10px;}
	#event-list .box ul li { padding-left: 50px; font-size: 11px; letter-spacing: 0.05rem;}
}




#event .inner-sct { padding: 80px 0 150px;}
#event .article-hd { width: 88%; max-width: 900px; margin: 0 auto;}
#event .article-hd h1 { margin-bottom: 30px; font-size: clamp(24px,3.6vw,36px); letter-spacing: 0.15rem; line-height: 1.4;}
#event .article-hd ul { padding-top: 20px; border-top: dashed 1px #969696;}
#event .article-hd ul li { font-size: 18px; letter-spacing: 0.15rem;}

#event .article-ctn { padding: 40px 0 60px;}
#event .article-ctn .main { width: 88%; max-width: 900px; margin: 0 auto; padding: 0px 0px 60px}
#event .article-ctn .main figure { margin-bottom: 60px;}
#event .article-ctn .main figure img { width: 100%;}

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

#event .article-ctn .gallery { background: #dbf2f0; padding: 60px 0 80px;}
#event .article-ctn .gallery .stl { margin-bottom: 30px;}
#event .article-ctn .gallery .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#event .article-ctn .gallery .slideshow { margin-bottom: 8px;}
#event .article-ctn .gallery .slideshow img { width: 100%;}
#event .article-ctn .gallery .slideshow .slick-arrow{ width: 32px; height: 72px; position: absolute; top: 45%; z-index: 90; border: none;
 text-indent: -9999em; outline: none;
}
#event .article-ctn .gallery .slideshow .slick-prev { left: -50px; background: url('/img/arw-L.svg') no-repeat 50% 50% / 100% auto;}
#event .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; margin-bottom: 60px;}
#event .article-ctn .gallery .slide-th .slick-list { width: 100%;}
#event .article-ctn .gallery .slide-th .slick-track { transform: unset !important; width: 100% !important; display: flex; gap: 12px;}
#event .article-ctn .gallery .slide-th .slick-track:before { display: none;}
#event .article-ctn .gallery .slide-th .slick-track:after { display: none;}
#event .article-ctn .gallery .slide-th .slick-slide { flex: 0 0 18%;}
#event .article-ctn .gallery .slide-th .slick-slide { display: block !important; float: none !important;}
#event .article-ctn .gallery .slide-th .slick-slide img { width: 100%; opacity: 0.5;}
#event .article-ctn .gallery .slide-th .slick-slide.slick-current img { opacity: 1;}
/*
#event .article-ctn .gallery .slide-th ul { font-size: 0;}
#event .article-ctn .gallery .slide-th ul li { display: inline-block; width: 11.11115%; padding: 4px;}
#event .article-ctn .gallery .slide-th ul li img { width: 100%;}
*/

#event .article-ctn .point { background: #f5fcfb; margin-bottom: 80px; padding: 60px 0 80px;}
#event .article-ctn .point .stl { margin-bottom: 40px;}
#event .article-ctn .point .ctn { width: 88%; max-width: 900px; margin: 0 auto;}
#event .article-ctn .point .tips { margin-bottom: 20px; padding-bottom: 12px; border-bottom: dashed 1px #969696;}
#event .article-ctn .point .tips h3 { position: relative; padding-left: 80px; font-size: clamp(16px,2.4vw,24px); font-weight: 400; line-height: 1.25;}
#event .article-ctn .point .tips h3 span.eng { position: absolute; left: 0; bottom: -6px; color: #00b4a5; font-size: clamp(24px,6.0vw,50px); line-height: 1;}
#event .article-ctn .point .tips h3 br { display: none;}
#event .article-ctn .point .txt { margin-bottom: 60px;}
#event .article-ctn .point .txt p { margin-bottom: 30px; font-size: 18px; letter-spacing: 0.1rem; line-height: 1.8;}
#event .article-ctn .point .txt p span { font-weight: 700;}
#event .article-ctn .point .txt figure img { width: 100%;}
#event .article-ctn .osusume-box { width: 88%; max-width: 900px; margin: 0 auto; padding: 20px 40px; border: solid 0.5px #969696;}
#event .article-ctn .osusume-box h4 { position: relative; margin-bottom: 12px; padding-left: 50px; font-size: clamp(18px,2.4vw,24px);}
#event .article-ctn .osusume-box h4:before { content: ''; display: block; width: 20px; height: 20px; border: solid 6px #006e78; border-radius: 50%;
 position: absolute; left: 10px; top: 0.46em;
}
#event .article-ctn .osusume-box ul { padding-top: 15px; border-top: dashed 1px #969696;}
#event .article-ctn .osusume-box ul li { position: relative; padding: 6px; padding-left: 50px; font-size: 20px; line-height: 1.4;}
#event .article-ctn .osusume-box ul li:before { content: ''; display: block; width: 24px; height: 16px;
 border-left: solid 6px #00b4a5; border-bottom: solid 6px #00b4a5;
 position: absolute; left: 8px; top: 0.62em; transform: rotate(-45deg);
}
#event .form-bloc { padding: 80px 0 0;}
#event .article-ctn .fin { padding: 80px 0;}
#event .article-ctn .fin p { font-size: 20px; text-align: center;}


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

	#event .article-ctn .point .txt p { font-size: 16px;}
}
@media (max-width: 801px) {
	#event .inner-sct { padding: 40px 0 100px;}
	#event .article-hd h1 { margin-bottom: 20px;}
	#event .article-hd ul li { font-size: 14px;}

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

	#event .article-ctn .point .tips h3 { padding-left: 60px;}
	#event .article-ctn .point .txt p { font-size: 14px;}
	
	#event .article-ctn .osusume-box { padding: 20px 30px;}
	#event .article-ctn .osusume-box ul li { font-size: 16px;}
	#event .form-bloc { padding: 60px 0 0;}
}
@media (max-width: 481px) {
	#event .inner-sct { padding: 40px 0 60px;}
	
	#event .article-hd {}
	#event .article-hd h1 { margin-bottom: 12px; font-size: 18px; letter-spacing: 0.1rem;}
	#event .article-hd ul { padding-top: 12px;}
	#event .article-hd ul li { font-size: 12px;}
	
	#event .article-ctn { padding: 20px 0 40px;}
	
	#event .article-ctn .stl h3 span.jp { letter-spacing: 0.1rem;}

	#event .article-ctn .main { padding: 0px 0px 40px}
	#event .article-ctn .main figure { margin-bottom: 30px;}
	#event .article-ctn .btn a { font-size: 13px; letter-spacing: 0.05rem;}
	#event .article-ctn .btn a span { padding: 6px 0;}

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

	#event .article-ctn .point { margin-bottom: 40px; padding: 40px 0;}
	#event .article-ctn .point .stl { margin-bottom: 20px;}

	#event .article-ctn .point .tips { margin-bottom: 12px; padding-bottom: 8px;}
	#event .article-ctn .point .tips h3 { padding-top: 4px; padding-left: 45px; font-size: 16px;}
	#event .article-ctn .point .tips h3 span.eng { bottom: 0; font-size: 30px;}
	#event .article-ctn .point .tips h3 br { display: block;}
	#event .article-ctn .point .txt { margin-bottom: 30px;}
	#event .article-ctn .point .txt p { margin-bottom: 16px; font-size: 13px; letter-spacing: 0.05rem;}
	
	#event .article-ctn .osusume-box { padding: 12px 15px;}
	#event .article-ctn .osusume-box h4 { margin-bottom: 8px; padding-left: 35px; font-size: 16px;}
	#event .article-ctn .osusume-box h4:before { width: 15px; height: 15px; border-width: 3px; left: 5px; top: 0.25em;}

	#event .article-ctn .osusume-box ul li { padding: 3px; padding-left: 35px; font-size: 13px;}
	#event .article-ctn .osusume-box ul li:before { top: 0.4em; width: 15px; height: 10px; border-width: 3px;}

	#event .form-bloc { padding: 40px 0 0;}
	#event .article-ctn .fin { padding: 40px 0;}
	#event .article-ctn .fin p { font-size: 16px;}
	#event .article-ctn .fin p span { display: block;}
}