#cast_dt {
    font-family: "fot-udkakugo-large-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #000;
	
}
div.character {}
div.character.charaBg01 {background-color: #fedade;}
div.character.charaBg02 {background-color: #e2e0fb;}
div.character.charaBg03 {background-color: #c3e9fe;}
div.character.charaBg04 {background-color: #d2eed1;}
div.character.charaBg05 {background-color: #fcdca9;}
div.charaBox {position: relative;}

.phArea{ position: relative;}

div.character .ph_cut span img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.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?2");}
.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");}
.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");}
.chara_18 .data {background-image: url("../img/chart/name_18.png");}
.chara_19 .data {background-image: url("../img/chart/name_19.png");}
.chara_20 .data {background-image: url("../img/chart/name_20.png?2");}
.chara_21 .data {background-image: url("../img/chart/name_21.png");}
.chara_22 .data {background-image: url("../img/chart/name_22.png");}
.chara_01.second .data {background-image: url("../img/chart/name_01_2.png");}
.chara_02.second .data {background-image: url("../img/chart/name_02_2.png");}
.chara_03.second .data {background-image: url("../img/chart/name_03_2.png");}
.chara_04.second .data {background-image: url("../img/chart/name_04_2.png");}
.chara_05.second .data {background-image: url("../img/chart/name_05_2.png");}
.chara_14.second .data {background-image: url("../img/chart/name_14_2.png");}
.chara_15.second .data {background-image: url("../img/chart/name_15_2.png");}
.chara_16.second .data {background-image: url("../img/chart/name_16_2.png");}

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

#cast_dt .txtArea .txt { text-align: left;}
.profArea{ position:relative;} 

@media all and (min-width: 768px) {
	#cast_dt{}
	div.character {width: 720px; height: 460px; padding: 5px;}
	div.character .charaBox { height: 460px; display: flex; flex-wrap: wrap;}
	div.character.charaBg01 .charaBox { background-image:url(../img/chart/bg_chartdetail01.png);}
	div.character.charaBg02 .charaBox { background-image:url(../img/chart/bg_chartdetail02.png);}
	div.character.charaBg03 .charaBox { background-image:url(../img/chart/bg_chartdetail03.png);}
	div.character.charaBg04 .charaBox { background-image:url(../img/chart/bg_chartdetail04.png);}
	div.character.charaBg05 .charaBox { background-image:url(../img/chart/bg_chartdetail05.png);}

	.phArea{ width: 380px; height: 460px;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 380px; height: 460px; padding-top:0;
		background-position: center top;
	}
	#cast_dt .ph_cut {}
	
	.profArea{ position: relative; width:340px; padding: 0px;}
	.data { width:345px; height: 126px; background-size: cover; position: absolute; top:15px; right:17px;}
	#cast_dt .txtArea { width: 325px; padding-top: 165px; font-size: 1.0em;}
	#cast_dt .txtArea .txt {padding:0 0 0.5em; line-height: 1.8em; width: 100%;}
	

}
@media all and (max-width: 767px) {
	#cast_dt{}
	div.character {
		margin: 8px; padding: 8px;
		position: relative;
	}
	#cast_dt .ph_cut {
		width: 100%; max-width: 380px;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	#cast_dt .ph_cut span {
		padding-top: 121.052%;
	}
	
	div.character .profArea { width:100%; margin: -18% auto 0;}
	.data { width:100%; height: 0; padding-top: 36.521%; background-position: top center; background-size: contain; margin: 0 auto;}
	#cast_dt .txtArea { padding:0.5em 0 1.5em;}
	#cast_dt .txtArea .txt { line-height: 1.8em; padding:1em 1em 2.5em; background-color: #f7f7ed;}
	.profArea .txtArea a{right:10px;} 

}