/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

h1 {
    display: none;
}


#contents{
width: 100%;
background:url(../images/bg.jpg) repeat top center;
background-attachment: fixed;
margin: 0px auto;
padding: 0;
position: relative;
}


#contents .inner{
margin: 0px auto;
min-width: 1050px;
overflow: hidden;
}


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

botton

***************************/
.buttons{
	margin:-100px auto 0px auto;
	width: 100%;
	text-align: center;
	position: absolute;
}


.buttons .buttons1{
	margin:0px auto　0px auto;
	width:426px;
	display:inline-block;
}

.buttons .buttons2{
	margin:0px auto　0px auto;
	width:426px;
	display:inline-block;
}

.space{
	width: 1%;
	height: 10px;
	display:inline-block;
}

.buttons .buttons1 .button1{
	position:absolute;
}
.buttons .buttons1 .button1:hover{
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);	/* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}

.buttons .buttons2 .button1{
	position:absolute;
}
.buttons .buttons2 .button1:hover{
opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);	/* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}




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

contents_top

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


.main_image{
min-width: 1265px;
width: 1050px;
height: 771px;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
text-align: center;
background: url(../images/top_img/top.png) no-repeat top center;
background-size: cover;
}




.pict3{
margin: 520px auto 0px auto;
padding: 0;
opacity: 1;

}



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

contents_chara

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

#contents_chara{
width: 100%;
margin: 0px auto;
padding: 0;
position: relative;
}

#contents_chara .inner{
margin: 80px auto 0px auto;
min-width: 1050px;
overflow: hidden;
}


#contents_chara .inner .pict4{
text-align: left;
display: block;
z-index: 5;
position: relative;
margin: 0px auto;
}


#contents_chara .inner .slide{
margin: 10px auto 0px auto;
width:2500px;
}

#contents_chara .inner .slide .slide1 , #contents_chara .inner .slide .slide2 , #contents_chara .inner .slide .slide3{
list-style: none;
padding: 0;
margin: 0;
}

#contents_chara .inner .slide .slide1 li, #contents_chara .inner .slide .slide2 li ,#contents_chara .inner .slide .slide3 li{
margin: 5px 0px 0px 5px;
float: left;
}






#contents_chara .inner .main_chara{
list-style: none;
width: 876px;
margin: 0px auto  0px auto;
}

#contents_chara .inner .main_chara .ichi{
	margin: -1050px 0px 0px 200px;
	width: 876px;
	position: absolute;
	display:block;
}

#contents_chara .inner .main_chara .ch1{
	display:block;
	opacity: 1;
	position: absolute;
}

#contents_chara .inner .main_chara .ch2{
	display:block;
	opacity: 0;
	position: absolute;
}
#contents_chara .inner .main_chara .ch3{
	display:block;
	opacity: 0;
	position: absolute;
}
#contents_chara .inner .main_chara .ch4{
	display:block;
	opacity: 0;
	position: absolute;
}
#contents_chara .inner .main_chara .ch5{
	display:block;
	opacity: 0;
	position: absolute;
}
#contents_chara .inner .main_chara .ch6{
	display:block;
	opacity: 0;
	position: absolute;
}
#contents_chara .inner .main_chara .ch7{
	display:block;
	opacity: 0;
	position: absolute;
}


#contents_chara .inner .pict5{
position:relative;
margin: -50px auto 0px auto;

}

#contents_chara .inner .voice_button{
	width: 1050px;
	margin: 0px auto;
	text-align: right;
}

#contents_chara .inner .voice_button .play{
	cursor: pointer;
	display: block;
	margin:-200px 0px 0px 600px;
	position: absolute;
	z-index: 700000;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー追加しました*/
#contents_chara .inner .voice_button .play{
	cursor: pointer;
	display: block;
	margin:-200px 0px 0px 600px;
	position: absolute;
	z-index: 700000;
}

#contents_chara .inner .voice_button .play:hover{
	margin:-198px 0px 0px 600px;
}
#contents_chara .inner .voice_button .next{
	cursor: pointer;
	display: block;
	margin:-200px 0px 0px 850px;
	position: absolute;
	z-index: 700000;
}

#contents_chara .inner .voice_button .next:hover{
	margin:-198px 0px 0px 850px;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー追加しました*/


#contents_chara .inner .buttons{
margin: 20px auto 0px auto;
}

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

contents_game

***************************/
#contents_game{
width: 100%;
margin: 100px auto 0px auto;
padding: 0;
}

#contents_game .inner{
	background:url(../images/img_03.png) no-repeat top center;
	min-width:950px;
	height:2760px;
}


#contents_game .inner .a{
margin: 1400px auto 0px auto;
}


#contents_game .inner iframe {
margin: 2030px auto 0px auto;
}


#contents_game .inner .b{
margin: 80px auto 0px auto;
}


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

footer

***************************/
footer{
text-align: center;
background: #99f3fe repeat;
padding: 10px 0px;
color: #FF99F8;
font-size: 12px;
}



footer a:link    {COLOR: #FF99F8; TEXT-DECORATION: none;}
footer a:visited {COLOR: #FF99F8; TEXT-DECORATION: none;}
footer a:hover   {COLOR: #5190FF; TEXT-DECORATION: underline;}
footer a:active  {COLOR: #5190FF; TEXT-DECORATION: underline;}

footer small{
font-size: 12px;
}



#voice{
display: none;
}