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

.wrapper{
	width:100%;
	position:relative;
	text-align:center;
}


.wrapper #contents{
	width:100%;
	text-align:center;
	margin:30px auto;
}

.wrapper #contents .cate{
	text-align:left;
	margin-bottom:20px;
}

.wrapper #contents .cate p{
	width:20%;
	display:inline-block;
	margin-right:2%;
	vertical-align:top;
	position:relative;
}

.wrapper #contents .cate p span{
	width:90%;
	text-align:center;
	position:absolute;
	color:#fff;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.wrapper #contents .cate ul{
	width:70%;
	display:inline-block;
}


.wrapper #contents .controls2{
	width:90%;
	max-width:1000px;
	margin:auto;
}

.wrapper #contents .controls2 li{
	display:inline-block;
	border:1px solid #999;
	border-radius:5px;
	padding:2px 15px;
	cursor:pointer;
	color:#999;
	margin-bottom:10px;
}

.wrapper #contents .controls2 li:hover{
	color:#fff;
	background-color:#841604;
	border:1px solid #841604;
}

.mixitup-control-active{
	color:#fff !important;
	background-color:#841604 !important;
	border:1px solid #841604 !important;
}


.mixitup-control-active[data-filter]:after {
    background: transparent;
}


@media only screen and (max-width: 760px) { 
.wrapper #contents .cate p{
	width:30%;
	max-width:150px;
	height:120px;
	overflow:hidden;
}

.wrapper #contents .cate p img{
	object-fit:cover;
	height:150px;
}



.wrapper #contents .cate ul{
	width:65%;
}

}
























#item-list{
	width:100%;
	margin:80px auto 20px;
	text-align:left;
	overflow:hidden;
}

#item-list li{
	width:21%;
	max-width:250px;
	margin:0 2% 30px;
	vertical-align:top;
	overflow:hidden;
	text-align:center;
	float:left;
}

#item-list li dt{
	font-size:18px;
	font-weight:bold;
	margin:10px 0;
}

#item-list li dd{
	margin-bottom:20px;
	text-align:left;
}

#item-list li span{
	font-size:10px;
	border:1px solid #222;
	margin:0 2px 5px;
	padding:5px 10px;
	border-radius:5px;
	float:left;
}






@media only screen and (max-width: 950px) { 
#item-list li{
	width:29%;
	max-width:250px;
}

}

@media only screen and (max-width: 560px) { 
#item-list li{
	width:46%;
	max-width:250px;
}

}