/**
 * みつピタジョブ フッタースライダー
 * フロント表示
 *
 * ・PCではバナーを大きめに表示
 * ・タブレット／スマホ対応
 * ・連続して流れる無限ループ対応
 * ・スクロールスナップによる停止を解除
 */

/* =====================================================
 * 全体
 * ===================================================== */

.mitsupita-footer-slider {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 42px 0 34px;
	background:
		linear-gradient(
			180deg,
			#f8f4ff 0%,
			#ffffff 100%
		);
	overflow: hidden;
}

.mitsupita-footer-slider__inner {
	position: relative;
	width: min(
		calc(100% - 32px),
		1480px
	);
	margin: 0 auto;
}

/* =====================================================
 * 表示領域
 * ===================================================== */

.mitsupita-footer-slider__viewport {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* =====================================================
 * スライダー本体
 * ===================================================== */

.mitsupita-footer-slider__track {
	display: flex;
	align-items: stretch;
	gap: 22px;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;

	/**
	 * 連続スクロールを止めないため、
	 * スクロールスナップは使用しません。
	 */
	scroll-snap-type: none;
	scroll-behavior: auto;

	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.mitsupita-footer-slider__track::-webkit-scrollbar {
	display: none;
}

/* =====================================================
 * 各バナー
 * ===================================================== */

.mitsupita-footer-slider__slide {
	flex: 0 0 calc(
		(100% - 22px) / 2
	);
	min-width: 0;
	margin: 0;
	padding: 0;

	/**
	 * 連続スクロール対応。
	 */
	scroll-snap-align: none;
	scroll-snap-stop: normal;
}

.mitsupita-footer-slider__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(
		126,
		87,
		194,
		0.16
	);
	border-radius: 20px;
	box-shadow:
		0 12px 30px rgba(
			82,
			58,
			117,
			0.13
		);
	text-decoration: none;
	transform: translateZ(0);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

a.mitsupita-footer-slider__link:hover,
a.mitsupita-footer-slider__link:focus-visible {
	transform:
		translateY(-4px)
		translateZ(0);
	border-color: rgba(
		126,
		87,
		194,
		0.36
	);
	box-shadow:
		0 18px 40px rgba(
			82,
			58,
			117,
			0.19
		);
}

a.mitsupita-footer-slider__link:focus-visible {
	outline: 3px solid rgba(
		126,
		87,
		194,
		0.28
	);
	outline-offset: 4px;
}

/* =====================================================
 * 画像
 * ===================================================== */

.mitsupita-footer-slider__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	user-select: none;
	pointer-events: none;
}

/* =====================================================
 * 前後ボタン
 * ===================================================== */

.mitsupita-footer-slider__button {
	position: absolute;
	top: calc(50% - 16px);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	background: rgba(
		255,
		255,
		255,
		0.97
	);
	border: 1px solid rgba(
		126,
		87,
		194,
		0.2
	);
	border-radius: 50%;
	box-shadow:
		0 9px 24px rgba(
			82,
			58,
			117,
			0.18
		);
	color: #6f4ca5;
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease,
		box-shadow 0.2s ease;
}

.mitsupita-footer-slider__button:hover {
	background: #7e57c2;
	color: #ffffff;
	transform:
		translateY(-50%)
		scale(1.06);
	box-shadow:
		0 12px 28px rgba(
			82,
			58,
			117,
			0.24
		);
}

.mitsupita-footer-slider__button:focus-visible {
	outline: 3px solid rgba(
		126,
		87,
		194,
		0.3
	);
	outline-offset: 3px;
}

.mitsupita-footer-slider__button:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.mitsupita-footer-slider__button--prev {
	left: -24px;
}

.mitsupita-footer-slider__button--next {
	right: -24px;
}

/* =====================================================
 * ページネーション
 * ===================================================== */

.mitsupita-footer-slider__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 12px;
	margin: 24px 0 0;
	padding: 0;
}

.mitsupita-footer-slider__pagination-button {
	width: 9px;
	height: 9px;
	margin: 0;
	padding: 0;
	background: #d7cae8;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition:
		width 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.mitsupita-footer-slider__pagination-button:hover {
	transform: scale(1.15);
}

.mitsupita-footer-slider__pagination-button.is-active {
	width: 30px;
	background: #7e57c2;
}

.mitsupita-footer-slider__pagination-button:focus-visible {
	outline: 3px solid rgba(
		126,
		87,
		194,
		0.25
	);
	outline-offset: 3px;
}

/* =====================================================
 * 複製バナー
 * ===================================================== */

.mitsupita-footer-slider__slide--clone {
	pointer-events: none;
}

/* =====================================================
 * 1件だけの場合
 * ===================================================== */

.mitsupita-footer-slider.is-single
.mitsupita-footer-slider__track {
	justify-content: center;
	overflow: hidden;
}

.mitsupita-footer-slider.is-single
.mitsupita-footer-slider__slide {
	flex-basis: min(
		100%,
		900px
	);
}

.mitsupita-footer-slider.is-single
.mitsupita-footer-slider__button,
.mitsupita-footer-slider.is-single
.mitsupita-footer-slider__pagination {
	display: none;
}

/* =====================================================
 * タブレット
 * ===================================================== */

@media screen and (max-width: 1023px) {

	.mitsupita-footer-slider {
		padding:
			34px 0
			28px;
	}

	.mitsupita-footer-slider__inner {
		width: min(
			calc(100% - 36px),
			960px
		);
	}

	.mitsupita-footer-slider__track {
		gap: 18px;
	}

	.mitsupita-footer-slider__slide {
		flex-basis: calc(
			(100% - 18px) / 1.6
		);
	}

	.mitsupita-footer-slider__link {
		border-radius: 18px;
	}

	.mitsupita-footer-slider__button {
		width: 44px;
		height: 44px;
		font-size: 30px;
	}

	.mitsupita-footer-slider__button--prev {
		left: -14px;
	}

	.mitsupita-footer-slider__button--next {
		right: -14px;
	}

}

/* =====================================================
 * スマートフォン
 * ===================================================== */

@media screen and (max-width: 640px) {

	.mitsupita-footer-slider {
		padding:
			26px 0
			22px;
	}

	.mitsupita-footer-slider__inner {
		width: calc(
			100% - 24px
		);
	}

	.mitsupita-footer-slider__track {
		gap: 14px;
	}

	.mitsupita-footer-slider__slide {
		flex-basis: 94%;
	}

	.mitsupita-footer-slider__link {
		border-radius: 15px;
		box-shadow:
			0 9px 24px rgba(
				82,
				58,
				117,
				0.13
			);
	}

	.mitsupita-footer-slider__button {
		display: none;
	}

	.mitsupita-footer-slider__pagination {
		margin-top: 19px;
	}

	.mitsupita-footer-slider__pagination-button {
		width: 8px;
		height: 8px;
	}

	.mitsupita-footer-slider__pagination-button.is-active {
		width: 25px;
	}

}

/* =====================================================
 * 小型スマートフォン
 * ===================================================== */

@media screen and (max-width: 430px) {

	.mitsupita-footer-slider__inner {
		width: calc(
			100% - 20px
		);
	}

	.mitsupita-footer-slider__track {
		gap: 12px;
	}

	.mitsupita-footer-slider__slide {
		flex-basis: 96%;
	}

	.mitsupita-footer-slider__link {
		border-radius: 13px;
	}

}

/* =====================================================
 * 動きを減らす設定
 * ===================================================== */

@media (
	prefers-reduced-motion: reduce
) {

	.mitsupita-footer-slider__link,
	.mitsupita-footer-slider__button,
	.mitsupita-footer-slider__pagination-button {
		transition: none;
	}

}