/* ==========================================================================
   HELLO WORLD — playful product site
   ========================================================================== */

@font-face {
	font-family: "Rounded M+ Local";
	src: url("./rounded-x-mplus/rounded-x-mplus-1p-medium.ttf") format("truetype");
	font-display: swap;
}

:root {
	/* おもちゃ箱パレット（5歳〜低学年） */
	--hw-pink: #ff6eb4;
	--hw-pink-deep: #e84a9a;
	--hw-coral: #ff6b5a;
	--hw-coral-deep: #e84a3a;
	--hw-mint: #3dd6a5;
	--hw-mint-deep: #1fba88;
	--hw-sky: #4ec4ff;
	--hw-sky-deep: #2a9fe0;
	--hw-blue: #3b9eff;
	--hw-blue-deep: #1e7fe0;
	--hw-sun: #ffd23f;
	--hw-sun-deep: #f0b429;
	--hw-lime: #a8e63a;
	--hw-grape: #b07cff;
	--hw-ink: #2a2340;
	--hw-ink-soft: #5a5070;
	--hw-paper: #fff6fb;
	--hw-surface: #ffffff;
	--hw-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
	--hw-font: "M PLUS Rounded 1c", "Rounded M+ Local", "Hiragino Maru Gothic ProN", Meiryo, sans-serif;
	--hw-mono: "IBM Plex Mono", "Consolas", monospace;
	--hw-display: "Fredoka", "M PLUS Rounded 1c", sans-serif;
	--hw-nav-h: 4.5rem;
	--bs-primary: #ff6eb4;
	--bs-primary-rgb: 255, 110, 180;
	--bs-body-font-family: var(--hw-font);
	--bs-body-color: var(--hw-ink);
	--bs-link-color: var(--hw-blue-deep);
	--bs-link-hover-color: var(--hw-pink-deep);
	--bs-border-radius: 1rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hw-nav-h) + 0.75rem);
}

body.hw-page {
	margin: 0;
	font-family: var(--hw-font);
	color: var(--hw-ink);
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 210, 63, 0.35), transparent 28%),
		radial-gradient(circle at 88% 12%, rgba(78, 196, 255, 0.3), transparent 26%),
		radial-gradient(circle at 70% 80%, rgba(255, 110, 180, 0.22), transparent 32%),
		var(--hw-paper);
	overflow-x: hidden;
	min-height: 100vh;
}

body.hw-egg-flash {
	animation: hwFlash 0.55s var(--hw-ease);
}

@keyframes hwFlash {
	0%, 100% { filter: none; }
	40% { filter: hue-rotate(40deg) saturate(1.4); }
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---- Nav（キャンディバー：コーポ／採用と別世界） ---- */
.hw-navbar {
	min-height: var(--hw-nav-h);
	background: transparent !important;
	border-bottom: none !important;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.hw-navbar__candy {
	position: absolute;
	inset: 0.35rem 0.75rem auto;
	height: calc(100% - 0.5rem);
	border-radius: 999px;
	background:
		linear-gradient(90deg,
			#ff6eb4 0%,
			#ffd23f 25%,
			#3dd6a5 50%,
			#4ec4ff 75%,
			#b07cff 100%);
	box-shadow:
		0 6px 0 rgba(42, 35, 64, 0.12),
		0 12px 28px rgba(255, 110, 180, 0.25);
	opacity: 0.95;
	z-index: 0;
}

.hw-navbar .container { z-index: 1; }

.hw-navbar.is-scrolled .hw-navbar__candy {
	box-shadow:
		0 8px 0 rgba(42, 35, 64, 0.14),
		0 16px 32px rgba(42, 35, 64, 0.18);
}

.hw-brand {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--hw-display);
	font-weight: 700;
	color: #fff !important;
	text-decoration: none;
	text-shadow: 0 2px 0 rgba(42, 35, 64, 0.2);
}

.hw-brand__logo {
	width: 2.4rem;
	height: 2.4rem;
	object-fit: contain;
	filter: drop-shadow(0 2px 0 rgba(42, 35, 64, 0.2));
	background: #fff;
	border-radius: 50%;
	padding: 0.15rem;
}

.hw-brand__text {
	font-size: 1.05rem;
	letter-spacing: 0.04em;
}

.hw-navbar .nav-link {
	font-weight: 800;
	color: #fff !important;
	border-radius: 999px;
	padding: 0.35rem 0.75rem !important;
	text-shadow: 0 1px 0 rgba(42, 35, 64, 0.2);
}

.hw-navbar .nav-link:hover,
.hw-navbar .nav-link:focus {
	background: rgba(255, 255, 255, 0.35);
	color: var(--hw-ink) !important;
	text-shadow: none;
}

.hw-navbar .btn-play {
	background: #fff;
	border: none;
	color: var(--hw-pink-deep);
	font-weight: 800;
	border-radius: 999px;
	padding: 0.5rem 1.15rem;
	box-shadow: 0 4px 0 rgba(42, 35, 64, 0.18);
}

.hw-navbar .btn-play:hover {
	background: var(--hw-sun);
	color: var(--hw-ink);
	transform: translateY(1px);
}

.hw-navbar__toggler {
	border: 2px solid #fff !important;
	background: rgba(255, 255, 255, 0.35);
}

/* ---- Particles ---- */
.hw-particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.hw-particle {
	position: absolute;
	font-family: var(--hw-display);
	font-weight: 700;
	color: rgba(46, 184, 154, 0.18);
	animation: hwFloat 8s ease-in-out infinite;
	user-select: none;
}

.hw-particle--burst {
	position: fixed;
	color: rgba(232, 93, 76, 0.45);
	animation: hwBurst 0.85s var(--hw-ease) forwards;
	font-size: 1.1rem !important;
}

@keyframes hwFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.55; }
	50% { transform: translateY(-18px) rotate(8deg); opacity: 0.9; }
}

@keyframes hwBurst {
	0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
	100% { transform: translate(-50%, -120%) scale(1.2); opacity: 0; }
}

/* ---- Hero（遊び場：blob・星・波） ---- */
.hw-hero {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: calc(var(--hw-nav-h) + 2rem) 0 5rem;
	overflow: hidden;
}

.hw-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background:
		linear-gradient(165deg,
			#ffe8f5 0%,
			#fff3c4 35%,
			#d4f7ff 70%,
			#e8ffe8 100%);
}

.hw-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.22;
	background: url("../images/photo_slide04.png") center / cover no-repeat;
	mix-blend-mode: multiply;
}

.hw-hero__blobs { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }

.hw-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	animation: hwBlob 10s ease-in-out infinite;
}

.hw-blob--a {
	width: 18rem; height: 18rem;
	left: -4rem; top: 10%;
	background: rgba(255, 110, 180, 0.45);
}

.hw-blob--b {
	width: 14rem; height: 14rem;
	right: -2rem; top: 20%;
	background: rgba(78, 196, 255, 0.5);
	animation-delay: -2s;
}

.hw-blob--c {
	width: 11rem; height: 11rem;
	left: 35%; bottom: 15%;
	background: rgba(255, 210, 63, 0.55);
	animation-delay: -4s;
}

.hw-blob--d {
	width: 9rem; height: 9rem;
	right: 22%; bottom: 28%;
	background: rgba(61, 214, 165, 0.45);
	animation-delay: -6s;
	border-radius: 40% 60% 55% 45%;
}

@keyframes hwBlob {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(12px, -18px) scale(1.08); }
}

.hw-hero__stars {
	position: absolute;
	top: calc(var(--hw-nav-h) + 1rem);
	right: 8%;
	z-index: -1;
	font-size: 1.4rem;
	letter-spacing: 0.4em;
	color: rgba(255, 107, 90, 0.55);
	animation: hwFloat 5s ease-in-out infinite;
	pointer-events: none;
}

.hw-hero__wave {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100%;
	height: 4.5rem;
	color: var(--hw-paper);
	z-index: 1;
}

.hw-hero__badge {
	display: inline-block;
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: 1rem;
	background: var(--hw-sun);
	color: var(--hw-ink);
	padding: 0.4rem 1rem;
	border-radius: 999px;
	box-shadow: 0 4px 0 var(--hw-sun-deep);
	margin-bottom: 1rem;
	transform: rotate(-3deg);
}

.hw-hero__brand {
	margin: 0 0 0.75rem;
	line-height: 1;
}

.hw-hero__logoimg {
	max-width: min(100%, 22rem);
	width: 100%;
	height: auto;
	filter: drop-shadow(0 8px 0 rgba(255, 110, 180, 0.35));
}

.hw-hero__type {
	font-family: var(--hw-display);
	font-size: clamp(1.25rem, 3.5vw, 1.75rem);
	font-weight: 600;
	color: var(--hw-pink-deep);
	min-height: 1.6em;
	margin-bottom: 0.85rem;
}

.hw-hero__type::after {
	content: "▌";
	animation: hwBlink 1s step-end infinite;
	opacity: 0.7;
	color: var(--hw-sky-deep);
}

.hw-hero__type.is-done::after { display: none; }

@keyframes hwBlink {
	50% { opacity: 0; }
}

.hw-hero__lead {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--hw-ink-soft);
	max-width: 28rem;
	margin-bottom: 1.5rem;
	line-height: 1.7;
}

.hw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	justify-content: center;
}

@media (min-width: 992px) {
	.hw-hero__actions { justify-content: flex-start; }
}

.hw-hero-stage {
	background: rgba(255, 255, 255, 0.72);
	border: 4px solid #fff;
	border-radius: 2rem;
	padding: 1.5rem 1rem;
	box-shadow:
		0 12px 0 rgba(255, 110, 180, 0.25),
		0 20px 40px rgba(42, 35, 64, 0.1);
	transform: rotate(1.5deg);
}

.hw-hero-stage__caption {
	text-align: center;
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--hw-pink-deep);
	margin: 1rem 0 0;
}

.hw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-family: var(--hw-font);
	font-weight: 800;
	border-radius: 999px;
	padding: 0.85rem 1.45rem;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s var(--hw-ease), box-shadow 0.15s var(--hw-ease);
}

.hw-btn:active { transform: translateY(2px); }

.hw-btn--coral {
	background: var(--hw-pink);
	color: #fff;
	box-shadow: 0 5px 0 var(--hw-pink-deep);
}

.hw-btn--coral:hover { color: #fff; background: #ff85c4; }

.hw-btn--mint {
	background: var(--hw-blue);
	color: #fff;
	box-shadow: 0 5px 0 var(--hw-blue-deep);
}

.hw-btn--mint:hover { color: #fff; background: #5cb0ff; }

.hw-btn--ghost {
	background: rgba(255, 255, 255, 0.75);
	color: var(--hw-ink);
	box-shadow: 0 5px 0 rgba(30, 42, 54, 0.12);
	border: 2px solid rgba(30, 42, 54, 0.08);
}

.hw-btn--ghost:hover { color: var(--hw-ink); background: #fff; }

.hw-btn--sm {
	padding: 0.45rem 0.9rem;
	font-size: 0.85rem;
	box-shadow: 0 3px 0 rgba(30, 42, 54, 0.15);
}

.hw-egg-row {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.hw-egg-row button {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.55rem;
	border: 3px solid #fff;
	background: var(--hw-sun);
	font-family: var(--hw-display);
	font-weight: 700;
	color: var(--hw-ink);
	cursor: pointer;
	box-shadow: 0 3px 0 var(--hw-sun-deep);
}

.hw-egg-row button:hover {
	background: var(--hw-pink);
	color: #fff;
}

/* Easter egg falling balls (1 = branch, 2 = loop) */
.hw-egg-ball {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 30000;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	border-radius: 50%;
	border: 4px solid #fff;
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: 1.35rem;
	color: #fff;
	pointer-events: none;
	box-shadow:
		0 6px 0 rgba(30, 42, 54, 0.18),
		0 10px 24px rgba(42, 35, 64, 0.22);
	will-change: transform;
}

.hw-egg-ball--branch {
	background: linear-gradient(145deg, var(--hw-sky), var(--hw-blue-deep));
	animation: hwEggFallBranch 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

.hw-egg-ball--spin {
	background: linear-gradient(145deg, var(--hw-mint), var(--hw-mint-deep));
	animation: hwEggFallLoop 2.8s cubic-bezier(0.4, 0.05, 0.55, 0.95) forwards;
}

/* 1: 真下 → 右斜め下 → 左斜め下（分岐） */
@keyframes hwEggFallBranch {
	0% {
		transform: translate(-50%, -3.5rem);
		opacity: 1;
	}
	28% {
		transform: translate(-50%, 28vh);
	}
	52% {
		transform: translate(calc(-50% + min(38vw, 14rem)), 52vh);
	}
	76% {
		transform: translate(calc(-50% - min(36vw, 13rem)), 76vh);
	}
	100% {
		transform: translate(calc(-50% - min(18vw, 6rem)), 112vh);
		opacity: 0;
	}
}

/* 2: 真下 → 途中で軌道がくるっと2周 → また真下（反復） */
@keyframes hwEggFallLoop {
	0% {
		transform: translate(-50%, -3.5rem);
		opacity: 1;
	}
	20% {
		transform: translate(-50%, 22vh);
	}
	/* 1周目（大きく左右へ） */
	23% {
		transform: translate(calc(-50% + min(18vw, 7rem)), 24vh);
	}
	26% {
		transform: translate(calc(-50% + min(26vw, 10rem)), 30vh);
	}
	29% {
		transform: translate(calc(-50% + min(18vw, 7rem)), 36vh);
	}
	32% {
		transform: translate(-50%, 40vh);
	}
	35% {
		transform: translate(calc(-50% - min(18vw, 7rem)), 36vh);
	}
	38% {
		transform: translate(calc(-50% - min(26vw, 10rem)), 30vh);
	}
	41% {
		transform: translate(calc(-50% - min(18vw, 7rem)), 26vh);
	}
	44% {
		transform: translate(-50%, 28vh);
	}
	/* 2周目 */
	47% {
		transform: translate(calc(-50% + min(18vw, 7rem)), 32vh);
	}
	50% {
		transform: translate(calc(-50% + min(26vw, 10rem)), 38vh);
	}
	53% {
		transform: translate(calc(-50% + min(18vw, 7rem)), 44vh);
	}
	56% {
		transform: translate(-50%, 46vh);
	}
	59% {
		transform: translate(calc(-50% - min(18vw, 7rem)), 44vh);
	}
	62% {
		transform: translate(calc(-50% - min(26vw, 10rem)), 38vh);
	}
	65% {
		transform: translate(calc(-50% - min(18vw, 7rem)), 34vh);
	}
	68% {
		transform: translate(-50%, 40vh);
	}
	100% {
		transform: translate(-50%, 112vh);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hw-egg-ball {
		display: none !important;
	}
}

/* Hero flip cards */
.hw-hero-deck {
	display: flex;
	justify-content: center;
	gap: 0.65rem;
	perspective: 900px;
	margin-top: 1rem;
}

.hw-hero-card {
	width: clamp(3.2rem, 10vw, 4.6rem);
	height: clamp(4.4rem, 14vw, 6.2rem);
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.7s var(--hw-ease);
	transform: rotateY(180deg);
}

.hw-hero-card.is-flipped { transform: rotateY(0deg); }

.hw-hero-card__face {
	position: absolute;
	inset: 0;
	border-radius: 0.7rem;
	backface-visibility: hidden;
	display: grid;
	place-items: center;
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 4vw, 2rem);
	box-shadow: 0 8px 0 rgba(30, 42, 54, 0.12);
	border: 3px solid rgba(255, 255, 255, 0.65);
}

.hw-hero-card__face--front {
	background: linear-gradient(160deg, #fff, #fff0f8);
	color: var(--hw-ink);
}

.hw-hero-card:nth-child(1) .hw-hero-card__face--front { color: var(--hw-coral); background: linear-gradient(160deg, #fff, #ffe0dc); }
.hw-hero-card:nth-child(2) .hw-hero-card__face--front { color: var(--hw-mint-deep); background: linear-gradient(160deg, #fff, #d8fff0); }
.hw-hero-card:nth-child(3) .hw-hero-card__face--front { color: var(--hw-sky-deep); background: linear-gradient(160deg, #fff, #dcf4ff); }
.hw-hero-card:nth-child(4) .hw-hero-card__face--front { color: #c99000; background: linear-gradient(160deg, #fff, #fff3c4); }
.hw-hero-card:nth-child(5) .hw-hero-card__face--front { color: var(--hw-grape); background: linear-gradient(160deg, #fff, #f0e4ff); }
.hw-hero-card:nth-child(6) .hw-hero-card__face--front { color: var(--hw-pink-deep); background: linear-gradient(160deg, #fff, #ffe0f0); }
.hw-hero-card:nth-child(7) .hw-hero-card__face--front { color: var(--hw-blue-deep); background: linear-gradient(160deg, #fff, #dcecff); }

.hw-hero-card__face--back {
	background: linear-gradient(145deg, var(--hw-pink), var(--hw-sky));
	color: #fff;
	transform: rotateY(180deg);
}

/* ---- Sections common ---- */
.hw-section {
	position: relative;
	padding: 4.5rem 0;
	z-index: 1;
}

.hw-section--alt {
	background:
		linear-gradient(180deg, rgba(255, 110, 180, 0.1), rgba(78, 196, 255, 0.12)),
		rgba(255, 255, 255, 0.45);
}

.hw-section__eyebrow {
	display: inline-block;
	font-family: var(--hw-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--hw-pink-deep);
	background: rgba(255, 210, 63, 0.45);
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	margin-bottom: 0.65rem;
	transform: rotate(-2deg);
}

.hw-section__title {
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	margin: 0 0 0.65rem;
	line-height: 1.15;
}

.hw-section__lead {
	color: var(--hw-ink-soft);
	max-width: 36rem;
	margin-bottom: 2rem;
}

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s var(--hw-ease), transform 0.65s var(--hw-ease);
}

[data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ---- Game ---- */
.hw-game {
	background: var(--hw-surface);
	border-radius: 1.25rem;
	border: 3px solid rgba(30, 42, 54, 0.08);
	box-shadow: 0 16px 0 rgba(30, 42, 54, 0.06);
	padding: 1.25rem 1rem 1.5rem;
	position: relative;
	overflow: hidden;
}

.hw-game__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

.hw-game__status {
	font-family: var(--hw-mono);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(46, 184, 154, 0.15);
	color: var(--hw-mint-deep);
	margin-right: auto;
}

.hw-game__status.is-win {
	background: rgba(240, 180, 41, 0.35);
	color: #8a5a00;
}

.hw-game__status.is-lose {
	background: rgba(232, 93, 76, 0.18);
	color: var(--hw-coral-deep);
}

.hw-game__hint {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.85rem;
	min-height: 1.4em;
	color: var(--hw-ink);
}

.hw-game__tip {
	font-size: 0.85rem;
	background: rgba(240, 180, 41, 0.25);
	border-radius: 0.65rem;
	padding: 0.55rem 0.75rem;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.hw-game__tip.is-emphasis {
	font-size: 0.95rem;
	background: rgba(59, 158, 255, 0.22);
	border: 2px solid var(--hw-blue);
	box-shadow: 0 4px 0 rgba(30, 127, 224, 0.28);
	color: var(--hw-blue-deep);
	animation: hwTipPop 0.45s var(--hw-ease);
}

.hw-board {
	margin-bottom: 1rem;
}

.hw-board__label {
	font-family: var(--hw-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--hw-ink-soft);
	margin: 0 0 0.35rem;
}

.hw-nrow {
	display: flex;
	gap: 0.35rem;
	flex-wrap: nowrap;
	justify-content: center;
}

.hw-nrow.is-blue-guide {
	position: relative;
	padding-top: 1.15rem;
	padding-bottom: 1.25rem;
}

.hw-ncard {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 3 / 4;
	max-width: 4.2rem;
	border: 3px solid rgba(255, 255, 255, 0.7);
	border-radius: 0.65rem;
	background: linear-gradient(160deg, #fff, #eef5f8);
	box-shadow: 0 5px 0 rgba(30, 42, 54, 0.1);
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 3.5vw, 1.55rem);
	color: var(--hw-ink);
	cursor: default;
	padding: 0;
	transition: transform 0.15s var(--hw-ease), background 0.2s, box-shadow 0.2s;
	position: relative;
}

.hw-nrow--interactive .hw-ncard {
	cursor: pointer;
}

.hw-nrow--interactive .hw-ncard:hover {
	transform: translateY(-3px);
}

.hw-ncard.is-correct {
	background: linear-gradient(160deg, #d8f8ef, #b8efe0);
	color: var(--hw-mint-deep);
}

.hw-ncard.is-target {
	outline: 3px solid var(--hw-coral);
	outline-offset: 2px;
	animation: hwPulse 1s ease-in-out infinite;
}

.hw-ncard.is-pair-left {
	outline: 2px solid rgba(59, 158, 255, 0.65);
	outline-offset: 1px;
	box-shadow:
		0 5px 0 rgba(30, 42, 54, 0.1),
		0 0 0 3px rgba(59, 158, 255, 0.18);
}

.hw-ncard.is-pair:hover,
.hw-nrow--interactive .hw-ncard.is-pair:focus {
	background: linear-gradient(160deg, #fff3c4, #ffe08a);
}

.hw-ncard.is-guide {
	z-index: 3;
	outline: 3px solid var(--hw-blue);
	outline-offset: 2px;
	background: linear-gradient(160deg, #e8f4ff, #b8dcff);
	box-shadow:
		0 0 0 4px rgba(59, 158, 255, 0.35),
		0 8px 0 rgba(30, 127, 224, 0.35);
	animation: hwGuidePulse 1s ease-in-out infinite;
}

.hw-ncard.is-guide::before {
	content: '▼';
	position: absolute;
	top: -1.15rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--hw-blue-deep);
	font-size: 0.9rem;
	line-height: 1;
	animation: hwGuideBounce 0.75s ease-in-out infinite;
	pointer-events: none;
}

.hw-ncard.is-guide::after {
	content: attr(data-cue);
	position: absolute;
	bottom: -1.15rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--hw-font);
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--hw-blue-deep);
	border-radius: 999px;
	padding: 0.12rem 0.4rem;
	pointer-events: none;
	box-shadow: 0 2px 0 rgba(30, 127, 224, 0.45);
}

.hw-ncard.is-guide-partner {
	z-index: 2;
	outline: 2px dashed var(--hw-blue);
	outline-offset: 2px;
	background: linear-gradient(160deg, #f5faff, #dff0ff);
	opacity: 0.92;
}

.hw-ncard.is-guide-partner::after {
	content: attr(data-cue);
	position: absolute;
	bottom: -1.15rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--hw-font);
	font-size: 0.55rem;
	font-weight: 700;
	color: var(--hw-blue-deep);
	pointer-events: none;
}

.hw-ncard.is-pop {
	animation: hwPop 0.35s var(--hw-ease);
}

.hw-board.is-sorted-fx {
	position: relative;
	z-index: 2;
}

.hw-ncard.is-reveal {
	background: linear-gradient(160deg, #fff7b0, #ffd23f);
	color: var(--hw-ink);
	border-color: #fff;
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.95),
		0 8px 18px rgba(255, 210, 63, 0.45);
	animation: hwReveal 0.55s var(--hw-ease) forwards;
}

.hw-nrow.is-complete .hw-ncard {
	animation: hwCompleteBounce 0.75s var(--hw-ease);
}

.hw-win-spark {
	position: absolute;
	font-size: 1.1rem;
	color: var(--hw-pink);
	pointer-events: none;
	z-index: 3;
	animation: hwWinSpark 0.95s ease-out forwards;
	text-shadow: 0 2px 0 rgba(42, 35, 64, 0.12);
}

.hw-game.is-celebrating .hw-hand {
	opacity: 0.45;
}

@keyframes hwReveal {
	0% { transform: scale(0.86) rotate(-4deg); }
	45% { transform: scale(1.18) rotate(3deg); }
	100% { transform: scale(1) rotate(0deg); }
}

@keyframes hwCompleteBounce {
	0% { transform: translateY(0); }
	30% { transform: translateY(-10px) scale(1.06); }
	55% { transform: translateY(2px); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes hwWinSpark {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.4) rotate(-20deg);
	}
	35% {
		opacity: 1;
		transform: translateY(-6px) scale(1.15) rotate(8deg);
	}
	100% {
		opacity: 0;
		transform: translateY(-28px) scale(0.7) rotate(18deg);
	}
}

@keyframes hwPulse {
	50% { transform: scale(1.05); }
}

@keyframes hwGuidePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

@keyframes hwGuideBounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(3px); }
}

@keyframes hwTipPop {
	0% { transform: scale(0.96); opacity: 0.6; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes hwPop {
	0% { transform: scale(1); }
	40% { transform: scale(1.12) rotate(-3deg); }
	100% { transform: scale(1); }
}

.hw-hand {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: center;
	min-height: 7.2rem;
	margin: 1rem 0 0.75rem;
	padding: 0.85rem;
	background: rgba(255, 110, 180, 0.1);
	border-radius: 1.25rem;
	border: 3px dashed rgba(255, 110, 180, 0.45);
}

.hw-hand.is-disabled { opacity: 0.55; pointer-events: none; }

.hw-pcard {
	position: relative;
	width: 6.2rem;
	min-height: 5.8rem;
	padding: 0.5rem 0.35rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	cursor: pointer;
	border: 3px solid rgba(255, 255, 255, 0.75);
	border-radius: 0.85rem;
	box-shadow: 0 6px 0 rgba(42, 35, 64, 0.14);
	transition: transform 0.15s var(--hw-ease);
	text-align: center;
	user-select: none;
	z-index: 0;
}

.hw-pcard:hover { transform: translateY(-6px) scale(1.04); }

/* 反復 = ブルーカード */
.hw-pcard--loop {
	background: linear-gradient(155deg, #6ec8ff, var(--hw-blue-deep));
	color: #fff;
}

/* 分岐 = ピンクカード */
.hw-pcard--branch {
	background: linear-gradient(145deg, #ff9ad4, var(--hw-pink-deep));
	color: #fff;
}

.hw-pcard--public {
	background: linear-gradient(145deg, #ffb0e0, #ff5aa8);
	box-shadow: 0 6px 0 rgba(176, 124, 255, 0.4);
}

.hw-pcard__tag,
.hw-pcard__sub {
	display: block;
	width: 100%;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.hw-pcard__tag {
	opacity: 0.95;
	letter-spacing: 0.02em;
}

.hw-pcard__main {
	font-family: var(--hw-display);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
}

.hw-pcard__sub {
	opacity: 0.9;
}

.hw-legend {
	display: block;
	margin-top: 0.65rem;
	font-size: 0.95rem;
}

.hw-legend__oct,
.hw-legend__dia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #fff;
	font-size: 0.82rem;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	margin: 0 0.2rem;
}

/* 説明用：反復＝あお八角 */
.hw-legend__oct {
	background: var(--hw-blue);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	padding: 0.45rem 0.75rem;
	min-width: 4.2rem;
	font-size: 0.78rem;
}

.hw-legend__dia {
	background: var(--hw-pink);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	padding: 0.75rem 1.2rem;
	min-width: 4.4rem;
	font-size: 0.78rem;
}

.hw-game__log {
	font-family: var(--hw-mono);
	font-size: 0.72rem;
	background: #1e2a36;
	color: #9fefc5;
	border-radius: 0.75rem;
	padding: 0.65rem 0.75rem;
	height: 7.5rem;
	overflow-y: auto;
	line-height: 1.45;
}

.hw-game__overlay {
	position: absolute;
	inset: 0;
	background: rgba(30, 42, 54, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	z-index: 5;
	backdrop-filter: blur(4px);
}

.hw-game__overlay[hidden] { display: none !important; }

.hw-game__modal {
	background: #fff;
	border-radius: 1.1rem;
	padding: 1.5rem 1.25rem;
	max-width: 22rem;
	width: 100%;
	text-align: center;
	box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2);
	animation: hwPop 0.45s var(--hw-ease);
}

.hw-game__overlay.is-win .hw-game__modal {
	background: linear-gradient(180deg, #fff9e6, #fff);
}

.hw-game__modal h3 {
	font-family: var(--hw-display);
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
}

.hw-game__modal p {
	color: var(--hw-ink-soft);
	margin-bottom: 1rem;
}

.hw-game__modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

/* ---- Concepts ---- */
.hw-concept {
	background: var(--hw-surface);
	border-radius: 1.4rem;
	padding: 1.25rem;
	border: 4px solid rgba(42, 35, 64, 0.06);
	box-shadow: 0 10px 0 rgba(42, 35, 64, 0.06);
	cursor: pointer;
	height: 100%;
	transition: transform 0.2s var(--hw-ease);
	outline: none;
}

.hw-concept:hover,
.hw-concept:focus-visible {
	transform: translateY(-4px);
}

.hw-concept--seq.is-active { border-color: var(--hw-sun); }
.hw-concept--branch.is-active { border-color: var(--hw-pink); }
.hw-concept--loop.is-active { border-color: var(--hw-blue); }

.hw-concept__icon {
	display: inline-block;
	font-family: var(--hw-display);
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.5rem;
	color: #fff;
}

.hw-concept--seq .hw-concept__icon {
	background: var(--hw-sun);
	color: var(--hw-ink);
}

.hw-concept__icon--dia {
	background: var(--hw-pink) !important;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	padding: 0.55rem 1.1rem !important;
	border-radius: 0 !important;
}

.hw-concept__icon--oct {
	background: var(--hw-blue) !important;
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	border-radius: 0.25rem !important;
	padding: 0.4rem 0.85rem !important;
}

.hw-concept h3 {
	font-family: var(--hw-display);
	font-size: 1.45rem;
	margin: 0 0 0.35rem;
}

.hw-concept p {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--hw-ink-soft);
	margin-bottom: 0.5rem;
}

.hw-concept__narration {
	min-height: 3.2em;
	margin: 0.5rem 0 0.75rem !important;
	padding: 0.65rem 0.75rem;
	background: rgba(255, 210, 63, 0.28);
	border-radius: 0.75rem;
	font-size: 0.88rem !important;
	font-weight: 800 !important;
	color: var(--hw-ink) !important;
	line-height: 1.45;
}

.hw-concept__step {
	display: inline-block;
	background: var(--hw-pink);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	margin-right: 0.25rem;
	vertical-align: middle;
	white-space: nowrap;
}

.hw-concept__board {
	display: flex;
	gap: 0.25rem;
	justify-content: center;
	align-items: center;
	min-height: 3.4rem;
	padding: 0.5rem;
	background: rgba(78, 196, 255, 0.1);
	border-radius: 0.85rem;
	flex-wrap: wrap;
}

.hw-mini-arrow {
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--hw-pink-deep);
	line-height: 1;
	padding: 0 0.05rem;
}

.hw-mini-card {
	width: 2.5rem;
	height: 3.2rem;
	border-radius: 0.5rem;
	background: linear-gradient(160deg, #fff, #fff0f8);
	border: 3px solid #fff;
	box-shadow: 0 4px 0 rgba(42, 35, 64, 0.12);
	display: grid;
	place-items: center;
	font-family: var(--hw-display);
	font-weight: 700;
	font-size: 1.15rem;
	transition: transform 0.35s var(--hw-ease), background 0.35s;
}

.hw-mini-card.is-empty {
	background: rgba(255, 255, 255, 0.5);
	color: #c0b8d0;
	border-style: dashed;
	box-shadow: none;
}

.hw-mini-card.is-ok {
	background: linear-gradient(160deg, #c8f5e8, #9ee9d4);
	color: var(--hw-mint-deep);
}

.hw-mini-card.is-hl {
	outline: 3px solid var(--hw-pink);
	outline-offset: 2px;
	transform: scale(1.08);
	z-index: 1;
}

.hw-mini-card.is-pop {
	animation: hwPop 0.55s var(--hw-ease);
}

.hw-concept__cta {
	display: block;
	margin-top: 0.85rem;
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--hw-pink-deep);
	text-align: center;
}

/* ---- How to ---- */
.hw-steps {
	counter-reset: hwstep;
	list-style: none;
	padding: 0;
	margin: 0;
}

.hw-steps li {
	counter-increment: hwstep;
	position: relative;
	padding: 1rem 1rem 1rem 3.5rem;
	background: var(--hw-surface);
	border-radius: 1rem;
	margin-bottom: 0.75rem;
	border: 2px solid rgba(30, 42, 54, 0.06);
	font-weight: 600;
}

.hw-steps li::before {
	content: counter(hwstep);
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--hw-sun);
	color: var(--hw-ink);
	font-family: var(--hw-display);
	font-weight: 700;
	display: grid;
	place-items: center;
}

.hw-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 1rem;
	overflow: hidden;
	background: #111;
	box-shadow: 0 12px 0 rgba(30, 42, 54, 0.08);
	border: 3px solid rgba(255, 255, 255, 0.6);
}

.hw-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Buy ---- */
.hw-shop {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--hw-surface);
	border-radius: 1.1rem;
	overflow: hidden;
	border: 3px solid rgba(30, 42, 54, 0.07);
	box-shadow: 0 12px 0 rgba(30, 42, 54, 0.06);
	height: 100%;
	transition: transform 0.25s var(--hw-ease);
	transform-style: preserve-3d;
}

.hw-shop:hover {
	transform: translateY(-6px) rotateX(4deg);
	color: inherit;
}

.hw-shop__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #dfeaf0;
}

.hw-shop__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--hw-ease);
}

.hw-shop:hover .hw-shop__media img {
	transform: scale(1.06) rotate(-1deg);
}

.hw-shop__body {
	padding: 1rem 1.1rem 1.2rem;
}

.hw-shop__badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	margin-bottom: 0.4rem;
}

.hw-shop--base .hw-shop__badge { background: #a6e7e1; }
.hw-shop--stores .hw-shop__badge { background: #6acaa7; color: #fff; }
.hw-shop--manda .hw-shop__badge { background: #002e4e; color: #fff; }
.hw-shop--app .hw-shop__badge { background: var(--hw-grape); color: #fff; }

.hw-shop__body h3 {
	font-family: var(--hw-display);
	font-size: 1.2rem;
	margin: 0 0 0.25rem;
}

.hw-shop__body p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--hw-ink-soft);
}

/* ---- FAQ ---- */
.hw-faq__item {
	background: var(--hw-surface);
	border-radius: 0.9rem;
	margin-bottom: 0.55rem;
	border: 2px solid rgba(30, 42, 54, 0.06);
	overflow: hidden;
}

.hw-faq__q {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	padding: 1rem 1.1rem;
	font-family: var(--hw-font);
	font-weight: 800;
	font-size: 0.98rem;
	color: var(--hw-ink);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}

.hw-faq__q::after {
	content: "+";
	font-family: var(--hw-display);
	font-size: 1.4rem;
	color: var(--hw-mint);
	flex-shrink: 0;
}

.hw-faq__item.is-open .hw-faq__q::after { content: "−"; }

.hw-faq__a {
	display: none;
	padding: 0 1.1rem 1rem;
	color: var(--hw-ink-soft);
	font-size: 0.95rem;
	line-height: 1.65;
}

.hw-faq__item.is-open .hw-faq__a { display: block; }

/* ---- Contact / Footer ---- */
.hw-contact {
	background: var(--hw-surface);
	border-radius: 1rem;
	padding: 1.25rem;
	border: 2px solid rgba(30, 42, 54, 0.06);
}

.hw-contact dt {
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--hw-mint-deep);
	margin-top: 0.65rem;
}

.hw-contact dt:first-child { margin-top: 0; }

.hw-contact dd {
	margin: 0.15rem 0 0;
	font-weight: 600;
}

.hw-footer {
	background: var(--hw-ink);
	color: rgba(255, 255, 255, 0.78);
	padding: 2.5rem 0 2rem;
	position: relative;
	z-index: 1;
}

.hw-footer a {
	color: #9fefc5;
	text-decoration: none;
	font-weight: 700;
}

.hw-footer a:hover { color: #fff; }

.hw-footer__brand {
	font-family: var(--hw-display);
	font-size: 1.4rem;
	color: #fff;
	margin-bottom: 0.5rem;
}

.hw-footer__meta {
	font-size: 0.85rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.hw-footer__copy {
	font-size: 0.75rem;
	opacity: 0.55;
	margin: 0;
}

.hw-lang {
	font-size: 0.8rem;
	opacity: 0.7;
}

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
	.hw-game { padding: 1rem 0.65rem 1.25rem; }
	.hw-nrow { gap: 0.22rem; }
	.hw-ncard { border-width: 2px; border-radius: 0.45rem; box-shadow: 0 3px 0 rgba(30, 42, 54, 0.1); }
	.hw-pcard { width: 5.6rem; min-height: 5.4rem; }
	.hw-pcard__tag,
	.hw-pcard__sub { font-size: 0.68rem; }
	.hw-hero__actions { flex-direction: column; align-items: stretch; }
	.hw-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.hw-particle,
	.hw-hero-card,
	.hw-ncard.is-target,
	.hw-ncard.is-guide,
	.hw-ncard.is-guide::before,
	.hw-game__tip.is-emphasis,
	.hw-mini-card.is-pop,
	.hw-ncard.is-pop,
	.hw-blob,
	.hw-hero__stars { animation: none !important; }
	.hw-hero__type::after { display: none; }
}