/*
Title: カナエラモデルハウス
Last Updated: 2025-06-13
Author: Ryu
*/

/*----------------------------------------
	全体
----------------------------------------*/

html{
	font-family:'游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝',serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
	font-weight: 500;
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{ vertical-align: bottom; }
a{
	color:#009dc4;
	transition: all 0.4s;
}
a:hover{
	color:#05bfee;
	transition: all 0.4s;
}


/*----------------------------------------
	text
----------------------------------------*/

p{ line-height: 2; }

.text_300{ font-weight: 300; }
.text_400{ font-weight: 400; }
.text_500{ font-weight: 500; }
.text_600{ font-weight: 600; }
.text_700{ font-weight: 700; }
.text_800{ font-weight: 800; }
.text_bold{ font-weight: bold; }
.text_normal{ font-weight: normal; }
.text_yu_go{ font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif; }

.lh_12{ line-height: 1.2; }
.lh_13{ line-height: 1.3; }
.lh_14{ line-height: 1.4; }
.lh_15{ line-height: 1.5; }
.lh_16{ line-height: 1.6; }
.lh_17{ line-height: 1.7; }
.lh_18{ line-height: 1.8; }
.lh_22{ line-height: 2.2; }
.lh_24{ line-height: 2.4; }

.ls_-1{ letter-spacing: -1px; }
.ls_1{ letter-spacing: 1px; }
.ls_2{ letter-spacing: 2px; }

.text_15{ font-size: 1.5rem; }
.text_16{ font-size: 1.6rem; }
.text_17{ font-size: 1.7rem; }
.text_18{ font-size: 1.8rem; }
.text_19{ font-size: 1.9rem; }
.text_20{ font-size: 2.0rem; }
.text_21{ font-size: 2.1rem; }
.text_22{ font-size: 2.2rem; }
.text_24{ font-size: 2.4rem; }
.text_26{ font-size: 2.6rem; }
.text_28{ font-size: 2.8rem; }
.text_30{ font-size: 3.0rem; }
.text_32{ font-size: 3.2rem; }
.text_34{ font-size: 3.4rem; }
.text_35{ font-size: 3.5rem; }
.text_36{ font-size: 3.6rem; }

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

	.text_18{ font-size: 1.7rem; }
	.text_21{ font-size: max(2.01vw, 1.8rem); }
	.text_22{ font-size: max(2.09vw, 2rem); }
	.text_24{ font-size: max(2.28vw, 2rem); }
	.text_26{ font-size: max(2.47vw, 2.2rem); }
	.text_28{ font-size: max(2.66vw, 2.2rem); }
	.text_30{ font-size: max(2.85vw, 2.2rem); }
	.text_32{ font-size: max(3.07vw, 2.2rem); }
	.text_35{ font-size: max(3.36vw, 2.3rem); }
	.text_36{ font-size: max(3.42vw, 2.2rem); }

}/*END*/

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

	p{ line-height: 1.8; }

}/*END*/


/*----------------------------------------
	共通
----------------------------------------*/

#container{ overflow: hidden; }
.inner_frame{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	max-width: 1080px;
	width: 100%;
}

li{
	list-style:none;
}
.center{
	text-align:center;
}
.op{
	transition: all 0.4s;
}
.op:hover{
	opacity:0.60;
}

.ttl_600{
	max-width: 500px;
	width: 100%;
}
.ttl_center{
	margin-left: auto;
	margin-right: auto;
}

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

	.left{ float:left; }
	.right{ float:right; }

	.sp_br{
		display: none;
	}
	.pc_none{
		display: none !important;
	}
	.btn_frame{
		width: 100%;
		max-width: 710px;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 40px;
	}


}/*END*/

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

	.btn_frame{
		width: 100%;
		display: block;
	}
	.btn_frame a{
		display: block;
		max-width: 335px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}

}/*END*/

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


	.sp_left{
		text-align: left;
	}
	.pc_br{
		display: none;
	}
	.sp_none{
		display: none !important;
	}
	.sp_center{
		text-align: center;
	}
	.sp_left{
		text-align: left;
	}

}/*END*/


/*----------------------------------------
	header
----------------------------------------*/

header{
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	height: 75px;
	background: rgba(255, 255, 255, 0.8);
	z-index: 10;
}
header h1 img{
	margin-left: 5%;
	padding-top: 30px;
	width: 210px;
}
header h1 span{
	display: inline-block;
	margin-left: 30px;
	padding-top: 30px;
	font-weight: normal;
	letter-spacing: -1px;
}

.drawer{
	display: none;
	position: fixed;
	background: rgba(0, 0, 0, 0.8);
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	color: #fff;
	display: flex;
	justify-content: center;
	visibility: hidden;
	transform: translateY(-100%);
	transition: 0.5s ease-in-out;
	z-index: 50;
}
.drawer nav{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 2;
	text-align: center;
}
.drawer nav li{
	margin-bottom: 10px;
}
.drawer nav li a{
	color: #fff;
	font-size: 1.8rem;
	text-decoration: none;
}
.open .drawer{
	visibility: visible;
	transform: translateX(0);
}
.open .drawer ul li{
	transform: translateX(0);
}
.drawer a{
	display: block;
}

.btn_menu{
	position: fixed;
	width: 75px;
	height: 75px;
	right: 0;
	top: 0;
	background: #000;
	cursor: pointer;
	transition: all 0.5s;
	z-index: 51;
}
.btn_menu span{
	display: inline-block;
	position: absolute;
	width: 48px;
	height: 1px;
	background: #fff;
	transition: all 0.4s;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.btn_menu span:nth-child(1){
	top: 25px;
}
.btn_menu span:nth-child(2){
	top: 50%;
	margin-top: -1px;
}
.btn_menu span:nth-child(3){
	bottom: 25px;
}
.open .btn_menu span:nth-child(1){
	transform: rotate(35deg);
	margin-left: -23px;
	top: 36px;
}
.open .btn_menu span:nth-child(2){
	opacity: 0;
}
.open .btn_menu span:nth-child(3){
	transform: rotate(-35deg);
	margin-left: -23px;
	top: 36px;
}

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

}/*END*/

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

	header h1 img{
		width: 180px;
		margin-left: 3%;
	}
	header h1 span{
		font-size: 1.8rem !important;
		margin-left: 20px;
	}

}/*END*/

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

	header h1 img{
		padding-top: 18px;
	}
	header h1 span{
		display: block;
		margin-left: 3%;
		padding-top: 8px;
		font-size: 1.6rem !important;
	}

}/*END*/


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

	header h1 span{
		font-size: 1.5rem !important;
	}


}/*END*/

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


}/*END*/


/*----------------------------------------
	intro
----------------------------------------*/

#intro{
	background: url("../images/intro_bg.jpg") center top no-repeat;
	background-size: 100%;
}
.text_blue{
	color: #1366a6;
}
.intro_deco01{
	position: absolute;
	right: 8%;
	top: 8%;
	width: calc((141/1040)*100%);
}
.intro_deco02{
	position: absolute;
	right: 0;
	bottom: 40px;
	width: calc((137/1040)*100%);
}


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



}/*END*/

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

	.intro_deco02{
		right: 2%;
	}

}/*END*/

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

	.intro_deco01{
		right: 3%;
		top: 5%;
	}
	.intro_deco02{
		display: none;
	}

}/*END*/

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


}/*END*/

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

	.intro_deco01{
		display: none;
	}

}/*END*/



/*----------------------------------------
	point
----------------------------------------*/

.point_ttl{
	background: url("../images/point_ttl_bg.jpg");
	background-size: cover;
}
.point_border{
	border-bottom: 1px solid #000;
}


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

	.point_text{
		width: calc((460/1040)*100%);
	}
	.point_img{
		width: calc((500/1040)*100%);
	}
	.point_img.left img{
		width: calc((654/500)*100%);
		margin-left: -23%;
	}
	.point_img.right img{
		width: calc((654/500)*100%);
	}
	.living_img01{
		width: calc((408/1040)*100%);
	}
	.living_img02{
		width: calc((539/1040)*100%);
		padding-top: 80px;
	}
	.kitchen_img01{
		width: calc((508/1040)*100%);
		padding-top: 60px;
	}
	.kitchen_img02{
		position: relative;
		top: -70px;
		width: calc((319/1040)*100%);
		margin-right: 5%;
	}
	.bedroom_img01{
		width: calc((408/1040)*100%);
		margin-left: 3%;
		position: relative;
		top: -80px;
	}
	.bedroom_img02{
		width: calc((518/1040)*100%);
		padding-top: 60px;
	}
	#point ul{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 40px;
	}


}/*END*/

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

	.bedroom_img02,
	.bedroom_img01,
	.kitchen_img01,
	.living_img02{
		margin-top: 30px;
	}
	#point ul li{
		margin-bottom: 35px;
	}


}/*END*/



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

#plan{
	background: url("../images/plan_bg.jpg") center top no-repeat #f2f2f2;
	background-size: cover;
}
.plan_madori{
	display: block;
	width: 100%;
	max-width: 736px;
	margin-left: auto;
	margin-right: auto;
}
.plan_data{
	width: 100%;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	border: 1px solid #b49b76;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.plan_data .text_36{
	color: #003559;
}
.bg_gray{
	background: #f2f2f2;
}
.model_bnr{
	display: block;
	width: 100%;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}


/*----------------------------------------
	kanaera
----------------------------------------*/


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

	#kanaera ul{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 40px;
	}


}/*END*/

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

	#kanaera ul li{
		margin-bottom: 35px;
	}

}/*END*/



/*----------------------------------------
	footer
----------------------------------------*/

footer{
	background: url("../images/foot_bg.jpg");
	padding-top: 120px;
	padding-bottom: 170px;
}
.foot_logo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	max-width: 443px;
}
.btn_official{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 335px;
}

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

	.sp_menu{
		display: none;
	}

}/*END*/

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

	footer{
		padding-top: 80px;
		padding-bottom: 80px;
		padding-left: 20px;
		padding-right: 20px;
	}
	footer p.m_b20{
		margin-bottom: 40px !important;
	}
	small{
		line-height: 1.4;
	}
	.sp_menu{
		position: fixed;
		left: 0;
		bottom: -100px;
		transition: all 0.4s;
	}
	.sp_menu li{
		float: left;
		box-sizing: border-box;
	}
	.sp_menu li:nth-child(1){
		width: 62.25%;
	}
	.sp_menu li:nth-child(2),
	.sp_menu li:nth-child(3){
		width: 18.87%;
	}


}/*END*/