#cast_dt{
	}
div.character {
	padding: 0px; background-color: #fff;position: relative;
	font-family: kinto-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #000;
	box-shadow: 15px 15px 0px 0 rgba(3, 88, 9, 0.25);
	border: solid 3px #1b6cda;
	}
.chara_a div.character {border: solid 3px #522c85;}
.chara_h div.character, .chara_i div.character, .chara_j div.character, .chara_k div.character {border: solid 3px #de4d76;}


#cast_dt .ph_cut span {
background-color: #fff;
}
.phArea{ position: relative;}
/*.data { position: absolute; }*/

.data {background-position: top left; background-repeat: no-repeat;}
.chara_a .data {background-image: url("../img/chart/name_a.png");}
.chara_b .data {background-image: url("../img/chart/name_b.png");}
.chara_c .data {background-image: url("../img/chart/name_c.png");}
.chara_d .data {background-image: url("../img/chart/name_d.png");}
.chara_e .data {background-image: url("../img/chart/name_e.png");}
.chara_f .data {background-image: url("../img/chart/name_f.png");}
.chara_g .data {background-image: url("../img/chart/name_g.png");}
.chara_h .data {background-image: url("../img/chart/name_h.png");}
.chara_i .data {background-image: url("../img/chart/name_i.png");}
.chara_j .data {background-image: url("../img/chart/name_j.png");}
.chara_k .data {background-image: url("../img/chart/name_k.png");}

p.name, p.actor, p.degree{
	height: 0; width: 0; text-indent: -9999px;
}

#cast_dt .txtArea  {}
#cast_dt .txtArea .txt { line-height: 1.8em; padding:0 0 1.0em; text-align: left;}

@media all and (min-width: 768px) {
	#cast_dt{ padding: 0px;}
	div.character {letter-spacing: -.4em; position: relative; min-height: 348px; padding: 15px;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 280px;
		height: 348px;
		background-position: center top;
	}
	#cast_dt .ph_cut {
		margin: 0 0!important; padding: 0!important;
	}
.phArea{ width:295px; vertical-align: top; display: inline-block;}
.profArea{ display: inline-block; width:419px; vertical-align: top;}
.data { width:100%; height: 112px; background-size: cover; }
.txtArea { padding: 20px 5px; letter-spacing: 0em;}
}
@media all and (max-width: 767px) {
	div.character {
		margin: 10px;
		background-color: #fff;
		position: relative;
		padding-top: 0.5em;
		box-shadow: 7px 7px 0px 0 rgba(3, 88, 9, 0.25);
	}
	div.character::after {transform: translateY(10px) translateX(10px) scale(1.00);}

	#cast_dt .ph_cut {
		width: 75%;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	#cast_dt .ph_cut span {
		padding-top: 124.285%;
	}
.profArea { padding: 0.5em 0 0; }
#cast_dt .txtArea { padding: 1em 1em 0; }
.data { width:100%; height: 0; padding-top: 26.73%; background-size: cover; margin: 0 auto;}

}