/* ---------------------------------------------------
  :root カスタムプロパティ
--------------------------------------------------- */
:root {
	--design-width: 1366;
	--sp-design-width: 375;

	--base-font-size: 10;
	--base-font-size-min: 8.75;

	--amaranth: "Amaranth", sans-serif;
	--gothic: "Noto Sans JP", sans-serif;

	--font-gothic: var(--gothic);

	--blk: 49, 49, 49;
	--wht: 255, 255, 255;
	--brn: 112, 84, 84;
	--blu: 0, 96, 176;
	--gre: 0, 134, 87;

	--fun: 0, 179, 191;

	--pageTop-right: 1rem;
	--pageTop-bottom: 1rem;
}

/* ---------------------------------------------------
  HTML / BODY 基本
--------------------------------------------------- */
html {
	font-size: min(calc(var(--base-font-size) * 1px), calc(var(--base-font-size) * 100vw / var(--design-width)));
	scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
	html {
		font-size: calc(var(--base-font-size) * 100vw / var(--sp-design-width));
	}
}

body {
	background: rgb(var(--wht));
	line-height: 1.8;
	color: rgb(var(--blk));
	font-family: var(--font-gothic);
	font-feature-settings: "palt"1;
	letter-spacing: 0.05em;
	font-weight: 400;
}

:where(input, select, textarea, button, label) {
	background: none;
	color: inherit;
	font: inherit;
	border: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

:where(button, [type="button"], [type="submit"], [type="reset"], label[for]) {
	cursor: pointer;
}

:where(textarea) {
	resize: vertical;
}

:where(svg, video, iframe) {
	max-width: 100%;
}

:where(iframe) {
	display: block;
}

:where(a) {
	color: inherit;
	text-decoration: underline;
	transition: all 0.5s ease 0s;
}

:where(a:hover) {
	text-decoration: none;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}