@media screen and (min-width: 640px) {
  /*--------------------------------------------------
 common 共通の設定
----------------------------------------------------*/
  .pconly {
    display: block;
  }
  .sponly {
    display: none !important;
  }
  .box950 {
    padding-left: 0;
    padding-right: 0;
  }
.radius {
    border-radius: 50px;
}

.ly_main {
	background-color: #F4F4F4;
	overflow: hidden;
	max-width: 960px;

}
	article{
		overflow: hidden;
	}
	
.sub-title{
	font-size: 7.5em;
}
	
/*-------------------Top main visual*/
#top{
	height:auto;
	margin:0 auto;
	/*padding-bottom: 30%;*/
	padding-bottom: 45%;
	/*height: 120vh;*/}	

/*#top h3 {
	text-align: center;
}	*/
	#top .slick-slide{
		margin-inline-end: 2px;
	}	
.top-container {  
	width: 100%;
	height:1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 48% 1fr 25% 20%;
	grid-template-rows: 15% 30% 35% 1fr;
	grid-template-areas: 
		"a b b b"
		"a c d d"
		"a c d d"
		"e e e e";
	align-items: start;
	position: relative;
}

	
	.slider {
		width: 100%;
		margin: 0 auto;
	}
	
	.grid-left {
		grid-area:a;
		margin-top: 0;
		/*margin-right: -5px;*/
		padding-inline-end: -8px;
		z-index:50;
	}
	
	.grid-worklife {
		grid-area:b;
		width:100%;
		max-width: 800px;
		/*margin-top: 10%;
		margin-left: -8%;*/
		z-index: 99;
		position: absolute;
		top:25px;
		right: 15px;
		text-align: left;
	}
	
	.grid-title {
		grid-area:c;
		justify-self: end;
		margin-top: 80px;
		margin-right:-40%;
		z-index: 99;
	}
	
	.grid-right {
		grid-area:d;
		background-color: #DDDDDD;
		z-index:50;
	}
	
	.grid-right .slider {
		margin-top:-10%;
		margin-left: 12%;
		margin-right: 0;
		padding-bottom: 10%;
	}
	
	.grid-intro {
		grid-area:e;
			
	}
	
	.grid-intro .color-blk{
		position: absolute;
		width: 100%;
		max-width: 950px;
		height: 600px;
		background-color: #A2A898;
		background-image: url("../img/bg-gridw.png");
		background-repeat: repeat;
		top:380px;
	}


/*---------------------------intro*/
/*#intro {
	margin-top: -30vh;
	padding-top: 30vh;}*/

.intro-box{
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 100%;
	max-width:850px;
	background-color:#F7F7F7;
	margin:0 auto;
	 padding: 50px;
	 z-index: 99;
}

.intro-box p{
	font-size: 1.3em;
	margin-bottom:20px;
	line-height: 1.6;
	letter-spacing: 0.1em;
}
	
	
.openhouse {
	margin: 80px auto 30px;
	padding: 20px;
	width: 100%;
	max-width: 600px;
}
	
	@media screen and (min-width: 640px) and (max-width: 1250px) {
	#top {
		padding-bottom: 35%;
	}
	.grid-title{
		width:95%;
	}
	.intro-box {
		top: 80%;
	}	
	}
	
	@media screen and (min-width: 640px) and (max-width: 900px) {
		.intro-box {
		top: 70%;
	}	
	}
	
	@media screen and (min-width: 640px) and (max-width: 750px) {
		.intro-box {
		top: 60%;
	}	
	}
	
/*-------------------------LifeStyle*/
#lifestyle .sub-title{
	text-align: right;
	padding-right: 130px;
	padding-bottom: 0;
}
	
#lifestyle .life-intro h3{
	font-size: 1.4em;
	margin-top: -30px;
	margin-bottom: 20px;
}

#lifestyle .life-pcbox{
	max-width: 1400px;
	margin: 0 auto;
}
	
#lifestyle .life-box-on{
	position: relative;	
	margin-right: 0;
}
	
#lifestyle .title-on{
	position:absolute;
	top:0;
	left: -45px;
	/*opacity: 0.5;*/
}

#lifestyle .life-box-off{
	position: relative;	
	margin-left: 0;
}
	
#lifestyle .title-off{
	position:absolute;
	bottom:20%;
	right: -100px;
	/*opacity: 0.5;*/
}

.life-box-on .life-flexcontainer{
	justify-content: flex-start;
	margin-bottom: 80px;
	margin-right: 0;
}

.life-box-off .life-flexcontainer{
	justify-content: flex-end;
	padding-bottom: 120px;
}
	
.life-flexcontainer{
	width: 100%;
	max-width: 1200px;
	display: flex!important;
	flex-wrap: wrap;
}

.life-box .life-item{
	width: calc(100% / 3 - 50px);
	margin-right: 20px;
	background-color: #ffffff;
	border: solid 1px #000000;
}

#lifestyle ul li:nth-child(3){
	margin-right: 0;
}
	
#lifestyle .time {
	font-size: 4.3em;
}
	
@media screen and (min-width: 641px) and (max-width: 1250px) {
	
	#lifestyle .life-pcbox {
		max-width: 900px;
	}
	#lifestyle .time {
		font-size: 2.5em;
	}
	
	#lifestyle .life-item h5{
		font-size: 1.3em;
		padding-left:1em;
	}
}

@media screen and (min-width: 641px) and (max-width: 1050px) {
	#lifestyle .title-off{
		right:-50px;
	}
	.photo_point_2f{
		margin-left:-80px!important;
	}
	.comment_point_2f{
		padding-left: 60px!important;
	}
}

@media screen and (min-width: 641px) and (max-width: 900px) {
	#lifestyle .sub-title{
		font-size: 6em;
		padding-right:0;
	}
	
	#lifestyle .title-on{
		left: 0;
	}
	
	#lifestyle .title-off{
		position:absolute;
		bottom: auto;
		right: auto;
		top:0;
		left:0;
	}
	
	.life-box-off .life-flexcontainer{
		justify-content: flex-start;
	}
	
	.life-box .life-item{
	width: calc(100% / 2 - 50px);
	margin-right: 20px;
	justify-content: flex-start;
}
	
	#lifestyle ul li:nth-child(3){
	margin-left: 30px;
	}
	
	/*.life-box-off ul li:nth-child(3){
	margin-right: 20px!important;*/
}


/*-------------------------------Photos*/
	
.point-box{
		max-width: 100%;
	}
	
.comment_point_1f{
	width:60%;
	background-color:#e8e8e8;
	padding:60px 100px 140px 80px;
	margin:160px -150px -100px -50px;
}

.photo_point_1f{
	width: 50%;
	margin:50px 0px 50px 100px;
}

.comment_point_2f{
	width:55%;
	background-color:#fff6eb;
	padding:60px 80px 120px 100px;
	margin:150px -130px -80px -80px;
	order:2;
}

.photo_point_2f{
	width: 55%;
	margin:50px -100px 50px 0px;
	order:1;
	z-index: 10;
}

.photo_point_2f2{
	margin:0px 0px 0px 15%;
	order:3;
	margin-right: 0;
}
	
@media screen and (min-width: 641px) and (max-width: 900px) {
	.comment_point_1f{
		margin: 80px -150px -100px -50px;
		padding: 50px 80px 80px 80px;
	}
	.photo_point_1f2,
	.photo_point_2f2{
		margin-top:50px;
	}
	.photo_point_2f{
		margin-left:-80px;
	}
	.comment_point_2f{
		margin: 80px -130px -80px -120px;
		padding: 50px 60px 50px 50px;
		overflow-x: hidden;
	}
}


/*----------------------------Area Map*/	
	
	
/*--------------------------------VirtualTour*/	
#VirtualTour{
	padding-top: 80px;
	}	
	
#VirtualTour .sub-title{
	font-size: 5em;
	}


  /*--------------------------------------------------
details 物件概要
----------------------------------------------------*/
  #details .box950 {
    margin-top: 80px;
  }
}