@charset "utf-8";


/**************************************************50
 * works_list
 **************************************************/
#works_list{
	text-align: left;
}
#works_list > li{
	display: inline-block;
	vertical-align: top;
}
#works_list > li picture{
	margin-bottom: 0.5em;
}
#works_list > li picture img{
	width: 100%;
}
#works_list > li [class^="works_category_"]{
	background-color: #9E9E9E;
	border-radius: 5px;
	color: #FFFFFF;
	display: inline-block;
	font-size: 87.5%;
	line-height: 1.25;
	margin: 0.25em 0;
	padding: 0.25em 1em;
	vertical-align: top;
}
#works_list > li .works_category_corporation{
	background-color: #3780C0;
}
#works_list > li .works_category_rec{
	background-color: #3780C0;
}
#works_list > li .works_category_education{
	background-color: #8CC63F;
}
#works_list > li .works_category_housing{
	background-color: #F7931E;
}
#works_list > li .works_category_restaurant{
	background-color: #C69C6D;
}
#works_list > li .works_category_painting{
	background-color: #F7931E;
}
#works_list > li .works_category_sports{
	background-color: #30A9D6;
}
#works_list > li .works_category_relaxation{
	background-color: #5ABBDE;
}
#works_list > li .works_category_apparel{
	background-color: #BF9E73;
}
#works_list > li .works_category_medical{
	background-color: #97C354;
}
#works_list > li .works_category_other{
	background-color: #9E9E9E;
}
#works_list > li p{
	line-height: 1.2;
	padding: 0.3em 0;
}
#works_list > li a[target="_blank"]{
	color: #4D4D4D;
	text-decoration: none;
}
#works_list > li a[target="_blank"]:after{
	content: "\F03CC";
	font-family: "Material Design Icons";
}
#works_list > li a[target="_blank"] span{
	position: relative;
}
#works_list > li a[target="_blank"]:hover span{
	text-decoration: underline;
}
@media screen and (max-width:359px){
	#works_list > li{
		border-top: 1px solid #4D4D4D;
		padding: 6.25% 3.125% 0;
		width: 93.75%;
	}
}
@media screen and (min-width:360px) and (max-width:413px){
	#works_list > li{
		font-size: 75%;
	}
}
@media screen and (min-width:414px) and (max-width:479px){
	#works_list > li{
		font-size: 81.25%;
	}
}
@media screen and (min-width:480px) and (max-width:639px){
	#works_list > li{
		font-size: 87.5%;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#works_list > li{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (max-width:767px){
	#works_list{
		margin-top: -6.25%;
		margin-bottom: 6.25%;
	}
	#works_list > li{
		margin-top: 6.25%;
		margin-left: 3.125%;
	}
}
@media screen and (min-width:768px){
	#works_list{
		margin-top: -30px;
		margin-bottom: 50px;
	}
	#works_list > li{
		margin-top: 30px;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#works_list > li{
		margin-left: 2%;
		width: 47%;
	}
}
@media screen and (min-width:1024px){
	#works_list > li{
		margin-left: 1.375%;
		width: 31.5%;
	}
}


