@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
}

html {
	scroll-behavior: smooth;
}

html * {
	font-family: 'Noto Sans JP', sans-serif;
	font-optical-sizing: auto;
	box-sizing: border-box;
}

body {
	margin: unset;
	letter-spacing: 1.2px;
	color: var(--color-text);
}

body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	margin: unset;
}

a,
a:visited {
	color: var(--color-text-anchor);
	text-underline-offset: 3px;
	transition: filter 0.2s;
}
a:hover {
	filter: brightness(0.8);
}

ul {
	margin: unset;
	padding-left: 24px;
}

/* Utilities */
.required-star::after {
	display: inline-block;
	content: '★';
	color: var(--color-accent-alert);
	font-size: 10px;
	transform: translateY(-10px);
}

/* Margin */
.mt-0 {
	margin-top: 0; /* 0px */
}
.mt-1 {
	margin-top: 0.25rem; /* 4px */
}
.mt-2 {
	margin-top: 0.5rem; /* 8px */
}
.mt-3 {
	margin-top: 0.75rem; /* 12px */
}
.mt-4 {
	margin-top: 1rem; /* 16px */
}
.mt-5 {
	margin-top: 1.25rem; /* 20px */
}
.mt-6 {
	margin-top: 1.5rem; /* 24px */
}
.mt-7 {
	margin-top: 1.75rem; /* 28px */
}
.mt-8 {
	margin-top: 2rem; /* 32px */
}
.mt-9 {
	margin-top: 2.25rem; /* 36px */
}
.mt-10 {
	margin-top: 2.5rem; /* 40px */
}
.mt-11 {
	margin-top: 2.75rem; /* 44px */
}
.mt-12 {
	margin-top: 3rem; /* 48px */
}
.mt-13 {
	margin-top: 3.25rem; /* 52px */
}
.mt-14 {
	margin-top: 3.5rem; /* 56px */
}
.mt-15 {
	margin-top: 3.75rem; /* 60px */
}
.mt-16 {
	margin-top: 4rem; /* 64px */
}

.mr-0 {
	margin-right: 0; /* 0px */
}
.mr-1 {
	margin-right: 0.25rem; /* 4px */
}
.mr-2 {
	margin-right: 0.5rem; /* 8px */
}
.mr-3 {
	margin-right: 0.75rem; /* 12px */
}
.mr-4 {
	margin-right: 1rem; /* 16px */
}
.mr-5 {
	margin-right: 1.25rem; /* 20px */
}
.mr-6 {
	margin-right: 1.5rem; /* 24px */
}
.mr-7 {
	margin-right: 1.75rem; /* 28px */
}
.mr-8 {
	margin-right: 2rem; /* 32px */
}
.mr-9 {
	margin-right: 2.25rem; /* 36px */
}
.mr-10 {
	margin-right: 2.5rem; /* 40px */
}
.mr-11 {
	margin-right: 2.75rem; /* 44px */
}
.mr-12 {
	margin-right: 3rem; /* 48px */
}
.mr-13 {
	margin-right: 3.25rem; /* 52px */
}
.mr-14 {
	margin-right: 3.5rem; /* 56px */
}
.mr-15 {
	margin-right: 3.75rem; /* 60px */
}
.mr-16 {
	margin-right: 4rem; /* 64px */
}

.ml-0 {
	margin-left: 0; /* 0px */
}
.ml-1 {
	margin-left: 0.25rem; /* 4px */
}
.ml-2 {
	margin-left: 0.5rem; /* 8px */
}
.ml-3 {
	margin-left: 0.75rem; /* 12px */
}
.ml-4 {
	margin-left: 1rem; /* 16px */
}
.ml-5 {
	margin-left: 1.25rem; /* 20px */
}
.ml-6 {
	margin-left: 1.5rem; /* 24px */
}
.ml-7 {
	margin-left: 1.75rem; /* 28px */
}
.ml-8 {
	margin-left: 2rem; /* 32px */
}
.ml-9 {
	margin-left: 2.25rem; /* 36px */
}
.ml-10 {
	margin-left: 2.5rem; /* 40px */
}
.ml-11 {
	margin-left: 2.75rem; /* 44px */
}
.ml-12 {
	margin-left: 3rem; /* 48px */
}
.ml-13 {
	margin-left: 3.25rem; /* 52px */
}
.ml-14 {
	margin-left: 3.5rem; /* 56px */
}
.ml-15 {
	margin-left: 3.75rem; /* 60px */
}
.ml-16 {
	margin-left: 4rem; /* 64px */
}
.ml-auto {
	margin-left: auto;
}

.mb-sm {
	margin-bottom: 40px;
}
.mb-base {
	margin-bottom: 80px;
}
.mb-lg {
	margin-bottom: 120px;
}

@media screen and (max-width: 768px) {
	.mb-sm {
		margin-bottom: 30px;
	}
	.mb-base {
		margin-bottom: 60px;
	}
	.mb-lg {
		margin-bottom: 80px;
	}
}

.mb-1 {
	margin-bottom: 0.25rem; /* 4px */
}
.mb-2 {
	margin-bottom: 0.5rem; /* 8px */
}
.mb-3 {
	margin-bottom: 0.75rem; /* 12px */
}
.mb-4 {
	margin-bottom: 1rem; /* 16px */
}
.mb-5 {
	margin-bottom: 1.25rem; /* 20px */
}
.mb-6 {
	margin-bottom: 1.5rem; /* 24px */
}
.mb-7 {
	margin-bottom: 1.75rem; /* 28px */
}
.mb-8 {
	margin-bottom: 2rem; /* 32px */
}
.mb-9 {
	margin-bottom: 2.25rem; /* 36px */
}
.mb-10 {
	margin-bottom: 2.5rem; /* 40px */
}
.mb-11 {
	margin-bottom: 2.75rem; /* 44px */
}
.mb-12 {
	margin-bottom: 3rem; /* 48px */
}
.mb-13 {
	margin-bottom: 3.25rem; /* 52px */
}
.mb-14 {
	margin-bottom: 3.5rem; /* 56px */
}
.mb-15 {
	margin-bottom: 3.75rem; /* 60px */
}
.mb-16 {
	margin-bottom: 4rem; /* 64px */
}
.mb-17 {
	margin-bottom: 4.25rem; /* 68px */
}
.mb-18 {
	margin-bottom: 4.5rem; /* 72px */
}
.mb-19 {
	margin-bottom: 4.75rem; /* 76px */
}
.mb-20 {
	margin-bottom: 5rem; /* 80px */
}

.gap-0 {
	gap: 0; /* 0px */
}
.gap-1 {
	gap: 0.25rem; /* 4px */
}
.gap-2 {
	gap: 0.5rem; /* 8px */
}
.gap-3 {
	gap: 0.75rem; /* 12px */
}
.gap-4 {
	gap: 1rem; /* 16px */
}
.gap-5 {
	gap: 1.25rem; /* 20px */
}
.gap-6 {
	gap: 1.5rem; /* 24px */
}
