/**
 * #Global
 */

.container {
	margin-right: auto;
	margin-left: auto;
	padding-right: 50px;
	padding-left: 50px;
	width: 100%;
	max-width: 1280px;

	@media (max-width: 768px) {
		padding-right: 20px;
		padding-left: 20px;
	}
}

:root {
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	--sz-0: 0;
	--sz-1: 8px;
	--sz-2: 16px;
	--sz-3: 24px;
	--sz-4: 32px;
	--sz-5: 40px;
	--sz-6: 48px;
	--sz-8: 64px;
	--sz-10: 80px;

	--fz-12: calc(12 / 16 * 1rem);
	--fz-14: calc(14 / 16 * 1rem);
	--fz-16: calc(16 / 16 * 1rem);
	--fz-18: calc(18 / 16 * 1rem);
	--fz-20: calc(20 / 16 * 1rem);
	--fz-24: calc(24 / 16 * 1rem);
	--fz-32: calc(32 / 16 * 1rem);
	--fz-40: calc(40 / 16 * 1rem);
	--fz-48: calc(48 / 16 * 1rem);

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold: 700;

	/* border radius */
	--rd-0_5: 2px;
	--rd-1: 4px;
	--rd-2: 8px;
	--rd-3: 12px;
	--rd-4: 16px;
	--rd-5: 20px;
	--rd-6: 24px;
	--rd-8: 32px;
	--rd-999: 999px;

	--duration: 0.3s;
	--hh: 80px;
	--hh-sp: 64px;
}

/**
 * inview（スクロール出現）
 */
.js-fade-up {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 1s ease, transform 1s ease;

	&.is-in {
		opacity: 1;
		transform: translateY(0);
	}
}

a.js-fade-up,
img.js-fade-up {
	transition: opacity 1s ease, transform 1s ease;
}

@media (prefers-reduced-motion: reduce) {
	.js-fade-up,
	a.js-fade-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.js-deferred-video {
	opacity: 0;
	transition: opacity 1s ease;

	&.is-shown {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-deferred-video {
		opacity: 1;
		transition: none;
	}
}

@keyframes arrow-hover {
	0% {
		transform: translateX(0%);
	}

	39% {
		opacity: 0;
		transform: translateX(100%);
	}

	40% {
		transform: translateX(100%);
	}

	40.01% {
		transform: translateX(-100%);
	}

	41% {
		opacity: 1;
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0%);
	}
}