@charset "utf-8";
@keyframes shutugen{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes shutugenbig{
    from{
        opacity:0;
    }
    to{
        opacity:1;
        transform: rotate(360deg);
    }
}
@keyframes shutugenred{
    from{
        opacity:0;
        color:blue;
        font-size: xx-small;
        font-weight: lighter;
    }
    to{
        opacity:1;
        transform: rotate(540deg);
        color:red;
        font-size: x-large;
        font-weight: bold;
    }
}

.shutugen{
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
.shutugenred{
    animation-name: shutugenred;
    animation-fill-mode: forwards;
}
.shutugenbig{
    animation-name: shutugenbig;
}
.wrap{
    position: absolute;
    top:100px;
    left:20px;
}
#page1{
    opacity: 1;
}
#page2{
    opacity: 0;
}

#thm1{
    position:absolute;
    left:118px;
    top:0px;
}
#axline1{
    opacity: 0;
    position: absolute;
    left:0px;
    top:60px;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#arrowblue1{
    opacity: 0;
    position: absolute;
    left:145px;
    top:15px;
    width:100px;
    transform: rotate(26deg);
    transform-origin:left center;
    animation-delay: 6s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#arrowblue2{
    opacity: 0;
    position: absolute;
    left:120px;
    top:15px;
    width:70px;
    transform: rotate(35deg);
    transform-origin:left center;
    animation-delay: 4s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#dai1{
    opacity: 0;
    position: absolute;
    left:230px;
    top:90px;
    animation-delay: 8s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;

}
#shou1{
    opacity: 0;
    position: absolute;
    left:175px;
    top:90px;
    animation-delay: 8s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;

}
#thm2{
    opacity: 0;
    position:absolute;
    left:118px;
    top:160px;
    animation-delay: 12s;
    animation-duration: 3s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#axline2{
    opacity: 0;
    position: absolute;
    left:0px;
    top:240px;
    animation-delay: 14s;
    animation-duration: 3s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#arrowblue3{
    opacity: 0;
    position: absolute;
    left:220px;
    top:195px;
    width:180px;
    height:7px;
    transform: rotate(166deg);
    transform-origin:left center;
    animation-delay: 18s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#arrowblue4{
    opacity: 0;
    position: absolute;
    left:135px;
    top:195px;
    width:50px;
    height:7px;
    transform: rotate(124deg);
    transform-origin:left center;
    animation-delay: 16s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#dai2{
    opacity: 0;
    position: absolute;
    left:90px;
    top:270px;
    animation-delay: 20s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;

}
#shou2{
    opacity: 0;
    position: absolute;
    left:30px;
    top:270px;
    animation-delay: 20s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;

}
#thm3{
    opacity: 0;
    position:absolute;
    left:0px;
    top:320px;
    animation-delay: 24s;
    animation-duration: 4s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}
#gt1{
    opacity:0;
    position:absolute;
    top:178px;
    left:170px;
    animation-delay: 26s;
    animation-duration: 6s;
    animation-name: shutugenbig;
    animation-fill-mode: forwards;
}
#next{
    opacity:0;
    position:absolute;
    top:360px;
    left:120px;
    animation-delay:30s;
    animation-duration: 2s;
    animation-name: shutugen;
    animation-fill-mode: forwards;
}


#thm4{
    position:absolute;
    left:118px;
    top:0px;
}
#axline3{
    opacity: 0;
    position: absolute;
    left:0px;
    top:60px;
    animation-delay: 2s;
    animation-duration: 3s;
}
#arrowblue5{
    opacity: 0;
    position: absolute;
    left:170px;
    top:15px;
    width:95px;
    transform: rotate(27deg);
    transform-origin:left center;
    animation-delay: 4s;
    animation-duration: 4s;
    
}
#arrowblue6{
    opacity: 0;
    position: absolute;
    left:140px;
    top:15px;
    width:90px;
    transform: rotate(28deg);
    transform-origin:left center;
    animation-delay: 6s;
    animation-duration: 4s;
    
}
#thm5{
    opacity: 0;
    position:absolute;
    left:118px;
    top:110px;
    animation-delay: 8s;
    animation-duration: 3s;
}
#thm6{
    opacity: 0;
    position:absolute;
    left:163px;
    top:145px;
    animation-delay: 10s;
    animation-duration: 3s;
}
#axline4{
    opacity: 0;
    position: absolute;
    left:0px;
    top:210px;
    animation-delay: 12s;
    animation-duration: 3s;
}
#arrowblue7{
    opacity: 0;
    position: absolute;
    left:210px;
    top:165px;
    width:40px;
    height:7px;
    transform: rotate(99deg);
    transform-origin:left center;
    animation-delay: 14s;
    animation-duration: 4s;
}
#arrowblue8{
    opacity: 0;
    position: absolute;
    left:185px;
    top:165px;
    width:40px;
    height:7px;
    transform: rotate(92deg);
    transform-origin:left center;
    animation-delay: 16s;
    animation-duration: 4s;
}



#thm7{
    opacity: 0;
    position:absolute;
    left:118px;
    top:260px;
    animation-delay: 20s;
    animation-duration: 3s;
}
#thm8{
    opacity: 0;
    position:absolute;
    left:163px;
    top:285px;
    animation-delay: 21s;
    animation-duration: 3s;
}
#axline5{
    opacity: 0;
    position: absolute;
    left:0px;
    top:350px;
    animation-delay: 24s;
    animation-duration: 3s;
}
#arrowblue9{
    opacity: 0;
    position: absolute;
    left:240px;
    top:300px;
    width:160px;
    height:7px;
    transform: rotate(162deg);
    transform-origin:left center;
    animation-delay: 26s;
    animation-duration: 4s;
}
#arrowblue10{
    opacity: 0;
    position: absolute;
    left:170px;
    top:300px;
    width:80px;
    height:7px;
    transform: rotate(141deg);
    transform-origin:left center;
    animation-delay: 28s;
    animation-duration: 4s;
}




#dai3{
    opacity: 0;
    position: absolute;
    left:100px;
    top:380px;
    animation-delay: 30s;
    animation-duration: 4s;

}
#shou3{
    opacity: 0;
    position: absolute;
    left:70px;
    top:380px;
    animation-delay: 30s;
    animation-duration: 4s;

}
#thm9{
    opacity: 0;
    position:absolute;
    left:0px;
    top:410px;
    animation-delay: 32s;
    animation-duration: 3s;
}
#thm10{
    opacity: 0;
    position:absolute;
    left:40px;
    top:440px;
    animation-delay: 34s;
    animation-duration: 3s;
}
#lt{
    opacity: 0;
    position:absolute;
    left:190px;
    top:285px;
    animation-delay: 34s;
    animation-duration: 4s;
}
#gt2{
    opacity: 0;
    position:absolute;
    left:188px;
    top:272px;
    animation-delay: 36s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
#btn{
    opacity: 0;
    position:absolute;
    left:0px;
    top:475px;
    width:80px;
    animation-delay: 38s;
    animation-duration: 3s;
}
#reserve{
    opacity: 0;
}