#cast_dt {
    font-family: "fot-udkakugo-large-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #000;	
}

div.character {background-color: #fff; box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1);}
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");}
.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_00 .data {background-image: url("../img/chart/name_00.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");}

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) {
	div.character {width: 715px; height: 450px; padding: 10px;}
	.sizeM div.character {height: 400px;}
	/*.sizeS div.character {height: 385px;}*/
	div.character .charaBox {
	height: 450px;
	background-position: top center; background-image: url("../img/chart/bg_character.jpg?1");
	display: flex;
    flex-direction: row; /* 横並びに切り替え */
  }

.profArea {
    order: 1; /* テキストを左に */
     position: relative; width:360px;
  }

.phArea {
    order: 2; /* 写真を右に */
    width: 350px; height: 450px; border-left:solid 5px #fff;
  }

	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 350px; height: 450px; padding-top:0;
		background-position: center top;
	}
	#cast_dt.sizeM div.character .charaBox, #cast_dt.sizeM .phArea, #cast_dt.sizeM .ph_cut, #cast_dt.sizeM .ph_cut span, #cast_dt.sizeS .ph_cut span img {height: 400px;}
	/*#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: 385px;}*/
	.data { width:360px; height: 145px; background-size: cover;}
	.chara_00 .data { height: 107px; margin-bottom: 1em;}
	#cast_dt .txtArea {padding: 20px 15px 0 25px; font-size: 1.0em;}
	#cast_dt .txtArea .txt {padding:0 0 0.5em; line-height: 1.6em; width: 100%;}
	#cast_dt.chara_04 .txtArea .txt, #cast_dt.chara_17 .txtArea .txt { line-height: 1.5em;}
	

}
@media all and (max-width: 767px) {
	div.character {
		margin: 8px; padding: 6px;
		position: relative;
	}
	div.character .charaBox {
		background-position: top center; background-image: url("../img/chart/bg_character_sp.jpg"); background-size: cover;
		display: flex;
		flex-direction: column; /* モバイル（初期状態）は縦並び */
}

.profArea {
  order: 2; /* テキストを下に */
}

.phArea {
  order: 1; /* 写真を上に */
 border-bottom:solid 3px #fff;
}
	#cast_dt .ph_cut {
		width: 100%; max-width: 380px;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	#cast_dt .ph_cut span {
	padding-top: -webkit-calc(400 / 350 * 100%);
	padding-top: calc(400 / 350 * 100%);
	}
	/*#cast_dt.sizeM .ph_cut span {
	padding-top: -webkit-calc(400 / 350 * 100%);
	padding-top: calc(400 / 350 * 100%);
	}
	#cast_dt.sizeS .ph_cut span {
	padding-top: -webkit-calc(385 / 350 * 100%);
	padding-top: calc(385 / 350 * 100%);
	}*/
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
	}
	
	div.character .profArea { width:95%; margin: 0 auto 0;}
	.data { width:100%; height: 0;
	padding-top: -webkit-calc(290 / 720 * 100%);
	padding-top: calc(290 / 720 * 100%);
	background-position: top center; background-size: contain; margin: 0 auto;}
	.chara_00 .data {
	padding-top: -webkit-calc(214 / 720 * 100%);
	padding-top: calc(214 / 720 * 100%);
	 margin-bottom: 1em;}
	#cast_dt .txtArea { padding:0.5em 0 1.5em;}
	#cast_dt .txtArea .txt { line-height: 1.8em; padding:0em 0em 3em; font-size: 1.0em; }
	.profArea .txtArea a{right:10px;} 

}