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

div.character {box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.1);}
div.charaBox {position: relative;}

div.character.charaBgNaze { padding: 5px;}
.chara_04 .charaBgNaze {background-color: #c28dff;}
.chara_05 .charaBgNaze {background-color: #78F2FF;}
.chara_06 .charaBgNaze {background-color: #FFF066;}
.chara_07 .charaBgNaze {background-color: #FF8D6E;}
.chara_08 .charaBgNaze {background-color: #C2F766;}
.chara_09 .charaBgNaze {background-color: #55AAFF;}
.chara_10 .charaBgNaze {background-color: #FFB3ED;}
div.character.charaBgNaze .charaBox { background-repeat: no-repeat; background-position: 0 0; background-image: url("../img/chart/bg_chara_naze.png?1"); }
.chara_04 div.character.charaBgNaze .charaBox { background-color: #f8f2fe;}
.chara_05 div.character.charaBgNaze .charaBox { background-color: #defafd;}
.chara_06 div.character.charaBgNaze .charaBox { background-color: #fcf9dd;}
.chara_07 div.character.charaBgNaze .charaBox { background-color: #fee8e2;}
.chara_08 div.character.charaBgNaze .charaBox { background-color: #eafccb;}
.chara_09 div.character.charaBgNaze .charaBox { background-color: #e0effd;}
.chara_10 div.character.charaBgNaze .charaBox { background-color: #fdedf9;}

.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_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");}

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

.charaBgNaze .data {margin: 0 auto;}
.chara_04 .charaBgNaze .data {border-bottom: solid 3px #c28dff; }
.chara_05 .charaBgNaze .data {border-bottom: solid 3px #78F2FF; }
.chara_06 .charaBgNaze .data {border-bottom: solid 3px #FFF066; }
.chara_07 .charaBgNaze .data {border-bottom: solid 3px #FF8D6E; }
.chara_08 .charaBgNaze .data {border-bottom: solid 3px #C2F766; }
.chara_09 .charaBgNaze .data {border-bottom: solid 3px #55AAFF; }
.chara_10 .charaBgNaze .data {border-bottom: solid 3px #FFB3ED; }
div.character.charaBgNaze p.name { height: auto; width: auto; text-indent: 0;
    font-family: sicuveiw-dsp, sans-serif;
    font-weight: 800;
    font-style: normal;}

#cast_dt .txtArea .txt { text-align: left;}
.profArea{ position:relative;}
div.character.charaBgNaze .charaBox .profArea { background-repeat: no-repeat;}
.chara_04 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member01.png");}
.chara_05 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member02.png");}
.chara_06 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member03.png");}
.chara_07 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member04.png");}
.chara_08 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member05.png");}
.chara_09 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member06.png");}
.chara_10 div.character.charaBgNaze .charaBox .profArea {background-image: url("../img/member/icon_member07.png");}

@media all and (min-width: 768px) {
	div.character {width: 730px; height: 470px; padding: 0px;}
	div.character .charaBox {
	height: 470px;
	display: flex;
    flex-direction: row; /* 横並びに切り替え */
  }
	div.character.charaBg01 .charaBox { background-position: top center; background-image: url("../img/chart/bg_character01.jpg"); background-color: #f7f0f6;}
	div.character.charaBg02 .charaBox { background-position: top center; background-image: url("../img/chart/bg_character02.jpg"); background-color: #e9fbe8;}

.profArea { position: relative; width:370px; padding-top: 20px;}
.phArea { width: 360px; height: 470px;}
	#cast_dt .ph_cut, #cast_dt .ph_cut span, #cast_dt .ph_cut span img {
		width: 360px; height: 470px; padding-top:0;
		background-position: center top;
	}
	.data { width:370px; height: 123px; background-size: cover;}
	#cast_dt .txtArea {padding: 25px; font-size: 1.0em;}
	#cast_dt .txtArea .txt {padding:0 0 0.5em; line-height: 1.6em; width: 100%;}
	
	#cast_dt.chara_14 div.character {height: 520px;}
	.chara_14 div.character .charaBox { display: block; height: 520px; background-size: cover;}
	.chara_14 .profArea {width:580px; padding-top: 15px; margin: 0 auto;}
	.chara_14 .data { width:400px; height: 52px;}
	.chara_14 .phArea {width:580px; height:323px; padding-top: 5px; margin: 0 auto;}
	#cast_dt.chara_14 .ph_cut, #cast_dt.chara_14 .ph_cut span, #cast_dt.chara_14 .ph_cut span img {
		width:580px; height:323px;
	}
	#cast_dt.chara_14 .txtArea {padding:10px 0 0;}
	
div.character.charaBgNaze {width: 720px; height: 460px;}
div.character.charaBgNaze .charaBox {height: 460px;}	
div.character.charaBgNaze .charaBox .profArea {background-position: right bottom; background-size: 200px 146px;}
.charaBgNaze .charaBox .phArea  { width: 352px; height: 460px;}
#cast_dt .charaBgNaze .ph_cut, #cast_dt .charaBgNaze .ph_cut span, #cast_dt .charaBgNaze .ph_cut span img {
		width: 352px; height: 460px; padding-top:0;
		background-position: center top;
	}
	.charaBgNaze .data { width: 330px; height: auto;}
	.charaBgNaze .data p.name { padding: 0 5px 20px; font-size: 3.3em;}
}
@media all and (max-width: 767px) {
	div.character {
		margin: 0; padding: 0;
		position: relative;
	}
	div.character .charaBox {background-repeat: no-repeat; background-position: center bottom; background-size: contain; }
	div.character.charaBg01 .charaBox {background-image: url("../img/chart/bg_character01_sp.jpg"); background-color: #f7f0f6;}
	div.character.charaBg02 .charaBox {background-image: url("../img/chart/bg_character02_sp.jpg"); background-color: #e9fbe8;}

	#cast_dt .ph_cut {
		width: 100%;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	#cast_dt .ph_cut span {
	padding-top: -webkit-calc(470 / 360* 100%);
	padding-top: calc(470 / 360 * 100%);
	}

	
	div.character .profArea { width:90%; margin: 1em auto 0;}
	.data { width:100%; height: 0;
	padding-top: -webkit-calc(123 / 370 * 100%);
	padding-top: calc(123 / 370 * 100%);
	background-position: top center; background-size: contain; margin: 0 auto;}
	#cast_dt .txtArea { padding:1em 0 1.5em;}
	#cast_dt .txtArea .txt { line-height: 1.6em; padding:0em 0em 3em; font-size: 1.0em; }
	.profArea .txtArea a{right:10px;}
	
	.chara_14 .data { width:100%; height: 45px; padding-top: 0; background-position: top left;}
	.chara_14 .phArea { padding: 5px;}
	.chara_14#cast_dt .ph_cut span {
	padding-top: -webkit-calc(323 / 580* 100%);
	padding-top: calc(323 / 580 * 100%);
	}
	.chara_14 div.character .charaBox {
        background-size: cover;
    }
	
	
	div.character.charaBgNaze .charaBox {background-position: right bottom; background-size: 500px auto;}
	.charaBgNaze .charaBox .profArea { width:100%; margin: 0 auto 0;}
	div.character.charaBgNaze .charaBox .profArea { background-position: right top; background-size: 117px 85px;}
	.charaBgNaze .data {height: auto; padding-top: 1em; width:90%; margin: 0 auto;}
	.charaBgNaze .data p.name { padding: 0 5px 15px; font-size: 3.0em;}
	.charaBgNaze .txtArea {width:90%; margin: 0 auto;}

}
