*{
    margin: 0;
    padding: 0;
}
body{
    background: url(../images/sanpai2022/bg_pc.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
.nonetext{
    opacity: 0;
    font-size: 2px;
}
.flower_bg1{
    background: url(../images/sanpai2022/bg_flower_left_pc.png);

    background-position: center;
    background-size: cover;
    height: 100vh;
    opacity: 0;
}
.flower_bg2{
    background: url(../images/sanpai2022/bg_flower_right_pc.png);
    position: absolute;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    opacity: 0;
}
.floating1,.floating2,.floating3,.floating4{
    position: absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
}
.floating1{
    background: url(../images/sanpai2022/floating_flower.png);
    height: 15vh;
    width: 15vw;
    top: 10vh;
    left: 10vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: rotating 28s infinite;
}
.floating2{
    background: url(../images/sanpai2022/floating_flower.png);
    height: 15vh;
    width: 15vw;
    top: 80vh;
    left: 82vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: rotating 36s  infinite;
}
.floating3{
    background: url(../images/sanpai2022/floating_flower_pink.png);
    height: 18vh;
    width: 18vw;
    top: 35vh;
    left: 2vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: rotating 42s  infinite;
}
.floating4{
    background: url(../images/sanpai2022/floating_flower_darkpink.png);
    height: 12vh;
    width: 12vw;
    top: 50vh;
    left: 80vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: rotating 52s  infinite;
}
#result_section{
    width: 80vw;
    max-width: 820px;
    /* outline: 5px solid green; */
    margin: 32px auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
}
.result{
    width: 60vw;
    max-width: 420px;
    /* outline: 5px solid green; */
    margin: 40px auto 30px;
 
    /* background: url(image/result1.png); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0;
}
.result1{
    background: url(../images/sanpai2022/result1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result2{
    background: url(../images/sanpai2022/result2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result3{
    background: url(../images/sanpai2022/result3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result4{
    background: url(../images/sanpai2022/result4.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result5{
    background: url(../images/sanpai2022/result5.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result6{
    background: url(../images/sanpai2022/result6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result7{
    background: url(../images/sanpai2022/result7.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result8{
    background: url(../images/sanpai2022/result8.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result9{
    background: url(../images/sanpai2022/result9.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.result10{
    background: url(../images/sanpai2022/result10.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.btn_group{
    width: 60vw;
    max-width: 420px;
    /* outline: 5px solid green; */
    margin: 30px auto;
    opacity: 0;
    display: none;
}
#btn_title{
    width: 35vw;
    height: 23vh;
    max-width: 360px;
    margin: auto;
    background: url(../images/sanpai2022/btn_title.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
}
#btn1{
    width: 30vw;
    height: 20vh;
    max-width: 300px;
    margin: auto;
    background: url(../images/sanpai2022/deskbg_download.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
}
#btn1:hover{
    transform: scale(1.1);
    transition: .6s ease;
}
#btn2{
    width: 33vw;
    height: 11vh;
    max-width: 330px;
    margin: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    animation: flexible 5s infinite ease; 
    z-index: 9999999;
}
#result_link{
    width: 33vw;
    height: 12vh;
    max-width: 330px;
    margin: auto;
}
#btn2:hover{
    transform: scale(1.1)
} 
.resultbtn1,.resultbtn2,.resultbtn3,.resultbtn4,.resultbtn5,.resultbtn6,.resultbtn7,.resultbtn8,.resultbtn9,.resultbtn10{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    animation: flexible 7s 3s infinite ease; 
    z-index: 9999999;
}
.resultbtn1{
    background: url(../images/sanpai2022/resultbtn1.png);
}
.resultbtn2{
    background: url(../images/sanpai2022/resultbtn2.png);
}
.resultbtn3{
    background: url(../images/sanpai2022/resultbtn3.png);
}
.resultbtn4{
    background: url(../images/sanpai2022/resultbtn4.png);
}
.resultbtn5{
    background: url(../images/sanpai2022/resultbtn5.png);
}
.resultbtn6{
    background: url(../images/sanpai2022/resultbtn6.png);
}
.resultbtn7{
    background: url(../images/sanpai2022/resultbtn7.png);
}
.resultbtn8{
    background: url(../images/sanpai2022/resultbtn8.png);
}
.resultbtn9{
    background: url(../images/sanpai2022/resultbtn9.png);
}
.resultbtn10{
    background: url(../images/sanpai2022/resultbtn10.png);
}
#btn_detail{
    width: 33vw;
    height: 4vh;
    max-width: 330px;
    margin: auto;
    text-align: center;
    font-size: 15px;
    opacity: 0.7;
}
#btn3{
    width: 33vw;
    height: 11vh;
    max-width: 320px;
    margin: auto;
    background: url(../images/sanpai2022/replay_btn.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    transition: ease;
}
#btn3:hover{
    height: 11vh;
    max-width: 360px;
    transition: .2s cubic-bezier(0.095, 0.82, 0.165, 0.6);
    animation:none;
}
#btn4{
    width: 33vw;
    height: 10vh;
    max-width: 320px;
    margin: 10px auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    transition: ease;
    display: flex;
    text-align: center;
}
.sns{
    width: 23%;
    width: 20vw;
    height: 10vh;
    max-width: 110px;
    margin: 5px auto;
}
.share{

    background: url(../images/sanpai2022/share.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    transition: ease;
}
.fb{
    background: url(../images/sanpai2022/fb.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    transition: ease;
}
.ig{
    background: url(../images/sanpai2022/ig.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    transition: ease;
}
.sns:hover{
    width: 21vw;
    height: 11vh;
    max-width: 110px;
    margin: 4px auto;
    transition: .3s ease;
}
#btn_title_sp{
    display: none;
}

#ring_btn{
    width: 65vw;
    height: 13vh;
    max-width: 320px;
    margin: auto;
    background: url(../images/sanpai2022/start.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    z-index: 999;
    position: absolute;
    right: 17%;
    top: 45%;
    animation: flexible 2.5s infinite ease; 
}
#ring_btn:hover{
    transition: .2s cubic-bezier(0.095, 0.82, 0.165, 0.6);
    animation: flexible2 1s infinite ease; 
    transition: .3s ease;
    transition: ease;
    cursor: pointer;
}
#ring_section{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

}
#ring{
    width: 75vw;
    height: 95vh;
    max-width: 550px;
    margin: auto;
    padding-left: -10px;
    background: url(../images/sanpai2022/ring.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    animation: updown2 6s infinite cubic-bezier(0.89, 0.875, 0.865, 1);
    padding-top: -50px;
}
#ring_bg1{
    background: url(../images/sanpai2022/bg_ring_left_pc.png);
    position: absolute;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    animation: updown 4.5s infinite reverse cubic-bezier(0.39, 0.575, 0.565, 1);
    padding-top: -20px;
}
#ring_bg2{
    background: url(../images/sanpai2022/bg_ring_right_pc.png);
    position: absolute;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    animation: updown 4s infinite cubic-bezier(0.59, 0.575, 0.865, 1);
    padding-top: -200px;
}
#ring_title{
    width: 65vw;
    height: 24vh;
    max-width: 420px;
    margin: auto;
    background: url(../images/sanpai2022/title-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    /* outline: 5px solid green; */
    transition: ease;
    z-index: 999;
    position: absolute;
    left: 10%;
    top: 37%;
}
.disappear{
    opacity: 0;
    width: 0vw;
    transition: ease;
    animation: fadeout 1s ease;
    display: none;
}
.showup{
    animation: fadein 1.5s ease;
    display: block;
    opacity: 1;
}
.showup2{
    animation: fadein2 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: block;
    opacity: 1;
}
.showup3{
    display: block;
    opacity: 1;
}

@media (max-width: 763px) {
    body{
        background: url(../images/sanpai2022/bg_sp.jpg);
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    #result_section{
        width: 80vw;
        max-width: 820px;
        /* outline: 5px solid green; */
        margin: 32px auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: block;
    }
    .result{
        width: 81vw;
        height: 70vh;
        max-width: 800px;
        /* outline: 5px solid green; */
        margin: -20px auto 30px;
        padding-left: 7px;
   
    }
    .btn_group{
        width: 80vw;
        max-width: 820px;
        /* outline: 5px solid green; */
        margin: 30px auto;
    }
    #btn_title{
        display: none;
    }
    #btn1{
        width: 65vw;
        height: 15vh;
        max-width: 300px;
        margin: auto;
        background: url(../images/sanpai2022/deskbg_download.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
    }
    #btn2{
        width: 68vw;
        height: 12vh;
        max-width: 330px;
        margin: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        animation: flexible 7s 3s infinite ease; 
    }
    #btn2:hover{
        width: 68vw;
        height: 12vh;
        max-width: 360px;
        transition: .6s cubic-bezier(0.095, 0.82, 0.165, 0.6);
        animation:none;
    }
    #btn_detail{
        width: 33vw;
        height: 4vh;
        max-width: 330px;
        margin: auto;
        text-align: center;
        font-size: 14px;
        opacity: 0.7;
    }
    #btn3{
        width: 65vw;
        height: 12vh;
        max-width: 320px;
        margin: auto;
        background: url(../images/sanpai2022/replay_btn.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        transition: ease;
    }
    #btn3:hover{
        height: 12vh;
        max-width: 370px;
    }
    #btn4{
        width: 65vw;
        height: 11vh;
        max-width: 340px;
        margin: 10px auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        transition: ease;
        display: flex;
        text-align: center;
        padding-bottom: 40px;
    }
    .sns{
        width: 23%;
        width: 20vw;
        height: 10vh;
        max-width: 110px;
        margin: 5px 5px;
    }
    .sns:hover{
        width: 21vw;
        height: 11vh;
        max-width: 120px;
        margin: 5px auto;
        transition: .3s ease;
    }
    .share{
    
        background: url(../images/sanpai2022/share.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        transition: ease;
    }
    .fb{
        background: url(../images/sanpai2022/fb.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        transition: ease;
    }
    .ig{
        background: url(../images/sanpai2022/ig.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        transition: ease;
    }
    
    .flower_bg1{
        background: url(../images/sanpai2022/bg_flower_left_sp.png);
        background-position: center;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        position: fixed;
    }
    .flower_bg2{
        background: url(../images/sanpai2022/bg_flower_right_sp.png);
        position: absolute;
        background-position: center;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        position: fixed;
    }
    .floating1,.floating2,.floating3,.floating4{
        position: fixed;
    }
    #btn_title_sp{
        display: block;
        width: 75vw;
        height: 20vh;
        max-width: 360px;
        margin: auto;
        background: url(../images/sanpai2022/btn_title.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
    }
    #ring_bg1{
        background: url(../images/sanpai2022/bg_ring_right_sp.png);
        position: absolute;
        background-position: center;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        animation: updown 4.5s infinite reverse cubic-bezier(0.39, 0.575, 0.565, 1);
        padding-top: -20px;
    }
    #ring_bg2{
        background: url(../images/sanpai2022/bg_ring_left_sp.png);
        position: absolute;
        background-position: center;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        animation: updown 4s infinite cubic-bezier(0.59, 0.575, 0.865, 1);
        padding-top: -200px;
    }
    #ring_title{
        display: none;
    }
    #ring{
        width: 90vw;
        height: 95vh;
        max-width: 550px;
        margin: auto;
        padding-left: -50px;
        background: url(../images/sanpai2022/ring.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        animation: updown2 6s infinite cubic-bezier(0.89, 0.875, 0.865, 1);
        padding-top: 70px;
    }
    #ring_btn{
        width: 95vw;
        height: 15vh;
        max-width: 320px;
        margin: auto;
        background: url(../images/sanpai2022/start.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        /* outline: 5px solid green; */
        z-index: 999;
        position: absolute;
        right: 0;
        left: 0;
        top: 75%;
        animation: flexible 2.5s infinite ease; 
    }

}
@keyframes rotating{
    0%{transform: rotate(180deg) translateX(20px)}
    50%{transform: rotate(-180deg) translateX(-20px)}
    100%{transform: rotate(180deg) translateX(20px)}
}

@keyframes flexible{
    0%{transform: rotate(0deg)}
    4%{transform: rotate(1.35deg)}
    7%{transform: rotate(-1.35deg)}
    12%{transform: rotate(1.35deg)}
    16%{transform: rotate(-1.35deg)}
    21%{transform: rotate(0deg)}
}

@keyframes flexible2{
    0%{transform: scale(1)}
    50%{transform: scale(1.15)}
    100%{transform: scale(1)}
    
}

@keyframes fadeout{
    0%{transform: scale(1);opacity: 1;}
    100%{transform: scale(0) translateX(2000px);opacity: 0;}
}

@keyframes fadein{
    from{opacity: 0;transform:translateX(-200px) ;}
    to{opacity: 1;transform:translateX(0px) ;}
}
@keyframes fadein2{
    from{opacity: 0;transform:translateX(200px) ;}
    to{opacity: 1;transform:translateX(0px) ;}
}
@keyframes updown{
    0%{transform: translateY(-20px);}
    50%{transform: translateY(0px);}
    100%{transform: translateY(-20px);}
}

@keyframes updown2{
    0%{transform: translateY(-15px);}
    50%{transform: translateY(0px);}
    100%{transform: translateY(-15px);}
}


@keyframes fadein3{
    from{opacity: 0;transform:translateX(200px) ;}
    to{opacity: 1;transform:translateX(0px) ;}
}