:root {
	--color-gray-0: #ffffff;
	--color-gray-50: #f5f8f8;
	--color-gray-100: #edf1f2;
	--color-gray-200: #dfe4e6;
	--color-gray-300: #cbd3d6;
	--color-gray-400: #b5bec4;
	--color-gray-500: #a1abb3;
	--color-gray-600: #818c98;
	--color-gray-700: #77808b;
	--color-gray-800: #626971;
	--color-gray-900: #52585d;
	--color-gray-950: #303336;
	--color-gray-1000: #17191c;

	--color-accent-50: #f0fdfb;
	--color-accent-100: #cdfaf4;
	--color-accent-200: #9bf4ec;
	--color-accent-300: #61e7df;
	--color-accent-400: #31d0cb;
	--color-accent-500: #18b4b2;
	--color-accent-600: #109191;
	--color-accent-700: #117274;
	--color-accent-800: #135a5c;
	--color-accent-900: #144c4d;
	--color-accent-950: #052b2e;

	--transition-time: 0.1s;

	font-size: 16px;
}

body {
	padding: 0;
	margin: 0;
}

.root {
	font-family: 'Inter Variable', 'Roboto Flex', 'Noto Sans JP', sans-serif;
	color: var(--color-gray-950);
	padding: 0 clamp(0em, 5vw, 5em);
}
.english {
	font-feature-settings: "calt" on, "frac" on, "case" on, "ss01" on, "dlig" on;
}

fieldset {
	border-radius: 0.25rem;
	border: 1.5px solid var(--color-gray-500);
	font-family: inherit;
}
legend {
	padding: 0 0.5rem;
}

label {
	font-family: inherit;
}

button, input[type="button"] {
	font-family: inherit;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	transition: background-color var(--transition-time), border var(--transition-time);
	font-size: inherit;
}
button.button-primarry, input[type="button"].button-primarry {
	color: var(--color-gray-50);
	background-color: var(--color-accent-500);
	border: 1.5px solid var(--color-accent-500);

	&:hover {
		background-color: var(--color-accent-600);
		border: 1.5px solid var(--color-accent-600);
	}
	&:active {
		background-color: var(--color-accent-700);
		border: 1.5px solid var(--color-accent-700);
	}
	&:disabled {
		background-color: var(--color-gray-500);
		border: 1.5px solid var(--color-gray-500);
	}
}
button.button-tonal, input[type="button"].button-tonal {
	color: var(--color-gray-1000);
	background-color: var(--color-gray-300);
	border: 1.5px solid var(--color-gray-300);

	&:hover {
		background-color: var(--color-gray-400);
		border: 1.5px solid var(--color-gray-400);
	}
	&:active {
		background-color: var(--color-gray-500);
		border: 1.5px solid var(--color-gray-500);
	}
	&:disabled {
		color: var(--color-gray-50);
		background-color: var(--color-gray-500);
		border: 1.5px solid var(--color-gray-500);
	}
}
button.button-outline, input[type="button"].button-outline {
	color: var(--color-gray-1000);
	background-color: transparent;
	border: 1.5px solid var(--color-gray-800);

	&:hover {
		background-color: var(--color-gray-100);
	}
	&:active {
		background-color: var(--color-gray-200);
	}
	&:disabled {
		color: var(--color-gray-500);
		background-color: transparent;
		border: 1.5px solid var(--color-gray-500);
	}
}

input[type="checkbox"] {
	display: inline-block;
	appearance: none;
	width: 1.5em;
	height: 1.5em;
	margin-inline-end: 0.5em;
	border-radius: 0.25em;
	border: 1.5px solid var(--color-gray-400);
	
	transition: background var(--transition-time), border var(--transition-time);
}
input[type="checkbox"]:checked {
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z%22%2F%3E%3C%2Fsvg%3E'), var(--color-accent-500);
	border: 1.5px solid var(--color-accent-500);
	background-size: cover;
}
input[type="checkbox"]:disabled {
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z%22%2F%3E%3C%2Fsvg%3E'), var(--color-gray-500);
	border: 1.5px solid var(--color-gray-500);
	background-size: cover;
}
label:has(input[type="checkbox"]) {
	display: flex;
	align-items: center;
}

input[type="number"] {
	padding: 0.25em 0.5em;
	width: 5em;
	margin-inline-end: 0.5em;
	font-family: inherit;
	border: 1.5px solid var(--color-gray-500);
	border-radius: 0.25rem;
}

input[type="text"] {
	padding: 0.25em 0.5em;
	width: 10em;
	margin-inline-end: 0.5em;
	font-family: inherit;
	border: 1.5px solid var(--color-gray-500);
	border-radius: 0.25rem;
}

select {
	padding: 0.25em 0.5em;
	margin-inline-end: 0.5em;
	font-family: inherit;
	border: 1.5px solid var(--color-gray-500);
	border-radius: 0.25rem;
}

h1 {
	border-bottom: 1px solid var(--color-gray-900);
	padding-bottom: 0.1em;
	line-height: 1;
	font-weight: 600;
}

h2 {
	text-align: center;
	font-size: 2em;
	line-height: 1;
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-weight: 600;
}
h2::after {
	content: '';
	display: block;
	height: 2px;
	width: 20ric;
	margin: auto;
	background: linear-gradient(to left, transparent 0%, var(--color-accent-400) 2%, var(--color-accent-500) 20% 80%, var(--color-accent-400) 98%, transparent 100%);
	margin-top: 0.5ric;
}
h1+h2 {
	margin-top: 2rem;
}

h3 {
	border-bottom: 1px solid var(--color-gray-900);
	padding-bottom: 0.1em;
	line-height: 1;
	font-size: 2em;
	margin-top: 3rem;
	font-weight: 600;
}
h2+h3 {
	margin-top: 1rem;
}

h4 {
	border-bottom: 1px dotted var(--color-gray-950);
	padding-bottom: 0.1em;
	line-height: 1;
	font-size: 1.5em;
	margin-top: 1.5rem;
	font-weight: 600;
}

blockquote {
	background-color: var(--color-gray-100);
	padding: 1rem;
}