#cast_dt{
	}
div.character {
	padding: 4px;
	position: relative;	font-family: "noto-sans-cjk-jp", sans-serif;
	font-weight: 400;
	font-style: normal;
	}
div.character.charaBg01 {background: linear-gradient(to right, rgba(144,207,237,1), rgba(124,210,123,1));} 
div.character.charaBg02 {background: linear-gradient(to right, rgba(253,192,86,1), rgba(170,240,108,1));}
div.character.charaBg03 {background: linear-gradient(to right, rgba(174,171,241,1), rgba(184,234,246,1));}
div.character.charaBg04 {background: linear-gradient(to right, rgba(238,133,145,1), rgba(245,167,99,1));}

.phArea{ position: relative;}

.profBlock {background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.6));}
/*.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");}
.chara_l .data {background-image: url("../img/chart/name_l.png");}
.chara_m .data {background-image: url("../img/chart/name_m.png");}
.chara_n .data {background-image: url("../img/chart/name_n.png");}
.chara_o .data {background-image: url("../img/chart/name_o.png");}
.chara_p .data {background-image: url("../img/chart/name_p.png");}
.chara_q .data {background-image: url("../img/chart/name_q.png");}
.chara_r .data {background-image: url("../img/chart/name_r.png");}
.chara_s .data {background-image: url("../img/chart/name_s.png");}
.chara_t .data {background-image: url("../img/chart/name_t.png");}
.chara_u .data {background-image: url("../img/chart/name_u.png");}
.chara_v .data {background-image: url("../img/chart/name_v.png");}
.chara_w .data {background-image: url("../img/chart/name_w.png");}
.chara_x .data {background-image: url("../img/chart/name_x.png");}
.chara_y .data {background-image: url("../img/chart/name_y.png");}
.chara_z .data {background-image: url("../img/chart/name_z.png");}
.chara_aa .data {background-image: url("../img/chart/name_aa.png");}
.chara_ab .data {background-image: url("../img/chart/name_ab.png");}
.chara_ac .data {background-image: url("../img/chart/name_ac.png");}

p.name, p.actor{
	height: 0; width: 0; text-indent: -9999px;
}
div.character p.degree {background-position: top right; background-repeat: no-repeat; background-size: contain; width: 100%; height: 32px; text-indent: -9999px;}
.chara_a p.degree {background-image: url(../img/chart/degree_a.png);}
.chara_b p.degree {background-image: url(../img/chart/degree_b.png);}
.chara_c p.degree {background-image: url(../img/chart/degree_c.png);}
.chara_d p.degree {background-image: url(../img/chart/degree_d.png);}
.chara_e p.degree {background-image: url(../img/chart/degree_e.png);}
.chara_f p.degree {background-image: url(../img/chart/degree_f.png);}
.chara_g p.degree {background-image: url(../img/chart/degree_g.png);}
.chara_h p.degree {background-image: url(../img/chart/degree_h.png);}
.chara_i p.degree {background-image: url(../img/chart/degree_i.png);}
.chara_j p.degree {background-image: url(../img/chart/degree_j.png);}
.chara_k p.degree {background-image: url(../img/chart/degree_k.png);}
.chara_l p.degree {background-image: url(../img/chart/degree_l.png);}
.chara_m p.degree {background-image: url(../img/chart/degree_m.png);}
.chara_n p.degree {background-image: url(../img/chart/degree_n.png);}
.chara_o p.degree {background-image: url(../img/chart/degree_o.png);}
.chara_p p.degree {background-image: url(../img/chart/degree_p.png);}
.chara_q p.degree {background-image: url(../img/chart/degree_q.png);}
.chara_r p.degree {background-image: url(../img/chart/degree_r.png);}
.chara_s p.degree {background-image: url(../img/chart/degree_s.png);}
.chara_t p.degree {background-image: url(../img/chart/degree_t.png);}
.chara_u p.degree {background-image: url(../img/chart/degree_u.png);}
.chara_v p.degree {background-image: url(../img/chart/degree_v.png);}
.chara_w p.degree {background-image: url(../img/chart/degree_w.png);}
.chara_ac p.degree {background-image: url(../img/chart/degree_ac.png);}

#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{ padding: 0px;}
	div.character {position: relative; width: 722px; min-height: 410px;}
	div.character .charaBox { height: 462px; letter-spacing: -.4em;}
	div.character.charaBg01 .charaBox { background-image: url(../img/chart/bg_chartdetail1.jpg);}
	div.character.charaBg02 .charaBox { background-image: url(../img/chart/bg_chartdetail2.jpg);}
	div.character.charaBg03 .charaBox { background-image: url(../img/chart/bg_chartdetail3.jpg);}
	div.character.charaBg04 .charaBox { background-image: url(../img/chart/bg_chartdetail4.jpg);}
	.phArea{ width: 362px; height: 462px; display: inline-block;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 362px;
		height: 462px;
		background-position: center top;
	}
	#cast_dt .ph_cut {
		margin: 0 0!important; padding: 0!important; border: none; display: inline-block; vertical-align: top;
	}
	.profArea{width:350px; letter-spacing: 0em; display: inline-block; vertical-align: top; padding-top: 10px; }
	.profBlock { width:350px; height: 410px;}
	.data { width:350px; height: 140px; background-size: cover; margin: 0 0 0 auto;}
	#cast_dt .txtArea { padding: 0 15px;}
	#cast_dt .txtArea .txt {padding:0 0 0.5em;}
}
@media all and (max-width: 767px) {
	div.character {
		margin: 10px;
		position: relative;
	}
	div.character .charaBox {}

	#cast_dt .ph_cut {
		width: 100%;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	#cast_dt .ph_cut span {
		padding-top: 100%;
	}
	
	.profArea { position: relative;}
	div.character p.degree { position: absolute; top:-28px; height: 28px;}
	
#cast_dt .txtArea {padding:0 1em 3em;}
.data { width:95%; height: 0; padding-top: 38%; background-position: top center; background-size: contain; margin: 0 auto;}

}