@charset "UTF-8";


.d-box-title{
	font-size: 0;
	background-image: url(../images/chart/title.png);
	background-repeat:no-repeat;
	background-position: 5px top;
	background-size: contain;
	display: block;
	width: 100%;
	max-width: 285px;
	height: auto;
	margin: 20px 0 -1px 0;
	padding-top: calc(67 / 1000 * 100%);
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}


/* chart
========================================== */
.chart-area {}
.chart-area a { display: block; }
.chart-inner {}


/* chart-article
------------------------------------------ */
#chart_main{
	margin: 0 auto;
	background-color: #c4dde7;
	background-image: url(../images/common/cnts-base-bottom.png);
	background-repeat:no-repeat;
	background-position: bottom center;
	background-size: contain;
	display: block;
	width: 100%;
}

.chart-article-body {
	background-image: url(../images/common/cnts-base-top.png);
	background-repeat:no-repeat;
	background-position: top center;
	background-size: contain;
	display: block;
	width: 100%;
	height: auto;
}

.chart-article-body:after {
	content:"";
	background-image: url(../images/chart/bg_icon.png);
	background-repeat:no-repeat;
	background-position: top right;
	background-size: contain;
	display: block;
	width: 100%;
	max-width: 139px;
	height: auto;
	padding-top: calc(331 / 1000 * 100%);
	margin-top: calc(-331 / 1000 * 50%);
	margin-left: auto;
}

.chart-article-contents{
	padding: 50px 0;
}

.chart-img{
	background-image: url(../images/chart/chart-main.png);
	background-repeat:no-repeat;
	background-position: top center;
	background-size: contain;
	display: block;
	width: 100%;
	max-width: 796px;
	height: auto;
	padding-top: calc(1893 / 1000 * 100%);
	margin: 0 auto;
	font-size: 0;
}

/* cast
========================================== */
.cast-area{
	margin-top: -100px;
}

#cast .d-box-title{
	width: 290px;
	height: 80px;
	font-size: 0;
	background-image: url(../images/top/title-cast.png);
	background-repeat: no-repeat;
	background-position: 5px top;
	background-size: contain;
}


#cast .d-box-body{
	width: 100%;
	background-color: #b40003;
	margin: 0 auto;
	padding: 10% 0 16%;
	color: #ffffff;
}

.cast_name{
	font-weight: bold;
	line-height: 200%;
}
.cast_name div.c_name {
	font-size: 30px;
	margin-right: 30px;
	width: 50%;
	text-align: right;
}

.cast_name div.name:before {
	content: "：";
	margin-left: -30px;
}
.cast_name div.name {
	color: #ffffff;
	font-size: 30px;
	margin-left: 0;
	width: 50%;
	text-align: left;
}
.cast_name div.name > span {
	font-size: .7em;
}

.cast_name {
	display: flex;
	margin-bottom: 30px;
}

.cast_icon{
	width: 36px;
	height: 34px;
	font-size: 0;
	display: block;
	background-image: url(../images/top/icon-cast.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 50px auto 50px auto;
}

.cast_name:nth-child(3),
.cast_name:nth-child(13) {
	margin-bottom: 80px;
}

@media only screen and (max-width: 750px) {	
#cast .d-box-title{
	max-width: 290px;
	width: 100%;
	height: auto;
	background-size: contain;
	padding-top: 9.6%;
}

.cast_name div.c_name {
	font-size: 24px;
	margin-right: 24px;
	width: 50%;
	text-align: right;
}

.cast_name div.name:before {
    margin-left: -24px;
}
.cast_name div.name {
	color: #ffffff;
	font-size: 24px;
	margin-left: 0;
	width: 50%;
	text-align: left;
}
.cast_name div.name > span {
	font-size: .7em;
}
	
}

@media only screen and (min-width: 601px) and (max-width: 992px) {}

@media only screen and (max-width: 600px) {

.d-box-title{
	margin: 20px 0 -1px 0;
	padding-top: calc(67 / 600 * 100%);
}

	.chart-article-body {
		margin: 0 0;
		padding: 0;
		overflow: hidden;
	}

.chart-article-body:after {
	padding-top: calc(331 / 600 * 50%);
	margin-top: calc(-331 / 600 * 160%);
}


.chart-img{
	width: 95%;
	padding-top: calc(1893 / 600 * 100%);
}

/* cast */

#cast .d-box-body{
	padding: 12% 0 20%;
}

.cast_name{
	font-weight: bold;
	line-height: 200%;
}
.cast_name div.c_name {
	font-size: 16px;
	margin-right: 16px;
	width: 55%;
	text-align: right;
}

.cast_name div.name:before {
    margin-left: -16px;
}

.cast_name div.name {
	color: #ffffff;
	font-size: 16px;
	margin-left: 0;
	width: 45%;
	text-align: left;
}
.cast_name div.name > span {
	font-size: .7em;
	display: block;
	text-indent: -10px;
}

.cast_name {
	margin-bottom: 15px;
}

.cast_name:nth-child(3),
.cast_name:nth-child(13) {
	margin-bottom: 40px;
}

.cast_name:last-child{
	margin-bottom: 40px;
}

.cast_icon{
	width: 20px;
	height: 19px;
	font-size: 0;
	display: block;
	background-image: url(../images/top/icon-cast.png);
	background-position: center;
	background-size: contain;
	margin: 30px auto 30px auto;

}
	
}