/* ローディング：ロゴとアヒルの追いかけっこ */
.ae-loader {
	position: fixed;
	z-index: 100000;
	inset: 0;
	overflow: hidden;
	background: #fff;
	opacity: 1;
}

.ae-loader[hidden] {
	display: none;
}

.ae-loader__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	isolation: isolate;
}

/* 中央を空けて、上下に淡い青の波を流す */
.ae-loader__stage::before,
.ae-loader__stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	width: 200%;
	height: 32%;
	pointer-events: none;
	opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='w' d='M0 100 C200 0 400 0 600 100 S1000 200 1200 100'/%3E%3C/defs%3E%3Cg fill='none' stroke='%239bd7ef' stroke-width='1.5'%3E%3Cuse href='%23w'/%3E%3Cuse href='%23w' y='9'/%3E%3Cuse href='%23w' y='18'/%3E%3Cuse href='%23w' y='27'/%3E%3Cuse href='%23w' y='36'/%3E%3Cuse href='%23w' y='45'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 50% 100%;
	animation: ae-loader-wave-flow 18s linear infinite;
}

.ae-loader__stage::before {
	top: 0;
}

.ae-loader__stage::after {
	bottom: 0;
	scale: 1 -1;
	opacity: 0.4;
	animation-duration: 24s;
	animation-direction: reverse;
}

@keyframes ae-loader-wave-flow {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-loader__stage::before,
	.ae-loader__stage::after {
		animation: none;
	}
}

/* 背景の光、青い弧、黄色い丸と漂う円 */
.ae-loader__decor {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(
			circle 9px at 28% 18%,
			#ffd34d 97%,
			transparent 100%
		),
		radial-gradient(
			circle 6px at 82% 38%,
			#ffcf3f 97%,
			transparent 100%
		),
		radial-gradient(
			circle 11px at 17% 73%,
			rgba(255, 207, 63, 0.8) 97%,
			transparent 100%
		),
		radial-gradient(
			ellipse at 12% 30%,
			rgba(104, 205, 244, 0.16),
			transparent 32%
		),
		radial-gradient(
			ellipse at 88% 74%,
			rgba(125, 219, 246, 0.17),
			transparent 34%
		);
}

/* 画面の左右から、大きな青い弧をのぞかせる */
.ae-loader__decor::before,
.ae-loader__decor::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	width: clamp(280px, 34vw, 580px);
	aspect-ratio: 1;
	border: clamp(8px, 0.8vw, 14px) solid rgba(0, 139, 218, 0.2);
	border-radius: 50%;
	animation: ae-loader-arc-drift 14s ease-in-out infinite alternate;
}

.ae-loader__decor::before {
	left: clamp(-350px, -21vw, -180px);
	top: 2%;
	animation-delay: -4s;
}

.ae-loader__decor::after {
	right: clamp(-350px, -21vw, -180px);
	bottom: -8%;
	border-color: rgba(0, 139, 218, 0.15);
	animation-duration: 18s;
	animation-delay: -9s;
	animation-direction: alternate-reverse;
}

/* 既存の二重円は、少し濃くする */
.ae-loader__decor span {
	position: absolute;
	box-sizing: border-box;
	width: clamp(90px, 12vw, 180px);
	aspect-ratio: 1;
	border: 2px solid rgba(45, 166, 221, 0.38);
	border-radius: 50%;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.65),
		rgba(154, 222, 247, 0.16)
	);
	animation: ae-loader-decor-drift 12s ease-in-out infinite alternate;
}

.ae-loader__decor span::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(73, 181, 227, 0.3);
	border-radius: inherit;
}

.ae-loader__decor span:nth-child(1) {
	left: 9%;
	top: 24%;
	animation-delay: -3s;
}

.ae-loader__decor span:nth-child(2) {
	right: 8%;
	bottom: 18%;
	width: clamp(120px, 17vw, 250px);
	animation-duration: 16s;
	animation-delay: -8s;
	animation-direction: alternate-reverse;
}

.ae-loader__decor span:nth-child(3) {
	right: 21%;
	top: 20%;
	width: 22px;
	border-width: 1px;
	background: rgba(91, 194, 236, 0.32);
	animation-duration: 9s;
	animation-delay: -4s;
}

.ae-loader__decor span:nth-child(4) {
	left: 23%;
	bottom: 19%;
	width: 12px;
	border-width: 1px;
	background: rgba(63, 177, 227, 0.38);
	animation-duration: 10s;
	animation-delay: -6s;
}

@keyframes ae-loader-decor-drift {
	from {
		transform: translate3d(-18px, 22px, 0);
	}
	to {
		transform: translate3d(24px, -32px, 0);
	}
}

@keyframes ae-loader-arc-drift {
	from {
		transform: translate3d(0, 14px, 0);
	}
	to {
		transform: translate3d(14px, -20px, 0);
	}
}

/* 小さな画面では、円を端へ寄せる */
@media (max-width: 600px) {
	.ae-loader__decor span:nth-child(1) {
		left: 3%;
		top: 22%;
		width: 72px;
	}

	.ae-loader__decor span:nth-child(2) {
		right: 3%;
		bottom: 20%;
		width: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-loader__decor::before,
	.ae-loader__decor::after,
	.ae-loader__decor span {
		animation: none;
	}
}
/* 中央のアヒルと円形文字 */
.ae-loader__emblem {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(450px, 72vw, 54svh);
	aspect-ratio: 1;
	translate: -50% -50%;
}

.ae-loader__orbit {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: #008bda;
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 2.4px;
	transform-box: view-box;
	transform-origin: 50% 50%;
	will-change: transform;
	backface-visibility: hidden;
	animation: ae-loader-orbit-turn 6s linear infinite;
}

.ae-loader__spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 56%;
	aspect-ratio: 998 / 884;
	translate: -50% -50%;
	transform-origin: 50% 50%;
	will-change: transform;
	backface-visibility: hidden;
	animation: ae-loader-duck-turn 2s linear infinite;
}

.ae-loader__spinner img {
	position: absolute;
	left: -14.53%;
	top: -23.76%;
	display: block;
	width: 125.65%;
	max-width: none;
	height: auto;
	user-select: none;
	pointer-events: none;
}

@keyframes ae-loader-orbit-turn {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes ae-loader-duck-turn {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-loader__orbit,
	.ae-loader__spinner {
		animation: none;
	}
}
.ae-loader__skip {
	position: absolute;
	z-index: 1;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	min-height: 44px;
	max-width: calc(100% - 32px);
	padding: 10px 16px;
	border: 1px solid #dce6ee;
	border-radius: 999px;
	color: #566574;
	background: rgb(255 255 255 / 92%);
	font: inherit;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-align: center;
	touch-action: manipulation;
	cursor: pointer;
	transition: color 180ms ease;
}

.ae-loader__skip:hover,
.ae-loader__skip:focus-visible {
	color: #41576a;
}

.ae-loader__skip:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}
/* クレーンゲーム：奥行きのあるネイヴィー背景 */
.ae-hero {
	--hero-blue: #10377e;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding: 20px 24px;
	overflow: hidden;
	color: var(--hero-blue);
	background-color: #101f35;
	background-image:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.3) 0.7px,
			transparent 1px
		),
		radial-gradient(
			ellipse at 45% 35%,
			rgba(71, 142, 192, 0.48),
			transparent 58%
		),
		linear-gradient(
			to bottom,
			#101f35 0%,
			#192f49 18%,
			#354f68 40%,
			#607f96 65%,
			#9aafbd 86%,
			#e7edf1 100%
		);
	background-size: 5px 5px, 130% 120%, 100% 100%;
	background-position: 0 0, 20% 30%, center;
	background-repeat: repeat, no-repeat, no-repeat;
	animation: ae-hero-deep-light 28s linear infinite;
}

/* 中間：明るい水色の曲線 */
.ae-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	box-sizing: border-box;
	left: -18%;
	top: -30%;
	width: 85%;
	aspect-ratio: 1.7;
	border: 2px solid rgba(153, 224, 255, 0.6);
	border-radius: 50%;
	box-shadow:
		0 0 0 28px rgba(150, 215, 249, 0.04),
		0 0 0 30px rgba(153, 224, 255, 0.28);
	pointer-events: none;
	animation: ae-hero-middle-curve 12s ease-in-out infinite alternate;
	animation-delay: -7s;
}

/* 手前：右側を漂う、輪郭の柔らかい青い色面 */
.ae-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -16%;
	top: 30%;
	width: 48%;
	aspect-ratio: 0.9;
	border-radius: 45% 55% 62% 38%;
	background: radial-gradient(
		ellipse at 55% 45%,
		rgba(82, 177, 227, 0.3),
		rgba(59, 139, 198, 0.12) 45%,
		transparent 72%
	);
	filter: blur(28px);
	pointer-events: none;
	animation: ae-hero-near-glow 11s ease-in-out infinite alternate;
	animation-delay: -4s;
}

/* 暗い背景でも所在地を読める色にする */
.ae-hero .ae-hero__location {
	color: #d9e9f5;
}

/* 奥の光は、最もゆっくり移動 */
/* ドットは右下へ流し、奥の光はゆっくり往復 */
@keyframes ae-hero-deep-light {
	0% {
		background-position: 0 0, 20% 30%, center;
	}
	50% {
		background-position: 140px 140px, 80% 65%, center;
	}
	100% {
		background-position: 280px 280px, 20% 30%, center;
	}
}

/* 中間の曲線は、小さく移動しながら傾く */
@keyframes ae-hero-middle-curve {
	from {
		transform: translate3d(-40px, -16px, 0) rotate(-32deg);
	}
	to {
		transform: translate3d(64px, 90px, 0) rotate(-10deg);
	}
}

/* 手前の色面は、移動幅を広くする */
@keyframes ae-hero-near-glow {
	from {
		transform: translate3d(24px, 42px, 0) scale(0.94);
	}
	to {
		transform: translate3d(-48px, -44px, 0) scale(1.08);
	}
}

@media (max-width: 650px) {
	.ae-hero::before {
		left: -55%;
		top: -5%;
		width: 125%;
	}

	.ae-hero::after {
		right: -55%;
		top: 28%;
		width: 100%;
		filter: blur(20px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-hero,
	.ae-hero::before,
	.ae-hero::after {
		animation: none;
	}
}
.ae-hero__header {
	position: absolute;
	z-index: 10;
	top: 20px;
	left: 30px;
	right: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ae-hero__brand {
	display: block;
	flex: 0 0 auto;
}

.ae-hero__brand-logo {
	display: block;
	width: 132px;
	height: auto;
	filter: none;
}

.ae-hero__location {
	display: flex;
	align-items: center;
	gap: 28px;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	white-space: nowrap;
}

.ae-hero__menu {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 7px;
	width: 44px;
	height: 44px;
	padding: 6px;
	border: 0;
	color: inherit;
	background: transparent;
	cursor: pointer;
}

.ae-hero__menu span {
	display: block;
	width: 30px;
	height: 1px;
	background: currentColor;
}

.ae-hero__menu span:nth-child(2) {
	width: 20px;
}

.ae-hero__brand:focus-visible,
.ae-hero__menu:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

.ae-crane-scene {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(
		900px,
		100%,
		calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 110px)
	);
	margin: 0 auto;
}

.ae-crane {
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 1;
	container-type: inline-size;
}

/* 足元に静かな床面と、横へ広がる影を作る */
.ae-crane::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: calc(50% - 50vw);
	top: 92%;
	width: 100vw;
	height: max(240px, 40cqw);
	background:
		radial-gradient(
			ellipse 54cqw 3cqw at 50% 8cqw,
			rgba(19, 32, 47, 0.4) 0%,
			rgba(19, 32, 47, 0.22) 35%,
			rgba(19, 32, 47, 0.08) 65%,
			transparent 100%
		),
		linear-gradient(
			to bottom,
			rgba(185, 202, 213, 0) 0,
			rgba(185, 202, 213, 0.9) 5cqw,
			#d6e0e7 11cqw,
			#e7edf1 24cqw
		);
	pointer-events: none;
}

/* 左右の脚の直下に密着する影 */
.ae-crane::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	bottom: -1.2%;
	height: 2.4%;
	background:
		radial-gradient(
			ellipse 4.5% 32% at 7% 50%,
			rgba(10, 19, 29, 0.75) 0%,
			rgba(10, 19, 29, 0.4) 45%,
			transparent 100%
		),
		radial-gradient(
			ellipse 4.5% 32% at 93% 50%,
			rgba(10, 19, 29, 0.75) 0%,
			rgba(10, 19, 29, 0.4) 45%,
			transparent 100%
		),
		radial-gradient(
			ellipse 48% 45% at 50% 25%,
			rgba(19, 32, 47, 0.32),
			transparent 100%
		);
	filter: blur(1px);
	pointer-events: none;
}
.ae-crane__image {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	user-select: none;
	pointer-events: none;
}

/* 本体と外枠だけ、基準画像に近い横幅へ合わせる */
.ae-crane__body,
.ae-crane__front {
	left: -10%;
	top: -7.6%;
	width: 120%;
	height: 119%;
}

.ae-crane__body {
	z-index: 0;
}

.ae-crane__inside {
	position: absolute;
	z-index: 1;
	inset: 0;
	clip-path: inset(16% 3% 31.5% 3%);
}

.ae-crane__pile {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
}

.ae-crane__pile-duck {
	--duck-x: 0%;
	--duck-y: 45%;
	--duck-angle: 0deg;
	--duck-facing: 1;
	position: absolute;
	left: var(--duck-x);
	top: var(--duck-y);
	display: block;
	width: 16%;
	aspect-ratio: 0.94;
	transform: rotate(var(--duck-angle));
	transform-origin: 50% 50%;
}

.ae-crane__pile-duck img {
	position: absolute;
	left: -27.8%;
	top: -22.5%;
	display: block;
	width: 150%;
	max-width: none;
	height: auto;
	transform: scaleX(var(--duck-facing));
	user-select: none;
	pointer-events: none;
}

/* 横に8羽ずつ配置 */
.ae-crane__pile-duck:nth-child(8n + 1) { --duck-x: -4%; }
.ae-crane__pile-duck:nth-child(8n + 2) { --duck-x: 8%; }
.ae-crane__pile-duck:nth-child(8n + 3) { --duck-x: 20%; }
.ae-crane__pile-duck:nth-child(8n + 4) { --duck-x: 32%; }
.ae-crane__pile-duck:nth-child(8n + 5) { --duck-x: 44%; }
.ae-crane__pile-duck:nth-child(8n + 6) { --duck-x: 56%; }
.ae-crane__pile-duck:nth-child(8n + 7) { --duck-x: 68%; }
.ae-crane__pile-duck:nth-child(8n)     { --duck-x: 80%; }

/* 奥・中央・手前の3段 */
.ae-crane__pile-duck:nth-child(-n + 8) {
	z-index: 1;
}

.ae-crane__pile-duck:nth-child(n + 9):nth-child(-n + 16) {
	--duck-y: 52%;
	z-index: 2;
	margin-left: 5%;
}

.ae-crane__pile-duck:nth-child(n + 17) {
	--duck-y: 59%;
	z-index: 3;
}

/* 左右の向きを混ぜる */
.ae-crane__pile-duck:nth-child(3n) {
	--duck-facing: -1;
}

/* 立った姿勢にもばらつきをつける */
.ae-crane__pile-duck:nth-child(4n + 1) {
	--duck-angle: -24deg;
}

.ae-crane__pile-duck:nth-child(4n + 2) {
	--duck-angle: 18deg;
}

/* 横倒し */
.ae-crane__pile-duck:nth-child(4),
.ae-crane__pile-duck:nth-child(11),
.ae-crane__pile-duck:nth-child(19) {
	--duck-angle: 78deg;
}

.ae-crane__pile-duck:nth-child(7),
.ae-crane__pile-duck:nth-child(14),
.ae-crane__pile-duck:nth-child(22) {
	--duck-angle: -72deg;
}

/* 逆さに埋まった姿勢 */
.ae-crane__pile-duck:nth-child(10),
.ae-crane__pile-duck:nth-child(21) {
	--duck-angle: 158deg;
}

/* 積まれる高さにも差をつける */
.ae-crane__pile-duck:nth-child(5n) {
	margin-top: -2%;
}

.ae-crane__pile-duck:nth-child(7n) {
	margin-top: 2%;
}

.ae-crane__duck {
	z-index: 1;
	left: 40%;
	top: 45%;
	width: 21.3%;
	visibility: hidden;
}

.ae-crane__rig {
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
}

.ae-crane__cable {
	position: absolute;
	z-index: 0;
	left: 49.8%;
	top: 16%;
	width: .4%;
	height: 0;
	background: linear-gradient(
		90deg,
		#464b50,
		#e8edf0 45%,
		#6a7076
	);
}

.ae-crane__gripper {
	position: absolute;
	z-index: 1;
	inset: 0;
}

.ae-crane__hook {
	position: absolute;
	z-index: 1;
	top: 30.55%;
	width: 6.54%;
	height: 17%;
}

.ae-crane__hook--left {
	left: 41.1%;
	transform-origin: 83% 4.4%;
}

.ae-crane__hook--right {
	left: 52.3%;
	transform-origin: 17% 4.4%;
}

.ae-crane__hook-art {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.ae-crane__hook-art img {
	position: absolute;
	left: -42.3077%;
	top: -4.8148%;
	display: block;
	width: 196.9231%;
	max-width: none;
	height: 113.7778%;
	user-select: none;
	pointer-events: none;
}

/* 画像の反転と、支点を中心にした回転を分ける */
.ae-crane__hook--right .ae-crane__hook-art {
	transform: scaleX(-1);
}

.ae-crane__head {
	z-index: 2;
	left: 37.5%;
	top: 11.1%;
	width: 25.3%;
}

.ae-crane__front {
	z-index: 2;
	clip-path: inset(0 0 36% 0);
}

/* 取り出し口の内側だけアヒルを表示する */
.ae-crane__outlet {
	position: absolute;
	z-index: 2;
	left: 8.5%;
	top: 74.5%;
	width: 27%;
	height: 20.5%;
	overflow: hidden;
	border-radius: 4%;
	pointer-events: none;
}

.ae-crane__outlet-duck {
	position: absolute;
	left: 8.24%;
	top: 0;
	display: block;
	width: 78.8889%;
	max-width: none;
	height: auto;
	user-select: none;
	pointer-events: none;
}

.ae-crane__lever-control {
	position: absolute;
	z-index: 3;
	left: 53%;
	top: 66.5%;
	width: 12%;
	height: 14%;
}

.ae-crane__lever,
.ae-crane__lever-base {
	position: absolute;
	left: -80.8333%;
	top: -17.1429%;
	display: block;
	width: 257.9167%;
	max-width: none;
	height: auto;
	user-select: none;
	pointer-events: none;
}

/* 台座は固定。中央の棒が重複しないように切り抜く */
.ae-crane__lever-base {
	z-index: 1;
	clip-path: polygon(
		0 60%,
		46% 60%,
		46% 64%,
		54% 64%,
		54% 60%,
		100% 60%,
		100% 100%,
		0 100%
	);
}

/* 持ち手と棒だけを、根元を支点に傾ける */
.ae-crane__lever {
	z-index: 0;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 54%,
		54% 54%,
		54% 65%,
		46% 65%,
		46% 54%,
		0 54%
	);
	transform-origin: 50% 64%;
}

.ae-crane__steer {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: none;
}

.ae-crane__lever-control:has(.ae-crane__steer:focus-visible) {
	outline: 2px solid #10377e;
	outline-offset: 3px;
	border-radius: 12px;
}
.ae-crane__button {
	position: absolute;
	z-index: 3;
	left: 70.5%;
	top: 71%;
	width: 12%;
	height: 9%;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.ae-crane__button::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.ae-crane__button:focus-visible {
	outline: 3px solid #10377e;
	outline-offset: 5px;
}

.ae-crane__button:disabled {
	cursor: default;
}

.ae-crane__button-image {
	position: absolute;
	left: -21.667%;
	top: -17.222%;
	display: block;
	width: 143.333%;
	max-width: none;
	height: auto;
	user-select: none;
	pointer-events: none;
}

.ae-crane__button-image--pressed {
	opacity: 0;
}

.ae-hero[data-crane-state="playing"] .ae-crane__button-image--default {
	opacity: 0;
}

.ae-hero[data-crane-state="playing"] .ae-crane__button-image--pressed {
	opacity: 1;
}

.ae-crane-flight {
	position: fixed;
	z-index: 10001;
	display: block;
	max-width: none;
	height: auto;
	user-select: none;
	pointer-events: none;
	transform-origin: 52% 51%;
}

.ae-crane__sign {
	position: absolute;
	z-index: 4;
	left: 7%;
	top: 3%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86%;
	height: 10%;
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: clamp(16px, 4.6vw, 54px);
	font-size: 5.8cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .025em;
	white-space: nowrap;
}

.ae-crane-scene__guide {
	margin: 22px 0 0;
	font-size: clamp(12px, 1.2vw, 16px);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .12em;
	text-align: center;
}

.ae-crane-scene__arrow {
	display: block;
	width: 19px;
	height: 19px;
	margin-top: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}

@media (max-width: 1100px) {
	.ae-hero {
		padding-top: 80px;
		padding-bottom: 24px;
	}

	.ae-crane-scene {
		width: min(
			760px,
			100%,
			calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 180px)
		);
	}
}

@media (max-width: 650px) {
	.ae-hero {
		padding-right: 16px;
		padding-left: 16px;
	}

	.ae-hero__header {
		top: 12px;
		left: 20px;
		right: 16px;
		gap: 12px;
	}

	.ae-hero__brand-logo {
		width: 96px;
	}

	.ae-hero__location {
		gap: 10px;
		font-size: 9px;
		letter-spacing: .06em;
	}

	.ae-crane-scene__guide {
		margin-top: 24px;
		font-size: 12px;
		letter-spacing: .06em;
	}
}
/* トップ：他の入口ページとそろえた白い画面 */
.ae-hero {
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
	align-items: center;
	justify-items: center;
	column-gap: 40px;
	padding: 60px max(40px, calc((100% - 1280px) / 2)) 52px;
	background: #fff;
	animation: none;
}

/* 大きな円弧を外す */
.ae-hero::before {
	content: none;
}

/* 筐体の背後だけに、ごく淡い青の光 */
.ae-hero::after {
	content: "";
	inset: auto;
	right: -5%;
	top: 12%;
	width: 65%;
	aspect-ratio: 1.2;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: radial-gradient(
		ellipse at center,
		rgba(111, 190, 236, 0.14),
		rgba(190, 225, 248, 0.06) 45%,
		transparent 72%
	);
	filter: blur(24px);
	animation: ae-hero-near-glow 16s ease-in-out infinite alternate;
}

/* 所在地は右上に小さく */
.ae-hero__header {
	top: 28px;
	left: 32px;
	right: 32px;
	justify-content: flex-end;
}

.ae-hero .ae-hero__location {
	color: #43546a;
}

/* 左の文字領域 */
.ae-hero__copy {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	min-width: 0;
	color: #080b20;
	text-align: left;
}

.ae-hero__copy .ae-hero__brand {
	display: block;
	width: fit-content;
	margin: 0 0 28px;
}

.ae-hero__copy .ae-hero__brand-logo {
	display: block;
	width: 176px;
	height: auto;
	filter: none;
}

/* 開発相談・会社紹介と同じ英字の組み方 */
.ae-hero__copy .ae-hero__title {
	margin: 0;
	color: #080b20;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(48px, 6vw, 92px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.06em;
}

.ae-hero__title > span {
	display: block;
	white-space: nowrap;
}

.ae-hero__period {
	color: #064bfa;
}

/* 英字の下に、日本語のメッセージ */
.ae-hero__message {
	margin: 24px 0 0;
	color: #080b20;
	font-size: clamp(19px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

.ae-hero__invitation {
	margin: 20px 0 0;
	color: #43546a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0;
}

.ae-hero__invitation::before {
	content: none;
}

/* 右側のクレーンゲーム */
.ae-crane-scene {
	width: min(
		100%,
		700px,
		calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 180px)
	);
	min-width: 0;
	margin: 0;
}

/* 足元だけに広がる、柔らかい影 */
.ae-crane::before {
	left: -10%;
	top: 97%;
	width: 120%;
	height: 7%;
	background: radial-gradient(
		ellipse at 50% 40%,
		rgba(25, 40, 58, 0.42) 0%,
		rgba(25, 40, 58, 0.21) 40%,
		transparent 72%
	);
	filter: blur(5px);
}

/* 左右の脚に密着する影 */
.ae-crane::after {
	left: 0;
	right: 0;
	bottom: -1.2%;
	height: 2.4%;
	background:
		radial-gradient(
			ellipse 4.5% 32% at 7% 50%,
			rgba(10, 19, 29, 0.8),
			transparent 100%
		),
		radial-gradient(
			ellipse 4.5% 32% at 93% 50%,
			rgba(10, 19, 29, 0.8),
			transparent 100%
		);
	filter: blur(1px);
}

/* 操作説明は、筐体の下に短くまとめる */
.ae-crane-scene__guide {
	position: relative;
	margin: 22px 0 0;
	color: #43546a;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.03em;
	text-wrap: balance;
}

.ae-crane-scene__arrow {
	position: absolute;
	left: 50%;
	bottom: 20px;
	width: 14px;
	height: 14px;
	margin: 0;
	color: #064bfa;
	transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 900px) {
	.ae-hero {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		row-gap: 16px;
		padding: 44px 24px 32px;
	}

	.ae-hero__copy {
		width: min(100%, 480px);
	}

	.ae-hero__copy .ae-hero__brand {
		margin-bottom: 14px;
	}

	.ae-hero__copy .ae-hero__brand-logo {
		width: 132px;
	}

	.ae-hero__copy .ae-hero__title {
		font-size: clamp(32px, 7vw, 48px);
	}

	.ae-hero__message {
		margin-top: 14px;
		font-size: 16px;
		line-height: 1.5;
	}

	.ae-hero__invitation {
		display: none;
	}

	.ae-crane-scene {
		width: min(
			76vw,
			460px,
			calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 380px)
		);
	}

	.ae-crane-scene__guide {
		margin-top: 14px;
		font-size: 11px;
	}

	.ae-hero__header {
		top: 14px;
		left: 20px;
		right: 20px;
	}

	.ae-hero::after {
		right: -25%;
		top: 30%;
		width: 120%;
	}

	.ae-crane-scene__arrow {
		bottom: 12px;
		width: 11px;
		height: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-hero::after {
		animation: none;
	}
}
/* 小さな水色のロゴを左上へ */
.ae-hero__header {
	align-items: center;
	justify-content: space-between;
}

.ae-hero__header .ae-hero__brand {
	display: block;
	flex: 0 0 auto;
	width: fit-content;
	margin: 0;
}

.ae-hero__header .ae-hero__brand-logo {
	display: block;
	width: 120px;
	height: auto;
	filter: none;
}

@media (max-width: 900px) {
	.ae-hero__header .ae-hero__brand-logo {
		width: 96px;
	}

	.ae-hero {
		padding-top: 64px;
	}
}
/* タイトルを2行にし、下に遊び方をまとめる */
.ae-hero {
	padding-inline: max(40px, calc((100% - 1480px) / 2));
}

.ae-hero__copy {
	max-width: 600px;
}

.ae-hero__copy .ae-hero__title {
	font-size: clamp(48px, 5.6vw, 88px);
	line-height: 0.98;
}

/* パソコンでは、日本語コピーを1行に */
.ae-hero__message {
	margin-top: 24px;
	font-size: clamp(14px, 1.2vw, 20px);
	line-height: 1.7;
	white-space: nowrap;
}
/* 遊び方の入口 */
.ae-hero__instructions {
	margin-top: 30px;
	max-width: 460px;
}

.ae-hero__instructions-lead {
	margin: 0 0 18px;
	color: #43546a;
	font-size: 14px;
	line-height: 1.8;
}

/* 青いボタンと、白い矢印 */
.ae-play-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 260px;
	max-width: 100%;
	min-height: 64px;
	padding: 12px 14px 12px 24px;
	border: 1px solid #064bfa;
	border-radius: 4px;
	background: #064bfa;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease;
}

.ae-play-button__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: #064bfa;
	font: 400 22px/1 Arial, sans-serif;
}

@media (hover: hover) {
	.ae-play-button:enabled:hover {
		background: #003bd1;
		transform: translateY(-2px);
	}
}

.ae-play-button:enabled:active {
	transform: translateY(1px);
}

.ae-play-button:disabled {
	opacity: 0.55;
	cursor: default;
}

.ae-play-button:focus-visible {
	outline: 3px solid #24aadd;
	outline-offset: 4px;
}

/* 現在のパソコン配置を維持 */
@media (min-width: 901px) {
	.ae-hero {
		grid-template-columns: minmax(0, 520px) minmax(0, 700px);
		justify-content: center;
		column-gap: clamp(40px, 5vw, 96px);
		padding: 64px clamp(28px, 4vw, 80px) 56px;
	}

	.ae-hero__copy {
		max-width: 520px;
	}
}
/* スマホ・タブレット：縦並びを基本にする */
@media (max-width: 1100px) {
	.ae-hero {
		box-sizing: border-box;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: max-content;
		align-content: safe center;
		justify-items: center;
		column-gap: 0;
		row-gap: 16px;
		height: calc(
			100svh - var(--wp-admin--admin-bar--height, 0px)
		);
		min-height: 0;
		padding: 72px 32px 24px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		scroll-padding-block: 24px;
	}

	.ae-hero__header {
		top: 20px;
		left: 24px;
		right: 24px;
		gap: 16px;
	}

	.ae-hero__header .ae-hero__brand-logo {
		width: 112px;
	}

	.ae-hero__location {
		font-size: 10px;
	}

	.ae-hero__copy {
		width: min(100%, 540px);
		max-width: 540px;
	}

	.ae-hero__copy .ae-hero__title {
		font-size: clamp(40px, 6.5vw, 64px);
	}

	.ae-hero__message {
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.7;
		white-space: normal;
	}

	.ae-hero__instructions {
		max-width: 100%;
		margin-top: 20px;
	}

	.ae-hero__instructions-lead {
		margin-bottom: 12px;
		font-size: 14px;
		line-height: 1.8;
	}

	.ae-hero__instructions .ae-play-button {
		width: 280px;
		min-height: 56px;
	}

	.ae-hero__skip {
		width: 280px;
		min-height: 44px;
		font-size: 13px;
	}

	.ae-crane-scene {
		width: min(
			68vw,
			440px,
			max(
				240px,
				calc(
					100svh
					- var(--wp-admin--admin-bar--height, 0px)
					- 410px
				)
			)
		);
		min-width: 0;
		margin: 0;
	}

	.ae-crane-scene__guide {
		box-sizing: border-box;
		width: max-content;
		max-width: min(480px, calc(100vw - 64px));
		margin: 14px 0 0;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: 0.03em;
		text-align: center;
	}

	.ae-crane-scene__arrow {
		display: none;
	}
}
/* 通常は既存の場所に操作ボタンを表示 */
.ae-hero__actions {
	display: contents;
}

.ae-hero__skip-short,
.ae-hero__mobile-actions {
	display: none;
}

/* スマホ縦：採用した画面イメージの配置 */
@media (max-width: 650px) and (orientation: portrait) {
	.ae-hero {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		padding: 60px 24px 16px;
		background:
			radial-gradient(
				ellipse at 50% 66%,
				#e3f4ff 0%,
				#f4fbff 38%,
				#fff 75%
			);
	}

	.ae-hero::after {
		content: none;
	}

	.ae-hero__header {
		top: 16px;
		left: 24px;
		right: 24px;
		gap: 16px;
	}

	.ae-hero__header .ae-hero__brand-logo {
		width: 80px;
	}

	.ae-hero__location {
		font-size: 8px;
		letter-spacing: 0.1em;
	}

	.ae-hero__copy {
		width: 100%;
		max-width: 420px;
		text-align: center;
	}

	.ae-hero__copy .ae-hero__title {
		font-size: clamp(36px, 10.7vw, 48px);
		line-height: 0.98;
		letter-spacing: -0.055em;
		text-align: center;
	}

    .ae-hero__message {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
    }

	.ae-hero__instructions {
		display: none;
	}

	.ae-hero__instructions-lead {
		margin: 0;
		color: #294866;
		font-size: 11px;
		line-height: 1.8;
		text-align: center;
	}

	.ae-crane-scene {
		width: min(
			100%,
			320px,
			max(
				240px,
				calc(
					100svh
					- var(--wp-admin--admin-bar--height, 0px)
					- 330px
				)
			)
		);
		margin: 0;
	}

	.ae-crane-scene__guide {
		width: max-content;
		max-width: calc(100vw - 48px);
		margin-top: 12px;
		color: #193650;
		font-size: 11px;
		line-height: 1.7;
		letter-spacing: 0;
		text-align: center;
	}

	.ae-crane-scene__arrow {
		display: none;
	}

	.ae-hero__mobile-actions {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: 8px auto 0;
	}

	.ae-hero__mobile-actions .ae-hero__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 12px;
	}

	.ae-hero__mobile-actions .ae-play-button {
		box-sizing: border-box;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-width: 0;
		height: 44px;
		min-height: 44px;
		padding: 8px 10px;
		border: 1px solid #064bfa;
		border-radius: 999px;
		background: transparent;
		color: #064bfa;
		font-size: 12px;
		font-weight: 500;
		line-height: 1.5;
		white-space: nowrap;
	}

	.ae-hero__mobile-actions .ae-play-button__arrow {
		order: -1;
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		border: 1px solid currentColor;
		background: transparent;
		color: inherit;
		font-size: 15px;
	}

	.ae-hero__mobile-actions .ae-hero__skip {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-width: 0;
		height: 44px;
		min-height: 44px;
		margin: 0;
		padding: 8px 10px;
		color: #5b6a7e;
		font-size: 12px;
		line-height: 1.5;
		white-space: nowrap;
	}

	.ae-hero__mobile-actions .ae-hero__skip-long {
		display: none;
	}

	.ae-hero__mobile-actions .ae-hero__skip-short {
		display: inline;
	}
}
/* 横画面：文章を左、クレーンを右へ */
@media (min-width: 600px) and (max-width: 1100px)
	and (orientation: landscape) {
	.ae-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-content: safe center;
		column-gap: 24px;
		row-gap: 0;
		padding: 64px 32px 24px;
	}

	.ae-hero__copy {
		width: 100%;
		max-width: 480px;
	}

	.ae-hero__copy .ae-hero__title {
		font-size: clamp(32px, 4.8vw, 56px);
	}

	.ae-hero__message {
		margin-top: 12px;
		font-size: 14px;
	}

	.ae-hero__instructions {
		margin-top: 12px;
	}

	.ae-hero__instructions-lead {
		margin-bottom: 8px;
		font-size: 12px;
	}

	.ae-hero__instructions .ae-play-button {
		width: 260px;
		min-height: 48px;
		padding: 8px 12px 8px 18px;
	}

	.ae-hero__skip {
		width: 260px;
		margin-top: 4px;
		font-size: 12px;
	}

	.ae-crane-scene {
		width: min(
			100%,
			440px,
			max(
				200px,
				calc(
					100svh
					- var(--wp-admin--admin-bar--height, 0px)
					- 130px
				)
			)
		);
	}

	.ae-crane-scene__guide {
		width: 100%;
		max-width: 100%;
		margin-top: 12px;
		font-size: 11px;
	}
}

/* タッチ操作：見た目を変えずレバーの操作範囲を広げる */
@media (max-width: 1100px) and (pointer: coarse) {
	.ae-crane__steer {
		inset: auto;
		left: 50%;
		top: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		transform: translate(-50%, -50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ae-play-button {
		transition: none;
		transform: none;
	}
}
/* トップの控えめなスキップ導線 */
.ae-hero__skip {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 260px;
	max-width: 100%;
	min-height: 44px;
	margin-top: 8px;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: #5b6a7e;
	font: inherit;
	font-size: 12px;
	line-height: 1.6;
	cursor: pointer;
}

.ae-hero__skip:hover {
	color: #064bfa;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ae-hero__skip:disabled {
	opacity: 0.55;
	cursor: default;
}

.ae-hero__skip:focus-visible {
	outline: 3px solid #24aadd;
	outline-offset: 3px;
}
/* 実際に操作する練習用チュートリアル */
html.is-ae-tutorial-open {
	overflow: hidden;
}

.ae-crane-tutorial {
	position: fixed;
	z-index: 100020;
	inset: 0;
	isolation: isolate;
	pointer-events: none;
}

.ae-crane-tutorial[hidden] {
	display: none;
}

/* 背景全体を暗くする。明るい部分は練習用の筐体で重ねる。 */
.ae-crane-tutorial__shade {
	display: none;
}

.ae-crane-tutorial__shade[data-shade="top"] {
	display: block;
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(8, 11, 32, 0.62);
	pointer-events: auto;
	touch-action: none;
}

/* 本番と同じ位置に重ねる、独立した練習用の筐体 */
.ae-crane-tutorial__practice {
	position: fixed;
	z-index: 1;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0;
	pointer-events: none;

	/* アヒル・クレーンの内部と、レバー・ボタンを明るく見せる。 */
	clip-path: polygon(
		3% 15%,
		97% 15%,
		97% 69%,
		87% 69%,
		87% 84%,
		45% 84%,
		45% 69%,
		3% 69%
	);
}

.ae-crane-tutorial__practice::before,
.ae-crane-tutorial__practice::after {
	content: none;
}

.ae-crane-tutorial__practice [data-crane-steer],
.ae-crane-tutorial__practice [data-crane-play] {
	pointer-events: auto;
}

/* 操作対象の枠。大きさはJavaScriptで指定する。 */
.ae-crane-tutorial__ring {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	border: 3px solid #4384ff;
	border-radius: 18px;
	box-shadow:
		0 0 0 4px rgba(255, 255, 255, 0.85),
		0 0 24px rgba(6, 75, 250, 0.55);
	pointer-events: none;
}

/* 黄色で指定された、筐体の右上に置く小窓 */
/* 左側に揃えて置く説明窓 */
.ae-crane-tutorial__panel {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 28px 32px;
	overflow-y: auto;
	border: 1px solid #b4c8e8;
	border-radius: 12px;
	background: #fff;
	color: #080b20;
	box-shadow: 0 12px 36px rgba(8, 11, 32, 0.16);
	pointer-events: auto;
	touch-action: pan-y;
	overscroll-behavior: contain;
}

.ae-crane-tutorial__close {
	display: block;
	min-height: 32px;
	margin: -8px -8px 6px auto;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	color: #5b6a7e;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.ae-crane-tutorial__close:focus-visible {
	outline: 2px solid #064bfa;
	outline-offset: 2px;
}

.ae-crane-tutorial__step {
	margin: 0 0 8px;
	color: #064bfa;
	font: 700 12px/1.5 Arial, sans-serif;
	letter-spacing: 0.1em;
}

.ae-crane-tutorial__title {
	margin: 0 0 10px;
	color: #080b20;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.ae-crane-tutorial__text {
	margin: 0;
	color: #43546a;
	font-size: 13px;
	line-height: 1.8;
}

.ae-crane-tutorial__start {
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 20px;
	padding: 12px 16px;
	font-size: 14px;
}

.ae-crane-tutorial__start[hidden] {
	display: none;
}
/* 説明窓の中に置く、操作できない動きの見本 */
.ae-tutorial-examples {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.ae-tutorial-example {
	min-width: 0;
	padding: 16px 8px;
	border: 1px solid #dce6f5;
	border-radius: 12px;
	background: #f4f7fc;
	text-align: center;
}

.ae-tutorial-example__label {
	margin: 0;
	color: #064bfa;
	font: 700 11px/1.5 Arial, sans-serif;
	letter-spacing: 0.1em;
}

.ae-tutorial-example__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 124px;
	overflow: hidden;
	pointer-events: none;
}

.ae-tutorial-example__lever {
	position: relative;
	display: block;
	flex: 0 0 72px;
	width: 72px;
	height: 84px;
}

.ae-tutorial-example__lever .ae-crane__lever {
	animation: ae-tutorial-lever-example 2.8s ease-in-out infinite;
}

.ae-tutorial-example__arrow {
	color: #064bfa;
	font-size: 20px;
}

.ae-tutorial-example__button {
	position: relative;
	display: block;
	width: 76px;
	height: 57px;
}

.ae-tutorial-example__normal {
	animation: ae-tutorial-button-normal 2.8s step-end infinite;
}

.ae-tutorial-example__pressed {
	opacity: 0;
	animation: ae-tutorial-button-pressed 2.8s step-end infinite;
}

.ae-tutorial-example__caption {
	margin: 0;
	color: #080b20;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

.ae-tutorial-examples-note {
	margin: 14px 0 0;
	color: #66758a;
	font-size: 11px;
	line-height: 1.8;
}

@keyframes ae-tutorial-lever-example {
	0%, 100% { rotate: 0deg; }
	25% { rotate: -16deg; }
	75% { rotate: 16deg; }
}

@keyframes ae-tutorial-button-normal {
	0%, 65% { opacity: 1; }
	45% { opacity: 0; }
}

@keyframes ae-tutorial-button-pressed {
	0%, 65% { opacity: 0; }
	45% { opacity: 1; }
}

/* 遊び方：スマホ・タブレット */
@media (max-width: 1100px) {
	.ae-crane-tutorial__panel {
		padding: 20px;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.ae-crane-tutorial__close {
		min-height: 44px;
		margin-top: -8px;
	}

	.ae-crane-tutorial__title {
		font-size: 18px;
		line-height: 1.5;
	}

	.ae-crane-tutorial__text {
		font-size: 13px;
		line-height: 1.8;
	}

	.ae-tutorial-examples {
		gap: 8px;
		margin-top: 12px;
	}

	.ae-tutorial-example {
		padding: 8px 6px;
	}

	.ae-tutorial-example__stage {
		height: 88px;
		gap: 2px;
	}

	.ae-tutorial-example__caption {
		font-size: 11px;
	}

	.ae-tutorial-examples-note {
		margin-top: 10px;
		font-size: 11px;
	}
}

/* 高さの低い横画面では、本文と実際の操作を優先する */
@media (max-width: 1100px) and (max-height: 600px) {
	.ae-crane-tutorial__panel {
		padding: 16px;
	}

	.ae-crane-tutorial__title {
		font-size: 16px;
	}

	.ae-tutorial-examples,
	.ae-tutorial-examples-note {
		display: none;
	}
}
/* 遊び方：スマホ縦は動く見本を中心にする */
@media (max-width: 650px) and (orientation: portrait) {
	.ae-crane-tutorial__panel {
		padding: 12px;
		border-radius: 16px;
	}

	.ae-crane-tutorial__close {
		position: absolute;
		top: 8px;
		right: 8px;
		min-height: 44px;
		margin: 0;
	}

	.ae-crane-tutorial__step,
	.ae-crane-tutorial__text,
	.ae-tutorial-examples-note {
		display: none;
	}

	.ae-crane-tutorial__title {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 44px;
		margin: 0;
		padding-right: 76px;
		font-size: 15px;
		line-height: 1.5;
	}

	.ae-tutorial-examples {
		display: grid;
		gap: 8px;
		margin-top: 8px;
	}

	.ae-tutorial-example {
		padding: 8px 4px;
	}

	.ae-tutorial-example__label {
		font-size: 10px;
	}

	.ae-tutorial-example__stage {
		height: 64px;
		gap: 4px;
	}

	.ae-tutorial-example__lever {
		flex-basis: 48px;
		width: 48px;
		height: 56px;
	}

	.ae-tutorial-example__button {
		width: 60px;
		height: 45px;
	}

	.ae-tutorial-example__arrow {
		font-size: 16px;
	}

	.ae-tutorial-example__caption {
		font-size: 10px;
	}

	.ae-crane-tutorial__start {
		min-height: 44px;
		margin-top: 12px;
		padding: 8px 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ae-tutorial-example__lever .ae-crane__lever,
	.ae-tutorial-example__normal,
	.ae-tutorial-example__pressed {
		animation: none;
	}
}
/* 操作台の下に落ちる影 */
.ae-crane__panel-shadow {
    position: absolute;
    z-index: 2;
    left: 36%;
    top: 81%;
    width: 63%;
    height: 10%;
    background: linear-gradient(
        to bottom,
        rgb(3 12 35 / 65%) 0%,
        rgb(3 12 35 / 45%) 6%,
        rgb(3 12 35 / 22%) 30%,
        rgb(3 12 35 / 6%) 65%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 3%,
        #000 97%,
        transparent
    );
    pointer-events: none;
}
/* レバーの台座が操作台に接する部分の影 */
.ae-crane__lever-control::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 7%;
    top: 82%;
    width: 86%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgb(3 12 35 / 28%) 0%,
        rgb(3 12 35 / 12%) 45%,
        transparent 72%
    );
    pointer-events: none;
}
/* 左の青い面：操作台の下に落ちる短い影 */
.ae-crane__panel-shadow--left {
    left: 3%;
    width: 5.5%;
    height: 7%;
    opacity: 0.65;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent
    );
}
/* 取り出し口：上・左右の厚みと、下の縁の反射 */
.ae-crane__outlet::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgb(2 8 22 / 32%) 0%,
        rgb(2 8 22 / 14%) 8%,
        transparent 26%
    );
    box-shadow:
        inset 0 3px 3px rgb(1 5 14 / 48%),
        inset 2px 0 2px rgb(1 5 14 / 24%),
        inset -2px 0 2px rgb(1 5 14 / 20%),
        inset 0 -1px 0 rgb(155 195 235 / 38%);
    pointer-events: none;
}