@charset "utf-8";

/* ====================================================
 WORKS
==================================================== */

#content h1 span.mini{
	font-size:14px;
	font-weight: normal;
	padding-left:32px;
}
#content h1.title br{
	display:none;
}
#works{
	width:100%;
	max-width: 992px; /* 974+9+9 */
	margin: 0 auto 40px auto;
}
#works li{
	display: block;
	float: left;
	width:228px;
	margin-left:9px;
	margin-right:9px;
	margin-bottom:20px;
	border:1px solid #DDD;
}
#works li a{
	transition: all 0.6s;
}
#works li a:hover{
	opacity: 0.6;
}
#works li img{
    width:100%;
}
#content p.contact{
	font-size:16px;
	text-align: center;
	margin-bottom:110px;
}
#content p.contact br{
	display: none;
}

@media screen and (max-width:1009px){
	#works{
		max-width: 744px; /* 726+9+9 */
	}
}

@media screen and (max-width:780px){ 
	#content h1.title{
		line-height: 100%;
	}
	#content h1.title br{
		display:block;
	}
	#content h1.title span.mini{
		margin-top:10px;
		padding-left:0;
	}
}

@media screen and (max-width:762px){
	#works{
		max-width: 496px; /* 478+9+9 */
		margin: 0 auto 20px auto;
	}
	#content p.contact{
		margin-bottom:60px;
	}
	#content p.contact br{
		display: block;
	}
}

@media screen and (max-width:515px){
	#works{
		max-width: 330px;
		margin: 0 auto 20px auto;
	}
	#works li{
		width:148px;
		margin-left:10px;
		margin-right:10px;
	}
	#works li:nth-child(2n){
		margin-left:0px;
	}
	#works li img{
		width:100%;
	}
}