@charset"UTF-8";
/*リセット*/
html {
  height : 100%;
  width : 100%;
}

body,div,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd,img,form,textarea,table,th,td{
  margin: 0;
  padding : 0;
}

h1,h2,h3,h4,h5,h6 { font-size : 100%; }

ul,li{ list-style : none; }

img { border : 0; }

/*html5*/
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
display:block;}

body{
font-size: 12px;
line-height: 1.7;
font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","Osaka", sans-serif;
background:url(../images/wp.jpg) repeat;
}

a {
color: #007bc8;
text-decoration: none;
}

a:hover{
color: #e683af;
text-decoration: underline;
}

a:visited,a:active{
color: #007bc8;
text-decoration: none;
}

/*nav*/
#global_nav{
position: absolute;
width: 100%;
height: 70px;
background: url(../images/nav_bg.png) repeat-x;
overflow: hidden;
z-index: 200;
margin: 0;
top: 730px;
}

#global_nav ul{
width: 917px;
height: 60px;
margin: 5px auto;
}

#global_nav li{
float: left;
height: 60px;
width: 121px;
overflow: hidden !important;
margin: 0 5px;
}

/*#global_nav a{
display : block;
text-indent: 100%;
white-space: nowrap;
height : 70px;
overflow: hidden;
}*/


#container{
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
margin: 0 auto;
background:url(../images/bg.png) no-repeat top 20px center fixed;
}

#pagetop{
bottom: 0;
right: 0;
position: fixed;
z-index: 100;
width: 141px;
height: 86px;
}

#top{
width: 1030px;
height: 750px;
margin: 0 auto 300px auto;
z-index: 1;
overflow: hidden;
text-align: center;
position: relative;
}

#top h1{
width: 292px;
height: 13px;
margin: 5px 0 0 732px;
}

#top_dl{
width: 234px;
height: 98px;
position: absolute;
display: block;
left: 0px;
top: 512px;
z-index: 10;
}

#top_patch{
width: 234px;
height: 98px;
position: absolute;
display: block;
left: 0px;
top: 620px;
z-index: 10;
}

/*story*/
#story{
width: 980px;
height: 700px;
padding: 110px 0 0 0;
margin: 0 auto 300px auto;
overflow: hidden;
}

#story h1{
width: 116px;
height: 53px;
display: block;
margin: 0 0 20px 100px;
}

#story_inner{
width: 800px;
height: 500px;
margin: 0 auto;
overflow: hidden;
background: url(../images/story_bg.jpg) no-repeat;
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
border: solid 1px #797c82;
}

.slider_s{
width: 800px;
height: 500px;
overflow: hidden;
}

#story1{
margin: 35px 0 0 20px;
}

#story2{
margin: 20px 0 0 20px;
}

#story3{
margin: 30px 0 0 20px;
}

/*chara*/
#character{
width: 980px;
height: 700px;
padding: 110px 0 0 0;
margin: 0 auto 300px auto;
overflow: hidden;
}

#character h1{
width: 220px;
height: 40px;
display: block;
margin: 0 0 20px 100px;
}

#character h2{
width: 346px;
height: 24px;
display: block;
margin: 10px auto;
}

#cha_inner{
width: 800px;
height: 500px;
margin: 0 auto;
overflow: auto;
background: url(../images/chara_bg.jpg) no-repeat;
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
border: solid 1px #797c82;
}

.slider_c{
width: 800px;
height: 500px;
overflow: hidden;
}

.slider_c li{
width: 118px;
height: 130px;
float: left;
margin: 3px;
display: block;
}

.slider_c a:hover{
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity:0.75;
}

#cha1{
width: 762px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}

#cha2{
width: 762px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}

#cha3{
width: 762px;
height: 500px;
margin: 0 auto;
overflow: auto;
}

/*キャラ紹介*/
#chara_inner{
width: 800px;
height: 600px;
overflow: hidden;
margin: 0 auto;
}

#chara_inner_nav{
position: absolute;
width: 800px;
height: 50px;
background: url(../images/nav_bg.png) repeat-x;
overflow: hidden;
z-index: 200;
margin: 0;
top: 550px;
}

#chara_inner_nav ul{
width: 780px;
height: 50px;
margin: 0 auto;
}

#chara_inner_nav li{
float: left;
height: 50px;
width: 260px;
overflow: hidden !important;
margin: 0;
}

.nothing{
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity:0.3;
}

/*スライドショー*/
.slider{
width: 800px;
height: 500px;
}

.bx-wrapper{
width: 800px;
height: 500px;
margin: 0 auto;
}

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../images/bx_loader.gif) center center no-repeat;
}

.thumbs{
width: 489px;
height: 64px;
margin: 20px auto;
overflow: hidden;
}

.thumbs li{
float: left;
width: 153px;
height: 64px;
margin: 0 5px;
}

.thumbs a:hover{
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity:0.75;
}

/*サンプルCG*/
#graphc{
width: 980px;
height: 700px;
padding: 110px 0 0 0;
margin: 0 auto 300px auto;
overflow: hidden;
}

#graphc h1{
width: 178px;
height: 55px;
display: block;
margin: 0 0 20px 100px;
}

#gra_inner{
width: 800px;
height: 500px;
margin: 0 auto;
overflow: auto;
background: url(../images/chara_bg.jpg) no-repeat;
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
border: solid 1px #797c82;
}

#gra_inner ul{
width: 700px;
margin: 35px auto;
}

#gra_inner li{
width: 132px;
height: 75px;
float: left;
margin: 0 8px 8px 0;
display: block;
}

#gra_inner img{
border: solid 1px #797c82;
}

#gra_inner a:hover{
filter:alpha(opacity=75);
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity:0.75;
}

.coming{
width: 490px;
height: 257px;
margin: 121px auto 122px auto;
}

/*特典*/
#special{
width: 980px;
height: 720px;
padding: 110px 0 0 0;
margin: 0 auto 300px auto;
overflow: hidden;
}

#special h1{
width: 155px;
height: 55px;
display: block;
margin: 0 0 20px 100px;
}
#special p{text-align: center;}

/*製品概要*/
#outline{
width: 980px;
padding: 110px 0 0 0;
margin: 0 auto 50px auto;
overflow: hidden;
}

#outline h1{
width: 170px;
height: 41px;
display: block;
margin: 0 0 20px 100px;
}

#outline h2{
color: #395994;
font-size: 133%;
margin: 0 0 5px 150px;
}

.ta1{
width: 700px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto 50px auto;
background-color: #fff;
}

.ta1 th{
width: 200px;
border-right:solid 1px #000;
border-bottom: solid 1px #000;
padding: 4px;
background-color: #b7c0d1;
}

.ta1 td{
border-bottom: solid 1px #000;
padding: 4px;
text-align: center;
}

.ta2 th{
padding: 4px;
border-bottom:solid 1px #000;
background-color: #b7c0d1;
}

.ta2{
width: 700px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
background-color: #fff;
}

.ta2 td{
border-bottom: solid 1px #000;
border-left:solid 1px #000;
padding: 4px;
text-align: center;
}

.ta2_a th{
border-left:solid 1px #000;
}

.ta2_b th{
width: 200px;
}

/*footer*/
#footer{
width: 800px;
margin: 0 auto;
text-align: center;
}