@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.gallery-outer{
	font-family: var(--font_min);
	padding: 64px 0 80px;
	@media (width < 810px) {
		padding: 32px 0 40px;
	}
}

.gallery-catch{
	word-break: keep-all;
	font-size: clamp(18px, -2.769px + 2.564vw, 28px);/*28~18(1200~810)*/
	font-weight: 500;
}

.gallery-inner{
	margin-top: 64px;
	margin-inline: auto;
	max-width: 800px;
	@media (width < 810px) {
		margin-top: 32px;
	}
}

.gallery-list__item{
	background: #CCEAF6;
	position: relative;
}
.gallery-list__img{
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		aspect-ratio: 1600 / 1110;
	}
	&.--narrow{
		width: 74%;
		margin-inline: auto;
		img{
			aspect-ratio: 444 / 419;
		}
	}
}
.gallery-list__txt{
	font-family: var(--font_eb);
	font-size: clamp(18px, 9.797px + 1.013vw, 26px);/*26~18(1600~810)*/
	font-weight: 400;
	line-height: 1.1;
	position: absolute;
	bottom: 8px;
	left: 12px;
	@media (width < 810px) {
		bottom: 4px;
		left: 8px;
	}
	&.--white{
		color: #fff;
		text-shadow: 0 0 2px #000;
	}
}

.gallery-thumb{
	margin-top: 24px;
	margin-inline: -6px;
	@media (width < 810px) {
		margin-top: 16px;
		margin-inline: -4px;
	}
}
.gallery-thumb__item{
	margin: 0 6px;
	background: #CCEAF6;
	position: relative;
	@media (width < 810px) {
		margin: 0 4px;
	}
	&::after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: #fff;
		opacity: 0.7;
		position: absolute;
		top: 0;
		left: 0;
	}
	&.slick-current{
		&::after{
			opacity: 0;
		}
	}
	&.is-active-next{
		&::after{
			opacity: 0;
		}
	}
}
.gallery-thumb__img{
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		aspect-ratio: 1600 / 1110;
	}
	&.--narrow{
		width: 74%;
		margin-inline: auto;
		img{
			aspect-ratio: 444 / 419;
		}
	}
}