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


/**************************************************************************
#areaCategory
**************************************************************************/
#areaCategory {
}

#areaCategory .list {
}

#areaCategory .item {
	width:25%;
	float:left;
	box-sizing:border-box;
	padding:0 15px;
}

#areaCategory .item dl {
	position:relative;
	padding-top:80%;
	background:#eee;
	border:solid 1px #ccc;
}
#areaCategory .item dt {
	background:#fff;
	text-align:center;
	font-weight:bold;
	font-size:0.95em;
	padding:5px 10px;
	z-index:10;
	position:relative;
	color:#333;
}
#areaCategory .item dd {
	position:absolute;
	top:0;
	left:0;
	overflow:hidden;
	width:100%;
	height:88%;
	background:#333;
}
#areaCategory .item dd img{
	opacity:0.5;
	transition-property:opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#areaCategory .item dl:hover img{
	opacity:1;
}

@media screen and ( max-width:768px )
{
	#areaCategory .item {
		width:50%;
		padding:10px 15px;
	}
}