@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Noto+Sans+JP:wght@500&display=swap");

@import url("./reset.css");

@import url("./layout.css");

@import url("./component.css");

@import url("./utility.css");

:root {
	--c-primary: #1a87c4;
	--c-secondary: #81c806;
	--c-accent: #ea5404;
	--c-bg-primary: #e9f5f6;
	--c-bg-secondary: #f1f6e9;
	--c-bg-neutral: #f4f4f4;
	--c-white: #ffffff;
	--c-text: #333333;
	--c-text-white: #ffffff;
	--c-text-sub: #666666;
	--c-text-sub-light: #b3b3b3;
	--c-text-link: #3265db;
	--c-bg: #ffffff;
	--c-border: #e0e0e0;
	--c-tbl-ttl: #f6fbfb;
	--c-difference: #e0e0e0;
}

:root {
	--vw: 100vw;
	--inner-width: 1240px;
	--hd-height: 110px;
	--margin-offset: min(-40px, calc((var(--vw) * -50) + (var(--inner-width) / 2)) - 40px);
	--ease: cubic-bezier(0.3, 0, 0.6, 1);
	--shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

:focus-visible {
	outline: 2px solid;

	outline-offset: 2px;
}

::selection {
	background: rgba(0, 0, 0, 0.1);
}

html {
	font-size: 16px;
	scroll-padding-top: 24px;
}

body {
	min-height: 100dvh;
	background: var(--c-bg);
	color: var(--c-text);
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	letter-spacing: 0.02em;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

.mask {
	transform: translateZ(0);
	transition: mask-position 2s ease;
	mask-image: linear-gradient(
	-25deg,
	transparent,
	transparent 41%,
	rgba(0, 0, 0, 0.02) 43%,
	rgba(0, 0, 0, 0.08) 45%,
	rgba(0, 0, 0, 0.18) 46%,
	rgba(0, 0, 0, 0.32) 48%,
	rgba(0, 0, 0, 0.5) 50%,
	rgba(0, 0, 0, 0.68) 51%,
	rgba(0, 0, 0, 0.82) 53%,
	rgba(0, 0, 0, 0.92) 55%,
	rgba(0, 0, 0, 0.98) 56%,
	#000000 58%,
	#000000
	);
	mask-size: 100% max(350%, 150vh);
	mask-repeat: none;

	mask-position: center 100%;
}

.mask.-view {
	mask-position: center 0;
}

@keyframes floating-y {
	0% {
		transform: translateY(-5%);
	}

	100% {
		transform: translateY(5%);
	}
}

@media screen and (max-width: 1239.98px) {
	:root {
		--hd-height: 90px;
	}
}

@media screen and (max-width: 767.98px) {
	:root {
		--hd-height: 60px;
		--inner-width: 100%;
		--margin-offset: -20px;
	}

	html {
		font-size: 15px;
		scroll-padding-top: var(--hd-height);
	}

	body {
		padding-top: 60px;
	}
}

@media print {
	body {
		-webkit-print-color-adjust: exact;

		zoom: 0.68;
	}
}