@charset 'UTF-8';


#main > h1 {margin-bottom:0; border-bottom:none;}

#index {}
#index > ul {margin:-20px 0 0 -20px; letter-spacing:-0.4em;}
#index > ul > li {display:inline-block; width:348px; margin:20px 0 0 20px; border:1px solid #e5e5e5; letter-spacing:normal; vertical-align:top;}
#index > ul > li > a {display:table; width:100%; text-decoration:none;}
#index > ul > li .image {display:table-cell; width:174px; position: relative;}
#index > ul > li .image > img {display:block;}
#index > ul > li .image > .comingsoon{position: absolute; bottom:40%; left:0; width: 100%; padding: 10px 0; text-align: center; background-color: rgba(255,255,255,0.50);}
#index > ul > li b {display:table-cell; padding:20px; font-size:100%; vertical-align:middle;}
#index > ul > li b small {font-size:86%;}
#index > ul > li > a:hover > .image > img {opacity:0.8;}
#index > ul > li > a:hover > b {color:#3466ad;}


@media screen and (max-width: 599px) {

#main > h1 {padding-top:0; border-top:0; font-size:17px; text-align:center;}

#index {}
#index > ul {margin:-10px 0 0;}
#index > ul > li {width:100%; margin:10px 0 0;}
#index > ul > li.spNone {display: none;}
#index > ul > li > a {}
#index > ul > li .image {width:120px;}
#index > ul > li .image > img {width:100%; max-width:none; height:auto;}
#index > ul > li b {}
#index > ul > li > a:hover > .image > img {}

}