@charset "utf-8";

/* ベース */
html,body{
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
color:#FFF;
font-size:8px;
line-height:1.5;
letter-spacing:1.5px;
height:100%;
background:url(../img/bg_body.jpg) center center;
position:relative;
z-index:1000;
}

#wrapper{
}

#header{
width:100%;
min-width:1260px;
height:40px;
background:url(../img/bg_body.jpg) repeat-x;
border-bottom:#6FF solid 1px;
box-shadow:rgba(0, 0, 0, 0.6) 0px 0px 10px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0.6) 0px 0px 10px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0.6) 0px 0px 10px 0px;
position:relative;
z-index:0;
}

#bar{
position:absolute;
width:100%;
height:168px;
margin-top:-50px;
background:url(../img/bar.png);
background-repeat:repeat-x;
z-index:200;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.content{
width:100%;
min-width:1260px;
background:url(../img/bg_content.jpg) no-repeat center left fixed;
}

.area{
width:1260px;
height:960px;
margin:auto;
position:relative;
background:rgba(0,0,0,0.2);
z-index:900;
}

#main{
width:1260px;
height:960px;
background:url(../img/main.png) no-repeat;
position:absolute;
}

#main ul{
position:absolute;
margin-top:800px;
margin-left:170px;
}

#main ul li{
display:inline-block;
vertical-align:top;
margin-left:20px;
margin-right:20px;
}

#main ul li a{
display:block;
}

#main ul li a:hover{
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#footer{
width:100%;
min-width:1260px;
background:url(../img/bg_body.jpg) repeat-x;
border-top:#6FF solid 1px;
box-shadow:rgba(0, 0, 0, 0.6) 0px 0px 10px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0.6) 0px 0px 10px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0.6) 0px 0px 10px 0px;
padding-top:8px;
padding-bottom:40px;
position:relative;
z-index:300;
}

#footer p{text-align:center;}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#clock{
position:fixed;
color:rgba(0,0,0,0.0);
font-size:60em;
font-weight:bold;
text-shadow: 3px 3px 1px rgba(255,255,255,0.1);
bottom:0;
margin:20px;
margin-bottom:-0px;
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
z-index:0;
}

#circle{
width:1000px;
height:1000px;
top:0;
right:0;
margin-top:-500px;
margin-right:-500px;
background:url(../img/circle.png) no-repeat;
-webkit-animation: spin 30s linear infinite;
-moz-animation: spin 30s linear infinite;
-ms-animation: spin 30s linear infinite;
-o-animation: spin 30s linear infinite;
animation: spin 30s linear infinite;
position:fixed;
z-index:0;
}

@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}