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

main ul { margin: 0; width: 930px; list-style: none; }
main li { margin: 0 30px 30px 0; padding: 24px 0; width: 278px; background: #fff; border: solid 1px #eee; text-align: center; float: left; box-shadow: 0 0 4px #ddd; }
main li div.wrap { margin: 0 auto 16px auto; width: 230px; height: 230px; position: relative; overflow: hidden; }
main li div.wrap:hover { cursor: pointer; }
main li div.wrap img.artist { width: 230px; height: 230px; display: block; position: absolute; transition: 0.3s all; }
main li div.wrap div.overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s all; }
main li div.wrap span { color: #fff; font-size: 230px; text-align: center; line-height: 230px; display: block; opacity: 0.02; }
main li div.wrap ul { margin: 0 auto; width: auto; text-align: center; display: none; position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2; }
main li div.wrap li { margin: 0 10px; padding: 0; width: auto; background: none; border: none; display: inline; float: none; box-shadow: none; }
main li div.wrap li img { width: 34px; height: auto; }
main li div.active img.artist { opacity: 0.5; filter: blur(2px); }
main li div.active div.overlay { background: rgba(0,0,0,0.5); opacity: 1; }
main li div.active div.overlay.chiwata { background: rgba(114,30,30,0.5); }
main li div.active div.overlay.tanaka { background: rgba(91,65,76,0.5); }
main li div.active div.overlay.keitaku { background: rgba(81,90,84,0.5); }
main li div.active div.overlay.nozoe { background: rgba(2,42,76,0.5); }
main li div.active div.overlay.mykeys { background: rgba(72,103,110,0.5); }
main li div.active div.overlay.naruse { background: rgba(31,75,109,0.5); }
main li div.active div.overlay.egashira { background: rgba(66,94,110,0.5); }
main li div.active div.overlay.mizokami { background: rgba(80,62,36,0.5); }
main li div.active div.overlay.koga { background: rgba(126,89,63,0.5); }
main li div.active div.overlay.takeshita { background: rgba(153,99,6,0.5); }
main li div.active div.overlay.ikazuchi { background: rgba(166,149,25,0.5); }
main li div.active div.overlay.ot-en-to { background: rgba(42,75,94,0.5); }
main li div.active div.overlay.theGrafity { background: rgba(108,85,120,0.5); }
main li div.active div.overlay ul { display: block; }
main li strong { font-size: 110%; }
main li strong span { font-size: 90%; }

@media screen and (max-width: 767px) {
main ul { width: auto; }
main li { margin: 0 auto 18px auto; float: none; }
main li div.wrap span { line-height: 215px; writing-mode: vertical-rl; text-orientation: upright; -webkit-text-orientation: upright; }
}