@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : chart.css
Description :
===================================================================== */


/* =====================================================================
*    chart
* =================================================================== */
.chart::before {
	content: '';
	position: absolute;
	background: url(../images/chart/bg_chart.jpg) no-repeat center top/contain;
	width: calc(1850 / 750 * 100vw);
	height: calc(215 / 750 * 100vw);
	top: 0;
	left: -75%;
	margin: calc(40 / 750 * 100%) auto 0;
}

.chart .sec_ttl {
	margin: 0 0 calc(220 / 750 * 100%);
}

.chart .sec_contents {
	width: calc(700 / 750 * 100%);
}

.chart_ep_btn {
	text-align: right;
	margin-bottom: calc(40 / 700 * 100%);
}

.chart_ep_btn span {
	font-size: 2.6rem !important;
}

.chart_btn {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.chart_btn li {
	position: absolute;
	top: 0;
	left: 0;
}

.chart_btn_img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.chart_btn_frame {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.chart_id_01 {
    width: calc(235 / 1000* 100%);
    padding-top: calc(288 / 1000* 100%);
    margin: calc(320 / 1000* 100%) 0 0 calc(399 / 1000* 100%);
}

#chart_id_01--ep {
	width: calc(280 / 1000* 100%);
	padding-top: calc(340 / 1000* 100%);
	margin: calc(366 / 1000* 100%) 0 0 calc(359 / 1000* 100%);
}

.chart_id_02 {
    width: calc(191 / 1000* 100%);
    padding-top: calc(235 / 1000* 100%);
    margin: calc(970 / 1000* 100%) 0 0 calc(620 / 1000* 100%);
}

#chart_id_02--ep {
	width: calc(220 / 1000* 100%);
	padding-top: calc(270 / 1000* 100%);
	margin: calc(916 / 1000* 100%) 0 0 calc(588 / 1000* 100%);
}

.chart_id_03 {
    width: calc(191 / 1000* 100%);
    padding-top: calc(235 / 1000* 100%);
    margin: calc(372 / 1000 * 100%) 0 0 calc(664 / 1000 * 100%);
}

#chart_id_03--ep {
	width: calc(230 / 1000* 100%);
	padding-top: calc(280 / 1000* 100%);
	margin: calc(426 / 1000 * 100%) 0 0 calc(724 / 1000 * 100%);
}

.chart_id_04 {
    width: calc(191 / 1000* 100%);
    padding-top: calc(235 / 1000* 100%);
    margin: calc(372 / 1000 * 100%) 0 0 calc(178 / 1000* 100%);
}

#chart_id_04--ep {
	width: calc(230 / 1000* 100%);
	padding-top: calc(280 / 1000* 100%);
	margin: calc(427 / 1000 * 100%) 0 0 calc(42 / 1000* 100%);
}

.chart_id_05 {
    width: calc(191 / 1000* 100%);
    padding-top: calc(235 / 1000* 100%);
    margin: calc(970 / 1000* 100%) 0 0 calc(404 / 1000* 100%);
}

#chart_id_05--ep {
	width: calc(220 / 1000* 100%);
	padding-top: calc(270 / 1000* 100%);
	margin: calc(916 / 1000* 100%) 0 0 calc(337 / 1000* 100%);
}

.chart_id_06 {
    width: calc(160/ 1000* 100%);
    padding-top: calc(203/ 1000* 100%);
    margin: calc(50 / 1000* 100%) 0 0 calc(438/ 1000* 100%);
}

#chart_id_06--ep {
	width: calc(185/ 1000* 100%);
	padding-top: calc(230/ 1000* 100%);
	margin: calc(44 / 1000* 100%) 0 0 calc(406/ 1000* 100%);
}

.chart_id_07 {
    width: calc(160 / 1000* 100%);
    padding-top: calc(203 / 1000* 100%);
    margin: calc(1003 / 1000* 100%) 0 0 calc(841 / 1000* 100%);
}

#chart_id_07--ep {
	width: calc(160 / 1000* 100%);
	padding-top: calc(200 / 1000* 100%);
	margin: calc(985 / 1000* 100%) 0 0 calc(840 / 1000* 100%);
}

.chart_id_08 {
    width: calc(160 / 1000* 100%);
    padding-top: calc(203 / 1000* 100%);
    margin: calc(50 / 1000* 100%) 0 0 calc(802 / 1000* 100%);
}

#chart_id_08--ep {
	width: calc(160 / 1000* 100%);
	padding-top: calc(200 / 1000* 100%);
	margin: calc(44 / 1000* 100%) 0 0 calc(796 / 1000* 100%);
}

.chart_id_09 {
    width: calc(160 / 1000* 100%);
    padding-top: calc(202 / 1000* 100%);
    margin: calc(1121 / 1000* 100%) 0 0 calc(0 / 1000* 100%);
}

#chart_id_09--ep {
	width: calc(160 / 1000* 100%);
	padding-top: calc(200 / 1000* 100%);
    margin: calc(786 / 1000* 100%) 0 0 calc(14/ 1000* 100%);
}

.chart_id_10 {
    width: calc(127 / 1000* 100%);
    padding-top: calc(160 / 1000* 100%);
    margin: calc(50 / 1000* 100%) 0 0 calc(34 / 1000* 100%);
}

#chart_id_10--ep {
    width: calc(130 / 1000* 100%);
    padding-top: calc(165 / 1000* 100%);
    margin: calc(70 / 1000* 100%) 0 0 calc(35 / 1000* 100%);
}

.chart_id_11 {
    width: calc(127 / 1000* 100%);
    padding-top: calc(160 / 1000* 100%);
    margin: calc(50 / 1000* 100%) 0 0 calc(181 / 1000* 100%);
}

#chart_id_11--ep {
    width: calc(130 / 1000* 100%);
    padding-top: calc(165 / 1000* 100%);
    margin: calc(70 / 1000* 100%) 0 0 calc(195 / 1000* 100%);
}

.chart_id_12 {
    width: calc(125 / 1000* 100%);
    padding-top: calc(160/ 1000* 100%);
    margin: calc(970 / 1000* 100%) 0 0 calc(267 / 1000* 100%);
}

#chart_id_12--ep {
	width: calc(130 / 1000* 100%);
	padding-top: calc(165 / 1000* 100%);
	margin: calc(849 / 1000* 100%) 0 0 calc(194 / 1000* 100%);
}


.chart_box + p {
	margin-top: calc(30 / 630 * 100%);
	padding-bottom: calc(290 / 700 * 100%);
	text-align: center;
	color: #707070;
	font-size: 1.8rem;

}

@media screen and (min-width:768px) {
	.chart::before {
		background-size: cover;
		width: 100%;
		height: calc(191 / 1200 * 100vw);
		left: 0;
		right: 0;
		margin: calc(55 / 1200 * 100%) auto 0;
	}

	.chart .sec_ttl {
		margin: 0 0 calc(167 / 1000 * 100%);
	}

	.chart_ep_btn {
		margin-bottom: calc(55 / 1000 * 100%);
	}

	.chart_ep_btn span {
		font-size: 2rem !important;
	}

	.chart_btn li {
		cursor: pointer;
	}

	.chart_box + p {
		width: 100%;
		margin-top: calc(44/ 1000 * 100%);
		padding-bottom: calc(207 / 1000 * 100%);
		font-size: 1.8rem;
	}

}

@media screen and (min-width:1200px) {
	.chart::before {
		max-width: 1600px;
		max-height: 191px;
		margin: 55px auto 0;
	}
}


/* =====================================================================
*    popup
* =================================================================== */

.popup_details {
	overflow: hidden;
}

.popup_details::before {
	content: "";
	display: block;
	padding-top: calc(75 / 630 * 100%);
	background: url(../images/chart/img_popup1.jpg) no-repeat left top;
	background-size: calc(490 / 630 * 100%) auto;
	position: absolute;
	top: 0;
	left: calc(-120 / 630 * 100%);
	width: 100%;
}

.popup_details::after {
	content: "";
	display: block;
	padding-top: calc(75 / 630 * 100%);
	background: url(../images/chart/img_popup2.jpg) no-repeat right bottom;
	background-size: calc(360 / 630 * 100%) auto;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
}

.popup_details_inner {
	z-index: 2;
	margin: calc(52 / 630 * 100%) calc(70 / 630 * 100%) calc(70 / 630 * 100%);
}

.chart_photo {
	width: calc(360 / 490 * 100%);
	margin: 0 auto calc(24 / 490 * 100%);
}

.chart_name {
	margin: 0 auto calc(38 / 628 * 100%);
	width: calc(360 / 490 * 100%);
}

.chart_age {
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	margin-left: calc(25 / 628 * 100%);
}

.chart_name1 {
	display: block;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
}

.chart_name1 rt {
	text-align: center;
	font-size: 1.2rem;
}

/*Chrome対応*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.chart_name1 rt {
		-webkit-transform: translateY(.5rem);
		transform: translateY(.5rem);
	}
}

/*FireFox対応*/
@-moz-document url-prefix() {
	.chart_name1 rt {
		margin-bottom: -.5rem;
	}
}

.chart_name2 {
	display: inline-block;
	margin: .5em 0 0;
	padding: 0.3em 0.4em 0.35em;
	background-color: #0a0404;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: 0.05em;
}

.chart_txt {
	font-size: 2.4rem;
	line-height: 2;
}

@media screen and (min-width:768px) {
	.popup_details {
		/*		padding: calc(50 / 500 * 100%);*/
	}

	.popup_details::before {
		padding-top: calc(65 / 500 * 100%);
		left: 0;
		background-size: calc(292 / 500 * 100%);
	}

	.popup_details::after {
		padding-top: calc(60 / 500 * 100%);
		background-size: calc(313 / 500 * 100%);
	}

	.popup_details_inner {
		margin: calc(50 / 500 * 100%);
	}

	.chart_photo {
		width: calc(260 / 400* 100%);
		margin: 0 auto calc(18 / 400 * 100%);
	}

	.chart_name {
		width: calc(260 / 400* 100%);
		margin: 0 auto calc(30 / 400 * 100%);
	}

	.chart_name1 {
		font-size: 3rem;
	}

	.chart_age {
		font-size: 2rem;
	}

	.chart_name2 {
		font-size: 1.6rem;
	}

	.chart_txt {
		font-size: 1.6rem;
	}
}

@media screen and (min-width:1200px) {}