@charset "utf-8";

.l-gallery {
	padding-bottom: 60px;
	
	@media (width <= 999px) {
		padding-bottom: 30px;
	}
	
	&.-corner_radius {
		margin-bottom: 0;
		
		@media (width <= 999px) {
			margin-bottom: 30px;
		}
	}
	
	&:after {
		content: '';
		width: 100%;
		padding-top: 360px;
		border-radius: 0 0 60px 60px;
		background: linear-gradient(to bottom, #f0f0f0 0%, var(--white) 100%);
		position: absolute;
		bottom: -60px;
		left: 0;
		
		@media (width <= 999px) {
			border-radius: 0 0 30px 30px;
		}
	}
	
	.u-inner {
		max-width: calc(1250px + (30px * 2));
		z-index: 10;
	}
	
	.l-gallery__wrap {
		
		@media (width <= 999px) {
			padding-inline: 10px;
		}
	}
	
	.l-gallery__title {
		font-size: 2.2rem;
		font-weight: 500;
		text-align: center;
		letter-spacing: .1em;
		padding: 120px 0 0;
		position: relative;
		
		@media (width <= 999px) {
			font-size: 1.8rem;
			line-height: 1.15;
			padding-top: 90px;
		}
		
		&:after {
			content: '';
			width: 216px;
			aspect-ratio: 1;
			margin: 0 0 .5% 10.5%;
			clip-path: circle(50% at 50% 50%);
			background-color: #FFF1B8;
			position: absolute;
			bottom: 0;
			left: 50%;
			translate: -50% 50%;
			
			@media (width <= 999px) {
				width: 180px;
				margin: 0 0 5% 0;
			}
		}
		
		& + * {
			margin-top: 45px;
			
			@media (width <= 999px) {
				margin-top: 25px;
			}
		}
		
		span {
			display: inline-block;
			position: relative;
			z-index: 10;
		}
		
		b {
			font-size: 5.2rem;
			font-weight: 400;
			vertical-align: bottom;
			margin: 0 .1em -.1em .2em;
			display: inline-block;
			
			@media (width <= 999px) {
				font-size: 4.6rem;
			}
		}
	}
}

.swiper-pagination {
	bottom: -10px !important;
	translate: 0 100%;
	
	.swiper-pagination-bullet {
		width: 6px;
		height: 6px;
	}

	.swiper-pagination-bullet-active {
		background-color: #FF9100;
	}
}

.swiper {
	margin: 0 0 105px;
	position: relative;
	overflow: inherit;
	
	@media (width <= 999px) {
		margin: 0;
	}
	
	.l-gallery__data {
		width: 100%;
		padding: 15px 0;
		display: flex;
		gap: 0 20px;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to right, #fff1b8 0%, var(--white) 50%, #fff1b8 100%);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		translate: 0 100%;
		border-radius: 0 0 20px 20px;
		border-bottom: 1px solid #ddd;
		border-right: 1px solid #ddd;
		border-left: 1px solid #ddd;
		
		@media (width <= 999px) {
			width: calc(100% - (1px * 2));
			height: 27.78vw;
			margin-top: 55.89%;
			padding: 0;
			gap: 0;
			flex-direction: column;
			top: 0;
			bottom: auto;
			left: 1px;
			translate: 0;
			border-radius: 0;
			border: 0;
		}
		
		p {
			font-weight: 400;
			line-height: 1.75;
			
			b {
				display: inline-block;
			}
			
			&:nth-child(1) {
				font-size: 1.2rem;
				
				@media (width <= 999px) {
					font-size: 2.45vw;
				}
				
				b {
					font-size: 1.6rem;
					font-weight: 700;
					vertical-align: baseline;
					
					@media (width <= 999px) {
						font-size: 3.5vw;
					}
				}
			}
			
			&:nth-child(2) {
				font-size: 1.2rem;
				
				@media (width <= 999px) {
					font-size: 2.45vw;
					margin-top: 0;
				}
				
				b {
					font-size: 1.6rem;
					font-weight: 700;
					vertical-align: baseline;
					
					@media (width <= 999px) {
						font-size: 3.5vw;
					}
				}
			}
			
			&:nth-child(3) {
				font-size: 1.3rem;
				
				@media (width <= 999px) {
					font-size: 2.45vw;
					line-height: 1.5;
					margin-top: .3em;
				}
			}
		}
	}
	
	.swiper-wrapper {
		background-color: #F2F6E8;
		border-radius: 20px 20px 0 0;
		border-top: 1px solid #ddd;
		border-right: 1px solid #ddd;
		border-left: 1px solid #ddd;
		box-sizing: border-box;
		overflow: hidden;
		
		@media (width <= 999px) {
			border-radius: 10px;
			border: 1px solid #ddd;
		}
	}
	
	.swiper-slide {
		display: flex;
		
		@media (width <= 999px) {
			flex-direction: column;
		}
		
		.image {
			width: 80%;
			
			@media (width <= 999px) {
				width: 100%;
			}
			
			img {
				border-radius: 20px 0 0 0;
				
				@media (width <= 999px) {
					border-radius: 8px 8px 0 0;
				}
			}
		}
		
		.geolocation {
			width: calc(100% - 80%);
			position: relative;
			
			@media (width <= 999px) {
				width: 100%;
				margin-top: 27.78vw;
			}
			
			.plot {
				width: 5.5%;
				aspect-ratio: 1;
				display: block;
				border-radius: 100vmax;
				background-color: #FF9100;
				position: absolute;
				top: 0;
				left: 0;
				
				@media (width <= 999px) {
					width: 3.5%;
				}
				
				&:before {
					content: url("/yamatedai/land/_assets/img/2layer/bg_01.webp");
					margin: 55% 0 0;
					position: absolute;
					top: 0;
					left: 50%;
					transform-origin: top center;
					translate: -50% 0;
					rotate: 180deg;
					scale: .5;
					opacity: .5;
				}
				
				&:after {
					content: '';
					width: 80%;
					aspect-ratio: 1;
					border-radius: 100vmax;
					position: absolute;
					top: 50%;
					left: 50%;
					transform-origin: center;
					translate: -50% -50%;
					background: radial-gradient(ellipse at center, rgba(219,136,26,0) 35%, rgba(219,136,26,1) 100%);
					animation: a-plot-wave 3s ease infinite;
				}
			}
		}
		
		&[aria-label="1 / 12"] {
			.plot {
				margin: 102% 0 0 51%;
				
				@media (width <= 999px) {
					margin: 56.7% 0 0 26.4%;
				}
			}
		}
		
		&[aria-label="2 / 12"] {
			.plot {
				margin: 95.8% 0 0 32.4%;
				
				@media (width <= 999px) {
					margin: 53.5% 0 0 14.9%;
				}
				
				&:before {
					rotate: -150deg;
				}
			}
		}
		
		&[aria-label="3 / 12"] {
			.plot {
				margin: 24.6% 0 0 61.9%;
				
				@media (width <= 999px) {
					margin: 11.8% 0 0 31.9%;
				}
				
				&:before {
					rotate: 0deg;
				}
			}
		}
		
		&[aria-label="4 / 12"] {
			.plot {
				margin: 158.3% 0 0 55%;
				
				@media (width <= 999px) {
					margin: 34.8% 0 0 76.9%;
				}
				
				&:before {
					rotate: 0deg;
				}
			}
		}
		
		&[aria-label="5 / 12"] {
			.plot {
				margin: 155.9% 0 0 63.9%;
				
				@media (width <= 999px) {
					margin: 33.5% 0 0 81.5%;
				}
				
				&:before {
					rotate: 20deg;
				}
			}
		}
		
		&[aria-label="6 / 12"] {
			.plot {
				margin: 166% 0 0 50%;
				
				@media (width <= 999px) {
					margin: 39.1% 0 0 74.3%;
				}
				
				&:before {
					rotate: -90deg;
				}
			}
		}
		
		&[aria-label="7 / 12"] {
			.plot {
				margin: 170.3% 0 0 53.4%;
				
				@media (width <= 999px) {
					margin: 41.6% 0 0 75.8%;
				}
				
				&:before {
					rotate: -180deg;
				}
			}
		}
		
		&[aria-label="8 / 12"] {
			.plot {
				margin: 165.5% 0 0 51.2%;
				
				@media (width <= 999px) {
					margin: 39.1% 0 0 74.5%;
				}
				
				&:before {
					rotate: 90deg;
				}
			}
		}
		
		&[aria-label="9 / 12"] {
			.plot {
				margin: 161.6% 0 0 38%;
				
				@media (width <= 999px) {
					margin: 37% 0 0 66.4%;
				}
				
				&:before {
					rotate: -50deg;
				}
			}
		}
		
		&[aria-label="10 / 12"] {
			.plot {
				margin: 66.2% 0 0 52.2%;
				
				@media (width <= 999px) {
					margin: 35.9% 0 0 26.6%;
				}
				
				&:before {
					rotate: -180deg;
				}
			}
		}
		
		&[aria-label="11 / 12"] {
			.plot {
				margin: 173.4% 0 0 45.6%;
				
				@media (width <= 999px) {
					margin: 43.8% 0 0 71.4%;
				}
				
				&:before {
					rotate: -45deg;
				}
			}
		}
		
		&[aria-label="12 / 12"] {
			.plot {
				margin: 62.1% 0 0 26.5%;
				
				@media (width <= 999px) {
					margin: 34% 0 0 11.3%;
				}
				
				&:before {
					rotate: -100deg; }}
		}
	}
	
	.swiper-button-next,
	.swiper-button-prev {
		width: 50px;
		height: 50px;
		clip-path: circle(50% at 50% 50%);
		display: block;
		background: url("/yamatedai/land/_assets/img/2layer/arrow_01.svg") no-repeat center / 100% 100%;
		transition: .2s var(--easing);
		
		@media (width <= 999px) {
			width: 40px;
			height: 40px;
			margin-top: 25%;
			top: 0;
			z-index: 200;
		}
		
		&:hover {
			scale: 1.4;
		}
		
		svg {
			display: none;
		}
	}
	
	.swiper-button-next {
		translate: 50% 0;
		margin-right: 0;
		
		@media (width <= 999px) {
		}
	}
	
	.swiper-button-prev {
		translate: -50% 0;
		rotate: 180deg;
		
		@media (width <= 999px) {
		}
	}
	
	.slider-pagination {

	}
}

.swiper.swiper-horizontal {
	touch-action: auto;
}

@keyframes a-plot-wave {
	0% {
		scale: 1;
	}
	40% {
		opacity: .25;
	}
	100% {
		scale: 15;
		opacity: 0;
	}
}


.slider-thumbnail {
	margin-bottom: 0;
	
	.swiper-wrapper {
		border-radius: 0;
	}
	
	.swiper-slide {
		opacity: .25;
		transition: opacity .5s;
		cursor: pointer;
		position: relative;
		
		&:hover {
			opacity: 1;
		}
		
		&:after {
			content: '';
			width: 100%;
			height: 100%;
			inset: 0;
			position: absolute;
			border: 4px solid #FF9100;
			z-index: 10;
			opacity: 0;
			transition: opacity .5s;
		}
	}
	
	.swiper-slide-thumb-active {
		opacity: 1;
		
		&:after {
			opacity: 1;
		}
	}
}