div.lb-outer {
font-family: "fot-udkakugo-large-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
}
.charaBox.phArea{ position: relative;}

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

.data {background-position: top left; background-repeat: no-repeat;}
.data p.degree {}
.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_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");}
.chara_21 .data {background-image: url("../img/chart/name_21.png");}
.chara_22 .data {background-image: url("../img/chart/name_22.png");}
.chara_23 .data {background-image: url("../img/chart/name_23.png");}
.chara_24 .data {background-image: url("../img/chart/name_24.png");}
.chara_25 .data {background-image: url("../img/chart/name_25.png");}
.chara_26 .data {background-image: url("../img/chart/name_26.png");}
.chara_27 .data {background-image: url("../img/chart/name_27.png");}
.chara_28 .data {background-image: url("../img/chart/name_28.png");}
.chara_29 .data {background-image: url("../img/chart/name_29.png");}
.chara_30 .data {background-image: url("../img/chart/name_30.png");}
.chara_31 .data {background-image: url("../img/chart/name_31.png");}

p.name, p.actor {
	height: 0; width: 0; text-indent: -9999px;
}
p.degree { position: absolute; background-position: center right; background-repeat: no-repeat; background-size: contain; text-indent: -9999px;}
.chara_01 .degree {background-image: url("../img/chart/degree_01.png");}
.player .degree {background-image: url("../img/chart/degree_02.png");}
.chara_03 .degree {background-image: url("../img/chart/degree_03.png");}
.chara_04 .degree, .chara_05 .degree {background-image: url("../img/chart/degree_04.png");}
.chara_06 .degree {background-image: url("../img/chart/degree_06.png");}
.chara_08 .degree {background-image: url("../img/chart/degree_08.png");}
.chara_09 .degree {background-image: url("../img/chart/degree_09.png");}
.chara_10 .degree {background-image: url("../img/chart/degree_10.png");}
.chara_11 .degree {background-image: url("../img/chart/degree_11.png");}
.chara_12 .degree {background-image: url("../img/chart/degree_12.png");}
.chara_13 .degree {background-image: url("../img/chart/degree_13.png");}
.chara_14 .degree {background-image: url("../img/chart/degree_14.png");}
.chara_15 .degree {background-image: url("../img/chart/degree_15.png");}
.chara_24 .degree, .chara_25 .degree {background-image: url("../img/chart/degree_24.png");}
.chara_29 .degree {background-image: url("../img/chart/degree_29.png");}
.chara_30 .degree {background-image: url("../img/chart/degree_30.png");}
.chara_31 .degree {background-image: url("../img/chart/degree_31.png");}


.charaBox .txtArea .txt { text-align: left; color: #fff;}


@media all and (min-width: 768px) {
	div.lb-outer div.lb-inner .charaBox {
	display: flex;
    flex-direction: row; /* 横並びに切り替え */
	background-position: top center; background-repeat: no-repeat; background-size: contain; background-image: url("../img/chart/bg_chara.png");
  }

.profArea { position: relative; width:345px; padding:45px 0 0 5px;}
.charaBox .phArea { width: 350px; height: 440px;}
	.charaBox .phArea .ph_cut, .charaBox .phArea .ph_cut span, .charaBox .phArea .ph_cut span img {
		width: 350px; height: 440px; padding-top:0;
		background-position: center top;
	}
	.profArea .data { width:345px; height: 135px; background-size: cover;}
	p.degree { width:345px; height: 50px; top:-15px; right:-5px;}
	.profArea .txtArea {padding: 0 5px; margin: 15px 0 0; height: 230px; overflow-y: scroll; font-size: 1.0em;}
	.profArea .txtArea .txt {padding:0; line-height: 1.6em; width: 100%;}
	
	/*/ スクロールバー全体*/
.profArea .txtArea::-webkit-scrollbar {
  width:4px;
  /*background:#eee;*/
}
/*/ 横スクロールバー全体*/
.profArea .txtArea::-webkit-scrollbar:horizontal {
  /*height:10px;*/ display: none;
}
/*/ スクロールバー上下左右末端のボタン*/
.profArea .txtArea::-webkit-scrollbar-button {
  width:6px;
  height:6px;
  /*background:#666;*/
}
/*/ ドラッグするツマミ部分*/
.profArea .txtArea::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,0.6);
border-radius: 5px; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
/*/ 右下角部分*/
.profArea .txtArea::-webkit-scrollbar-corner {
  /*background:#ddd;*/
}

}
@media all and (max-width: 767px) {
	div.lb-outer div.lb-inner { position: relative;}


	.charaBox .ph_cut {
		width: 100%;
		margin: 0 auto 0em;
		border: none; padding: 0;
	}
	.charaBox .ph_cut span {
	padding-top: -webkit-calc(440 / 350* 100%);
	padding-top: calc(440 / 350 * 100%);
	}

	
	.charaBox .profArea { width:100%; margin: 0 auto 0; background-color: #0262b5;}
	.data { width:97%; height: 0; margin-left: -12px;
	padding-top: -webkit-calc(135 / 345 * 100%);
	padding-top: calc(135 / 345 * 100%);
	background-position: top center; background-size: contain;
	 /*position: absolute; top:-20px; left:-10px;*/}
	p.degree { width:345px; height: 30px; background-size: auto 40px; top:10px; right:12px;}
	.charaBox .txtArea { padding:1em 0.8em 1.5em;}
	.charaBox .txtArea .txt { line-height: 1.6em; padding:0; font-size: 1.0em; }
	.charaBox .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%);
	}

}