<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
#no_scroll{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: rgba(0,0,0,0);

}



.startPoint {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 100px;
    bottom: 100px;
    z-index: 899998989;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}


#section01 {
    background: #ffb22e;
    height: 1650px;
}


#section01 .main_title_circle {
    position: relative;
}

#section01 .circle01 {
    position: absolute;
    top: 0;
    left: 584px;
    transform:scale(0);
    transition: all 0.4s 1s;
}

#section01.on .circle01 {
    transform:scale(1);

    animation: jello-horizontal 0.9s 1.4s infinite;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

#section01 .circle02 {
    position: absolute;
    top: 0;
    left: 284px;
    transform:scale(0);
    transition: all 0.4s 1s;
}

#section01.on .circle02 {
    transform:scale(1);

    animation: jello-horizontal 0.9s 1.4s infinite;
}


@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}



/*#section01.on .circle02 {*/
/*    opacity: 1;*/
/*    animation: bounce-top .9s both;*/
/*}*/

/*@keyframes bounce-top {*/
/*    0% {*/
/*        transform: translateY(-45px);*/
/*        animation-timing-function: ease-in;*/
/*        opacity: 1*/
/*    }*/
/*    24% {*/
/*        opacity: 1*/
/*    }*/
/*    40% {*/
/*        transform: translateY(-24px);*/
/*        animation-timing-function: ease-in*/
/*    }*/
/*    65% {*/
/*        transform: translateY(-12px);*/
/*        animation-timing-function: ease-in*/
/*    }*/
/*    82% {*/
/*        transform: translateY(-6px);*/
/*        animation-timing-function: ease-in*/
/*    }*/
/*    93% {*/
/*        transform: translateY(-4px);*/
/*        animation-timing-function: ease-in*/
/*    }*/
/*    25%, 55%, 75%, 87% {*/
/*        transform: translateY(0);*/
/*        animation-timing-function: ease-out*/
/*    }*/
/*    100% {*/
/*        transform: translateY(0);*/
/*        animation-timing-function: ease-out;*/
/*        opacity: 1*/
/*    }*/
/*}*/

#section01 .main-title {
    display: flex;
    justify-content: center;
}

#section01 .main-title .title {
    margin-top: 15px;

    opacity: 0;
    transform:translateY(30px);
    transition: all 1s 0.2s;
}

#section01.on .main-title .title {
    opacity: 1;
    transform:translateY(0px);
}



/*#section01 .title_menu {*/
/*    position: absolute;*/
/*    top: 82px;*/
/*    right: 48px;*/
/*    width: 163px;*/
/*    height: 242px;*/
/*    background: #708bff;*/
/*    border-radius: 25px;*/
/*}*/

#section01  .menu {
    position: absolute;
    top: 84px;
    right: 48px;
    width: 164px;
    height: 239px;
    background: #708bff;
    border-radius: 20px;
    padding-top: 12px;
    display: none;
}

#section01  .menu &gt; div {
    margin-bottom: 18px;
    margin-left: 18px;
}

#section01  .menu .menu_01 {
    margin-top: 15px;
}

#section01 .main-character {
    width: 510px;
    height: 510px;
    border-radius: 50%;
    margin: -100px auto 200px auto;
    position: relative;
    overflow: hidden;
    border: 4px solid #ffb22e;

    opacity: 1;
    transform:translateY(600px);
    transition: all 0.8s;
    /*animation: ease-out 1s;*/
}

#section01.on .main-character {
    opacity: 1;
    transform:translateY(0px);
}

#section01 .main-character .main_moon2 {
    position: absolute;
    left: 42px;
    top: 37px;

    transform:scale(0);
    transition: all 0.8s 0.4s;


}

#section01.on .main-character .main_moon2 {
    transform:scale(1);
}



/*#section01 .main-character .hamster {*/
/*    transform: translate(-316px, 138px);*/
/*    transition: all 1s;*/
/*}*/

/*#section01.on .main-character .hamster {*/
/*    transform: translate(0, 0);*/

/*}*/


#section01 .main-character .hamster {
    position: absolute;
    left: -22px;
    bottom: -75px;

    opacity: 1;
    transform:translate(-316px, 138px);
    transition: all 0.8s 0.7s;
}

#section01.on .main-character .hamster {
    opacity: 1;
    transform:translate(0px);
}

#section01 .main-character .hamster .main-hamster {
    position: relative;
    z-index: 999;
}

#section01 .prototype .prototype_btn {
    cursor: pointer;
}






#section01 .main-character .hamster .hand {
    position: absolute;
    left: 363px;
    bottom: 190px;
    z-index: 888;
    /*opacity: 1;*/
    /*transform:translate(-316px, 138px);*/
    /*transition: all 0.7s 0.6s;*/
}

#section01.on .main-character .hand {
    /*opacity: 1;*/
    /*transform:translate(0px);*/

    -webkit-animation: shake-left 1.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
    animation: shake-left 1.8s cubic-bezier(0.23, 0.15, 0.08, 0.89) infinite;
}

@keyframes shake-left {
    /*0%,*/
    100% {
        transform: rotate(0deg);
        transform-origin: 0 50%;
    }
    10% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-16deg);
        transform: rotate(-16deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
    }
    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    90% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
}






#section01 .sub_title {
    display: flex;
    justify-content: space-between;
    /*margin-top: 30px;*/
    /*background-color: red;*/
    width: 1810px;
    margin: 40px auto 0 auto;
}

#section01 .sub_btn {
    text-align: right;
    /*margin-right:20px;*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: flex-end;*/
}

#section01 .sub_btn .ux_btn {
    margin-bottom: 10px;
    cursor: pointer;
}

#section01 .sub_btn .ui_btn {
    cursor: pointer;
}

#section01 .prototype {
    position: absolute;
    top: 420px;
    right: 320px;

    opacity: 0;
    transform:translateY(30px);
    transition: all 1s 0.2s;
}

#section01.on .prototype {
    opacity: 1;
    transform:translateY(0)
}



#section01 .prototype .prototype_font {
    position: absolute;
    top: 21px;
    left: 21px;
}

#section01 .prototype .prototype_Arrow {
    position: absolute;
    top: 17px;
    left: 140px;
}

#section01.on .prototype .prototype_Arrow {
    animation: blink-2 1.4s infinite;
}

@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}




#section01 .main_font_03 {
    position: absolute;
    top: 890px;
    right: 55px;
}

#section01 .tool {
    position: absolute;
    top: 764px;
    left: 55px;
}

#section01 .overview .overview_text {
    position: relative;
    z-index: 999;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.4s;
}

#section01 .overview.on .overview_text {
    opacity: 1;
    transform: translateY(0);
}

#section01 .overview .overview_Highlighter {
    position: absolute;
    top: 304px;
    left: 1022px;
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 0.8s;
}

#section01 .overview.on .overview_Highlighter {
    clip-path: inset(0% 0% 0% 0%);
}


#section01 .overview {
    height: 570px;
    background: url("../imgs/section01/back_yellow.jpg") no-repeat bottom;
    text-align: center;
    position: relative;
    /*border-radius: 600px 600px 0 0 ;*/
    /*padding: 200px 0 ;*/
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s;
}

#section01 .overview.on {
    transform: translateY(0);
    opacity: 1;
}


#section01 .overview .overview_font {
    padding-top: 162px;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.4s;
}


#section01 .overview.on .overview_font {
    opacity: 1;
    transform: translateY(0);
}


#section01 .overview .star {
    position: absolute;
    left: 55%;
    top: 148px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.4s;
}

#section01 .overview.on .star {
    transform: translateY(0px);
    opacity: 1;
}

#section01 .overview .star_img {
    animation: star 8s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }
}


#section01 .overview .star .star_num {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
}

/*#section01 .top {*/
/*    position: absolute;*/
/*    right: 35px;*/
/*    bottom: 260px;*/
/*}*/


#section02 {
    background: dodgerblue;
    /*height:11720px;*/
    height: 1900vh;
}

#section02 .trigger-this-02 {
    height: 100%;
    display: flex;
}

#section02 .fix-this-02 {
    width: 11720px;
    height: 100vh;
    background: #F8D12A;
}


#section02 .fix-this-02 .se02_inner {
    width: 11720px;
    height: 100vh;
    position: relative;
    display: flex;
}


#section02 .se02_cnts {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #F8D12A;
}


#section02 .se02_cnt01 {
    border-radius: 140px 0 0 0;
    background: #fff9ea;
}

#section02 .se02_cnt01 .theysay_text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt01 .theysay_phone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99997;
}

#section02 .se02_cnt01 .phone_01 {
    position: absolute;
    left: 19%;
    top: -13%;
    /*transform:translate(-50%,-50%);*/
    z-index: 99999;

    opacity: 0;
    transform: translateY(40px);
    transition: all 1s;
}

#section02 .se02_cnt01.on .phone_01 {
    opacity: 1;
    transform: translateY(0);
}

#section02 .se02_cnt01 .theysay_phone .theysay_yellow_circle {
    transform: scale(0);
    transition: all 0.7s 0.5s;
}

#section02 .se02_cnt01.on .theysay_phone .theysay_yellow_circle {
    transform: scale(1);

}


#section02 .se02_cnt01 .theysay_blue_circle {
    position: absolute;
    left: 50%;
    top: 112%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt01 .theysay_rabbit {
    position: absolute;
    top: 18%;
    left: 72%;
    z-index: 99998;

    opacity: 0;
    transform: translateX(-300px);
    transition: all 1s 0.6s;
}

#section02 .se02_cnt01.on .theysay_rabbit {
    opacity: 1;
    transform: translateX(0px);
}


#section02 .se02_cnt01 .theysay_rat {
    position: absolute;
    top: 50%;
    left: -75px;
    z-index: 99998;

    opacity: 0;
    transform: translateX(300px);
    transition: all 1s 0.6s;
}

#section02 .se02_cnt01.on .theysay_rat {
    opacity: 1;
    transform: translateX(0px);
}


#section02 .se02_cnt01 .theysay_01 {
    position: absolute;
    top: 70px;
    left: 430px;
    transform: scale(0.8);
    transition: all 0.8s;
}

#section02 .se02_cnt01.on .theysay_01 {
    transform: scale(1);
}


#section02 .se02_cnt01 .theysay_02 {
    position: absolute;
    top: 520px;
    right: 300px;
    transform: scale(0.6);
    transition: all 0.8s;
}

#section02 .se02_cnt01.on .theysay_02 {
    transform: scale(1);
}


#section02 .se02_cnt01 .theysay_03 {
    position: absolute;
    top: 375px;
    left: 210px;
    transform: scale(0.6);
    transition: all 0.8s;
}

#section02 .se02_cnt01.on .theysay_03 {
    transform: scale(1);
}

#section02 .se02_cnt01 .theysay_04 {
    position: absolute;
    top: 650px;
    left: 400px;
    transform: scale(0.8);
    transition: all 0.8s;
}

#section02 .se02_cnt01.on .theysay_04 {
    transform: scale(1);
}

#section02 .se02_cnt01 .theysay_05 {
    position: absolute;
    top: 160px;
    right: 340px;
    transform: scale(0.8);
    transition: all 0.8s;
}

#section02 .se02_cnt01.on .theysay_05 {
    transform: scale(1);
}

#section02 .se02_cnt01 .theysay_deco01 {
    position: absolute;
    right: 250px;
    bottom: 110px;
}

#section02 .se02_cnt01 .theysay_deco04 {
    position: absolute;
    right: 160px;
    top: 230px;
}

#section02 .se02_cnt01 .theysay_deco02 {
    position: absolute;
    left: 320px;
    top: 230px;
}

#section02 .se02_cnt01 .theysay_deco03 {
    position: absolute;
    left: 180px;
    bottom: 230px;
}

#section02 .se02_cnt02 {
    width: 2530px;
}

#section02 .se02_cnt03 {
    width: 2380px;
    background: #f8d229;
}


#section02 .se02_cnt03 .star1-1 {
    position: absolute;
    top: 64px;
    left: 80px;

    /*opacity: 0;*/
    /*transform:translateX(30px);*/
    /*transition: all 1s;*/
}


#section02 .se02_cnt03 .star1-1 .num_star1-1 {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section02 .se02_cnt03 .num1-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#section02 .se02_cnt03 .star1-2 {
    position: absolute;
    top: 64px;
    left: 905px;
}

#section02 .se02_cnt03 .star1-2 .num_star1-2 {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section02 .se02_cnt03 .num1-2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#section02 .se02_cnt03 .star1-3 {
    position: absolute;
    top: 510px;
    left: 905px;
}

#section02 .se02_cnt03 .num1-3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt03 .star1-3 .num_star1-3 {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section02 .se02_cnt03 .cnt03_box {
    height: 956px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 {
    margin-right: 220px;
    position: relative;
    width: 606px;
    height: 852px;
    background: url("../imgs/section02/section02_03/br_box01.jpg") no-repeat center;

    opacity: 0;
    transform: translateX(30px);
    transition: all 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box01.on {
    opacity: 1;
    transform: translateX(0px);
}


#section02 .se02_cnt03 .cnt03_box .br_box01 .text1-1 .br_text_1-1 {
    position: absolute;
    left: 50%;
    top: 81%;
    transform: translate(-50%, -50%);
    z-index: 999;
}


#section02 .se02_cnt03 .cnt03_box .br_box01 .graph_text {
    position: absolute;
    left: 142px;
    top: 188px;
    /*transform:translate(-50%,-50%);*/
    z-index: 999;

    opacity: 0;
    transform: translateY(5px);
    transition: all 1s 0.6s;

}

#section02 .se02_cnt03 .cnt03_box .br_box01.on .graph_text {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt03 .cnt03_box .br_box01 .text_2015-2020 {
    position: absolute;
    left: 50%;
    top: 61.5%;
    transform: translate(-50%, -50%);
}

/*#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 {*/
/*    position: absolute;*/
/*    left:50%;*/
/*    top:39.9%;*/
/*    transform:translate(-50%,-50%);*/
/*    z-index: 997;*/
/*}*/

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 {
    text-align: end;
    display: flex;
    position: absolute;
    top: 215px;
    left: 132px;
    width: 347px;
    justify-content: space-between;
    z-index: 999;
    align-items: flex-end;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar01 {
    width: 61px;
    height: 106px;
    overflow: hidden;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar01 &gt; img {
    transform: translateY(106px);
    transition: all 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar02 {
    width: 61px;
    height: 207px;
    overflow: hidden;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar02 &gt; img {
    transform: translateY(106px);
    transition: all 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar03 {
    width: 61px;
    height: 177px;
    overflow: hidden;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar03 &gt; img {
    transform: translateY(177px);
    transition: all 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar04 {
    width: 68px;
    height: 278px;
    overflow: hidden;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 .bar04 &gt; img {
    transform: translateY(278px);
    transition: all 1s;
}


#section02 .se02_cnt03 .cnt03_box .br_box01.on .graph1-1 &gt; div &gt; img {
    transform: translateY(0);
}


/*#section02 .se02_cnt03 .cnt03_box .br_box01 .graph1-1 &gt; div {*/
/*    vertical-align: bottom;*/
/*}*/


#section02 .se02_cnt03 .cnt03_box .br_box01 .illust1-1 {
    position: absolute;
    left: 29%;
    top: 27%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .title1-1 .title_1-1 {
    position: absolute;
    left: 64px;
    top: 45px;
    z-index: 999;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .title1-1 .Highlighter_blue1-1 {
    position: absolute;
    left: 307px;
    top: 40px;
    z-index: 996;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .ham1-1 {
    position: absolute;
    left: 430px;
    top: 210px;
    z-index: 999;

    transform: scale(0);
    transition: all 0.3s 0.8s;
}

#section02 .se02_cnt03 .cnt03_box .br_box01.on .ham1-1 {
    transform: scale(1);

    animation: ham 1.2s 1.2s infinite;
}

@keyframes ham {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}


#section02 .se02_cnt03 .cnt03_box .br_box01 .text1-1 .Highlighter1-1 &gt; div {
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 0.7s;
}

#section02 .se02_cnt03 .cnt03_box .br_box01.on .text1-1 .Highlighter1-1 &gt; div {
    clip-path: inset(0% 0% 0% 0%);
}


#section02 .se02_cnt03 .cnt03_box .br_box01 .text1-1 .Highlighter1-1_01 {
    position: absolute;
    right: 60px;
    bottom: 178px;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .text1-1 .Highlighter1-1_02 {
    position: absolute;
    left: 60px;
    bottom: 144px;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .text1-1 .Highlighter1-1_03 {
    position: absolute;
    right: 60px;
    bottom: 111px;
}

#section02 .se02_cnt03 .cnt03_box .br_box01 .text1-1 .Highlighter1-1_04 {
    position: absolute;
    left: 60px;
    bottom: 78px;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 {
    position: relative;
    width: 1114px;
    height: 406px;
    margin-bottom: 42px;
    background: url("../imgs/section02/section02_03/br_box02.jpg") no-repeat center;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 {
    opacity: 0;
    transform: translateX(30px);
    transition: all 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on {
    opacity: 1;
    transform: translateX(0px);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .title1-2 {
    padding-top: 46px;
    margin-left: 72px;
    margin-bottom: 60px;
    position: relative;
    display: flex;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .title1-2 .title_1-2 {
    position: relative;
    z-index: 9999;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .title1-2 .Highlighter_blue1-2 {
    position: absolute;
    left: 198px;
    top: 41px;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .txt_box {
    display: flex;
    margin-left: 80px;
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .illust1-2 {
    margin-right: 48px;

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.5s;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box02 .illust1-2 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .text1-2 {
    position: relative;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .text1-2 .br_text_1-2 {
    position: relative;
    margin-top: 40px;
    z-index: 99999;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .text1-2 .Highlighter1-2_01 {
    position: absolute;
    top: 50px;
    left: 0;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .text1-2 .Highlighter1-2_02 {
    position: absolute;
    top: 83px;
    left: 0;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box02 .text1-2 .Highlighter1-2 &gt; div {
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box02 .text1-2 .Highlighter1-2 &gt; div {
    clip-path: inset(0% 0% 0% 0%);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 {
    position: relative;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .title1-3 {
    position: absolute;
    top: 0;
    left: 0;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .title1-3 .title_1-3 {
    position: absolute;
    left: 64px;
    top: 45px;
    z-index: 999;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .title1-3 .Highlighter_blue1-3 {
    position: absolute;
    left: 209px;
    top: 41px;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust1-3 {
    position: absolute;
    top: 114px;
    left: 120px;

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.5s;
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .illust1-3 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .text1-3 .br_text_1-3 {
    position: absolute;
    top: 164px;
    right: 75px;
    z-index: 999;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .text1-3 .Highlighter1-3 {
    position: absolute;
    top: 0;
    right: 0;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .text1-3 .Highlighter1-3 .Highlighter1-3_01 {
    position: absolute;
    top: 240px;
    right: 73px;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .text1-3 .Highlighter1-3 .Highlighter1-3_02 {
    position: absolute;
    top: 273px;
    right: 502px;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .text1-3 .Highlighter1-3 &gt; div {
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .text1-3 .Highlighter1-3 &gt; div {
    clip-path: inset(0% 0% 0% 0%);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust_1-3 {
    position: absolute;
    top: 0;
    left: -25px;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust_1-3 .rabbit1-3 {
    position: absolute;
    top: 115px;
    left: 165px;

    transform: scale(0);
    transition: all 0.5s 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .illust_1-3 .rabbit1-3 {
    transform: scale(1);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust_1-3 .rat1-3 {
    position: absolute;
    top: 90px;
    left: 320px;

    transform: scale(0);
    transition: all 0.5s 1s;
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .illust_1-3 .rat1-3 {
    transform: scale(1);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust_1-3 .ham1-3 {
    position: absolute;
    top: 210px;
    left: 400px;

    transform: scale(0);
    transition: all 0.5s 1s
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .illust_1-3 .ham1-3 {
    transform: scale(1);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust_1-3 .bird1-3 {
    position: absolute;
    top: 260px;
    left: 152px;

    transform: scale(0);
    transition: all 0.5s 1s
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .illust_1-3 .bird1-3 {
    transform: scale(1);
}


#section02 .se02_cnt03 .cnt03_box .br_box02-03 .br_box03 .illust_1-3 .gosum1-3 {
    position: absolute;
    top: 310px;
    left: 310px;

    transform: scale(0);
    transition: all 0.5s 1s
}

#section02 .se02_cnt03 .cnt03_box .br_box02-03.on .br_box03 .illust_1-3 .gosum1-3 {
    transform: scale(1);
}


#section02 .se02_cnt04 {
    width: 2520px;
    background: #ffb22e;
}

#section02 .se02_cnt04 .back02 {
    position: absolute;
    top: 0;
    right: 0;
}

#section02 .se02_cnt04 .cnt04_box {
    position: absolute;
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%, -50%);*/
    left: 336px;
    top: 53px;
    display: flex;
}


#section02 .se02_cnt04 .cnt04_box .note_01 {
    margin-right: 120px;
    position: relative;

    opacity: 0;
    transform: translateX(50px);
    transition: all 1s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 {
    opacity: 1;
    transform: translateX(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_02 {
    margin-right: 70px;
    position: relative;
    width: 818px;
    height: 851px;
    background: url("../imgs/section02/section02_04/note.jpg") no-repeat center;

    opacity: 0;
    transform: translateX(50px);
    transition: all 1s 0.6s;
}

#section02 .se02_cnt04.on .cnt04_box .note_02 {
    opacity: 1;
    transform: translateX(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .star2-1 {
    position: absolute;
    top: 54px;
    left: 95px;
}


#section02 .se02_cnt04 .cnt04_box .note_01 .star2-1 .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section02 .se02_cnt04 .cnt04_box .note_01 .star2-1 .num2-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .text {
    position: absolute;
    top: 68px;
    left: 112px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .text {
    opacity: 1;
    transform: translateY(0px);
}


/*#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph2-1 {*/
/*    position: absolute;*/
/*    top: 171px;*/
/*    left: 112px;*/
/*}*/

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph01 .bar01 {
    position: absolute;
    top: 171px;
    left: 112px;

    width: 236px;
    height: 48px;
    border-radius: 50px;
    overflow: hidden;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph01 .bar01 &gt; img {
    transform: translateX(-236px);
    transition: all 1s 0.2s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .graph01 .bar01 &gt; img {
    transform: translateX(0);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph02 .bar02 {
    position: absolute;
    top: 232px;
    left: 112px;

    width: 213px;
    height: 39px;
    border-radius: 50px;
    overflow: hidden;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph02 .bar02 &gt; img {
    transform: translateX(-213px);
    transition: all 1s 0.3s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .graph02 .bar02 &gt; img {
    transform: translateX(0);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph03 .bar03 {
    position: absolute;
    top: 284px;
    left: 112px;

    width: 182px;
    height: 39px;
    border-radius: 50px;
    overflow: hidden;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph03 .bar03 &gt; img {
    transform: translateX(-182px);
    transition: all 1s 0.4s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .graph03 .bar03 &gt; img {
    transform: translateX(0);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph04 .bar04 {
    position: absolute;
    top: 336px;
    left: 112px;

    width: 134px;
    height: 39px;
    border-radius: 50px;
    overflow: hidden;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .graph04 .bar04 &gt; img {
    transform: translateX(-134px);
    transition: all 1s 0.5s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .graph04 .bar04 &gt; img {
    transform: translateX(0);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .text01 {
    position: absolute;
    top: 186px;
    left: 268px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s 0.7s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .text01 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .text02 {
    position: absolute;
    top: 244px;
    left: 253px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s 0.7s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .text02 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .text03 {
    position: absolute;
    top: 296px;
    left: 226px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s 0.7s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .text03 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .text04 {
    position: absolute;
    top: 348px;
    left: 179px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s 0.7s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .text04 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .Sticker01 {
    position: absolute;
    top: 126px;
    left: 86px;
    z-index: 999;

    transform: scale(0);
    transition: all 0.6s 0.8s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .Sticker01 {
    transform: scale(1);

    /*animation: ham 1.2s 1.2s infinite;*/
}

/*@keyframes ham {*/
/*    0% {*/
/*        transform: scale3d(1, 1, 1);*/
/*    }*/
/*    30% {*/
/*        transform: scale3d(1.25, 0.75, 1);*/
/*    }*/
/*    40% {*/
/*        transform: scale3d(0.75, 1.25, 1);*/
/*    }*/
/*    50% {*/
/*        transform: scale3d(1.15, 0.85, 1);*/
/*    }*/
/*    65% {*/
/*        transform: scale3d(0.95, 1.05, 1);*/
/*    }*/
/*    75% {*/
/*        transform: scale3d(1.05, 0.95, 1);*/
/*    }*/
/*    100% {*/
/*        transform: scale3d(1, 1, 1);*/
/*    }*/
/*}*/


#section02 .se02_cnt04 .cnt04_box .note_01 .text2-1 .Sticker02 {
    position: absolute;
    top: 140px;
    left: 420px;

    transform: scale(0);
    transition: all 0.6s 0.8s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-1 .Sticker02 {
    transform: scale(1);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .star2-2 {
    position: absolute;
    top: 432px;
    left: 95px;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .star2-2 .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section02 .se02_cnt04 .cnt04_box .note_01 .star2-2 .num2-2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt04 .cnt04_box .note_01 .text2-2 {
    position: absolute;
    top: 448px;
    left: 93px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .text2-2 {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_01 .deco_line_p {
    position: absolute;
    top: 61px;
    left: 610px;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .deco_pur {
    position: absolute;
    top: 96px;
    left: 572px;
}

#section02 .se02_cnt04 .cnt04_box .note_01 .deco_y {
    position: absolute;
    top: 494px;
    left: 502px;

    transform: scale(0);
    transition: all 0.6s 0.8s;
}

#section02 .se02_cnt04.on .cnt04_box .note_01 .deco_y {
    transform: scale(1);
}


#section02 .se02_cnt04 .cnt04_box .note_02 .star2-3 {
    position: absolute;
    top: 54px;
    left: 95px;
}

#section02 .se02_cnt04 .cnt04_box .note_02 .star2-3 .num2-3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt04 .cnt04_box .note_02 .star2-3 .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section02 .se02_cnt04 .cnt04_box .note_02 .text2-3 .text {
    position: absolute;
    top: 68px;
    left: 121px;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s 0.7s;
}

#section02 .se02_cnt04.on .cnt04_box .note_02 .text2-3 .text {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt04 .cnt04_box .note_02 .text2-3 .Sticker03 {
    position: absolute;
    top: 131px;
    left: 131px;

    transform: scale(0);
    transition: all 0.6s 1.4s;
}

#section02 .se02_cnt04.on .cnt04_box .note_02 .text2-3 .Sticker03 {
    transform: scale(1);
}


#section02 .se02_cnt04 .cnt04_box .note_02 .text2-3 .Sticker04 {
    position: absolute;
    top: 135px;
    left: 227px;

    transform: scale(0);
    transition: all 0.6s 1.4s;
}

#section02 .se02_cnt04.on .cnt04_box .note_02 .text2-3 .Sticker04 {
    transform: scale(1);
}


#section02 .se02_cnt04 .cnt04_box .note_02 .memo .memo01 {
    position: absolute;
    top: 370px;
    left: 140px;
    opacity: 0;
}

#section02 .se02_cnt04 .cnt04_box .note_02 .memo .memo02 {
    position: absolute;
    top: 372px;
    left: 426px;
    opacity: 0;
}

#section02 .se02_cnt04 .cnt04_box .note_02 .memo .memo03 {
    position: absolute;
    top: 540px;
    left: 284px;
    opacity: 0;
}

#section02 .se02_cnt04 .cnt04_box .note_02 .deco_y {
    position: absolute;
    top: 121px;
    left: 621px;

    transform: scale(0);
    transition: all 0.6s 0.8s;
}

#section02 .se02_cnt04 .cnt04_box .note_02 .deco_y {
    transform: scale(1);
}


#section02 .se02_cnt04 .cnt04_box .note_02 .deco_line_b {
    position: absolute;
    top: 711px;
    left: 120px;
}

#section02 .se02_cnt04 .cnt04_box .note_02 .deco_per {
    position: absolute;
    top: 671px;
    left: 92px;
}


#section02 .se02_cnt05 {
    background: #fff9ea;
}

#section02 .se02_cnt05 .summary_title {
    text-align: center;
    margin: 60px 0 24px 0;

    opacity: 0;
    transform: translateY(10px);
    transition: all 1s;
}

#section02 .se02_cnt05 .summary_title.on {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt05 .summary_text {
    text-align: center;
}

#section02 .se02_cnt05 .summary_text &gt; div {
    margin-bottom: 30px;
}

#section02 .se02_cnt05 .summary_text .summary01 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#section02 .se02_cnt05 .summary_text .summary02 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.4s;
}

#section02 .se02_cnt05 .summary_text .summary03 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.8s;
}

#section02 .se02_cnt05 .summary_text .summary04 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 1.2s;
}

#section02 .se02_cnt05 .summary_text.on &gt; div {
    opacity: 1;
    transform: translateY(0px);
}


#section02 .se02_cnt05 .mouse {
    position: absolute;
    left: 49%;
    top: 83%;

    animation: mouse 1.5s ease-in-out infinite both;
}

@keyframes mouse {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    10% {
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    17% {
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    33% {
        transform: scale(0.87);
        animation-timing-function: ease-in;
    }
    45% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}


#section02 .se02_cnt05 .deco .deco_line_p {
    position: absolute;
    bottom: 91px;
    right: 181px;
}

#section02 .se02_cnt05 .deco .deco_line_y {
    position: absolute;
    top: 121px;
    left: 131px;
}

#section02 .se02_cnt05 .deco .deco01 {
    position: absolute;
    top: 100px;
    right: 290px;
}

#section02 .se02_cnt05 .deco .deco02 {
    position: absolute;
    top: 211px;
    right: 151px;
}

#section02 .se02_cnt05 .deco .deco03 {
    position: absolute;
    bottom: 110px;
    left: 210px;
}

#section02 .se02_cnt05 .deco &gt; div {
    transform: scale(0);
    transition: all 0.4s 1.2s;
}

#section02 .se02_cnt05 .deco.on &gt; div {
    transform: scale(1);
}


#section02 .se02_cnts:nth-child(even) {

}

#section02 .se02_cnt02 .br_img {
    position: absolute;
    right: -450px;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section02 .se02_cnt02 .cnt_02_title {
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    transform: translateX(50px);
    transition: all 1s 0.1s;

}

#section02 .se02_cnt02 .cnt_02_title.on {
    opacity: 1;
    transform: translateY(0);
}

#section02 .se02_cnt02 .Background_text {
    position: absolute;
    top: 305px;
    left: 560px;
}


#section02 .se02_cnt02 .Research_text {
    position: absolute;
    top: 450px;
    left: 440px;
}

#section02 .se02_cnt02 .background_sub_text {
    position: absolute;
    top: 600px;
    left: 1002px;
}

#section02 .se02_cnt02 .num02 {
    position: absolute;
    top: 305px;
    left: 470px;
}

#section02 .se02_cnt02 .cnt_02_deco01 {
    position: absolute;
    top: 750px;
    left: 380px;
}

#section02 .se02_cnt02 .cnt_02_deco01 .cls-3 {
    stroke-dashoffset: 470;
    stroke-dasharray: 470;
}

#section02 .se02_cnt02.on .cnt_02_deco01 .cls-3 {
    animation: line01 1.5s 1 forwards;

}

@keyframes line01 {
    100% {
        stroke-dashoffset: 0;
        /*stroke-dasharray: 0;*/

    }

}


#section02 .se02_cnt02 .cnt_02_deco02 {
    position: absolute;
    top: 700px;
    left: 1260px;
}


#section02 .se02_cnt02 .cnt_02_deco03 {
    position: absolute;
    top: 770px;
    left: 1150px;
}

#section02 .se02_cnt02 .cnt_02_deco04 {
    position: absolute;
    top: 35px;
    left: 1080px;
}


#section03 {
    background: #f8d229;
    height: 1840px;
}

#section03 .ivory_back {
    position: relative;
    width: 1920px;
    height: 400px;
    background: #fff9ea;
    border-radius: 0 0 150px 150px;
}

/*#section03 .ivory_back .first_text {*/
/*    position: absolute;*/
/*    left:50%;*/
/*    top:39%;*/
/*    transform:translate(-50%,-50%);*/
/*}*/

#section03 .first_text {
    position: absolute;
    left: 630px;
    top: 19%;

    opacity: 0;
    transition: all 1s;
    transform: translateY(30px);
}

#section03.on .first_text {
    opacity: 1;
    transform: translateY(0px);
}


#section03 .persona_title {
    position: relative;

    opacity: 0;
    transition: all 1s 0.5s;
    transform: translateY(30px);
}

#section03.on .persona_title {
    opacity: 1;
    transform: translateY(0px);
}


#section03 .persona_title .persona_text {
    margin: 120px 0 150px 135px;
    z-index: 99999;
    position: relative;
}

#section03 .persona_title .line {
    position: absolute;
    top: 67px;
    left: 281px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.8s 1s;
}

#section03.on .persona_title .line {
    clip-path: inset(0% 0% 0% 0%);
}



#section03 .persona_title .highlight01 {
    position: absolute;
    top: 43px;
    left: 839px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 0.8s;
}

#section03.on .persona_title .highlight01 {
    clip-path: inset(0% 0% 0% 0%);
}


#section03 .persona_title .highlight02 {
    position: absolute;
    top: 79px;
    left: 859px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 1s;
}

#section03.on .persona_title .highlight02 {
    clip-path: inset(0% 0% 0% 0%);
}


#section03 .persona_title .small_star {
    position: absolute;
    top: 5px;
    left: 819px;
}

#section03 .big_star {
    position: absolute;
    top: 448px;
    right: 121px;

    opacity: 0;
    transition: all 1s 0.5s;
    transform: translateY(30px);
}

#section03.on .big_star {
    opacity: 1;
    transform: translateY(0px);

    animation: jello-horizontal 1.2s both infinite;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}


#section03 .persona_box {
    text-align: center;

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 1s;
}

#section03.on .persona_box {
    opacity: 1;
    transform: translateY(0px);
}

#section03 .bubble .bubble_text {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 1s;
}

#section03.on .bubble .bubble_text {
    opacity: 1;
    transform: translateY(0px);
}


#section03 .bubble .bubble_text {
    position: absolute;
    top: 1050px;
    left: 690px;
    z-index: 999;
}

#section03 .bubble .highlight03 {
    position: absolute;
    top: 1060px;
    left: 700px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 1.4s;
}

#section03.on .bubble .highlight03 {
    clip-path: inset(0% 0% 0% 0%);
}


#section03 .bubble .highlight04 {
    position: absolute;
    top: 1087px;
    left: 689px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 1.6s;
}

#section03.on .bubble .highlight04 {
    clip-path: inset(0% 0% 0% 0%);
}


#section03 .deco01 {
    position: absolute;
    top: 1027px;
    right: 202px;

    animation: star 3s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section04 {
    background-color: #708bff;
    height: 2400px;
    border-radius: 150px 150px 150px 150px;

    opacity: 1;
    transform: translateY(50px);
    transition: all 1s;
}

#section04.on {
    opacity: 1;
    transform: translateY(0px);
}


/*#section04 .title {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*}*/

#section04 .ps_text {
    text-align: center;
    margin: 100px 0 90px 0;

    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.2s;
}

#section04.on .ps_text {
    opacity: 1;
    transform: translateY(0px);
}


#section04 .star04 {
    position: absolute;
    top: 82px;
    left: 1150px;
    z-index: 999;

    transform: translateY(20px);
    transition: all 1s 0.2s;
}

#section04.on .star04 {
    opacity: 1;
    transform: translateY(0px);
}

#section04.on .star04 .star_num {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section04 .star04 .num_04 {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
}

#section04 .asis_tobe {
    position: relative;
    text-align: center;
    margin-bottom: 130px;
}

#section04 .asis_tobe .ps_box .asis_box {
    position: relative;
    z-index: 9999;
}

#section04 .asis_tobe .ps_box .asis_box .asis {
    position: absolute;
    top: 66px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    width: 1236px;
    justify-content: space-between;
}

#section04 .asis_tobe .ps_box .asis_box .asis .asis01 {
    transform: scale(0.6);
    transition: all 0.8s 0.3s;
}

#section04 .asis_tobe .ps_box .asis_box .asis .asis02 {
    transform: scale(0.6);
    transition: all 0.8s 0.4s;
}

#section04 .asis_tobe .ps_box .asis_box .asis .asis03 {
    transform: scale(0.6);
    transition: all 0.8s 0.5s;
}

#section04 .asis_tobe .ps_box .asis_box .asis .asis04 {
    transform: scale(0.6);
    transition: all 0.8s 0.6s;
}


#section04.on .asis_tobe .ps_box .asis_box .asis &gt; div {
    transform: scale(1);
}


#section04 .asis_tobe .ps_box .circle5 {
    margin: 40px 0 40px 0;
}

#section04 .asis_tobe .ps_box .tobe_box {
    position: relative;
    z-index: 9999;
}

#section04 .asis_tobe .ps_box .tobe_box .tobe {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    width: 1236px;
    justify-content: space-between;
}

#section04 .asis_tobe .ps_box .tobe_box .tobe .tobe04 {
    transform: scale(0.6);
    transition: all 0.8s 0.9s;
}

#section04 .asis_tobe .ps_box .tobe_box .tobe .tobe03 {
    transform: scale(0.6);
    transition: all 0.8s 1s;
}

#section04 .asis_tobe .ps_box .tobe_box .tobe .tobe02 {
    transform: scale(0.6);
    transition: all 0.8s 1.1s;
}

#section04 .asis_tobe .ps_box .tobe_box .tobe .tobe01 {
    transform: scale(0.6);
    transition: all 0.8s 1.2s;
}


#section04.on .asis_tobe .ps_box .tobe_box .tobe &gt; div {
    transform: scale(1);
}


#section04 .asis_tobe .ps_box .asis_text {
    position: absolute;
    top: 355px;
    left: 160px;

    opacity: 1;
    transform: translateX(-600px);
    transition: all 0.8s 0.4s;
}

#section04.on .asis_tobe .ps_box .asis_text {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .asis_tobe .ps_box .tobe_text {
    position: absolute;
    top: 460px;
    right: 160px;

    opacity: 1;
    transform: translateX(600px);
    transition: all 0.8s 0.5s;
}

#section04.on .asis_tobe .ps_box .tobe_text {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .keyword_title {
    text-align: center;
    margin-bottom: 100px;

    transform: translateY(20px);
    transition: all 1s;
}

#section04 .keyword_title.on {
    transform: translateY(0px);
}


#section04 .keyword_text {
    display: flex;
}


#section04 .keyword .keyword02 {
    position: absolute;
    bottom: 312px;
    left: 38%;
    /*transform:translate(-50%, -50%);*/

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s 0.4s;
}

#section04 .keyword.on .keyword02 {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .keyword .keyword01 {
    position: absolute;
    bottom: 312px;
    left: 328px;
    /*transform:translate(-50%, -50%);*/

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s 0.2s;
}

#section04 .keyword.on .keyword01 {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .keyword .keyword03 {
    position: absolute;
    bottom: 312px;
    left: 1135px;
    /*transform:translate(-50%, -50%);*/

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s 0.6s;
}

#section04 .keyword.on .keyword03 {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .keyword .line_l {
    position: absolute;
    bottom: 525px;
    left: 3px;

    width: 326px;
    height: 3px;
    overflow: hidden;
}

#section04 .keyword .line_l &gt; img {
    transform: translateX(-326px);
    transition: all 0.8s;
}

#section04 .keyword.on .line_l &gt; img {
    transform: translateX(0);
}


#section04 .keyword .line_r {
    position: absolute;
    bottom: 525px;
    right: 3px;

    width: 326px;
    height: 3px;
    overflow: hidden;
}

#section04 .keyword .line_r &gt; img {
    transform: translateX(-326px);
    transition: all 0.8s 0.8s;
}

#section04 .keyword.on .line_r &gt; img {
    transform: translateX(0);
}


#section04 .keyword .text {
    display: flex;
}

#section04 .keyword .text01 {
    position: absolute;
    left: 410px;
    bottom: 210px;

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.8s 0.3s;
}

#section04 .keyword.on .text01 {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .keyword .text02 {
    position: absolute;
    left: 820px;
    bottom: 210px;

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.8s 0.4s;
}

#section04 .keyword.on .text02 {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .keyword .text03 {
    position: absolute;
    right: 420px;
    bottom: 210px;

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.8s 0.5s;
}

#section04 .keyword.on .text03 {
    opacity: 1;
    transform: translateX(0px);
}


#section04 .deco01 {
    position: absolute;
    left: 190px;
    top: 80px;

    /*transform:scale(0);*/
    /*transition: all 1s 0.2s;*/
}

/*#section04.on .deco01 {*/
/*    transform:scale(1);*/
/*}*/


#section04 .deco02 {
    position: absolute;
    right: 190px;
    top: 140px;
}

#section04 .deco03 {
    position: absolute;
    left: 160px;
    top: 200px;
}

#section04 .deco04 {
    position: absolute;
    right: 140px;
    bottom: 930px;
}

#section04 .deco05 {
    position: absolute;
    left: 150px;
    bottom: 180px;
}


#section05 {
    background: #fff9ea;
    height: 2390px;
    border-radius: 150px 150px 0 0;

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section05.on {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .style_title {
    text-align: center;
    margin: 100px 0 100px 0;

    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#section05.on .style_title {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .star05 {
    position: absolute;
    top: 84px;
    left: 1076px;

    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#section05.on .star05 {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .star_num {
    animation: star 4s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}


#section05 .star05 .num_05 {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
}


#section05 .text {
    text-align: left;
    margin-left: 210px;
}

#section05 .color {
    margin-bottom: 150px;

    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s 0.3s;
}

#section05.on .color {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .typo {
    margin-bottom: 140px;

    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s 0.6s;
}

#section05.on .typo {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .text .character {
    margin-bottom: 240px;

    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s;
}

#section05 .text .character.on {
    opacity: 1;
    transform: translateY(0px);
}

#section05 .back_circle {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.4s;
}

#section05 .back_circle.on {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .sticker {
    position: absolute;
    bottom: 0;
    left: 0;
}

#section05 .sticker .hamster {
    position: absolute;
    bottom: 490px;
    left: 150px;
    transform: scale(0);
    transition: all 1s;
}


/*https://animista.net/play/attention/jello/jello-vertical*/

#section05 .sticker.on .hamster {
    transform: scale(1);
    /*animation: jello-vertical 1s 0.8s;*/
}


/*@keyframes jello-vertical {*/
/*    0% {*/
/*        transform: scale3d(1, 1, 1);*/
/*    }*/
/*    30% {*/
/*        transform: scale3d(0.75, 1.25, 1);*/
/*    }*/
/*    40% {*/
/*        transform: scale3d(1.25, 0.75, 1);*/
/*    }*/
/*    50% {*/
/*        transform: scale3d(0.85, 1.15, 1);*/
/*    }*/
/*    65% {*/
/*        transform: scale3d(1.05, 0.95, 1);*/
/*    }*/
/*    75% {*/
/*        transform: scale3d(0.95, 1.05, 1);*/
/*    }*/
/*    100% {*/
/*        transform: scale3d(1, 1, 1);*/
/*    }*/
/*}*/


#section05 .sticker .rainbow {
    position: absolute;
    bottom: 670px;
    left: 730px;

    transform: scale(0);
    transition: all 1s;
}

#section05 .sticker.on .rainbow {
    transform: scale(1);
}


#section05 .sticker .bird {
    position: absolute;
    bottom: 538px;
    left: 1000px;

    transform: scale(0);
    transition: all 1s 0.2s;
}

#section05 .sticker.on .bird {
    transform: scale(1);
}


#section05 .sticker .gosum {
    position: absolute;
    bottom: 500px;
    left: 1345px;

    transform: scale(0);
    transition: all 1s 0.4s;
}

#section05 .sticker.on .gosum {
    transform: scale(1);
}


#section05 .sticker .rat {
    position: absolute;
    bottom: 118px;
    left: 250px;

    transform: scale(0);
    transition: all 1s 0.6s;
}

#section05 .sticker.on .rat {
    transform: scale(1);
}


#section05 .sticker .light {
    position: absolute;
    bottom: 150px;
    left: 78px;

    transform: scale(0);
    transition: all 1s;
}

#section05 .sticker.on .light {
    transform: scale(1);
}


#section05 .sticker .pumkin {
    position: absolute;
    bottom: 80px;
    left: 633px;

    transform: scale(0);
    transition: all 1s;
}

#section05 .sticker.on .pumkin {
    transform: scale(1);
}


#section05 .sticker .rabbit {
    position: absolute;
    bottom: 60px;
    left: 850px;

    transform: scale(0);
    transition: all 1s 0.4s;
}

#section05 .sticker.on .rabbit {
    transform: scale(1);
}


#section05 .sticker .nut {
    position: absolute;
    bottom: 397px;
    left: 748px;

    transform: scale(0);
    transition: all 1s;
}

#section05 .sticker.on .nut {
    transform: scale(1);
}


#section05 .sticker .gini {
    position: absolute;
    bottom: 65px;
    left: 1318px;

    transform: scale(0);
    transition: all 1s 0.6s;
}

#section05 .sticker.on .gini {
    transform: scale(1);
}


#section05 .sticker .bag {
    position: absolute;
    bottom: 275px;
    left: 1638px;

    transform: scale(0);
    transition: all 1s;
}

#section05 .sticker.on .bag {
    transform: scale(1)
}


#section05 .sticker .cloud {
    position: absolute;
    bottom: 424px;
    left: 1268px;

    transform: scale(0);
    transition: all 1s;
}

#section05 .sticker.on .cloud {
    transform: scale(1)
}


#section05 .deco &gt; div {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.2s;
}

#section05 .deco.on &gt; div {
    opacity: 1;
    transform: translateY(0px);
}


#section05 .deco .deco01 {
    position: absolute;
    bottom: 870px;
    left: 170px;
}

#section05 .deco .deco02 {
    position: absolute;
    bottom: 761px;
    left: 71px;
}

#section05 .deco .deco03 {
    position: absolute;
    bottom: 823px;
    left: 1150px;
}


#section05 .deco .deco04 {
    position: absolute;
    bottom: 833px;
    left: 1310px;
}

#section05 .deco .deco05 {
    position: absolute;
    bottom: 793px;
    right: 99px;
}


#section06 {
    background: #ffb22e;
    /*height: 3764px;*/
    /*height: 4000px;*/
    height: 900vh;
}

#section06 .trigger-this-06 {
    height: 100%;
}

#section06 .fix-this-06 {
    width: 100vw;
    height: 100vh;
    position: relative;
}

#section06 .fc_title {
    text-align: center;
    margin: 120px 0 100px 0;

    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#section06.on .fc_title {
    opacity: 1;
    transform: translateY(0px);
}


#section06 .star_num {
    position: absolute;
    top: 34px;
    left: 1342px;

    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#section06 .trigger-this-06 .fix-this-06 .star_num .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}


#section06.on .star_num {
    opacity: 1;
    transform: translateY(0px);
}


#section06 .star_num .num {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
}

#section06 .flowchart_box {
    text-align: center;
    position: relative;
    background: #FFC561;
    width: 1720px;
    border-radius: 50px;
    margin: 0 auto;
    padding: 70px 0;

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.2s;
}

#section06.on .flowchart_box {
    opacity: 1;
    transform: translateY(0px);
}


#section06 .flowchart_text {
    /*position: absolute;*/
    /*left: 50%;*/
    /*top: 49%;*/
    /*transform: translate(-50%,-50%);*/

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s 0.4s;
}

#section06.on .flowchart_text {
    opacity: 1;
    transform: translateY(0px);
}


#section06 .flowchart_box .sticker01 {
    position: absolute;
    top: 103px;
    left: 466px;

    transform: scale(0);
    transition: all 0.4s 0.8s;
}

#section06.on .flowchart_box .sticker01 {
    transform: scale(1);

    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}






#section06 .sticker02 {
    position: absolute;
    top: 743px;
    left: 220px;

    transform: scale(0);
    transition: all 0.4s;
}

#section06 .sticker02.on {
    transform: scale(1);
}


#section06 .sticker03 {
    position: absolute;
    top: 835px;
    left: 697px;

    transform: scale(0);
    transition: all 0.4s;
}

#section06 .sticker03.on {
    transform: scale(1);
}


#section06 .circle {
    position: absolute;
    left: 50%;
    top: 1190px;
    transform: translateX(-50%) scale(0);
    width: 400px;
    height: 200px;
    background: #f8d229;
    border-radius: 50%;
}


#section06 .inner {
    width: 100vw;
    height: 1850px;
    position: absolute;
    left: 0;
    top: 856px;
    opacity: 0;

}

#section06 .design {
    height: 1540px;
    background: #f8d229;
    position: relative;
}

#section06 .design .sub {
    display: flex;
    width: 1780px;
    justify-content: space-between;
    margin: 0 auto 35px auto;

}

/*margin:40px auto 0 auto;*/

#section06 .design .sub &gt; div {
    margin-top: 40px;
}

#section06 .design .sub .sub02 {
    margin-left: 35px;
}


#section06 .design .back .circle_m {
    text-align: center;
    transform: scale(0.8);
    opacity: 0;
    animation: circle_m 2.5s linear infinite;
}

@keyframes circle_m {
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/*#section06 .design .back .circle_s {*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translate(-50%, -50%) scale(0.7);*/
/*    opacity: 0;*/
/*    animation: circle_s 3s linear infinite 0.5s;*/
/*}*/

/*@keyframes circle_s {*/
/*    0% {*/
/*        transform: translate(-50%, -50%) scale(0.7);*/
/*    }*/
/*    100% {*/
/*        opacity: 1;*/
/*        transform: translate(-50%, -50%) scale(1);*/
/*    }*/
/*}*/


#section06 .design .design_title {
    position: absolute;
    left: 50%;
    top: 17%;
    transform: translate(-50%, -50%);
}

#section06 .design .phone {
    position: absolute;
    left: 443px;
    top: 289px;
    /*left: 50%;*/
    /*top: 52%;*/
    /*transform: translate(-50%,-50%);*/

    opacity: 1;
    transform: translateY(650px);
    transition: all 0.8s 0.2s;
}

#section06 .design.on .phone {
    opacity: 1;
    transform: translateY(0px);
}


/*#section06 .design .sticker {*/
/*    opacity: 0;*/
/*}*/


#section06 .design .sticker .hamster {
    position: absolute;
    top: 388px;
    left: 726px;

    transform:scale(0);
    transition: all 0.6s 0.8s;
}

#section06 .design.on .sticker .hamster {
    transform:scale(1);

    animation: jello-horizontal 0.9s 1.4s;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}




#section06 .design .sticker .rat {
    position: absolute;
    top: 921px;
    left: 467px;

    transform:scale(0);
    transition: all 0.6s 0.8s;
}

#section06 .design.on .sticker .rat {
    transform:scale(1);

    animation: jello-horizontal 0.9s 1.4s;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}




#section06 .design .sticker .rabbit {
    position: absolute;
    top: 678px;
    left: 1257px;

    transform:scale(0);
    transition: all 0.6s 0.8s;
}

#section06 .design.on .sticker .rabbit {
    transform:scale(1);

    animation: jello-horizontal 0.9s 1.4s;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}



#section06 .design .a_deco &gt;div {
    transform:scale(0);
    transition: all 0.8s 1.2s;
}

#section06 .design.on .a_deco &gt;div {
    transform:scale(1);
}





#section06 .design .a_deco .line01 {
    position: absolute;
    top: 400px;
    left: 640px;
}

#section06 .design .a_deco .line02 {
    position: absolute;
    top: 981px;
    left: 361px;
}

#section06 .design .a_deco .line03 {
    position: absolute;
    top: 870px;
    left: 1385px;
}

#section06 .design .a_deco .go {
    position: absolute;
    top: 692px;
    left: 1425px;
}

#section06 .design .a_deco .deco01 {
    position: absolute;
    top: 875px;
    left: 319px;
}

#section06 .design .a_deco .deco05 {
    position: absolute;
    top: 1129px;
    left: 459px;
}

#section06 .design .a_deco .deco03 {
    position: absolute;
    top: 448px;
    left: 546px;
}

#section06 .design .a_deco .deco02 {
    position: absolute;
    top: 598px;
    left: 1547px;
}

#section06 .design .a_deco .deco04 {
    position: absolute;
    top: 558px;
    left: 1487px;
}

#section06 .design .a_deco .deco06 {
    position: absolute;
    top: 1038px;
    left: 1353px;
}


#section06 .onboarding {
    height: 310px;
    background: #f8d229;
    position: relative;
}

#section06 .onboarding .onboarding_inner {
    height: 100%;
    border-radius: 150px 150px 0 0;
    background: #ffb22e;
}


#section06 .onboarding .on_title {
    position: absolute;
    left: 715px;
    bottom: 86px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 1s;
}

#section06 .onboarding.on .on_title {
    opacity: 1;
    transform: translateY(0px);
}


#section06 .onboarding .d_star_num {
    position: absolute;
    top: 77px;
    left: 1098px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 1s;
}

#section06 .onboarding.on .d_star_num {
    opacity: 1;
    transform: translateY(0px);
}


#section06 .onboarding .num {
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
}

#section06 .onboarding .on_deco01 {
    position: absolute;
    top: 170px;
    left: 170px;
}

#section06 .onboarding .on_deco02 {
    position: absolute;
    top: 140px;
    right: 170px;
}


#section07 {
    height: 600vh;
}

#section07 .trigger-this-07 {
    height: 100%;
}

#section07 .fix-this-07 {
    width: 5528px;
    height: 100vh;
    position: relative;
    display: flex;
}


#section07 .fix-this-07 .se07_cnts {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: #ffb22e;
}

#section07 .se07_cnt01 .on_phone {
    display: flex;
    width: 1310px;
    justify-content: space-between;
    margin: 300px auto 0 auto;
    position: relative;
    z-index: 999;
}


#section07 .se07_cnt01 .on_phone .phone01 &gt; img {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s;
}

#section07 .se07_cnt01.on .on_phone .phone01 &gt; img {
    opacity: 1;
    transform: translateY(0px);
}

#section07 .se07_cnt01 .on_phone .phone02 &gt; img {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s;
}

#section07 .se07_cnt01.on .on_phone .phone02 &gt; img {
    opacity: 1;
    transform: translateY(0px);
}

#section07 .se07_cnt01 .on_phone .phone04 &gt; img {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s;
}

#section07 .se07_cnt01.on .on_phone .phone04 &gt; img {
    opacity: 1;
    transform: translateY(0px);
}


#section07 .se07_cnt01 .on_phone .phone03 {
    margin-top: -120px;
    position: relative;
}

#section07 .se07_cnt01 .on_phone .phone03 .mockup {
    position: absolute;
    left: 0;
    top: 0;
}

#section07 .se07_cnt01 .on_phone .phone03 .vid01 {
    border-radius: 40px;
    overflow: hidden;
    width: 309px;
    height: 678px;
    margin-top: 12px;
    margin-left: 16px;
}

#section07 .se07_cnt01 .on_phone .phone03 .vid01 &gt; video {
    width: 100%;
}

#section07 .se07_cnt01 .on_circle {
    position: absolute;
    top: 0;
    right: 364px;
    transform:rotate(-115deg);
    transition: all 1s;
}

#section07 .se07_cnt01.on .on_circle {
    transform:rotate(0);

}

/*#section07 .se07_cnt01 .on_phone:nth-child(3) {*/
/*    margin-bottom: 100px;*/
/*}*/


#section07 .fix-this-07 .se07_cnt02 {
    width: 3608px;
    background: #708bff;
    overflow: hidden;
}

#section07 .se07_cnt02 .back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    margin-left: -1px;
}

#section07 .se07_cnt02 .back_phone01 {
    position: absolute;
    bottom: 0;
    left: 100px;
    z-index: 998;

    opacity: 1;
    transform: translateY(30px);
    transition: all 1s;
}

#section07 .se07_cnt02.on .back_phone01 {
    opacity: 1;
    transform: translateY(0px);
}


/*#section07 .se07_cnt02 .back_phone02 {*/
/*    position: absolute;*/
/*    top:0;*/
/*    right: -150px;*/
/*}*/

#section07 .se07_cnt02 .back_star {
    position: absolute;
    top: 90px;
    left: 410px;
}


#section07 .se07_cnt02 .lets {
    position: absolute;
    left: 59px;
    top: 47%;

    opacity: 1;
    transform: translateX(-520px);
    transition: all 0.8s;
}

#section07 .se07_cnt02.on .lets {
    opacity: 1;
    transform: translateX(0px);
}


#section07 .se07_cnt02 .title {
    position: absolute;
    top: 110px;
    left: 280px;

    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

#section07 .se07_cnt02.on .title {
    opacity: 1;
    transform: translateY(0px);
}


#section07 .se07_cnt02 .phone_01 .phone01 {
    position: absolute;
    left: 1085PX;
    top: 13%;
    z-index: 999;

    opacity: 1;
    transform: translateY(20px);
    transition: all 1s;
}

#section07 .se07_cnt02 .phone_01.on .phone01 {
    opacity: 1;
    transform: translateY(0px);
}


#section07 .se07_cnt02 .phone_01 .text01 .text {
    position: absolute;
    left: 684px;
    top: 470px;
}

#section07 .se07_cnt02 .phone_01 .text01 .line {
    position: absolute;
    left: 862px;
    top: 554px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s 0.5s;
}

#section07 .se07_cnt02 .phone_01 .text01 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}



#section07 .se07_cnt02 .phone_01 .text02 .text {
    position: absolute;
    left: 1818px;
    top: 220px;
}

#section07 .se07_cnt02 .phone_01 .text02 .line {
    position: absolute;
    left: 1997px;
    top: 303px;
    z-index: 999;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s 0.3s;
}

#section07 .se07_cnt02 .phone_01 .text02 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}



#section07 .se07_cnt02 .deco01 {
    position: absolute;
    left: 1772px;
    top: 465px;

    animation: deco 4s linear infinite;
}

@keyframes deco {
    100% {
        transform: rotate(1turn);
    }

}


#section07 .se07_cnt02 .rabbit {
    position: absolute;
    left: 1922px;
    top: 695px;
    z-index: 999;

    transform: scale(0);
    transition: all 0.8s 0.2s;
}

#section07 .se07_cnt02 .rabbit.on {
    transform: scale(1);
}


#section07 .se07_cnt02 .back_line {
    position: absolute;
    left: 2060px;
    top: 0;
}

#section07 .se07_cnt02 .hamster {
    position: absolute;
    left: 2372px;
    top: 45px;

    transform: scale(0);
    transition: all 0.8s 0.4s;
}

#section07 .se07_cnt02 .hamster.on {
    transform: scale(1);
}

#section07 .se07_cnt02 .deco03 {
    position: absolute;
    right: 50px;
    top: 230px;
}

#section07 .se07_cnt02 .phone_02 .phone02 {
    position: absolute;
    left: 75%;
    top: 17%;
    z-index: 999;

    opacity: 1;
    transform: translateY(-20px);
    transition: all 1s;
}

#section07 .se07_cnt02 .phone_02.on .phone02 {
    opacity: 1;
    transform: translateY(0px);
}


#section07 .se07_cnt02 .phone_02 .text03 {
    position: absolute;
    left: 2334px;
    top: 610px;
}

#section07 .se07_cnt02 .phone_02 .text03 .line {
    position: absolute;
    left: 171px;
    top: 100px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s 0.6s;
}

#section07 .se07_cnt02 .phone_02 .text03 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}




#section07 .se07_cnt02 .deco02 {
    position: absolute;
    top: 100px;
    right: 106px;

    animation: deco 4s linear infinite;
}

@keyframes deco {
    100% {
        transform: rotate(1turn);
    }

}


#section07 .se07_cnt02 .deco04 {
    position: absolute;
    left: 2482px;
    top: 445px;
}


#section08 {
    background: #708bff;
    height: 3520px;
}

#section08 .back_circle {
    position: absolute;
    top: 100px;
    left: -100px;
}

#section08 .main_title {
    position: absolute;
    top: 160px;
    left: 160px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 1s;
}

#section08 .main_title.on {
    opacity: 1;
    transform: translateY(0px);
}


#section08 .back_line {
    position: absolute;
    top: 1px;
    right: 1px;
}

#section08 .mypage {
    position: absolute;
    top: 110px;
    right: 110px;

    opacity: 1;
    transform: translateX(350px);
    transition: all 1s;
}

#section08 .mypage.on {
    opacity: 1;
    transform: translateX(0px);
}


#section08 .arrow {
    position: absolute;
    top: 353px;
    right: 530px;
}

#section08 .hand {
    position: absolute;
    top: 528px;
    right: 911px;
    z-index: 999;

    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}


#section08 .paper_plain {
    position: absolute;
    top: 290px;
    right: 681px;

    opacity: 0;
    transform: translate(-50px, 50px);
    transition: all 1s;
}

#section08 .paper_plain.on {
    opacity: 1;
    transform: translate(0px);
}


#section08 .deco01 {
    position: absolute;
    top: 511px;
    left: 310px;
}


#section08 .main {
    position: absolute;
    top: 500px;
    left: 540px;
}

#section08 .main_phone {
    position: relative;
    z-index: 990;
}

#section08 .main .main_text {
    position: absolute;
    top: 121px;
    left: -207px;

    opacity: 1;
    transform: translateX(250px);
    transition: all 0.8s 0.3s;
}

#section08 .main.on .main_text {
    opacity: 1;
    transform: translateX(0px);
}


#section08 .main .box1-1 {
    position: absolute;
    top: 297px;
    left: 312px;
    display: flex;
    z-index: 999;
}

#section08 .sub01 {
    position: absolute;
    top: 575px;
    left: 950px;
    z-index: 999;
}

#section08 .main .box1-1 .box01 {
    margin-right: 24px;

    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s 0.2s;
}

#section08 .main .box1-1.on .box01 {
    opacity: 1;
    transform: translateX(0px);
}

#section08 .main .box1-1 .box02 {
    opacity: 1;
    transform: translateX(-30px);
    transition: all 1s 0.3s;
}

#section08 .main .box1-1.on .box02 {
    opacity: 1;
    transform: translateX(0px);
}


#section08 .sub02 {
    position: absolute;
    top: 1191px;
    left: 1006px;
}

#section08 .text01 {
    position: absolute;
    top: 1103px;
    right: 160px;
}

#section08 .text01 .line {
    position: absolute;
    top: 112px;
    left: 114px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s;
}

#section08 .text01 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}



#section08 .text02 {
    position: absolute;
    top: 1550px;
    left: 160px;
    z-index: 999;
}

#section08 .text02 .line {
    position: absolute;
    top: 52px;
    left: 38px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s 0.4s;
}

#section08 .text02 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}



#section08 .deco02 {
    position: absolute;
    top: 1520px;
    right: 592px;
}

#section08 .deco03 {
    position: absolute;
    top: 1390px;
    right: 82px;

    animation: deco 4s linear infinite;
}

@keyframes star {
    100% {
        transform: rotate(1turn);
    }

}


#section08 .hamster {
    position: absolute;
    top: 1550px;
    right: 52px;
    z-index: 999;

    opacity: 1;
    transform: translate(600px, -180px);
    transition: all 1s;
}

#section08 .hamster.on {
    opacity: 1;
    transform: translate(0px, 0px);
}


#section08 .back_middle {
    margin-top: 1670px;
    position: relative;
    z-index: 888;
}

#section08 .back_b {
    height: 1780px;
    background: #363636;
    margin-top: -185px;
}

#section08 .main .box1-2 {
    position: absolute;
    top: 2015px;
    left: 344px;
    display: flex;
    z-index: 999;
}

#section08 .main .box1-2 .box01 {
    margin-right: 24px;

    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s;
}

#section08 .main .box1-2.on .box01 {
    opacity: 1;
    transform: translateX(0px);
}


#section08 .main .box1-2 .box02 {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 1s 0.1s;
}

#section08 .main .box1-2.on .box02 {
    opacity: 1;
    transform: translateX(0px);
}


#section08 .main .box1-3 {
    position: absolute;
    top: 2479px;
    left: 338px;
    display: flex;
    z-index: 999;

    opacity: 1;
    transform: translateX(-30px);
    transition: all 1s;
}

#section08 .main .box1-3.on {
    opacity: 1;
    transform: translateX(0px);
}


#section08 .back_b {
    position: relative;
}

#section08 .back_b .back_star {
    position: absolute;
    top: -90px;
    left: -230px;
}

#section08 .back_b .back_sq {
    position: absolute;
    top: 471px;
    right: -279px;
}

#section08 .back_b .back_circle_b {
    position: absolute;
    bottom: -79px;
    left: 91px;
}


#section08 .text03 {
    position: absolute;
    top: 2060px;
    right: 465px;
}

#section08 .text03 .line {
    position: absolute;
    top: 71px;
    right: 204px;
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s ;
}

#section08 .text03 .line.on {
    clip-path: inset(0% 0% 0% 0%)
}


#section08 .text04 {
    position: absolute;
    top: 2480px;
    left: 145px;
}

#section08 .text04 .line {
    position: absolute;
    top: 96px;
    right: 141px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s 0.4s;
}

#section08 .text04 .line.on {
    clip-path: inset(0% 0% 0% 0%)
}



#section08 .text05 {
    position: absolute;
    top: 3080px;
    right: 309px;
}

#section08 .text05 .line {
    position: absolute;
    top: 88px;
    right: 112px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1.2s;
}

#section08 .text05 .line.on {
    clip-path: inset(0% 0% 0% 0%)
}


#section08 .sub03 {
    position: absolute;
    bottom: 512px;
    left: 286px;
    z-index: 999;

    /*width: 507px;*/
    /*height: 38px;*/
    /*overflow: hidden;*/
}

/*#section08 .sub03 &gt; img{*/
/*    transform:translateX(507px);*/
/*    transition:all 1s;*/
/*}*/

/*#section08 .sub03.on &gt; img{*/
/*    transform:translateX(0px);*/
/*}*/


/*#section07 .se07_cnt01  {*/
/*    */
/*}*/


#section09 {
    height: 1880px;
    background: #363636;
}

#section09 .inner {
    height: 664px;
    border-radius: 150px 150px 0 0;
    background: #fff9ea;

    /*opacity: 0;*/
    /*transform:translateY(50px);*/
    /*transition: all 1s;*/
}

/*#section09 .inner.on {*/
/*    opacity: 1;*/
/*    transform:translateY(0px);*/
/*}*/


#section09 .inner .diary_title {
    position: absolute;
    left: 676px;
    top: 99px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 1s;
}

#section09 .inner.on .diary_title {
    opacity: 1;
    transform: translateY(0px);
}


#section09 .inner .star_num {
    position: absolute;
    top: 90px;
    left: 1028px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 1s;
}

#section09 .inner.on .star_num {
    opacity: 1;
    transform: translateY(0px);
}

#section09 .inner.on .star_num .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}



#section09 .inner .star_num .num {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
}

#section09 .inner .diary_text {
    position: absolute;
    left: 525px;
    top: 17%;

    width: 872px;
    height: 207px;
    overflow: hidden;
}

#section09 .inner .diary_text &gt; img {
    transform: translateY(872px);
    transition: all 1.4s;
}

#section09 .inner.on .diary_text &gt; img {
    transform: translateY(0);
}


#section09 .inner .deco01 {
    position: absolute;
    left: 130px;
    top: 510px;

    transform: scale(0);
    transition: all 0.5s 0.6s;
}

#section09 .inner.on .deco01 {
    transform: scale(1);
}


#section09 .inner .deco02 {
    position: absolute;
    right: 130px;
    top: 554px;

    transform: scale(0);
    transition: all 0.5s 0.6s;
}

#section09 .inner.on .deco02 {
    transform: scale(1);
}


#section09 .back_box {
    background: #fadc46;
    height: 925px;
}


#section09 .back_box {
    position: relative;
}

#section09 .back_box .deco01 {
    position: absolute;
    left: 81px;
    top: 250px;
}

#section09 .back_box .deco02 {
    position: absolute;
    right: 51px;
    top: 31px;
}

#section09 .back_box .deco03 {
    position: absolute;
    right: 42px;
    top: 281px;
}

#section09 .phone {
    position: absolute;
    left: 50%;
    top: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 1255px;
    justify-content: space-between;
}


#section09 .phone .phone02 {
    margin-top: -170px;

    opacity: 1;
    transform: translateY(50px);
    transition: all 1s;

    z-index: 999;
}

#section09 .phone.on .phone02 {
    opacity: 1;
    transform: translateY(0px);
}


#section09 .phone .phone01 {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s 0.3s;
}

#section09 .phone.on .phone01 {
    opacity: 1;
    transform: translateX(0px);
}


#section09 .phone .phone03 {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s 0.3s;
}

#section09 .phone.on .phone03 {
    opacity: 1;
    transform: translateX(0px);
}


#section09 .hand {
    position: absolute;
    top: 1043px;
    left: 1112px;

    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}



#section09 .sub01 {
    position: absolute;
    top: 912px;
    left: 178px;

    opacity: 0;
    transform: translateX(100px);
    transition: all 1s 0.3s;
    /*width: 289px;*/
    /*height: 35px;*/
    /*overflow: hidden;*/
}

#section09 .sub01.on {
    opacity: 1;
    transform: translateX(0px);
}





/*#section09 .sub01 &gt;img {*/
/*    transform:translateX(289px);*/
/*    transition:all 1s 0.2s;*/
/*}*/

/*#section09 .sub01.on &gt;img {*/
/*    transform:translateX(0px);*/
/*}*/


#section09 .sub02 {
    position: absolute;
    top: 1406px;
    right: 172px;

    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s 0.3s;

    /*width: 442px;*/
    /*height: 35px;*/
    /*overflow: hidden;*/
}

#section09 .sub02.on {
    opacity: 1;
    transform: translateX(0px);
}



    /*#section09 .sub02 &gt;img {*/
/*    transform:translateX(-442px);*/
/*    transition:all 1s;*/
/*}*/

/*#section09 .sub02.on &gt;img {*/
/*    transform:translateX(0px);*/
/*}*/


#section09 .text01 {
    position: absolute;
    bottom: 10px;
    left: 5px;
}

#section09 .text01 .text {
    position: absolute;
    top: -268px;
    left: 261px;
}

#section09 .text01 .arrow {
    position: absolute;
    top: -434px;
    left: 230px;
}

#section09 .text01 .line {
    position: absolute;
    top: -237px;
    left: 300px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s;
}

#section09 .text01 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}


#section09 .text02 {
    position: absolute;
    bottom: 126px;
    right: 264px;
}

#section09 .text02 .line {
    position: absolute;
    top: 89px;
    right: 252px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s;
}

#section09 .text02 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}




#section10 {
    height: 4090px;
    background: #fadc46;
}

#section10 .inner {
    height: 2450px;
    border-radius: 150px 150px 0 0;
    background: #708bff;
    overflow: hidden;
    position: relative;
}

#section10 .inner .v_title {
    position: absolute;
    left: 570px;
    top: 103px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 1s;
}

#section10 .inner.on .v_title {
    opacity: 1;
    transform: translateY(0px);
}


#section10 .inner .star_num {
    position: absolute;
    top: 94px;
    left: 1089px;

    opacity: 0;
    transform: translateY(50px);
    transition: all 1s;
}

#section10 .inner.on .star_num {
    opacity: 1;
    transform: translateY(0px);
}

#section10 .inner.on .star_num .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}



#section10 .inner .star_num .num {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
}

#section10 .inner .how {
    position: absolute;
    left: -88px;
    top: 33px;

    opacity: 1;
    transform: translateX(-300px);
    transition: all 1s;
}

#section10 .inner.on .how {
    opacity: 1;
    transform: translateX(0px);
}


#section10 .inner .phone1-1 {
    display: flex;
    width: 900px;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 1320px;
    transform: translate(-50%, -50%);
    z-index: 999;
}

#section10 .inner .phone1-1 .phone02 {
    margin-top: 230px;
}

#section10 .inner .phone1-1 .arrow {
    position: absolute;
    left: 49%;
    top: 22%;
    transform: translate(-50%, -50%);
}

#section10 .inner .hand {
    position: absolute;
    top: 411px;
    left: 869px;
    z-index: 999;

    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}




#section10 .inner .sub01 {
    position: absolute;
    top: 443px;
    left: 919px;
}

#section10 .inner .sub03 {
    opacity: 0;
    transform: translateX(20px);
    transition: all 1s;
}

#section10 .inner .sub03.on {
    opacity: 1;
    transform: translateX(0px);
}


#section10 .inner .text01 {
    position: absolute;
    top: 280px;
    right: -230px;
}

#section10 .inner .text01 .circle &gt; img {
    transform: scale(0);
    transition: all 0.8s 0.2s;
}

#section10 .inner.on .text01 .circle &gt; img {
    transform: scale(1);
}


#section10 .inner .text01 .text {
    position: absolute;
    top: 220px;
    left: 220px;

    z-index: 999;
}

#section10 .inner .text01 .line {
    position: absolute;
    top: 250px;
    left: 470px;

    z-index: 999;
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 0.7s;
}

#section10 .inner.on .text01 .line {
    clip-path: inset(0% 0% 0% 0%);
}


#section10 .inner .text01 .deco {
    position: absolute;
    top: 110px;
    left: 630px;

    z-index: 999;
    transform: scale(0);
    transition: all 0.8s 0.6s;
}

#section10 .inner.on .text01 .deco {
    transform: scale(1);
}


#section10 .inner .sub02 {
    position: absolute;
    top: 978px;
    left: 300px;
    z-index: 999;
}

#section10 .inner .text02 .text {
    position: absolute;
    top: 720px;
    left: 139px;
}

#section10 .inner .text02 .line {
    position: absolute;
    top: 795px;
    left: 180px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 0.7s;
}

#section10 .inner.on .text02 .line {
    clip-path: inset(0% 0% 0% 0%);
}



#section10 .inner .text03 {
    position: absolute;
    top: 1190px;
    left: -230px;
}

#section10 .inner .text03 .circle &gt; img {
    transform: scale(0);
    transition: all 1s;
}

#section10 .inner.on .text03.on .circle &gt; img {
    transform: scale(1);
}

#section10 .inner .text03 .text {
    position: absolute;
    top: 411px;
    left: 364px;

    z-index: 999;
}

#section10 .inner .text03 .deco {
    position: absolute;
    top: 90px;
    left: 301px;

    z-index: 999;
    transform: scale(0);
    transition: all 0.8s 0.2s
}

#section10 .inner .text03.on .deco {
    transform: scale(1);
}


#section10 .inner .text03 .line {
    position: absolute;
    top: 487px;
    left: 406px;

    z-index: 999;
    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s;
}

#section10 .inner .text03 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}

#section10 .inner .sub03 {
    position: absolute;
    top: 1150px;
    right: 185px;
    z-index: 999;
}

#section10 .inner .btn {
    position: absolute;
    top: 2082px;
    right: 1011px;
    z-index: 999;

    transform: scale(0);
    transition: all 0.8s;
}

#section10 .inner .btn.on {
    transform: scale(1);
}


#section10 .inner .sub04 {
    position: absolute;
    top: 2119px;
    right: 810px;
    z-index: 999;
}

#section10 .inner .back_star_blue {
    position: absolute;
    top: 1548px;
    right: -153px;

}

#section10 .inner .deco_orange {
    position: absolute;
    top: 2030px;
    right: 93px;
    z-index: 999;

    animation: star 4s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}




#section10 .back_box {
    height: 1552px;
    background: #363636;
    margin-top: -189px;
    position: relative;
}

#section10 .back_middle {
    position: relative;
    z-index: 990;
}

#section10 .back_box .deco01 {
    position: absolute;
    top: -90px;
    right: -290px;
}

#section10 .back_box .deco02 {
    position: absolute;
    top: 710px;
    left: -190px;
}

#section10 .sticker .rabbit {
    position: absolute;
    top: 2463px;
    right: 240px;
    z-index: 999;
}

#section10 .sticker .dochi {
    position: absolute;
    top: 2509px;
    right: 498px;
    z-index: 999;
}

#section10 .sticker &gt; div {
    opacity: 1;
    transform: translate(800px, -100px);
    transition: all 1s;
}

#section10 .sticker.on &gt; div {
    opacity: 1;
    transform: translate(0px);
}


#section10 .phone1-2 {
    position: absolute;
    display: flex;
    width: 830px;
    justify-content: space-between;
    top: 2514px;
    left: 180px;
    z-index: 999;

    opacity: 1;
    transform: translateY(60px);
    transition: all 1s;
}

#section10 .phone1-2.on {
    opacity: 1;
    transform: translateY(0px);
}


#section10 .phone1-3 {
    position: absolute;
    top: 2795px;
    right: 180px;

    opacity: 1;
    transform: translateY(60px);
    transition: all 1s 0.6s;
}

#section10 .phone1-3.on {
    opacity: 1;
    transform: translateY(0px);
}


#section10 .text04 {
    position: absolute;
    bottom: 512px;
    right: 611px
}

#section10 .text04 .line {
    position: absolute;
    top: 74px;
    right: 170px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s;
}

#section10 .text04 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}


#section10 .sub05 {
    position: absolute;
    bottom: 522px;
    left: 573px;
}

#section10 .lets {
    position: absolute;
    left: 160px;
    bottom: -5px;

    width: 883px;
    height: 144px;
    overflow: hidden;
}

#section10 .lets &gt; img {
    transform: translateY(883px);
    transition: all 1s;
}

#section10 .lets.on &gt; img {
    transform: translateY(0);
}


#section11 {
    background: #363636;
    height: 1750px;
}

#section11 .inner {
    height: 1750px;
    border-radius: 150px 150px 0 0;
    background: #fadc46;
}

#section11 .comu_title {
    position: absolute;
    left: 33%;
    top: 80px;

    /*opacity: 0;*/
    /*transform: translateY(50px);*/
    /*transition: all 1s;*/
}

/*#section11 .comu_title.on {*/
/*    opacity: 1;*/
/*    transform: translateY(0px);*/
/*}*/


#section11 .comu_text {
    position: absolute;
    left: 50%;
    top: 23%;
    transform: translate(-50%, -50%);
}

#section11 .phone {
    position: absolute;
    left: 492px;
    top: 294px;
    margin-top: 120px;
    z-index: 999;

    opacity: 1;
    transform:translateY(60px);
    transition: all 1s;
}

#section11 .phone.on {
    opacity: 1;
    transform:translateY(0px);
}





#section11 .sub01 {
    position: absolute;
    top: 545px;
    left: 294px;
}

#section11 .text01 {
    position: absolute;
    top: 745px;
    left: 146px;
}

#section11 .text01 .line {
    position: absolute;
    top: 87px;
    left: 38px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s;
}

#section11 .text01 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}



#section11 .sub02 {
    position: absolute;
    top: 1065px;
    right: 198px;
}

#section11 .deco01 {
    position: absolute;
    top: 1310px;
    left: 146px;

    -webkit-animation: jello-horizontal 0.9s both infinite;
    animation: jello-horizontal 0.9s both infinite;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-11-27 16:35:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}




#section11 .deco02 {
    position: absolute;
    top: 910px;
    right: 122px;

    animation: star 4s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}




#section11 .deco03 {
    position: absolute;
    top: 910px;
    right: 216px;
}


#section12 {
    background: #fadc46;
    height: 1200px;
}

#section12 .adop_title {
    margin: 10px 0 0 180px;

    opacity: 0;
    transform:translateY(30px);
    transition: all 1s;
}

#section12 .adop_title.on {
    opacity: 1;
    transform:translateY(10px);
}

#section12 .star_num {
    position: absolute;
    top: 0;
    left: 386px;
}

#section12 .star_num .star {
    animation: star 6s linear infinite;
}

@keyframes star {
    100% {
        transform:rotate(1turn);
    }

}


#section12 .star_num .num {
    position: absolute;
    left: 49%;
    top: 58%;
    transform: translate(-50%, -50%);
}

#section12 .back_middle {
    margin-top: 80px;
}

#section12 .back_box {
    height: 673px;
    background: #fff9ea;
}


#section12 .phone {
    position: absolute;
    top: 0;
    right: 180px;

    opacity: 1;
    transform:translateY(60px);
    transition: all 1s;
}

#section12 .phone.on {
    opacity: 1;
    transform:translateY(0px);
}


#section12 .text01 {
    position: absolute;
    top: 350px;
    left: 479px;
}

#section12 .text01 .line {
    position: absolute;
    top: 78px;
    left: 122px;

    clip-path: inset(0% 100% 0% 0%);
    transition: all 1s 0.2s;
}

#section12 .text01 .line.on {
    clip-path: inset(0% 0% 0% 0%);
}




/*3608*/


#section13 {
    background: #fff9ea;
    height: 1650px;
}

#section13 .arrow {
    text-align: center;
    margin-bottom: 190px;

    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}


@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

#section13 .mockup {
    opacity: 0;
    transform:translateY(50px);
    transition: all 1s;
}

#section13 .mockup.on {
    opacity: 1;
    transform:translateY(0px);
}



#section14 {
    background: #363636;
    height: 850px;
}

#section14 .thanks {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#section14 .circle {
    position: absolute;
    left: 1195px;
    top: 422px;
}

#section14 .gini {
    position: absolute;
    left: 400px;
    top: 120px;

    -webkit-animation: blink-2 0.9s infinite both;
    animation: blink-2 0.8s infinite both;
}


@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}



#section14 .gosum {
    position: absolute;
    right: 400px;
    top: 120px;

    -webkit-animation: blink-2 0.9s 0.4s infinite both;
    animation: blink-2 0.8s 0.4s infinite both;
}


#section14 .hamster {
    position: absolute;
    left: 140px;
    top: 360px;

    -webkit-animation: blink-2 0.9s 0.4s infinite both;
    animation: blink-2 0.8s 0.4s infinite both;
}

@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

#section14 .rat {
    position: absolute;
    right: 140px;
    top: 360px;

    -webkit-animation: blink-2 0.9s infinite both;
    animation: blink-2 0.8s infinite both;
}

@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}


#section14 .rabbit {
    position: absolute;
    left: 480px;
    top: 600px;

    -webkit-animation: blink-2 0.9s infinite both;
    animation: blink-2 0.8s infinite both;
}

@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

#section14 .bird {
    position: absolute;
    right: 480px;
    top: 600px;

    -webkit-animation: blink-2 0.8s 0.4s infinite both;
    animation: blink-2 0.8s 0.4s infinite both;
}

@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

</pre></body></html>