#cast_dt{
	}
div.character {
		padding: 0px; background-color: #fff;position: relative;
		font-family: noto-sans-cjk-jp, sans-serif;
		font-style: normal;
		font-weight: 100;
		color: #000;
	}
div.character::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
  background: -moz-linear-gradient(left, rgba(255,52,118), rgba(8,117,210));
  background: -webkit-linear-gradient(left, rgba(255,52,118), rgba(8,117,210));
  background: linear-gradient(to right, rgba(255,52,118), rgba(8,117,210));
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(15px) translateX(15px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 0.7;}



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

.data {background-position: top right; 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_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");}

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

#cast_dt .txtArea  {}
#cast_dt .txtArea .txt { line-height: 1.9em; 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: 400px;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 300px;
		height: 400px;
		background-position: center top;
	}
	#cast_dt .ph_cut {
		margin: 0 0!important; padding: 0!important;
	}
.phArea{ width:300px; vertical-align: top; position: absolute; top:0; right:0;}
.profArea{ display: inline-block; width:430px; vertical-align: top; padding-top: 15px;}
.data { width:100%; height: 128px; background-size: cover; }
.txtArea { padding: 25px 10px 25px 25px; letter-spacing: 0em;}
}
@media all and (max-width: 767px) {
	div.character {
		margin: 15px;
		background-color: #fff;
		position: relative;
		padding-top: 0.5em;
	}
	div.character::after {transform: translateY(10px) translateX(10px) scale(1.00);}

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

}