@charset "utf-8";

/*キャラページ共通*/
#container{
	min-height:1100px;
	background-image:url(../img/chara_bg.png);
}

/****/
.chara_bg{
	width:100%;
	height:420px;
	position:absolute;
	top:178px;
	z-index:-1;/*Z-index*/
	overflow:hidden;
	text-align:center;
	/*background-image:url(../img/chara/_charabg.jpg);*/
	background-repeat:no-repeat;
	background-position:center;
	background-color:#fff;
}

.chara_bg img{
	margin-top:180px;/*gif loderイメージ*/
}
/****/

.chara_select{
	width:960px;
	height:110px;
	margin:0 auto;
	position: relative;
	z-index:10;/*Z-index*/
}

.chara_select ul {
	padding:0;
}

.chara_select ul li{
	width:72px;
	height:72px;
	position:relative;
	display: inline-block;
	list-style:none;
	box-sizing:border-box;
	background-color:#fff;
}

.chara_select ul li a{
	display:block;
	width:100%;
	height:100%;
	text-indent:-9999px;
	overflow:hidden;
	border:solid 3px #fff;
	position:relative;
	/*hover*/
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.chara_select li a:hover{
	border:solid 3px #ffcc00;
	opacity:1;
}

.chara_select li a:active{
	opacity:.6;
}

.chara_select li:active{
	top:2px;
}

/**/
.charaData{
	width:960px;
	height:600px;/**/
	margin:0 auto;
	position:relative;
}

.charaData h3{
	width:470px;
	height:135px;/*420-280=120*/
	display:block;
	float:right;	
	opacity:0;/*animationで1にする*/
}

#chara_voice{
	width:270px;
	/*height:80px;*/
	display:block;
	float:right;	
	clear:both;
	opacity:0;/*animationで1にする*/
	margin-top:15px;	
	box-sizing:border-box;
	/*border:solid 1px blue;*/
}

#chara_voice h4{
	position:relative;
	height:30px;
	margin-left:93px;
	margin-bottom:5px;
}

.soundjs{
	padding-left:0;
	font-size:0px;	
}

.soundjs li{
	display: inline-block;
	list-style:none;
	margin-left:16px;
	position:relative;
	background-color:#FFF;
	top:0;
	/* box-shadow */
	box-shadow:rgba(200, 207, 217, 0.45) 1px 2px 10px 0px;
	-webkit-box-shadow:rgba(200, 207, 217, 0.45) 1px 2px 10px 0px;
	-moz-box-shadow:rgba(200, 207, 217, 0.45) 1px 2px 10px 0px;
	cursor:pointer;
}

/*samplevoice_0101追加*/
.now_ready{
	position:relative;
	width:50px;
	/* border-radius */
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	overflow:hidden;
}
.now_play{
	position:relative;
	width:50px;
	/* border-radius */
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	overflow:hidden;
}
.now_ready:hover, .now_play:hover{
	opacity:0.65;
}
.now_ready:active, .now_play:active{
	top:3px;
}
.v_newtag{
	/*right:282px;/*グラフィックス*/
	top:1px;
	left:-95px;/**/
	/*right:417px;/*キャラクター*/
	background-image:url(../img/baner.png);
	background-size:360px 20px;
	background-position:0 0;
}