@charset "UTF-8";

/*
 * Kindal TOP / SHOP LIST photo add-on
 * The existing .top-shoplist map, city labels, modals and SP accordion
 */

/* Photo-only additions. No existing map classes are overridden. */
.knd-shop-photos {
	position: relative;
	z-index: 1;
}

.knd-shop-photo {
	position: relative;
	margin: 0;
	background: #eee;
}

.knd-shop-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(.98);
}

/* Small editorial captions make each photo feel intentionally art-directed. */
.knd-shop-photo::after {
	position: absolute;
	top: calc(100% + 11px);
	left: 0;
	padding-left: 0;
	color: #aaa;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1;
	white-space: nowrap;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .28s ease, transform .28s ease;
}

.knd-shop-photo.is-caption-fading::after {
	opacity: 0;
	transform: translateY(3px);
}

.knd-shop-photo::before {
	display: none;
}

.knd-shop-photo::after { content: attr(data-caption); }

/*
 * Wide-screen stage:
 * Three editorial photo frames overlap the edge of the map very slightly.
 * Their content cycles through all seven store areas.
 */
.knd-shop-stage {
	position: relative;
	min-height: 1350px;
	margin-inline: calc(50% - 50vw);
	margin-top: -210px;
	padding: 250px max(20px, calc((100vw - 1400px) / 2)) 200px;
	overflow: hidden;
}

/* Keep the introduction above the visual stage so photos never cover it. */
.knd-shop-intro {
	position: static !important;
	width: min(100%, 760px) !important;
	margin: 42px 0 0 !important;
}

/* The original copy stays in the source for easy integration, but is replaced here. */
.knd-shop-stage .top-shoplist-text {
	display: none;
}

.knd-shop-stage > .top-shoplist-content {
	position: relative;
	z-index: auto;
	max-width: 1400px;
	margin-inline: auto;
}

/* Layer order: map artwork -> store photos -> area names. */
.knd-shop-stage .top-shoplist-map picture {
	position: relative;
	z-index: 1;
}

.knd-shop-stage .knd-shop-photos {
	z-index: 2;
}

.knd-shop-stage .top-shoplist-item {
	z-index: 3;
}

.knd-shop-stage .knd-shop-photos {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: min(calc(100% - 48px), 1400px);
	height: 100%;
	margin: 0 auto;
	pointer-events: none;
}

.knd-shop-photos--top {
	height: 100%;
}

.knd-shop-photos--top .knd-shop-photo:nth-child(1) {
	position: absolute;
	right: 50px;
	left: auto;
	top: 110px;
	width: clamp(168px, 14vw, 212px);
	aspect-ratio: 4 / 3;
}

.knd-shop-photos--top .knd-shop-photo:nth-child(2) {
	position: absolute;
	left: 60px;
	right: auto;
	top: 440px;
	width: clamp(228px, 20vw, 284px);
	aspect-ratio: 4 / 3;
}

.knd-shop-photos--top .knd-shop-photo:nth-child(3) {
	position: absolute;
	left: 38%;
	right: auto;
	top: 290px;
	width: clamp(148px, 13vw, 184px);
	aspect-ratio: 3 / 4;
}

.knd-shop-photos--top .knd-shop-photo:nth-child(4) {
	position: absolute;
	right: 80px;
	top: 590px;
	width: clamp(126px, 11vw, 158px);
	aspect-ratio: 3 / 4;
}

.knd-shop-photos--top .knd-shop-photo:nth-child(5) {
	position: absolute;
	left: 155px;
	bottom: 145px;
	width: clamp(184px, 17vw, 234px);
	aspect-ratio: 4 / 3;
}

.knd-shop-photos--top .knd-shop-photo:nth-child(6) {
	position: absolute;
	right: 220px;
	bottom: 120px;
	width: clamp(203px, 20vw, 258px);
	aspect-ratio: 4 / 3;
}

/*
 * Lightweight, one-time entrance animation.
 * Images stay visible when JavaScript is unavailable.
 */
.knd-motion-ready .knd-shop-photo {
	opacity: 0;
	--knd-photo-x: 0px;
	transform: translate3d(var(--knd-photo-x), 24px, 0) scale(.965);
	transition:
		opacity .8s ease,
		transform 1s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

.knd-motion-ready .knd-shop-photo.is-visible {
	opacity: 1;
	transform: translate3d(var(--knd-photo-x), 0, 0) scale(1);
}

.knd-motion-ready .knd-shop-photos--top .knd-shop-photo:nth-child(1) { transition-delay: .08s; }
.knd-motion-ready .knd-shop-photos--top .knd-shop-photo:nth-child(2) { transition-delay: .2s; }
.knd-motion-ready .knd-shop-photos--top .knd-shop-photo:nth-child(3) { transition-delay: .32s; }
.knd-motion-ready .knd-shop-photos--top .knd-shop-photo:nth-child(4) { transition-delay: .14s; }
.knd-motion-ready .knd-shop-photos--top .knd-shop-photo:nth-child(5) { transition-delay: .26s; }
.knd-motion-ready .knd-shop-photos--top .knd-shop-photo:nth-child(6) { transition-delay: .38s; }

.knd-shop-photo > img {
	transition: opacity .85s cubic-bezier(.22, 1, .36, 1);
}

.knd-shop-photo > .knd-shop-photo-next {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
}

.knd-shop-photo > .knd-shop-photo-next.is-active {
	opacity: 1;
}

@media screen and (min-width: 1080px) and (max-width: 1279px) {
	.knd-shop-stage {
		min-height: 1180px;
		margin-top: -170px;
		padding-top: 260px;
		padding-bottom: 160px;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(1) {
		left: auto;
		right: 50px;
		top: 120px;
		width: 160px;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(2) {
		left: 60px;
		right: auto;
		top: 490px;
		width: 205px;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(3) {
		left: 38%;
		right: auto;
		top: 340px;
		width: 136px;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(4) {
		right: 30px;
		top: 620px;
		width: 119px;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(5) {
		left: 90px;
		bottom: 175px;
		width: 180px;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(6) {
		right: 100px;
		bottom: 140px;
		width: 196px;
	}
}

@media screen and (max-width: 1079.98px) {
	.knd-shop-stage {
		min-height: clamp(820px, 120vw, 1180px);
		margin-top: 0;
		margin-inline: 0;
		padding: clamp(80px, 10vw, 120px) 0 clamp(50px, 8vw, 85px);
		overflow: hidden;
	}

	.knd-shop-stage .knd-shop-photos {
		position: absolute;
		top: clamp(80px, 10vw, 120px);
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		aspect-ratio: 1000 / 900;
		height: auto;
		pointer-events: none;
	}

	.knd-shop-photos--top {
		display: block;
		height: 100%;
		margin: 0;
	}

	.knd-shop-photos--top .knd-shop-photo {
		position: absolute;
		transform: none;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(1) {
		left: 2%;
		right: auto;
		top: 2%;
		width: 24%;
		aspect-ratio: 4 / 3;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(2) {
		left: 43%;
		right: auto;
		top: -10%;
		width: 21%;
		aspect-ratio: 4 / 3;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(3) {
		left: 24%;
		right: auto;
		top: 15%;
		width: 16%;
		aspect-ratio: 3 / 4;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(4) {
		left: auto;
		right: 0;
		top: 38%;
		width: 12%;
		aspect-ratio: 3 / 4;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(5) {
		left: 8%;
		top: 99%;
		bottom: auto;
		width: 18%;
		aspect-ratio: 4 / 3;
	}

	.knd-shop-photos--top .knd-shop-photo:nth-child(6) {
		left: auto;
		right: 3%;
		top: 95%;
		bottom: auto;
		width: 20%;
		aspect-ratio: 4 / 3;
	}

	.knd-shop-photo::after {
		display: none;
	}

	.knd-shop-stage > .top-shoplist-content {
		position: relative;
		z-index: auto;
		width: 100%;
		max-width: none;
	}

	/* Enlarge the original SP map and keep its positioned area labels in sync. */
	.knd-shop-stage .top-shoplist-map {
		width: 100% !important;
		max-width: none !important;
		margin-inline: auto !important;
	}

	.knd-shop-stage .top-shoplist-map picture,
	.knd-shop-stage .top-shoplist-map picture img {
		display: block;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
	}

	/* The area names are separate HTML elements, so reposition them for the enlarged map. */
	.knd-shop-stage .top-shoplist-item {
		position: absolute !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		transform: translate(-50%, -50%) !important;
		z-index: 3 !important;
	}

	.knd-shop-stage .top-shoplist-item--tokyo {
		left: 90% !important;
		top: 71% !important;
	}

	.knd-shop-stage .top-shoplist-item--shizuoka {
		left: 76% !important;
		top: 87% !important;
	}

	.knd-shop-stage .top-shoplist-item--nagoya {
		left: 58% !important;
		top: 94% !important;
	}

	.knd-shop-stage .top-shoplist-item--kyoto {
		left: 46.5% !important;
		top: 49% !important;
	}

	.knd-shop-stage .top-shoplist-item--osaka {
		left: 36% !important;
		top: 97% !important;
	}

	.knd-shop-stage .top-shoplist-item--kobe {
		left: 36% !important;
		top: 57% !important;
	}

	.knd-shop-stage .top-shoplist-item--hiroshima {
		left: 16% !important;
		top: 61.7% !important;
	}

	.knd-shop-stage .top-shoplist-accordion {
		margin-top: clamp(115px, 18vw, 190px);
		position: relative;
		z-index: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.knd-shop-photo {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}