@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図ページCSS
===================================================================== */
#chart #main .chart_box {
	width: 93.3334%;
	height: 0;
	padding-top: 215%;
	background: url(../images/chart/bg_chart_sp.jpg) no-repeat center top;
	background-size: 100% auto;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

#chart #main .chart_box div {
	position: absolute;
	top: 0;
	left: 0;
}

#chart #main .chart_box div.chart_chara_01 {
	width: 35.3572%;
	height: auto;
	margin-top: 65.3572%;
	margin-left: 2.8572%;
}

#chart #main .chart_box div.chart_chara_02 {
	width: 35.3572%;
	height: auto;
	margin-top: 65%;
	margin-left: 60.7143%;
}

#chart #main .chart_box div.chart_chara_03 {
	width: 32.1429%;
	height: auto;
	margin-top: 127.5%;
}

#chart #main .chart_box div.chart_chara_04 {
	width: 32.1429%;
	height: auto;
	margin-top: 127.5%;
	margin-left: 33.9286%;
}

#chart #main .chart_box div.chart_chara_05 {
	width: 32.1429%;
	height: auto;
	margin-top: 186.7858%;
	margin-left: 53.9286%;
}

#chart #main .chart_box div.chart_chara_06 {
	width: 32.1429%;
	height: auto;
	margin-top: 127.5%;
	margin-left: 67.8572%;
}

#chart #main .chart_box div.chart_chara_07 {
	width: 32.1429%;
	height: auto;
	margin-left: 60.7143%;
}

#chart #main .chart_box div.chart_chara_08 {
	width: 32.1429%;
	height: auto;
	margin-top: 13.9286%;
	margin-left: 14.2858%;
}

#chart #main .chart_box div.chart_chara_09 {
	width: 32.1429%;
	height: auto;
	margin-top: 185%;
	margin-left: 0.7143%;
}

#chart #main .chara_list {
	width: 90%;
	margin-top: 23.3334%;
	margin-left: auto;
	margin-right: auto;
}

#chart #main .chara_list li {
	background: url(../images/chart/bg_chara_wrap_bottom_sp.jpg) no-repeat center bottom, url(../images/chart/bg_chara_wrap_top_sp.jpg) no-repeat center top, url(../images/chart/bg_chara_wrap_center_sp.png) no-repeat center center, url(../images/chart/bg_chara_wrap_repeat_sp.jpg) repeat-y center top;
	background-size: 100% auto, 100% auto, 100% auto, 100% auto;
	padding: 4.6297%;
}

#chart #main .chara_list li:not(:last-child) {
	margin-bottom: 11.1112%;
}

#chart #main .chara_list li .photo {
	width: 57.1429%;
	margin-top: 6.1225%;
	margin-left: auto;
	margin-right: auto;
}

#chart #main .chara_list li h2 {
	width: 100%;
	padding-top: 8.1633%;
	position: relative;
	margin-top: 3.0613%;
}

#chart #main .chara_list li h2 img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#chart #main .chara_list li p {
	font-size: 1.4rem;
	line-height: 1.7em;
	margin: 6.1225% 7.1429%;
}

@media screen and (min-width:700px){
	#chart #main .chart_box {
		width: 91.6667%;
		padding-top: 100.8334%;
		background: url(../images/chart/bg_chart_pc.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div {
		overflow: hidden;
	}

	#chart #main .chart_box div a {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#chart #main .chart_box div a::before {
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	#chart #main .chart_box div a::after {
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
	}

	#chart #main .chart_box div a:hover::before {
		opacity: 1;
	}

	#chart #main .chart_box div a:hover::after {
		opacity: 0;
	}

	#chart #main .chart_box div.chart_chara_01 {
		width: 21.8182%;
		height: 0;
		padding-top: 29.4546%;
		margin-top: 16.3637%;
		margin-left: 20.9091%;
	}

	#chart #main .chart_box div.chart_chara_01 a::before {
		background: url(../images/chart/img_chart_chara01_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_01 a::after {
		background: url(../images/chart/img_chart_chara01_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_02 {
		width: 21.8182%;
		height: 0;
		padding-top: 29.4546%;
		margin-top: 16.3637%;
		margin-left: 48.3637%;
	}

	#chart #main .chart_box div.chart_chara_02 a::before {
		background: url(../images/chart/img_chart_chara02_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_02 a::after {
		background: url(../images/chart/img_chart_chara02_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_03 {
		width: 20%;
		height: 0;
		padding-top: 27.2728%;
		margin-top: 50.1819%;
		margin-left: 4.9091%;
	}

	#chart #main .chart_box div.chart_chara_03 a::before {
		background: url(../images/chart/img_chart_chara03_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_03 a::after {
		background: url(../images/chart/img_chart_chara03_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_04 {
		width: 20%;
		height: 0;
		padding-top: 27.2728%;
		margin-top: 50.1819%;
		margin-left: 30.3637%;
	}

	#chart #main .chart_box div.chart_chara_04 a::before {
		background: url(../images/chart/img_chart_chara04_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_04 a::after {
		background: url(../images/chart/img_chart_chara04_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_05 {
		width: 20%;
		height: 0;
		padding-top: 26.3637%;
		margin-top: 83.4546%;
		margin-left: 33.6364%;
	}

	#chart #main .chart_box div.chart_chara_05 a::before {
		background: url(../images/chart/img_chart_chara05_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_05 a::after {
		background: url(../images/chart/img_chart_chara05_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_06 {
		width: 20%;
		height: 0;
		padding-top: 27.2728%;
		margin-top: 50.1819%;
		margin-left: 55.8182%;
	}

	#chart #main .chart_box div.chart_chara_06 a::before {
		background: url(../images/chart/img_chart_chara06_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_06 a::after {
		background: url(../images/chart/img_chart_chara06_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_07 {
		width: 20%;
		height: 0;
		padding-top: 26.3637%;
		margin-top: 32.5455%;
		margin-left: 79.6364%;
	}

	#chart #main .chart_box div.chart_chara_07 a::before {
		background: url(../images/chart/img_chart_chara07_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_07 a::after {
		background: url(../images/chart/img_chart_chara07_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_08 {
		width: 20%;
		height: 0;
		padding-top: 26.3637%;
		margin-top: 4.1819%;
		margin-left: 73.091%;
	}

	#chart #main .chart_box div.chart_chara_08 a::before {
		background: url(../images/chart/img_chart_chara08_pc_on.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_08 a::after {
		background: url(../images/chart/img_chart_chara08_pc.png) no-repeat center top;
		background-size: 100% auto;
	}

	#chart #main .chart_box div.chart_chara_09 {
		width: 20%;
		height: 0;
		padding-top: 27.2728%;
		margin-top: 82.3637%;
		margin-left: 5.2728%;
	}

	#chart #main .chart_box div a::after {
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
	}

	#chart #main .chart_box div.chart_chara_09::after {
		content: "";
		width: 100%;
		height: 100%;
		background: url(../images/chart/img_chart_chara09_pc.png) no-repeat center top;
		background-size: 100% auto;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	#chart #main .chart_box div img {
		display: none;
	}

	#chart #main .chara_list {
		width: 72.5%;
		margin-top: 8.3334%;
	}

	#chart #main .chara_list li {
		background: url(../images/chart/bg_chara_wrap_bottom_pc.jpg) no-repeat center bottom, url(../images/chart/bg_chara_wrap_top_pc.jpg) no-repeat center top, url(../images/chart/bg_chara_wrap_center_pc.png) no-repeat center center, url(../images/chart/bg_chara_wrap_repeat_pc.jpg) repeat-y center top;
		background-size: 100% auto, 100% auto, 100% auto, 100% auto;
		padding: 2.8736%;
		overflow: hidden;
	}

	#chart #main .chara_list li:not(:last-child) {
		margin-bottom: 4.5978%;
	}

	#chart #main .chara_list li .photo {
		width: 28.0488%;
		margin-top: 0;
		margin-bottom: 2.4391%;
		margin-left: 3.6586%;
		float: left;
	}

	#chart #main .chara_list li h2 {
		padding-top: 4.2683%;
		margin-top: 6.0976%;
	}

	#chart #main .chara_list li h2 img {
		margin-left: 35.3659%;
	}

	#chart #main .chara_list li p {
		font-size: 1.6rem;
		line-height: 1.7em;
		margin: 2.4391% 3.6586% 3.6586% 37.8049%;
	}
}