@charset "UTF-8";

/* ===================================================================
 05_articlecss
 　物件一覧・詳細
=================================================================== */

.article-list{
}



/* ===================================================================
 一覧・個別個別ページ共通
=================================================================== */
article-info{
}


/*------------------------------------------------------------
 一覧リスト
------------------------------------------------------------*/

/* 見出し */
.article-info h2{
	margin-bottom:20px;
	font-size:2.6rem;
	text-align:center;
	letter-spacing:0.2rem;
	position:relative;
}

.article-info h2 span{
	margin-right:10px;
}


/* 登録数：ヘッダ */
.article-info .count{
	margin-bottom:5px;
	font-size:1.5rem;
}
	
.article-info .count em {
    margin: auto 5px;
    font-size: 4.0rem;
    color: #d65317;
}

/* リストフッタ */
.article-info .list-footer{
    border-bottom:4px solid #595044;
}

/* 登録数：フッタ */
.article-info .list-footer em{
	font-size: 3.0rem;
}




/*------------------------------------------------------------
 共通テンプレート
------------------------------------------------------------*/
.article-info article{
	padding-bottom:20px;
	margin-bottom:60px;
	background:#ffffff;
	border-top:4px solid #595044;
	box-shadow:1px 1px 2px 0 rgba(99,51,25,0.2);
}


/* ヘッダ
----------------------------------------------- */
.article-info article header{
	margin-bottom:5px;
	background:none;
	z-index: 1;
	vertical-align:middle;
	position:relative;
}

.article-info article header:after{
	content: "";
	display:block;
	clear:both;
}

.article-info article header h4,
.article-info article header h3,
.article-info article header div{
	display:inline-block;
}


/* ----- 物件の種類 ----- */
.article-info article header h4{
	width:220px;
	padding:12px 0 12px 60px; 
	margin-right:10px;
	font-size:1.7rem;
	background:rgba(89,80,68,0.3);
	position:relative;
}

/* アイコン */
.article-info article header h4:before,
.article-info article header h4:after,
.search-cond dl.type li:before,
.search-cond dl.type li:after{
	content:"";
	position:absolute;
}

.article-info article header h4:before,
.search-cond dl.type li:before{
	width:40px;
	height:40px;
	background:#595044;
	border-radius:20px;
	top:50%; left:10px;
	margin-top:-20px;
}

.article-info article header h4:after,
.search-cond dl.type li:after{
	display:block;
	width:30px;
	height:30px;
	background-image:url(../img/article/ico_buy.png); 
	background-repeat:no-repeat;
	background-size:contain;
	top:50%; left:15px;
	margin-top:-15px;
}


/* ----- 物件管理番号 ----- */
.article-info article header h3{
	font-size:1.5rem;
	vertical-align:middle;
}

.article-info article header h3 em{
	margin-left:5px;
	font-size:2.4rem;
}


/* ----- エリア ----- */
.article-info article header .area{
	height:40px;
	padding:5px 20px 5px 10px;
	color:#ffffff;
	background:#595044;
	border-radius:2px 2px 0 0 ;
	position:absolute;
	top:-40px; right:0;
}

.article-info article header .area:after{
	content:"";
	width:0;
	height:0;
	border-style: solid;
	border-width: 0 0 40px 25px;
	border-color: transparent transparent #595044; 
	position:absolute;
	bottom:0; left:-24px;
}

.article-info article header .area em{
	margin-right:5px;
	font-size:1.8rem;
}



/* 所在地
----------------------------------------------- */
.article-info dl.location{
	margin-bottom:5px;
}

.article-info dl.location *{
	display:inline-block;
}

.article-info dl.location dt{
	padding:2px 10px;
	margin-right:5px;
	background:rgba(89,80,68,0.2);
	border-radius:2px;
}

.article-info dl.location dd{
	font-size:2.0rem;
}


/* 価格などリスト
----------------------------------------------- */
.article-info dl.infolist{
	margin-top:20px;
}

.article-info dl.infolist span{
	text-align:center;
	float:left;
}

/* 項目タイトル */
.article-info dl.infolist dt{
	padding:2px 30px;
	background:#dddddd;
}

/* データ */
.article-info dl.infolist dd{
	padding:0 15px;
    height:4.5rem;
	line-height:4.5rem;
	font-size:1.7rem;
	position:relative;
}

.article-info dl.infolist dd:after{
    content:"";
	display:block;
	width:2px;
	height:16px;
	background:#dddddd;
	position:absolute;
	top:50%; right:-2px;
	margin-top:-8px;
}

.article-info dl.infolist span:nth-last-child(1) dd:after{
    content:none;
}

/* 価格 */
.article-info dl.infolist .price dd{
    font-size: 1.4rem;
}

.article-info dl.infolist .price dd em{
    font-size: 2.5rem;
    line-height: 3.0rem;
    color: #d65317;
}


/* 物件画像
----------------------------------------------- */
.article-info figure.postimg{
	display:block;
	width:220px;
	height:170px;
	border:5px solid #eeeeee;
	background:#E1E1E1;
	-webkit-transition:opacity 0.2s;
			transition:opacity 0.2s;
	float:left;
	position:relative;
}

.article-info figure.postimg img{
	display:block;
	max-width:210px;
	max-height:160px;
	position: absolute;
	top:0; bottom:0;
	left:0; right:0;
	margin: auto;
}

.article-info a:hover figure.postimg{
	opacity:0.8;
}


/* no data
----------------------------------------------- */
.article-info .nodata{
	display:inline-block;
	width:35px;
	height:2px;
	background:#939393;
	margin-bottom:5px;
}


/* 一覧に戻るボタン
----------------------------------------------- */
.article-info a.back-to-list:before{
	-webkit-transform:rotate(-135deg);
			transform:rotate(-135deg);
}


/* ログアウト時：非表示
----------------------------------------------- */
.article-info .hide{
	padding:20px;
	text-align:center;
	font-size:1.8rem;
	border-bottom: 4px solid #595044;
}







/* ===================================================================
 一覧ページ内：各物件
=================================================================== */

/*------------------------------------------------------------
 メイン要素
------------------------------------------------------------*/
.article-list article section{
	padding:10px 30px;
}

.article-list .detail{
	float:right;
	display:block;
	width:calc(100% - 240px);
}

/* 物件紹介文 */
.article-list .detail .about{
	margin-bottom:10px;
	line-height:1.5em;
}


/*------------------------------------------------------------
 フッタ
------------------------------------------------------------*/
.article-list article footer{
	margin:10px 30px 0;
	color:#333333;
	background:rgba(89,80,68,0.2);
	border-radius:2px;
	box-shadow:none;
}

.article-list article footer:after{
	content:none;
}

.article-list article footer a.btn{
	margin:0 auto 10px;
	border:2px solid #595044
}

/* 登録・更新日 */
.article-list article footer dl{
	font-size:1.3rem;
	text-align:center;
}

.article-list article footer dl *{
	display:inline-block;
}

.article-list article footer dt{
	font-weight:normal;
}

.article-list article footer dd{
	margin-right:10px;
	font-weight:bold;
	font-size:1.4rem;
}





/* ===================================================================
 詳細ページ
=================================================================== */
.article-detail{
}

.article-detail article{
	border-bottom:4px solid #595044;
	position:relative;
}

.article-detail article:before{ 
  content:"";
  display:block;
  width:120px;
  height:100px;
  background-image:url(../img/article/ill_house.png); 
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  top:-80px; right:140px;
}

.article-detail article section{
	padding:20px 40px 30px 40px;
}

.maindata{
	padding-left:370px;
	margin-bottom:10px;
}


/* 所在地
----------------------------------------------- */
.article-detail dl.location{
	padding-bottom:5px;
	border-bottom:2px solid #DCDCDC;
}


.article-detail dl.location dt{
	padding:2px 10px;
	margin-right:5px;
	background:rgba(89,80,68,0.2);
	border-radius:2px;
}

.article-detail dl.location dd{
	font-size:2.5rem;
}


/* メイン画像
----------------------------------------------- */
.article-detail figure.mainimg{
	width:350px;
	height:300px;
}

.article-detail figure.mainimg img{
	max-width:340px;
	max-height:290px;
}


/* 画像一覧
----------------------------------------------- */
.article-detail figure.postimg{
	margin:0 10px 10px 0;
	position:relative;
}

.article-detail figure.postimg:after{
  content:"";
  display:block;
  width:25px;
  height:25px;
  background-image:url(../img/article/ico_zoom.png); 
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:5px; right:5px;
}

.article-detail figure.mainimg:after{
  content:none;
}



/*------------------------------------------------------------
 物件詳細データ
------------------------------------------------------------*/
.article-detail .detaildata{
	margin:20px 0;
}

.article-detail .detaildata h4{
	padding:5px;
	margin-bottom:10px;
	text-align:center;
	font-size:2.0rem;
	color:#595044;
	border-bottom:4px solid #595044;
}

.article-detail .detaildata dl span{
	display:block;
	min-width:calc(50% - 10px);
	max-width:100%;
	margin:0 5px;
	padding:6px 0;
	border-top:2px dotted #EDEDED;
	float:left;
	overflow:hidden;
}

.article-detail .detaildata dl span:nth-child(-n+2){
	border-top:none;
}

.article-detail .detaildata dl span dt,
.article-detail .detaildata dl span dd{
	float:left;
	vertical-align:middle;
}

/* タイトル */
.article-detail .detaildata dl span dt{
	min-width:130px;
	height:26px;
	padding:2px 10px;
	margin-right:15px;
	background:#e2e2e2;
	border-radius:2px 0 0 2px;
	position:relative;
}

.article-detail .detaildata dl span dt:after{
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 5px;
	border-color: transparent transparent transparent #e2e2e2;
	position:absolute;
	top:0; right:-5px;
}

.article-detail .detaildata dl span dd{
	margin-top:2px;
}

/* データ無し */
.article-detail .detaildata dl .nodata{
	margin:0;
}


/*------------------------------------------------------------
 google-map
------------------------------------------------------------*/
#map-area {
	width:100%;
	height:500px;
}






/* ===================================================================
　検索結果一覧
=================================================================== */

/* 検索条件
----------------------------------------------- */
.search-cond{
	margin-bottom:30px;
	background:#efede8;
	border:4px solid #efede8;
	border-radius:2px;
	position:relative;
}

/* 検索条件タイトル */
.search-cond h3{
	padding:2px 10px 2px 38px;
	font-size:1.8rem;
	color:#ffffff;
	background:#595044;
	border-radius:2px;
	letter-spacing:0.2rem;
	position:relative;
}

.search-cond h3:before{
	content:"";
	display:block;
	width:20px;
	height:20px;
	background-image:url(../img/common/ico_search.png); 
	background-repeat:no-repeat;
	background-size:contain;
	position:absolute;
	top:50%; left:10px;
	margin-top:-10px;
}


/* 各項目定義リスト */
.search-cond dl{
	margin:15px;
}

.search-cond dl *{
	display:inline-block;
}


/* 項目タイトル */
.search-cond dl dt{
	width:8em;
	padding-right:15px;
	margin-right:10px;
	text-align:right;
	position:relative;
}

.search-cond dl dt:after{
	content:"";
	width: 6px;
	height: 6px;
	border-top:3px solid #419baa;
	border-right:3px solid #419baa;
	-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
	position:absolute;
	top:50%; right:0;
	margin-top:-4px;
}


/* 項目内容 */
.search-cond dl dd{
	font-size:1.5rem;
}

.search-cond dl dd li{
	padding:5px 10px;
	margin-right:10px;
	border-radius:5px;
	background-color:rgba(206,191,178,0.25);
	position:relative;
}


/* 物件の種類 */
.search-cond dl.type li{
	padding:5px 15px 5px 40px;
}

.search-cond dl.type li:before{
	width:28px;
	height:28px;
	border-radius:14px;
	margin-top:-14px;
}

.search-cond dl.type li:after{
	width:20px;
	height:20px;
	left:14px;
	margin-top:-10px;
}





/* ===================================================================
 業者様向けお知らせ
=================================================================== */
.trader_info{
}

.trader_info article h3{
	padding:0 10px;
}


/* 業者向けメッセージ */
.trader_info .message{
	padding:0 10px;
	margin: 10px auto 20px;
	font-size:1.6rem;
	border-left:4px solid #595044;
}

.trader_info .detail .date{
	margin-bottom:10px;
	border-bottom:2px solid #CDCDCD;
}

/* 物件詳細 */
.trader_info .detail .about{
	margin-top:10px;
}

/* 応募期限 */
.trader_info footer dl{
	padding-bottom:5px;
	font-weight:bold;
	vertical-align:middle;
	border-bottom:2px solid #595044;
}

.trader_info footer dl dt{
	vertical-align:middle;
}

.trader_info footer dl dd{
	color:#cf4f16;
	font-size:2.0rem;
	vertical-align:middle;
}

.trader_info footer dl dd .week{
	margin-left:3px;
	font-size:1.7rem;
}


/* コメント投稿フォーム
----------------------------------------------- */
/* 投稿について */
.trader_info footer .post-note{
	margin:10px auto;
	text-align:center
}

.trader_info footer .post-note small{
	margin:3px;
	color:#cf4f16;
}

/* 入力欄 */
.trader_info footer .comment-form-comment label{
	display:none;
}

.trader_info footer .comment-form-comment input#comment{
	width:95%;
}

/* コメント投稿ボタン */
.trader_info footer p.form-submit{
	text-align:center;
}

.trader_info footer input[type="submit"]{
	background:#595044;
	border-color:#595044;
}

.trader_info footer input[type="submit"]:hover{
	color:#595044;
	background:rgba(255,255,255,0.8);
}


/* コメントリスト
----------------------------------------------- */
.trader_info ul.commentlist{
	padding:0 60px;
}

.trader_info ul.commentlist li.depth-1{
	margin-top:20px;
	padding:10px 20px;
	border-left:5px solid #595044;
	background:#f4f4f4;
	border-radius:0 2px 2px 0;

}

/* 返信 */
.trader_info ul.commentlist li.depth-2{
	margin:10px 0 10px 40px;
	padding:10px 20px;
	background:#f4f4f4;
	border-radius:5px;
}


/* コメント詳細
----------------------------------------------- */
/* 投稿日時 */
.trader_info .cmnt-info date{
	margin-left:10px;
	color:#939393;
}

.trader_info .cmnt-info date .c-date{
	margin-right:10px;
}

/* 投稿者名 */
.trader_info .cmnt-info h4{
	display:inline-block;
	font-size:1.9rem;
}

/* コメント本文 */
.trader_info .cmnt-text{
	margin-left:10px;
	font-size:1.3rem;
}




/* ===================================================================
 カラーリング変更
=================================================================== */

/* 【空き家】売買：赤
----------------------------------------------- */
.article-info .sale_house,
.article-detail .sale_house,
.article-detail .sale_house .detaildata h4,
.article-info .sale_house footer a.btn:hover:before,
.article-info .sale_house footer a.btn,
.trader_info .sale_house .message,
.trader_info .sale_house ul.commentlist li.depth-1{
	border-color:#d65f47;
}

.trader_info .sale_house .cmnt-info{
	border-color:rgba(224,118,90,0.5);
}

.article-info .sale_house header .area:after{
	border-color: transparent transparent #d65f47; 
}

.article-detail .sale_house .detaildata dl span dt:after{
	border-color: transparent transparent transparent rgba(224,118,90,0.3);
}

.article-info .sale_house header h4,
.article-info .sale_house footer a.btn:hover,
.article-detail .sale_house .detaildata h4,
.article-info h2 .h2sale{
	color:#d65f47;
}

.article-info .sale_house header h4:before,
.search-cond dl.type .li_sh:before,
.article-info .sale_house header .area,
.article-info .sale_house footer a.btn{
	background:#d65f47;
}

.article-info .sale_house dl.location dt,
.article-info .sale_house footer,
.search-cond .li_sh{
	background:rgba(224,118,90,0.2);
}

.article-info .sale_house header h4,
.article-info .sale_house dl.infolist dt,
.article-detail .sale_house .detaildata dl span dt{
	background:rgba(224,118,90,0.3);
}

.article-info .sale_house footer a.btn:hover{
	background:rgba(255,255,255,0.8);
}

.article-info .sale_house header h4:after,
.search-cond dl.type .li_sh:after{
	background-image:url(../img/article/ico_buy.png); 
}



/* 【空き家】賃貸：黄
----------------------------------------------- */
.article-info .rent_house,
.article-detail .rent_house,
.article-detail .rent_house .detaildata h4,
.article-info .rent_house footer a.btn:hover:before,
.article-info .rent_house footer a.btn,
.trader_info .rent_house .message,
.trader_info .rent_house ul.commentlist li.depth-1{
	border-color:#d37e18;
}

.trader_info .rent_house .cmnt-info{
	border-color:rgba(216,154,57,0.5);
}

.article-info .rent_house header .area:after{
	border-color: transparent transparent #d37e18; 
}

.article-detail .rent_house .detaildata dl span dt:after{
	border-color: transparent transparent transparent rgba(216,154,57,0.3);
}

.article-info .rent_house header h4,
.article-info .rent_house footer a.btn:hover,
.article-detail .rent_house .detaildata h4,
.article-info h2 .h2rent{
	color:#d37e18;
}

.article-info .rent_house header h4:before,
.search-cond dl.type .li_rh:before,
.article-info .rent_house header .area,
.article-info .rent_house footer a.btn{
	background:#d37e18;
}

.article-info .rent_house dl.location dt,
.article-info .rent_house footer,
.search-cond .li_rh{
	background:rgba(216,154,57,0.2);
}

.article-info .rent_house header h4,
.article-info .rent_house dl.infolist dt,
.article-detail .rent_house .detaildata dl span dt{
	background:rgba(216,154,57,0.3);
}

.article-info .rent_house footer a.btn:hover{
	background:rgba(255,255,255,0.8);
}

.article-info .rent_house header h4:after,
.search-cond dl.type .li_rh:after{
	background-image:url(../img/article/ico_rent.png); 
}



/* 【空き店舗】賃貸：青
----------------------------------------------- */
.article-info .rent_shop,
.article-detail .rent_shop,
.article-detail .rent_shop .detaildata h4,
.article-info .rent_shop footer a.btn:hover:before,
.article-info .rent_shop footer a.btn,
.trader_info .rent_shop .message,
.trader_info .rent_shop ul.commentlist li.depth-1{
	border-color:#419baa;
}

.trader_info .rent_shop .cmnt-info{
	border-color:rgba(65,155,170,0.5);
}

.article-info .rent_shop header .area:after{
	border-color: transparent transparent #419baa; 
}

.article-detail .rent_shop .detaildata dl span dt:after{
	border-color: transparent transparent transparent rgba(65,155,170,0.3);
}

.article-info .rent_shop header h4,
.article-info .rent_shop footer a.btn:hover,
.article-detail .rent_shop .detaildata h4,
.article-info h2 .h2shop{
	color:#419baa;
}

.article-info .rent_shop header h4:before,
.search-cond dl.type .li_rs:before,
.article-info .rent_shop header .area,
.article-info .rent_shop footer a.btn{
	background:#419baa;
}

.article-info .rent_shop dl.location dt,
.article-info .rent_shop footer,
.search-cond .li_rs{
	background:rgba(65,155,170,0.2);
}

.article-info .rent_shop header h4,
.article-info .rent_shop dl.infolist dt,
.article-detail .rent_shop .detaildata dl span dt{
	background:rgba(65,155,170,0.3);
}

.article-info .rent_shop footer a.btn:hover{
	background:rgba(255,255,255,0.8);
}

.article-info .rent_shop header h4:after,
.search-cond dl.type .li_rs:after{
	background-image:url(../img/article/ico_shop.png); 
}









/*------------------------------------------------------------
 XXX
------------------------------------------------------------*/

/* 
----------------------------------------------- */