.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;
}

<!DOCTYPE html>
<html lang="ja">
<head>

<link rel="StyleSheet" type="text/css" href="publicstyle2.css">

<style>

</style>
<script>

//スクリプト部分です。

window.onload = function() {

var PULL = document.getElementById("pullfire");
var window = document.getElementById("SETING");
var BACK = document.getElementById("back");
    PULL.onclick = function() {
         window.style.display = "block";
         PULL.style.display = "none";
};
    BACK.onclick = function() {
         window.style.display = "none";
         PULL.style.display = "block";
};

var CT = document.getElementById("center");

var HITs1 = document.getElementById("hitsound1");
var HITs2 = document.getElementById("hitsound2");
var HITs3 = document.getElementById("hitsound3");
var HITs4 = document.getElementById("hitsound4");
var HITs5 = document.getElementById("hitsound5");
var HITs6 = document.getElementById("hitsound6");
var HITs7 = document.getElementById("hitsound7");
var HITs8 = document.getElementById("hitsound8");
var HITs9 = document.getElementById("hitsound9");
var HITs10 = document.getElementById("hitsound10");

var A = document.getElementById("a");
var B = document.getElementById("b");
var C = document.getElementById("c");
var D = document.getElementById("d");
var E = document.getElementById("e");
var F = document.getElementById("f");
var G = document.getElementById("g");
var H = document.getElementById("h");
var I = document.getElementById("i");
var J = document.getElementById("j");
var K = document.getElementById("k");
var L = document.getElementById("l");
var M = document.getElementById("m");
var N = document.getElementById("n");
var O = document.getElementById("o");
var P = document.getElementById("p");
var Q = document.getElementById("q");
var R = document.getElementById("r");
var S = document.getElementById("s");
var T = document.getElementById("t");
var U = document.getElementById("u");
var V = document.getElementById("v");
var W = document.getElementById("w");
var X = document.getElementById("x");
var Y = document.getElementById("y");
var Z = document.getElementById("z");

var SCORE = document.getElementById("Score");

A.onclick = function() {
 A.style.display = "none";
 B.style.display = "block";
 HITs1.play();
 SCORE.innerHTML = "=";
};

B.onclick = function() {
 B.style.display = "none";
 C.style.display = "block";
 HITs2.play();
 SCORE.innerHTML = "==";
};

C.onclick = function() {
 C.style.display = "none";
 D.style.display = "block";
 HITs3.play();
 SCORE.innerHTML = "===";
};

D.onclick = function() {
 D.style.display = "none";
 E.style.display = "block";
 HITs4.play();
 SCORE.innerHTML = "====";
};

E.onclick = function() {
 E.style.display = "none";
 F.style.display = "block";
 HITs5.play();
 SCORE.innerHTML = "=====";
};

F.onclick = function() {
 F.style.display = "none";
 G.style.display = "block";
 HITs6.play();
 SCORE.innerHTML = "======";
};

G.onclick = function() {
 G.style.display = "none";
 H.style.display = "block";
 HITs7.play();
 SCORE.innerHTML = "=======";
};

H.onclick = function() {
 H.style.display = "none";
 I.style.display = "block";
 HITs8.play();
 SCORE.innerHTML = "========";
};

I.onclick = function() {
 I.style.display = "none";
 J.style.display = "block";
 HITs9.play();
 SCORE.innerHTML = "=========";
};

J.onclick = function() {
 J.style.display = "none";
 K.style.display = "block";
 HITs10.play();
 SCORE.innerHTML = "==========";
};

K.onclick = function() {
 K.style.display = "none";
 L.style.display = "block";
 HITs1.play();
 SCORE.innerHTML = "===========";
};

L.onclick = function() {
 L.style.display = "none";
 M.style.display = "block";
 HITs2.play();
 SCORE.innerHTML = "============";
};

M.onclick = function() {
 M.style.display = "none";
 N.style.display = "block";
 HITs3.play();
 SCORE.innerHTML = "=============";
};

N.onclick = function() {
 N.style.display = "none";
 O.style.display = "block";
 HITs4.play();
 SCORE.innerHTML = "==============";
};

O.onclick = function() {
 O.style.display = "none";
 P.style.display = "block";
 HITs5.play();
 SCORE.innerHTML = "===============";
};

P.onclick = function() {
 P.style.display = "none";
 Q.style.display = "block";
 HITs6.play();
 SCORE.innerHTML = "================";
};

Q.onclick = function() {
 Q.style.display = "none";
 R.style.display = "block";
 HITs7.play();
 SCORE.innerHTML = "=================";
};

R.onclick = function() {
 R.style.display = "none";
 S.style.display = "block";
 HITs8.play();
 SCORE.innerHTML = "==================";
};

S.onclick = function() {
 S.style.display = "none";
 T.style.display = "block";
 HITs9.play();
 SCORE.innerHTML = "===================";
};

T.onclick = function() {
 T.style.display = "none";
 U.style.display = "block";
 HITs10.play();
 SCORE.innerHTML = "====================";
};

U.onclick = function() {
 U.style.display = "none";
 V.style.display = "block";
 HITs1.play();
 SCORE.innerHTML = "=====================";
};

V.onclick = function() {
 V.style.display = "none";
 W.style.display = "block";
 HITs2.play();
 SCORE.innerHTML = "======================";
};

W.onclick = function() {
 W.style.display = "none";
 X.style.display = "block";
 HITs3.play();
 SCORE.innerHTML = "=======================";
};

X.onclick = function() {
 X.style.display = "none";
 Y.style.display = "block";
 HITs4.play();
 SCORE.innerHTML = "========================";
};

Y.onclick = function() {
 Y.style.display = "none";
 Z.style.display = "block";
 HITs5.play();
 SCORE.innerHTML = "=========================";
};

Z.onclick = function() {
 Z.style.display = "none";
 A1.style.display = "block";
 HITs6.play();
 SCORE.innerHTML = "==========================";
};

var A1 = document.getElementById("a1");
var B1 = document.getElementById("b1");
var C1 = document.getElementById("c1");
var D1 = document.getElementById("d1");
var E1 = document.getElementById("e1");
var F1 = document.getElementById("f1");
var G1 = document.getElementById("g1");
var H1 = document.getElementById("h1");
var I1 = document.getElementById("i1");
var J1 = document.getElementById("j1");
var K1 = document.getElementById("k1");
var L1 = document.getElementById("l1");
var M1 = document.getElementById("m1");
var N1 = document.getElementById("n1");
var O1 = document.getElementById("o1");
var P1 = document.getElementById("p1");
var Q1 = document.getElementById("q1");
var R1 = document.getElementById("r1");
var S1 = document.getElementById("s1");
var T1 = document.getElementById("t1");
var U1 = document.getElementById("u1");
var V1 = document.getElementById("v1");
var W1 = document.getElementById("w1");
var X1 = document.getElementById("x1");
var Y1 = document.getElementById("y1");
var Z1 = document.getElementById("z1");

A1.onclick = function() {
 A1.style.display = "none";
 B1.style.display = "block";
 HITs7.play();
 SCORE.innerHTML = "===========================";
};

B1.onclick = function() {
 B1.style.display = "none";
 C1.style.display = "block";
 HITs8.play();
 SCORE.innerHTML = "============================";
};

C1.onclick = function() {
 C1.style.display = "none";
 D1.style.display = "block";
 HITs9.play();
 SCORE.innerHTML = "=============================";
};

D1.onclick = function() {
 D1.style.display = "none";
 E1.style.display = "block";
 HITs10.play();
 SCORE.innerHTML = "==============================";
};

E1.onclick = function() {
 E1.style.display = "none";
 F1.style.display = "block";
 HITs1.play();
 SCORE.innerHTML = "===============================";
};

F1.onclick = function() {
 F1.style.display = "none";
 G1.style.display = "block";
 HITs2.play();
 SCORE.innerHTML = "================================";
};

G1.onclick = function() {
 G1.style.display = "none";
 H1.style.display = "block";
 HITs3.play();
 SCORE.innerHTML = "=================================";
};

H1.onclick = function() {
 H1.style.display = "none";
 I1.style.display = "block";
 HITs4.play();
 SCORE.innerHTML = "==================================";
};

I1.onclick = function() {
 I1.style.display = "none";
 J1.style.display = "block";
 HITs5.play();
 SCORE.innerHTML = "===================================";
};

J1.onclick = function() {
 J1.style.display = "none";
 K1.style.display = "block";
 HITs6.play();
 SCORE.innerHTML = "====================================";
};

K1.onclick = function() {
 K1.style.display = "none";
 L1.style.display = "block";
 HITs7.play();
 SCORE.innerHTML = "=====================================";
};

L1.onclick = function() {
 L1.style.display = "none";
 M1.style.display = "block";
 HITs8.play();
 SCORE.innerHTML = "======================================";
};

M1.onclick = function() {
 M1.style.display = "none";
 N1.style.display = "block";
 HITs9.play();
 SCORE.innerHTML = "=======================================";
};

N1.onclick = function() {
 N1.style.display = "none";
 O1.style.display = "block";
 HITs10.play();
 SCORE.innerHTML = "========================================";
};

O1.onclick = function() {
 O1.style.display = "none";
 P1.style.display = "block";
 HITs1.play();
 SCORE.innerHTML = "=========================================";
};

P1.onclick = function() {
 P1.style.display = "none";
 Q1.style.display = "block";
 HITs2.play();
 SCORE.innerHTML = "==========================================";
};

Q1.onclick = function() {
 Q1.style.display = "none";
 R1.style.display = "block";
 HITs3.play();
 SCORE.innerHTML = "===========================================";
};

R1.onclick = function() {
 R1.style.display = "none";
 S1.style.display = "block";
 HITs4.play();
 SCORE.innerHTML = "============================================";
};

S1.onclick = function() {
 S1.style.display = "none";
 T1.style.display = "block";
 HITs5.play();
 SCORE.innerHTML = "=============================================";
};

T1.onclick = function() {
 T1.style.display = "none";
 U1.style.display = "block";
 HITs6.play();
 SCORE.innerHTML = "==============================================";
};

U1.onclick = function() {
 U1.style.display = "none";
 V1.style.display = "block";
 HITs7.play();
 SCORE.innerHTML = "===============================================";
};

V1.onclick = function() {
 V1.style.display = "none";
 W1.style.display = "block";
 HITs8.play();
 SCORE.innerHTML = "================================================";
};

W1.onclick = function() {
 W1.style.display = "none";
 X1.style.display = "block";
 HITs9.play();
 SCORE.innerHTML = "=================================================";
};

X1.onclick = function() {
 X1.style.display = "none";
 Y1.style.display = "block";
 HITs10.play();
 SCORE.innerHTML = "==================================================";
};

Y1.onclick = function() {
 Y1.style.display = "none";
 Z1.style.display = "block";
 HITs1.play();
 SCORE.innerHTML = "===================================================";
};

Z1.onclick = function() {
 Z1.style.display = "none";

SCORE.innerHTML = "EXCELLENT!!====================================================";
 HITs2.play(); 
};

//ここからコードを記述してください。
var OBJ2 = document.getElementById("hamoneffect");
var OBJ = document.getElementById("animeteeffect");
   function animedown() {
     OBJ.style.width = "629px";
     OBJ.style.height = "629px";
     OBJ.style.backgroundColor = "black";

};

function animeup() {
     OBJ.style.width = "650px";
     OBJ.style.height = "650px";
     OBJ.style.backgroundColor = "white";
};

A.addEventListener("click",function(){
     OBJ2.style.width = "800px";
     OBJ2.style.height = "800px";

},false);

Z1.addEventListener("click",function(){
     OBJ2.style.width = "100px";
     OBJ2.style.height = "100px";

},false);

setInterval(animedown,1000);

function inter() {
setInterval(animeup,1000);
};

setTimeout(inter,500);

var BTNEF2 = document.getElementById("BTN2");

var GAMESTART = document.getElementById("startfire");
    GAMESTART.onclick = function() {
        A.style.display = "block";
        GAMESTART.style.display = "none";
        BTNEF2.play();
};

var x = 0;
var CUNT = document.getElementById("Count");
var CUNT2 = document.getElementById("Count2");
function counter() {
x++;
CUNT.innerHTML = x;
};

GAMESTART.addEventListener("click", function(){
 
 ClearID = setInterval(counter,10);
}, false );

var clickCT = 1;
CT.onclick = function() {
clickCT++;
CUNT2.innerHTML = clickCT;
CUNT2.style.backgroundColor = "#F08080";
setTimeout(function() {
CUNT2.style.backgroundColor = "#FFFFFF";}
,20);
};

var ResultSC = document.getElementById("Result");

Z1.addEventListener("click", function() {
clearInterval(ClearID);
var answer1 = x * 2;
var answer2 = 10000 - answer1;
var answer3 = clickCT - 52;
var answer4 = answer3 * 300;
var answer5 = answer2 - answer4;

ResultSC.style.display = "block";
ResultSC.style.width = "720px";
ResultSC.innerHTML = "SCORE:　" + answer5 * 52 + "　Miss:　" + answer3 +  "<br>Click to back";
}, false);

ResultSC.onclick = function() {
location.reload(false);
};

var BEAT1 = document.getElementById("beating");
var BEAT2 = document.getElementById("beating2");

function Beat2() {
BEAT2.play();
};

function Beat1() {
BEAT1.play();
};

function beatlag() {
setInterval(Beat2,2000);
};

setInterval(Beat1,2000);

setTimeout(beatlag,1000);

var BTNEF1 = document.getElementById("BTN1");

GAMESTART.addEventListener("mouseover",function() {
BTNEF1.play();
},false)

};

</script>

</head>
<body id="GodTag">

<div class="fixedlogo">
<h2><a href="index.html">　Mouse Training Var.1.03　</a></h2>
</div>

<div class="setingpull" id="pullfire">
<h3>Option</h3>
</div>

<div class="seting" id="SETING">
<h2>setting option</h2><br>

<div class="startbtn" id="startfire">
<h1>Click to start</h1>
</div>

</div>

</div>
</div>

</body>
</html>