@charset "utf-8";
body{
    font-family: serif;
    /* display:block; */
    /* min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto; */
}
main{
        padding-bottom: 30px;
        position:relative;
        top:120px;
        display:block;
}
h1{
    font-family: sans-serif;
}
p{
    vertical-align: middle;
}
p img{
    
    vertical-align: middle;
}
.op0{
    opacity:0;
}
.shutugen{
    animation-name: shutugen;
    animation-fill-mode: forwards;
    animation-duration: 1s;
}
@keyframes tatesen{
    from{top:235px;height:0px;left:152px;}
    50%{top:100px;height:135px;opacity:1;}
    to{top:100px;height:0px;left:152px;opacity:0;}
}
@keyframes yokosen{
    from{top:100px;left:73px;width:0px;}
    50%{left:73px;width:78px;opacity:1;}
    to{top:100px;left:152px;width:0px;opacity:0;}
}
@keyframes shahen{
    from{top:100px;left:152px;width:0px;transform:rotate(-60deg);transform-origin:left center;}
    50%{left:73px;top:235px;width:157px;opacity:1;transform:rotate(-60deg);transform-origin:left center;}
    to{left:73px;top:235px;width:157px;opacity:0;transform:rotate(-60deg);transform-origin:left center;}
}

@keyframes shutugen{
    from{opacity:0;}
    to{opacity:1;    }
}
@keyframes brinku{
    from {opacity:0;}
    to{opacity:1}
}
.lines{
	opacity:0;
	color:red;
	position: absolute;
	border:solid 1px;
	background:red;
	width:0px;
	height:0px;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	z-index:2;
}
.tatesen{
    animation: tatesen 1s ease 2s;
}
.yokosen{
        animation:yokosen 1s ease 2s;
}
.shahen{
        animation:shahen 1s ease 3s;
}
.brinku{
    animation-name: brinku;
    animation-duration: 1s;
    animation-iteration-count: 4;
    animation-delay: 6s;
    animation-fill-mode: forwards;
}

/*以上は将来的にcommon.cssに移動*/
#next{
    
    cursor: pointer;
}
#grph{
    position:relative;
    top:-50px;
    left:0px;
    width:248px;
    height:240px;

}
#page1{
    display:block;
    position:relative;
    /* display:grid; */
    /* top:120px; */
    /* width:600px; */
    left:0px;
}
#page1>div{
    display:block;
}
#page2{
    display:block;
    position:relative;
    top:0px;
    left:0px;
}
/* #ereap1setumei{
    display:block; */
    /* position:relative; */
    /* float:right; */
    /* left:250px;
} */
.setumeip1{
    opacity:0;
    /* vertical-align: bottom; */
    /* position:absolute; */
    /* left:230px; */
    /* transition:all 1s; */
}
.buhin{
    /* opacity:0; */
    position:absolute;
    vertical-align: bottom;
}
.axgousei{
    top:30px;
    left:20px;
}

#axgousei{
    /* opacity:1; */
    top:60px;
    left:30px;
    transition:all 1s 1s;
}
#akaten{
    top:233px;
    left:149px;
}
#aoten{
    top:98px;
    left:71px;
}
#aeq1{
    top:17px;
    left:31px;
    transition:all 5s 2s;

}
#beqr3{
    top:15px;
    left:116px;
    transition:all 5s 2s;
}
#aeq1.active{
    opacity:1;
    top:250px;
    left:130px;
}
#beqr3.active{
    opacity:1;
    top:90px;
    left:0px;
}
#trgl{
    top:100px;
    left:73px;
    transition: all 1s 3.5s;
}
#liner3{
    top:100px;
    left:73px;
    transition: all 1s 3.5s;
}
#no1{
    top:151px;
    left:300px;
    transition: all 1s 1s;
}
#no1.active{
    opacity:1;
    top:240px;
    left:113px;
}
#no2{
    top:151px;
    left:103px;
    transition: all 1s 1.5s;
}
#no2.active{
    opacity:1;
    top:151px;
    left:103px;
}
#nor3{
    top:149px;
    left:336px;
    transition: all 1s 2s;
}
#nor3.active{
    opacity:1;
    top:164px;
    left:159px;
}
#req2{
    top:151px;
    left:80px;
    transition: all 1s 1.5s;
}
#arufaeq60{
    top:208px;
    left:74px;
    transition: all 1s 1.5s;
}
.setumeip2{
    opacity:0;
    position:absolute;
    /* vertical-align: bottom; */
}
#P1_6{top:0px;left:0px;}
#uhen{top:40px;left:0px;transition: all 1s 2s;}
#kahou{top:80px;left:0px;transition:all 1s 3s;}
#tenkai{top:120px;left:0px;transition: all 1s 4s;}
#sahen{top:160px;left:0px;transition:all 1s 7s;}
#p1_7{top:200px;left:0px;animation-delay: 4s;}

#p1_8{top:440px;left:0px;}
#uhen.active{
    opacity:1;
}
#kahou.active{
    opacity:1;
}
#tenkai.active{
    opacity:1;
}
#sins{    top:108px;    left:40px;transition: all 1s 5s;}
#sins.active{top:139px;left:89px;opacity:1;}
#coss{    top:108px;    left:167px;transition: all 1s 5s;}
#coss.active{top:139px;left:232px;opacity:1;}
#sina{    top:108px;    left:219px;transition: all 1s 5s;}
#sina.active{top:139px;left:180px;opacity:1;}
#cosa{    top:108px;    left:89px;transition: all 1s 5s;}
#cosa.active{top:142px;left:35px;opacity:1;}
#r1{    top:108px;    left:30px;transition: all 1s 6s;}
#r1.active{top:142px;left:20px;opacity:1;}

#r2{    top:108px;    left:30px;transition: all 1s 6s;}
#r2.active{top:142px;left:168px;opacity:1;}

#sahen.active{opacity: 1;}

#hitosii{top:135px;left:16px;}
@keyframes hitosii{
    from{opacity: 0;}
    to{opacity: 1;}
}
.hitosii{
    animation:hitosii 1s ease 0s 4 normal forwards;
}
#axrab{top:246px;left:50px;transition:all 1s;}
#axrab.active{opacity:1;}
#reda{top:427px;left:168px;}
#rcosa{top:427px;left:146px;}
#blueb{top:279px;left:54px;}
#rsina{top:276px;left:30px;}
@keyframes sincos{
    from{opacity:0;}
    to{opacity:1;}
}
@keyframes ab{
    from{opacity:0;}
    50%{opacity:1;}
    to{opacity:0;}
}
.rsincos{
    animation:ab 4s ease 2s infinite;
}
.ab{
    animation:ab 4s ease 0s infinite;
}
footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:30px;
}
button{
    float:right;
}