@charset "utf-8";

#keyvisual_box { position: relative; width: 100%; background-image: url(/common/images/bg_kv_della.jpg); background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
#keyvisual { display: none; position: relative; margin: 0 auto; background: rgba(255,255,255,0.6); box-sizing: border-box; }
#keyvisual .main { position: absolute; overflow: hidden; }
#keyvisual .main li { display: none; position: absolute; top: 0; left: 0; }
#keyvisual .thumb_container { position: absolute; overflow: hidden; }
#keyvisual .thumb { position: relative; }
#keyvisual .thumb li { position: absolute; top: 0; left: 0; cursor: pointer; }

/* PC & WideTablet Landscape */
html.pc header[role="banner"] #keyvisual_box { height: 400px; padding: 25px; }
html.pc header[role="banner"] #keyvisual { width: 950px; height: 350px; }
html.pc header[role="banner"] #keyvisual .main { top: 25px; left: 25px; width: 900px; height: 240px; }
html.pc header[role="banner"] #keyvisual .main li { width: 900px; height: 240px; }
html.pc header[role="banner"] #keyvisual .main li img { width: 100%; height: 100%; }
html.pc header[role="banner"] #keyvisual .thumb_container { width: 900px; height: 50px; top: 275px; left: 25px; }
html.pc header[role="banner"] #keyvisual .thumb { width: 900px; height: 50px; }
html.pc header[role="banner"] #keyvisual .thumb li { width: 280px; height: 50px; }
html.pc header[role="banner"] #keyvisual .thumb li img { width: 100%; height: 100%; }
html:not(.pc) #keyvisual_box { height: 400px; padding: 25px; }
html:not(.pc) #keyvisual { width: 950px; height: 350px; }
html:not(.pc) #keyvisual .main { top: 25px; left: 25px; width: 900px; height: 240px; }
html:not(.pc) #keyvisual .main li { width: 900px; height: 240px; }
html:not(.pc) #keyvisual .main li img { width: 100%; height: 100%; }
html:not(.pc) #keyvisual .thumb_container { width: 900px; height: 50px; top: 275px; left: 25px; }
html:not(.pc) #keyvisual .thumb { width: 900px; height: 50px; }
html:not(.pc) #keyvisual .thumb li { width: 280px; height: 50px; }
html:not(.pc) #keyvisual .thumb li img { width: 100%; height: 100%; }


/*  Not PC & WideTablet Portrait */
@media screen and ( min-width: 768px ) and ( max-width: 1023px ) {
	html:not(.pc) #keyvisual_box { height: 325px; padding: 25px 0; }
	html:not(.pc) #keyvisual { width: 750px; height: 275px; }
	html:not(.pc) #keyvisual .main { top: 20px; left: 20px; width: 720px; height: 190px; }
	html:not(.pc) #keyvisual .main li { width: 720px; height: 190px; }
	html:not(.pc) #keyvisual .main li img { width: 100%; height: 100%; }
	html:not(.pc) #keyvisual .thumb_container { width: 720px; height: 40px; top: 220px; left: 20px; }
	html:not(.pc) #keyvisual .thumb { width: 720px; height: 40px; }
	html:not(.pc) #keyvisual .thumb li { width: 230px; height: 40px; }
	html:not(.pc) #keyvisual .thumb li img { width: 100%; height: 100%; }
}

/*  Not PC & Tablet Portrait */
@media screen and ( max-width: 767px ) {
	html:not(.pc) #keyvisual { width: 586px; height: 190px; margin: 0 auto; padding-bottom: 2em !important; }
	html:not(.pc) #keyvisual_box { min-height: 220px; padding: 1em 0; }
	html:not(.pc) #keyvisual .main { top: 10px; left: 10px; width: 566px; height: 151px; }
	html:not(.pc) #keyvisual .main li { width: 566px; height: 151px; }
	html:not(.pc) #keyvisual .main li img { width: 100%; height: 100%; }
	html:not(.pc) #keyvisual { padding-bottom: 2em !important; }
	html:not(.pc) #keyvisual .thumb { width: 100%; height: 1.5em; }
	html:not(.pc) #keyvisual .thumb li { display: inline-block; position: relative; left: 0 !important; width: 1.5em !important; height: 2em; margin-top: 0.2em; }
	html:not(.pc) #keyvisual .thumb li + li { margin-left: 1.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: #002d24; border: 0.65em solid #002d24; border-radius: 0.65em; opacity: 0.8; box-shadow: 0 0 3px rgba(255,255,255,0.3); }
	html:not(.pc) #keyvisual .thumb_container { display: block; width:100%; height: 1.5em; bottom: 0.55em; left: 0; text-align: center; }
}