@charset "utf-8";

#header {
	position:fixed;
	.header {
		transition: .5s;
		background-color: transparent;
	}
}

body {
	&:has(#mv.step3:not(.step4)) {
		#header {
			.header {
				.header_inner {
					.menu-gmenu-container {
						.menu {
							li {
								a {
									color:#FFFFFF;
									.font_en {
										filter:brightness(3);
									}
								}
							}
						}
					}
				}
			}
		}
	}
	&:has(#mv.step3.step4) {
		#header {
			.header {
				background-color: #FFFFFF;
				box-shadow: 0 3px 6px rgba(0,0,0,.15);
			}
		}
	}
}

#main {
	overflow:clip;
}

section {
	.wrap {
		padding:120px 0;
		.contents {
			h2 {
				font-size:3.6rem;
				display:grid;
				grid-row-gap:.66em;
				margin-bottom:1em;
				.font_en {
					font-size:1.6rem;
					color:var(--color_sub);
				}
				.min {					
					color:var(--color_def);
					font-weight:400;
				}
			}
			.btn {
				font-size:1.6rem;
				line-height:1;
				width:240px;
				height:60px;
				display:grid;
				grid-template-columns:auto .8em;
				align-items:center;
				justify-content:center;
				grid-column-gap:1.33em;
				border:1px solid var(--color_sub);
				color:var(--color_sub);
				border-radius:30px;
				padding-left:2em;
				img {
					transform:translateY(.1em);
					fill: var(--color_sub);
				}
			}
		}
	}
}

#mv {
	.wrap {
		padding:0;
		position:relative;
		background-color:#B7B7B7;
		&::before {
			content:'';
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			background-color:rgba(0,0,0,.8);
			z-index:2;
			transition:opacity .66s ease-in-out;
			opacity:0;
			pointer-events:none;
		}
		.contents {
			height:100vh;
			height:100dvh;
			position:relative;
			z-index:2;
			display:grid;
			align-items:center;
			.cpy {
				h1 {
					max-width:530px;
					margin-bottom:60px;
					svg {
						max-width:100%;
					}
				}
				p {
					color:var(--color_main);
					line-height:1;
					overflow: hidden;
					.font_en {
						white-space: nowrap;
					}
				}
			}
			.step {
				position:absolute;
				z-index:3;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%);
				width:100%;
				height:100%;
				max-width:680px;
				max-height:320px;
				display:grid;
				align-content:center;
				justify-items:center;
				grid-row-gap:40px;
				.font_en {
					color:var(--color_main);
					font-size:1.6rem;
					line-height:1;
					transition:.66s;
					overflow:hidden;
					span {
						display:block;
						transition:.66s;
						transform:translateY(110%);
					}
				}
				h2 {
					font-size:3.2rem;
					font-weight:500;
					display:grid;
					grid-row-gap:.66em;
					span {
						font:inherit;
					}
					.txt {
						overflow:hidden;
						span {
							display:block;
							transition:.66s;
							transform:translateY(110%);
							color:#000000;
						}
					}
				}
				.border {
					border:1px solid rgba(0,0,0,.66);
					position:absolute;
					width:0%;
					height: 0%;
					opacity: 0;
					transition:.66s;
					&.border1 {
						left:0;
						top:0;
						transform-origin:left top;
						/* height:auto; */
						border-bottom-color:transparent;
						border-right-color:transparent;
					}
					&.border2 {
						right:0;
						bottom:0;
						transform-origin:right bottom;
						/* height:auto; */
						border-top-color:transparent;
						border-left-color:transparent;
					}
				}
				&.cpy3 {
					.font_en {
						span {
							filter: brightness(2);
						}
					}
					h2 {
						.txt {
							span {
								color:#FFFFFF;
							}
						}
					}
				}
			}
		}
		.lines {
			.line {
				width:100vw;
				height:1px;
				background-color:#FFFFFF;
				position:absolute;
				left:0;
				top:50%;
				opacity: 0;
				&:not(.line1) {
					scale: 0 1;
				}
				&.line1 {
					width:1px;
					height:100vh;
					left:10%;
					top:0;
					scale:1 0;
				}
				&.line2 {
					top:25%;
				}
				&.line3 {
					top:48%;
				}
				&.line4 {
					top:52%;
				}
				&.line5 {
					top:66%;
				}
				&.line6 {
					top:75%;
				}
			}
		}
	}
	&.step1 {
		.wrap {
			background-color: #FFFFFF;
			transition: 1s;
		}
	}
	&.step2 {
		.wrap {
			.contents {
				.cpy2 {
					.font_en {
						span {
							transform:translateY(0);
						}
					}
					h2 {
						.txt {
							span {
								transform:translateY(0);
							}
						}
					}
					.border {
						width: 10%;
						height: 20%;
						opacity: 1;
					}
				}
			}
		}
		&.step3 {
			.wrap {
				&::before {
					opacity:1;
					pointer-events:all;
				}
				.contents {
					.cpy2 {
						.font_en {
							span {
								transform:translateY(110%);
							}
						}
						h2 {
							.txt {
								span {
									transform:translateY(110%);
								}
							}
						}
						.border {
							width:calc(100% - 20px);
							height:calc(100% - 20px);
							border-color:#FFFFFF;
						}
					}
					.cpy3 {
						.font_en {
							span {
								transform:translateY(0);
							}
						}
						h2 {
							.txt {
								span {
									transform:translateY(0);
								}
							}
						}
					}
				}
			}
		}
	}
	.bganim {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:1;
	}
}
#loading {
	position:fixed;
	z-index:9999;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#B7B7B7;
	display:grid;
	align-content:center;
	justify-items:center;
	grid-row-gap:15px;
	transition:opacity .5s ease-in-out;
	p {
		color:#FFFFFF;
		font-size:1.8rem;
		font-weight:400;
		line-height:1;
		transition:opacity .66s ease-in-out;
		opacity: 0;
	}
	.line {
		width:100%;
		height:1px;
		background-color:#FFFFFF;
		transition:opacity .66s ease-in-out,transform .66s ease-in-out;
		transform-origin:left center;
		transform:scaleX(0);
		opacity:0;
	}
	&.show {
		p {
			opacity: 1;
		}
		.line {
			transform:scaleX(1);
			opacity:1;
		}
		&.loaded {
			opacity:0;
			pointer-events:none;
		}
	}
}

#estate {
	.wrap {
		.contents {
			.ttlbox {
				display:grid;
				grid-template-columns:1fr 70%;
				align-items:end;
				justify-content:space-between;
				margin-bottom:60px;
				h2 {
					margin:0;
				}
				.link {
					display:grid;
					grid-template-columns:repeat(4,1fr);
					li {
						color:#868691;
						cursor:pointer;
						display:grid;
						height:3.6em;
						align-items:center;
						justify-content:center;
						border-bottom:3px solid var(--color_border);
						&.active {
							color:var(--color_def);
							font-weight:600;
							border-color:var(--color_main);
						}
					}
				}
			}
			.btn {
				margin:0 auto;
			}
			.sliders {
				position:relative;
				margin-bottom:60px;
			}
			.slider_wrap {
				transition:.3s;
				&:not(.active) {
					opacity:0;
					pointer-events:none;
					overflow:hidden;
					height:0;
				}
				margin:0 -14px;
				.slide {
					padding:0 14px;
					&.member {
						a {
							.img {
								overflow:hidden;
								img {
									filter:blur(5px);
								}
							}
							p {
								line-height:1.5;
							}
						}
						.btn {
							margin:10px auto 0;
							padding:0;
							grid-template-rows:unset;
							grid-template-columns:1fr;
							text-align:center;
							border:none;
							background-color:#000000;
							color:#FFFFFF;
							border-radius:0;
							height:3em;
						}
					}
					a {
						display:grid;
						grid-template-rows:auto auto 1fr;
						border-bottom:1px solid var(--color_border);
						padding-bottom:25px;
						.img {
							position:relative;
							margin-bottom:25px;
							img {
								display:block;
								aspect-ratio:.8;
								object-fit:cover;
								width: 100%;
								max-width: 200%;
							}
						}
						.cat {
							font-size:1.4rem;
							background-color:var(--color_main);
							color:#FFFFFF;
							line-height:1;
							display:grid;
							align-items:center;
							justify-content:center;
							height:1.6em;
							width:4.5em;
							letter-spacing:.1em;
							margin-bottom:1em;
							&.investment {
								background-color:var(--color_main);
							}
							&.sale {
								background-color:#0066B3;
							}
							&.rent {
								background-color:#017439;
							}
						}
						dl {
							font-size:1.4rem;
							display:grid;
							grid-template-columns:auto 1fr;
							grid-column-gap: 1em;
							align-items:center;
							grid-row-gap:.5em;
							dt {
								font-weight:600;
							}
							dd {
								line-height:1.5;
							}
						}
						&.soldout {
							pointer-events:none;
							.img {
								img {
									filter:brightness(.5);
								}
								&::before {
									content:'Sold Out';
									font-family: "Figtree", sans-serif;
									white-space: nowrap;
									font-weight: 300;
									font-style: normal;
									color:#FFFFFF;
									font-size:3.2rem;
									position:absolute;
									z-index:1;
									top:50%;
									left:50%;
									transform:translate(-50%,-50%);
								}
							}
						}
					}
				}
				.slick-arrow {
					width:50px;
					height:50px;
					background:url(../img/common/arrow.svg) no-repeat center center/25% auto var(--color_bg);
					border-radius:50%;
					transform:unset;
					top:35%;
					z-index:99;
					&::before {
						content:none;
					}
					&.slick-prev {
						left:-60px;
						transform:rotate(-180deg);
					}
					&.slick-next {
						right:-60px;
					}
				}
			}
		}
	}
}

#service {
	.wrap {
		background-color:var(--color_bg);
		padding-bottom:60px;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:50% 1fr;
				align-items:center;
				grid-column-gap:8%;
				.detail {
					position:relative;
					order:1;
					padding:90px 0;
					* {
						position:relative;
						z-index:1;
					}
					&::before {
						content:'';
						display:block;
						background-color:#FFFFFF;
						width:100vw;
						height:100%;
						position:absolute;
						z-index:0;
						right:-50vw;
						top:0;
					}
					p {
						font-size:1.5rem;
						margin-bottom:3em;
					}
				}
				.img {
					position:relative;
					z-index:1;
					img {
						display:block;
						transform:scale(1.1);
						transform-origin:right center;
					}
				}
			}
		}
	}
}

#company {
	.wrap {
		background-color:var(--color_bg);
		padding-top:60px;
		padding-bottom:0;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 50%; 
				align-items:center;
				grid-column-gap:8%;
				.detail {
					position:relative;
					padding:90px 0;
					* {
						position:relative;
						z-index:1;
					}
					&::before {
						content:'';
						display:block;
						background-color:#FFFFFF;
						width:100vw;
						height:100%;
						position:absolute;
						z-index:0;
						left:-50vw;
						top:0;
					}
					p {
						font-size:1.5rem;
						margin-bottom:3em;
					}
				}
				.img {
					position:relative;
					z-index:1;
					img {
						display:block;
						transform:scale(1.1);
						transform-origin:left center;
					}
				}
			}
		}
	}
}

#news {
	.wrap {
		padding-top:150px;
		background:url(../img/top/news_bg.png) no-repeat center center/cover var(--color_bg);
		.contents {
			.contents_inner {
				background-color:#FFFFFF;
				padding:60px;
				display:grid;
				grid-template-columns:auto 1fr;
				grid-column-gap:8%;
				align-items:center;
				.detail {
					h2 {
						font-size:1.4rem;
						grid-row-gap:1.33em;
						margin-bottom:4em;
						.font_en {
							font-size:3.2rem;
							font-weight:300;
							letter-spacing:.03em;
							color:var(--color_def);
						}
					}
					.btn {
						width:190px;
					}
				}
				.news_wrap {
					dl {
						font-size:1.4rem;
						padding:1.5em 0;
						display:grid;
						grid-template-columns:8em 1fr;
						border-bottom:1px solid var(--color_border);
						dt,dd {
							line-height:1.5;
						}
					}
				}
			}
		}
	}
}


@media (hover:hover) {
}

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

	#estate {
		.wrap {
			.contents {
				.slider_wrap {
					.slick-arrow {
						&.slick-prev {
							left:-10px;
						}
						&.slick-next {
							right:-10px;
						}
					}
				}
			}
		}
	}
	
}

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

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

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

	#header {
		.header {
			background-color: #FFFFFF;
		}
	}

	section {
		.wrap {
			padding:60px 0;
			.contents {
				h2 {
					font-size:2.6rem;
					grid-row-gap:5;
					.font_en {
						font-size:1.4rem;
					}
				}
				.btn {
					font-size:1.4rem;
					width:190px;
					height:50px;
					border-radius:25px;
				}
			}
		}
	}

	#mv {
		.wrap {
			.contents {
				.cpy {
					h1 {
						svg {
							max-width:90%;
						}
					}
				}
				.step {
					.font_en {
						font-size:1.4rem;
					}
					h2 {
						font-size: min(4.5vw,3.2rem);
					}
				}
			}
		}
		&.step2 {
			.wrap {
				.contents {
					.cpy2 {
						.border {
							width: min(20%,70px);
						}
					}
				}
			}
			&.step3 {
				.wrap {
					.contents {
						.cpy2 {
							.border {
								width:calc(100% - 10px);
								height:calc(100% - 10px);
							}
						}
						
					}
				}
			}
		}
	}

	#estate {
		.wrap {
			.contents {
				.ttlbox {
					grid-template-columns:1fr;
					grid-row-gap:30px;
					margin-bottom:40px;
					.link {
						font-size:1.4rem;
						li {
							height:3.0em;
						}
					}
				}
				.btn {
					margin-right:0;
				}
				.sliders {
					margin-bottom:20px;
				}
				.slider_wrap {
					margin:0;
					.slick-list {
						overflow:visible;
					}
					.slide {
						width:305px;
						padding:0 25px 0 0;
						a {
							.img {
								img {
									aspect-ratio:1.2;
								}
							}
						}
					}
					.slick-arrow {
						width:30px;
						height:30px;
						top:auto;
						bottom:-60px;
						background-size:40% auto;
						background-color:#e5e5e5;
						&.slick-prev {
							left:0px;
						}
						&.slick-next {
							right:auto;
							left:50px;
						}
					}
				}
			}
		}
	}

	#service {
		.wrap {
			padding-bottom:0;
			.contents {
				.contents_inner {
					grid-template-columns:1fr;
					position:relative;
					&::before {
						content:'';
						display:block;
						position:absolute;
						background-color:#FFFFFF;
						width:100vw;
						height:calc(100% - 30px);
						left:-20px;
						bottom:0;
					}
					.detail {
						padding:40px 0;
						p {
							font-size:1.4rem;
							margin-bottom:2em;
						}
						.btn {
							margin-left:auto;
						}
						&::before {
							content:none;
						}
					}
					.img {
						position:relative;
						z-index:1;
						img {
							transform:scale(1);
							transform:translateX(-20px);
						}
					}
				}
			}
		}
	}

	#company {
		.wrap {
			.contents {
				.contents_inner {
					grid-template-columns:1fr;
					position:relative;
					&::before {
						content:'';
						display:block;
						position:absolute;
						background-color:#FFFFFF;
						width:100vw;
						height:calc(100% - 30px);
						left:-20px;
						bottom:0;
					}
					.detail {
						padding:40px 0;
						order:1;
						p {
							font-size:1.4rem;
							margin-bottom:2em;
						}
						.btn {
							margin-left:auto;
						}
						&::before {
							content:none;
						}
					}
					.img {
						position:relative;
						z-index:1;
						img {
							transform:scale(1);
							transform:translateX(20px);
						}
					}
				}
			}
		}
	}

	#news {
		.wrap {
			padding-top:60px;
			.contents {
				width:100%;
				background-color:#FFFFFF;
				.contents_inner {
					padding:40px 20px;
					grid-template-columns:1fr;
					.detail {
						display:contents;
						h2 {
							margin-bottom:1em;
						}
						.btn {
							order:2;
							margin-left:auto;
						}
					}
					.news_wrap {
						margin-bottom:30px;
						dl {
							font-size:1.3rem;
							grid-template-columns:1fr;
							grid-row-gap:.33em;
						}
					}
				}
			}
		}
	}

}