@charset "utf-8";
body{
    font-family: serif;
}
h1{
    font-family: sans-serif;
}
@keyframes moverighttop{
    from{left:20px;    }
    to{        top:80px;        left:400px;    }
}
@keyframes movelefttop{
    from{opacity: 0;        top:720px;        left:20px;    }
    to{        opacity: 1;        top:80px;        left:0px;    }
}
@keyframes shutugen{
    from{opacity:0;}
    to{opacity:1;    }
}
@keyframes kugiri{
    from{height:0px;}
    to{height:90px;    }
}
@keyframes blink{
    0%{        opacity:1;        background-color: red;        font-size: x-large;    }
    25%{        background-color: yellow;        font-size: medium;    }
    50%{        background-color: red;        font-size: x-large;    }
    75%{        background-color: yellow;        font-size: medium;        }
    95%{        background-color: red;        font-size: x-large;    }
    100%{background-color: unset;        font-size: medium;        opacity:1;    }
}
@keyframes blinkinc{
    0%{        opacity:1;        background-color: red;        font-size: x-large;    }
    25%{        background-color: yellow;        font-size: medium;    }
    50%{        background-color: red;        font-size: x-large;    }
    75%{        background-color: yellow;        font-size: medium;        }
    95%{        background-color: red;        font-size: x-large;    }
    100%{        background-color: unset;        font-size: medium;        opacity:1;}
}
@keyframes tenten1{
    from{left:145px;        top:185px;        opacity: 0;}
    to{left:457px;        top:70px;        opacity: 1;    }
}
@keyframes n0{
    from{left:120px;        top:185px;    }
    to{left:507px;        top:70px;    }
}
@keyframes tenten2{
    from{opacity: 0;        left:145px;        top:185px;}
    to{opacity: 1;        left:550px;        top:70px;    }
}
@keyframes n2{
    from{left:145px;        top:185px;}
    to{left:600px;        top:70px;    }
}
@keyframes tenten3{
    from{opacity: 0;        left:145px;        top:185px;}
    to{opacity: 1;        left:643px;        top:70px;    }
}
@keyframes n01{
    from{left:190px;        top:210px;}
    to{left:507px;        top:100px;    }
}
@keyframes n02{
    from{left:190px;        top:210px;    }
    to{left:600px;        top:100px;    }
}
@keyframes purasu1{
    from{left:417px;        top:263px;}    
    to{left:640px;        top:100px;    }
}
@keyframes purasu2{
    from{left:394px;        top:342px;}
    to{left:467px;        top:100px;    }
}
@keyframes mainasu{
    from{left:426px;        top:305px;}
    to{left:553px;        top:100px;    }
}
@keyframes zouka1{
    from{left:211px;top:405px;}
    to{left:640px;top:150px;border-radius: 0%;}
}
@keyframes zouka2{
    from{left:211px;top:405px;}
    to{left:467px;top:150px;border-radius: 0%;}
}
@keyframes genshou{
    from{left:330px;top:405px;}
    to{left:553px;        top:150px;        border-radius: 0%;    }
}
@keyframes f0{
    from{left:138px;    top:450px;}
    to{left:507px;      top:128px;  border-radius: 0%;    }
}
@keyframes f2{
    from{left:310px;        top:450px;}
    to{left: 600px;        top:128px;        border-radius: 0%;    }
}

#pre{
    position:absolute;
    top:80px;
    z-index:0;
}
#main{
    position: absolute;
    top:1440px;
}
#sechyou{
    position: absolute;
    top:1440px;
}
#next{
    position:absolute;
    z-index: 2;
}
#nbtn{
    position:absolute;
    top:70px;
    z-index:2;
}
#btn{
    opacity:0;
}
.btn{
    position:absolute;
    animation-name: shutugen;
    animation-delay: 3s;
    animation-fill-mode: forwards;    
}
.shutugen{
    animation-name: shutugen;
    animation-fill-mode: forwards;
    animation-duration: 2s;

}
.moverighttop{
    opacity:1;
    position: absolute;
    animation-name: moverighttop;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    z-index:0;
}
.movelefttop{
    position: absolute;
    animation-name: movelefttop;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    z-index:0;
}
#pre p.hojo{
    color:cadetblue;
}
#pre p.premain{
    padding-left:50px ;
}
.fnc{
    vertical-align: middle;
}
.op0{
    opacity:0;
}
#ereakugiri{
    position:absolute;
    top:0px;
    left:93px;
    height:0px;
    overflow: hidden;
}
.expandkugiri{
    animation-name: kugiri;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-delay: 5s;
}
.n0{
    position:absolute;
    left:110px;
    top:185px;
    border-radius: 50%;
    animation:blink 2s ease 2s,n0 3s ease 4s;
    animation-fill-mode: forwards;

}
.n2{
    position:absolute;
    left:129px;
    top:184px;
    border-radius: 50%;
    animation:blink 2s ease 2s,n2 3s ease 4s;
    animation-fill-mode: forwards;

}
.tenten1{
    position:absolute;
    left:129px;
    top:184px;
    animation-name:tenten1;
    animation-delay: 5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.tenten2{
    position:absolute;
    left:129px;
    top:184px;
    animation-name:tenten2;
    animation-delay: 5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.tenten3{
    position:absolute;
    left:129px;
    top:184px;
    animation-name:tenten3;
    animation-delay: 5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.n01{
    position:absolute;
    left:177px;
    top:224px;
    border-radius: 50%;
    animation:blink 2s ease 2s,n01 3s ease 4s;
    animation-fill-mode: forwards;
}
.n02{
    position:absolute;
    left:177px;
    top:224px;
    border-radius: 50%;
    animation:blink 2s ease 2s,n02 3s ease 4s;
    animation-fill-mode: forwards;
}
.purasu1{
    position:absolute;
    left:405px;
    top:264px;
    border-radius: 50%;
    animation:blink 2s ease 2s,purasu1 3s ease 4s;
    animation-fill-mode: forwards;
    
}
.purasu2{
    position:absolute;
    left:383px;
    top:344px;
    border-radius: 50%;
    animation:blink 2s ease 2s,purasu2 3s ease 4s;
    animation-fill-mode: forwards;
}
.mainasu{
    position:absolute;
    left:416px;
    top:305px;
    border-radius: 50%;
    animation:blink 2s ease 2s,mainasu 3s ease 4s;
    animation-fill-mode: forwards;
}
.zouka1{
    position:absolute;
    left:211px;
    top:405px;
    border-radius: 50%;
    animation:blinkinc 2s ease 2s,zouka1 3s ease 4s;
    animation-fill-mode: forwards;
}
.zouka2{
    position:absolute;
    left:211px;
    top:405px;
    border-radius: 50%;
    animation:blinkinc 2s ease 2s,zouka2 3s ease 4s;
    animation-fill-mode: forwards;
}
.genshou{
    position:absolute;
    left:330px;
    top:405px;
    border-radius: 50%;
    animation:blinkinc 2s ease 2s,genshou 3s ease 4s;
    animation-fill-mode: forwards;
}
.f0{
    position:absolute;
    left:138px;
    top:450px;
    border-radius: 50%;
    animation:blink 2s ease 2s,f0 3s ease 4s;
    animation-fill-mode: forwards;
}
.f2{
    position:absolute;
    left:310px;
    top:450px;
    border-radius: 50%;
    animation:blink 2s ease 2s,f2 3s ease 4s;
    animation-fill-mode: forwards;
}