/**
 * #Base
 */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--ff-sans);
	-webkit-font-smoothing: antialiased;
	background-color: var(--white);
	color: var(--color-text);

	&.home,
	&.has-fixed-bg {
		background-color: var(--black);

		.l-main,
		.l-footer {
			position: relative;
			z-index: 1;
		}
	}

	&.is-menu-open {
		overflow: hidden;
	}

	a {
		transition: opacity var(--duration) ease;
		color: var(--link);

		&:hover {
			opacity: 0.7;
		}
	}

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

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

button {
	font-family: inherit;
}

[id] {
	scroll-margin-top: var(--hh);

	@media (max-width: 768px) {
		scroll-margin-top: var(--hh-sp);
	}
}