@charset "utf-8";



/*---------------
 カタログ
-----------------*/
.catalogArea ul{
 width: 1020px;
 margin: 0 auto;
 display: flex;
 align-items: flex-start;
}
.catalogArea ul li{
 width: 340px;
 text-align: center;
}

/*画像*/
/*スマホ用の画像をPCではすべて0.6倍に*/
.catalogArea ul li .img img{
 width: 100%;
 height: auto;
}
.catalogArea ul li .name .logoWrap img{ transform: scale(0.6);}

.catalogArea ul li .img{
 display: inline-block;
 width: 176px;
 position: relative;
 height: 285px;
 margin-bottom: 8px;
}
.catalogArea ul li .img a{
 display: block;
 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.6);
}
.catalogArea ul li .img a:hover{ transform: scale(1.06) rotate(0.01deg);}
.catalogArea ul li .img.new::after{
 content: "NEW";
 display: block;
 position: absolute;
 top: -11px;
 right: -24px;
 width: 60px;
 height: 22px;
 line-height: 22px;
 border-radius: 11px;
 background-color: #ffa22a;
 font-size: 1.2rem;
 color: #fff;
 font-weight: bold;
 text-align: center;
 transform: translateZ(0);
}
.catalogArea ul li .img .reflect{
 position: relative;
 top: -3px;
 height: 35px;
 overflow: hidden;
 z-index: 1;
}
.catalogArea ul li .img .reflect::after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 background: -moz-linear-gradient(top, rgba(249,249,249,0), rgba(249,249,249,1));
 background: -webkit-linear-gradient(top, rgba(249,249,249,0), rgba(249,249,249,1));
 background: linear-gradient(to bottom, rgba(249,249,249,0), rgba(249,249,249,1));
 z-index: 5;
}
.catalogArea ul li .img .reflect img{
 transform: scale(1, -1);
 opacity: 0.3;
}

/*ロゴまわり*/
.catalogArea ul li .name span{
 font-size: 1.2rem;
 color: #999;
 display: block;
 font-weight: 500;
}
.catalogArea ul li .name .logoWrap{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 87px;
}
.catalogArea ul li .name .logoWrap span{ margin: 6px 0 11px;}