@charset "utf-8";

/* SP （画面480px以下）
=================================================*/

h1.chara{
	background-image: url(../chara/img/h1_bar_chara.png);
	background-position: top;
	height: 100px;
	width: 100%;
	margin: 0 0 220px 0;
	padding: 0;
	text-align: left;
	}

h1.chara span{
		background: #553B6B;
		padding: 8px;
		margin: 0 0 20px 0;
		text-align: center;
		color: #FFF;
		width: 100%;
	display: block;
	}

.charamenu{
	position: absolute;
		top:150px;
		left: 0px;
		display: block;
}

.charamenu ul{
	list-style-type: none;
	padding-left: 0;
	font-size: 0;
	height: auto;
	display: block;
	
}

.charamenu ul li{
	display: inline;
	padding:0 1px;
	margin: 0;
	height: auto;
	
}

.charamenu ul li img{
	width: 11.5%;
	height: auto;
	
}

.charamenu .MR1{
	margin:0 0 0 20px !important;
} 

.charamenu .MR2{
	margin:0 20px 0 0 !important;
} 

.charamenu .MR3{
	margin:0 5px 0 0 !important;
} 

.chara_map_box_sp{
	position:static;
	padding: 20px 0;
	margin: 0;
	background-image: url(../chara/img/map_sp.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
}

.chara_map_box_sp ul{
	list-style-type: none;
	padding: 0 0 15px;
	margin: 0 auto;
	font-size: 0;
	height: auto;
	display: block;
	width: 90%;
	
	
}

.chara_map_box_sp ul li{
	display: inline;
	padding:0 4px;
	margin: 0;
	height: auto;
}

.chara_map_box_sp ul li img{
	width: 22%;
	border: #88846E solid 1px;
}



.charabox{
	padding: 10px 0 0 0;
	position: static;
}

/* Sample Voice start---------------------------------- */

#btn_voice_yuma, 
#btn_voice_kirika, 
#btn_voice_sonia, 
#btn_voice_agnum, 
#btn_voice_rinna, 
#btn_voice_lesty, 

#btn_voice_georg, 
#btn_voice_marion, 
#btn_voice_joachim,
#btn_voice_zest,
#btn_voice_beatrice,
#btn_voice_excela,

#btn_voice_jenius,
#btn_voice_others1,
#btn_voice_others2{
	z-index: 100;
	background-image: url(../chara/img/voice_base.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding: 0px;
	height: 40px;
	width: 360px;
}



#btn_voice_yuma ul, 
#btn_voice_kirika ul, 
#btn_voice_sonia ul, 
#btn_voice_agnum ul, 
#btn_voice_rinna ul, 
#btn_voice_lesty ul,
 
#btn_voice_georg ul, 
#btn_voice_marion ul, 
#btn_voice_joachim ul,
#btn_voice_zest ul,
#btn_voice_beatrice ul,
#btn_voice_excela ul,
#btn_voice_jenius ul,
#btn_voice_others1 ul,
#btn_voice_others2 ul{
	margin: 0px;
	list-style-type: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 110px;
}

#btn_voice_yuma ul li, 
#btn_voice_kirika ul li, 
#btn_voice_sonia ul li, 
#btn_voice_agnum ul li, 
#btn_voice_rinna ul li, 
#btn_voice_lesty ul li,
 
#btn_voice_georg ul li, 
#btn_voice_marion ul li, 
#btn_voice_joachim ul li,
#btn_voice_zest ul li,
#btn_voice_beatrice ul li,
#btn_voice_excela ul li,

#btn_voice_jenius ul li,
#btn_voice_others1 ul li,
#btn_voice_others2 ul li{
	padding: 0px;
	float: left;
	text-indent: -9999px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2px;
}

.voice01 a:link, .voice01 a:visited,
.voice02 a:link, .voice02 a:visited,
.voice03 a:link, .voice03 a:visited,
.voice04 a:link, .voice04 a:visited,
.voice05 a:link, .voice05 a:visited,
.voice01_gray,
.voice02_gray,
.voice03_gray,
.voice04_gray,
.voice05_gray{
	display: block;
	height: 40px;
	width: 40px;
	background-repeat: no-repeat;
	background-position: center top;
}


.voice01 a:link, .voice01 a:visited{
	background-image: url(../chara/img/voice_01.png);

}
.voice01 a:hover, .voice01 a:active,
.voice02 a:hover, .voice02 a:active,
.voice03 a:hover, .voice03 a:active,
.voice04 a:hover, .voice04 a:active,
.voice05 a:hover, .voice05 a:active{
	background-position: center bottom;	
}

.voice02 a:link, .voice02 a:visited{
	background-image: url(../chara/img/voice_02.png);
}

.voice03 a:link, .voice03 a:visited{
	background-image: url(../chara/img/voice_03.png);
}

.voice04 a:link, .voice04 a:visited{
	background-image: url(../chara/img/voice_04.png);
}

.voice05 a:link, .voice05 a:visited{
	background-image: url(../chara/img/voice_05.png);
}


.voice01_gray{
	background-image: url(../chara/img/voice_01_gray.png);
}

.voice02_gray{
	background-image: url(../chara/img/voice_02_gray.png);
}

.voice03_gray{
	background-image: url(../chara/img/voice_03_gray.png);
}

.voice04_gray{
	background-image: url(../chara/img/voice_04_gray.png);
}

.voice05_gray{
	background-image: url(../chara/img/voice_05_gray.png);
}

/* SampleVoice */	
#btn_voice_yuma,
#btn_voice_kirika,
#btn_voice_sonia,
#btn_voice_agnum,
#btn_voice_rinna,
#btn_voice_lesty,
#btn_voice_georg,
#btn_voice_marion,
#btn_voice_joachim,
#btn_voice_zest,
#btn_voice_beatrice,
#btn_voice_excela,
#btn_voice_jenius,
#btn_voice_others1,
#btn_voice_others2
{
position:static;
margin: 0 auto;
}
/* Sample Voice end---------------------------------- */


#btn_yuma_1, #btn_yuma_2{
	width: 140px;
	height: 65px;
	position:static;
	text-indent:-9999px;
	margin: 0 auto 15px auto;
}


#btn_yuma_1 a:link,
#btn_yuma_1 a:visited{
	background-image: url(../chara/yuma/img/btn_yuma_1.png);
	display: block;
	width: 140px;
	height: 65px;
}

#btn_yuma_1 a:hover,
#btn_yuma_1 a:active{
	background-image: url(../chara/yuma/img/btn_yuma_1.png);
	background-position: center bottom;	
}


#btn_yuma_2 a:link,
#btn_yuma_2 a:visited{
	background-image: url(../chara/yuma/img/btn_yuma_2.png);
	display: block;
	width: 140px;
	height: 65px;
}

#btn_yuma_2 a:hover,
#btn_yuma_2 a:active{
	background-image: url(../chara/yuma/img/btn_yuma_2.png);
	background-position: center bottom;	
}




/* Tablet （画面481px以上1023以下）
=================================================*/
@media screen and (min-width:481px) {
	h1.chara{
		background-image: url(../img/h1_bar.png);
	background-position: left top;
		height: 140px;
		width: 100%;
		margin: 0;
		padding: 0;
		text-align: left;
		
	}
h1.chara img{
	width: 400px !important;
		padding: 30px 0 0 0;
		
	}
h1.chara span{
		margin: 16px 0 20px 0;
	}
	
.charamenu{
	position: static;
}
.charamenu  ul li img{
	width: 6%;
	height: auto;
	
}
	
.charamenu_top  ul li img{
	width: 11%;
}

.charamenu .MR1{
	margin:0 !important;
} 

.charamenu .MR2,
.charamenu .MR3{
	margin:0 5px 0 0 !important;
}  
	
	
}


/* PC 画面サイズ1024px以上
=================================================*/
@media screen and (min-width: 1024px) { 
	h1.chara{
		background-image: url(../chara/img/h1_bar_chara.png);
	background-position: left top;
		height: 280px;
		width: 1000px;
		margin: 0;
		padding: 0;
		text-align: left;
		
	}
	h1.chara img{
		width: 400px !important;
		padding: 30px 0 0 0;
		height: auto;
		display: block;
	}
	h1.chara span{
		display: none;
	}
	
.charamenu{
	position: absolute;
		top:140px;
		left: 110px;
		display: block;
}

.charamenu ul{
	list-style-type: none;
	padding-left: 0;
	font-size: 0;
	
}

.charamenu ul li{
	display: inline;
	padding:0 1px;
	
}

.charamenu  ul li img{
	width: 50px;
	height: auto;
	
}
	
.charamenu a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
	
.charabox{
	padding: 0;
	position: relative;
}


/* Chara MAP Btn(PC)
-----------------------------------------------------*/	
.chara_map_box{
	position: relative;
	width: 960px;
	height: auto;
	margin: 0 auto 15px;
	padding: 0;
	}
	
#btn_yuma,
#btn_hatena1,
#btn_lesty, 
#btn_agnum, 
#btn_rinna,
#btn_sonia, 
#btn_kirika, 
#btn_jenius,
#btn_zest,
#btn_joachim,
#btn_georg,
#btn_marion,
#btn_beatrice,
#btn_excela,
#btn_dragon1,
#btn_dragon2,
#btn_dragon3,
#btn_dragon4,
#btn_dragon5,
#btn_others1,
#btn_others2{
	position: absolute;
	z-index: 100;
}


#btn_lesty a:link,#btn_lesty a:visited,
#btn_agnum a:link,#btn_agnum a:visited,
#btn_rinna a:link,#btn_rinna a:visited,
#btn_sonia a:link,#btn_sonia a:visited,
#btn_kirika a:link,#btn_kirika a:visited,

#btn_zest a:link,#btn_zest a:visited,
#btn_joachim a:link,#btn_joachim a:visited,
#btn_georg a:link,#btn_georg a:visited,

#btn_marion a:link,#btn_marion a:visited,
#btn_beatrice a:link,#btn_beatrice a:visited,

#btn_excela a:link,#btn_excela a:visited,
#btn_jenius a:link,#btn_jenius a:visited{
	width: 86px;
	height: 86px;
	text-indent: -9999px;
	background-position: left top;
	display: block;
	background-repeat: no-repeat;
}




#btn_lesty a:hover,#btn_lesty a:active,
#btn_agnum a:hover,#btn_agnum a:active,
#btn_rinna a:hover,#btn_rinna a:active,
#btn_sonia a:hover,#btn_sonia a:active,
#btn_kirika a:hover,#btn_kirika a:active,

#btn_zest a:hover,#btn_zest a:active,
#btn_joachim a:hover,#btn_joachim a:active,
#btn_georg a:hover,#btn_georg a:active,

#btn_marion a:hover,#btn_marion a:active,
#btn_beatrice a:hover,#btn_beatrice a:active,
#btn_excela a:hover,#btn_excela a:active,
#btn_jenius a:hover,#btn_jenius a:active{
	background-position: center bottom;	
}


/* btn_yuma (SET) ================ */
#btn_yuma{
	width: 120px;
	height: 120px;
	left: 404px;
	top: 367px;
}

#btn_yuma a:link, #btn_yuma a:visited{
	width: 120px;
	height: 120px;
	text-indent: -9999px;
	background-position: left top;
	display: block;
	background-repeat: no-repeat;
	background-image: url(../chara/img/icon_yuma.jpg);
}

#btn_yuma a:hover,#btn_yuma a:active{
	background-position: center bottom;	
}



/* btn_lesty ================ */
#btn_lesty{
	left: 108px;
	top: 162px;
}

#btn_lesty a:link,#btn_lesty a:visited{
	background-image: url(../chara/img/icon_lesty.jpg);
}


/* btn_kirika ================ */
#btn_kirika{
	left: 108px;
	top: 267px;
}

#btn_kirika a:link,#btn_kirika a:visited{
	background-image: url(../chara/img/icon_kirika.jpg);
}


/* btn_rinna ================ */
#btn_rinna{
	left: 108px;
	top: 372px;
}

#btn_rinna a:link,#btn_rinna a:visited{
	background-image: url(../chara/img/icon_rinna.jpg);
}


/* btn_agnum ================ */
#btn_agnum{
	left: 108px;
	top: 518px;
}

#btn_agnum a:link,#btn_agnum a:visited{
	background-image: url(../chara/img/icon_agnum.jpg);
}


/* btn_sonia ================ */
#btn_sonia{
	left: 322px;
	top: 576px;
}

#btn_sonia a:link,#btn_sonia a:visited{
	background-image: url(../chara/img/icon_sonia.jpg);
}


/* btn_jenius ============= */
#btn_jenius{
	left: 326px;
	top: 201px;
}

#btn_jenius a:link,#btn_jenius a:visited{
	background-image: url(../chara/img/icon_jenius.jpg);
}




/* btn_zest ============= */
#btn_zest{
	left: 618px;
	top: 203px;
}

#btn_zest a:link,#btn_zest a:visited{
	background-image: url(../chara/img/icon_zest.jpg);
}







/* btn_georg ============= */
#btn_georg{
	left: 760px;
	top: 133px;
}

#btn_georg a:link,#btn_georg a:visited{
	background-image: url(../chara/img/icon_georg.jpg);
}


/* btn_joachim ============= */
#btn_joachim{
	left: 760px;
	top: 238px;
}

#btn_joachim a:link,#btn_joachim a:visited{
	background-image: url(../chara/img/icon_joachim.jpg);
}



/* btn_marion ============= */
#btn_marion{
	left: 760px;
	top: 343px;
}

#btn_marion a:link,#btn_marion a:visited{
	background-image: url(../chara/img/icon_marion.jpg);
}

/* btn_beatrice ============= */
#btn_beatrice{
	left: 760px;
	top: 448px;
}

#btn_beatrice a:link,#btn_beatrice a:visited{
	background-image: url(../chara/img/icon_beatrice.jpg);
}



/* btn_excela ============= */
#btn_excela{
	left: 615px;
	top: 589px;
}

#btn_excela a:link,#btn_excela a:visited{
	background-image: url(../chara/img/icon_excela.jpg);
}




#btn_dragon1 a:link, #btn_dragon1 a:visited,
#btn_dragon2 a:link, #btn_dragon2 a:visited,
#btn_dragon3 a:link, #btn_dragon3 a:visited,
#btn_dragon4 a:link, #btn_dragon4 a:visited,
#btn_dragon5 a:link, #btn_dragon5 a:visited{
	width: 48px;
	height: 48px;
	text-indent: -9999px;
	background-position: left top;
	display: block;
	background-repeat: no-repeat;
}

#btn_dragon1 a:hover,#btn_dragon1 a:active,
#btn_dragon2 a:hover,#btn_dragon2 a:active,
#btn_dragon3 a:hover,#btn_dragon3 a:active,
#btn_dragon4 a:hover,#btn_dragon4 a:active,
#btn_dragon5 a:hover,#btn_dragon5 a:active{
	background-position: center bottom;	
}

/* btn_dragon  ================ */
#btn_dragon1{
	left: 579px;
	top: 698px;
}

#btn_dragon1 a:link, #btn_dragon1 a:visited{
	background-image: url(../chara/img/icon_dragon1.jpg);
}



/* btn_dragon2 ================ */
#btn_dragon2{
	left: 638px;
	top: 698px;
}

#btn_dragon2 a:link, #btn_dragon2 a:visited{
	background-image: url(../chara/img/icon_dragon2.jpg);
}

/* btn_dragon3 ================ */
#btn_dragon3{
	left: 697px;
	top: 698px;
}

#btn_dragon3 a:link, #btn_dragon3 a:visited{
	background-image: url(../chara/img/icon_dragon3.jpg);
}


/* btn_dragon4 ================ */
#btn_dragon4{
	left: 782px;
	top: 599px;
}

#btn_dragon4 a:link, #btn_dragon4 a:visited{
	background-image: url(../chara/img/icon_dragon4.jpg);
}

/* btn_dragon5 ================ */
#btn_dragon5{
	left: 782px;
	top: 659px;
}

#btn_dragon5 a:link, #btn_dragon5 a:visited{
	background-image: url(../chara/img/icon_dragon5.jpg);
}



/* btn_others1 (SET) ================ */
#btn_others1 a:link, #btn_others1 a:visited,
#btn_others2 a:link, #btn_others2 a:visited{
	width: 75px;
	height: 75px;
	text-indent: -9999px;
	background-position: left top;
	display: block;
	background-repeat: no-repeat;

}


#btn_others1 a:hover,#btn_others1 a:active,
#btn_others2 a:hover,#btn_others2 a:active{
	background-position: center bottom;	
}

#btn_others1{
	left: 220px;
	top: 673px;
}

#btn_others1 a:link, #btn_others1 a:visited{
	background-image: url(../chara/img/icon_others1.jpg);
}

#btn_others2{
	left: 125px;
	top: 673px;
}


#btn_others2 a:link, #btn_others2 a:visited{
	background-image: url(../chara/img/icon_others2.jpg);
}



/* SampleVoice(PC)
-----------------------------------------------------*/	
#btn_voice_yuma,
#btn_voice_kirika,
#btn_voice_sonia,
#btn_voice_agnum,
#btn_voice_rinna,
#btn_voice_lesty,
#btn_voice_georg,
#btn_voice_marion,
#btn_voice_joachim,
#btn_voice_zest,
#btn_voice_beatrice,
#btn_voice_excela,
#btn_voice_jenius,
#btn_voice_others1,
#btn_voice_others2
{
position:absolute;
margin: 0 auto;
}
	
	
/* SampleVoice */	
#btn_voice_yuma{
	left: 115px;
	top: 148px;
}

#btn_voice_kirika{
	left: 600px;
	top: 150px;
}

#btn_voice_sonia{
	left: 65px;
	top: 150px;
}

#btn_voice_agnum{
	left: 110px;
	top: 150px;
}

#btn_voice_rinna{
	left: 540px;
	top: 155px;
}

#btn_voice_lesty{
	left: 570px;
	top: 150px;
}


#btn_voice_georg{
	left: 595px;
	top: 150px;
}

#btn_voice_marion{
	left: 60px;
	top: 215px;
}

#btn_voice_joachim{
	left: 580px;
	top: 240px;
}

#btn_voice_zest{
	left: 570px;
	top: 150px;
}

#btn_voice_beatrice{
	left: 580px;
	top: 150px;
}

#btn_voice_excela{
	left: 598px;
	top: 150px;
}


#btn_voice_jenius{
	left: 70px;
	top: 315px;
}

#btn_voice_others1{
	left: 160px;
	top: 140px;
}

#btn_voice_others2{
	left: 545px;
	top: 715px;
}
	
	
#btn_yuma_1, #btn_yuma_2{
	position:absolute;
}

#btn_yuma_1{
	right:70px;
	top: 800px;
	z-index: 100;
}


#btn_yuma_2{
	right:20px;
	top: 530px;
	z-index: 100;
}

	
}


/* IE11 
=================================================*/
 @media all and (-ms-high-contrast:none){
      *::-ms-backdrop, p.small,span.small{
	
}
    }