﻿@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:12px;
line-height:1.5;
letter-spacing:1.1px;
background:url(../img/bg_body.jpg);
}

#wrapper{
width:100%;
height:auto;
min-height:100%;
margin:auto;
position:relative;
z-index:30;
}

#header{
width:100%;
min-width:1260px;
height:110px;
background:url(../img/bg_header.png) repeat-x top center;
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:80;
border-top:solid 1px #000;
}

.header{
width:1260px;
margin:auto;
margin-bottom:10px;
}

h1.logo{
position:absolute;
display:block;
margin-left:40px;
z-index:100;
}

h1.logo a:hover{
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.7;
}

ul.nav{
text-align:right;
margin-top:16px;
margin-right:30px;
}

ul.nav li{
display:inline-block;
vertical-align:top;
}

ul.nav li a{
display:block;
width:195px;
height:85px;
background:url(../img/nav.png) no-repeat;
position:relative;
z-index:120;
margin-left:10px;
margin-right:10px;
}

ul.nav li#nav1 a:link{background-position:0px 0px;}
ul.nav li#nav2 a:link{background-position:-195px 0px;}
ul.nav li#nav3 a:link{background-position:-390px 0px;}

ul.nav li#nav1 a:hover{background-position:0px -85px;}
ul.nav li#nav2 a:hover{background-position:-195px -85px;}
ul.nav li#nav3 a:hover{background-position:-390px -85px;}

ul.nav li#nav1 a.active{background-position:0px -170px;}
ul.nav li#nav2 a.active{background-position:-195px -170px;}
ul.nav li#nav3 a.active{background-position:-390px -170px;}

.bg{
height:740px;
width:1240px;
margin:auto;
position:relative;
z-index:50;
margin-top:30px;
margin-bottom:25px;
border:1px solid #003;
}


/********************************************************************/

#main{
background:url(../img/main.jpg) no-repeat;
background-position:center center;
}

#main ul li{
display:block;
position:absolute;
}

#main ul li#m1{
margin-left:526px;
margin-top:43px;
z-index:10;
}

#main ul li#m2{
margin-left:20px;
margin-top:122px;
z-index:50;
}

#main ul li#m3{
margin-left:32px;
margin-top:322px;
z-index:40;
}

#main ul li#m4{
margin-left:37px;
margin-top:399px;
z-index:20;
}

#main ul li#m5{
margin-left:298px;
margin-top:402px;
z-index:30;
}

#main ul li#m6{
margin-left:22px;
margin-top:519px;
z-index:40;
}

#main ul li#m7{
margin-left:950px;
margin-top:322px;
z-index:40;
}

#main ul li#m8{
margin-left:1030px;
margin-top:11px;
z-index:70;
}

/********************************************************************/

#about{
background:url(../img/about.jpg) no-repeat;
background-position:center center;
}

#about ul li{
display:block;
position:absolute;
}

#about ul li#a1{
margin-left:125px;
margin-top:133px;
}

#about ul li#a2{
margin-left:690px;
margin-top:133px;
}

#about ul li#a3{
margin-left:20px;
margin-top:374px;
}

#about ul li#a4{
margin-left:47px;
margin-top:448px;
}

#about ul li#a5{
margin-left:598px;
margin-top:448px;
}


/********************************************************************/

#story{
background:url(../img/story.jpg) no-repeat;
background-position:center center;
}

/********************************************************************/

#heroine{
background:url(../img/heroine.jpg) no-repeat;
background-position:center center;
}

#heroine ul{
text-align:center;
margin-top:160px;
}

#heroine ul li{
display:inline-block;
}

#heroine ul li a{
display:block;
width:172px;
height:500px;
background:url(../img/heroine_menu.png) no-repeat;
}

#heroine ul li#h1 a:link{background-position:0px 0px;}
#heroine ul li#h2 a:link{background-position:-172px 0px;}
#heroine ul li#h3 a:link{background-position:-344px 0px;}
#heroine ul li#h4 a:link{background-position:-516px 0px;}
#heroine ul li#h5 a:link{background-position:-688px 0px;}
#heroine ul li#h6 a:link{background-position:-860px 0px;}
#heroine ul li#h7 a:link{background-position:-1032px 0px;}

#heroine ul li a:hover{
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}

/********************************************************************/

#footer{
width:100%;
min-width:1250px;
padding-top:30px;
padding-bottom:40px;
background:url(../img/bg_footer.jpg) repeat-x;
position:relative;
z-index:100;
}

.footer{
width:1250px;
margin:auto;
}

.footer ul{
text-align:right;
}

.footer li{
display:inline-block;
margin-left:10px;
}

.footer li img{
border:solid 1px #FFF
}

.footer li img:hover{
filter: alpha(opacity=40);
-moz-opacity:0.4;
opacity:0.4;
}

.footer p{
text-align:right;
margin:10px;
margin-right:0px;
margin-bottom:0px;
}
/********************************************************************/