@charset "UTF-8";

/*/////////////////////////////
 common parts
 /////////////////////////////*/

/* position
 * ------------------------- */
/* float */
.left {
	float: left;
}
.right {
	float: right;
}

/* align */
.al_center {
	text-align: center;
}
.al_left {
	text-align: left;
}
.al_right {
	text-align: right;
}

/* text indent */
.text_indent {
	text-indent:-15px;
	padding:0 0 0 15px;
	margin: 0 0 5px;
}
.text_indent span{
	display: inline-block;
	width:15px;
	text-indent:0px;
	padding:0;
}


/*/////////////////////////////
 radius
 /////////////////////////////*/

/* radius
 * ------------------------- */
.radius {
	position: relative;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/*/////////////////////////////
 shadow
 /////////////////////////////*/

/* shadow
 * ------------------------- */
.shadow_black01 {
	box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 4px 4px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 4px 4px;
	-moz-box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 4px 4px;
}
.shadow_black02 {
	box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 2px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 2px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 2px 2px;
}

/*/////////////////////////////
 mark,icon
 /////////////////////////////*/

/* before */
.mark_before:before {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 5px;
	content: "";
	background: url() no-repeat left center;
}

/*/////////////////////////////
 title
 /////////////////////////////*/

/* pagetitle
 * ------------------------- */
.page_head {
	background: #f1ecec;
}
.pagetitle {
	padding: 6px;
	font-size: 32px;
	font-weight: normal;
	margin-bottom: 30px;
	line-height: 1em;
}
.pagetitle span{
	font-size:20px;
	margin:0 0 0 15px;
}

/* title_text
 * ------------------------- */
/* title_normal */
.title_normal {
	font-size: 25px;
	line-height: 1em;
	font-weight: normal;
	margin: 0 0 15px;
}
/* title_border
 * ------------------------- */
.title_border_black {
	padding: 0 0 5px;
	border-bottom: 1px solid #b0a8a8;
	font-size: 19px;
	font-weight: normal;
}

/* Tab
 * -----------------------------*/
@media screen and (max-width: 768px) {
	.pagetitle {
		padding: 6px 1.6%;;
	}
}
/* SP
 * -----------------------------*/
@media screen and (max-width: 640px) {
	.pagetitle {
		padding: 6px 5%;;
	}
}

/*/////////////////////////////
 list_img
 /////////////////////////////*/
.list_img {
	/*margin-bottom:30px;*/
	padding: 0 0 30px;
}
/* ul,li
 * ------------------------- */
.list_img ul {
	margin: 0 -15px 0 0;
}
.list_img ul li {
	position:relative;
	float: left;
	display:inline-block;
	border: 1px solid #fff;
	margin: 0 15px 15px 0;
	width:178px;
}
.list_img ul li img{
	max-width:178px;
}
/* Tab
 * -----------------------------*/
@media screen and (max-width: 768px) {
	.list_img ul {
		margin: 0 -1.6% 0 0;
	}
	.list_img ul li {
		width: 23%;
		margin: 0 1.6% 15px 0;
	}
	.list_img ul li img {
		width: 100%;
		max-width:100%;
	}
}
/* SP
 * -----------------------------*/
@media screen and (max-width: 640px) {
	.list_img ul {
		margin: 0 -5% 0 0;
	}
	.list_img ul li {
		width: 46%;
		margin: 0 3% 15px 0;
	}
	.list_img ul li img {
		width: 100%;
		max-width:100%;
	}
}

/*/////////////////////////////
 bg_hoverimg hover時の処理
 /////////////////////////////*/
.bg_hoverimg{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	width:100%;
	height:100%;
	/*background:url(../img/common/img_bg.png) repeat left top;*/
    background-color: rgba(0,0,0,0.8);
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#cc000000,EndColorStr=#cc000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#cc000000,EndColorStr=#cc000000)";
	color:#fff;
	overflow:auto;
}
.bg_hoverimg:not(:target){
    filter: none;
    -ms-filter: none;
}
.bg_hoverimg .inner{
	padding:5px 5px 5px 5px;
	font-size:11px;
}
.bg_hoverimg .inner a:hover{
	text-decoration:underline;
}
/* Tab,SP
 * -----------------------------*/
@media screen and (max-width: 768px) {
	.bg_hoverimg{
		display:none;
		opacity:1.0
	}
}
/*/////////////////////////////
 list_projects
 /////////////////////////////*/
.list_projects {
	margin: 0 0 100px;
}
/* ul,li
 * -----------------------------*/
.list_projects ul {
	margin: 0 -30px 0 0;
}
.list_projects ul li {
	float: left;
	width: 300px;
	margin: 0 30px 40px 0;
}
/* img
 * -----------------------------*/
.list_projects ul li .img {
	border: 1px solid #fff;
	margin: 0 0 15px;
}
/* block
 * -----------------------------*/
/* head */
.list_projects ul li .block_head {
	margin: 0 0 20px;
}
.list_projects ul li .block_head .title {
	line-height: 1.2em;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px;
}
.list_projects ul li .block_head .title .lead {
	display:block;
	font-size: 14px;
	font-weight: normal;
}
.list_projects ul li .block_head .data {
	margin: 0 0 2px;
}
.list_projects ul li .block_head .url {
	color: #890720;
}
/* body */
.list_projects ul li .block_body .text {
	margin: 0 0 20px;
}
/* Tab
 * -----------------------------*/
@media screen and (max-width: 768px) {
	.list_projects {
		margin: 0 0 30px;
	}
	/* ul,li
	 * -----------------------------*/
	.list_projects ul {
		margin: 0 0 0 0;
	}
	.list_projects ul li {
		width: 38%;
		display: inline-block;
		vertical-align: top;
		text-align: left;
		margin: 0 6% 40px;
	}
}/* SP
 * -----------------------------*/
@media screen and (max-width: 640px) {
	.list_projects {
		margin: 0 0 0;
	}
	/* ul,li
	 * -----------------------------*/
	.list_projects ul {
		margin: 0 0 0 0;
	}
	.list_projects ul li {
		float: none;
		width: 100%;
		margin: 0 0 40px 0;
	}
	.list_projects ul li .img{
		display:inline-block;
	}
}