@charset "UTF-8";
/*//////////////////////////////////////////////////////////////////////////////////////////////////////

	価格別で探す　cost.css

/////////////////////////////////////////////////////////////////////////////////////////////////////*/
#showcase_list {
	margin-bottom: 30px;
}

 /* ---------------------------------------------------------------------
  sectionのリスト共通部分
 ----------------------------------------------------------------------- */
ul.workList {
	width: 620px;
	margin: 0 auto 30px;
	padding: 25px 0px 0px 30px;
	background: #FCFAE3;
	border: 1px solid #fed;
	border-radius: 5px;
}
ul.workList > li {
	float: left;
	position:relative;
	width: 174px;
	margin:0 30px 30px 0;
	border:1px solid #f4f4f4;
	background-color:#FFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: #CCC 0px 1px 1px;
	-moz-box-shadow: #CCC 0px 1px 1px;
	box-shadow: #CCC 0px 1px 1px;
}
ul.workList > li:hover { border:1px solid #BBDA50; }

ul.workList li li {
	display: inline-block;
	float: none;
}
html*ul.workList li li {
	display: inline;
	zoom: 1;
}
ul.workList li a {
	text-decoration: none;
	*cursor: pointer; /* IE7 */
}

/* 価格アイコン部分
----------------------------------------------------------------------------------------------- */
ul.workList .icon_work {
	position: absolute;
	top:-10px;
	right:-2px;
	width:67px;
	height:55px;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-0.05em;
	font-size: 26px;
	font-weight:bold;
	line-height: 1.0;
	color:#fff;
	text-align:center;
	text-shadow: 1px 2px 4px #555;
	-moz-text-shadow: 1px 2px 4px #555;
	-webkit-text-shadow: 1px 2px 4px #555;
}
ul.workList .icon_work {
	height: 60px;
	padding-top: 10px;
	font-size: 30px;
	font-family: helvetica, arial, sans-serif;
	letter-spacing: monospace;
}

/* バッジの色
----------------------------------------------------------------------------------------------- */

ul.workList .seal_50un { background:url(../../../common/img/seal_cost_01.png) no-repeat; }/* 50万円まで */
ul.workList .seal_100un { background:url(../../../common/img/seal_cost_02.png) no-repeat; }/* 100万円まで*/
ul.workList .seal_150un { background:url(../../../common/img/seal_cost_03.png) no-repeat; }/* 150万円まで*/
ul.workList .seal_200un { background:url(../../../common/img/seal_cost_04.png) no-repeat; }/* 200万円まで*/
ul.workList .seal_250un { background:url(../../../common/img/seal_cost_05.png) no-repeat; }/* 250万円まで*/
ul.workList .seal_250up { background:url(../../../common/img/seal_cost_06.png) no-repeat; }/* 250万円以上*/


ul.workList .icon_work span {/*  単位テキスト　*/
	font-size: 10px !important;
	letter-spacing: 0 !important;
	display: block;
	text-align: center;
}

/* --- .workThumb　サムネイル部分 --- */
ul.workList .workThumb {
	padding:8px 8px 5px;
	height:120px;
	background:url(../../../common/img/initial-top.jpg) no-repeat center;
	*display: inline; /* IE7 */
	*margin-top: 8px; /* IE7 */
}
ul.workList .workThumb img {
	*display: block; /* IE7 */
	*width: 160px; /* IE7 */
	*margin: 8px auto 0; /* IE7 */
}
/* --- .workSummary　サマリー部分 --- */
ul.workList .workSummary {
	padding:0 8px 8px;
	font-size: 93%;
}

/* --- .workSummary ul　タグ部分 --- */
ul.workList .workSummary ul {
	position: relative;
	width: 165px;
	margin: 5px -5px -4px 0;
}
ul.workList .workSummary ul li {
	width:auto;
	background:none;
	margin:0 5px 4px 0 !important;
	line-height:1.8;
}
ul.workList .workSummary ul a {
	font-weight:bold;
	font-size: 75%;
	color:#fff !important;
	background:#a49d97;
	padding:3px 5px;
	display:block;
	position:relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

* html ul.workList .workSummary ul a { padding:0 5px; width:50%; }

ul.workList .workSummary ul li a:hover {
	color:#fff !important;
	background:#7e746b;
}
/* ====================================================
	2坪からのプチガーデンリフォームバナー
====================================================*/
.bnr_petite-garden-reform {
	text-align: center;
}


/* ====================================================
	rm9424 デザイン改修
====================================================*/
p#shocase-area {
	margin-bottom: 30px;
}
#shocase_head {
	margin-bottom: 50px;
}
.cost-wrap {
	font-family: 'YuGothic', 'Yu Gothic';
	font-weight: 700;
	position: relative;
	margin: 0 0 25px;
}
.cost-wrap img {
	vertical-align: bottom;
}
.cost-wrap_seal {
	font-family: helvetica, arial, sans-serif;
	font-size: 36px;
	font-weight: bold;
	line-height: 1;
	position: absolute;
	left: -10px;
	width: 82px;
	height: 67px;
	padding: 15px 0 0;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	background-color: #8dc31e;
	box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .2);
}
.cost-wrap_seal_span {
	font-family: 'YuGothic', 'Yu Gothic';
	font-size: 14px;
	line-height: 1;
	position: relative;
	display: block;
	text-align: center;
	letter-spacing: -.1ex;
}
#shocase_head .cost-wrap_ttl {
	font-size: 18px;
	display: inline-block;
	margin: 20px 0 18px 85px;
	color: #7ab500;
	border: none;
}
.cost-wrap_border-box {
	padding: 13px 13px 15px;
	border: solid 2px #ddd;
	border-radius: 4px;
	background-color: #fafafa;
}
.cost-wrap_border-box_img {
	float: left;
	margin-right: 10px;
}
.cost-wrap_border-box_img_right {
	margin-right: 0;
}
.cost-wrap_border-box_btn a {
	font-size: 18px;
	line-height: 46px;
	display: block;
	width: 292px;
	margin: 10px auto 0;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 6px;
	background-color: #8dc31e;
}
.cost-wrap_border-box_btn a:hover {
	color: #fff !important;
}
.cost-wrap_border-box_btn a:after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin: 0 0 3px 10px;
}

/* ---50万円まで--- */
.cost-50 .cost-wrap_seal {
	font-size: 40px;
	padding-top: 10px;
	height: 72px;
}

/* ---各カラー設定--- */

.cost-100 .cost-wrap_seal {
	background-color: #20aa38;
}
#shocase_head .cost-100 .cost-wrap_ttl {
	color: #20aa38;
}
.cost-100 .cost-wrap_border-box_btn a {
	background-color: #20aa38;
}

.cost-150 .cost-wrap_seal {
	background-color: #297300;
}
#shocase_head .cost-150 .cost-wrap_ttl {
	color: #297300;
}
.cost-150 .cost-wrap_border-box_btn a {
	background-color: #297300;
}

.cost-200 .cost-wrap_seal {
	background-color: #007520;
}
#shocase_head .cost-200 .cost-wrap_ttl {
	color: #007520;
}
.cost-200 .cost-wrap_border-box_btn a {
	background-color: #007520;
}

.cost-250 .cost-wrap_seal {
	background-color: #396200;
}
#shocase_head .cost-250 .cost-wrap_ttl {
	color: #396200;
}
.cost-250 .cost-wrap_border-box_btn a {
	background-color: #396200;
}

.cost-260 .cost-wrap_seal {
	background-color: #004516;
}
#shocase_head .cost-260 .cost-wrap_ttl {
	color: #004516;
}
.cost-260 .cost-wrap_border-box_btn a {
	background-color: #004516;
}