@charset "utf-8";

.mainContents{
	position: relative;
}

.chartImg{
	width: 100%;
}

/* 人物詳細モーダル */
.detailContainer{
	display: none;
}

.detail{
	overflow: hidden;
	width: 706px;
	height: 424px;
	padding: 9px 14px 10px 10px;
	border: 2px solid #fa3343;
	background-color: rgba(255, 255, 255, .9);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.detailName{
	float: right;
	width: 356px;
	padding: 30px 0;
	font-size: 46px;
	color: #fa3343;
	text-align: center;
	font-family: "黎ミンY10 M", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	background-image: url(../common/img/line_red_side.png), url(../common/img/line_red_side.png), url(../common/img/line_red_rep.png);
	background-position: left bottom, right bottom, center bottom;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

.detailName span{
	display: block;
	padding-top: 10px;
	font-size: 27px;
}

.detailText{
	overflow: auto;
	float: right;
	width: 356px;
	height: 256px;
	padding: 16px 10px;
	line-height: 1.8;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.detailPhoto{
	float: left;
}

/* 人物一覧 */
.chartBox{
}

.chartBox li{
	position: absolute;
}

.chartBox li a{
	display: block;
	width: 100%;
	height: 100%;
}

/*
.chartBox li a:hover{
	background: rgba(255, 255, 255, 0.2);
}
*/

.chartBox li a img{
	width: 100%;
	height: 100%;
}

#cast01{
	top: 299px;
	left: 404px;
	width: 338px;
	height: 440px;
}

#cast02{
	top: 2px;
	left: 546px;
	width: 176px;
	height: 250px;
}

#cast03{
	top: 2px;
	left: 291px;
	width: 176px;
	height: 250px;
}

#cast04{
	top: 374px;
	left: 225px;
	width: 134px;
	height: 184px;
}

#cast05{
	top: 576px;
	left: 52px;
	width: 134px;
	height: 184px;
}

#cast06{
	top: 732px;
	left: 225px;
	width: 134px;
	height: 184px;
}

#cast07{
	top: 274px;
	left: 777px;
	width: 176px;
	height: 250px;
}

#cast08{
	top: 536px;
	left: 829px;
	width: 176px;
	height: 250px;
}

/*#cast09{
	top: 251px;
	left: 52px;
	width: 134px;
	height: 184px;
}*/

#cast10{
	top: 777px;
	left: 419px;
	width: 134px;
	height: 184px;
}

#cast11{
	top: 785px;
	left: 766px;
	width: 176px;
	height: 250px;
}
#cast12{
	top: 251px;
	left: 52px;
	width: 134px;
	height: 184px;
}
#cast13{
	top: 0;
	left: 829px;
	width: 176px;
	height: 250px;
}
/* 1100px以下
==============================*/
@media screen and (max-width: 1100px) {
	.mainContents, .bottomContents {
		width: auto;
		padding-left: 0;
		padding-right: 0;
		margin-left: 2.5%;
		margin-right: 2.5%;
	}

	#cast01{
		top: 29.6%;
		left: 36.7%;
		width: 30.7%;
		height: 43.5%;
	}

	#cast02{
		top: 0.1%;
		left: 49.6%;
		width: 16%;
		height: 24.7%;
	}

	#cast03{
		top: 0.1%;
		left: 26.4%;
		width: 16%;
		height: 24.7%;
	}

	#cast04{
		top: 37%;
		left: 20.4%;
		width: 12.1%;
		height: 18.2%;
	}

	#cast05{
		top: 57%;
		left: 4.7%;
		width: 12.1%;
		height: 18.2%;
	}

	#cast06{
		top: 72.4%;
		left: 20.4%;
		width: 12.1%;
		height: 18.2%;
	}

	#cast07{
		top: 26.5%;
		left: 70.6%;
		width: 16%;
		height: 24.7%;
	}

	#cast08{
		top: 51.5%;
		left: 75.2%;
		width: 16%;
		height: 24.7%;
	}

	/*#cast09{
		top: 24.8%;
		left: 4.7%;
		width: 12.1%;
		height: 18.2%;
	}*/

	#cast10{
		top: 76.9%;
		left: 38%;
		width: 12.1%;
		height: 18.2%;
	}

	#cast11{
		top: 75.7%;
		left: 69.5%;
		width: 16%;
		height: 24.7%;
	}

	#cast12{
		top: 24.8%;
		left: 4.7%;
		width: 12.1%;
		height: 18.2%;
	}

	#cast13{
		top: 0%;
		left: 75.4%;
		width: 16%;
		height: 24.7%;
	}
}/* media */

/* 680px以下
==============================*/
@media screen and (max-width: 730px) {
	.detail{
		overflow: hidden;
		width: 100%;
		height: auto;
		padding: 10px 5px;
	}

	.detailPhoto img{
		width: 100%;
	}

	.detailName{
		float: none;
		width: 100%;
		margin-bottom: 12px;
		padding: 0 0 14px;
		font-size: 24px;
		background-size: auto 3px;
	}

	.detailName span{
		font-size: 12px;
	}
	
	.detailBox{
		overflow: auto;
		max-height: 200px;
		padding-right: 10px;
	}

	.detailPhoto{
		float: left;
		width: 40%;
		padding-right: 5px;
	}

	.detailText{
		overflow: visible;
		float: none;
		width: auto;
		height: auto;
		padding: 0 0 5px;
		font-size: 13px;
		line-height: 1.4;
	}
}/* media */