#cast_dt{
		filter: drop-shadow(2px 2px 4px rgba(94,118,253,0.3));
		padding: 0;
	}
	div.character {
		padding: 15px; background-color: #fff;position: relative;
		font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 400;
    font-style: normal;
	}
	div.character::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
 background: linear-gradient(#bfd0ff, #fc8cb4);
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(20px) translateX(20px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 0.5;}



#cast_dt .ph_cut span {
background-color: #fff;
}

#cast_dt .ph_cut, #cast_dt .ph_cut span {
	border-radius: 0px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
}
.phArea{ position: relative;}
/*.data { position: absolute; }*/

.data p.name {background-position: top left; background-repeat: no-repeat; background-size: contain;}
.data p.name span {background-position: top left; background-repeat: no-repeat; background-size: contain; display: block;}
.data p.actor {background-position: top right; background-repeat: no-repeat; background-size: contain;}
.chara_a .data p.name span {background-image: url("../img/chart/name_a.png");}
.chara_b .data p.name span {background-image: url("../img/chart/name_b.png");}
.chara_c .data p.name span {background-image: url("../img/chart/name_c.png");}
.chara_d .data p.name span {background-image: url("../img/chart/name_d.png");}
.chara_e .data p.name span {background-image: url("../img/chart/name_e.png");}
.chara_f .data p.name span {background-image: url("../img/chart/name_f.png");}
.chara_g .data p.name span {background-image: url("../img/chart/name_g.png");}
.chara_h .data p.name span {background-image: url("../img/chart/name_h.png");}
.chara_i .data p.name span {background-image: url("../img/chart/name_i.png");}
.chara_j .data p.name span {background-image: url("../img/chart/name_j.png");}

.chara_a .data p.actor {background-image: url("../img/chart/actor_a.png");}
.chara_b .data p.actor {background-image: url("../img/chart/actor_b.png?1202");}
.chara_c .data p.actor {background-image: url("../img/chart/actor_c.png");}
.chara_d .data p.actor {background-image: url("../img/chart/actor_d.png");}
.chara_e .data p.actor {background-image: url("../img/chart/actor_e.png");}
.chara_f .data p.actor {background-image: url("../img/chart/actor_f.png");}
.chara_g .data p.actor {background-image: url("../img/chart/actor_g.png");}
.chara_h .data p.actor {background-image: url("../img/chart/actor_h.png");}
.chara_i .data p.actor {background-image: url("../img/chart/actor_i.png");}
.chara_j .data p.actor {background-image: url("../img/chart/actor_j.png");}


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

#cast_dt .txtArea  {background-image: url(../img/chart/bg_txt.png); }
#cast_dt .txtArea .txt { line-height: 1.9em; padding:0 0.5em 2.5em; text-align: left;}

@media all and (min-width: 768px) {
	div.character {letter-spacing: -.4em;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 350px;
		height: 370px;
		background-position: center top;
	}
	#cast_dt .ph_cut {
		margin: 0 0!important; padding: 0!important;
	}
.phArea{ display: inline-block; width:350px; vertical-align: top;}
.profArea{ display: inline-block; width:370px; vertical-align: top; letter-spacing: 0em; }
.data { width:370px;}
	.data p.name, .data p.name span { width:370px; height: 78px;}
	.data p.name {background-image: url(../img/chart/bg_name.png);}
	.data p.actor { width:100%; height: 28px; margin: 17px 0;}
#cast_dt .txtArea { padding: 0!important; margin-left: 20px;}
}
@media all and (max-width: 767px) {
	#cast_dt { }
	div.character {
		padding: 0.5em;margin:10px 15px 15px 10px;
	}
	div.character::after {
  /* ③位置やサイズを調整 */
  transform: translateY(15px) translateX(15px) scale(1.00);
}
	.phArea { width: 95%; max-width: 400px; margin: 0 auto; padding:0.5em 0 0;}

	#cast_dt .ph_cut {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#cast_dt .ph_cut span {
		padding-top: 103.448%;
	}
	
.profArea { width: 95%; margin: 0 auto; padding: 0; }
	.data { position: relative; max-width: 400px; margin: 0 auto 20px;}
	.data p.name, .data p.name span { width:100%; height: 55px;}
	.data p.name {background-image: url(../img/chart/bg_name_1.png);}
	.data p.actor { width:100%; height: 23px; margin:0; position: absolute; bottom:0!important;}
	.chara_h .data p.actor {background-image: url("../img/chart/actor_h_sp.png"); height: 32px;}
#cast_dt .txtArea { padding: 0!important; }

}

@media all and (max-width: 385px) {
	.chara_i .data p.actor {height: 20px;}
	.chara_h .data p.actor {height: 32px;}
	
}

@media all and (max-width: 369px) {
	.data { margin-bottom: 40px;}
	.chara_h .data { margin-bottom: 45px;}
	.data p.actor {height: 20px; bottom: -30px!important;}
	.chara_h .data p.actor { bottom: -35px!important;}
	
}