#l_animation{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:1000;width:100vw;height:100dvh;background:url(../img/bg_pattern.webp) center;background-size:17.1rem auto;text-align:center;transition:opacity .7s}
#l_animation .wrap .character{position:relative;width:16.3rem;background-size:100% auto!important;animation:load 1s infinite steps(1,end)}
#l_animation .wrap .character .chara01{opacity:0}
#l_animation .wrap .character .chara03{position:absolute;top:0;left:0;opacity:0}
#l_animation .wrap .bar{position:relative;display:inline-block;width:15.6rem;height:.8rem;border-radius:9rem;background:#ffe45f;overflow:hidden;margin-top:3rem}
#l_animation .wrap .bar span{position:absolute;top:0;left:0;width:10%;height:100%;background:var(--orange500);transition:width .3s var(--easeOutCubic)}
#l_animation .wrap .prodress{font-weight:var(--fontBold);color:var(--orange500);line-height:1.4;margin-top:1.5rem}
#l_animation .wrap .prodress span{display:block;font-family:var(--roundGothic);font-size:1.9rem}
#l_animation .wrap .prodress span em{position:relative;top:.1rem;font-size:3.2rem;padding-right:.5rem}
#l_animation.is-loaded .wrap .character{background:0 0!important}
#l_animation.is-loaded .wrap .character .chara03{opacity:1}
#l_animation.is-hide{opacity:0;pointer-events:none}
#l_container{position:relative;z-index:100;background:url(../img/bg_pattern.webp) center;background-size:17.1rem auto;transition:opacity .7s;transition-delay:.7s;opacity:0}
#l_container.is-show{opacity:1}
/*# sourceMappingURL=layout.css.map */