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

 file name  :office.css
 style info :空室情報ページ

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

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

	overwrite

=============================== */
#main{
	padding:0;
}


/* =================================== */
#main .txt-detail{
	width:1000px;
	margin:22px auto 30px;
}
#main .txt-detail dt{
	display:inline-block;
	width:260px;
	font-size:28px;
	vertical-align:middle;
}
#main .txt-detail dt span{
	font-size:40px;
}
#main .txt-detail dt:after{
	content:"";
	display:inline-block;
	width:91px;
	height:26px;
	margin:0 0 0 0.5em;
	background:url(../images/office/img_motif.png) no-repeat;
	background-size:100% auto;
}
#main .txt-detail dd{
	display:inline-block;
	width:739px;
	padding:10px 0 10px 38px;
	vertical-align:middle;
	border-left:solid 2px #d2bc6f;
	font-size:14px;
	line-height:1.7;
}
#main .txt-detail .cl-r{
	color: #c30909;
	font-size: 16px;
}

#main .txt-detail p {
	font-size: 14px;
}

#main .txt-detail p span {
	margin-left: 20px;
}
#main .txt-detail p.txt-detail--cath span {
	margin-left: 0;
	font-size: 14px;
	font-weight: normal;
}

/* スライド1枚のみ*/
#main div.photos__mv {
	margin:0 0 68px;
}
#main div.photos__mv figure {
	width: 100%;
}
#main div.photos__mv figure img {
	width: 100%;
}

#main div.photos__mv figure figcaption {
	width: 100%;
	width:1000px;
	margin:3px auto 0;
	text-align:right;
	font-size: 12px;
}


/* スライド */
#main div.slide-wrap {
	margin:0 0 68px;
}
#main div.slide-wrap ul.photos{
	position:relative;
	zoom:1;
	width:100%;
	padding-top:47.5%;
}
#main div.slide-wrap ul.photos li{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:50;
}
#main div.slide-wrap ul.photos li figure{
	display:none;
}
#main div.slide-wrap ul.photos li figure figcaption{
	width:1000px;
	margin:3px auto 0;
	text-align:right;
}
#main div.slide-wrap ul.photos li img{
	width:100%;
	height:auto;
}
.photos .reform{
text-align: center;
}



#main div.slide-wrap ul.thumbs{
	width:1000px;
	margin:30px auto 0;
}
#main div.slide-wrap ul.thumbs img{
	width:100%;
	height:auto;
}
#main div.slide-wrap ul.thumbs li{
	width:160px;
	height:66px;
	cursor:pointer;
	overflow:hidden;
	background:#000;
	float:left;
	margin:0 0 0 8px;
}
#main div.slide-wrap ul.thumbs li:first-child{
	margin-left:0;
}
#main div.slide-wrap ul.thumbs li:nth-child(7){
	margin:8px 0 0 0;
}
#main div.slide-wrap ul.thumbs li:nth-child(n+8){
	margin:8px 0 0 8px;
}


#main .room-info{
	width:1000px;
	margin:0 auto 60px;
}
#main .room-info .txt-block{
	width:640px;
	float:left;
}
#main .room-info .txt-block h2{
	margin:0 0 38px;
	padding:0 0 15px;
	font-size:20px;
	line-height:1;
	border-bottom:solid 1px #cfcfcf;
}
#main .room-info .txt-block h2:before{
	content:"";
	display:inline-block;
	width:10px;
	height:2px;
	margin:0 10px 0 0;
	background:#a9a9a9;
	vertical-align:middle;
}
#main .room-info .txt-block h2:after{
	content:"";
	display:inline-block;
	width:91px;
	height:26px;
	background:url(../images/office/detail/img_motif02.png) no-repeat;
	background-size:100% auto;
	margin:0 0 0 10px;
	vertical-align:middle;
}
#main .room-info .txt-block ul li{
	width:20%;
	float:left;
	text-align:center;
}
#main .room-info .txt-block ul li figure figcaption{
	margin:14px 0 0;
	line-height:1.3;
}

#main .room-info .data{
	width:300px;
	float:right;
}
#main .room-info .data caption{
	padding:12px 0;
	font-size:18px;
	background:#111;
	color:#fff;
	line-height:1;
	position:relative;
}
#main .room-info .data caption:before{
	content:"";
	display:inline-block;
	width:18px;
	height:2px;
	margin:0 18px 0 0;
	background:#3f3f3f;
	vertical-align:middle;
}
#main .room-info .data caption:after{
	content:"";
	display:inline-block;
	width:91px;
	height:26px;
	background:url(../images/office/detail/img_motif02.png) no-repeat;
	background-size:100% auto;
	margin:0 0 0 10px;
	vertical-align:middle;
	opacity:0.3;
	position:absolute;
	top:10px;
	right:1px;
}
#main .room-info .data th{
	width:120px;
	background:#fafafa;
}

#main .room-info .data th,
#main .room-info .data td{
	padding:0.5em 0.3em;
	border:solid 1px #d2d2d2;
	text-align:center;
	font-size:14px;
}


#main .btn{
	padding:40px 0;
	background:#f9f9f9;
}
#main .btn p{
	width:740px;
	height:140px;
	margin:0 auto;
	display:block;
	border:solid 1px #969494;
}
#main .btn a{
	display:block;
	height:138px;
	padding:38px 0 0 50px;
	border:solid 2px #fff;
	background:#fff url(../images/common/bg_contact.jpg) no-repeat right 0;
	position:relative;
}

#main .btn a:before,
#main .btn a:after{
	content:"";
	display:block;
}
#main .btn a:before{
	width:3px;
	height:119px;
	background:#acc2cb;
	position:absolute;
	top:-2px;
	left:22px;
}
#main .btn a:after{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 3px 0 0;
	border-color: #acc2cb transparent transparent transparent;
	position:absolute;
	top:117px;
	left:22px;
}

#main .btn a .ja{
	display:block;
	margin:0 0 5px;
	font-size:24px;
}
#main .btn a .en{
	font-size:14px;
	color:#676767;
}


/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 640px){
	/* =============================
	
		overwrite
	
	=============================== */
	#content .head-wrap{
		padding:0 10px 30px;
	}
	
	
	
	
	/* =================================== */
	#main .txt-detail{
		width:auto;
		margin:10px auto 30px;
		padding:0 10px;
	}
	#main .txt-detail dt{
		display:block;
		width:100%;
		margin:0 0 10px;
		font-size:18px;
		border-bottom:solid 1px #d2bc6f;
	}
	#main .txt-detail dt span{
		font-size:30px;
	}
	#main .txt-detail dt:after{
		width:45px;
		height:13px;
		margin:0 0 0 0.5em;
	}
	#main .txt-detail dd{
		width:100%;
		padding:0;
		border-left:none;
		font-size:12px;
		line-height:1.6;
	}
	
	#main .txt-detail .cl-r {
		font-size: 14px;
		font-weight: bold;
	}
	
	#main .txt-detail p.txt-detail--cath span {
		font-size: 12px;
	}
	
		/* スライド一枚のみ */
	#main div.photos__mv {
	margin:0 0 30px;
	}
	#main div.photos__mv figure {
		width: 100%;
	}
	#main div.photos__mv figure img {
		width: 100%;
	}
	#main div.slide-wrap ul.photos li figure figcaption{
		width:100%;
		padding:0 10px;
		font-size:9px;
	}
	
	/* スライド */
	#main div.slide-wrap {
		margin:0 0 30px;
	}
	#main div.slide-wrap ul.photos{
		position:relative;
		zoom:1;
		width:100%;
		height:100%;
	}
	#main div.slide-wrap ul.photos li{
		width: 100%;
		height: auto;
	}
	#main div.slide-wrap ul.photos li figure figcaption{
		width:100%;
		padding:0 10px;
		font-size:9px;
	}
	#main div.slide-wrap ul.thumbs{
		margin:2em 0 0;
		padding:0 10px;
		width:auto;
	}
	#main div.slide-wrap ul.thumbs li{
		margin:0 0 2% 0;
		border:none;
	}
	#main div.slide-wrap ul.thumbs li:first-child{
		margin:0;
	}
	#main div.slide-wrap ul.thumbs li{
		width:32%;
		height:auto;
	}
	#main div.slide-wrap ul.thumbs li:nth-child(n+8){
		margin:0 0 2% 0;
	}
	#main div.slide-wrap ul.thumbs li:nth-of-type(2),
	#main div.slide-wrap ul.thumbs li:nth-of-type(5),
	#main div.slide-wrap ul.thumbs li:nth-of-type(8),
	#main div.slide-wrap ul.thumbs li:nth-of-type(11){
		margin:0 2%;
	}
	#main div.slide-wrap ul.thumbs li:nth-of-type(3n+1){ clear:both;}
	#main div.slide-wrap ul.thumbs li:nth-of-type(7){
		margin-top:0;
	}


	
	#main .room-info{
		width:auto;
		margin:0 auto 30px;
		padding:0 10px;
	}
	#main .room-info .txt-block{
		width:100%;
		float:none;
	}
	#main .room-info .txt-block h2{
		margin:0 0 20px;
		padding:0 0 10px;
		font-size:16px;
	}
	#main .room-info .txt-block h2:before{
		margin:0 5px 0 0;
	}
	#main .room-info .txt-block h2:after{
		width:45px;
		height:13px;
		margin:0 0 0 10px;
	}
	#main .room-info .txt-block ul li{
		width:20%;
		margin:0 0 10px;
		padding:0 2px;
	}
	#main .room-info .txt-block ul li figure figcaption{
		margin:10px 0 0;
		font-size:2.5vmin;
		letter-spacing:-0.1em;
	}
	
	#main .room-info .data{
		width:100%;
		float:none;
	}
	#main .room-info .data caption{
		padding:8px 0;
		font-size:16px;
	}
	#main .room-info .data caption:before{
		width:10px;
		height:2px;
		margin:0 10px 0 0;
	}
	#main .room-info .data caption:after{
		width:45px;
		height:13px;
		top:13px;
		right:1px;
	}
	#main .room-info .data th{
		width:40%;
	}
	#main .room-info .data td{
		width:60%;
	}
	
	#main .room-info .data th,
	#main .room-info .data td{
		font-size:12px;
	}
	
	
	#main .btn{
		padding:30px 10px;
	}
	#main .btn p{
		width:auto;
		height:auto;
	}
	#main .btn a{
		height:auto;
		padding:15px 0 15px 20px;
		border:solid 1px #fff;
		background:#fff url(../images/common/bg_contact.jpg) no-repeat right 0;
		background-size:auto 100%;
	}
	
	#main .btn a:before,
	#main .btn a:after{
		content:"";
		display:block;
	}
	#main .btn a:before{
		width:2px;
		height:50px;
		top:-1px;
		left:5px;
	}
	#main .btn a:after{
		border-width: 2px 2px 0 0;
		top:49px;
		left:5px;
	}
	
	#main .btn a .ja{
		margin:0 0 5px;
		font-size:14px;
		letter-spacing:-0.05em;
		text-shadow:
			0 0 2px #fff,
			0 0 2px #fff,
			0 0 3px #fff,
			0 0 3px #fff,
			0 0 3px #fff,
			0 0 3px #fff;
	}
	#main .btn a .en{
		font-size:10px;
	}



	
}