/* ---------------------------------------------------
  :root カスタムプロパティ
--------------------------------------------------- */
:root {
	--design-width: 1280;
	--sp-design-width: 375;
	--base-font-size: 10;
	--font-scale: min(1, 100vw / (var(--design-width) * 1px));

	--gothic: "Noto Sans JP", sans-serif;
	--font-gothic: var(--gothic);
	--abril: "Abril Fatface", serif;

	--blk: 0, 0, 0;
	--wht: 255, 255, 255;
	--gre: 0, 77, 65;
	--brn: 180, 162, 125;
	--beg: 255, 252, 228;

	--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(--gre));
	line-height: 1.8;
	color: rgb(var(--brn));
	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(a) {
	color: inherit;
	text-decoration: underline;
	transition: all 0.5s ease 0s;
}

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