.mv-stage { position:relative; background:#e8f2fa; overflow:hidden; }
.mv-scene { --mv-w:1927; --mv-h:1086; --mv-path:/common/image/top/mv_anim; position:relative; width:100%; max-width:1927px; margin:0 auto; aspect-ratio:1927 / 1086; overflow:hidden; background:#d9eaf7; }
.mv-layer { position:absolute; background-repeat:no-repeat; background-position:center center; background-size:100% 100%; pointer-events:none; }
.mv-layer.is-entering { will-change:opacity, transform; }
.mv-bg { left:0; top:0; width:100%; height:calc(1085 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/bg-city.webp"); z-index:1; }
.mv-tile { z-index:10; }
.mv-tile[data-tile="banana"] { left:0; top:0; width:calc(591 / 1927 * 100%); height:calc(407 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-banana.webp"); }
.mv-tile[data-tile="pc"] { left:calc(507 / 1927 * 100%); top:0; width:calc(566 / 1927 * 100%); height:calc(301 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-pc.webp"); }
.mv-tile[data-tile="chicken"] { left:calc(1010 / 1927 * 100%); top:0; width:calc(608 / 1927 * 100%); height:calc(332 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-chicken.webp"); }
.mv-tile[data-tile="gift"] { left:calc(1489 / 1927 * 100%); top:0; width:calc(438 / 1927 * 100%); height:calc(388 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-gift.webp"); }
.mv-tile[data-tile="cleaning"] { left:0; top:calc(347 / 1086 * 100%); width:calc(306 / 1927 * 100%); height:calc(495 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-cleaning.webp"); }
.mv-tile[data-tile="restaurant"] { left:calc(247 / 1927 * 100%); top:calc(394 / 1086 * 100%); width:calc(337 / 1927 * 100%); height:calc(439 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-restaurant.webp"); }
.mv-tile[data-tile="meal"] { left:calc(1180 / 1927 * 100%); top:calc(621 / 1086 * 100%); width:calc(463 / 1927 * 100%); height:calc(317 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-meal.webp"); }
.mv-tile[data-tile="support"] { left:calc(1386 / 1927 * 100%); top:calc(667 / 1086 * 100%); width:calc(541 / 1927 * 100%); height:calc(418 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-support.webp"); }
.mv-tile[data-tile="people"] { left:calc(1410 / 1927 * 100%); top:calc(282 / 1086 * 100%); width:calc(517 / 1927 * 100%); height:calc(477 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-people.webp"); }
.mv-tile[data-tile="sns"] { left:0; top:calc(712 / 1086 * 100%); width:calc(542 / 1927 * 100%); height:calc(373 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/tile-sns.webp"); }
.mv-title { left:calc(536 / 1927 * 100%); top:calc(305 / 1086 * 100%); width:calc(850 / 1927 * 100%); height:calc(310 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/title-main.webp"); z-index:40; }
.mv-logo { left:calc(891 / 1927 * 100%); top:calc(595 / 1086 * 100%); width:calc(214 / 1927 * 100%); height:calc(141 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/logo-turtle.webp"); background-size:contain; z-index:41; transform-origin:center center; }
.mv-icon[data-icon="stepup"] { left:calc(513 / 1927 * 100%); top:calc(873 / 1086 * 100%); width:calc(223 / 1927 * 100%); height:calc(213 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/icon-stepup.webp"); z-index:42; }
.mv-icon[data-icon="self"] { left:calc(736 / 1927 * 100%); top:calc(873 / 1086 * 100%); width:calc(219 / 1927 * 100%); height:calc(210 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/icon-self.webp"); z-index:42; }
.mv-icon[data-icon="staff"] { left:calc(952 / 1927 * 100%); top:calc(873 / 1086 * 100%); width:calc(220 / 1927 * 100%); height:calc(210 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/icon-staff.webp"); z-index:42; }
.mv-icon[data-icon="pickup"] { left:calc(1172 / 1927 * 100%); top:calc(873 / 1086 * 100%); width:calc(208 / 1927 * 100%); height:calc(208 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/icon-pickup.webp"); z-index:42; }
.mv-badge[data-badge="meal"] { left:calc(1350 / 1927 * 100%); top:calc(873 / 1086 * 100%); width:calc(167 / 1927 * 100%); height:calc(68 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/badge-meal.webp"); z-index:43; }
.mv-badge[data-badge="pickup"] { left:calc(376 / 1927 * 100%); top:calc(850 / 1086 * 100%); width:calc(168 / 1927 * 100%); height:calc(84 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/badge-pickup.webp"); z-index:43; }
.mv-scene:not(.is-ready) .mv-layer { opacity:0; }
.mv-scene.is-animating .mv-bg,
.mv-scene.is-done .mv-bg { opacity:1; }
.mv-scene[data-variant="a"].is-animating .mv-logo,
.mv-scene.is-done .mv-logo:not(.mv-logo-pass) { opacity:1; }
.mv-scene.is-done .mv-logo-pass { opacity:0; }
.mv-scene.is-animating .mv-title,
.mv-scene.is-done .mv-title,
.mv-scene.is-animating .mv-tile,
.mv-scene.is-done .mv-tile,
.mv-scene.is-animating .mv-icon,
.mv-scene.is-done .mv-icon,
.mv-scene.is-animating .mv-badge,
.mv-scene.is-done .mv-badge { opacity:0; }
.mv-scene.is-done .mv-title,
.mv-scene.is-done .mv-tile,
.mv-scene.is-done .mv-icon,
.mv-scene.is-done .mv-badge { opacity:1; transform:none; }
.mv-layer.is-in:not(.is-entering) { opacity:1!important; }
.mv-layer.is-in:not(.is-entering):not(.mv-logo):not(.mv-logo-pass) { transform:none; }
.mv-logo.is-hero { left:50%; top:48%; width:calc(214 / 1927 * 100% * 3.2); height:calc(141 / 1086 * 100% * 3.2); transform:translate(-50%, -50%); z-index:50; }
.mv-logo.is-settling { transition:left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.mv-scene[data-variant="b"] .mv-logo.is-hero,
.mv-scene[data-variant="c"] .mv-logo.is-hero,
.mv-scene[data-variant="d"] .mv-logo.is-hero { left:auto; top:auto; width:auto; height:auto; transform:none; }
.mv-scene[data-variant="b"] .mv-logo.is-settling,
.mv-scene[data-variant="c"] .mv-logo.is-settling,
.mv-scene[data-variant="d"] .mv-logo.is-settling { transition:none; }
.mv-logo-pass { left:50%; top:46%; width:calc(214 / 1927 * 100%); height:calc(141 / 1086 * 100%); background-image:url("/common/image/top/mv_anim/logo-turtle.webp"); background-size:contain; background-repeat:no-repeat; background-position:center; transform-origin:center center; z-index:50; opacity:0; pointer-events:none; will-change:transform, opacity; }
.mv-title.is-entering,
.mv-icon.is-entering,
.mv-badge.is-entering { transition:opacity 0.4s ease, transform 0.4s ease; }
.mv-tile.is-entering { will-change:opacity, transform; }
.mv-bg.is-entering { transition:opacity 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
	.mv-layer,
	.mv-logo.is-settling,
	.mv-title.is-entering,
	.mv-tile.is-entering,
	.mv-icon.is-entering,
	.mv-badge.is-entering,
	.mv-bg.is-entering { transition:none!important; }
}