@charset "utf-8";
#page_top {
	background-image: url(../image/service/estate/estate-page_top@pc.webp);
}

#estate {
	width: 100%;
	height: auto;
	padding: 0;
}
	.estate__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.estate__main {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 90%;
			max-width: 940px;
			height: auto;
			padding: 95px 0 260px;
			margin: 0 auto;
			position: relative;
		}
			.estate__main__heading {
				width: calc((445 / 940) * 100%);
				height: auto;
			}
				.estate__main__heading__ttl {
					width: 100%;
					height: auto;
					margin: 0 auto 100px;
					font-size: 36px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.08em;
					color: var(--color--navy-3);
				}
			.estate__main__details {
				flex: 1;
				height: auto;
				padding: 5px 0 0;
			}
				.estate__main__detail__txt {
					width: 100%;
					height: auto;
					font-size: 18px;
					font-weight: 400;
					line-height: 1.8;
					letter-spacing: 0.04em;
					color: var(--color--navy-3);
				}
			.estate__main__list {
				display: flex;
				flex-direction: column;
				gap: 17px;
				width: 280px;
				height: auto;
				position: absolute;
				top: 310px;
				left: 0;
			}
				.estate__main__list__item {
					width: 100%;
					height: auto;
				}
					.estate__main__list__item a {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 50px;
						border: solid 1px #333333;
						background-color: #333333;
						font-size: 16px;
						font-weight: 400;
						line-height: 1;
						letter-spacing: 0.06em;
						color: var(--color--white);
					}
				@media (any-hover: hover) {
					.estate__main__list__item a {
						transition: .3s;
					}
					.estate__main__list__item a:hover {
						background-color: var(--color--white);
						color: #333333;
					}
				}
		.estate__development {
			width: 100%;
			height: 600vh;
			position: relative;
		}
			.estate__development__sticky_wrap {
				width: 100%;
				height: 100vh;
				position: sticky;
				top: 0;
				left: 0;
				z-index: 1;
			}
				.estate__development__item {
					width: 100%;
					height: 100vh;
					padding: 90px 0 0;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					transition: .8s;
				}
				.estate__development__item._current {
					opacity: 1;
				}
					.estate__development__item__bg {
						width: 100%;
						height: calc(100% - 90px);
						position: absolute;
						top: 90px;
						left: 0;
						z-index: 1;
						overflow: hidden;
					}
						.estate__development__item__bg::before {
							content: '';
							display: block;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.2);
							position: absolute;
							top: 0;
							left: 0;
							z-index: 3;
						}
						.estate__development__item__bg img {
							width: calc(100% + 20px);
							height: calc(100% + 20px);
							object-fit: cover;
							object-position: center;
							filter: blur(10px);
							margin: -10px 0 0 -10px;
							position: relative;
							z-index: 1;
							transition: .8s;
						}
					.estate__development__item__inner {
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 90%;
						max-width: 1060px;
						height: 100%;
						margin: 0 auto;
						position: relative;
						z-index: 2;
					}
						.estate__development__item__inner__heading {
							width: 100%;
							height: auto;
							margin: 0 auto 64px;
						}
							.estate__development__item__inner__heading__sub_ttl {
								width: 100%;
								height: auto;
								margin: 0 auto 16px;
								font-size: 16px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0.06em;
								color: var(--color--white);
								transition: .3s;
								opacity: 0;
								transform: translateY(30px);
							}
							._current .estate__development__item__inner__heading__sub_ttl {
								transition: .8s;
								opacity: 1;
								transform: translateY(0);
							}
							.estate__development__item__inner__heading__main_ttl {
								width: 100%;
								height: auto;
								margin: 0 auto 30px;
								font-size: 36px;
								font-weight: 700;
								line-height: 1.5;
								letter-spacing: 0.12em;
								color: var(--color--white);
								opacity: 0;
								transition: .3s;
								transform: translateY(30px);
							}
							._current .estate__development__item__inner__heading__main_ttl {
								transition: .8s;
								transition-delay: .1s;
								opacity: 1;
								transform: translateY(0);
							}
							.estate__development__item__inner__heading__txt {
								width: 100%;
								height: auto;
								font-size: 18px;
								font-weight: 700;
								line-height: 1.4;
								letter-spacing: 0.04em;
								color: var(--color--white);
								opacity: 0;
								transition: .3s;
								transform: translateY(30px);
							}
							._current .estate__development__item__inner__heading__txt {
								transition: .8s;
								transition-delay: .2s;
								opacity: 1;
								transform: translateY(0);
							}
						.estate__development__item__contents {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							height: auto;
							opacity: 0;
							transition: .3s;
						}
						._current .estate__development__item__contents {
							transition: .8s;
							transition-delay: .3s;
							opacity: 1;
						}
							.estate__development__item__content__image {
								width: calc((430 / 1060) * 100%);
								height: auto;
							}
							.estate__development__item__content__details {
								width: calc((540 / 1060) * 100%);
								height: auto;
							}
								.estate__development__item__content__details__list {
									display: flex;
									flex-direction: column;
									gap: 12px;
									width: 100%;
									max-width: 500px;
									height: auto;
									margin: 0 0 0 auto;
								}
									.estate__development__item__content__details__list__item {
										width: 100%;
										height: auto;
										padding-left: 1em;
										font-size: 19px;
										font-weight: 500;
										line-height: 1.6;
										letter-spacing: 0.04em;
										color: var(--color--white);
										white-space: nowrap;
										position: relative;
									}
										.estate__development__item__content__details__list__item::before {
											content: '・';
											display: block;
											position: absolute;
											left: 0;
										}
							.estate__development__item__contents__building_list {
								display: flex;
								justify-content: space-between;
								align-items: flex-start;
								width: calc((980 / 1060) * 100%);
								height: auto;
							}
								.estate__development__item__contents__building_list__item {
									width: calc((180 / 980) * 100%);
									height: auto;
								}
									.estate__development__item__contents__building_list__item__image {
										width: 100%;
										height: auto;
										margin: 0 auto 18px;
									}
									.estate__development__item__contents__building_list__item__name {
										width: 100%;
										height: auto;
										font-size: 19px;
										font-weight: 500;
										line-height: 1.4;
										letter-spacing: 0.06em;
										text-align: center;
										color: var(--color--white);
									}

/* PC ================================================== */
@media all and (max-width: 1230px){

}

@media all and (max-width: 1025px){

}

@media all and (max-width: 970px){
		.estate__main {
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			padding: 50px 0 80px;
		}
			.estate__main__heading {
				width: 100%;
			}
				.estate__main__heading__ttl {
					width: 100%;
					height: auto;
					margin: 0 auto 30px;
					font-size: 36px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.08em;
					color: var(--color--navy-3);
				}
			.estate__main__details {
				flex: initial;
				width: 100%;
				height: auto;
				padding: 5px 0 0;
			}
				.estate__main__detail__txt {
					width: 100%;
					height: auto;
					font-size: 18px;
					font-weight: 400;
					line-height: 1.8;
					letter-spacing: 0.04em;
					color: var(--color--navy-3);
				}
			.estate__main__list {
				display: flex;
				flex-direction: column;
				gap: 17px;
				width: 280px;
				height: auto;
				margin: 36px auto 0;
				position: initial;
			}
				.estate__main__list__item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 50px;
					background-color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 1;
					letter-spacing: 0.06em;
					color: var(--color--white);
				}
}

@media all and (max-width: 869px){

}

@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#page_top {
	background-image: url(../image/service/estate/estate-page_top@sp.webp);
}

#estate {
	padding: 0;
}
	.estate__inner {
		max-width: initial;
	}
		.estate__main {
			width: calc((310 / 390) * 100%);
			padding: 46px 0 65px;
		}
				.estate__main__heading__ttl {
					margin: 0 auto 28px;
					font-size: 24px;
					letter-spacing: 0.05em;
				}
			.estate__main__details {
				height: auto;
				padding: 0;
				margin: 0 auto;
			}
				.estate__main__detail__txt {
					font-size: 14px;
					font-weight: 700;
					line-height: 2.4;
					letter-spacing: 0em;
					white-space: nowrap;
				}
		.estate__development {
			height: auto;
		}
			.estate__development__sticky_wrap {
				height: auto;
				position: initial;
			}
				.estate__development__item {
					width: 100%;
					height: auto;
					padding: 0;
					position: initial;
					opacity: 1;
				}
				.estate__development__item + .estate__development__item {
					margin-top: 3px;
				}
					.estate__development__item__bg {
						height: 100%;
						top: 0;
					}
					.estate__development__item__inner {
						width: 100%;
						max-width: initial;
						height: auto;
						padding: 40px 0 0;
					}
						.estate__development__item__inner__heading {
							width: calc((310 / 390) * 100%);
							margin: 0 auto 18px;
						}
							.estate__development__item__inner__heading__sub_ttl {
								margin: 0 auto 20px;
								letter-spacing: 0.1em;
								opacity: 1;
								transform: translateY(0px);
							}
							.estate__development__item__inner__heading__main_ttl {
								margin: 0 auto 18px;
								font-size: 24px;
								letter-spacing: 0.04em;
								opacity: 1;
								transform: translateY(0px);
							}
							.estate__development__item__inner__heading__txt {
								font-size: 14px;
								line-height: 1.6;
								letter-spacing: 0em;
								opacity: 1;
								transform: translateY(0px);
							}
						.estate__development__item__contents {
							flex-direction: column-reverse;
							justify-content: flex-start;
							opacity: 1;
						}
							.estate__development__item__content__image {
								width: 100%;
							}
							.estate__development__item__content__details {
								width: calc((310 / 390) * 100%);
								min-height: 200px;
								padding: 0 0 40px;
								margin: 0 auto;
							}
								.estate__development__item__content__details__list {
									gap: 14px;
									max-width: initial;
									margin: 0 auto;
								}
									.estate__development__item__content__details__list__item {
										font-size: 14px;
										line-height: 1.4;
										white-space: initial;
									}
							.estate__development__item__contents__building_list {
								display: grid;
								grid-template-columns: repeat(3, 1fr);
								column-gap: 12px;
								row-gap: 18px;
								width: 100%;
								padding: 0 0 25px;
								margin: 20px auto 0;
							}
								.estate__development__item__contents__building_list__item {
									width: 100%;
								}
									.estate__development__item__contents__building_list__item__image {
										margin: 0 auto 6px;
									}
									.estate__development__item__contents__building_list__item__name {
										font-size: 12px;
									}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}