@charset "utf-8";
/* ==========================================================
 WORKS 施工事例
========================================================== */

#works {	
}

/* ==========================================================
 INDEXページ
========================================================== */

#works .wrapper.clearfix {

}
.works_head {
	clear: both;
	margin-bottom: 10px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #C27923;
	padding-bottom: 10px;
	position: relative;
}
.works_head2 {
	clear: both;
	margin-bottom: 10px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #7f8835;
	padding-bottom: 10px;
	position: relative;
}

.works_tab_title {
	float: left;
}
.works_tab_copy {
	float: right;
	text-align: right;
	position: absolute;
	bottom: 0px;
	margin-bottom: 0px;
	right: 0px;
}
#works_tab_link img {
	margin-left: 20px;
}
.works_index {
	text-align: left;
	padding-top: 10px;
	clear: both;
	margin-left: -15px;
}

.case  {
	width: 310px;
	margin-bottom: 20px;
	font-size: 80%;
	line-height: 1.5;
	margin-left: 15px;
	float: left;
}
.trim {
	overflow: hidden;
	width: 310px;/* トリミングしたい枠の幅 */
	height: 220px;/* トリミングしたい枠の高さ */
	position: relative;
	margin-bottom: 5px;
}

.works_index .trim img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
}



/* ==========================================================
 個別詳細ページ
========================================================== */

#works_info_title {
	list-style-type: disc;
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #BC7524;
	font-weight: bold;
	color: #666;
	padding-left: 5px;
	margin-bottom: 20px;
}
#works .wrapper {
	padding-top: 30px;
}

#works_info_box {
	margin-bottom: 50px;
}


#works_info_box_left {
	float: left;
	width: 275px;
	margin-right: 25px;
}

#works_info_box_right {
	float: right;
	width: 660px;
}
#case_info_box_right_l {
	float: left;
	width: 390px;
	margin-right: 15px;
}
#case_info_box_right_r {
	float: left;
	width: 255px;
}


@media screen and (min-width: 767px) {
	
#case_before {
	background-color: #C4F2BF;
	margin-bottom: 20px;
	padding-bottom: 5px;
}
#case_before h5 {
	font-weight: bold;
	color: #FFF;
	background-color: #056F00;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}

#case_voice_customer {
	width: 275px;
	margin-bottom: 20px;
	font-size: 90%;
	line-height: 1.5;
}

#case_voice_customer h5 {
	color: #056F00;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #056F00;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 110%;
}

#case_voice_houki {
	width: 275px;
	margin-bottom: 25px;
	font-size: 90%;
	line-height: 1.5;
}
#case_voice_houki h5 {
	color: #943E2C;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #943E2C;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 5px;
	font-size: 110%;
}
.case_voice_txt {
	height: 100px;
	width: 275px;
	overflow-y: auto;
}
.case_voice_txt_long {
	height: 220px;
	width: 275px;
	overflow-y: auto;
}

#case_img_before {
	width: 255px;/* トリミングしたい枠の幅 */
	height: 210px;/* トリミングしたい枠の高さ */
	overflow: hidden;
	position: relative;
	margin: 10px;
}
#case_img01 {
	width: 390px;/* トリミングしたい枠の幅 */
	height: 390px;/* トリミングしたい枠の高さ */
	overflow: hidden;
	position: relative;
	margin-bottom: 15px;
}



#case_img02 {
	width: 390px;
}

#case_img02 div {
	width: 120px;/* トリミングしたい枠の幅 */
	height: 120px;/* トリミングしたい枠の高さ */
	float: left;
	margin-right: 15px;
	overflow: hidden;
	position: relative;
}
#case_img02 div:last-child{
	margin-right: 0%;
}

#case_img03 {
	width: 255px;
}



#case_img03 div {
	width: 120px;
	float: left;
	height: 120px;
	overflow: hidden;
	position: relative;
	margin-bottom: 15px;
}
#case_img03 div:last-child{
	margin-right: 0%;
}

#case_img04 {
	width: 255px;
	height: 255px;
	overflow: hidden;
	position: relative;
}
#case_img05 {
	width: 255px;
	height: 255px;
	overflow: hidden;
	position: relative;
	margin-bottom: 15px;
}

.trim_info img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
}

}


#case_txt_after {
	background-color: #ECE8DD;
	margin-bottom: 10px;
}
#case_txt_after h5 {
	font-weight: bold;
	color: #FFF;
	background-color: #943E2C;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}

.case_txt_box {
	padding: 5px;
	font-size: 90%;
}
#works_beforecase a{
	color: #FFF;
	background-color: #7f8835;
	font-size: 90%;
	padding: 5px;
	border-radius: 10px;        /* CSS3草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	float: left;
	width: 46%;
	padding: 5px;
	margin-bottom: 15px;
}
#works_nextcase a {
	color: #FFF;
	background-color: #7f8835;
	font-size: 90%;
	padding: 5px;
	border-radius: 10px;        /* CSS3草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	float: right;
	width: 46%;
	padding: 5px;
	margin-bottom: 15px;
	text-align: right;
}

#works_beforecase a:hover,#works_nextcase a:hover {
	background-color: #a1ad43;
	text-decoration: none;
}



#works_info_linktoindex a {
	background-color: #BC7524;
	padding: 5px;
	border-radius: 10px;        /* CSS3草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	font-size: 90%;
	color: #FFF;
	background-color: #BC7524;
	display: block;
	clear: both;
	float: none;
}


#works_info_linktoindex a:hover {
	background-color: #D7872F;
	display: block;
	text-decoration: none;
}
a.anchor{
position: relative;
top: -60px;

display: block;
}

/* Edge */
@supports (-ms-ime-align: auto) {
	a.anchor {
top: -150px;
    }