@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Kaku+Gothic+New&display=swap");

:root {
	--width-ratio: 1px / 1;
	--width-ratio-pc: 100vw / 1440;
	--color-main: #428c67;
	--color-lightgreen: #6bb74f;
	--color-lightgreen2: #35a041;
	--color-yellowgreen: #d3df8f;
	--color-text: #000;
	--color-creem: #fbf8e9;
	--font-Inter: "Inter", sans-serif;
	--font-ZenKakuGothicNew: "Zen Kaku Gothic New", sans-serif;
}

@media screen and (min-width: 1921px) {
	:root {
		/* --width-ratio-pc: 1.333px / 1; */
	}
}
@media screen and (max-width: 1440px) {
	:root {
		--width-ratio: 100vw / 1440;
		--width-ratio-pc: 1px / 1;
	}
}
@media screen and (max-width: 768px) {
	:root {
		--width-ratio: 100vw / 375;
		--width-ratio-pc: 1px / 375;
	}
}

* {
	box-sizing: border-box;
}
html {
	font-size: 62.5%; /* 10px = 1rem */
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-ZenKakuGothicNew);
	color: var(--color-text);
	letter-spacing: 0;
	overflow-x: hidden;
}

:target {
	scroll-margin-top: calc(82px + 20px);
}
@media screen and (max-width: 768px) {
	:target {
		scroll-margin-top: calc(55px + 20px);
	}
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	color: var(--color-text);
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	opacity: 0.7;
}

@media screen and (max-width: 768px) {
	a:hover {
		opacity: 1;
	}
}