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

/*
@media screen and (max-width:959px)
@media screen and (max-width:767px)
@media screen and (max-width:479px)
@media screen and (max-width:321px)
*/


@media screen and (max-width:1260px){
	#head_menu2{
		display: none;
	}
}

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

	.sld1{
		background: url(../images/top_main_01.png) #fff 25% 20%  no-repeat;
		background-size: cover;
		margin: 0;
		padding: 0;
	}

	.sld2{
		background: url(../images/top_main_02.png) #fff 33% 20%  no-repeat;
		background-size: cover;
		margin: 0;
		padding: 0;
	}

	/* --------------------------
	 main visual
	----------------------------*/
	#visual-image{
		position: relative;
		left: 53%;
		margin-left: -500px;
	}
	#visual-image2{
		position: relative;
		left: 53%;
		margin-left: -500px;
	}

	#wrapper{
		p, dd{
			/*font-size:14px;*/
		}
		#main{
			#content{
				#mainarea{
					width: 100%;
				}
			}
		}
	}
	#head_menu{
		display: none;
	}

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

.page_top{
	padding: 50px 0 30px;
}

.top_text{
	position: relative;margin-bottom: 0;color: #fff;text-shadow: 1px 1px 1px #000;-webkit-text-shadow: 1px 1px 1px #000;-moz-text-shadow: 1px 1px 1px #000;padding: 220px 15px;font-weight:bold;font-size:22px;line-height:1.6;
}
.top_image{
	max-width: 800px;
	margin:0 auto;
	padding: 210px 5px;
}


	.sp_02{
		width: 100%;
		text-align: center;
	}
	.sp_03{
		width: 100%;
		color: #fff;
		font-size: 18px;
		line-height: 1.8;
		text-align: center;
		.article_space{
			padding-left: 0px;
		}
	}

	.sp_04{
		width: 100%;
	}
	.sp_05{
		width: 100%;
		color: #fff;
		font-size: 15px;
		line-height: 1.8;
		text-align: center;
		margin: 20px 0  10px;
	}

	.br1{
		line-height: 1.4;
		display: inline;
	}

	/* --------------------------
	 main visual
	----------------------------*/
	#visual-image{
		position: relative;
		left: 81%;
		margin-left: -600px;
	}
	#visual-image2{
		position: relative;
		left: 81%;
		margin-left: -600px;
	}

	#sp_logo{
		display: block;
		position: absolute;
		top: 120px;
		left: 320px;
		z-index: 1;
	}

	#logo2{

		display: block;
	}


	.sp_logo2{
		display: block;
		position: absolute;
		background-color: #FFFFFF;
		opacity: 0.6;
		bottom: 0px;
		right: 0;
		z-index: 2;

		color: #585D61;
		text-align: left;
		padding: 20px 0;
		width: 100%;
		line-height: 1.4;
		font-size: 14px;
	}


/* --------------------------
 cont_team
----------------------------*/
#cont_team{
	.outline{
		text-alogn: center;
		padding:20px 0 20px;
	}
	h2{
		text-align: center; /* 見出しのテキスト位置 */
		margin: 40px 0 30px;
	}
}

	/* --------------------------
	 cont_event
	----------------------------*/
	#cont_event{
		margin-top: 20px;
		.outline{
			ul{
				/*.slick-list {
					margin-right: -20px;
				}*/

				.slick-slide {
					margin-right: 15px; /* アイテム間隔 */
				}

				margin: 20px 0 0px;
				padding: 0 0 40px;
				display: block;
				
				li{
					display: inline-block;
					margin: 10px 0px 0px;
					padding: 0 5px; /* ドット間隔 */
					position: relative;

					.news_date{
						font-size: 14px;
						line-height: 1.4;
						display: block;
						position: static;
					}
					.news_body{
						font-size: 14px;
						line-height: 1.4;
						display: block;
						margin-bottom: 20px;
						padding-left: 0px;
						min-height: auto; /* 高さ解除 */
					}
				}
			}
		}
	}

	/* --------------------------
	 cont_news
	----------------------------*/
	#cont_news{
		margin-top: 20px;
		.outline{
			ul{
				/*.slick-list {
					margin-right: -20px;
				}*/
				.slick-slide {
					margin-right: 15px; /* アイテム間隔 */
				}

				margin: 20px 0 0px;
				padding: 0 0 40px;
				display: block;
				
				li{
					display: inline-block;
					margin: 10px 0 0px;
					padding: 0 5px; /* ドット間隔 */
					position: relative;

					.news_date{
						font-size: 14px;
						line-height: 1.4;
						display: block;
						position: static;
					}
					.news_body{
						font-size: 14px;
						line-height: 1.4;
						display: block;
						margin-bottom: 20px;
						padding-left: 0px;
					}
				}
			}
		}
	}

	/* --------------------------
	 cont_concept
	----------------------------*/
	#cont_concept{
		margin-top: 20px;
		.outline{
			padding: 0 0 40px;
			ul{

				.slick-prev,.slick-next{
					top: 20%;
				}

				.slick-slide {
					margin: 0 5px; /* アイテム間隔 */
				}
				margin: 20px 0 0;
			}
		}
	}

	/* --------------------------
	 cont_plan
	----------------------------*/
	#cont_plan{
		margin-top: 20px;
		.outline{
			padding: 0 0 40px;
			ul{

				.slick-prev,.slick-next{
					top: 30%;
				}

				.slick-slide {
					margin: 0 5px; /* アイテム間隔 */
				}
				margin: 20px 0 0;
			}
		}
	}

	/* --------------------------
	 cont_slider
	----------------------------*/
	#cont_slider{
		.outline{

			h2{
				text-align: center; /* 見出しのテキスト位置 */
				margin: 50px 0 20px;
			}


			ul{

				.slick-prev,.slick-next{
					top: 30%;
				}


.slick-slider .slick-track, .slick-slider .slick-list{
  background: #fff;
}
.slick-initialized .slick-slide{
  opacity: 0; /* 両サイドの画像を透過 */
}
.slick-initialized .slick-slide.slick-active{
  opacity: 1; /* センター画像を非透過 */
}

/*
.slick-prev::before {
   content: url(../images/prev.png);
 }
.slick-next::before {
    content: url(../images/next.png);
}
.slick-prev{
    left: 0;
    top: 0;
  }
.slick-next{
    right: 0px;
    top: 0;
}
*/




				.slick-slide {
					margin: 0 5px; /* アイテム間隔 */
				}

			}
		}
	}

	/* --------------------------
	 cont_menu
	----------------------------*/
	#cont_menu{
		padding: 0;

		.outline{
			ul{
				margin: 0px 0;
			}
			ul li{

				width: 50%;
				margin: 30px 0px 0;

				p{
					line-height: 1.6;
					font-size: 15px;
					margin: 0 15px;
				}
				img{
					margin: 10px 0;
				}

				div{
					padding: 0 5px;
				}

			}

			ul li:first-child{
				div{
					padding-right:0px;
					padding: 0 5px;
				}

			}

			ul li:last-child{

				display: block;
				width: 50%;
				margin: 50px auto 0;

				div{
					padding-left:0px;
					padding: 0 5px;
				}

			}

		}
	}

	/* --------------------------
	 cont_contact
	----------------------------*/
	#cont_contact{
		.outline{
			p{
				text-align: left; /* 見出しのテキスト位置 */
			}
		}
	}

	.sp_break{
		display: block;
	}



	#header_txt{
		display: inline-block;

		width: 100%;
		background-color: #A5BFCF;
		margin: 0 auto;
		padding: 0px 0;
		text-align: center;

		p{
			color: #ffffff;
			font-size: 18px;
			line-height:1.0;
			margin: 0px 0 0px;
		}
		ul{
			margin: 2px 0 5px;
		}
	}

	header{
		padding: 0px 0 5px;

		#logo{

			display: none;

			text-align: center;
			img{
				max-width: 100px;
			}
		}
		#login{
			position: static;
			text-align: center;
			margin-top:2px;
		}

		.button{
			font-size: 12px;
			line-height: 1.4;
			padding: 3px 3px 3px 10px;
			width: 280px;
			.icon_mail{
				width: 20px;
			}
		}
		.salesman_photo{
			position: absolute;
			right: -1px;
			bottom: -1px;
			width: 52px;
		}

	}

	/* --------------------------
	 レスポンシブ対応
	----------------------------*/
	.pc_top{
		display: none;
	}
	.sp_top{
		display: block;
	}

	/* --------------------------
	 ページトップ
	----------------------------*/
	.pagetop{
		position: fixed;
		bottom: 30px;
		right: 5px;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-o-transform: scale(1.5);
		transform: scale(1.5);
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		z-index: 5;
	}
	.pagetop a{
		display: block;
		width: 40px;
		height: 40px;
		background-color: #000726;
		/*border-radius: 50px;*/
		text-align: center;
		color: #fff;
		font-size: 20px;
		text-decoration: none;
		line-height: 40px;
	}
	.pagetop.show{
		opacity: 0.8;
		filter: alpha(opacity=80);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	/* --------------------------
	 ページトップ
	----------------------------*/
	.pagetop3 {
		position: fixed;
		top: 100px;
		right: 15px;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-o-transform: scale(1.5);
		transform: scale(1.5);
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		z-index: 5;
	}
	.pagetop3 a {
		display: block;
		width: 60px; /* サイズ */
		height: 60px;  /* サイズ */
		background-color: #fff; /* 背景カラー */
		border-radius: 50px;  /* 形 */
		text-align: center;
		color: #EA769D;
		font-size: 0px;  /* fontサイズ */
		text-decoration: none;
		line-height: 0;  /* サイズ */
		border: solid 1px #EA769D;
		span{
			display: block;
			font-size: 16px;
			margin: 0;
			padding-top: 12px;
			line-height:1.4;
			display: none;
		}
		i{
			font-size: 32px;  /* fontサイズ */
			line-height:1.8;
		}
	}
	.pagetop3.show {
		opacity: 0.8;
		filter: alpha(opacity=80);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	/* --------------------------
	 ページトップ
	----------------------------*/
	.pagetop2 {
		position: fixed;
		top: 180px;
		right: 15px;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-o-transform: scale(1.5);
		transform: scale(1.5);
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		z-index: 5;

	}
	.pagetop2 a {
		display: block;
		width: 60px; /* サイズ */
		height: 60px;  /* サイズ */
		background-color: #fff; /* 背景カラー */
		border-radius: 50px;  /* 形 */
		text-align: center;
		color: #EA769D;
		font-size: 0px;  /* fontサイズ */
		text-decoration: none;
		line-height: 0;  /* サイズ */
		border: solid 1px #EA769D;
		span{
			display: block;
			font-size: 14px;
			margin: 0;
			padding-top: 14px;
			line-height:1.0;
			display: none;
		}
		i{
			font-size: 32px;  /* fontサイズ */
			line-height:1.8;
		}

	}
	.pagetop2.show {
		opacity: 0.8;
		filter: alpha(opacity=80);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}

	/* --------------------------
	 フッター
	----------------------------*/
	footer{
		text-align: center;

		ul{
			padding: 0 0;
			text-align: center;
			font-size: 11px;
		}

		ul li{
			display: inline-block;
			line-height: 2.2;
			margin-left: 0px;
			padding-left: 5px;
			border-left: 0px solid #666;
			a{
				color: #ffffff;
				text-decoration: none;
			}
			a:visited{
				color: #ffffff;
			}
			a:hover{
				color: #ffffff;
				text-decoration: none;
			}

		}

		#copyright{
			font-size: 11px;
			line-height: 1.4;
		}

	}

	#wrapper{
		#main{
			padding-top: 0px;
			#content{
				#mainarea{
				}
			}
		}

		/* --------------------------
		 フッター
		----------------------------*/
		footer{
			margin: 40px 0 20px;
			.menu{
				ul{
					width:100%;

					li{
						font-size: 14px;
						display: inline-block;
						width: 50%;
						margin: 15px 0 0;
						padding: 0;
					}
				}
			}
			.icon{
				ul{
					margin-top: 30px;
				}
			}
		}

	}

/* --------------------------
 Slider 左右エフェクト
----------------------------*/
/* 左右透過 */
.slider .slick-slide:not(.slick-center){
	-webkit-filter: opacity(100%);
	-moz-filter: opacity(100%);
	-o-filter: opacity(100%);
	-ms-filter: opacity(100%);
	filter: opacity(100%);
	transition: 0.2s linear;
}

/* 左右ぼかし 
.slider .slick-slide:not(.slick-center){
	-webkit-filter: blur(5px);
	-moz-filter:blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	transition: 0.2s linear;
}*/

/* 左右縮小 
.slider .slick-slide:not(.slick-center) {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}*/

/* ぼかし 縮小 
.slider .slick-slide:not(.slick-center) {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);

	-webkit-filter: blur(5px);
	-moz-filter:blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}*/



.slick-list {
	/* margin-right: -5px; ガター分ネガティブマージン */
}

.slick-slide {
	/* margin-right: 5px; ガター */
}



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

.bg1{
	background-position: 100% 15%;
	background-size: 260px;
}

.zm li {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 220px;	/*画像の幅*/
	height: 180px;	/*画像の高さ*/
}
.zm li img {
	transition-duration: 0.5s;	/*変化に掛かる時間*/
}
.zm li img:hover {
	transform: scale(1.2);	/*画像の拡大率*/
	transition-duration: 0.5s;	/*変化に掛かる時間*/
}

.display_pc{
	display: none;
}
.display_sp{
	display: inline-block;
	margin: 10px 15px
}

.mk3 ul{
	font-size: 0;
	line-height: 0;

	li:first-child .left{
	}

	li:last-child{
	}

	li{

		background-color:#ffffff;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
		border-radius: 5px;

		padding: 2px 15px;
		margin: 0 15px;

		text-align: left;

		.left{
			width: 100%;
			vertical-align: middle;
			display: inline-block;
			font-size: 15px;
			line-height: 1.4;

			img{
				vertical-align: middle;
			}
			.left2{
				width: 20%;
				display: inline-block;
			}
			.right2{
				width: 80%;
				display: inline-block;
				text-align: center;
				color: #87A5BB;
			}
		}
		.right{
			width: 100%;
			vertical-align: middle;
			display: inline-block;
			font-size: 15px;
			line-height: 1.4;
			color: #595D60;
			span{
				border-left: dotted 0px #87A5BB;
				border-top: dotted 1px #87A5BB;
				padding: 25px 15px;
				display: inline-block;
			}

		}

	}
}


















.price .left{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.price .right{
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}

.package_icon{
	margin: 30px 0 80px;

}
.package_icon .icon_ol{
	width: 50%;
	text-align: center;
	
}
.package_icon .icon_ol .icon{
	max-width: 157;
	padding: 5px 5px;
}


.sp_del{
	display: none;
}
.sp_01{
	width: 100%;
	padding: 30px 0;
	p{
		color: #fff;
		font-size: 22px;
		line-height: 1.8;
		margin: 0 15px;
	}
}

.sp_06{
	width:100%;text-align:center;padding:20px 0 20px;
}
.sp_07{
	width:100%;text-align:center;
}
.sp_08{
	color:#fff;padding:0px 0px;font-size:18px;
}
.sp_09{
	padding:0;
}
.sp_10{
	width:100%;text-align:center;
}
.sp_11{
	width:100%;text-align:center;padding:20px 0px 20px; font-size:18px;
}
.sp_12{
	width:100%;text-align:center;padding:20px 0px 20px; font-size:18px;
}
.sp_13{
	width:100%;text-align:center;
}
.sp_14{
	padding:0;
}

.sp_concept_img{
	margin: 0 auto 5px;
}


.architecture{
	width: 100%;
}
div.aftercare{
	width: 100%;
	.left{
		padding: 0;
	}
	.right{
		padding: 0 15px 0 15px;
	}
}
div.aftercare:last-child{
	width: 100%;
}












	#wrapper{
		#main{



	/* --------------------------
	 cont_concept
	----------------------------*/
	#cont_concept{
		margin-top: 20px;
		.outline{
			padding: 0 0 40px;
			ul{

				.slick-prev,.slick-next{
					top: 22%;
				}
			}
		}
	}

	/* --------------------------
	 cont_plan
	----------------------------*/
	#cont_plan{
		.outline{
			ul{
				.slick-prev,.slick-next{
					top: 28%;
				}
			}
		}
	}

	/* --------------------------
	 cont_slider
	----------------------------*/
	#cont_slider{
		.outline{
			ul{
				.slick-prev,.slick-next{
					top: 28%;
				}
			}
		}
	}















			#content{

				/* --------------------------
				 main visual
				----------------------------*/
				#visual-image{
					position: relative;
					left: 160%;
					margin-left: -780px;
				}
				#visual-image2{
					position: relative;
					left: 160%;
					margin-left: -780px;
				}

				#mainarea{
				}
			}

		}
	}
}
@media screen and (max-width:321px){
	#wrapper{
		#main{

	/* --------------------------
	 cont_slider
	----------------------------*/
	#cont_slider{
		.outline{
			ul{
				.slick-prev,.slick-next{
					top: 20%;
				}
			}
		}
	}







			#content{

				/* --------------------------
				 main visual
				----------------------------*/
				#visual-image{
					position: relative;
					left: 200%;
					margin-left: -814px;
				}
				#visual-image2{
					position: relative;
					left: 200%;
					margin-left: -814px;
				}


				#mainarea{
					#content-innr{
					}
				}
			}
		}
	}
}