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

/*------------------------------------------------------------
レスポンシブ用
1000px以下タブレットなど
576px以下スマホなど
------------------------------------------------------------*/

/*-----レスポンシブ------*/

/* ウィンドウ幅が2800px以上の場合に適用 */
@media screen and ( min-width:2800px )
{

}

/* ウィンドウ幅が1521px以上の場合に適用 */
@media screen and ( min-width:1521px )
{

.bk_color01{
	padding-bottom: 85px;
}

.bk_color02{
	padding-bottom: 85px;
}

}

/* ウィンドウ幅が-1520pxの場合に適用 */
@media screen and ( max-width:1520px )
{

}

/* ウィンドウ幅が0-576pxの場合に適用 */
@media screen and ( max-width:576px )
{
	
.pc { display: none !important; }
.sp { display: inline !important; }

	.in_contents_in{
		width: 94%;
	}

	.main-h2{
		width: 48%;
		margin: -7.5% auto 0;
	}

	.bk_color01{
		padding-bottom: 10%;
	}

	.bk_color02{
		padding-bottom: 10%;
	}

	.toiawase{
		width: 93.2%;
		margin: 6% auto 12%;
	}

/* nav1　-576px */

.nav1 ul{
	width: 93%;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 auto;
}

.nav1 li{
	width: 48%;
	margin-bottom: 3%;
	background: none;
}
.nav1 ul::after {
	display: block;
	content:"";
	width: 32%;
}

/* nav2　-576px */

.nav2 ul{
	width: 93%;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 10% auto;
}

.nav2 li{
	width: 100%;
	margin-bottom: 2.5%;
	background: none;
}

/* exterior -576px */

#exterior{
	margin-bottom: 10%;
}

#exterior h3{
	width: 88%;
	padding: 10% 0 4%;
}

#exterior h4{
	width: 95%;
	padding: 6% 0 4.5%;
}

/* interior -576px */

#interior{
	margin-bottom: 10%;
}

#interior h3{
	width: 86%;
	padding: 7.5% 0 1%;
}

/* color -576px */

#color{
	margin-bottom: 10%;
}

#color h3{
	width: 86%;
	padding: 12% 0 1%;
}

.slick-arrow{
	width: 9%;
	top: 32%;
}

.slider-area .next_btn{
	right: 1%;
}

.slider-area .pre_btn{
	left: 1%;
}

#slidercolor{
	margin-top: 4%;
}

#slidercolor li img{
	width: 76%;
}

#slider-btn{
	margin: 2.5% 5% 4.5% auto;
	width: 60%;
}

#slider-btn .slick-list{
	padding-bottom: 40%;
}

#slider-btn .slick-slide{
	width: 24.2%!important;
	margin-right: 0.5%;
	margin-top: 3%;
}

#slider-btn .slick-slide:nth-child(4),
#slider-btn .slick-slide:nth-child(8),
#slider-btn .slick-slide:nth-child(11)
{
	margin-right: 0;
}

#slider-btn img{
	cursor: pointer;
}

#slider-btn img:hover{
	opacity: 0.8;
}

#slider-btn .twotone1{
	position: absolute;
	top: 120%;
}

#slider-btn .twotone2{
	position: absolute;
	top: 120%;
	left: 24.5%;
}

#slider-btn .twotone3{
	position: absolute;
	top: 120%;
	left: 49.5%;
}

.slider-area .monotone,
.slider-area .twotone{
	width: 28%;
	position: absolute;
	left: 4%;
}

.slider-area .monotone{
	bottom: 46%;
}

.slider-area .twotone{
	bottom: 24%;
}

#color .note{
	width: 100%;
	margin-left: 0;
	margin-top: 3%;
}

/* utility -576px */

#utility{
	margin-bottom: 10%;
}

#utility h3{
	width: 97.5%;
	padding: 12% 0 1%;
}

#utility .img1{
	width: 85%;
	margin: 3.5% auto 5%;
}

#utility h4{
	width: 92%;
	margin: 1% auto;
}

#utility .img2{
	width: 98%;
	margin: 1% auto;
}

/* plan -576px */

#plan{
	margin-bottom: 10%;
}

#plan h3{
	width: 96%;
	padding: 14% 0 1%;
}

#plan .img1{
	width: 95%;
	margin: 2.5% auto 0;
}

#plan .img2{
	width: 95%;
	margin: -1px auto 4.5%;
}

#plan .note{
	width: 100%;
}

/* flow -576px */

#flow .main-h2{
	width: 58%;
}

#flow{
	margin-bottom: 13%;
}

#flow h3{
	width: 85%;
	margin: 0 auto;
	padding: 14% 0 0;
}

#flow .img{
	width: 90%;
	margin: 8% auto 9% 4.7%;
}

#flow .note{
	width: 70%;
	margin: 0 auto;
}

/* フッター -576px */

.bk_last{
	padding-bottom: 3%;
}

.f-btn_txt{
	width: 80%;
	margin: 0 auto -3%;
}

#f-logo .link-btn{
	padding: 7% 0 7%;
}

#f-logo .link-btn img{
	width: 85%;
}

}