/**
 * トップバナー。境界は 768px の1か所だけ。
 * 768px 未満は scroll-snap の1カラム横スクロール、768px 以上は件数ぶんのカラム。
 * 画像は切り抜かない（object-fit、aspect-ratio、固定高さを使わない）。
 */
.dc-top-banners__track {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: -8px;
	padding: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 8px;
	scrollbar-width: none;
}

.dc-top-banners__track::-webkit-scrollbar {
	display: none;
}

.dc-top-banners__item {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.dc-top-banners__card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
	transition: box-shadow 300ms ease, transform 300ms ease;
}

.dc-top-banners__image {
	display: block;
	width: 100%;
	height: auto;
}

.dc-top-banners__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dc-top-banners__controls {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

.dc-top-banners__controls[hidden] {
	display: none;
}

.dc-top-banners__toggle {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #0e2b79;
	border-radius: 4px;
	background: #fff;
	color: #0e2b79;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.dc-top-banners__card:focus-visible,
.dc-top-banners__toggle:focus-visible {
	outline: 3px solid #0078e8;
	outline-offset: 4px;
}

/* 指で送るための tabindex を持つ track は、外へはみ出さないよう内側に描く。 */
.dc-top-banners__track:focus-visible {
	outline: 3px solid #0078e8;
	outline-offset: -3px;
}

@media (hover: hover) {
	a.dc-top-banners__card:hover {
		box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
		transform: translateY(-0.125rem);
	}

	.dc-top-banners__toggle:hover {
		background: #0e2b79;
		color: #fff;
	}
}

@media (min-width: 768px) {
	.dc-top-banners__track {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 24px;
		margin: 0;
		padding: 0;
		overflow: visible;
		scroll-snap-type: none;
		scroll-padding-inline: 0;
	}

	.dc-top-banners--count-2 .dc-top-banners__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dc-top-banners--count-3 .dc-top-banners__track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dc-top-banners__card {
		border-radius: 0.75rem;
	}

	.dc-top-banners__controls {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc-top-banners__card {
		transition: none;
	}

	a.dc-top-banners__card:hover {
		transform: none;
	}
}