@charset "utf-8";

#event-list .inner-sct {}
#event-list .ctn { width: 88%; max-width: 1160px; margin: 0 auto;}
#event-list .ctn ul { display: flex; flex-wrap: wrap; font-size: 14px;}
#event-list .ctn ul li { width: 33.33334%; padding: 30px 0px; font-size: 16px;}
#event-list .ctn ul li a { display: block; width: 94%; max-width: 300px; margin: 0 auto; color: #000; text-decoration: none; transition: 0.3s linear;}
#event-list .ctn ul li a dl dt { position: relative; width: 100%; padding-top: 100%; margin-bottom: 15px; overflow: hidden;}
#event-list .ctn ul li a dl dt span.status { position: absolute; left: 0; top: 0; z-index: 2;
 width: 60px; padding: 2px 0; background: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;
}
#event-list .ctn ul li a dl dt span.status.fin { background: #000; color: #fff;}
#event-list .ctn ul li a dl dt img { position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; transform: translate(-50%,-50%); transition: 0.4s ease;}
#event-list .ctn ul li a dl dd { letter-spacing: 0.1rem;}
#event-list .ctn ul li a dl dd span.tit { font-size: 18px; font-weight: 700;}
#event-list .ctn ul li a dl dd time { display: block; font-size: 12px; font-weight: 700; vertical-align: middle;}
#event-list .ctn ul li a dl dd time em { font-size: 20px;}
#event-list .ctn ul li a dl dd span.tag { display: inline-block; width: auto; background: #000; padding: 1px 10px 3px; background: #000; border-radius: 50px; color: #fff; font-size: 15px; line-height: 1.2; vertical-align: middle;}
#event-list .ctn .btn { max-width: 200px;}
#event-list .ctn ul li a:hover { opacity: 0.8;}
#event-list .ctn ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}

@media (max-width: 1025px) {
	#event-list .inner-sct { padding: 80px 0 100px;}
	#event-list .ctn ul { flex-wrap: wrap;}
	#event-list .ctn ul li { width: 33%; padding: 18px 10px;}
}
@media (max-width: 801px) {
	#event-list .ctn ul { justify-content: space-between;}
	#event-list .ctn ul li { width: 48%;}
}
@media (max-width: 481px) {
	#event-list .inner-sct { }
	#event-list .ctn ul { display: block;}
	#event-list .ctn ul li { width: 100%; padding: 18px 0px;}
	#event-list .ctn ul li a { width: 96%;}
	#event-list .ctn ul li a dl dt { margin-bottom: 8px;}
	#event-list .ctn ul li a dl dd { font-size: 12px; letter-spacing: 0.05rem;}
	#event-list .ctn ul li a dl dd.tit { margin-bottom: 0px;}
	#event-list .ctn ul li a dl dd time { margin-right: 8px; font-size: 10px;}
	#event-list .ctn ul li a dl dd span.tag { padding: 1px 6px 2px; font-size: 10px;}
}


#event { border-top: solid 1px #b4b4b4;}
#event .inner-sct { padding: 80px 0;}
#event .article-hd { position: relative; width: 88%; max-width: 1000px; margin: 0 auto 30px;}
#event .article-hd p { margin-bottom: 24px; font-size: 18px; font-weight: 700; line-height: 1;}
#event .article-hd p span.status { display: inline-block; width: 90px; margin-right: 20px; padding: 12px 0; border: solid 1px #000; vertical-align: middle;
 font-size: 21px; letter-spacing: 0.1rem; text-align: center;
}
#event .article-hd p span.status.fin { background: #000; color: #fff;} 
#event .article-hd p time { display: inline-block; vertical-align: middle;}
#event .article-hd p time em { font-size: 24px;}
#event .article-hd h2 { margin-bottom: 20px; font-size: 30px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;}
#event .article-ctn { width: 88%; max-width: 1000px; margin: 0 auto 40px;}
#event .article-ctn .mv { position: relative; width: 100%; max-width: 950px; margin: 0 auto 50px; z-index: 2;}
#event .article-ctn figure { text-align: center;}
#event .article-ctn figure img { max-width: 100%;}
#event .article-ctn .mv figure img.sp { display: none;}
#event .article-ctn .ctn { position: relative; width: 100%; max-width: 930px; margin: 0 auto; padding-bottom: 70px; z-index: 2;}
#event .article-ctn .ctn p { margin-bottom: 20px; font-size: 18px; line-height: 2; letter-spacing: 0.1rem;}
#event .article-ctn .ctn p:last-child { margin-bottom: 0px;}
#event .formBloc { width: 88%; max-width: 800px; margin: 0 auto; padding: 40px 0;}
#event .formBloc h3 { margin-bottom: 20px; font-size: 30px; font-weight: 700; text-align: center;}
@media (max-width: 801px) {
	#event .article-hd p { margin-bottom: 12px; font-size: 14px;}
	#event .article-hd p span.status { width: 60px; margin-right: 12px; padding: 8px 0; font-size: 15px;}
	#event .article-hd p time em { font-size: 20px;}
	#event .article-hd h2 { font-size: 20px;}
	#event .article-ctn .mv { margin: 0 auto 30px;}
	#event .article-ctn .mv figure img.pc { display: none;}
	#event .article-ctn .mv figure img.sp { display: block;}

	#event .article-ctn .ctn p { font-size: 16px;}
}
@media (max-width: 481px) {
	#event .inner-sct { padding:60px 0;}
	#event .article-hd p { font-size: 12px;}
	#event .article-hd p span.status { margin-right: 8px; padding: 4px 0; font-size: 12px;}
	#event .article-hd p time em { font-size: 16px;}
	#event .article-hd h2 { font-size: 16px;}

	#event .article-ctn .mv { margin: 0 auto 20px;}
	#event .article-ctn .ctn { padding-bottom: 40px;}
	#event .article-ctn .ctn p { font-size: 13px; letter-spacing: 0.05rem; line-height: 1.65;}

	#event .formBloc h3 { margin-bottom: 12px; font-size: 18px;}
}


.formBloc ul li dl dt { width: 270px; font-weight: 700;}
.formBloc ul li dl dd { width: auto;}
.formBloc ul li dl dt span { display: inline-block; vertical-align: middle;}
.formBloc ul li dl dt span.required { width: 60px; margin-right: 12px; padding: 2px 0; background: #000; border: solid 1px #000; color: #fff; text-align: center;}
.formBloc ul li dl dt span.optional { width: 60px; margin-right: 12px; padding: 2px 0; background: #fff; border: solid 1px #000; color: #000; text-align: center;}