div.lb-outer {
font-family: "fot-tsukubrdgothic-std", 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?1");}
.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");}

p.name, p.actor, p.degree {
	height: 0; width: 0; text-indent: -9999px;
}
.profArea .txtArea { background-color: rgba(255,255,255,0.4);}
.charaBox .txtArea .txt { text-align: left; color: #000;}


@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: cover; background-image: url("../img/chart/bg_chara.jpg");
  }
	.charaBox .phArea { width: 380px; height: 438px;}
	.charaBox .phArea .ph_cut, .charaBox .phArea .ph_cut span, .charaBox .phArea .ph_cut span img {
		width: 380px; height: 438px; padding-top:0;
		background-position: center top;
	}
	.profArea { position: relative; width:425px; padding:0; margin-left: -88px;}
	.profArea .data { width:425px; height: 160px; margin-bottom: 8px; background-size: cover;}
	.profArea .txtArea {width: 330px; height: 210px; padding: 25px; margin: 0 10px 0 auto; overflow-y: scroll; font-size: 1.0em;}
	.profArea .txtArea .txt {padding:0; line-height: 1.6em; font-size: 1.05em; width: 100%;}
	.chara_01 .profArea .txtArea .txt {line-height: 1.5em;}
	.chara_11 .charaBox .phArea { width: 380px; height: 350px;}
	.chara_11 .charaBox .phArea .ph_cut, .chara_11 .charaBox .phArea .ph_cut span, .chara_11 .charaBox .phArea .ph_cut span img {
		width: 380px; height: 350px; padding-top:0;
		background-position: center top;
	}
	.chara_11 .profArea .txtArea {width: 330px; height: 122px; padding: 25px; margin: 0 10px 0 auto; overflow-y: scroll; font-size: 1.0em;}
	
	/*/ スクロールバー全体*/
.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(70,96,172,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;}
	div.lb-outer div.lb-inner .charaBox {
	background-position: top center; background-repeat: no-repeat; background-size: cover; background-image: url("../img/chart/bg_chara_sp.jpg");
  }

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

	
	.charaBox .profArea { width:100%; margin: 0 auto 0; padding-bottom: 50px;}
	.data { width:97%; height: 0; margin:0 0 0.5em 3%;
	padding-top: -webkit-calc(160 / 425 * 100%);
	padding-top: calc(160 / 425 * 100%);
	background-position: top center; background-size: contain;
	 /*position: absolute; top:-20px; left:-10px;*/}
	.charaBox .txtArea { padding:1em 1em 1.5em; margin:0 0.5em;}
	.charaBox .txtArea .txt { line-height: 1.6em; padding:0; font-size: 1.0em; }


}