@charset "UTF-8";
@import url("../../css/style.css");
@import url("../../css/lightbox.min.css");

main h2 { margin: 0; padding: 0; border-left: none; }
div#special { margin: 20px 0; padding: 30px; background: #90a2b0; color: #fff; }
div#special dt { width: 200px; float: left; }
div#special dt img { width: 180px; height: auto; border: solid 10px #fff; box-sizing: border-box; }
div#special dd { width: 720px; float: left; }
div#special dd strong { font-size: 105%; }
div#special dd h2 { margin: 0 0 15px 0; font-size: 150%; }
div#special dd p { margin: 0; }
div#special dd a { padding: 0 20px 0 0; color: #fff; background: url(../../images/common/iconNewWindow.png) center right no-repeat; background-size: 15px auto; text-decoration: underline; }
div#special dd a:hover { text-decoration: none; }
ul#artists { width: 1008px; list-style: none; }
ul#artists li { margin: 0 28px 28px 0; width: 308px; height: 360px; float: left; position: relative; overflow: hidden; }
ul#artists div.panel { width: 100%; height: 360px; position: absolute; top: 0; left: 0; }
ul#artists div.panel div { width: 100%; height: 360px; position: relative; }
ul#artists div.panel h2, ul#artists div.panel strong { width: 100%; height: 60px; background: #fff; font-size: 105%; font-weight: 400; text-align: center; line-height: 60px; position: absolute; bottom: 0; z-index: 2; }
ul#artists div.panel h2 span { font-size: 80%; }
ul#artists div.panel strong { display: block; }
ul#artists div.panel img.artist { width: 100%; height: 300px; border: solid 1px #fff; border-width: 20px 20px 0 20px; box-sizing: border-box; position: absolute; z-index: 1; }
ul#artists div.front { z-index: 2; }
ul#artists div.back { z-index: 1; }
ul#artists div.back ul { width: 180px; list-style: none; position: absolute; bottom: 80px; left: 64px; z-index: 2; }
ul#artists div.back ul.one { width: 60px; left: 124px; }
ul#artists div.back ul.two { width: 120px; left: 94px; }
ul#artists div.back li { margin: 0; width: 60px; height: auto; float: left; position: static; }
ul#artists div.back li a { margin: 0 auto; width: 30px; height: 30px; display: block; }
ul#artists div.back li img { width: 100%; height: auto; }
ul#artists div.back img.artist { transform: scale(-1, 1); }

@media screen and (max-width : 767px) {
div#special { padding: 20px; }
div#special dt { margin: 0 0 15px 0; width: auto; text-align: center; float: none; }
div#special dd { width: auto; text-align: center; float: none; }
div#special dd strong { font-size: 100%; }
div#special dd h2 { margin: 0 0 5px 0; }
div#special dd p { text-align: left; }
ul#artists { width: auto; }
ul#artists li { margin: 0 auto 15px auto; float: none; }
}