#keyvisual_box { position: relative; width: 100%; background: url(/common/images/bg_kv_club.jpg) #101622 no-repeat center center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#keyvisual { position: relative; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#keyvisual li { list-style-type: none; }
#keyvisual .main { overflow: hidden; }
#keyvisual .main li { display: none; position: absolute; top: 0; left: 0; }
#keyvisual .thumb_container { position: relative; overflow: hidden; height: 68px; margin: 10px auto 0 auto; }
#keyvisual .thumb { position: relative; height: 68px; }
#keyvisual .thumb li { position: absolute; top: 0; left: 0; width: 170px; height: 68px; cursor: pointer; }

#keyvisual .prevbtn { display: block; opacity: 0.5; text-indent: -9999px; position: absolute; left: 0; top: 290px; width: 26px; height: 59px; background: transparent url(/common/images/kv_prevbtn.png) no-repeat 0 0; }
#keyvisual .nextbtn { display: block; opacity: 0.5; text-indent: -9999px; position: absolute; right: 0; top: 284px; width: 26px; height: 59px; background: transparent url(/common/images/kv_nextbtn.png) no-repeat 0 0; }

@media only screen and ( max-width: 599px ) {
	html:not(.pc) #keyvisual_box { min-height: 10em; height: auto; padding: 0.5em 0 0; }
	html:not(.pc) #keyvisual { width: 94%; height: auto; margin-bottom: 0; padding: 5px; }
	html:not(.pc) #keyvisual .main { position:relative; top: 0; left: 0; width: 100%; height: auto; }
	html:not(.pc) #keyvisual .main li,
	html:not(.pc) #keyvisual .main li img { position:relative; width: 100%; height: auto; }
}

@media screen and ( min-width: 600px ) and ( max-width: 767px ){
	html:not(.pc) #keyvisual_box { height: 250px; padding: 1.5em 0; }
	html:not(.pc) #keyvisual { width: 586px; height: 166px; margin: 0 auto; }
	html:not(.pc) #keyvisual .main,
	html:not(.pc) #keyvisual .main li { width: 586px; height: 180px; }
	html:not(.pc) #keyvisual .main li img { width: 100%; height: 100%; }
	html:not(.pc) #keyvisual .thumb_container { margin-top: 1em !important; }
}

@media screen and ( max-width: 767px ){
	html:not(.pc) #keyvisual .thumb { width: 100%; height: 1em; }
	html:not(.pc) #keyvisual .thumb li { display: inline-block; position: relative; left: 0 !important; width: 1em !important; height: 1em; }
	html:not(.pc) #keyvisual .thumb li + li { margin-left: 3em; }
	html:not(.pc) #keyvisual .thumb li img { display: none !important; }
	html:not(.pc) #keyvisual .thumb li::after { content: ''; display: inline-block; height: 0; width: 0; background: #1541bc; border: 0.65em solid #1541bc; border-radius: 0.65em; opacity: 0.65; vertical-align: bottom; box-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
	html:not(.pc) #keyvisual .thumb_container { display: block; width:100%; height: 2em; bottom: 0; left: 0; text-align: center; }
	html:not(.pc) #keyvisual .prevbtn,
	html:not(.pc) #keyvisual .nextbtn { display:none; }
}

@media screen and ( min-width: 768px ) and ( max-width: 1023px ){
	html:not(.pc) #keyvisual_box { height:343px; padding-top:30px; }
	html:not(.pc) #keyvisual { width:750px; height:213px; margin:0 auto; }
	html:not(.pc) #keyvisual .main { position:relative; width:750px; height:213px; margin:0 auto; }
	html:not(.pc) #keyvisual .main li { width:750px; height:213px; }
	html:not(.pc) #keyvisual .main li img { width:100%; height:100%; }
	html:not(.pc) #keyvisual .thumb_container { width:694px; }
	html:not(.pc) #keyvisual .thumb { width:694px; }
	html:not(.pc) #keyvisual .thumb li {}
	html:not(.pc) #keyvisual .thumb li img { width:100%; height:100%; }
	html:not(.pc) #keyvisual .prevbtn { top:226px; }
	html:not(.pc) #keyvisual .nextbtn { top:226px; }
}

@media screen and ( min-width: 1024px ) {
	html:not(.pc) #keyvisual_box { height:400px; padding-top:30px; }
	html:not(.pc) #keyvisual { width:950px; height:344px; margin:0 auto; }
	html:not(.pc) #keyvisual .main { position:relative; width:950px; height:270px; margin:0 auto; }
	html:not(.pc) #keyvisual .main li { width:950px; height:270px; }
	html:not(.pc) #keyvisual .main li img { width:100%; height:100%; }
	html:not(.pc) #keyvisual .thumb_container { width:870px; }
	html:not(.pc) #keyvisual .thumb {}
	html:not(.pc) #keyvisual .thumb li {}
	html:not(.pc) #keyvisual .thumb li img { width:100%; height:100%; }
	html:not(.pc) #keyvisual .prevbtn { top:284px; }
	html:not(.pc) #keyvisual .nextbtn { top:284px; }
}

/* PC Only Start */
.pc:not(.msie8) #keyvisual_box { height:400px; padding-top:30px; }
.pc:not(.msie8) #keyvisual { width:950px; height:344px; margin:0 auto; }
.pc:not(.msie8) #keyvisual .main { position:relative; width:950px; height:270px; margin:0 auto; }
.pc:not(.msie8) #keyvisual .main li { width:950px; height:270px; }
.pc:not(.msie8) #keyvisual .main li img { width:100%; height:100%; }
.pc:not(.msie8) #keyvisual .thumb_container { width:870px; }
.pc:not(.msie8) #keyvisual .thumb {}
.pc:not(.msie8) #keyvisual .thumb li {}
.pc:not(.msie8) #keyvisual .thumb li img { width:100%; height:100%; }
.pc:not(.msie8) #keyvisual .prevbtn { top:284px; }
.pc:not(.msie8) #keyvisual .nextbtn { top:284px; }
/* PC Only End */
