@charset "utf-8";

#keyvisual { position: relative; width: 870px; height: 344px; margin: 0 auto; margin:0 auto; box-sizing: border-box; }
#keyvisual::after { content:''; position: absolute; display: block; top: -28px; left: 145px; width: 586px; height: 81px; background: url(/common/images/bg_kv_cine_toplight.png) no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; }

#keyvisual .main { position: relative; width: 660px; height: 250px; margin: 0 auto; overflow: hidden; }
#keyvisual .main li { display: none; position: absolute; top: 0; left: 0; width: 660px; height: 250px; }
#keyvisual .main li img { width: 100%; height: 100%; }


#keyvisual .thumb_container { position: relative; overflow: hidden; height: 72px; width: 810px; margin: 1.5em auto 0 auto; }
#keyvisual .thumb { position: absolute; top: 0; left: 0; height: 72px; width: 810px; }
#keyvisual .thumb li { position: absolute; list-style-type: none; top: 0; left: 0; width: 154px; height: 72px; cursor: pointer; }
#keyvisual .thumb li img { width: 100%; height: 100%; }

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

#keyvisual_box { position: relative; width:100%; height: 400px; padding-top: 29px; background: url(/common/images/bg_kv_cine.jpg) #000 no-repeat center center; box-sizing: border-box; }



/*  Not PC & WideTablet Portrait */
@media screen and ( min-width: 768px ) and ( max-width: 1023px ) {
	html:not(.pc) #keyvisual { width: 730px; height: 344px; margin: 0 auto; }
	html:not(.pc) #keyvisual .main { position: relative; width: 660px; height: 250px; margin: 0 auto; }
	html:not(.pc) #keyvisual .main li { width: 660px; height: 250px; }
	html:not(.pc) #keyvisual .main li img { width: 100%; height: 100%; }
	html:not(.pc) #keyvisual .prevbtn,
	html:not(.pc) #keyvisual .nextbtn { top: 270px; }
	html:not(.pc) #keyvisual .thumb_container { width: 646px; margin-top: 1em; }
	html:not(.pc) #keyvisual .thumb { width: 646px; }
	html:not(.pc) #keyvisual .thumb li {}
	html:not(.pc) #keyvisual .thumb li img { width: 100%; height: 100%; }
	html:not(.pc) #keyvisual_box { padding-top: 40px; }
}

/*  Not PC & Tablet Portrait */
@media screen and ( max-width: 767px ) {
	html:not(.pc) #keyvisual { width: 98%; height: 200px; margin: 0 auto; }
	html:not(.pc) #keyvisual .main,
	html:not(.pc) #keyvisual .main li { width: 100%; height: 222px; }
	html:not(.pc) #keyvisual .main li img { height: auto; }

	html:not(.pc) #keyvisual .thumb_container { bottom: 0; left: 0; display: block; width:100%; height: auto; min-height: 3em; margin-top: 0; text-align: center; }
	html:not(.pc) #keyvisual .thumb { position: static; top: auto; left: auto; width: 100%; height: auto; margin: 0 auto; padding: 0; letter-spacing: -.4em; text-align: center; }
	html:not(.pc) #keyvisual .thumb li { position: relative; display: inline-block; width: 1em !important; height: 1em; margin: 1em 1.25em 1.5em; letter-spacing: normal; }
	html:not(.pc) #keyvisual .thumb li:first-child { margin-left: 0.5em; }
	html:not(.pc) #keyvisual .thumb li:last-child { right-left: 0.5em; }
	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: #ffd55b; border: 0.6em solid #ffd55b; border-radius: 0.6em; opacity: 0.65; vertical-align: bottom; box-shadow: 1px 1px 3px rgba(255,255,255,1); }
	html:not(.pc) #keyvisual .prevbtn { display:none; }
	html:not(.pc) #keyvisual .nextbtn { display:none; }
	html:not(.pc) #keyvisual_box { height: 275px; padding-top: 0.5em; }
	#keyvisual::after { content:''; position: absolute; display: none; }
}