@charset "UTF-8";
/*
 style.css（ファイル名変更不可）
 本サイト各ページ用CSS（記事ページ）
*/

.d-contentsWrap {
	
}


   
/* story
========================================== */

.story_area {
	margin: 10% auto;
	max-width: 1000px;
	text-align: center;
}
.story_area_main {
	margin: 3% 3% 6% 3%;
	padding: 3% 3% 3% 3%;
	background: url(../images/bodyBg.png);
}
.story_title_img {
	padding:0 0 4% 0;
}
.story_area_main p {
	text-align: left;
	padding: 3% 0 ;
}
/*小サイズ動画*/
.story-movie-data80 {
	/*width: calc(800/1000*100%);*/
	padding: 0 7% 0 7%;
    margin: 0 auto;
}
.story-movie-data2 {
  padding-top: 56.3%;
  position: relative;
  background: #fff;
}

.story-movie-data2 iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* intro
========================================== */

.intro_area {
	margin: 10% auto;
	max-width: 1000px;
	text-align: center;
}
.intro_area_main {
	width: 100%;
	overflow: hidden;
	background: url(../images/common/intro01.png) center;
    background-size: contain;
	background-repeat: no-repeat;
}
.intro_area_main img {
	vertical-align: bottom;
}
/* cast
========================================== */

.cast_area {
	margin: 10% auto;
	max-width: 1000px;
	text-align: center;
}
.cast_area_main {
	margin: 3% 3% 6% 3%;
	padding: 3% 3% 3% 3%;
	background: url(../images/bodyBg.png);
}
.cast_area_main p {
	text-align: left;
	padding: 0 0 3% 0 ;
}
/*01*/
.comment01_area_main {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	background: url(../images/common/comment01.png)no-repeat;
    background-size: contain;
}
.comment01_area_main img {
	width: 100%;
}
/*02*/
.comment02_area_main {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	background: url(../images/common/comment02.png)no-repeat;
    background-size: contain;
}
.comment02_area_main img {
	width: 100%;
}
/*03*/
.comment03_area_main {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	background: url(../images/common/comment03.png)no-repeat;
    background-size: contain;
}
.comment03_area_main img {
	width: 100%;
}
/*04*/
.comment04_area_main {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	background: url(../images/common/comment04.png)no-repeat;
    background-size: contain;
}
.comment04_area_main img {
	width: 100%;
}

/* chart
========================================== */

.chart_area {
	margin: 10% auto;
	max-width: 1000px;
	text-align: center;
}
.chart_area_main {
	width: 100%;
	background-size: cover;
	overflow: hidden;
	background: url(../images/chart/chart.png)no-repeat;
    background-size: contain;
}
.chart_area_main img{
	vertical-align: bottom;
}
.chart_area_2 {
	overflow: hidden;
	background: url(../images/chart/chartbg.png)no-repeat;
    background-size: contain;
    padding: 4% 0 4% 3%;
}


.chart-title {
	font-size: 14px;
	font-size: 1.4rem;
	letter-spacing: 0.6px;
	color: #333;
	padding: 9px 9px;
	position: relative;
	font-weight: bold;
	line-height: 1.0;
}

.chart-body {
	margin: 0 auto;
	background-color: transparent;
}

.chart-num { /* preload for Webfont */
	display: none;
	font-family: "";
}

.chart-list {
	width: 100%;
	counter-reset: num;
	display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: stretch;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
	    padding: 0;
}
.chart-list:after { content: ''; display: block; clear: both; }

.chart-list-item {
	width: 19%;
	position: relative;
	float: left;
	list-style: none;
	padding-left: 0.8%;
}


.chart-list-item a {
	display: block;
}
.chart-list-item.is-current a {
	pointer-events: none;
}

.chart-list-item-img {
	width: 100%;
	padding-top: 56.25%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.disBL {
	display: block;
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
	.chart_area_2 {
	overflow: hidden;
	background-size: contain;
	}
	.chart-box img {
		width: 100%;
	}
}

@media only screen and (max-width: 600px) {
	.chart-box img {
		width: 100%;
	}
	.chart-body {
		margin: 0 auto;
		padding: 0;
	}
	.chart_area_2 {
	overflow: hidden;
	    background-size: contain;
}

	
	.chart-list {
		width: 100%;
		overflow-y: hidden;
		overflow-x: scroll;
		white-space: nowrap;
		/*font-size: 0;*/
		-webkit-overflow-scrolling: touch;
		padding: 0;
	}
	.chart-list-item {
		display: inline-block;
		width: 19%;
		position: relative;
		vertical-align: bottom;
	}
	
	
	.chart-list-item-img {
		width: 100%;
		padding-top: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		background-size: 70%;
	}
}


/* music
========================================== */

.music_area {
	margin: 10% auto;
	max-width: 1000px;
	text-align: center;
}
.music_area_main {
	width: 100%;
	overflow: hidden;
}





/* aside内(※margin, paddingは変更しないでください)
========================================== */

/* タイトル（フォント色、背景色）
------------------------------------------ */
.drama-box-title.title-base {
	/* color: #000; */
	/* background-color: #f00; */
}


/* SNS・シェア（枠色）
------------------------------------------ */
.drama-box-sns-area,
.drama-box-share-area {
	/* border-color: #000; */
}

/* SNS・シェア（タイトル色、タイトル背景色）
------------------------------------------ */
.drama-box-sns-area .drama-box-title,
.drama-box-share-area .drama-box-title {
	/* color: #000; */
	/* background-color: #fff; */
}

/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {

	/* ntv-wrapper
	========================================== */
	.ntv-wrapper { margin-bottom: 0; }
	
	
	
}



/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
	.titleSP_story {
		width: 40%;
	}
	.titleSP_backnumber {
		width: 65%;
	}
	.titleSP_intro {
		width: 70%;
	}
	.titleSP_cast {
		width: 50%;
	}
	.titleSP_castcom {
		width: 45%;
	}
	.titleSP_staff {
		width: 45%;
	}
	.titleSP_chart {
		width: 55%;
	}
	.titleSP_midokoro {
		width: 55%;
	}
	.img100 {
    display: block;
    width: 100%;
	}
	.img90 {
    display: block;
    width: 90%;
	}
	.center {
		margin: 0 auto;
		display: block;
	}
}


/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
	.story_area_main {
		margin: 3% 0 6% 0;
	}
	.ntv-pageTop a {
		background-color: rgba(0, 0, 0, .8);
		border-radius: 5px;
	}
	.ntv-pageTop a:after {
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-top: 24.5px ;
	}
}