@charset "utf-8";

.pageTitle{
	width: 196px;
	height: 60px;
	background: url(./img/title.png) no-repeat 0 0;
}

.mainContents{
	position: relative;
}

.chartImg{
	width: 100%;
}

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

.detail{
	overflow: hidden;
	width: 680px;
	height: 450px;
	border-radius: 10px;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 80%, rgba(218,238,253,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 80%,rgba(218,238,253,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 80%,rgba(218,238,253,1) 100%);
}

.detailClass{
	padding: 34px 0 18px 40px;
	border-bottom: 14px solid #284697;
}

.detailCard{
	overflow: hidden;
	padding: 20px 26px;
}

.detailName{
	width: 400px;
}

.detailName span{
	display: block;
	margin-top: -22px;
	text-align: right;
	font-size: 22px;
}

.detailText{
	overflow: auto;
	width: 400px;
	height: 180px;
	padding: 0 10px 10px 0;
	margin-top: 15px;
	line-height: 1.4;
}

.detailPhoto{
	float: right;
	width: 203px;
}

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

.chartBox li{
	position: absolute;
}

.chartBox li a{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 100px;
}

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

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

#cast01{
	top: 387px;
	left: 373px;
	width: 210px;
	height: 210px;
}

#cast02{
	top: 387px;
	left: 704px;
	width: 210px;
	height: 210px;
}

#cast03{
	top: 387px;
	left: 42px;
	width: 210px;
	height: 210px;
}

#cast04{
	top: 58px;
	left: 683px;
	width: 210px;
	height: 210px;
}

#cast05{
	top: 58px;
	left: 115px;
	width: 210px;
	height: 210px;
}

#cast06{
	top: 668px;
	left: 536px;
	width: 210px;
	height: 210px;
}

/* 980px以下
==============================*/
@media screen and (max-width: 980px) {
	.pageTitle{
		width: 98px;
		height: 30px;
		background: url(./img/sp_title.png) no-repeat 0 0;
		background-size: 98px 30px;
	}

	#cast01{
		top: 39%;
		left: 39%;
		width: 22%;
		height: 22%;
	}

	#cast02{
		top: 39%;
		left: 73.9%;
		width: 22%;
		height: 22%;
	}

	#cast03{
		top: 39%;
		left: 4.4%;
		width: 22%;
		height: 22%;
	}

	#cast04{
		top: 5.8%;
		left: 71.7%;
		width: 22%;
		height: 22%;
	}

	#cast05{
		top: 5.8%;
		left: 12%;
		width: 22%;
		height: 22%;
	}

	#cast06{
		top: 67.3%;
		left: 56.3%;
		width: 22%;
		height: 22%;
	}

}/* media */

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

	.detailClass{
		padding: 20px 15px 10px;
		border-bottom: 7px solid #284697;
	}

	.detailClass img{
		width: 100%;
	}

	.detailCard{
		overflow: hidden;
		padding: 14px 10px;
	}

	.detailName img,
	.detailPhoto img{
		width: 100%;
	}

	.detailText{
		width: auto;
		height: 100px;
	}

	.splayout{
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
	}

	.detailPhoto{
		float: none;
		width: 40%;
	}

	.detailName{
		width: 49%;
		
	}

	.detailName span{
		display: block;
		margin-top: 8px;
		text-align: left;
		font-size: 18px;
	}
}/* media */