@charset "utf-8";
/* CSS Document */

#content.usedacc {background: none;width: 950px;}
#foursquares {}
#foursquares ul {}
#foursquares ul li {width: 25%;float: left;}
#foursquares a {width:98%;margin:0.25em auto;}
#foursquares a:hover {transform: scale(1.01);box-shadow: 0 0 7px 1px #f90;}
#foursquares a img {width: 100%;}

div.panel {width: 100%;}
div.brandsl a {text-decoration: none;color: #133;font-size: 1.25em;}
div.brandsl a:hover {color: #f90;text-decoration: underline;}
#windmp {}
#windmp > div {float:left;width:25%;padding:0.5em;}
#brassmp > div {float:left;width:50%;padding:1em;}
#ligature ul li, #cases ul li {float: left;width:25%;padding:0.5em;}

div.panel > span > span.inst {margin:0 0 0.75em;display: block;border: 1px solid #f90;padding: 0.25em;border-radius: 4px;}
div.panel > span > p.comment {margin-bottom: 100px;background: #fc9;}
div.panel > span > p.comment:before {content:"";display: block;width:0; height: 0;background:none;position: absolute;top:99%;left:3.8em;border:1em solid transparent;border-top:1.5em solid #fc9;border-bottom:1.5em solid transparent;}
div.panel > span > p.comment:after {content:url(../img/fujie_c.png);position: absolute;bottom: -105px;left:4.8em;}
div.panel > span > p.comment.funaki:after {content:url(../img/funaki_c.png);}

.shelf {width:100%;margin:0 auto;}
.shelf > div.panel {float:left;font-size:0.875em;width:50%;padding:0 0.5em 2em;border-bottom: none;}
.shelf h4 {font-size: 2em;background: #06c;color:#fff;padding:0.5em;border-radius: 5px;}
.shelf > a {display:block;float: left;}

@media screen and (max-width: 61em) {
	.shelf > div.panel {float:none;font-size:1em;width:80%;padding:0 0 2em;}
	.shelf > a {float: none;}
}

@media screen and (max-width: 950px) {
	#content.usedacc {width:98%;}
}

@media screen and (max-width: 650px) {
	#foursquares ul li, #windmp > div {width: 50%;}
}