@charset "utf-8";

/*
=======================================
	item CSS
=======================================
*/

/*コンテンツエリア*/
#main{
	width:940px;
	margin:0 auto;
	padding-right:10px;
	padding-left:10px;
	margin-bottom:50px;
}

#main h2{
	text-align:center;
}

#main h3{
	margin-bottom:15px;
}

/*メインコンテンツ(640px以下)*/
@media screen and (max-width: 640px) {
	#main{
		width:90%;
		padding-right:0;
		padding-left:0;
	}

	#main h2{
		padding:0;
		border-radius:0;
		position:relative;
		color:#333;
		display:inline-block;
		margin:47px auto;
		text-shadow:0 0 2px white;
		text-align:center;
		line-height:2;
	}
	
	#main h2:before {
		content: "";
		position:absolute;
		background:#ffff66;
		width:70px;
		height:70px;
		border-radius:50%;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
		z-index:-1;
	}
	
	#main{
		text-align:center;
	}
	
	#main h3{
		margin-bottom:15px;
		text-align:left;
	}
}


/*リストアイテムの設定*/
.item{
	width:940px;
	margin-bottom:20px;
}

.item img{
	width:300px;
	height:240px;
}

.item-title{
	text-align:center;
	font-weight:bold;
}

.item ul{
	overflow:hidden;
	margin-bottom:10px;
}

.item ul li{
	float:left;
	width:31.914%;
	margin-right:2.12765%;
	margin-bottom:10px;
}

.item ul li:nth-child(3n){
	margin-right:0;
}

/*-----リストアイテム(640px以下)-----*/
@media screen and (max-width: 640px) {
	.item{
		width:100%;
	}

	.item img{
		width:100%;
		height:auto;
		margin-bottom:10px;
		text-align:center;
	}

	.item ul li{
		float:left;
		width:40%;
		margin-right:10%;
		height:210px;
	}
	.item ul li:nth-child(2n) {
	    margin-right:0;
	}
	.item ul li:nth-child(3n) {
	    margin-right:10%;
	}

	.item-title{
		font-size:14px;
	}
}