@charset "UTF-8";

		/* -----------------------------------------------------------------
		   CSS Variables (Common)
		   ----------------------------------------------------------------- */
		:root {
			--head_color: #524C42;
			--back_color: #706C65;
			--pop_color: #D6C6A9;
			--tab_color: #AEAEAE;
			--font_light_color: #D7D7D7;
			--font_dark_color: #7B6464;
			--font_tab_color: #7B7B7B;
			--icon_red_color: #CE6B6B;
			--icon_red_hover_color: #C73333;
			--icon_blue_color: #47ACD2;
			--icon_blue_hover_color: #4171C8;
			--btn_perple_color: #9F58B1;
			--btn_perple_hover: #8e4da0;
			--fukidashi_color: #333333;
			--border-radius: 12px;
			--shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		}

		/* -----------------------------------------------------------------
		   Reset & Base Styles
		   ----------------------------------------------------------------- */
		*, *::before, *::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
			background-color: var(--back_color);
			color: var(--font_light_color);
			line-height: 1.6;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			overflow-x: hidden; /* 横スクロール防止 */
			position: relative;
		}

		/* 背景Canvas用 */
		#bg-canvas {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			pointer-events: none;
		}

		/* -----------------------------------------------------------------
		   Layout Components
		   ----------------------------------------------------------------- */
		.header {
			background-color: var(--head_color);
			padding: 1.5rem 2rem;
			text-align: center;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			position: relative;
			z-index: 10;
		}

		.header h1 {
			font-size: 1.2rem;
			letter-spacing: 0.05em;
			color: var(--pop_color);
			opacity: 0.8;
		}

		.main-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 2rem;
			text-align: center;
			position: relative;
			z-index: 5;
		}

		/* -----------------------------------------------------------------
		   404 Content
		   ----------------------------------------------------------------- */
		.error-content {
			max-width: 600px;
			width: 100%;
		}

		/* Glitch Text Effect */
		.glitch-wrapper {
			position: relative;
			margin-bottom: 1rem;
		}

		.code-404 {
			font-size: 8rem;
			font-weight: 900;
			color: var(--pop_color);
			letter-spacing: 0.05em;
			position: relative;
			display: inline-block;
			text-shadow: 2px 2px 0px var(--icon_blue_color);
		}

		/* グリッチアニメーション用の疑似要素 */
		.code-404::before,
		.code-404::after {
			content: attr(data-text);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--back_color); /* 背景色と同じにして切り抜く */
		}

		.code-404::before {
			left: 2px;
			text-shadow: -1px 0 var(--icon_red_color);
			clip: rect(44px, 450px, 56px, 0);
			animation: glitch-anim 5s infinite linear alternate-reverse;
		}

		.code-404::after {
			left: -2px;
			text-shadow: -1px 0 var(--icon_blue_color);
			clip: rect(44px, 450px, 56px, 0);
			animation: glitch-anim2 5s infinite linear alternate-reverse;
		}

		@keyframes glitch-anim {
			0% { clip: rect(18px, 9999px, 81px, 0); }
			5% { clip: rect(78px, 9999px, 9px, 0); }
			10% { clip: rect(21px, 9999px, 98px, 0); }
			15% { clip: rect(5px, 9999px, 35px, 0); }
			20% { clip: rect(61px, 9999px, 66px, 0); }
			25% { clip: rect(98px, 9999px, 14px, 0); }
			30% { clip: rect(31px, 9999px, 90px, 0); }
			35% { clip: rect(51px, 9999px, 25px, 0); }
			40% { clip: rect(8px, 9999px, 52px, 0); }
			45% { clip: rect(85px, 9999px, 6px, 0); }
			50% { clip: rect(42px, 9999px, 71px, 0); }
			55% { clip: rect(12px, 9999px, 88px, 0); }
			60% { clip: rect(67px, 9999px, 33px, 0); }
			65% { clip: rect(26px, 9999px, 59px, 0); }
			70% { clip: rect(91px, 9999px, 18px, 0); }
			75% { clip: rect(3px, 9999px, 95px, 0); }
			80% { clip: rect(55px, 9999px, 47px, 0); }
			85% { clip: rect(16px, 9999px, 82px, 0); }
			90% { clip: rect(74px, 9999px, 29px, 0); }
			95% { clip: rect(38px, 9999px, 63px, 0); }
			100% { clip: rect(89px, 9999px, 11px, 0); }
		}

		@keyframes glitch-anim2 {
			0% { clip: rect(65px, 9999px, 92px, 0); }
			5% { clip: rect(11px, 9999px, 34px, 0); }
			10% { clip: rect(84px, 9999px, 7px, 0); }
			15% { clip: rect(29px, 9999px, 56px, 0); }
			20% { clip: rect(58px, 9999px, 83px, 0); }
			25% { clip: rect(96px, 9999px, 19px, 0); }
			30% { clip: rect(6px, 9999px, 44px, 0); }
			35% { clip: rect(41px, 9999px, 97px, 0); }
			40% { clip: rect(72px, 9999px, 22px, 0); }
			45% { clip: rect(15px, 9999px, 68px, 0); }
			50% { clip: rect(93px, 9999px, 3px, 0); }
			55% { clip: rect(36px, 9999px, 51px, 0); }
			60% { clip: rect(79px, 9999px, 87px, 0); }
			65% { clip: rect(23px, 9999px, 16px, 0); }
			70% { clip: rect(64px, 9999px, 94px, 0); }
			75% { clip: rect(8px, 9999px, 39px, 0); }
			80% { clip: rect(49px, 9999px, 75px, 0); }
			85% { clip: rect(88px, 9999px, 27px, 0); }
			90% { clip: rect(19px, 9999px, 61px, 0); }
			95% { clip: rect(53px, 9999px, 81px, 0); }
			100% { clip: rect(32px, 9999px, 13px, 0); }
		}

		.message-title {
			font-size: 1.5rem;
			color: var(--font_light_color);
			margin-bottom: 1rem;
			font-weight: bold;
		}

		.message-desc {
			color: var(--tab_color);
			margin-bottom: 2.5rem;
			font-size: 0.95rem;
		}

		/* Button Style */
		.btn-home {
			display: inline-block;
			background-color: var(--btn_perple_color);
			color: #fff;
			padding: 1rem 2.5rem;
			border-radius: 50px;
			text-decoration: none;
			font-weight: bold;
			font-size: 1.1rem;
			box-shadow: 0 4px 15px rgba(159, 88, 177, 0.4);
			transition: all 0.3s ease;
		}

		.btn-home:hover {
			background-color: var(--btn_perple_hover);
			transform: translateY(-3px);
			box-shadow: 0 8px 20px rgba(159, 88, 177, 0.6);
		}

		.btn-home:active {
			transform: translateY(-1px);
		}

		/* -----------------------------------------------------------------
		   Responsive
		   ----------------------------------------------------------------- */
		@media (max-width: 600px) {
			.code-404 {
				font-size: 5rem;
			}
			.message-title {
				font-size: 1.2rem;
			}
		}

		footer {
			text-align: center;
			padding: 2rem;
			font-size: 0.8rem;
			color: var(--tab_color);
			margin-top: auto;
			z-index: 10;
		}