@charset "utf-8";

.detail{
	width:600px;
	background: rgb(166, 222, 235);
	background: linear-gradient(280deg, rgba(166, 222, 235, 1) 0%, rgba(83, 163, 183, 1) 100%);
	padding:30px;
	h2{
		color: #fff;
	}
	p{
		color: #fff;
	}
}
#appearance{
	.wrap{
		background-image: url("../img/design/mv.jpg");
		background-size:cover;
		background-position:center;
		aspect-ratio:2;
		padding:0;
		display: grid;
        align-items: center;
		margin-bottom: 90px;
		.contents{
			h2{
				color: #12688D;
			}
		}
	}
}
#premiun_view{
	.wrap{
		.contents{
			width: 100%;
			max-width: 100%;
			background: rgb(166, 222, 235);
			background: linear-gradient(280deg, rgba(166, 222, 235, 1) 0%, rgba(83, 163, 183, 1) 100%);
			.contents_inner{
				max-width: 1100px;
				width: calc(100% - 60px);
				margin: 0 auto;
				padding:90px 0;
				position:relative;
				.detail{
					width:inherit;
					padding:0;
					background: inherit;
				}
				.img{
					position:absolute;
					bottom:0;
					right:0;
					width: 40%;
				}
			}
			
		}
	}
}
#entrance_approach{
	.wrap{
		.contents{
			max-width:1500px;
			width:100%;
			.contents_inner{
				&.type1{
					position:relative;
					margin: 90px 0;
					.detail{
						position: absolute;
						top:-20%;
						right:0;
						z-index: 1;
					}
					.img{
						position:relative;
						z-index: 0;
						max-width: 70%;
					}	
				}
				&.type2{
					position:relative;
					.detail{
						position: absolute;
						top:-15%;
						left:0;
						z-index: 1;
					}
					.img{
						position:relative;
						z-index: 0;
						width: 66%;
						margin-left: auto;
					}
				}
			}
		}
	}
}
#entrance_hall{
	.wrap{
		.contents{
			width: 100%;
			max-width: 100%;
			background: rgb(166, 222, 235);
			background: linear-gradient(280deg, rgba(166, 222, 235, 1) 0%, rgba(83, 163, 183, 1) 100%);
			.contents_inner{
				max-width: 1100px;
				width: calc(100% - 60px);
				margin: 0 auto;
				padding:90px 0;
				position:relative;
				.detail{
					width:inherit;
					padding:0;
					background: inherit;
					display: grid;
					grid-template-columns: 1fr 1fr;
				}
			}
			
		}
	}
}
#living_dining_room{
	.wrap{
		.contents{
			max-width:1500px;
			width:100%;
			.contents_inner{
				&.type1{
					position:relative;
					margin: 90px 0 50px;
					.detail{
						position: absolute;
						top:-20%;
						right:0;
						z-index: 1;
					}
					.img{
						position:relative;
						z-index: 0;
						max-width: 70%;
					}	
				}
				&.type2{
					position:relative;
					.detail{
						position: absolute;
						top:15%;
						left:0;
						z-index: 1;
					}
					.img{
						position:relative;
						z-index: 0;
						width: 66%;
						margin-left: auto;
					}
				}
			}
		}
	}
}
#entrance{
	.wrap{
		.contents{
			max-width:1500px;
			width:100%;
			.contents_inner{
				position:relative;
				.detail{
					position: absolute;
					top:25%;
					right:0;
					z-index: 1;
				}
				.img{
					position:relative;
					z-index: 0;
					max-width: 50%;
				}
			}
		}
	}
}
#door{
	.wrap{
		.contents{
			.title{
				display:grid;
				grid-template-columns: 15em 1fr;
				grid-column-gap: 1em;
				align-items: center;
				margin-bottom:30px;
				h2{
					font-size:1.6rem;
					background: linear-gradient(90deg, rgba(83, 163, 183, 1) 0%, rgba(142, 202, 217, 1) 100%);
					padding:0.7em 1em 0.5em;
					color:#fff;
				}
				p.body{
					font-size:1.6rem;
					color: #12688D;
					font-weight: 500;
				}
			}
			.contents_inner{
				display: grid;
				grid-template-columns: 38% 19% 36%;
				grid-column-gap: 3.5%;
				h3{
					font-size:1.3rem;
					margin-bottom: 1em;
				}
				.main_box{
					
				}
				.detail_box{
					img{
						&:last-child{
							margin-top: 10px;
						}
					}
				}
				.color_box{
					ul{
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						grid-column-gap: 10px;
						li{
							.caption{
								font-size:0.8rem;
							}
							&:nth-child(-n+3){
								margin-bottom: 10px;
							}
						}
					}
				}
			}
		}
	}
}

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

	section {
		.wrap {
			.contents {
				.detail{
					width:450px;
					h2 {
						font-size:3.6rem;
					}
					p {
						font-size:1.5rem;
						&.body {
							font-size:2.0rem;
						}
					}
				}
			}
		}
	}
	
	#premiun_view{
		.wrap{
			.contents{
				.contents_inner{
					padding:70px 0;
				}

			}
		}
	}
	#entrance_approach{
		.wrap{
			.contents{
				.contents_inner{
					&.type1{
						margin: 70px 0;	
						.detail{
							position: absolute;
							top:-20%;
							right:0;
							z-index: 1;
						}
						.img{
							position:relative;
							z-index: 0;
							max-width: 70%;
						}	
					}
					&.type2{
						position:relative;
						.detail{
							position: absolute;
							top:-15%;
							left:0;
							z-index: 1;
						}
						.img{
							position:relative;
							z-index: 0;
							width: 66%;
							margin-left: auto;
						}
					}
				}
			}
		}
	}
	#entrance_hall{
		.wrap{
			.contents{
				.contents_inner{
					padding:70px 0;
				}
			}
		}
	}
	#entrance {
		.wrap {
			.contents {
				.detail {
					width:600px;
				}
			}
		}
	}
	#door{
		.wrap{
			.contents{
				.title{
					margin-bottom:20px;
				}
				.contents_inner{
					h3{
						font-size:1.2rem;
					}
				}
			}
		}
	}
}

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

	.detail{
		padding:20px;
	}
	#appearance{
		.wrap{
			margin-bottom: 60px;
			.contents{
				h2{
					font-size:3.2rem;
				}
				p {
					font-size:1.4rem;
					&.body {
						font-size:1.8rem;
					}
				}
			}
		}
	}
	#premiun_view{
		.wrap{
			.contents{
				.contents_inner{
					.detail{
						h2{
							font-size:3.2rem;
						}
						p {
							font-size:1.4rem;
							&.body {
								font-size:1.8rem;
							}
						}
					}
				}
				
			}
		}
	}
	#entrance_approach{
		.wrap{
			.contents{
				.contents_inner{
					h2{
						font-size:3.2rem;
					}
					p {
						font-size:1.4rem;
						&.body {
							font-size:1.8rem;
						}
					}
					&.type1{
						.detail{
							top:-30%;
							width:350px;
						}
					}
					&.type2{
						.detail{
							width:400px;
							top:-20%;
						}
					}
				}
			}
		}
	}
	#entrance_hall{
		.wrap{
			.contents{
				.contents_inner{
					padding:50px 0;
				}
			}
		}
	}
	#living_dining_room{
		.wrap{
			.contents{
				h2{
					font-size:3.2rem;
				}
				p {
					font-size:1.4rem;
					&.body {
						font-size:1.8rem;
					}
				}
				.contents_inner{
					&.type1{
						.detail{
							width:360px;
							top:-30%;
						}
					}
					&.type2{
						.detail{
							width:360px;
							top:30%;
						}
					}
				}
			}
		}
	}
	#entrance{
		.wrap{
			.contents{
				h2{
					font-size:3.2rem;
				}
				p {
					font-size:1.4rem;
					&.body {
						font-size:1.8rem;
					}
				}
				.contents_inner{
					.detail{
						width:400px;
					}
				}
			}
		}
	}
	
}

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

	.detail{
		width:100%;
		padding:20px;
	}
	#appearance{
		.wrap{
			background:none;
			aspect-ratio:unset;
			margin-bottom: 30px;
			padding-top:30px;
			grid-row-gap:20px;
			&::after {
				content:'';
				display:grid;
				aspect-ratio:2;
				background: url("../img/design/mv.jpg") no-repeat center bottom/contain;
			}
			.contents{
				h2{
					font-size:3.0rem;
				}
				p {
					font-size:1.3rem;
					&.body {
						font-size:1.6rem;
					}
				}
			}
		}
	}
	#premiun_view{
		.wrap{
			overflow:hidden;
			.contents{
				.contents_inner{
					width: calc(100% - 40px);
					padding:30px 0;
					.detail{
						position:relative;
						z-index:2;
						h2{
							font-size:3.0rem;
						}
						p {
							font-size:1.3rem;
							width:75%;
							&.body {
								font-size:1.6rem;
								width:100%;
							}
						}
					}
					.img{
						right:max(-15%,-60px);
						width: min(60%,300px);
						z-index:1;
					}
				}
				
			}
		}
	}
	#entrance_approach{
		.wrap{
			.contents{
				.contents_inner{
					h2{
						font-size:3.0rem;
					}
					p {
						font-size:1.3rem;
						&.body {
							font-size:1.6rem;
						}
					}
					&.type1{
						margin: 0;
						.detail{
							position: relative;
							top:auto;
							width:100%;
						}
						.img{
							width: 100%;
							max-width:100%;
						}	
					}
					&.type2{
						.detail{
							position: relative;
							top:auto;
							width:100%;
						}
						.img{
							width: 100%;
							max-width:100%;
						}
					}
				}
			}
		}
	}
	#entrance_hall{
		.wrap{
			.contents{
				h2{
					font-size:3.0rem;
				}
				p {
					font-size:1.3rem;
					&.body {
						font-size:1.6rem;
					}
				}
				.contents_inner{
					width: calc(100% - 40px);
					margin: 0 auto;
					padding:30px 0;
					position:relative;
					.detail{
						grid-template-columns: 1fr;
						width:100%;
					}
				}
				
			}
		}
	}
	#living_dining_room{
		.wrap{
			.contents{
				h2{
					font-size:3.0rem;
				}
				p {
					font-size:1.3rem;
					&.body {
						font-size:1.6rem;
					}
				}
				.contents_inner{
					&.type1{
						margin: 0 0 30px;
						.detail{
							position: relative;
							top:auto;
							width:100%;
						}
						.img{
							width: 100%;
							max-width:100%;
						}	
					}
					&.type2{
						.detail{
							position: relative;
							top:auto;
							width:100%;
						}
						.img{
							width: 100%;
							max-width:100%;
						}
					}
				}
			}
		}
	}
	#entrance{
		.wrap{
			.contents{
				h2{
					font-size:3.0rem;
				}
				p {
					font-size:1.3rem;
					&.body {
						font-size:1.6rem;
					}
				}
				.contents_inner{
					.detail{
							position: relative;
							top:auto;
							width:100%;
					}
					.img{
							width: 100%;
							max-width:100%;
					}
				}
			}
		}
	}
	#door{
		.wrap{
			.contents{
				.title{
					grid-template-columns: 1fr;
					margin-bottom:20px;
					p.body{
						font-size:1.4rem;
					}
				}
				.contents_inner{
					display: grid;
					grid-template-columns: 65% 1fr;
					grid-gap:20px 3%;
					h3{
						font-size:1.3rem;
						margin-bottom: 1em;
					}
					.detail_box{
						img{
							&:last-child{
								margin-top: 10%;
							}
						}
					}
					.color_box{
						grid-area:2/1/3/3;
					}
				}
			}
		}
	}
	
}