@charset "utf-8";
/* ===================================================================

 file name  :property-detail.css
 style info :物件情報-詳細

=================================================================== */

/* =============================

	overwrite

=============================== */



/* ============================== */
#main article{
}
#main article header{
	background:#e5e5e5;
	margin-bottom:30px;
	position:relative;
	zoom:1;
	min-height:56px;
}
#main article header h1{
	font-size:200%;
	padding:12px 325px 12px 16px;
	line-height:1.3;
}
#main article header ul{
	position:absolute;
	top:8px;
	right:8px;
}
#main article header ul li{
	width:150px;
	height:40px;
	float:left;
	margin:0 0 0 10px;
}
#main article header ul li a{
	color:#FFF;
	height:37px;
	padding-top:3px;
	display:block;
	text-decoration:none;
	text-align:center;
	line-height:1.2;
	background: rgb(77,194,190); /* Old browsers */
	background: -moz-linear-gradient(top,  rgb(77,194,190) 0%, rgb(60,173,170) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(77,194,190)), color-stop(100%,rgb(60,173,170))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgb(77,194,190) 0%,rgb(60,173,170) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgb(77,194,190) 0%,rgb(60,173,170) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgb(77,194,190) 0%,rgb(60,173,170) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgb(77,194,190) 0%,rgb(60,173,170) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dc2be', endColorstr='#3cadaa',GradientType=0 ); /* IE6-9 */
}
#main article header ul li.tellink a{
	font-size:20px;
	cursor:default;
}
#main article header ul li.tellink a span{
	font-size:10px;
	display:block;
	text-indent:-1.5em;
}
#main article header ul li.contactlink a{
	font-size:13px;
	height:28px;
	padding-top:12px;
}
#main article header ul li.contactlink a:hover{
	background: #019792;
}


/*lead*/
#main article section.lead{
	padding-bottom:40px;
}

/*point*/
#main article section.lead .point{
	width:298px;
	float:left;
	position:relative;
	zoom:1;
	border:1px solid #d1d1d1;
	font-size:109%;
	min-height:488px;
}
#main article section.lead .point .comment{
	position:relative;
	zoom:1;
	padding:30px 18px 152px 18px;
}
#main article section.lead .point .comment h2{
	width:100px;
	position:absolute;
	top:-12px;
	left:10px;
}
#main article section.lead .point .comment h2 img{
	width:100%;
	height:auto;
}
#main article section.lead .point .comment p{
	line-height:1.6;
}
#main article section.lead .point dl{
	position:absolute;
	width:100%;
	left:0;
	bottom:0;
	zoom:1;
	background:#f7f7f7;
}
#main article section.lead .point dl dt{
	position:absolute;
	left:12px;
	width:70px;
	padding:11px 0;
}
#main article section.lead .point dl dd{
	border-top:1px solid #d1d1d1;
	padding:0 0 0 85px;
}
#main article section.lead .point dl dd span{
	display:block;
	background:#FFF;
	padding:10px 12px;
}

/*gallery*/
#main article section.lead .gallery{
	width:670px;
	float:right;
	position:relative;
	zoom:1;
}
#main article section.lead .gallery .loader{
	position:absolute;
	top:10px;
	right:10px;
}
#main article section.lead .gallery p.no-image{
	visibility:hidden;
}
#main article section.lead .gallery ul.photos{
	position:relative;
	zoom:1;
	width:668px;
	border:1px solid #b0b0b0;
	margin-bottom:8px;
}
.Pc #main article section.lead .gallery ul.photos{
	height:406px !important;
}
#main article section.lead .gallery ul.photos li{
	background:#FFF;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
	width:668px;
	height:406px;
	visibility:hidden;
}
#main article section.lead .gallery ul.photos li img{
	max-height:406px;
	max-width:668px;
	width:auto;
	height:auto;
}
#main article section.lead .gallery ul.photos li span.caption{
	width:97%;
	padding:0.2em 1% 0.2em 2%; 
	display:block;
	color:#FFF;
	font-size:13px;
	position:absolute;
	left:0;
	bottom:0;
	text-align:left;
	z-index:1;
}
#main article section.lead .gallery ul.photos li span.overlay{
	background:#000;
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
	padding:0.2em 0; 
	z-index:-1;
}
#main article section.lead .gallery div.controler{
	position:relative;
	zoom:1;
	visibility:hidden;
}
#main article section.lead .gallery div.controler div.thumb-wrap{
	width:628px;
	height:74px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#main article section.lead .gallery div.controler div.thumb-wrap .current{
	border:3px solid #4dc2be;
	width:114px;
	height:68px;
	position:absolute;
	top:0;
	left:0;
}
#main article section.lead .gallery div.controler div.thumb-wrap ul.thumbs{
}
#main article section.lead .gallery div.controler div.thumb-wrap ul.thumbs li{
	border:1px solid #b0b0b0;
	position:absolute;
	left:0;
	top:0;
	cursor:pointer;
	overflow:hidden;
	width:118px;
	height:72px;
}
#main article section.lead .gallery div.controler div.thumb-wrap ul.thumbs li img{
	min-width:118px;
	min-height:72px;
	width:auto;
	height:auto;
	max-width:100%;
}

#main article section.lead .gallery div.controler ul li.prev{
	background:url(../images/property/detail/img_ui.png) no-repeat 0 0;
	width:15px;
	height:74px;
	overflow:hidden;
	text-indent:-9999px;
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
	display:none;
}
#main article section.lead .gallery div.controler ul li.next{
	background:url(../images/property/detail/img_ui.png) no-repeat -15px 0;
	width:15px;
	height:74px;
	overflow:hidden;
	text-indent:-9999px;
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	display:none;
}
#main article section.lead .gallery div.controler ul li.prev.hover{	background:url(../images/property/detail/img_ui.png) no-repeat 0 -74px;}
#main article section.lead .gallery div.controler ul li.next.hover{	background:url(../images/property/detail/img_ui.png) no-repeat -15px -74px;}

#main article section.lead .gallery div.controler.no-pc .prev,
#main article section.lead .gallery div.controler.no-pc .next{
	display:none !important;
}



/*outline*/
#main article section.outline{
	width: 100%;
	float:left;
}
#main article section.outline h2{
	border-left:5px solid #cd1b1b;
	padding:1px 0 1px 10px;
	margin-bottom:10px;
}
#main article section.outline h2 img{
	width:80px;
	height:auto;
}
#main article section.outline dl{
	border:1px solid #d1d1d1;
	position:relative;
	zoom:0;
	min-height:235px;
	padding:15px;
	font-size:109%;
}

#main article section.outline dl dt{
	position:absolute;
	left:22px;
	width:106px;
	color:#9f9c9b;
	padding:0.3em 0;
}
#main article section.outline dl dd{
	padding:0.3em 0 0.3em 136px;
}

#main article section.outline div.outline{
    display: flex;
    width: 100%;
}
.left_outline, .right_outline{
    width: 50%;
}
.right_outline{
    border-left: 0px !important;
}


/*map*/
#main article section.map{
	width:480px;
	float:right;
}
#main article section.map h2{
	border-left:5px solid #cd1b1b;
	padding:1px 0 1px 10px;
	margin-bottom:10px;
	position:relative;
}
#main article section.map h2 img{
	width:80px;
	height:auto;
}
#main article section.map h2 span{
	position:absolute;
	top:50%;
	margin-top:-0.5em;
	left:110px;
	display:block;
}
#main article section.map #gmap{
	border:1px solid #d1d1d1;
	height:318px;
	width:478px;
}

#main div.freeedit{
	padding:3em 0 0 0;
	font-size:109%;
}
#main div.freeedit p{
	margin-bottom:1em;
}


#main p.captiontext{
	padding:1.5em 0 0 0;
	font-size:84%;
}

#main p.return{
	overflow:hidden;
	height:auto;
	padding-top:60px;
}
#main p.return a{
	float:right;
	width:100px;
	border:1px solid #2a2726;
	background:#2a2726;
	padding:0.1em 0;
	display:block;
	text-decoration:none;
	color:#FFF;
	text-align:center;
}
#main p.return a:hover{
	background:#FFF;
	color:#2a2726;
}


/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){

	#main article header{
		background:none;
		margin-bottom:37px;
		min-height:auto;
	}
	#main article header h1{
		background:#e5e5e5;
		padding:0.9em 10px;
		margin-bottom:10px;
		font-weight:normal;
		font-size:134%;
	}
	#main article header ul{
		position:static;
	}
	#main article header ul li{
		width:48.3333%;
		height:auto;
		float:left;
		margin:0;
	}
	
	#main article header ul li a{
		height:35px;
		padding-top:4px;
	}
	#main article header ul li.tellink a{
		font-size:18px;
		cursor:pointer;
	}
	#main article header ul li.tellink a span{
		font-size:10px;
		text-indent:-2em;
	}
	#main article header ul li.contactlink{
		float:right;
	}
	#main article header ul li.contactlink a{
		font-size:12px;
		height:28px;
		padding-top:13px;
	}
	#main article header ul li.contactlink a:hover{
		background: -moz-linear-gradient(top,  rgb(77,194,190) 0%, rgb(60,173,170) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(77,194,190)), color-stop(100%,rgb(60,173,170))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgb(77,194,190) 0%,rgb(60,173,170) 100%); /* Chrome10+,Safari5.1+ */
		background: linear-gradient(to bottom,  rgb(77,194,190) 0%,rgb(60,173,170) 100%); /* W3C */
	}

	/*lead*/
	#main article section.lead{
		padding:0;
	}

	/*point*/
	#main article section.lead .point{
		width:100%;
		float:none;
		font-size:84%;
		min-height:100%;
		margin-bottom:30px;
	}
	#main article section.lead .point .comment{
		padding:26px 15px !important;
	}
	#main article section.lead .point.no-comment{
		border-top:none;
	}
	#main article section.lead .point.no-comment .comment{
		display:none;
	}
	#main article section.lead .point .comment p{
		line-height:1.4;
	}
	#main article section.lead .point dl{
		position:static;
	}
	#main article section.lead .point dl dt{
		position:absolute;
		left:14px;
		width:50px;
	}
	#main article section.lead .point dl dd{
		padding:0 0 0 70px;
	}

	/*gallery*/
	#main article section.lead .gallery{
		width:100%;
		float:none;
		margin-bottom:30px;
	}
	#main article section.lead .gallery p.loader img{
		width:60px;
		height:8px;
	}
	#main article section.lead .gallery p.no-image img{
		width:100%;
		height:auto;
	}
	#main article section.lead .gallery ul.photos{
		width:100%;
		height:auto;
		margin-bottom:7px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#main article section.lead .gallery ul.photos li{
		width:100%;
		height:auto;
		overflow:hidden;
	}
	#main article section.lead .gallery ul.photos li img{
		max-height:auto;
		max-width:100%;
		width:auto;
		height:100%;
	}
	#main article section.lead .gallery ul.photos li span.caption{
		width:97%;
		font-size:10px;
	}
	#main article section.lead .gallery ul.photos li span.overlay{
		/*bottom:1px;*/
	}
	#main article section.lead .gallery div.controler{
		width:300px;
		margin:0 auto;
	}
	#main article section.lead .gallery div.controler div.thumb-wrap{
		width:270px;
		height:40px;
		margin:0 auto;
	}
	#main article section.lead .gallery div.controler div.thumb-wrap .current{
		border:2px solid #4dc2be;
		width:61px;
		height:36px;
	}
	
	#main article section.lead .gallery div.controler div.thumb-wrap ul.thumbs li{
		width:63px;
		height:38px;
	}
	#main article section.lead .gallery div.controler div.thumb-wrap ul.thumbs li img{
		width:100%;
		height:auto;
		min-width:auto;
		min-height:auto;
		max-width:auto;
	}

	#main article section.lead .gallery div.controler ul li.prev.hover,
	#main article section.lead .gallery div.controler ul li.prev{
		background:url(../images/property/detail/img_ui.png) no-repeat -17px 0;
		background-size:41px 80px;
		width:12px;
		height:40px;
	}
	#main article section.lead .gallery div.controler ul li.next.hover,
	#main article section.lead .gallery div.controler ul li.next{
		background:url(../images/property/detail/img_ui.png) no-repeat right 0;
		background-size:41px 80px;
		width:12px;
		height:40px;
	}

	#main article section.lead .gallery div.controler.no-pc .prev,
	#main article section.lead .gallery div.controler.no-pc .next{
		display:block !important;
	}
	#main article section.lead .gallery div.controler.no-sp .prev,
	#main article section.lead .gallery div.controler.no-sp .next{
		display:none !important;
	}

	/*outline*/
	#main article section.outline{
		width:100%;
		float:none;
		margin-bottom:30px;
	}
	#main article section.outline h2{
		border-left:4px solid #cd1b1b;
		padding:1px 0 1px 5px;
		margin-bottom:7px;
	}
	#main article section.outline h2 img{
		width:61px;
	}
	#main article section.outline dl{
		min-height:100%;
		padding:14px;
		font-size:84%;
	}
	#main article section.outline dl dt{
		left:13px;
		width:70px;
		padding:0.3em 0;
	}
	#main article section.outline dl dd{
		padding:0.3em 0 0.3em 85px;
	}

    #main article section.outline div.outline{
        display: block;
        width: 100%;
    }
    .left_outline, .right_outline{
        width: auto;
    }
    .right_outline{
        border-left: 1px solid #d1d1d1 !important;
        border-top: none !important;
        padding-top: 0px !important;
    }
    .left_outline{
        border-bottom: none !important;
        padding-bottom: 0px !important;
    }


	/*map*/
	#main article section.map{
		width:100%;
		float:none;
	}
	#main article section.map h2{
		border-left:4px solid #cd1b1b;
		padding:1px 0 1px 5px;
		margin-bottom:7px;
	}
	#main article section.map h2 img{
		width:61px;
	}
	#main article section.map h2 span{
		left:80px;
		font-size:8px;
	}
	#main article section.map #gmap{
		height:150px;
		width:100%;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}

	#main div.freeedit{
		font-size:84%;
	}


	#main p.captiontext{
		font-size:8px;
	}


	#main p.return{
		width:35%;
		margin:0 auto;
		padding-top:30px;
	}
	#main p.return a{
		width:100%;
		padding:0.5em 0;
		font-size:10px;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	#main p.return a:hover{
		background:#2a2726;
		color:#FFF;
	}

}

#main article section.map .villetta_h2, #main article section.outline .villetta_h2{
    border-left: 5px solid #0f6331 !important;
}