@charset "UTF-8";

/* chart
------------------------------------------ */
.chart-area {
	margin: 0 auto !important;
}
.chart-area .d-box-title {
	position: absolute;
	z-index: 30;
	top: 0;
}
.chart-inner {}
.chart-box {
	padding-top: 135px;
}

.chart-img {
	position: relative;
}

.chart-link {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.chart-link-map {}


/* chart-btn
------------------------------------------ */
.chart-btn {
	width: 75%;
	max-width: 477px;
	margin: 60px auto;
	text-align: center;
}
.chart-btn a {
	display: block;
}
.chart-btn img {
	display: block;
	width: 100%;
}


/* character
------------------------------------------ */
.character-area {
	margin: 80px auto 120px !important;
}
.character-inner {}

.character-list {}

.character-item {
	padding: 50px 15px;
	background-image: url(../images/chart/character-bg-01-pc.png);
	background-repeat: repeat-y;
	background-position: center top;
	background-color: transparent;
	background-size: 100% auto;
	-webkit-transform: skew(0deg, -2deg);
	-moz-transform: skew(0deg, -2deg);
	-ms-transform: skew(0deg, -2deg);
	transform: skew(0deg, -2deg);
	position: relative;
}
.character-item:after { content: ''; display: block; clear: both; }
.character-item:not(:first-of-type) {
	margin-top: 20px;
}
.character-item:nth-of-type(odd) {
	background-image: url(../images/chart/character-bg-01-pc.png);
}
.character-item:nth-of-type(even) {
	background-image: url(../images/chart/character-bg-02-pc.png);
}
.character-item.separator {
	margin-top: 80px;
}
.character-item.separator:before {
	content: '';
	display: block;
	width: 100%;
	height: 50px;
	background: url(../images/chart/character-line.png) no-repeat center;
	background-size: auto 30px;
	position: absolute;
	top: -65px;
	left: 0;
	z-index: 30;
}

.character-box {
	-webkit-transform: skew(0deg, 2deg);
	-moz-transform: skew(0deg, 2deg);
	-ms-transform: skew(0deg, 2deg);
	transform: skew(0deg, 2deg);
}

.character-img {
	width: 33.83%;
	padding-left: 15px;
	float: left;
}

/* character-title */
.character-title {
	margin-left: calc(33.83% + 30px);
	font-weight: bold;
	text-align: center;
}
.character-title .cast {
	padding-bottom: 10px;
	background: url(../images/chart/chart-line.png) repeat-x center bottom transparent;
	background-size: 100% auto;
	color: #d10106;
	font-size: 2.8rem;
}
.character-title .name { font-size: 3.6rem; }

/* character-outline */
.character-outline {
	margin-left: calc(33.83% + 30px);
	padding-right: 15px;
	font-weight: bold;
}
.character-outline:after { content: ''; display: block; clear: both; }

/* character-comment */
.character-comment {
	margin-top: 20px;
	padding: 0 15px;
	font-weight: bold;
}

/* character-outline, character-comment */
.character-outline-title:first-letter,
.character-comment-title:first-letter {
	color: #d10106;
}
.character-outline-title,
.character-comment-title {
	margin-bottom: 15px;
	padding-bottom: 10px;
	font-size: 2.6rem;
	border-bottom: 1px solid #000;
}
.character-outline-text,
.character-comment-text { font-size: 1.8rem; line-height: 1.8; }



/* ---------------------------------
 SP（〜600px）
--------------------------------- */
@media only screen and (max-width: 600px) {
	/* d-link
	------------------------------------------ */
	.d-link-area {
		margin: 12% auto;
	}

	/* chart
	------------------------------------------ */
	.chart-area {}
	.chart-inner {}
	.chart-box { padding-top: 20%; }
	.chart-img { padding: 0 3%; }

	/* chart-btn
	------------------------------------------ */
	.chart-btn {
		margin: 8% auto;
		text-align: center;
	}
	.chart-btn a {
		display: block;
	}
	.chart-btn img {
		display: block;
		width: 100%;
	}

	/* character
	------------------------------------------ */
	.character-area { margin: 8% auto 12% !important; }
	.character-inner { padding: 0 3%; }

	.character-list {}
	.character-item { padding: 6% 5% 8%; }
	.character-item:nth-of-type(odd) {
		background-image: url(../images/chart/character-bg-01-sp.png);
	}
	.character-item:nth-of-type(even) {
		background-image: url(../images/chart/character-bg-02-sp.png);
	}
	.character-item.separator {
		margin-top: 40px;
	}
	.character-item.separator:before {
		height: 30px;
		top: -35px;
		background-size: auto 15px;
	}

	.character-img {
		width: 58.73%;
		margin: 0 auto 15px;
		padding: 0;
		float: none;
	}

	.character-title {
		margin-bottom: 15px;
		margin-left: 0;
		font-weight: bold;
		text-align: center;
	}
	.character-title .cast { padding-bottom: 5px; font-size: 1.4rem; }
	.character-title .name { font-size: 1.8rem; }

	.character-outline {
		margin-left: 0;
		padding-right: 0;
	}

	.character-comment {
		margin-top: 15px;
		padding: 0;
	}

	.character-outline-title,
	.character-comment-title {
		margin-bottom: 5px;
		padding-bottom: 5px;
		font-size: 1.8rem;
	}
	.character-outline-text,
	.character-comment-text { font-size: 1.4rem; }
}



/* ---------------------------------
 SP 〜 tablet（〜992px）
--------------------------------- */
@media screen and (min-width: 601px) and (max-width: 992px) {
	/* chart
	------------------------------------------ */
	.chart-box { padding: 135px 3% 0; }

	/* character
	------------------------------------------ */
	.character-inner { padding: 0 3%; }
}

@media screen and (max-width: 992px) {
	/* chart
	------------------------------------------ */
	.chart-area {}
	.chart-inner {}
}



/* ---------------------------------
 PC（993px〜）
--------------------------------- */
@media screen and (min-width: 993px) {
}