@use "variables" as *;

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%; // PC: 1rem = 10px (fixed)
	scroll-behavior: smooth;

	@include sp {
		font-size: calc(100vw / #{$sp-divisor}); // SP: 1rem = 10px @390, fluid by vw
	}
}

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

body {
	margin: 0;
	color: $color-text;
	background: $color-white;
	font-family: $font-sans;
	font-size: $fz-body-pc; // PC 14px
	line-height: $line-height;
	-webkit-font-smoothing: antialiased;

	@include sp {
		font-size: $fz-body-sp; // SP 16px@390
	}
}

// Headings — Noto Serif JP Bold, brand green (per design)
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: $color-heading;
	font-family: $font-serif;
	font-weight: 700;
	line-height: 1.4;
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: $color-link;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}