/*
<link rel="stylesheet" href="common/snap-carousel.css">
<script src="common/snap-carousel.js"></script>
*/

/*
<style>
	.card {
		position: relative;
		overflow: visible !important;
		font-family: sans-serif;
	}

	.card .icon {
		pointer-events: none;
		position: absolute;
		bottom: -40px;
		right: -40px;

		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
		outline: 5px solid #fff;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	}

	@media (pointer: coarse) and (orientation: portrait),
	(max-width: 900px) and (pointer: fine) {
		.card {
			position: relative;
			overflow: visible !important;
			font-family: sans-serif;
		}

		.card .icon {
			pointer-events: none;
			position: absolute;
			bottom: -5vw;
			right: -2vw;

			width: 16vw;
			height: 16vw;
			border-radius: 50%;
			overflow: hidden;
			outline: 1vw solid #fff;
			box-shadow: 0 0 5vw rgba(0, 0, 0, 0.2);
		}
	}
</style>
<style>
	:root {
		--card-w: min(80vw, 580px);
		--gap: 90px;
		--pad: 24px;
		--dot: 15px;
	}
</style>
*/

@charset "UTF-8";

:root {
	--card-w: min(80vw, 580px);
	--gap: 90px;
	--pad: 24px;
	--dot: 15px;
}

.carousel {
	max-width: 100%;
	margin: 0 auto;
	margin-top: 40px;
}

/* スクロール領域 */
.track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overflow-y: visible;
	padding: 10px var(--pad) 60px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	cursor: grab;
	user-select: none;
	touch-action: pan-x;
	overscroll-behavior-x: contain;

	scrollbar-width: none;
}

.track::-webkit-scrollbar {
	display: none;
}

.track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	/* ドラッグ中はスナップを切る */
}

.track::before,
.track::after {
	content: "";
	flex: 0 0 calc((100% - var(--card-w)) / 2);
}

.card {
	flex: 0 0 var(--card-w);
	height: 300px;
	box-sizing: border-box;
	scroll-snap-align: center;
	border-radius: 16px;
	background: white;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	padding: 1.8rem 2.5rem 1.8rem 1.8rem;

	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.9em;
}

.card h3 {
	margin: 0 0 6px;
}

.card p {
	margin: 0;
	opacity: 0.75;
}

.dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.dot {
	width: var(--dot);
	height: var(--dot);
	border-radius: 999px;
	border: none;
	background: #fff;
	cursor: pointer;
	padding: 0;
}

.dot[aria-current="true"] {
	background: var(--corp-color-hover);
	transform: scale(1);
}

.dot:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

@media (pointer: coarse) and (orientation: portrait),
(max-width: 900px) and (pointer: fine) {
	:root {
		--card-w: 80vw;
		--gap: 20vw;
		--pad: 5vw;
		--dot: 3vw;
	}

	.carousel {
		max-width: 100%;
		margin: 0 auto;
		margin-top: 10vw;
	}

	/* スクロール領域 */
	.track {
		display: flex;
		gap: var(--gap);
		overflow-x: auto;
		overflow-y: visible;
		padding: 5vw var(--pad) 10vw;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;

		cursor: grab;
		user-select: none;

		scrollbar-width: none;
	}

	.track::-webkit-scrollbar {
		display: none;
	}

	.track.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		/* ドラッグ中はスナップを切る */
	}

	.track::before,
	.track::after {
		content: "";
		flex: 0 0 calc((100% - var(--card-w)) / 2);
	}

	.card {
		flex: 0 0 var(--card-w);
		height: auto;
		box-sizing: border-box;
		scroll-snap-align: center;
		border-radius: 5vw;
		background: white;
		box-shadow: 0 0 5vw rgba(0, 0, 0, 0.2);
		padding: 1.2rem 1.4rem 3rem 1.4rem;

		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		line-height: 1.9em;
	}

	.card h3 {
		margin: 0 0 6px;
	}

	.card p {
		margin: 0;
		opacity: 0.75;
	}

	.dots {
		display: flex;
		justify-content: center;
		gap: 2vw;
		margin-top: 8vw;
	}

	.dot {
		width: var(--dot);
		height: var(--dot);
		border-radius: 999px;
		border: none;
		background: #fff;
		cursor: pointer;
		padding: 0;
	}

	.dot[aria-current="true"] {
		background: var(--corp-color-hover);
		transform: scale(1);
	}

	.dot:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 4px;
	}
}