/* chara 
----------------------------------------- */
.chara_menu_box{width: 98%; max-width: 960px; /* max-width: 950px; */ margin: 0 auto; padding: 20px 0 10px 0;}
.chara_menu_box a{display: block;}
.chara_menu_box strong{ position: absolute; width: 0; height: 0; overflow: hidden;}
..chara_menu_box img{width: 100%;}

.chara_menu_cg{width: 4%; min-width: 38px; float: left;}
.chara_menu_chara1{width: 100%; /* width: 95.5%; */float: none;}

.chara_menu_cg li{width: 100%; padding:0 0 2px 0; margin:0;}
.chara_menu_chara1 li{width: 78px; padding: 0 0 3px 2px; margin:0; float: left;}


.chara_menu_cg li a{width: 38px; height: 38px; background-position: -38px 0;}
.chara_menu_cg1 a{background: url(../images/chara/btn_cg1.jpg);}
.chara_menu_cg2 a{background: url(../images/chara/btn_cg2.jpg);}
.chara_menu_cg li a:hover{background-position: 0 0;}


.chara_menu_chara1 li a{width: 78px; height: 83px; background-position: -78px 0;}
.chara_menu_chara1 li a:hover{background-position: 0 0;}
.chara_menu_no1 a{background: url(../images/chara/btn_chara1.jpg);}
.chara_menu_no2 a{background: url(../images/chara/btn_chara2.jpg);}
.chara_menu_no3 a{background: url(../images/chara/btn_chara3.jpg);}
.chara_menu_no4 a{background: url(../images/chara/btn_chara4.jpg);}
.chara_menu_no5 a{background: url(../images/chara/btn_chara5.jpg);}
.chara_menu_no6 a{background: url(../images/chara/btn_chara6.jpg);}
.chara_menu_no7 a{background: url(../images/chara/btn_chara7.jpg);}
.chara_menu_no8 a{background: url(../images/chara/btn_chara8.jpg);}
.chara_menu_no9 a{background: url(../images/chara/btn_chara9.jpg);}
.chara_menu_no10 a{background: url(../images/chara/btn_chara10.jpg);}
.chara_menu_no11 a{background: url(../images/chara/btn_chara11.jpg);}

.chara_menu_no12 a{background: url(../images/chara/btn_chara12.jpg);}


/* page tab */
.chara_main .chara_menu_cg1 a{background-position: 0 0;}
.chara_sub .chara_menu_cg2 a{background-position: 0 0;}

.chara1 .chara_menu_no1 a{background-position: 0 0;}
.chara2 .chara_menu_no2 a{background-position: 0 0;}
.chara3 .chara_menu_no3 a{background-position: 0 0;}
.chara4 .chara_menu_no4 a{background-position: 0 0;}
.chara5 .chara_menu_no5 a{background-position: 0 0;}
.chara6 .chara_menu_no6 a{background-position: 0 0;}
.chara7 .chara_menu_no7 a{background-position: 0 0;}
.chara8 .chara_menu_no8 a{background-position: 0 0;}
.chara9 .chara_menu_no9 a{background-position: 0 0;}
.chara10 .chara_menu_no10 a{background-position: 0 0;}
.chara11 .chara_menu_no11 a{background-position: 0 0;}
.chara12 .chara_menu_no12 a{background-position: 0 0;}




/* chara_introduction_box
--------------------------------------------------- */
.chara_introduction_box{
	width: 95%; max-width: 950px; margin: 0 auto;
	background: url(../images/chara/chara_bg.jpg) top center no-repeat;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

.chara_introduction_charadata{
	width: 44%;
	max-width: 340px;
	margin: 0 auto;
	text-align: left;
	float: right;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	text-shadow: 1px 1px 5px #291640;
	 padding-bottom: 30px;
}


.chara_introduction_charaimg{
	width: 55%;
	margin: 0 auto;
	text-align: left;
	float: right;
	position: relative;
}
.chara_introduction_charaimg img{width: 100%;}
.nextimg{cursor:pointer;}






.chara_name{padding-top: 18%; line-height: 1.1;}
.chara_name p{width: 92%; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding-left: 10px;/*  border-bottom: solid 1px #fff; padding-bottom: 5px; */}
.chara_name div{font-size: 80px; font-weight: bold;}
.chara_name div.rd{font-size: 55px;}
.chara_name p.man{padding-left: 20px;}
.chara_name strong{font-size: 25px; display: block; padding: 5px; width: 98%; max-width: 220px;  margin: 0 0 10px 0; background: #9073a3; font-weight: bold;}

.cv_name{font-size: 30px; padding: 5px 0 10px 0; font-weight: bold;}
.chara_pf{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;}

.chara1 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(202,74,106,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(202,74,106,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(202,74,106,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca4a6a', endColorstr='#007db9e8',GradientType=1 ); }
.chara2 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(129,135,216,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(129,135,216,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(129,135,216,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8187d8', endColorstr='#007db9e8',GradientType=1 );}
.chara3 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(120,184,248,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(120,184,248,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(120,184,248,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78b8f8', endColorstr='#007db9e8',GradientType=1 ); }
.chara4 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(216,96,88,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(216,96,88,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(216,96,88,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d86058', endColorstr='#007db9e8',GradientType=1 );}
.chara5 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(224,176,72,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(224,176,72,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(224,176,72,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0b048', endColorstr='#007db9e8',GradientType=1 );}
.chara6 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(93,192,184,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(93,192,184,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(93,192,184,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dc0b8', endColorstr='#007db9e8',GradientType=1 );}
.chara7 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(143,177,171,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(143,177,171,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(143,177,171,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fb1ab', endColorstr='#007db9e8',GradientType=1 );}
.chara8 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(187,118,194,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(187,118,194,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(187,118,194,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb76c2', endColorstr='#007db9e8',GradientType=1 );}
.chara9 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(135,135,190,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(135,135,190,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(135,135,190,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8787be', endColorstr='#007db9e8',GradientType=1 ); }
.chara10 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(224,216,104,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(224,216,104,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(224,216,104,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d868', endColorstr='#007db9e8',GradientType=1 );}
.chara11 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(163,141,205,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(163,141,205,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(163,141,205,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a38dcd', endColorstr='#007db9e8',GradientType=1 );}
.chara12 .chara_name strong{ background: -moz-linear-gradient(left,  rgba(232,160,176,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(left,  rgba(232,160,176,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to right,  rgba(232,160,176,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8a0b0', endColorstr='#007db9e8',GradientType=1 ); }






.chara1 .chara_name div span{color: #ca4a6a;}
.chara2 .chara_name div span{color: #8187d8;}
.chara3 .chara_name div span{color: #78b8f8;}
.chara4 .chara_name div span{color: #d86058;}
.chara5 .chara_name div span{color: #e0b048;}
.chara6 .chara_name div span{color: #80e0b8;}
.chara7 .chara_name div span{color: #8fb1ab;}
.chara8 .chara_name div span{color: #bb76c2;}
.chara9 .chara_name div span{color: #8787be;}
.chara10 .chara_name div span{color: #e0d868;}
.chara11 .chara_name div span{color: #a38dcd;}
.chara12 .chara_name div span{color: #e8a0b0;}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



/* voice
----------------------------------------- */
.voice_box{width: 99%; max-width: 340px; margin: 10px auto 0 auto;}
.voice_box li{ width: 31%; /* width: 48%; */ max-width: 107px; margin: 0 1%; float: left; }
.voice_box img{width: 100%; max-width: 107px;}

@media screen and (max-width: 910px) {
.chara_menu_chara1{width: 95%; float: right;}
}

@media screen and (max-width: 820px) {
.chara_menu_chara1{width: 94%; float: right;}
.chara_name div{font-size: 60px;}
}

@media screen and (max-width: 700px) {
.chara_menu_chara1{width: 92%; float: right;}

}


@media screen and (max-width: 640px) {
.chara_menu_cg{width: 100%; min-width: auto; max-width: 86px; float: none;  margin: 0 auto 5px auto; }
.chara_menu_cg li{width: 38px; padding:0 5px 2px 0; margin:0; float: left;}
.chara_menu_chara1{width: 98%;  max-width: 410px; float: none; margin: 0 auto;}

.chara_introduction_charadata{ width: 95%; max-width: 640px; margin: 0 auto; text-align: left; float: none; padding-bottom: 30px;}
.chara_introduction_charaimg{ width: 95%; margin: 0 auto; text-align: left; float: none;}
.chara_introduction_box{ -moz-background-size:150% auto; background-size:150% auto; }
.chara_name{padding-top: 5%; line-height: 1.1; text-align: center; border-bottom: solid 1px #fff;}
.chara_name p{width: 99.6%; padding-left: 0px; text-align: center;}
.chara_name div{padding-left: 0px; text-align: center; font-size: 50px;}
.cv_name{text-align: center;}
.chara_name p.man{padding-left: 5px;}
.chara_name strong{margin: 0 auto; margin-bottom: 10px;}

.chara1 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(202,74,106,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(202,74,106,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(202,74,106,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca4a6a', endColorstr='#007db9e8',GradientType=0 );}
.chara2 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(129,135,216,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(129,135,216,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(129,135,216,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8187d8', endColorstr='#007db9e8',GradientType=0 );}
.chara3 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(120,184,248,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(120,184,248,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(120,184,248,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78b8f8', endColorstr='#007db9e8',GradientType=0 );}
.chara4 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(216,96,88,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(216,96,88,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(216,96,88,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d86058', endColorstr='#007db9e8',GradientType=0 );}
.chara5 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(224,176,72,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(224,176,72,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(224,176,72,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0b048', endColorstr='#007db9e8',GradientType=0 );}
.chara6 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(93,192,184,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(93,192,184,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(93,192,184,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5dc0b8', endColorstr='#007db9e8',GradientType=0 );}
.chara7 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(143,177,171,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(143,177,171,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(143,177,171,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fb1ab', endColorstr='#007db9e8',GradientType=0 );}
.chara8 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(187,118,194,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(187,118,194,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(187,118,194,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb76c2', endColorstr='#007db9e8',GradientType=0 ); }
.chara9 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(135,135,190,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(135,135,190,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(135,135,190,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8787be', endColorstr='#007db9e8',GradientType=0 ); }
.chara10 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(224,216,104,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(224,216,104,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(224,216,104,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0d868', endColorstr='#007db9e8',GradientType=0 ); }
.chara11 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(163,141,205,1) 0%, rgba(125,185,232,0) 100%); background: -webkit-linear-gradient(top,  rgba(163,141,205,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(163,141,205,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a38dcd', endColorstr='#007db9e8',GradientType=0 ); }
.chara12 .chara_name strong{ background: -moz-linear-gradient(top,  rgba(232,160,176,1) 0%, rgba(125,185,232,0) 100%);
background: -webkit-linear-gradient(top,  rgba(232,160,176,1) 0%,rgba(125,185,232,0) 100%); background: linear-gradient(to bottom,  rgba(232,160,176,1) 0%,rgba(125,185,232,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8a0b0', endColorstr='#007db9e8',GradientType=0 ); }


.chara_introduction_charaimg{position: static;}

.tab{overflow:hidden; width: 188px; margin: 0 auto 15px auto; position: static;}
.tab li{padding:5px 25px; float:left; margin-right:1px; cursor:pointer; }

.voice_box{width: 99%; max-width: 340px;  margin: 30px auto 0 auto;}
.chara_pf{text-align: center;}

.voice_box2{max-width: 220px;}
.voice_box2 li{ width: 48%;}
}