.wrap-catalog {max-width: 960px;margin: 15px auto;}
h2.ttl-catalog {text-align: left;font-size: 1.3rem;line-height: 1.3;width: 97%;margin: 10px auto 15px;padding: 0;color: #333;}
h2.ttl-catalog > span {font-size: .8rem;padding-left: 15px;color: #e00;font-weight: normal;}
.txt-catalog {margin: -1.7rem auto 5px;font-size: .7rem;color: #777;width: 98%;text-align: right;}
.lst-catalog {display: flex;flex-flow: row wrap;width: 98%;margin: 0 auto 30px;padding: 0;}
.lst-catalog li {width: 9.6%;margin: 0 0.2%;list-style: none;}
.lst-catalog li:last-child {float: none;}
.lst-catalog li > a {text-decoration: none;}
.lst-catalog li > a .c-img {overflow: hidden;width: 100%;height: auto;margin: 0 auto;box-shadow: 1px 1px 3px rgba(0,0,0,.2);display: flex;}
.lst-catalog li > a .c-img:hover {box-shadow: 0px 0px 0px rgba(0,0,0,0);}
.lst-catalog li > a .c-img > img {width: 100%;height: auto;margin: 0;padding: 0;display: block;border: solid 1px #ddd;}
.lst-catalog li > a .c-img > img:hover {opacity: 0.6;transition: 0.6s;transition-duration: 0.6s;border: solid 1px #06f;}
.lst-catalog li .c-name {text-align: center;font-size: .7rem;line-height: 1.3;width: 98%;margin: 2px auto 3px;color: #333;}
@media screen and (max-width: 750px){
h2.ttl-catalog {font-size: 1.2rem;width: 94%;}
h2.ttl-catalog > span {font-size: .7rem;padding-left: 10px;}
.txt-catalog {margin: -0.7rem auto 5px;font-size: .6rem;}
.lst-catalog li {width: 19%;margin: 0 0.5%;}
.lst-catalog li .c-name {font-size: .6rem;}
}