#cast_dt{
	}
div.character, div.note {
	padding: 4px;
	position: relative;
	font-family: toppan-bunkyu-gothic-pr6n, serif;
font-weight: 400;
font-style: normal;
	color: #fff;
	
	}
div.character {background-color: #fff;}
div.character.charaBg01 {border: solid 3px #411b3b;} 
div.character.charaBg02 {border: solid 3px #1b3578;}
div.character.charaBg03 {border: solid 3px #055f5e;}

.phArea{ position: relative;}

.data {background-position: top left; background-repeat: no-repeat;}
.chara_01 .data {background-image: url("../img/chart/name_01.png");}
.chara_02 .data {background-image: url("../img/chart/name_02.png");}
.chara_03 .data {background-image: url("../img/chart/name_03.png");}
.chara_04 .data {background-image: url("../img/chart/name_04.png");}
.chara_05 .data {background-image: url("../img/chart/name_05.png");}
.chara_06 .data {background-image: url("../img/chart/name_06.png");}
.chara_07 .data {background-image: url("../img/chart/name_07.png");}
.chara_08 .data {background-image: url("../img/chart/name_08.png");}
.chara_09 .data {background-image: url("../img/chart/name_09.png");}
.chara_10 .data {background-image: url("../img/chart/name_10.png");}
.chara_11 .data {background-image: url("../img/chart/name_11.png");}
.chara_12 .data {background-image: url("../img/chart/name_12.png");}
.chara_13 .data {background-image: url("../img/chart/name_13.png?1");}
.chara_14 .data {background-image: url("../img/chart/name_14.png");}
.chara_15 .data {background-image: url("../img/chart/name_15.png");}
.chara_16 .data {background-image: url("../img/chart/name_16.png");}
.chara_17 .data {background-image: url("../img/chart/name_17.png?1");}
.chara_18 .data {background-image: url("../img/chart/name_18.png");}

p.name, p.actor, p.degree{
	height: 0; width: 0; text-indent: -9999px;
}
#cast_dt .txtArea  {}
#cast_dt .txtArea .txt { line-height: 2.0em; text-align: left;}

@media all and (min-width: 768px) {
	#cast_dt{ padding: 0px;}
	div.character {position: relative; width: 716px; height: 437px;}
	.sizeS div.character {height: 380px;}
	div.character .charaBox { height: 437px;　letter-spacing: -.4em;}
	div.character.charaBg01 .charaBox { background-image:url(../img/chart/bg_chartdetail01.jpg);}
	div.character.charaBg02 .charaBox { background-image:url(../img/chart/bg_chartdetail02.jpg);}
	div.character.charaBg03 .charaBox { background-image:url(../img/chart/bg_chartdetail03.jpg);}
	.phArea{ width: 350px; height: 437px; display: inline-block;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 350px;
		height: 437px;
		background-position: center top;
	}
	#cast_dt.sizeS div.character .charaBox, #cast_dt.sizeS .phArea, #cast_dt.sizeS .ph_cut, #cast_dt.sizeS .ph_cut span, #cast_dt.sizeS .ph_cut span img {height: 380px;}
	#cast_dt .ph_cut {
		margin: 0 0!important; padding: 0!important; border: none; display: inline-block; vertical-align: top;
	}
	
	.profArea{ position: relative; width:356px; padding-top: 20px; letter-spacing: 0em; display: inline-block; vertical-align: top;}
	.data { width:356px; height: 157px; background-size: cover; margin: 0 0 0 auto;}
	.noDegree .data { height: 122px;}
	.noActor .data { height: 80px;}
	#cast_dt .txtArea { padding:15px 10px; font-size: 1.1em;}
	#cast_dt .txtArea .txt {padding:0 0 0.5em;}
	
	div.note {width:100%; padding: 0;}
	#note_dt .phArea {/* width: 724px; height: 1064px;*/width:100%; height: 100%; margin: 0 auto;}
	#note_dt .ph_cut {width:100%; height:100%; margin: 0;}
	#note_dt .ph_cut span {width:100%; height:90vh; /*height: 0; padding-top: 146.961%;*/ background-size: contain; background-position: top center;}
	#note_dt .ph_cut span img {width:100%; height:100%;}

}
@media all and (max-width: 767px) {
	div.character {
		margin: 10px;
		position: relative;
	}
	div.character .charaBox {}
	div.character.charaBg01 .charaBox {background-image:url(../img/chart/bg_chartdetail_sp01.jpg);}
	div.character.charaBg02 .charaBox {background-image:url(../img/chart/bg_chartdetail_sp02.jpg);}
	div.character.charaBg03 .charaBox {background-image:url(../img/chart/bg_chartdetail_sp03.jpg);}

	#cast_dt .ph_cut {
		width: 100%;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	#cast_dt .ph_cut span {
		padding-top: 110%;
	}
	
	#cast_dt.sizeS .ph_cut span {
		padding-top: 100%;
	}
	#cast_dt.chara_05 .ph_cut span {
		background-position: center bottom;
	}
	
	div.character .profArea { padding-top: 10px;}
	.data { width:95%; height: 0; padding-top: 44.101%; background-position: top center; background-size: contain; margin: 0 auto;}
	.noDegree .data { padding-top: 34.269%;}
	.noActor .data { padding-top: 22.471%;}
	#cast_dt .txtArea { width: 90%; margin: 10px auto 0; padding:0 0 4em;}
	
	div.note {
		margin: 10px;
		position: relative;
	}
	#note_dt .ph_cut { margin: 0;}
	#note_dt .ph_cut span {
		padding-top: 146.961%;
	}


}