@charset "utf-8";

/* ベース */
html,body{
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
color:#300;
font-size:12px;
line-height:1.5;
height:100%;
background:url(../img/bg.gif);
background-attachment:fixed;
z-index:0;
}

::selection{
background:#FFD18C;
color:#fff;
}

::-moz-selection{
background:#FFD18C;
color:#fff;
}

#wrapper{
width:100%;
height:auto;
min-height:100%;
margin:auto;
margin-bottom:-31px;
z-index:10;
}

#container{
width:1260px;
margin:auto;
}

#navi{
float:left;
margin-top:10px;
margin-left:26px;
margin-bottom:30px;
}

.content{
float:right;
margin-top:10px;
margin-right:26px;
margin-bottom:20px;
}

#index{
min-height:1100px;
margin-bottom:0px;
}

#logo{
width:427px;
height:220px;
display:block;
position:relative;
z-index:20;
margin-left:-10px;
}

#catchcopy{
width:305px;
height:62px;
margin-left:30px;
position:relative;
z-index:10;
}

#menu{
width:230px;
margin-top:10px;
margin-left:50px;
}

#menu li a{
width:230px;
height:55px;
display:block;
text-indent:-9999px;
}

#menu li  span a{
width:250px;
height:55px;
display:block;
text-indent:-9999px;
background:url(../img/menu_.png) no-repeat;
cursor:default;
position:relative;
z-index:10;
}

#menu li #menu_download a{background-position:0px 0px;}
#menu li #menu_special a{background-position:0px -55px;}

.label{
clear:both;
width:740px;
height:100px;
margin:10px;
margin-bottom:20px;
display:block;
position:relative;
z-index:10;
background:url(../img/label.png) no-repeat;
}

#label_news{background-position:0px 0px;}
#label_introduction{background-position:0px -100px;}
#label_story{background-position:0px -200px;}
#label_character{background-position:0px -300px;}
#label_gallery{background-position:0px -400px;}
#label_stage{background-position:0px -500px;}
#label_download{background-position:0px -600px;}
#label_special{background-position:0px -700px;}
#label_product{background-position:0px -800px;}
#label_point{background-position:0px -900px;}
#label_patch{background-position:0px -1000px;}

#box{
clear:both;
width:800px;
margin-left:-50px;
margin-right:20px;
padding-top:40px;
padding-bottom:10px;
position:relative;
background:#FFFFDF;
box-shadow:#999 1px 1px 4px 1px;
border-radius:5px;
z-index:10;
}

#b_top,#b_bottom{
width:800px;
position:absolute;
background:url(../img/box.jpg) repeat-x;
}

#b_top{
height:30px;
top:0;
border-radius:5px 5px 0px 0px;
}

#b_bottom{
height:20px;
bottom:0;
border-radius:0px 0px 5px 5px;
}

#b_center{
width:760px;
min-height:755px;
margin-left:20px;
margin-right:20px;
position:relative;
z-index:30;
background:url(../img/bg_box.gif);
}

article{
padding:0;
margin-bottom:20px;
}

section{
padding-top:10px;
margin-left:20px;
margin-right:20px;
}

section.reduce{
padding-top:10px;
margin-left:0px;
margin-right:0px;
}

section h3{
clear:both;
color:#FFF;
font-size:18px;
text-indent:10px;
padding:3px;
border:dashed 1px #300;
display:list-item;
list-style:square inside;
font-weight:normal;
background:#F90;
margin-top:5px;
padding-top:5px;
}

section h3 span{
font-size:12px;
margin-left:10px;
}

section h4{
clear:both;
color:#FFF;
font-size:16px;
font-weight:normal;
text-indent:10px;
margin-top:10px;
padding-top:1px;
background:#300;
}

section h5{
clear:both;
font-size:15px;
text-indent:10px;
margin-top:10px;
padding-top:1px;
}

.local{
clear:both;
height:45px;
border-bottom:dotted 5px #300;
}

.local ul li a{
color:#FFF;
font-size:16px;
text-decoration:none;
float:left;
display:block;
margin-left:10px;
margin-right:10px;
padding:10px;
padding-top:5px;
padding-bottom:3px;
background:url(../img/btn.gif);
background-position:0px -50px;
border-radius:5px;
box-shadow:#999 1px 1px 4px 1px;
}

.local ul li a:hover{background-position:0px 0px;}

dt{
float:left;
font-weight:bold;
text-indent:10px;
width:150px;
padding:5px;
display:list-item;
list-style:disc inside;
background:#FEF;
}

dd{
background:#FFF;
padding:5px;
min-width:250px;
text-indent:10px;
border-bottom:dashed 1px #330000;
}

dd.d1{
float:left;
text-indent:5px;
border-bottom:none;
}

dd span{
color:#FFF;
font-size:11px;
background:#300;
padding:1px;
padding-left:2px;
padding-right:3px;
margin-right:10px;
border-radius:3px;
}

#copyright{
clear:both;
width:100%;
margin:auto;
position:relative;
background:url(../img/copyright.gif)repeat-x;
z-index:10;
}

#copyright p,#copyright p a{
clear:both;
color:#300;
font-size:13px;
padding-top:9px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}

#copyright p a:hover{color:#C03;}

.pagetop{
display:none;
position:fixed;
bottom:5px;
right:5px;
z-index:100;
}
.pagetop a{
display:block;
width:50px;
height:50px;
background:#F69;
border-radius:50px;
text-align:center;
color:#fff;
font-size:24px;
text-decoration:none;
line-height:50px;
box-shadow:#999 1px 1px 4px 1px;
}

.pagetop a:hover{
background:#F90;
}

/*フェード*/
.fade a{  
-webkit-transition: 0.2s ease-in-out;  
-moz-transition: 0.2s ease-in-out;  
-o-transition: 0.2s ease-in-out;  
transition: 0.2s ease-in-out;  
}  

.fade a:hover {  
filter: alpha(opacity=50);  
}   

/*背景*/
#top,#bottom{
width:100%;
position:fixed;
z-index:10;
}

#top{top:0;height:45px;background:url(../img/top.png) repeat-x;}
#bottom{bottom:0;height:250px;background:url(../img/bottom.png) repeat-x;}

#left,#right{
width:310px;
height:auto;
min-height:100%;
position:fixed;
z-index:0;
background:url(../img/side.png) repeat-y;
}

#left{left:0;margin-left:20px;}
#right{right:0;margin-right:20px;}