@charset "utf-8";

#opening{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; box-sizing: border-box; overflow: hidden; z-index: -9999; }
#opening.hide{ display: none; }
#opening.show{ z-index: 5000; }
#opening .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#opening .bg01{ background-color: #e85298; }
#opening .bg02{ background-color: #f19500; top: 33.33%; transform: skewY(5deg); }
#opening .bg03{ background-color: #00ab9e; top: 66.66%; transform: skewY(-5deg); }
#opening .overlay{ position: absolute; left: 50%; top: 50%; width: calc(100% - 30px); height: calc(100% - 30px); background-color: #f6f6f1; transform: translate(-50%,-50%); border-radius: 25px; }
#opening .item-body{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 504px; width: 100%; z-index: 10; }
#opening .item-body .inner-body{ width: 100%; padding-top: 149.0079%; }
#opening .bubble01{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 60.2474%; }
#opening .deco,
#opening .txt{ position: absolute; left: 0; top: 0; }
#opening .deco01{ width: 23.8095%; margin: 32.7742% 0 0 8.28%; }
#opening .deco02{ width: 18.8492%; margin: 34.23% 0 0 73.8997%; }
#opening .deco03{ width: 35.3175%; margin: 126.3003% 0 0 10.1311%; }
#opening .deco04{ width: 27.5794%; margin: 119.623% 0 0 64.8378%; }
#opening .txt01{ width: 68.254%; margin: 11.6341% 0 0 15.8516%; }
#opening .txt02{ width: 52.1825%; margin: 43.6974% 0 0 23.9590%; }





/*animation*/
/*----------------------------------*/
#opening.show{ transform: translateY(-100%); transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1); transition-delay: 4.2s; }
#opening .bg02{ transform: rotate(50deg) skewY(5deg) translateY(150%); }
#opening.show .bg02{ transform: skewY(5deg) translateY(0); transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1); }
#opening .bg03{ transform: rotate(-50deg) skewY(-5deg) translateY(150%); }
#opening.show .bg03{ transform: skewY(-5deg) translateY(0); transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1); transition-delay: 0.1s; }
#opening .bubble01{ transform: translate(-50%,-50%) scale(0.4,0); transform-origin: center bottom; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); transition-delay: 1s; }
#opening.show .bubble01{ transform: translate(-50%,-50%) scale(1,1); }
#opening.show .bubble01.hide{ transform: translate(-50%,-50%) scale(0,0); transition: transform 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045);}
#opening .overlay{ transform: translate(-50%,-50%) scale(0); }
#opening.show .overlay{ transform: translate(-50%,-50%) scale(1); transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1); transition-delay: 2.5s; }
#opening .deco{ transform: scale(0); }
#opening.show .deco{ transform: scale(1); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); }
#opening.show .deco01{ transition-delay: 2.8s; }
#opening.show .deco02{ transition-delay: 2.9s; }
#opening.show .deco03{ transition-delay: 3s; }
#opening.show .deco04{ transition-delay: 3.1s; }
#opening .txt01{ transform: translateY(50px); opacity: 0; }
#opening.show .txt01{ transform: translateY(0); opacity: 1; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity 0.5s; transition-delay: 2.8s; }
#opening .txt02{ transform: translateY(50px); opacity: 0; }
#opening.show .txt02{ transform: translateY(0); opacity: 1; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), opacity 0.5s; transition-delay: 3.3s; }