html{
font-size:10px;
color:#444444;
}

body{
background: url(../img/background.png);
color:#ffffff;
background-color:#000000;
background-repeat:repeat;
margin:0px;
padding:0px;
}

h1{
display:none;
height:0px;
padding0px;
margin:0px;
}

a{
color:#ffffff;
}

#clear{
clear:both;
display;none;
}

#footer{
text-align:center;
margin:0px;
padding:17px 0px;
font-size:1.3rem;
color:#ffffff;
}

.outerframe{
width:100%;
min-width:1024px;
height:38px;
/*height:826px;*/
padding:0px;
background-color:#000000;
background:url(../img/border.png);
background-repeat:repeat-x;
background-position:center;
/*
border-bottom:#ffffff 14px solid;
*/
}

.outerframe_top{
margin:45px 0px 0px 0px;
border-top:#ffffff 14px solid;
}

.outerframe_bottom{
margin:0px 0px 1px 0px;
border-bottom:#ffffff 14px solid;
}

#innerframe{
width:100%;
min-width:1024px;
height:750px;
background-color:#000000;
position:relative;
}

#contents{
width:1024px;
height:750px;
/*
margin-top:38px;
margin-bottom:38px;
*/
margin-right:auto;
margin-left:auto;
padding:0px 0px;
background-color:#000000;
position:relative;
}

#menu{
list-style-type:none;
width:100%;
height:50px;
/*
margin:680px 0px 0px 0px;
*/
position:relative;
top:680px;
left:0px;
padding:0px;
margin:0px;
background-color:#000000;
text-align:center;
border-top:#ffffff 1px solid;
border-bottom:#ffffff 1px solid;
}

#menu ul{
list-style-type:none;
width:896px;
height:50px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
background-color:#000000;
}

#menu li{
float:left;
width:118px;
height:50px;
margin:0px 5px;
padding0px;
}

#menu span{
display:none;
}

#menu a{
display:block;
width:118px;
height:50px;
}

#botton_story a{
background:url(../img/botton_story_a.jpg);
}

#botton_story a:hover{
background:url(../img/botton_story_b.jpg);
}

#botton_spec a{
background:url(../img/botton_spec_a.jpg);
}

#botton_spec a:hover{
background:url(../img/botton_spec_b.jpg);
}

#botton_charactor a{
background:url(../img/botton_charactor_a.jpg);
}

#botton_charactor a:hover{
background:url(../img/botton_charactor_b.jpg);
}

#botton_sample a{
background:url(../img/botton_sample_a.jpg);
}

#botton_sample a:hover{
background:url(../img/botton_sample_b.jpg);
}

#botton_totop a{
background:url(../img/botton_totop_a.jpg);
}

#botton_totop a:hover{
background:url(../img/botton_totop_b.jpg);
}

#botton_system a{
background:url(../img/botton_system_a.jpg);
}

#botton_system a:hover{
background:url(../img/botton_system_b.jpg);
}

#botton_trial a{
background:url(../img/botton_trial_a.jpg);
}

#botton_trial a:hover{
background:url(../img/botton_trial_b.jpg);
}

#count_menu{
list-style-type:none;
width:100px;
height:0px;
/*
margin:680px 0px 0px 0px;
*/
position:relative;
top:0px;
left:580px;
padding:0px;
margin:0px;
background-color:#Transparent;
text-align:center;
border-top:#Transparent 1px solid;
border-bottom:#Transparent 1px solid;
}

#count_menu ul{
list-style-type:none;
width:300px;
height:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
background-color:#000000;
}

#count_menu li{
float:left;
width:120px;
height:0px;
margin:0px 0px;
padding0px;
}

#count_menu span{
display:none;
}


#info_bg{
background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
width:216px;
height:81px;
position:absolute;
top:554px;
left:704px;
margin:0px;
padding:0px;
}

#infomation{
/*
background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
background: url(../img/info_bg.jpg);
background-repeat:no-repeat;
*/
color:#ccccee;
width:200px;
height:75px;
position:absolute;
top:550px;
left:700px;
padding:3px 8px;
margin:0px;
overflow:auto;
border:#ddddff 4px ridge;
}

#infomation h4{
padding:0px;
margin:0px 0px 3px 0px;
font-size:1.4rem;
}

#infomation ul{
list-style-type:none;
padding:0px;
margin:0px;
}


#infomation li{
padding:3px 2px;
margin:0px;
font-size:1.2rem;
border-top:#ffffff 1px solid;
}

#infomation a{
text-decoration:none;
}

#info_date{
font-weight:bold;
}

/*--index--*/

.indexpage{
background: url(../img/top.jpg);
background-repeat:no-repeat;
}


/*--charactor--*/

.charactor01{
background: url(../img/charactor01.jpg);
background-repeat:no-repeat;
}

.charactor02{
background: url(../img/charactor02.jpg);
background-repeat:no-repeat;
}

.charactor03{
background: url(../img/charactor03.jpg);
background-repeat:no-repeat;
}

.charactor04{
background: url(../img/charactor04.jpg);
background-repeat:no-repeat;
}

.charactor05{
background: url(../img/charactor05.jpg);
background-repeat:no-repeat;
}

.charactor06{
background: url(../img/charactor06.jpg);
background-repeat:no-repeat;
}

.charactor07{
background: url(../img/charactor07.jpg);
background-repeat:no-repeat;
}

.charactor08{
background: url(../img/charactor08.jpg);
background-repeat:no-repeat;
}


#charactor_menu{
list-style-type:none;
margin:50px 0px 0px 25px;
padding:0px;
}

#charactor_menu li{
width:200px;
height:50px;
margin:5px 0px;
padding0px;
}

#charactor_menu span{
display:none;
}

#charactor_menu a{
display:block;
width:200px;
height:50px;
}

#char_b01 a{
background:url(../img/name_01_a.jpg);
}

#char_b01 a:hover{
background:url(../img/name_01_b.jpg);
}

#char_b02 a{
background:url(../img/name_02_a.jpg);
}

#char_b02 a:hover{
background:url(../img/name_02_b.jpg);
}

#char_b03 a{
background:url(../img/name_03_a.jpg);
}

#char_b03 a:hover{
background:url(../img/name_03_b.jpg);
}

#char_b04 a{
background:url(../img/name_04_a.jpg);
}

#char_b04 a:hover{
background:url(../img/name_04_b.jpg);
}

#char_b05 a{
background:url(../img/name_05_a.jpg);
}

#char_b05 a:hover{
background:url(../img/name_05_b.jpg);
}

#char_b06 a{
background:url(../img/name_06_a.jpg);
}

#char_b06 a:hover{
background:url(../img/name_06_b.jpg);
}

#char_b07 a{
background:url(../img/name_07_a.jpg);
}

#char_b07 a:hover{
background:url(../img/name_07_b.jpg);
}

#char_b08 a{
background:url(../img/name_08_a.jpg);
}

#char_b08 a:hover{
background:url(../img/name_08_b.jpg);
}

#charactor_info{
display:none;
}

/*--story--*/

.story{
background: url(../img/story.jpg);
background-repeat:no-repeat;
}

#story_info{
display:none;
}

/*--spec--*/

.spec{
background: url(../img/spec.jpg);
background-repeat:no-repeat;
}

#spec_info{
display:none;
}


/*--sample--*/

.sample{
background: url(../img/sample_bg.jpg);
background-repeat:no-repeat;
}

#sample_image{
height:383px;
margin:60px 0px 0px 0px;
padding:0px;
text-align:center;
}

#sample_menu{
list-style-type:none;
width:780px;
height:77px;
margin-top:40px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}

#sample_menu li{
float:left;
width:136px;
height:77px;
margin:0px 10px;
padding:0px;
}

#sample_menu span{
display:none;
}

#sample_menu a{
display:block;
width:136px;
height:77px;
}

#sample_t01 a{
background:url(../img/sample_t01_b.jpg);
}

#sample_t01 a:hover{
background:url(../img/sample_t01_a.jpg);
}

#sample_t02 a{
background:url(../img/sample_t02_b.jpg);
}

#sample_t02 a:hover{
background:url(../img/sample_t02_a.jpg);
}

#sample_t03 a{
background:url(../img/sample_t03_b.jpg);
}

#sample_t03 a:hover{
background:url(../img/sample_t03_a.jpg);
}

#sample_t04 a{
background:url(../img/sample_t04_b.jpg);
}

#sample_t04 a:hover{
background:url(../img/sample_t04_a.jpg);
}

#sample_t05 a{
background:url(../img/sample_t05_b.jpg);
}

#sample_t05 a:hover{
background:url(../img/sample_t05_a.jpg);
}

.system{
position:relative;
/*
background: url(../img/system01.jpg);
background-repeat:no-repeat;
*/
}

#system_img{
position:absolute;
	top:0px; left:0px;
}

#system_menu{
position:absolute;
	top:620px; left:0px;
width:100%;
margin-left:auto;
margin-right:auto;
padding:5px 0px;
text-align:center;
}

/*
#system_menu_inside{
width:500px;
margin-left:auto;
margin-right:auto;
border:#ff0000 1px solid;
}
*/

#system_menu ul{
display:inline-block;
list-style-type:none;
margin:0px;
padding:0px;
}

#system_menu li{
float:left;
font-size:1.7rem;
font-weight:bold;
padding:3px 5px;
margin:0px 4px;
color:#ffffff;
background-color:#000000;
border:#ffffff 1px solid;
}

#system_menu li:hover{
float:left;
font-size:1.7rem;
font-weight:bold;
padding:3px 5px;
margin:0px 4px;
color:#88ddff;
background-color:#ffffff;
border:#ffffff 1px solid;
}

.trial{
background: url(../img/trial.jpg);
background-repeat:no-repeat;
font-size:1.4rem;
}

#trial_pc{
margin:200px 0px 30px 40px;
padding-left:1px;
position:relative;
}

#trial_pc p{
position:absolute;
 top:0px; left:220px;
width:620px;
margin:0px;
padding:0px;
}

#trial_pc img{
display:inline-block;
width:150px;
margin:0px 0px 10px 0px;
}

#trial_android{
margin:15px 0px 30px 40px;
position:relative;
}

#trial_android p{
position:absolute;
 top:0px; left:220px;
width:620px;
margin:0px;
padding:0px;
}


#trial_android img{
display:inline-block;
width:150px;
margin:0px 0px 10px 0px;
}


#trial_patch{
margin:15px 0px 30px 40px;
position:relative;
}

#trial_patch p{
position:absolute;
 top:0px; left:220px;
width:620px;
margin:0px;
padding:0px;
}
