@charset "UTF-8";

		/* ========================================
		Base Reset & Variables
		========================================
		*/
		:root {
			--cover-main-color: #ffffff;
			--cover-accent-color: #ff8fab;
			--cover-bg-overlay: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);

			--font-title: 'Playfair Display', serif;
			--font-copy: 'Shippori Mincho', serif;
			--font-sans: 'Noto Sans JP', sans-serif;
		}

		* { box-sizing: border-box; margin: 0; padding: 0; }
		body {
			font-family: var(--font-sans);
			background-color: #111;
			color: #fff;
			line-height: 1.6;
			overflow: hidden; /* 1画面固定 */
		}
		a { text-decoration: none; color: inherit; transition: all 0.3s; }

		/* ========================================
		Magazine 404 Cover
		========================================
		*/
		.magazine-cover {
			position: relative;
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}

		/* Background Image */
		.cover-bg {
			position: absolute;
			top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
		}
		.cover-bg img {
			width: 100%; height: 100%; object-fit: cover;
			/* 少し寂しげな雰囲気を出すために彩度を下げる */
			filter: grayscale(40%) contrast(1.1);
			transform: scale(1.05);
			animation: breathe 20s infinite alternate ease-in-out;
		}

		@keyframes breathe {
			0% { transform: scale(1.05); }
			100% { transform: scale(1.15); }
		}

		.cover-bg::after {
			content: '';
			position: absolute; top: 0; left: 0; width: 100%; height: 100%;
			background: var(--cover-bg-overlay);
		}

		/* Content Layout */
		.cover-content {
			position: relative;
			z-index: 10;
			width: 100%; height: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 2rem;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		/* Header: 404 Number as Magazine Title */
		.mag-header {
			text-align: center;
			margin-top: 2rem;
		}

		.error-code {
			font-family: var(--font-title);
			font-size: clamp(8rem, 25vw, 15rem);
			line-height: 0.8;
			font-weight: 900;
			color: transparent;
			-webkit-text-stroke: 2px #fff; /* 白抜きの文字 */
			opacity: 0.8;
			letter-spacing: -0.05em;
		}

		.error-msg {
			display: block;
			font-family: var(--font-sans);
			font-size: 1.2rem;
			font-weight: 700;
			letter-spacing: 0.3em;
			margin-top: -1rem;
			text-transform: uppercase;
			color: var(--cover-accent-color);
			text-shadow: 0 2px 10px rgba(0,0,0,0.5);
		}

		/* Copy Areas */
		.copy-area {
			position: relative;
			flex: 1;
		}

		.copy-main {
			position: absolute;
			bottom: 15%;
			left: 0;
			width: 100%;
			text-align: center;
			font-family: var(--font-copy);
		}

		.copy-main h2 {
			font-size: clamp(1.8rem, 5vw, 3.5rem);
			font-weight: 500;
			line-height: 1.6;
			text-shadow: 0 2px 20px rgba(0,0,0,0.8);
		}

		.copy-main h2 span {
			font-weight: 800;
			border-bottom: 2px solid var(--cover-accent-color);
			padding-bottom: 5px;
		}

		/* Return Button (Primary Action) */
		.action-area {
			text-align: center;
			margin-bottom: 4rem;
			position: relative;
			z-index: 20;
		}

		.btn-return {
			display: inline-block;
			padding: 1.2rem 4rem;
			background: #fff;
			color: #111;
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: 1.1rem;
			border-radius: 50px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.3);
			position: relative;
			overflow: hidden;
		}

		.btn-return::before {
			content: '';
			position: absolute;
			top: 0; left: 0; width: 0%; height: 100%;
			background: var(--cover-accent-color);
			transition: width 0.3s ease;
			z-index: -1;
		}

		.btn-return:hover::before {
			width: 100%;
		}

		.btn-return:hover {
			color: #fff;
			transform: translateY(-3px);
			box-shadow: 0 15px 40px rgba(255, 143, 171, 0.4);
		}

		/* Decorative Elements */
		.deco-line {
			position: absolute;
			top: 50%; right: 0;
			writing-mode: vertical-rl;
			font-family: var(--font-title);
			font-size: 1rem;
			letter-spacing: 0.2em;
			color: rgba(255,255,255,0.6);
			border-right: 1px solid rgba(255,255,255,0.4);
			padding-right: 1rem;
			height: 200px;
		}

		@media (max-width: 768px) {
			.error-code { font-size: 25vw; }
			.copy-main h2 { font-size: 1.6rem; }
			.btn-return { padding: 1rem 3rem; font-size: 1rem; }
		}