.hero-banner-custom{position:relative;width:100%;overflow:hidden;height:clamp(714px,calc(16.6vw + 649.26px),968px)}.hero-banner-custom__image{width:100%;height:100%;object-fit:cover;display:block}.hero-banner-custom__image--desktop{display:none;object-position:center center}.hero-banner-custom__image--mobile{display:block;object-position:-200px center}.hero-banner-custom__layer--bg-mobile{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:-200px center;z-index:0}.hero-banner-custom__layer--float-1-mobile,.hero-banner-custom__layer--float-2-mobile,.hero-banner-custom__layer--float-3-mobile{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:-200px center;pointer-events:none}.hero-banner-custom__layer--float-1-mobile{z-index:3;animation:floatLayer1 4s ease-in-out infinite}.hero-banner-custom__layer--float-2-mobile{z-index:1;animation:floatLayer2 5s ease-in-out infinite}.hero-banner-custom__layer--float-3-mobile{z-index:2;animation:floatLayer3 4.5s ease-in-out infinite}@media screen and (min-width:750px){.hero-banner-custom__image--desktop{display:block}.hero-banner-custom__image--mobile{display:none}}.hero-banner-custom__float-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:1}.hero-banner-custom__float-wrapper--desktop{display:none}.hero-banner-custom__float-wrapper--mobile{display:block}@media screen and (min-width:750px){.hero-banner-custom__float-wrapper--desktop{display:block}.hero-banner-custom__float-wrapper--mobile{display:none}}.hero-banner-custom__layer{position:absolute;top:-100px;left:-5%;width:110%;height:calc(100% + 100px);object-fit:cover;pointer-events:none}.hero-banner-custom__layer--bg{z-index:0}.hero-banner-custom__layer--float-1,.hero-banner-custom__layer--float-2,.hero-banner-custom__layer--float-3{--cursor-x: 0px;--cursor-y: 0px;transition:transform .15s ease-out}.hero-banner-custom__layer--float-1{z-index:3;animation:floatLayer1 4s ease-in-out infinite;transform:translate(var(--cursor-x),var(--cursor-y))}.hero-banner-custom__layer--float-2{z-index:1;animation:floatLayer2 5s ease-in-out infinite;transform:translate(var(--cursor-x),var(--cursor-y))}.hero-banner-custom__layer--float-3{z-index:2;animation:floatLayer3 4.5s ease-in-out infinite;transform:translate(var(--cursor-x),var(--cursor-y))}@keyframes floatLayer1{0%,to{translate:0 0}50%{translate:5px -15px}}@keyframes floatLayer2{0%,to{translate:0 0}50%{translate:-8px -12px}}@keyframes floatLayer3{0%,to{translate:0 0}50%{translate:3px -18px}}.hero-banner-custom__placeholder{width:100%;height:100%;background-color:#333;display:flex;align-items:center;justify-content:center;color:#999;font-size:18px}.hero-banner-custom__catchcopy{position:absolute;bottom:280px;left:50%;transform:translate(-50%);z-index:2;opacity:0;animation:fadeInCatchcopy 1s ease-out .3s forwards}.hero-banner-custom__catchcopy-image{display:block;max-width:100%;height:auto}@keyframes fadeInCatchcopy{0%{opacity:0}to{opacity:1}}.hero-banner-custom__catchcopy-image--desktop{display:none}.hero-banner-custom__catchcopy-image--mobile{display:block;width:calc(100vw - 60px)!important;max-width:none!important;height:auto}@media screen and (min-width:750px){.hero-banner-custom__catchcopy{bottom:320px}.hero-banner-custom__catchcopy-image--desktop{display:block;width:clamp(400px,41.5vw,797px);height:auto}.hero-banner-custom__catchcopy-image--mobile{display:none}}.hero-banner-custom__character-wrapper{position:absolute;right:0;bottom:0;width:clamp(200px,15.88vw,305px);height:clamp(200px,15.88vw,305px);z-index:2}.hero-banner-custom__character-circle{position:absolute;width:clamp(265px,21.1vw,405px);height:clamp(265px,21.1vw,405px);background-color:#fff;border-radius:50%;right:clamp(-45px,-3.6vw,-70px);bottom:clamp(-50px,-4vw,-80px);z-index:1;display:block!important}.hero-banner-custom__character-text{position:absolute;right:clamp(40px,3.5vw,70px);bottom:clamp(130px,11vw,210px);font-family:Noto Sans JP,sans-serif;font-size:clamp(16px,1.25vw,24px);font-weight:500;color:#000;margin:0;z-index:2;white-space:nowrap;opacity:0;animation:fadeInCatchcopy 1s ease-out .8s forwards}.hero-banner-custom__character-icon{display:block;position:absolute;right:clamp(23px,1.82vw,35px);bottom:clamp(15px,1.5vw,30px);display:inline-flex;align-items:center;justify-content:center;z-index:2;opacity:0;transform:translateY(100%);animation:slideUpFromBottom 1s ease-out .5s forwards}.hero-banner-custom__character-icon:hover{cursor:pointer}.hero-banner-custom__character-image{width:clamp(153px,12.19vw,234px);height:clamp(117px,9.27vw,178px);object-fit:contain;display:block;animation:floatingAlive 3s ease-in-out infinite;animation-delay:1.5s}.hero-banner-custom__character-image--hover{position:absolute;top:0;right:0;bottom:0;left:0;width:clamp(153px,12.19vw,234px);height:clamp(117px,9.27vw,178px);object-fit:contain;opacity:0;animation:floatingAlive 3s ease-in-out infinite;animation-delay:1.5s}.hero-banner-custom__character-icon:hover .hero-banner-custom__character-image{opacity:0}.hero-banner-custom__character-icon:hover .hero-banner-custom__character-image--hover{opacity:1}@keyframes slideUpFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes floatingAlive{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(2deg)}50%{transform:translateY(-4px) rotate(0)}75%{transform:translateY(-10px) rotate(-2deg)}}.hero-banner-custom__circular-text{position:absolute;right:clamp(-60px,-4.4vw,-85px);bottom:clamp(-65px,-4.8vw,-95px);width:clamp(285px,22.6vw,435px);height:clamp(285px,22.6vw,435px);z-index:2;animation:rotateCircularText 20s linear infinite}.hero-banner-custom__circular-text svg{width:100%;height:100%}.hero-banner-custom__circular-text-content{font-family:Dongle,sans-serif;font-size:16px;font-weight:400;fill:#000;letter-spacing:2px}@keyframes rotateCircularText{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width:749px){.hero-banner-custom__catchcopy{bottom:350px}.hero-banner-custom__character-wrapper{width:200px;height:200px;bottom:110px}.hero-banner-custom__character-circle{width:245px;height:245px;right:-45px;bottom:-55px}.hero-banner-custom__character-icon{right:25px;bottom:5px}.hero-banner-custom__character-image,.hero-banner-custom__character-image--hover{width:136px;height:115px}.hero-banner-custom__character-text{right:15px;bottom:125px;font-size:16px}.hero-banner-custom__circular-text{width:265px;height:265px;right:-55px;bottom:-65px}.hero-banner-custom__circular-text-content{font-size:14px}}.hero-banner-custom--overlay{position:fixed!important;top:0;left:0;width:100vw!important;height:100vh!important;z-index:9999}body.hero-overlay-active{overflow:hidden!important;position:fixed!important;width:100%!important;top:0!important;left:0!important;height:100%!important}body.hero-overlay-active .shopify-section-group-header-group{opacity:0!important;pointer-events:none!important;transition:opacity .4s ease}.hero-banner-custom--dismissing{animation:irisClose .8s ease-in-out forwards}@keyframes irisClose{0%{clip-path:circle(150% at 90% 85%)}to{clip-path:circle(0% at 90% 85%)}}.hero-banner-custom__character-icon--clicked{visibility:hidden!important}@keyframes characterBounceExit{0%{transform:translate(0) rotate(0);opacity:1}15%{transform:translate(-80px,-120px) rotate(-15deg);opacity:1}30%{transform:translate(-140px) rotate(0);opacity:1}45%{transform:translate(20px,-120px) rotate(12deg);opacity:1}60%{transform:translate(120px) rotate(0);opacity:1}78%{transform:translate(350px,-150px) rotate(18deg);opacity:1}to{transform:translate(100vw,-30px) rotate(25deg);opacity:0}}@keyframes characterBounceExitMobile{0%{transform:translate(0) rotate(0);opacity:1}15%{transform:translate(-30px,-50px) rotate(-8deg);opacity:1}30%{transform:translate(-50px) rotate(0);opacity:1}45%{transform:translate(10px,-50px) rotate(6deg);opacity:1}60%{transform:translate(50px) rotate(0);opacity:1}78%{transform:translate(120px,-60px) rotate(10deg);opacity:1}to{transform:translate(100vw,-15px) rotate(15deg);opacity:0}}.hero-banner-custom--dismissed{display:none!important}body.hero-overlay-mode .pickup-banner{margin-top:0!important}
/*# sourceMappingURL=/cdn/shop/t/6/assets/section-hero-banner-custom.css.map */