/* CSS Document */

#wrapper{
	grid-template-rows: auto 1fr;
}

#pagePath{
	display: none;
}

#notFound{
	display: grid;
	grid-gap: 48px;
	width: var(--wrap);
	margin: clamp(64px, calc(80 / 1200 * 100dvw), 80px) auto clamp(96px, calc(128 / 1200 * 100dvw), 128px) auto;
	& h2{
		display: grid;
		justify-items: center;
		grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		text-align: center;
		word-break: keep-all;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			display: block;
			width: clamp(96px, calc(128 / 1200 * 100dvw), 128px);
			aspect-ratio: 1;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><path d="M22,34h-14c-1.1,0-2-.9-2-2V8c0-1.1.9-2,2-2h32c1.1,0,2,.9,2,2v16"/><path d="M6,26h20"/><path d="M16,42h8"/><path d="M20,34l-1,8"/><path d="M30,36c0,3.31,2.69,6,6,6s6-2.69,6-6-2.69-6-6-6-6,2.69-6,6"/><path d="M40.4,40.4l3.6,3.6"/></svg>') no-repeat center;
			-webkit-mask-size: contain;
			background: var(--color-theme);
		}
	}
	& h2+div{
		letter-spacing: 0.05em;
		@media (min-width: 576px) {
			text-align: center;
			word-break: keep-all;
		}
	}
}

.caution{
	justify-self: center;
	padding: 24px;
	background: #f2f2f2;
	border: 1px solid #ccc;
	& p{
		font-size: 14px;
	}
}