/* =========================================
       Variables & Reset
       ========================================= */

    :root {
    	--primary: #ec4899;
    	--primary-dark: #be185d;
    	--primary-light: rgba(236, 72, 153, 0.15);
    	--accent-purple: #8b5cf6;
    	--accent-cyan: #06b6d4;
    	--accent-orange: #f59e0b;
    	--accent-green: #10b981;
    	--bg: #0f172a;
    	--bg-panel: #1e293b;
    	--text: #f8fafc;
    	--text-muted: #94a3b8;
    	--glass-border: rgba(255, 255, 255, 0.1);
    	--wrap: min(1200px, 92vw);
    	--bottom-bar-height: 72px;
    	--radius-lg: 32px;
    	--radius-md: 24px;
    	--radius-sm: 12px;
    }
    * {
    	box-sizing: border-box;
    	margin: 0;
    	padding: 0;
    }
    html {
    	scroll-behavior: smooth;
    	font-size: 16px;
    }
    body {
    	background: var(--bg);
    	color: var(--text);
    	font-family: 'Noto Sans JP', 'Inter', sans-serif;
    	line-height: 1.8;
    	overflow-x: hidden;
    }
    @media (max-width: 980px) {
    	body {
    		padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 20px));
    	}
    }
    a {
    	color: inherit;
    	text-decoration: none;
    }
    img, video {
    	max-width: 100%;
    	height: auto;
    	display: block;
    	border-radius: var(--radius-sm);
    }
    ul {
    	list-style: none;
    }
    button {
    	font-family: inherit;
    	cursor: pointer;
    	border: none;
    }
    /* Layout Utilities */

    .wrap {
    	width: var(--wrap);
    	margin: 0 auto;
    }
    .section {
    	padding: clamp(60px, 8vw, 100px) 0;
    }
    .flex {
    	display: flex;
    }
    .flex-wrap {
    	flex-wrap: wrap;
    }
    .justify-center {
    	justify-content: center;
    }
    .justify-between {
    	justify-content: space-between;
    }
    .gap-4 {
    	gap: 16px;
    }
    .grid-2 {
    	display: grid;
    	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    	gap: 32px;
    }
    .grid-3 {
    	display: grid;
    	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    	gap: 24px;
    }
    .grid-4 {
    	display: grid;
    	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    	gap: 24px;
    }
    .text-center {
    	text-align: center;
    }
    .text-primary {
    	color: var(--primary);
    }
    .text-muted {
    	color: var(--text-muted);
    }
    .text-gradient {
    	background: linear-gradient(90deg, var(--primary), var(--accent-purple));
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    }
    .fw-bold {
    	font-weight: 700;
    }
    .fw-black {
    	font-weight: 900;
    }
    .mb-2 {
    	margin-bottom: 8px;
    }
    .mb-4 {
    	margin-bottom: 16px;
    }
    .mb-6 {
    	margin-bottom: 24px;
    }
    .mb-8 {
    	margin-bottom: 32px;
    }
    .mb-12 {
    	margin-bottom: 48px;
    }
    /* Header */

    .topbar {
    	position: sticky;
    	top: 0;
    	z-index: 1000;
    	background: rgba(15, 23, 42, 0.85);
    	backdrop-filter: blur(12px);
    	-webkit-backdrop-filter: blur(12px);
    	border-bottom: 1px solid var(--glass-border);
    }
    .topbar-inner {
    	padding: 16px 0;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }
    .logo-title {
    	font-size: 15px;
    	font-weight: 900;
    	background: linear-gradient(90deg, var(--primary), var(--accent-purple));
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    }
    .logo-sub {
    	font-size: 11px;
    	color: var(--text-muted);
    	font-weight: 700;
    	margin-top: 2px;
    }
    .nav-links {
    	display: flex;
    	gap: 8px;
    	align-items: center;
    }
    .nav-links a {
    	font-size: 13px;
    	font-weight: 700;
    	padding: 8px 16px;
    	border-radius: 999px;
    	transition: 0.3s;
    	color: var(--text-muted);
    }
    .nav-links a:hover, .nav-links a:focus-visible {
    	background: var(--primary-light);
    	color: var(--primary);
    	outline: none;
    }
    @media (max-width: 980px) {
    	.nav-links {
    		display: none;
    	}
    }
    /* Video Hero (フェイルセーフ対応) */

    .hero-video-wrapper {
    	position: relative;
    	width: 100%;
    	border-radius: var(--radius-lg);
    	overflow: hidden;
    	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    	aspect-ratio: 16/9;
    	margin-bottom: 40px;
    	background: #0f172a url('images/3th.JPG') center/cover no-repeat;
    }
    @media (max-width: 768px) {
    	.hero-video-wrapper {
    		aspect-ratio: 4/5;
    	}
    }
    .hero-video-wrapper video {
    	width: 100%;
    	height: 100%;
    	object-fit: cover;
    	opacity: 0.6;
    }
    .hero-video-overlay {
    	position: absolute;
    	inset: 0;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	background: linear-gradient(0deg, rgba(15, 23, 42, 1) 0%, rgba(15, 23, 42, 0.2) 60%);
    	padding: 24px;
    	text-align: center;
    }
    .series-link {
    	display: inline-flex;
    	align-items: center;
    	gap: 8px;
    	font-size: 12px;
    	font-weight: 900;
    	color: #fff;
    	background: rgba(255, 255, 255, 0.1);
    	border: 1px solid rgba(255, 255, 255, 0.2);
    	padding: 8px 16px;
    	border-radius: 999px;
    	backdrop-filter: blur(4px);
    	transition: 0.3s;
    	margin-top: 24px;
    }
    .series-link:hover {
    	background: rgba(255, 255, 255, 0.2);
    	transform: translateY(-2px);
    }
    /* Buttons */

    .btn {
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	border-radius: 999px;
    	font-weight: 900;
    	padding: 16px 32px;
    	font-size: 15px;
    	transition: all 0.2s ease;
    	text-decoration: none;
    }
    .btn-pink {
    	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    	color: #fff;
    	box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
    }
    .btn-pink:hover {
    	transform: scale(1.05);
    	filter: brightness(1.1);
    	box-shadow: 0 12px 24px rgba(236, 72, 153, 0.6);
    }
    .btn-game {
    	background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    	color: #fff;
    	box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
    	animation: pulse 2s infinite;
    }
    .btn-game:hover {
    	transform: scale(1.05);
    	filter: brightness(1.1);
    }
    @keyframes pulse {
    	0% {
    		box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
    	}
    	70% {
    		box-shadow: 0 0 0 15px rgba(139, 92, 246, 0);
    	}
    	100% {
    		box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    	}
    }
    /* Cards */

    .glass-panel {
    	background: rgba(255, 255, 255, 0.03);
    	backdrop-filter: blur(16px);
    	-webkit-backdrop-filter: blur(16px);
    	border: 1px solid var(--glass-border);
    	border-radius: var(--radius-lg);
    	padding: clamp(32px, 5vw, 56px);
    	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    .card {
    	background: rgba(255, 255, 255, 0.02);
    	border-radius: var(--radius-md);
    	padding: 32px;
    	border: 1px solid var(--glass-border);
    	transition: all 0.3s ease;
    	display: flex;
    	flex-direction: column;
    	position: relative;
    }
    .card:hover {
    	transform: translateY(-4px);
    	border-color: rgba(236, 72, 153, 0.4);
    	background: rgba(255, 255, 255, 0.04);
    	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }
    .border-top-pink {
    	border-top: 4px solid var(--primary);
    }
    .border-top-purple {
    	border-top: 4px solid var(--accent-purple);
    }
    .border-top-cyan {
    	border-top: 4px solid var(--accent-cyan);
    }
    .border-top-orange {
    	border-top: 4px solid var(--accent-orange);
    }
    .border-top-green {
    	border-top: 4px solid var(--accent-green);
    }
    /* ゲーミフィケーション: フリップカード */

    .flip-card {
    	background-color: transparent;
    	perspective: 1000px;
    	cursor: pointer;
    	border-radius: var(--radius-md);
    	outline: none;
    }
    .flip-card.h-280 {
    	height: 280px;
    }
    .flip-card.h-420 {
    	height: 420px;
    }
    .flip-card-inner {
    	position: relative;
    	width: 100%;
    	height: 100%;
    	text-align: center;
    	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    	transform-style: preserve-3d;
    	border-radius: var(--radius-md);
    }
    .flip-card:hover .flip-card-inner, .flip-card:focus-visible .flip-card-inner {
    	transform: rotateY(180deg);
    }
    .flip-card-front, .flip-card-back {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    	border-radius: var(--radius-md);
    	border: 1px solid var(--glass-border);
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	overflow: hidden;
    }
    .flip-card-front {
    	background: var(--bg-panel);
    	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    	padding: 0;
    }
    .flip-card-back {
    	background: linear-gradient(135deg, #1e293b, #0f172a);
    	transform: rotateY(180deg);
    	text-align: left;
    	align-items: flex-start;
    	justify-content: flex-start;
    	padding: 24px;
    }
    .flip-card-front img {
    	width: 100%;
    	height: 55%;
    	object-fit: cover;
    }
    .flip-card-front-content {
    	height: 45%;
    	padding: 16px;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	width: 100%;
    }
    .flip-card-front h3 {
    	font-size: 20px;
    	font-weight: 900;
    	line-height: 1.3;
    }
    .flip-card-front .tap-hint {
    	margin-top: auto;
    	font-size: 11px;
    	color: var(--primary);
    	font-weight: 700;
    	background: rgba(236, 72, 153, 0.1);
    	padding: 4px 12px;
    	border-radius: 999px;
    	animation: bounce 2s infinite;
    }
    .flip-card-front.no-img {
    	padding: 32px;
    	justify-content: flex-start;
    }
    .flip-card-back.center-content {
    	align-items: center;
    	justify-content: center;
    	text-align: center;
    }
    @keyframes bounce {
    	0%, 100% {
    		transform: translateY(0);
    	}
    	50% {
    		transform: translateY(-5px);
    	}
    }
    .flip-card-back h4 {
    	font-size: 13px;
    	color: var(--text-muted);
    	margin-bottom: 6px;
    	border-bottom: 1px solid var(--glass-border);
    	width: 100%;
    	padding-bottom: 4px;
    }
    .flip-card-back ul {
    	font-size: 11.5px;
    	font-weight: 700;
    	margin-bottom: 12px;
    	list-style: none;
    	padding: 0;
    	line-height: 1.3;
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: 4px;
    }
    .flip-card-back ul li::before {
    	content: "▶";
    	color: var(--primary);
    	margin-right: 4px;
    	font-size: 9px;
    }
    .skill-tags {
    	display: flex;
    	flex-wrap: wrap;
    	gap: 4px;
    	margin-bottom: 12px;
    }
    .skill-tag {
    	background: rgba(255, 255, 255, 0.1);
    	padding: 4px 8px;
    	border-radius: 4px;
    	font-size: 10px;
    	font-weight: 900;
    }
    /* Utilities */

    .section-kicker {
    	font-size: 12px;
    	letter-spacing: 0.15em;
    	color: var(--primary);
    	font-weight: 900;
    	margin-bottom: 12px;
    	font-family: 'Inter', sans-serif;
    	text-transform: uppercase;
    }
    .section-title {
    	font-size: clamp(28px, 4vw, 36px);
    	font-weight: 900;
    	line-height: 1.4;
    	margin-bottom: 16px;
    }
    .annotation {
    	font-size: 11px;
    	color: var(--text-muted);
    	margin-top: 8px;
    	display: block;
    }
    .sticky-bottom-bar {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	z-index: 999;
    	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    	background: rgba(15, 23, 42, 0.95);
    	backdrop-filter: blur(10px);
    	border-top: 1px solid var(--glass-border);
    	display: flex;
    	gap: 12px;
    }
    .sticky-bottom-bar .btn {
    	flex: 1;
    	padding: 12px;
    	border-radius: 12px;
    }
    @media (min-width: 981px) {
    	.sticky-bottom-bar {
    		display: none;
    	}
    }
    /* Quiz */

    #quiz-container {
    	background: var(--bg-panel);
    	border: 2px solid var(--accent-purple);
    	border-radius: var(--radius-lg);
    	padding: clamp(24px, 5vw, 40px);
    	position: relative;
    	overflow: hidden;
    }
    .quiz-screen {
    	display: none;
    	animation: fadeIn 0.4s ease;
    }
    .quiz-screen.active {
    	display: block;
    }
    @keyframes fadeIn {
    	from {
    		opacity: 0;
    		transform: translateY(10px);
    	}
    	to {
    		opacity: 1;
    		transform: translateY(0);
    	}
    }
    .quiz-btn {
    	width: 100%;
    	padding: 20px;
    	margin-bottom: 12px;
    	background: rgba(255, 255, 255, 0.05);
    	border: 1px solid var(--glass-border);
    	border-radius: 16px;
    	color: #fff;
    	font-size: 16px;
    	font-weight: 700;
    	text-align: left;
    	transition: 0.2s;
    }
    .quiz-btn:hover {
    	background: rgba(139, 92, 246, 0.2);
    	border-color: var(--accent-purple);
    	transform: translateX(8px);
    }
    /* Canvas Background */

    #canvas-bg {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: -1;
    	pointer-events: none;
    	opacity: 0.2;
    }
    @media (max-width: 980px) {
    	#canvas-bg {
    		display: none;
    	}
    }
    @media (prefers-reduced-motion: reduce) {
    	* {
    		animation-duration: 0.01ms !important;
    		transition-duration: 0.01ms !important;
    	}
    	#canvas-bg {
    		display: none;
    	}
    }