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

.productWrap{padding:30px 0;}
.productWrap .display li{
	position: relative;
	padding-right:75%;
	margin-bottom:60px;
}
.productWrap .display .info{
	transition: all 0.5s;
	padding:12px 40px 20px;
	min-height:300px;
	background:#0355a8;
	position:relative;
	z-index:1;
	opacity:0.9;
}
.productWrap .display .hdM {
	margin-right:-40px;
	margin-bottom: 16px;
}
.productWrap .display .img{
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:100%;
}
.productWrap .display li:hover .info{
	background: #204b9e; 
    color: #fff;
}
.productWrap .display li:hover .hdM{border-color:#fff;}
.productWrap .display li:hover .img{opacity:0.7;}

.productCate .list{
	margin-left:-30px;
}
.productCate .list li{
	padding:0 0 30px 30px; 
	text-align: center;
}
.productCate .list li .item{ 
	padding:0 0 10px;
	border:1px solid #e1e1e1;
}
.productCate .list li .img{
	display: flex;
	justify-content: center;
	align-items: center;
	height:250px;
}

.productCate .display.left {
	display:flex;
	justify-content:space-between;
	padding:20px 40px;
}
.productCate .display.left .img{
	width:42%; 
}
.productCate .display.left .info{width:55%;}
.productCate .display .hdL{
	margin-bottom:10px;
	padding-left:40px;
	background-position: left center;
	background-repeat: no-repeat;
	font-weight: 600;
	color: #285198;
	font-size: 2.2rem;
}
.productCate .display .tit01{background-image:url(../img/product/ico_hook.png);}
.productCate .display .tit02{background-image:url(../img/product/ico_fish.png);}
.productCate .display .tit03{background-image:url(../img/product/ico_spec.png);}
.productCate .display .tit04{background-image:url(../img/product/ico_color.png);}
.productCate .display .keys{
	padding:0 0 10px 40px;
	font-size:0;
}
.productCate .display .keys span{
	display:inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	margin:0 10px 10px 0;
	padding:0px 15px;
	min-width:60px;
	height:30px;
	background:#4a4a4a;
	border-radius: 10px;
	color:#fff;
	font-size:1.5rem;
}
.productCate .display .keys .style01{background:#b99855;}
.productCate .display .keys .style02{background:#3ea960;}
.productCate .display .keys .style03{background:#1eaceb;}
.productCate .display .keys .style04{background:#4e4037;} 
.productCate .display .keys .style06{background:#8b612e;}
.productCate .display .keys .style07{background:#fff;color:#4a4a4a;}

.productCate .buyLinks{
	display:flex;
	justify-content: center;
	align-items: center;
	padding:35px 0;
	text-align: center;
}
.productCate .buyLinks a{
	display:block;
	margin:0 20px;
}
.productCate .buyLinks a:hover{opacity:0.7;}
.productCate .buyLinks .buy{
	padding:15px 10px 15px 70px;
	background:url(../img/common/ico_cart.png) no-repeat left center;
	border-top:2px solid #ea8e00;
	border-bottom:2px solid #ea8e00;
	color:#ea8e00;
	font-size:2.2rem;
	font-weight: 600;
}
.productCate .buyLinks .logo{
	color:#717171;
	font-size:1.4rem;
}
.productCate .buyLinks .logo img{
	display:block;
	margin:0 auto 5px;
	box-shadow: 0 0 13px rgba(113,113,113,0.1);
}
.productCate .introd{padding-left:40px;}
.productCate .introd p{padding-bottom:20px;}
.productCate .introd .hdL{
	margin:0 0 10px -40px;
	padding:0 0 0 40px;
	background-image:url(../img/product/ico_nav.png);
}

/*sp*/ 
@media screen and (max-width: 767px) {
	.productWrap .display li{
		padding:0;
		margin-bottom:20px;
	}
	.productWrap .display .info{
		padding: 10px 20px 15px;
		min-height:inherit;
	}
	.productWrap .display .hdM {
		margin-right: 0;
	}
	.productWrap .display .img{
		position:static;
		width:100%;
	}
	
	.productCate .list{
		margin-left:-15px;
	}
	.productCate .list li{
		padding:0 0 15px 15px; 
		width:50%;
		font-size:1.2rem;
	}
	.productCate .list li .img{height:150px;}
	.productCate .list li .img img{
		max-width:80%;
		max-height: 80%;
	}
	
	.productCate .display.left {
		display: block; 
		padding: 15px;
	}
	.productCate .display.left .img{
		margin-bottom:20px;
		width:100%;
	}
	.productCate .display.left .info{width:100%;}
	.productCate .display .hdL{
		padding-left: 30px;
		background-size:auto 22px;
	}
	.productCate .display .keys{padding: 0 0 10px 30px;}
	.productCate .buyLinks{
		display:block;
		padding: 15px 0;
	}
	.productCate .buyLinks a{
		margin:20px 0;
	}
	.productCate .buyLinks .buy{
		padding: 15px 10px 15px 40px;
		background-size:30px;
		font-size:1.7rem;
	}
	.productCate .buyLinks .logo{font-size:1.2rem;}
	.productCate .introd {
		padding-left: 0;
	}
	.productCate .introd .hdL{
		margin: 0 0 10px 0;
    	padding: 0 0 0 30px;
	}
}