/*
Title: サニーヒルズ晴実台
Date created: 2025-08-02
Last Updated: 2025-08-02
Author: Ryu
*/


/*----------------------------------------
	物件ページ
----------------------------------------*/

.pagenavi {
	background-color: #24282f;
	color: #666;
	line-height:2.5;
	font-size:1rem;
	padding-left: 10px;
	box-sizing: border-box;
}
.pagenavi a{
	color: #666;
}
.head_left{
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}
.head_left h1{
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}


/*----------------------------------------
	レイアウト
----------------------------------------*/

.inner_frame {
	position: relative;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
}
.ttl_500{
	max-width: 500px;
	width: 80%;
}
.ttl_center{
	margin-left: auto;
	margin-right: auto;
}

@media print, screen and (min-width: 769px){

	.sp_br{
		display: none;
	}

}/*END*/

@media print, screen and (min-width: 600px){

	.box_l{
		float: left;
		width: calc((550/1160)*100%);
	}
	.box_r{
		float: right;
		width: calc((550/1160)*100%);
	}

}/*END*/

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

	.pc_br{
		display: none;
	}


}/*END*/

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

	.ttl_500{
		width: 90%;
	}

}/*END*/

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

	.ttl_500{
		width: 100%;
	}
	.pagenavi {
		background-color: #efefef;
		color: #9b9b9b;
		line-height: 2.5;
		font-size: 1rem;
	}
	.pagenavi a{
		color: #9b9b9b;
	}

}/*END*/


/*----------------------------------------
	contents
----------------------------------------*/

.respon{width: 100%;}
article p{
	font-family:'游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	letter-spacing: 1.2px;
	line-height: 2.0em;
	font-weight:500;
}
.yugo{
	font-family:'游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
}
.meiryo{
	font-family:'メイリオ',Meiryo,'游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
}


/*----------------------------------------
	concept
----------------------------------------*/

.concept_deco01{
	position: absolute;
	top: 100px;
	left: -30px;
	width: calc((311/1160)*100);
}
.concept_deco02{
	position: absolute;
	top: 100px;
	right: -80px;
	width: calc((348/1160)*100);
}


@media print, screen and (min-width: 600px){

	.concept_point{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 40px;
	}

}/*END*/

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

	.concept_deco01{
		left: -30px;
		width: 25%;
	}
	.concept_deco02{
		right: -80px;
		width: 28%;
	}

}/*END*/

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

	.concept_deco01,
	.concept_deco02{
		display: none;
	}

}/*END*/

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

	.concept_point li{
		margin-bottom: 35px;
	}

}/*END*/



/*----------------------------------------
	land
----------------------------------------*/

.land{
	background: url("images/land_bg.jpg");
	background-size: cover;
	color: #fff;
}
.land_deco{
	position: absolute;
	top: 50px;
	right: 0;
	width: calc((278/1160)*100%);
}
.land_data table{
	width: 100%;
	line-height: 1.5;
	border-top: none;
}
.land_data th{
	color: #fff;
	font-weight: normal;
	background: #1c7883;
	padding: 3px 10px;
	text-align: center;
}
.land_data td{
	background: #fff;
	color: #000;
	border-bottom: 1px solid #d2d2d2;
	padding: 5px 10px;
	text-align: center;
}
.land_data tr:last-child td{
	border-bottom: none;
}

@media print, screen and (min-width: 769px){

	.land_data table{
		float: left;
		width: calc((560/1160)*100%);
	}
	.land_data table:last-child{
		float: right;
	}



}/*END*/


/*----------------------------------------
	plan
----------------------------------------*/


.plan{
	background: url("images/plan_bg.jpg");
	background-size: cover;
}
.plan_deco01{
	position: absolute;
	top: 220px;
	left: 12%;
	width: calc((134/1160)*100%);
}
.plan_deco02{
	position: absolute;
	top: 60px;
	right: 0;
	width: calc((262/1160)*100%);
}
.plan_house{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: calc((528/1160)*100%);
}
.plan_house img{
	margin-top: -180px;
}
.plan_deco03{
	position: absolute;
	top: 60px;
	right: 8%;
	width: calc((183/1160)*100%);
}
.plan_deco04{
	position: absolute;
	bottom: 280px;
	left: 0;
	width: calc((274/1160)*100%);
}
.plan_deco05{
	position: absolute;
	bottom: 150px;
	right: 0;
	width: calc((265/1160)*100%);
}
.plan_box{
	background: #fff;
	border-radius: 50px;
	padding-left: calc((100/1160)*100%);
	padding-right: calc((100/1160)*100%);
}
.plan .plan_point_l p,
.plan .plan_point_r p{
	padding-left: 5.5%;
}

@media print, screen and (min-width: 600px){

	.plan_copy2{
		float: left;
		width: calc((520/1160)*100%);
		margin-left: calc((110/1160)*100%);
	}
	.plan_house2{
		float: right;
		width: calc((498/1160)*100%);
	}
	.plan_house2 img{
		margin-top: -140px;
	}
	.plan_point_l{
		float: left;
		width: calc((460/960)*100%);
	}
	.plan_point_r{
		float: right;
		width: calc((460/960)*100%);
	}
	.plan_gallery_l{
		float: left;
		width: calc((475/960)*100%);
	}
	.plan_gallery_r{
		float: right;
		width: calc((475/960)*100%);
	}


}/*END*/

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

	.plan_house{
		width: 80%;
	}
	.plan_house img{
		margin-top: -100px;
	}
	.plan_deco01{
		top: 50px;
		left: 20px;
	}
	.plan_deco02,
	.plan_deco03,
	.plan_deco04,
	.plan_deco05{
		display: none;
	}

}/*END*/


/*----------------------------------------
	box
----------------------------------------*/

.box{
	background: url("images/plan_bg.jpg");
	background-size: cover;
}
.box_deco01{
	position: absolute;
	left: 10px;
	top: 180px;
	width: calc((213/1160)*100%);
}
.box_deco02{
	position: absolute;
	right: 0;
	top: 180px;
	width: calc((288/1160)*100%);
}
.box_price{
	width: calc((580/1160)*100%);
	margin-left: auto;
	margin-right: auto;
}

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

	.box_deco01{
		top: 100px;
		width: 15%;
	}
	.box_deco02{
		display: none;
	}
	.box_price{
		width: 100%;
	}

}/*END*/


/*----------------------------------------
	spec
----------------------------------------*/

.bnr_hosho{
	width: 100%;
	max-width: calc((500/1160)*100%);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media print, screen and (min-width: 600px){

	.spec_text1{
		float: right;
		width: calc((560/1160)*100%);
	}
	.spec_text2{
		float: left;
		width: calc((560/1160)*100%);
	}
	.spec_img1{
		float: left;
		width: calc((500/1160)*100%);
	}
	.spec_img2{
		float: right;
		width: calc((570/1160)*100%);
	}
	.spec_point{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 40px;
	}



}/*END*/

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

	.spec_point li{
		margin-bottom: 35px;
	}

}/*END*/


/*----------------------------------------
	about
----------------------------------------*/

.about_table{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc((680/1160)*100%);
}

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

	.about_table{
		width: 100%;
	}

}/*END*/


/*----------------------------------------
	location
----------------------------------------*/

.location{
	background: url("images/location_bg.jpg");
	background-size: cover;
	color: #fff;
}
.location_deco{
	position: absolute;
	top: 100px;
	left: 5%;
	width: calc((220/1160)*100%);
}
.location table{
	width: 100%;
	line-height: 1.8;
	border-top: 1px solid #fff;
	color: #fff;
}
.location table th{
	font-weight: normal;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding: 10px;
}
.location table td{
	text-align: right;
	border-bottom: 1px solid #fff;
	padding: 10px;
}
.location h3{
	margin-bottom: 15px;
}



@media print, screen and (min-width: 600px){


	.location_l{
		float: left;
		width: calc((560/1160)*100%);
	}
	.location_r{
		float: right;
		width: calc((560/1160)*100%);
	}




}/*END*/


/*----------------------------------------
	access
----------------------------------------*/

.access_map{
	width: calc((860/1160)*100%);
	margin-left: auto;
	margin-right: auto;
}
.map{
	aspect-ratio: 27 / 10;
	overflow: hidden;
}
.map iframe{
	width: 100%;
	height: 100%;
}

@media print, screen and (min-width: 600px){

	.access_text{
		float: right;
		width: calc((560/1160)*100%);
	}
	.access_img{
		float: left;
		width: calc((560/1160)*100%);
	}

}/*END*/

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

	.access_map{
		width: 100%;
	}

}/*END*/





/*----------------------------------------
	outline
----------------------------------------*/

.outline{
	background: url("images/outline_bg.jpg");
	background-size: cover;
}
.outline table{
	width: 100%;
	line-height: 1.6;
}
.outline th{
	background: #000;
	color: #fff;
	padding: 8px 15px;
	border-bottom: 1px solid #ede7e7;
	font-weight: normal;
	text-align: left;
	box-sizing: border-box;
	width: 160px;
}
.outline td{
	background: #fff;
	padding: 8px 15px;
	border-bottom: 1px solid #ede7e7;
}

@media print, screen and (min-width: 769px){

	.outline_l{
		float: left;
		width: calc((560/1160)*100%);
	}
	.outline_r{
		float: right;
		width: calc((560/1160)*100%);
	}

}/*END*/