@charset "utf-8";
/* CSS Document */


/*============================================================================================
共通　start
============================================================================================*/

/* ■■■ header ■■■ */

#headWrap {
	width: 100%;
	height: 90px;
	background: url(../images/top_content_bg.jpg) repeat;
}

#header {
	margin: 0 auto;
	position: relative;
}

/* header logo */
#header h1 {
	width: 170px;
	height: 39px;
	padding-top: 25px;
	padding-left: 40px;
	float: left;
}

/* header description */
#header p.desc {
	margin: 10px auto 0;
	width: 960px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	color: #fff;
	font-size: 10px;
	letter-spacing: 0.5px;
}

/* header button Area */
#header ul {
	position: absolute;
	top: 26px;
	right: 20px;
}

#header ul li {	float: left; }

/* header button settings */

#sp_headmenu { display: none; }

.topResBtn { margin-left: 20px; }

/* ■■■ footer ■■■ */

#footWrap {
	margin-top: 40px;	
	width: 100%;
	height: auto;
}

#footer {
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 560px;
	height: auto;
}

#footer div {	float: left; }
#footer div:first-child {
	padding-right: 49px;
	border-right: 1px dotted #ccc;
}
#footer div.footFreeTel {
	padding-left: 48px;
}



/*============================================================================================
共通　end
============================================================================================*/



/*============================================================================================
現地案内図　start
popup/map.html
============================================================================================*/

#mapWrap {
	margin-top: 1px;
	width: 100%;
	height: auto;
	border-top: 1px solid #003a36;
}

#mapWrap div {
	padding-top: 40px;
	margin: 0 auto;
	width: 720px;
}

#headTitBox h2 {
	width: 100%;
	height: 20px;
	margin-top: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #999;
}


#mapWrap div.mapBox {
	padding-top: 10px;
}

#popupButton {
	margin: 40px auto 0;
	width: 240px;
}

#popupButton li { float: left; }
#popupButton li:first-child { margin-right: 20px; }

#mapWrap div.mapAnno {
	padding-top: 10px;
	text-align: right;
}



/*============================================================================================
現地案内図　end
popup/map.html
============================================================================================*/

/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
============================================================================================*/
#locationWrap {
	width: 100%;
	height: auto;
	color: #fff;
}

#locationWrap h2.titleBox {
	width: 100%;
	max-width: 960px;
	height: auto;
	margin: 40px auto;
	padding-bottom: 10px;
	padding-left: 0;
	border-bottom: 1px solid #999;
}
#locationWrap h2.titleBox img {
	width: 455px;
	height: auto;
}


/* -------------------------------------------------
Tab設定
------------------------------------------------- */
#locationTabArea {
	margin-top : 40px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 960px;
}

.resp-tabs-container div {
	padding-top: 10px;
	width: 100%;
	height: auto;
}

.resp-tabs-list li:first-child { margin-left: 1%; }

.resp-tab-active {
	width: 100%;
	height: auto;	
}

/* 公共施設 */
.resp-tab-active #locationTit01 {	background-color: #86005b; }
/* 教育施設 */
.resp-tab-active #locationTit02 {	background-color: #009fb2; }
/* 公園 */
.resp-tab-active #locationTit03 {	background-color: #ab8100; }
/* スポーツ＆レジャー施設ショッピング */
.resp-tab-active #locationTit04 {	background-color: #070098; }
/* 医療施設 */
.resp-tab-active #locationTit05 {	background-color: #0b9900; }


#plotTable {
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	max-width: 900px;
}

#plotTableL {
	padding-top: 15px;
	width: 48%;
	float: left;
}
#plotTableR {
	padding-top: 15px;
	width: 48%;
	float: right;
}


.resp-tabs-container dl,
.resp-tabs-container dt,
.resp-tabs-container dd {
	line-height: 18px;
	color: #777;
	font-size: 13px;
	vertical-align: middle;
}
.resp-tabs-container dl {
	margin-top: 10px;
	width: 100%;
	border-bottom: 1px dotted #777;
}
.resp-tabs-container dl:first-child { margin-top: 0; }
.resp-tabs-container dt {
	width: 64%;
	padding-left: 6%;
	float:left;
}
.resp-tabs-container dd {
	width: 30%;
	text-align: right;
	float: left;
}

/* ピックアップ画像　2枚用 */
#mapPuImg2 {
	width: 100%;
	height: auto;
}
#mapPuImg2 li {
	float: left;
	margin-left: 10px;
}
#mapPuImg2 li:first-child { margin-left: 0; }

/* ピックアップ画像　3枚用 */
#mapPuImg3 {
	width: 100%;
	height: auto;
}
#mapPuImg3 li {
	float: left;
	margin-left: 15px;
}
#mapPuImg3 li:first-child { margin-left: 0; }


/* plot設定 */
#plotTable dt {
	background-repeat: no-repeat;
	background-position: left center;
}

/* 公共施設 */
#lifeInfo01 .plot01 {	background-image: url(../popup/images/life_info/location_map05_plot01.gif); }
#lifeInfo01 .plot02 {	background-image: url(../popup/images/life_info/location_map05_plot02.gif); }
#lifeInfo01 .plot03 {	background-image: url(../popup/images/life_info/location_map05_plot03.gif); }
#lifeInfo01 .plot04 {	background-image: url(../popup/images/life_info/location_map05_plot04.gif); }
#lifeInfo01 .plot05 {	background-image: url(../popup/images/life_info/location_map05_plot05.gif); }
#lifeInfo01 .plot06 {	background-image: url(../popup/images/life_info/location_map05_plot06.gif); }
/* 教育施設 */
#lifeInfo02 .plot01 {	background-image: url(../popup/images/life_info/location_map04_plot01.gif); }
#lifeInfo02 .plot02 {	background-image: url(../popup/images/life_info/location_map04_plot02.gif); }
#lifeInfo02 .plot03 {	background-image: url(../popup/images/life_info/location_map04_plot03.gif); }
#lifeInfo02 .plot04 {	background-image: url(../popup/images/life_info/location_map04_plot04.gif); }
#lifeInfo02 .plot05 {	background-image: url(../popup/images/life_info/location_map04_plot05.gif); }
#lifeInfo02 .plot06 {	background-image: url(../popup/images/life_info/location_map04_plot06.gif); }
#lifeInfo02 .plot07 {	background-image: url(../popup/images/life_info/location_map04_plot07.gif); }
#lifeInfo02 .plot08 {	background-image: url(../popup/images/life_info/location_map04_plot08.gif); }
#lifeInfo02 .plot09 {	background-image: url(../popup/images/life_info/location_map04_plot09.gif); }
/* 公園 */
#lifeInfo03 .plot01 {	background-image: url(../popup/images/life_info/location_map03_plot01.gif); }
#lifeInfo03 .plot02 {	background-image: url(../popup/images/life_info/location_map03_plot02.gif); }
#lifeInfo03 .plot03 {	background-image: url(../popup/images/life_info/location_map03_plot03.gif); }
#lifeInfo03 .plot04 {	background-image: url(../popup/images/life_info/location_map03_plot04.gif); }
#lifeInfo03 .plot05 {	background-image: url(../popup/images/life_info/location_map03_plot05.gif); }
#lifeInfo03 .plot06 {	background-image: url(../popup/images/life_info/location_map03_plot06.gif); }
#lifeInfo03 .plot07 {	background-image: url(../popup/images/life_info/location_map03_plot07.gif); }
#lifeInfo03 .plot08 {	background-image: url(../popup/images/life_info/location_map03_plot08.gif); }
#lifeInfo03 .plot09 {	background-image: url(../popup/images/life_info/location_map03_plot09.gif); }
#lifeInfo03 .plot10 {	background-image: url(../popup/images/life_info/location_map03_plot010.gif); }
/* スポーツ＆レジャー施設　ショッピング */
#lifeInfo04 .plot01 {	background-image: url(../popup/images/life_info/location_map02_plot01.jpg) }
#lifeInfo04 .plot02 {	background-image: url(../popup/images/life_info/location_map02_plot02.gif); }
#lifeInfo04 .plot03 {	background-image: url(../popup/images/life_info/location_map02_plot03.gif); }
#lifeInfo04 .plot04 {	background-image: url(../popup/images/life_info/location_map02_plot04.gif); }
#lifeInfo04 .plot05 {	background-image: url(../popup/images/life_info/location_map02_plot05.gif); }
#lifeInfo04 .plot06 {	background-image: url(../popup/images/life_info/location_map02_plot06.gif); }
#lifeInfo04 .plot07 {	background-image: url(../popup/images/life_info/location_map02_plot07.gif); }
#lifeInfo04 .plot08 {	background-image: url(../popup/images/life_info/location_map02_plot08.gif); }
#lifeInfo04 .plot09 {	background-image: url(../popup/images/life_info/location_map02_plot09.gif); }
#lifeInfo04 .plot10 {	background-image: url(../popup/images/life_info/location_map02_plot010.gif); }
/* 医療施設 */
#lifeInfo05 .plot01 {	background-image: url(../popup/images/life_info/location_map01_plot01.gif) }
#lifeInfo05 .plot02 {	background-image: url(../popup/images/life_info/location_map01_plot02.gif); }
#lifeInfo05 .plot03 {	background-image: url(../popup/images/life_info/location_map01_plot03.gif); }
#lifeInfo05 .plot04 {	background-image: url(../popup/images/life_info/location_map01_plot04.gif); }
#lifeInfo05 .plot05 {	background-image: url(../popup/images/life_info/location_map01_plot05.gif); }
#lifeInfo05 .plot06 {	background-image: url(../popup/images/life_info/location_map01_plot06.gif); }
#lifeInfo05 .plot07 {	background-image: url(../popup/images/life_info/location_map01_plot07.gif); }
#lifeInfo05 .plot08 {	background-image: url(../popup/images/life_info/location_map01_plot08.gif); }
#lifeInfo05 .plot09 {	background-image: url(../popup/images/life_info/location_map01_plot09.gif); }
#lifeInfo05 .plot10 {	background-image: url(../popup/images/life_info/location_map01_plot10.gif); }
#lifeInfo05 .plot11 {	background-image: url(../popup/images/life_info/location_map01_plot11.gif); }
#lifeInfo05 .plot12 {	background-image: url(../popup/images/life_info/location_map01_plot12.gif); }

/*============================================================================================
ライフインフォメーション　end
popup/life_information.html
============================================================================================*/


/*============================================================================================
間取詳細ページ　start
popup/type_★.html
============================================================================================*/
#planPopWrap {
	width: 100%;
	max-width: 840px;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
}

#planPopWrap dt {
	margin: 0 auto;
	padding: 20px;
	width: 100%;
	max-width: 798px;
	border: 1px solid #84632d;
	/*cursor: pointer;*/
	/* グラデーション設定 */
	background: #413117; /* Old browsers */
	background: -moz-linear-gradient(left,  #413117 0%, #84632d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#413117), color-stop(100%,#84632d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #413117 0%,#84632d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #413117 0%,#84632d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #413117 0%,#84632d 100%); /* IE10+ */
	background: linear-gradient(to right,  #413117 0%,#84632d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#413117', endColorstr='#84632d',GradientType=1 ); /* IE6-9 */
	position: relative;	
}

#planPopWrap dt h2{
	float: left;
}

#planPopWrap dt .planTypeDesc {
	float: right;
	text-align: right;
	font-size: 12px;
	color: #fff;
	line-height: 17px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

span.strongType {
	font-size: 20px;
	font-weight: bold;
}

#planPopWrap dd {
	margin: 0 auto;
	padding: 8% 0;
	width: 100%;
	max-width: 838px;
	text-align: center;
	border: 1px solid #84632d;
	border-top: none;
}

.planFig,
.planFig img {
}

p.planCap {
	color: #777;
	width: 100%;
	max-width: 800px;
	margin: 20px auto 0;
	line-height: 17px;
}

/*============================================================================================
間取詳細ページ　end
popup/type_★.html
============================================================================================*/


@media screen and (max-width: 960px) {
/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
@media screen and (max-width: 960px)
============================================================================================*/
#locationWrap img {
	width: 100%;
	height: auto;
}

/* ピックアップ画像3枚用 */
#mapPuImg2 {
	width: 100%;
	height: auto;
}
#mapPuImg2 li {
	width: 49%;
	float: left;
	margin-left: 2%;
}

/* ピックアップ画像3枚用 */
#mapPuImg3 {
	width: 100%;
	height: auto;
}
#mapPuImg3 li {
	width: 32%;
	float: left;
	margin-left: 2%;
}


#locationWrap h2.titleBox { width: 95%; }

.location_photo_container { max-width: 100% }
.location_photo_box02 { width: 49.5%; padding-right: 1%;}
.location_photo_box03 { width: 49.5%; }
.location_photo_box04 { width: 49.5%; padding-right: 1%;}
.location_photo_box05 { width: 49.5%; }


.locationImgBox {	margin-top: 1%; }

/* タブの設定 */
#locationTabArea { width: 90%; }
.resp-tab-active { width: auto }

.resp-tabs-container dt {
	width: 94%;
	float: none;
}
.resp-tabs-container dd {
	width: 100%;
}


/*============================================================================================
ライフインフォメーション　end
popup/life_information.html
@media screen and (max-width: 960px)
============================================================================================*/

/*============================================================================================
間取詳細ページ　start
popup/type_★.html]
@media screen and (max-width: 960px)
============================================================================================*/
p.planCap { width: 90%; max-width: 90%; margin: 2% auto 0; }
/*============================================================================================
間取詳細ページ　end
popup/type_★.html
@media screen and (max-width: 960px)
============================================================================================*/

}

@media screen and (max-width: 860px) {
#planPopWrap { width: 90%; }
#planPopWrap dt {
	padding: 2%;
	width: 96%;
}
.planFig img { width: 100%; height: auto; }

@media screen and (max-width: 768px) {
/*============================================================================================
現地案内図　start
popup/index.html
@media screen and (max-width: 768px)
============================================================================================*/
#mapWrap div { width: 100%; }
#mapWrap div img { width: 100%; height: auto; }
#headTitBox h2 img { width: 90%; }
#mapWrap div#mapContainer h3 img { width: auto; height: auto; }
#mapWrap div.mapAnno img { width: 98px; height: 10px; }
/*============================================================================================
現地案内図　end
popup/index.html
@media screen and (max-width: 768px)
============================================================================================*/

/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
@media screen and (max-width: 768px)
============================================================================================*/
.resp-tabs-container dt { padding-left: 8%; width: 92%; } 
/*============================================================================================
ライフインフォメーション　end
popup/life_information.html
@media screen and (max-width: 768px)
============================================================================================*/


}


@media screen and (max-width: 640px) {

/*============================================================================================
モバイル用メニュー　start
@media screen and (max-width: 480px)
============================================================================================*/
#sp_headmenu {
	position: relative;
	width: 35px;
	z-index: 1000;
	float: right;
	padding-top: 22px;
	padding-right: 13px;
	display: block;
}
#sp_headmenu ul {
	float: left;
	padding: 0;
	display: block;
}
#sp_headmenu li {
	width: 35px;
	height: 35px;
}
#sp_info {
	width: 35px;
	height: 35px;
	float: left;
	cursor: pointer;
}
#sp_tel {
	margin-right: 10px;
	width: 35px;
	height: 35px;
	float: left;
}
#sp_menu {
	width: 35px;
	height: 35px;
	float: left;
	cursor: pointer;
}
	
	
#submenuWrap {
	width: 100%;
	min-width: 320px;
	height: auto;
	background: #000;
	position: absolute;
	top: 90px;
	left: 0;
	z-index: 100;
	border-top: 1px solid #99794e;
	border-bottom: 1px solid #99794e;
	display: block;
}

#submenuWrap ul {
	margin: 0 auto;
	width: 100%;
	height: auto;
	min-width: 320px;
}
		
#submenuWrap ul li {
	width: 50%;
	height: 53px;
	display: inline;
	float: left;
}

#submenu_1 a {
	background-image: url(../images/sp/sub_bt1.png);
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	height: 53px;
	cursor: pointer;
	display: block;
	background-size:auto 14px;
}
#submenu_1 a:hover {
	background-color: #777;
	background-image: url(../images/sp/sub_bt1.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 53px;
}


#submenu_2 a {
	background-image: url(../images/sp/sub_bt2.png);
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	height: 53px;
	cursor: pointer;
	display: block;
	background-size:auto 14px;
}
#submenu_2 a:hover {
	background-color: #777;
	background-image: url(../images/sp/sub_bt2.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 53px;
}

#submenu_3 a {
	background-image: url(../images/sp/sub_bt3.png);
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	height: 53px;
	cursor: pointer;
	display: block;
	background-size:auto 14px;
}
#submenu_3 a:hover {
	background-color: #777;
	background-image: url(../images/sp/sub_bt3.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 53px;
}
#submenu_4 a {
	background-image: url(../images/sp/sub_bt4.png);
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	height: 53px;
	cursor: pointer;
	display: block;
	background-size:auto 14px;
}
#submenu_4 a:hover {
	background-color: #777;
	background-image: url(../images/sp/sub_bt4s.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 53px;
}


li.topReqBtn { display: none; }
li.topResBtn { display: none; }

/*============================================================================================
モバイル用メニュー end
@media screen and (max-width: 480px)
============================================================================================*/


/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
@media screen and (max-width: 640px)
============================================================================================*/
#locationWrap h3 { margin-top: 50px; }

.location_photo_container { margin-top: 50px; }

.locationImgBox { margin-top: 2%; }

#locationWrap h2.titleBox { margin-top: 50px; margin-bottom: 50px; }

.location_photo_box02 { width: 100%; padding-right: 0;}
.location_photo_box03 { margin-top: 2%; width: 100%; }
.location_photo_box04 { width: 100%; padding-right: 0;}
.location_photo_box05 { margin-top: 2%; width: 100%; }

.resp-tabs-container dt { padding-left: 10%; width: 90%; } 
/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
@media screen and (max-width: 640px)
============================================================================================*/


/*============================================================================================
間取詳細ページ　start
popup/type_★.html
============================================================================================*/
#planPopWrap { margin-top: 8%; }

#planPopWrap dt h2 { float: none; text-align: center; }
#planPopWrap dt .planTypeDesc { float: none; margin-top: 4%; }

.planFig {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.planFig img {
	width: 100%;
	height: auto;
}

/*#popupButton {
	width: 80%;
}

#popupButton li {
	width: 46%;
	height: auto;
}

#popupButton li img {
	width: 100%;
	height: auto;
}

#popupButton li:first-child { margin-right: 4%; }
*/
/*============================================================================================
間取詳細ページ　end
popup/type_★.html
============================================================================================*/


/*============================================================================================
footer 共通 start
@media screen and (max-width: 640px)
============================================================================================*/
#footer {
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	min-width: 480px;
	height: auto;
}
#footer div:first-child {
	text-align: center;
	width: 50%;
	float: left;
	padding: 0;
	border-right-style: none;
}

#footer div.footLogo img {
	width: 90%;
	height: auto;
}

#footer div.footFreeTel {
	text-align: center;
	width: 49%;
	float: right;
	padding: 0;
	border-left: 1px dotted #ccc;
	border-right-style: none;
}
#footer div.footFreeTel img {
	width: 90%;
	height: auto;
}

#footer div.footQrInfo { display: none; }
#footer div.footQr { display: none; }
/*============================================================================================
footer 共通 end
@media screen and (max-width: 640px)
============================================================================================*/

}

@media screen and (max-width: 480px) {


/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
@media screen and (max-width: 480px)
============================================================================================*/
#locationWrap h2.titleBox img { width: 100%; }

.location_photo_box02 {
	float: none;
	width: 100%;
	height: auto;
}

#plotTable dt {	float: none; padding-left: 6%; width: 94%; }
#plotTable dd {	float: none; width: 100%; }

#plotTableL { float: none; width: 100%; }
#plotTableR { float: none; width: 100%; }
/*============================================================================================
ライフインフォメーション　start
popup/life_information.html
@media screen and (max-width: 480px)
============================================================================================*/

/*============================================================================================
間取詳細ページ　start
popup/type_★.html
@media screen and (max-width: 480px)
============================================================================================*/
#planPopWrap { margin-top: 12%; }

#planPopWrap dt h2 {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

#planPopWrap dt h2 img {
	width: 100%;
	height: auto;
}
/*============================================================================================
間取詳細ページ　end
popup/type_★.html
@media screen and (max-width: 480px)
============================================================================================*/


/*============================================================================================
footer 共通 start
@media screen and (max-width: 480px)
============================================================================================*/
#footer {
	position: relative;
	width: 100%;
	min-width: 100%;
	height: 215px;
	margin: 0;
}

#footer div:first-child {
	text-align: center;
	width: 50%;
	float: left;
	padding: 0;
	border-right-style: none;
}
#footer div.footLogo {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-style: none;
}
#footer div.footLogo img {
	width: auto;
	height: auto;
}

#footer div.footFreeTel {
	text-align: center;
	position: absolute;
	top: 15px;
	left: 0;
	width: 100%;
	float: right;
	padding: 0 0 15px;
	border-bottom: 1px dotted #999;
	border-right-style: none;
	border-left-style: none;
}
#footer div.footFreeTel img {
	width: auto;
	height: auto;
}
#footer div.footQrInfo { display: none; }
#footer div.footQr { display: none; }
/*============================================================================================
footer 共通 end
@media screen and (max-width: 480px)
============================================================================================*/

}