@charset "utf-8";


h4.green{ width: 200px; background:#5bc33d; border-radius: 25px; margin: 30px 0 -30px 0; font-weight: bold; color:#fff; text-align:center; }
h4.orange{ width: 200px; background:#ff6600; border-radius: 25px; margin: 30px 0 -30px 0; font-weight: bold; color:#fff; text-align:center; }
div.icon { margin: 15px 0; font-size: 12px; }
div.icon li { display: inline; padding: 3px 8px; color: #fff; line-height: 230%; }
div.icon li.rental { background-color: #ff6600; }
div.icon li.sales { background-color: #5bc33d; }
/*div.icon li.operate { background-color: #5bc33d; }
div.icon li.engineering { background-color: #178309; }
div.icon li.system { background-color: #006666; }*/

ul.works { width: 100%; max-width: 1037px; margin: 45px auto; }
ul.works li { width: 30%; float: left; padding-bottom: 8px; border: 1px solid #848484; margin: 25px 1.5% 0; height: 350px; }
ul.works li img { width: 100%; }
ul.works li div.explain  { text-align: left; width: calc(100% - 30px); margin: 8px 15px 0; }
ul.works li div.icon li { text-align: center; height: 25px; padding: 0 0 2px 0; margin:0 3px 3px 0; border: none; }
ul.works li div.icon li.rental { width: 64px; }
ul.works li div.icon li.sales { width: 58px; }
/*ul.works li div.icon li.operate { width: 60px; }
ul.works li div.icon li.engineering { width: 80px; }
ul.works li div.icon li.system { width: 120px; }*/
ul.works li div.explain div.title { font-size: 14px; }
ul.works li div.explain div.text { font-size: 14px; }

@media only screen and (max-width: 767px) {
ul.works li { width: 96.6%; height: auto; }
ul.works li div.explain div.title { font-size: 18px; }
ul.works li div.explain div.text { font-size: 16px; }
}