.circle1{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle2{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle3{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle4{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle5{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle6{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle7{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle8{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle9{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle10{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle11{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle12{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle13{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle14{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle15{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle16{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle17{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle18{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle19{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle20{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle21{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle22{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle23{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle24{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle25{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle26{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
/*サークルは26ごとに分けられています。新しくサークルを増やしたい場合、なるべく26で区切ることをおすすめします。*/
.circle1a{
width:50px;
height:50px;
position:absolute; top:0px;left:0;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle2a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle3a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle4a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle5a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle6a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle7a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle8a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle9a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle10a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle11a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle12a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle13a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle14a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle15a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle16a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle17a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle18a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle19a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle20a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle21a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle22a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle23a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle24a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle25a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}
.circle26a{
width:50px;
height:50px;
position:absolute; top:0px;left:0px;
background-color:#CCCCCC;
transition:all 0.3s;
border-radius:25px;
display:none;
}