@use "variables" as *;

// ---------------------------------------------------------------------------
// 404 — page-not-found. page-head band + .deco-bg centred message + btn-link.
// ---------------------------------------------------------------------------
.error-404__body {
	text-align: center;
}

.error-404__code {
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(64, 100);
	line-height: 1;
	color: $color-green;
}

.error-404__lead {
	margin-top: rem(30);
	font-family: $font-serif;
	font-weight: 700;
	font-size: fz(20, 28);
	color: $color-green;

	@include sp {
		margin-top: rem(20);
	}
}

.error-404__note {
	margin-top: rem(24);
	line-height: 2;

	@include sp {
		margin-top: rem(16);
	}
}

.error-404__action {
	display: flex;
	justify-content: center;
	margin-top: rem(50);

	@include sp {
		margin-top: rem(36);
	}

	.btn-link {
		width: rem(280);
		max-width: 100%;

		@include sp {
			width: 100%;
		}
	}

	.btn-link__ja {
		font-size: rem(16);
		white-space: nowrap;
	}
}