@charset "utf-8";

/* ----------------------------------------------------------------------------
	ランドプラン
	landplan/
---------------------------------------------------------------------------- */
/* title image*/
#content #h_ttl_area .bgimg{
	background: url( "../../landplan/img/main_img.jpg") bottom center/cover no-repeat;
}


#content h2.ttl{
	width: 430px;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	padding: 0 0 0.5em 0;
	margin: 0 auto 2em auto;
	color: var(--P1-color);
	border-bottom: var(--P1-color) 1px solid;
}

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


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

}
@media only screen and (max-width: 768px) {
	
	#content #h_ttl_area{
		background: url( "../../landplan/img/main_img_sp.jpg") bottom center/cover no-repeat;
	}
}
@media only screen and (max-width: 480px) {
}



.slEtAnime{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(30% 20% 30% 20%);
	transition: clip-path 1.0s ease-out;
	transition: all 1.0s;
}
.slEtAnime img{	
  	transform: translate(0, 20px) scale(1.08,1.08);
	transition: all 1.0s;
}

.slEtLAnime{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(50% 70% 50% 70%);
	transition: clip-path 1.0s ease-out;
	transition: all 1.0s;
}
.slEtLAnime img{	
  	transform: translate(0, 20px) scale(1.08,1.08);
	transition: all 1.0s;
}
.slEtRAnime{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(50% 70% 50% 70%);
	transition: clip-path 1.0s ease-out;
	transition: all 1.0s;
}
.slEtRAnime img{	
  	transform: translate(0, 20px) scale(1.08,1.08);
	transition: all 1.0s;
}



.slEtLmove{
	opacity: 1;
	clip-path: inset(0% 0% 0% 0%);
}
.slEtLmove img{
	transform: translate(0, 0) scale(1.0,1.0);
	transition: all 1.0s;
}



/* w_image_wrap */
#content .w_image_wrap{
	width: 100%;
	position: relative;
	margin: 0 0 50px 0;
	background: #FFF;
	box-sizing: border-box;
	overflow: hidden;
}

#content .w_image_wrap h3{
	width: 100%;
	font-size: 2.25rem;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: var(--base-color);
}
#content .w_image_wrap h3.left{
	text-align: left;
}
#content .w_image_wrap p{
	width: 100%;
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 2.0;
}

#content .w_image_wrap .image_area{
	width: 100%;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
#content .w_image_wrap .image_area figure{
	width: 100%;
	position: relative;
	padding: 0 0 0 0;
}
#content .w_image_wrap .image_area h5{
	width: 100%;
	position: absolute;
	top: 20px;
	left: 20px;
	text-align: left;
	font-size: 1.5rem;
	text-shadow: 0px 0px 15px rgba(0, 0, 0, 1.0);
	color: var(--wBg-color);
}
#content .w_image_wrap .image_area figcaption{
	position: absolute;
	bottom: 15px;
	right: 10px;
}
#content .w_image_wrap .image_area h3{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	color: #FFF;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1.0), 0px 0px 25px rgba(0, 0, 0, 1.0);
}
#content .w_image_wrap .image_area h4{
	width: 90%;
	font-size: 1.125rem;
	line-height: 1.4;
	padding: 0 0 0 0;
	margin: 15px auto 0 auto;
	text-align: right;
	position: relative;
}
#content .w_image_wrap .image_area h4 span{
	background: rgba(255,255,255,1.00);
	padding: 0 0 0 10px;
	position: relative;
	z-index: 1;
}
#content .w_image_wrap .image_area h4::before{
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 0;
	background: rgba(96,96,96,1.00);
	z-index: 0;
}


#content .w_image_wrap .txt_area{
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	padding: 15vh 0
}
#content .w_image_wrap .txt_area h3{
	padding: 0 0 1em 0;
}


#content .w_image_wrap .txt_area .clm{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: start;
	padding: 60px 0 0 0;
}
#content .w_image_wrap .txt_area .clm .box{
	width: 48%;
	position: relative;
}
#content .w_image_wrap .txt_area .clm .box figure{
	width: 100%;
	position: relative;
	padding: 0 0 0 0;
}
#content .w_image_wrap .txt_area .clm .box .line{
	width: 4px;
    height: auto;
    position: absolute;
    top: 25px;
    left: 58%;
}



#content .w_image_wrap .txt_area .clm .box h4{
	font-size: 1.125rem;
	line-height: 1.4;
	padding: 0 0 0 0;
	margin: 0 0 15px 0;
	text-align: right;
	position: relative;
}
#content .w_image_wrap .txt_area .clm .box h4 span{
	background: rgba(255,255,255,1.00);
	padding: 0 0 0 10px;
	position: relative;
	z-index: 1;
}
#content .w_image_wrap .txt_area .clm .box h4::before{
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 0;
	background: rgba(96,96,96,1.00);
	z-index: 0;
}




#content .w_image_wrap .point_area{
	width: 100%;
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#content .w_image_wrap .point_area .unit{
	width: calc(100% / 3);
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
}
#content .w_image_wrap .point_area .unit::before{
	content: "";
	display: block;
	padding-top: 90%;
}
#content .w_image_wrap .point_area .unit figure{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
}


#content .w_image_wrap .point_area .unit .copy_area{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}
#content .w_image_wrap .point_area .unit .copy_area h3{
	margin: auto;
	filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.84));
	line-height: 0;
}
#content .w_image_wrap .point_area .unit .copy_area p{
	font-size: 1.0vw;
	text-align: center;
	color: #FFF;
	text-shadow: 1px 1px 5px rgba(0,0,0,0.84);
}
#content .w_image_wrap .point_area .unit .copy_area p sup{
	font-size: 0.625em;
}
#content .w_image_wrap .point_area .unit:nth-child(1) .copy_area h3{
	width: calc(27.62487257900102% * 1.1);
}
#content .w_image_wrap .point_area .unit:nth-child(2) .copy_area h3{
	width: calc(52.29357798165138% * 1.1);
}
#content .w_image_wrap .point_area .unit:nth-child(3) .copy_area h3{
	width: calc(44.03669724770642% * 1.1);
}
#content .w_image_wrap .point_area .unit:nth-child(4) .copy_area h3{
	width: calc(49.24489795918367% * 1.1);
}
#content .w_image_wrap .point_area .unit:nth-child(5) .copy_area h3{
	width: calc(49.59183673469388% * 1.1);
}
#content .w_image_wrap .point_area .unit:nth-child(6) .copy_area h3{
	width: calc(47.24489795918367% * 1.1);
}



@media only screen and (max-width: 999px) {
	#content .w_image_wrap{
		margin: 0 0 50px 0;
	}

	#content .w_image_wrap h3{
		font-size: 1.875rem;
	}

	#content .w_image_wrap .image_area h5{
		top: 20px;
		left: 20px;
		font-size: 1.375rem;
	}
	#content .w_image_wrap .image_area figcaption{
		bottom: 15px;
	}

	#content .w_image_wrap .txt_area{
		padding: 15vh 0
	}

	#content .w_image_wrap .txt_area .clm{
		padding: 50px 0 0 0;
	}
	#content .w_image_wrap .txt_area .clm .box{
		width: 48%;
	}
	
	#content .w_image_wrap .txt_area .clm .box .line{
		width: 0.86%;
		height: auto;
		position: absolute;
		top: 25px;
		left: 58%;
	}
	
	
	#content .w_image_wrap .point_area{
	}
	#content .w_image_wrap .point_area .unit{
		width: calc(100% / 3);
	}
	#content .w_image_wrap .point_area .unit::before{
		padding-top: 90%;
	}

	#content .w_image_wrap .point_area .unit .copy_area p{
		font-size: 1.3vw;
	}
	#content .w_image_wrap .point_area .unit:nth-child(1) .copy_area h3{
		width: calc(27.62487257900102% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(2) .copy_area h3{
		width: calc(52.29357798165138% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(3) .copy_area h3{
		width: calc(44.03669724770642% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(4) .copy_area h3{
		width: calc(49.24489795918367% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(5) .copy_area h3{
		width: calc(49.59183673469388% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(6) .copy_area h3{
		width: calc(47.24489795918367% * 1.6);
	}
}
@media only screen and (max-width: 768px) {
	
	#content .w_image_wrap{
		margin: 0 0 40px 0;
	}

	#content .w_image_wrap h3{
		font-size: 1.625rem;
	}
	#content .w_image_wrap p{
		text-align: left;
	}

	#content .w_image_wrap .image_area h5{
		top: 15px;
		left: 15px;
		font-size: 1.125rem;
	}
	#content .w_image_wrap .image_area figcaption{
		bottom: 10px;
	}

	#content .w_image_wrap .txt_area{
		padding: 15vh 0
	}

	#content .w_image_wrap .txt_area .clm{
		padding: 40px 0 0 0;
	}
	#content .w_image_wrap .txt_area .clm .box{
		width: 48%;
	}
	
	#content .w_image_wrap .point_area{
	}
	#content .w_image_wrap .point_area .unit{
		width: calc(100% / 2);
	}
	#content .w_image_wrap .point_area .unit::before{
		padding-top: 90%;
	}

	#content .w_image_wrap .point_area .unit .copy_area p{
		font-size: 1.3vw;
	}
	#content .w_image_wrap .point_area .unit:nth-child(1) .copy_area h3{
		width: calc(27.62487257900102% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(2) .copy_area h3{
		width: calc(52.29357798165138% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(3) .copy_area h3{
		width: calc(44.03669724770642% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(4) .copy_area h3{
		width: calc(49.24489795918367% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(5) .copy_area h3{
		width: calc(49.59183673469388% * 1.6);
	}
	#content .w_image_wrap .point_area .unit:nth-child(6) .copy_area h3{
		width: calc(47.24489795918367% * 1.6);
	}
}
@media only screen and (max-width: 480px) {
	#content .w_image_wrap h3{
		font-size: 1.412rem;
	}

	#content .w_image_wrap .image_area h5{
		top: 15px;
		left: 15px;
		font-size: 1.125rem;
	}

	#content .w_image_wrap .txt_area{
		padding: 10vh 0
	}
	
	#content .w_image_wrap .txt_area .clm .box{
		width: 100%;
	}
	#content .w_image_wrap .txt_area .clm .box:nth-child(1){
		margin: 0 0 30px 0;
	}
}




#content #landplan_area{
	width: 100%;
	position: relative;
	background: #eeeeee;
	padding: 90px 0;
}

#content #landplan_area .txt_area{
	position: relative;
	padding: 0 0 0 0;
}
#content #landplan_area .txt_area h4{
	width: 600px;
	position: relative;
	margin: 0 auto;
	padding: 0 0 40px 0;
}
#content #landplan_area .txt_area h3{
	width: 100%;
	position: relative;
	margin: 0 auto;
	font-size: 1.375rem;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 1.6;
}


#content #landplan_area .landplan_map{
	width: 100%;
	position: relative;
}
#content #landplan_area .landplan_map figcaption{
	padding: 0 10px 0 0;
}

#content #landplan_area .landplan_map .txt_in{
	position: absolute;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	padding: 0 800px 0 0;
}
#content #landplan_area .landplan_map .txt_in h5{
	font-size: 1.375rem;
	text-align: left;
	line-height: 1.5;
	padding: 0 0 0.7em 0;
	letter-spacing: 0.1em;
	color: var(--base-color);
}
#content #landplan_area .landplan_map .txt_in p{
	text-align: left;
	line-height: 1.8;
}


#content #landplan_area .list_area{
	width: 1320px;
	position: relative;
	padding: 60px 0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#content #landplan_area .list_area li{
	width: 300px;
	margin: 0 15px 30px 15px;
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
}
#content #landplan_area .list_area li figure{
	width: 100%;
	position: relative;
}
#content #landplan_area .list_area li .txt{
	width: 100%;
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}
#content #landplan_area .list_area li .txt i{
	width: auto;
	height: 30px;
	display: block;
	filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.84));
}
#content #landplan_area .list_area li .txt i img{
	width: auto;
	height: 100%;
	display: block;
}
#content #landplan_area .list_area li .txt h6{
	width: calc(100% - 45px);
	display: block;
	color: #FFF;
	font-size: 1.125rem;
	text-align: left;
	line-height: 1.4;
	text-shadow: 0 0 5px rgba(0,0,0,0.9);
}

@media only screen and (max-width: 1319px) {
	#content #landplan_area{
		padding: 90px 0;
	}

	#content #landplan_area .txt_area{
	}
	#content #landplan_area .txt_area h4{
		width: 600px;
		padding: 0 0 40px 0;
	}
	#content #landplan_area .txt_area h3{
		font-size: 1.375rem;
	}


	#content #landplan_area .landplan_map .txt_in{
		position: absolute;
		bottom: 90px;
		left: 50%;
		transform: translateX(-50%);
		padding: 0 60% 0 0;
	}
	#content #landplan_area .landplan_map .txt_in h5{
		font-size: 1.375rem;
	}


	#content #landplan_area .list_area{
		width: 90%;
		position: relative;
		padding: 50px 0;
	}
	#content #landplan_area .list_area li{
		width: 23%;
		margin: 0 1% 20px 1%;
	}
	#content #landplan_area .list_area li .txt{
		top: 10px;
		left: 10px;
	}
	#content #landplan_area .list_area li .txt i{
		width: auto;
		height: 30px;
	}
	#content #landplan_area .list_area li .txt h6{
		width: calc(100% - 45px);
		font-size: 1.2vw;
	}
}
@media only screen and (max-width: 999px) {
	#content #landplan_area{
		padding: 70px 0;
	}

	#content #landplan_area .txt_area{
	}
	#content #landplan_area .txt_area h4{
		width: 70%;
		padding: 0 0 30px 0;
	}
	#content #landplan_area .txt_area h3{
		font-size: 1.250rem;
	}


	#content #landplan_area .landplan_map .txt_in{
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		padding: 0 60% 0 0;
	}
	#content #landplan_area .landplan_map .txt_in h5{
		font-size: 1.250rem;
	}


	#content #landplan_area .list_area{
		width: 90%;
		position: relative;
		padding: 40px 0;
	}
	#content #landplan_area .list_area li{
		width: 32%;
		margin: 0 0.5% 15px 0.5%;
	}
	#content #landplan_area .list_area li .txt{
		top: 10px;
		left: 10px;
	}
	#content #landplan_area .list_area li .txt i{
		width: auto;
		height: 25px;
	}
	#content #landplan_area .list_area li .txt h6{
		width: calc(100%);
		font-size: 1.8vw;
		padding: 0.8em 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#content #landplan_area{
		padding: 60px 0;
	}

	#content #landplan_area .txt_area{
	}
	#content #landplan_area .txt_area h4{
		width: 70%;
		padding: 0 0 30px 0;
	}
	#content #landplan_area .txt_area h3{
		font-size: 1.125rem;
	}


	#content #landplan_area .landplan_map .txt_in{
		position: relative;
		bottom: auto;
		left: auto;
		transform: translateX(0%);
		padding: 10px 0 0 0;
	}
	#content #landplan_area .landplan_map .txt_in h5{
		font-size: 1.125rem;
	}
	
	#content #landplan_area .list_area{
		width: 90%;
		position: relative;
		padding: 40px 0;
	}
	#content #landplan_area .list_area li{
		width: 100%;
		margin: 0 0 5px 0;
	}
	#content #landplan_area .list_area li .txt{
		height: 100%;
		top: 0;
		left: 0;
		align-items: center;
		box-sizing: border-box;
		padding: 0 0 0 15px;
	}
	#content #landplan_area .list_area li .txt i{
		width: auto;
		height: 28px;
	}
	#content #landplan_area .list_area li .txt h6{
		width: calc(100% - 40px);
		font-size: 2.8vw;
		padding: 00 0 0;
	}
}
@media only screen and (max-width: 480px) {
}