#cast_dt{
	}
div.character {
	position: relative;
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #434343;
	}
div.character .charaBox {
	padding: 6px;
	background:#fff;
	border-radius: 12px;
	}


.data {background-repeat: no-repeat;}
.chara_a .data {background-image: url("../img/chart/name_a.png"); background-color: #f3deee;}
.chara_b .data {background-image: url("../img/chart/name_b.png"); background-color: #ded5f1;}
.chara_c .data {background-image: url("../img/chart/name_c.png"); background-color: #f3deee;}
.chara_d .data {background-image: url("../img/chart/name_d.png"); background-color: #d2f4ed;}
.chara_e .data {background-image: url("../img/chart/name_e.png"); background-color: #fee9b1;}
.chara_f .data {background-image: url("../img/chart/name_f.png"); background-color: #fee9b1;}
.chara_g .data {background-image: url("../img/chart/name_g.png"); background-color: #fef9b2;}
.chara_h .data {background-image: url("../img/chart/name_h.png"); background-color: #f3deee;}
.chara_i .data {background-image: url("../img/chart/name_i.png"); background-color: #ded5f1;}
.chara_j .data {background-image: url("../img/chart/name_j.png"); background-color: #d8e1f7;}
.chara_k .data {background-image: url("../img/chart/name_k.png"); background-color: #ded5f1;}
.chara_l .data {background-image: url("../img/chart/name_l.png"); background-color: #ded5f1;}
.chara_m .data {background-image: url("../img/chart/name_m.png"); background-color: #ded5f1;}
.chara_n .data {background-image: url("../img/chart/name_n.png"); background-color: #fef9b2;}
.chara_o .data {background-image: url("../img/chart/name_o.png"); background-color: #fcd9d7;}
.chara_p .data {background-image: url("../img/chart/name_p.png"); background-color: #e1f1b9;}
.chara_q .data {background-image: url("../img/chart/name_q.png"); background-color: #ded5f1;}
.chara_r .data {background-image: url("../img/chart/name_r.png"); background-color: #f8d4c3;}
.chara_s .data {background-image: url("../img/chart/name_s.png"); background-color: #fcd9d7;}
.chara_t .data {background-image: url("../img/chart/name_t.png"); background-color: #d2f4ed;}
.chara_u .data {background-image: url("../img/chart/name_u.png"); background-color: #d2f4ed;}
.chara_v .data {background-image: url("../img/chart/name_v.png"); background-color: #fcd9d7;}
.chara_w .data {background-image: url("../img/chart/name_w.png"); background-color: #fef9b2;}

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

#cast_dt .txtArea  {}
#cast_dt .txtArea .txt { line-height: 1.8em; text-align: left; font-feature-settings: "palt";}

@media all and (min-width: 768px) {
	#cast_dt{}
	div.character {position: relative; padding-top: 60px; width: 730px;}
	div.character .charaBox { min-height: 334px;}
	.phArea{ width: 300px; height: 384px; position: absolute; top:0; left:20px;}
	.ph_cut { margin: 0;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 300px;
		height: 384px;
		background-position: center top;
	}
	.profBlock { width:350px; height: 410px;}
	.data {border-top-left-radius: 12px; border-top-right-radius: 12px; background-position:372px top; height: 180px; width: 100%; }
	#cast_dt .txtArea {width:400px; padding-left: 320px;}
	#cast_dt .txtArea .txt { padding: 18px 18px 0; font-size: 1.05em;}
}
@media all and (max-width: 767px) {
	div.character {
		margin: 10px;
		position: relative;
		padding-top: 80%;
	}
	div.character .charaBox { padding-bottom: 50px;}
	.phArea{ width: 100%; position: absolute; top:0; left:0;}
	#cast_dt .ph_cut {
		width: 80%; max-width: 380px;
		margin: 0 auto 0em;
		padding: 0;
	}
	#cast_dt .ph_cut span {
		padding-top: 128%;
	}
	.data {border-top-left-radius: 12px; border-top-right-radius: 12px; width:100%; height: 0; padding-top: 220px; background-size: auto 155px; background-position: bottom center; margin: 0 auto;}
	#cast_dt .txtArea { background-color: rgba(255,255,255,0.75); border-radius: 10px;}
	#cast_dt .txtArea .txt { padding: 0.8em; font-size: 1.05em;}


}