/* =========================================
   404 Page Styles
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

.error-404-page {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;22
	padding: 80px 24px;
	font-family: "Noto Sans JP", sans-serif;
	background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.error-404-container {
	max-width: 620px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* === Site Icon / Logo === */
.error-404-icon {
	margin-bottom: 10px;
}

.error-404-icon img,
.error-404-icon .custom-logo {
	max-width: 450px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.error-404-icon .site-icon-img {
	max-width: 90px;
	border-radius: 20px;
	box-shadow: 0 8px 20px rgba(0, 75, 158, 0.15);
}

.site-title-fallback {
	font-size: 1.5rem;
	font-weight: 800;
	color: #004B9E;
	text-decoration: none;
	letter-spacing: -0.5px;
}

/* === 404 Number === */
.error-404-number {
	font-size: clamp(90px, 18vw, 160px);
	font-weight: 900;
	line-height: 1;
	margin: 10px 0 0 0;
	background: linear-gradient(135deg, #004B9E 0%, #00A959 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -4px;
}

/* === Title & Description === */
.error-404-title {
	font-size: 1.9rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 10px 0 14px 0;
}

.error-404-desc {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #555555;
	max-width: 480px;
	margin: 0 auto 34px auto;
}

/* === Back to Home Button === */
.error-404-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #004B9E;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	padding: 15px 34px;
	border-radius: 50px;
	box-shadow: 0 10px 25px rgba(0, 75, 158, 0.25);
	transition: background-color 0.35s ease, transform 0.3s ease, box-shadow 0.35s ease;
}

.error-404-btn svg {
	transition: transform 0.3s ease;
}

.error-404-btn:hover,
.error-404-btn:focus {
	background-color: #00A959;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 169, 89, 0.3);
	color: #ffffff !important;
}

.error-404-btn:hover svg {
	transform: translateX(-4px);
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 600px) {
	.error-404-page {
		padding: 60px 20px;
	}

	.error-404-title {
		font-size: 1.5rem;
	}

	.error-404-desc {
		font-size: 0.95rem;
	}

	.error-404-btn {
		width: 100%;
		justify-content: center;
	}
}