@charset "utf-8";




nav#top{
display:table-cell;
width:780px;
vertical-align:top;
background-color:#cccccc;
}


/* ボックス */

nav#top ul{
width:780px;
position:relative;
}

nav#top ul li a.gakuen-box{
color:#ffffff;
display:inline-block;
width:220px;
height:220px;
}



nav#top ul li a#gakuen1{
background-color:#333366;
position:absolute;
top:30px;
left:140px;
transform: rotate( 15deg );
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}

nav#top ul li a#gakuen1 span.eng{
display:inline-block;
transform: rotate( -15deg );
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
font-size:26px;
position:absolute;
top:30px;
left:10px;
}

nav#top ul li a#gakuen1 span.jpn{
display:inline-block;
transform: rotate( -15deg );
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
position:absolute;
top:130px;
left:90px;
}


nav#top ul li a#gakuen1:hover{
background-color:#000000;
color:#00FFFF;
}

nav#top ul li a#gakuen2{
background-color:#999966;
position:absolute;
top:60px;
left:450px;
transform: rotate( 40deg );
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
}

nav#top ul li a#gakuen2 span.eng{
display:inline-block;
transform: rotate( -40deg );
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
font-size:26px;
position:absolute;
top:40px;
left:10px;
}

nav#top ul li a#gakuen2 span.jpn{
display:inline-block;
transform: rotate( -40deg );
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
position:absolute;
top:140px;
left:100px;
}


nav#top ul li a#gakuen2:hover{
background-color:#000000;
color:#00FFFF;
}


nav#top ul li a#gakuen3{
background-color:#CC99CC;
position:absolute;
top:300px;
left:50px;
transform: rotate( -5deg );
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
}

nav#top ul li a#gakuen3 span.eng{
display:inline-block;
transform: rotate( 5deg );
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
font-size:26px;
position:absolute;
top:30px;
left:10px;
}

nav#top ul li a#gakuen3 span.jpn{
display:inline-block;
transform: rotate( 5deg );
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
position:absolute;
top:130px;
left:90px;
}


nav#top ul li a#gakuen3:hover{
background-color:#000000;
color:#00FFFF;
}


nav#top ul li a#gakuen4{
background-color:#0099CC;
position:absolute;
top:60px;
left:450px;
}

nav#top ul li a#gakuen4 span.eng{
display:inline-block;
font-size:26px;
position:absolute;
top:30px;
left:10px;
}

nav#top ul li a#gakuen4 span.jpn{
display:inline-block;
position:absolute;
top:160px;
left:90px;
}


nav#top ul li a#gakuen4:hover{
background-color:#000000;
color:#00FFFF;
}


nav#top ul li a#gakuen5{
background-color:#336633;
position:absolute;
top:360px;
left:500px;
transform: rotate( 35deg );
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
}

nav#top ul li a#gakuen5 span.eng{
display:inline-block;
transform: rotate( -35deg );
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
font-size:26px;
position:absolute;
top:50px;
left:10px;
}

nav#top ul li a#gakuen5 span.jpn{
display:inline-block;
transform: rotate( -35deg );
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
position:absolute;
top:150px;
left:90px;
}


nav#top ul li a#gakuen5:hover{
background-color:#000000;
color:#00FFFF;
}


nav#top ul li a#gakuen6{
background-color:#54637C;
position:absolute;
top:640px;
left:420px;
transform: rotate( 5deg );
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}

nav#top ul li a#gakuen6 span.eng{
display:inline-block;
transform: rotate( -5deg );
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
font-size:26px;
position:absolute;
top:30px;
left:10px;
}

nav#top ul li a#gakuen6 span.jpn{
display:inline-block;
transform: rotate( -5deg );
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
position:absolute;
top:150px;
left:90px;
}


nav#top ul li a#gakuen6:hover{
background-color:#000000;
color:#00FFFF;
}