.upload-mascot{position:fixed;z-index:10000;pointer-events:none;width:min(100vw,660px);aspect-ratio:660 / 325;left:50%;top:min(56vh,calc(100vh - 325px));transform:translate(-50%)}@media(min-width:521px){.upload-mascot{width:390px}}.upload-mascot__flight{position:absolute;left:20%;width:80%}.upload-mascot__sprite{width:100%;aspect-ratio:640 / 393;background:url(../img/common/mascot_qura-fly.webp) 0% 0% / 600% 400% no-repeat}.upload-mascot__bubble{position:absolute;left:4%;top:calc(22% - 20px);width:36%;min-height:34%;aspect-ratio:382 / 180;background:url(../img/common/mascot_speech.webp) center / 100% 100% no-repeat;display:grid;place-items:center;padding:12px 30px 12px 20px;box-sizing:border-box;color:#000;font:700 15px/1.35 LINE Seed JP,sans-serif;transform-origin:right center;opacity:0}.upload-mascot__bubble span{white-space:pre-line;text-align:left}.upload-mascot[data-phase=complete] .upload-mascot__bubble,.upload-mascot[data-phase=farewell] .upload-mascot__bubble{padding:12px 20px}.upload-mascot[data-phase=complete] .upload-mascot__bubble span,.upload-mascot[data-phase=farewell] .upload-mascot__bubble span{position:absolute;left:2px;top:50%;width:90%;transform:translateY(-50%);text-align:center}.upload-mascot[data-phase=entering] .upload-mascot__flight{animation:upload-fly-in 1.2s ease-out both}.upload-mascot[data-phase=entering] .upload-mascot__sprite{animation:upload-posture 1.2s steps(1,end) both}.upload-mascot[data-phase=waiting] .upload-mascot__float,.upload-mascot[data-phase=complete] .upload-mascot__float,.upload-mascot[data-phase=farewell] .upload-mascot__float{animation:upload-hover 2.6s ease-in-out infinite}.upload-mascot[data-phase=waiting] .upload-mascot__sprite{animation:upload-talk .6s steps(1,end) 2 both}.upload-mascot[data-phase=complete] .upload-mascot__sprite{animation:upload-result-talk .6s steps(1,end) 1 both}.upload-mascot[data-phase=waiting] .upload-mascot__bubble,.upload-mascot[data-phase=complete] .upload-mascot__bubble{animation:upload-bubble-in .45s ease-out both}.upload-mascot[data-phase=farewell] .upload-mascot__bubble{animation:upload-bubble-out .35s ease-in both}.upload-mascot[data-phase=farewell] .upload-mascot__sprite{background-position:0% 100%}.upload-mascot[data-phase=preparing] .upload-mascot__sprite{animation:upload-posture .7s steps(1,end) reverse both}.upload-mascot[data-phase=leaving] .upload-mascot__flight{animation:upload-fly-out .9s ease-in both}@keyframes upload-fly-in{0%{transform:translate(calc(50vw + 330px))}to{transform:translate(0)}}@keyframes upload-fly-out{0%{transform:translate(0)}to{transform:translate(calc(-50vw - 660px))}}@keyframes upload-hover{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes upload-bubble-in{0%{opacity:0;transform:scale(.15)}to{opacity:1;transform:scale(1)}}@keyframes upload-bubble-out{0%{opacity:1}to{opacity:0}}@keyframes upload-posture{0.00000%{background-position:0% 0%}5.55556%{background-position:20% 0%}11.11111%{background-position:40% 0%}16.66667%{background-position:60% 0%}22.22222%{background-position:80% 0%}27.77778%{background-position:100% 0%}33.33333%{background-position:0% 33.33333%}38.88889%{background-position:20% 33.33333%}44.44444%{background-position:40% 33.33333%}50.00000%{background-position:60% 33.33333%}55.55556%{background-position:80% 33.33333%}61.11111%{background-position:100% 33.33333%}66.66667%{background-position:0% 66.66667%}72.22222%{background-position:20% 66.66667%}77.77778%{background-position:40% 66.66667%}83.33333%{background-position:60% 66.66667%}88.88889%{background-position:80% 66.66667%}94.44444%{background-position:100% 66.66667%}100.00000%{background-position:0% 100%}}@keyframes upload-talk{0%{background-position:0% 100%}16%{background-position:20% 100%}33%{background-position:40% 100%}50%{background-position:60% 100%}66%{background-position:80% 100%}83%{background-position:100% 100%}to{background-position:0% 100%}}@keyframes upload-result-talk{0%{background-position:0% 100%}16%{background-position:20% 100%}33%{background-position:40% 100%}50%{background-position:60% 100%}66%{background-position:80% 100%}83%{background-position:100% 100%}to{background-position:0% 100%}}@media(prefers-reduced-motion:reduce){.upload-mascot[data-phase=entering] .upload-mascot__flight{animation:upload-fly-in 1.2s ease-out both!important;animation-delay:0ms!important;animation-iteration-count:1!important}.upload-mascot[data-phase=entering] .upload-mascot__sprite{animation:upload-posture 1.2s steps(1,end) both!important;animation-delay:0ms!important;animation-iteration-count:1!important}.upload-mascot[data-phase=waiting] .upload-mascot__float,.upload-mascot[data-phase=complete] .upload-mascot__float,.upload-mascot[data-phase=farewell] .upload-mascot__float{animation:upload-hover 2.6s ease-in-out infinite!important;animation-delay:0ms!important;animation-iteration-count:infinite!important}.upload-mascot[data-phase=waiting] .upload-mascot__sprite{animation:upload-talk .6s steps(1,end) 2 both!important;animation-delay:0ms!important;animation-iteration-count:2!important}.upload-mascot[data-phase=complete] .upload-mascot__sprite{animation:upload-result-talk .6s steps(1,end) 1 both!important;animation-delay:0ms!important;animation-iteration-count:1!important}.upload-mascot[data-phase=waiting] .upload-mascot__bubble,.upload-mascot[data-phase=complete] .upload-mascot__bubble{animation:upload-bubble-in .45s ease-out both!important;animation-delay:0ms!important;animation-iteration-count:1!important}.upload-mascot[data-phase=farewell] .upload-mascot__bubble{animation:upload-bubble-out .35s ease-in both!important;animation-delay:0ms!important;animation-iteration-count:1!important}.upload-mascot[data-phase=preparing] .upload-mascot__sprite{animation:upload-posture .7s steps(1,end) reverse both!important;animation-delay:0ms!important;animation-iteration-count:1!important}.upload-mascot[data-phase=leaving] .upload-mascot__flight{animation:upload-fly-out .9s ease-in both!important;animation-delay:0ms!important;animation-iteration-count:1!important}}
