<style type="text/css">
.card img {
    width: 98%;
}
.card .caption {
    text-align: center;
    font-size: 0.7em;
}
.card-img, .chara_img img{
	max-width: 100%;
	    margin: 0px auto;
}



.chara_name{
	background:url(./../images/header_name_site.png) 238px 50px;
	background-size:contain;
	height:50px;
	overflow:hidden;
	text-align:center;
}

.chara_name img:nth-of-type(1){
	margin: 5px 0px 0px 5px;
}

.chara_name img:nth-of-type(2){
	margin: 0px auto;
}

.chara_name p,.artifact_name p{
	margin:2px 0px;
	font-size:12px;
	text-shadow: 0px 0px 6px #000;
}

.chara_img{
	position:relative;
	text-align: center;
	margin:auto;
	margin-bottom: 10px;
}

@media (max-width: 780px) {
	.chara_img p{
	padding:0px 10px;!important
	}
}


.chara_img p.caption{
	font-size:11px;
	text-align:left;!important
	display:block;
	margin:-5px 0px 10px;
	color: #FFD248;
	font-weight:bold;
}

.width50{
	width:50%;
}

.chara_img p.type{
	position:relative;
	padding:3px 0px 3px 5px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&amp;1+0,0+100 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	width:96%;;
	font-size:12px;	
	text-align: left!important;	
	margin: 0;	
}	
.chara_img div.voice{	
	border-bottom: 1px dotted #8a8a8a;	
}

div.caption{
	margin-top: -20px;
}

.chara_img div.voice p{	
	margin: 0;
    text-align: left;
    font-size: 12px;
    padding: 0 5px;
}	
.chara_img div.voice a{	
	float: left;	
	position: absolute;	
	width: 45px;	
	height: 29px;	
	display: block;	
	right: 0;	
	border:2px solid #eaeaea;	
	top: -7px;	
	text-align:center;	
	border-radius: 4px 4px 0px 0px;	
	background: #87bdbc;	
	background: -moz-linear-gradient(top, #87bdbc 0%, #7194a0 50%, #55747e 100%);	
	background: -webkit-linear-gradient(top, #87bdbc 0%,#7194a0 50%,#55747e 100%);	
	background: linear-gradient(to bottom, #87bdbc 0%,#7194a0 50%,#55747e 100%);	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87bdbc', endColorstr='#55747e',GradientType=0 );	
}	
.chara_img div.voice a img{	
	margin-top:7px;	
}

.status_float{
	float: left;
    width: 50%;
	margin: 12px 0px 5px;
}

.chara_status table,.artifact_status table{
	width:99%!important;
	font-size:12px!important;
	margin-bottom: 3px;
}

.chara_status table tr.hdr th{
	background: #3A3A3A;
    border-radius: 4px 4px 0px 0px;
	padding: 5px;
}

.artifact_status table tr.hdr th{
	background: #5f5545;
    border-radius: 4px 4px 0px 0px;
	padding: 5px;
	text-align:center;
}

.chara_status table td,.artifact_status table td{
	padding:5px!important;
}

.chara_status table tr.hdr td{
	background:#3a3a3a;
	color:#fff;
}

.artifact_status table tr.hdr td{
	background:#695D4B;
	color:#fff;
}

.chara_status table tr.value td{
	background:#ccc9c6!important;
	color:#333333!important;
	border: 1px solid #151515;
}
.chara_status .skillturn{
	background: #a9a6a4;
    padding: 1px 5px	;
    color: #333;
}
.artifact_status table tr.value td {
    background: #d0c9c2!important;
    color: #333333!important;
}

.chara_status table  td.skill{
	background:#212121!important;
	color:#bcbcbc!important;
}

.artifact_status table td.skill {
    background: #413a2f!important;
    color: #eae5dd!important;
}

.artifact_status table td.flavor {
    background: #b0a9a1!important;
	border-radius:5px;
	padding:5px 3px!important;
	color: #333333!important;
}

.chara_status table.status td,.artifact_status table.status td{
	width:33%;
}

.chara_single{
	width:calc(50% - 20px);
	margin:0px 0px 15px 8px;
}

.wrapper_chara{
	    display: table;
		border-collapse: separate;
  		border-spacing: 5px 0;
		margin-bottom:15px;
		margin: auto;
		width: 100%;
    		table-layout: fixed;
}

.wrapper_chara .container{
	    display: table-cell;
		max-width: 100%;
		margin-bottom:5px;
}


.wrapper_chara .arrow{
	display: table-cell;
	vertical-align:middle;
	padding: 0px;
	width: 20px;
}

.wrapper_chara .arrow img{
	width:18px;
}

/*髯千阜遯∫�ｴ*/
.exceed_after .hdr td, .exceed_after .hdr th{
	background: #9C2929!important;
}
.exceed_after td .textred{
	color: #D01B1B;
    font-weight: bold;
	font-size:larger;
}
.arrow_vertical{
	text-align: center!important;
    padding: 5px!important;
    width: auto!important;
    display: block!important;
}

.arrow_vertical img{
	width:157px!important;
}
.arrow_mini img{
	width:100px!important;
}


/*髯千阜遯∫�ｴ邵ｦ驟咲ｽｮ逕ｨ*/
.wrapper_exceed{
		margin:10px 0px;
}
.wrapper_exceed .wrapper_chara{
	width: 50%;
    float: right;
    display: table-cell;
    padding-top: 10px;
    vertical-align: middle;
}

.wrapper_exceed .chara_img{
	width: 50%;
    float: left;
}

.wrapper_exceed .chara_img img{
	width: 90%!important;
}

</style>