@charset "UTF-8";
/*
 main.css
 本サイト用共通CSS（記事ページにも読み込まれる）

 主に「.d-*」など、番組のみに使用するクラスを記述するCSS
 ※「.drama-*」などの色を変更したい場合は「style.css」に記述
*/


/* d-contents
========================================== */
.d-contentsWrap { width: 100%; }
.d-contentsBox { background: url(../images/common/d-box-bg.png); }
.d-main { width: 100%; }
/* img
========================================== */
.d-contentsWrap [class*="-img"] img {
	display: block;
	width: 100%;
}

/* d-btn
========================================== */
.d-btn {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	border: 1px solid #000;
	border-radius: 5px;
	color: #000;
	font-weight: normal;
	text-align: center;
	word-break: break-all;
	position: relative;
}
.d-btn:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	position: absolute;
	top: 0;
	right: 25px;
	bottom: 0;
	margin: auto 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/* takane-
========================================== */
.takane-pc { display: block !important; }
.takane-sp { display: none !important; }
.takane-arrow-r:before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto 0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.takane-frame-border {
	position: relative;
	border: 5px solid #cd9935;
	background-color: #fff9ed;
}
.takane-frame-border:before {
	position: absolute;
	top: 5px;
	left: 5px;
	content: '';
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: 1px solid #cd9935;
	z-index: 0;
}

/* drama-mainV（第2階層用ヘッダー　記事ページ含む）
========================================== */
.d-mainV-area {
	width: 100%;
	background: #e1e8ee;
}
.d-mainV-area a { display: block; }
.d-mainV-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.d-mainV-img a{
	width: 100%;
	padding-top: 30%;
	background-image: url(../images/common/mainV-2nd-pc.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

/* d-nav
========================================== */
.d-nav-area {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #ad0000;
	-webkit-box-shadow: 0px 8px 0px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 8px 0px 0px rgba(0,0,0,0.2);
}
.d-nav-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

/* drama-nav-list
------------------------------ */
.d-nav-list {
	width: 100%;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}
.d-nav-item {
	display: inline-block;
	width: 12.3%;
	vertical-align: top;
	position: relative;
	background: url(../images/common/d-box-bg_red.png);
	background-repeat: repeat-x;
	background-size: 44.5px 67.5px;
	background-position: 15px bottom;
	background-color: #ce0000;
}
.d-nav-item:not(:first-child) { margin-left: 0.2%; }
.d-nav-item a {
	display: block;
	width: 100%;
	padding-top: 95.9%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	overflow: hidden;
}
/* d-nav - status */
.d-nav-item.is-new a:before {
	content: '';
	display: block;
	width: 40%;
	height: 40%;
	background: url("../images/common/drama-nav-icon-new.png") no-repeat top left;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
}
.d-nav-item.is-new a:after {
	content: '';
	display: block;
	position: absolute;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: 1px solid #f1be22;
	top: 5px;
	left: 5px;
	z-index: 29;
}
.d-nav-item.is-coming a {
	opacity: 0.5;
	pointer-events: none;
}

/* d-nav - contents */
.d-nav-item a {
	background: url("../images/common/drama-nav.png");
	background-size:
		calc( 1395 / 155 * 100% )
		calc( 100 / 125 * 100% );
	background-position:
		calc( 0 / (1395 – 155) * 100% )
		calc( 120 / (250 – 125) * 100% );
	background-repeat: no-repeat;
}
.d-nav-item.intro a {
	background-position-x: 0%;
	background-position-y: 50%;
	background-position:
		calc( 0 / (1395 – 155) * 100% )
		calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.story a {
	background-position-x: 12.5%;
	background-position-y: 50%;
	background-position:
	calc( 175 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.cast a {
	background-position-x: 25%;
	background-position-y: 50%;
	background-position:
	calc( 350 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.chart a {
	background-position-x: 37.5%;
	background-position-y: 50%;
	background-position:
	calc( 525 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.music a {
	background-position-x: 50%;
	background-position-y: 50%;
	background-position:
	calc( 700 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.goods a {
	background-position-x: 62.5%;
	background-position-y: 50%;
	background-position:
	calc( 875 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
/* .d-nav-item.sns a {
	background-position-x: 75.5%;
	background-position-y: 50%;
	background-position:
	calc( 1045 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
} */
.d-nav-item.gallery a {
	background-size:
	calc( 1395 / 155 * 93% )
	calc( 100 / 125 * 93% );
	background-position-x: 75%;
	background-position-y: 50%;
	background-position:
	calc( 1048 / (1390 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.hulu a {
	background-position-x: 87.5%;
	background-position-y: 50%;
	background-position:
	calc( 1220 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item.hulu.is-coming a {
	background-position-x: 100%;
	background-position-y: 50%;
	background-position:
	calc( 1395 / (1395 – 155) * 100% )
	calc( 120 / (250 – 125) * 100% );
}
.d-nav-item a span {
	width: 100%;
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

/* contentsBox
========================================== */
.d-contentsBox-inner { overflow: hidden; }

/* area
========================================== */
.d-area {
	width: 100%;
	margin: 60px auto;
}
.d-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

/* box
========================================== */
.d-box {
	position: relative;
	z-index: 1;
	word-break: break-all;
}
.chart-area,
.intro-area,
.story-area,
.cast-area,
.music-area,
.gallery-area {
	margin: 0 auto;
	padding: 40px 0 60px;
}
.chart-area .d-box,
.intro-area .d-box,
.story-area .d-box,
.cast-area .d-box,
.music-area .d-box,
.gallery-area .d-box {
	padding: 50px 60px 60px;
}

/* drama - title
========================================== */
.d-box-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;
}
.d-box-title .title-01 {
	width: 100%;
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}
.d-box-title-01 {
	width: 100%;
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}
.d-area .d-box-title {
	height: 59px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-bottom: 40px;
}
.goods-area .d-box-title {
	background-image: url(../images/common/d-box-title-goods.png);
	margin-top: 30px;
}
.movie-area .d-box-title {
	background-image: url(../images/common/d-box-title-movie.png);
	margin-top: 30px;
	margin-bottom: 0px;
}
.chart-area .d-box-title { background-image: url(../images/common/d-box-title-chart.png); }
.chart-area.new .d-box-title { background-image: url(../images/common/d-box-title-chart_new.png); }
.intro-area .d-box-title { background-image: url(../images/common/d-box-title-intro.png); }
.story-area .d-box-title { background-image: url(../images/common/d-box-title-story.png); }
.cast-area .d-box-title { background-image: url(../images/common/d-box-title-cast.png); }
.music-area .d-box-title { background-image: url(../images/common/d-box-title-music.png); }
.gallery-area .d-box-title { background-image: url(../images/common/d-box-title-gallery.png); }
.comment-area .d-box-title {
	height: 30px;
	background-image: url(../images/common/d-box-subTit-comment.png);
	background-repeat: repeat-x;
	background-size: cover;
}
.cast-area .d-box-title.d-box-subTit,
.music-area .d-box-title.d-box-subTit,
#staff .d-box-title.d-box-subTit,
#artist .d-box-title.d-box-subTit {
	height: 30px;
	background-image: url(../images/common/d-box-subTit-cast.png);
	background-repeat: repeat-x;
	background-size: cover;
	margin-bottom: 0;
}
#staff.d-box-title.d-box-subTit { background-image: url(../images/common/d-box-subTit-staff.png); }
.music-area .d-box-title.d-box-subTit { background-image: url(../images/common/d-box-subTit-song.png); }
#artist.d-box-title.d-box-subTit { background-image: url(../images/common/d-box-subTit-artist.png); }
.backnumber-area .d-box-title {
	height: 50px;
	background-image: url(../images/common/d-box-subTit-backnumber.png);
	background-position: left center;
	margin-bottom: 30px;
}
.chart-backnumber .d-box-title,
.chart-area.new .chart-backnumber .d-box-title {
	height: 50px;
	background-image: url(../images/common/d-box-subTit-backnumber_02.png);
	background-position: left center;
	margin-bottom: 20px;
}
.gallery-backnumber-area .d-box-title {
	height: 50px;
	background-image: url(../images/common/d-box-subTit-backnumber_03.png);
	background-position: left center;
	margin-bottom: 20px;
}


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

	/* takane-
	========================================== */
	.takane-pc { display: none !important; }
	.takane-sp { display: block !important; }

	.takane-frame-border { border: 2.5px solid #cd9935; }
	.takane-frame-border:before {
		top: 2.5px;
		left: 2.5px;
		width: calc(100% - 5px);
		height: calc(100% - 5px);
	}


	/* drama-contentsWrap
	========================================== */
	.d-contentsWrap {
		background-position: 10% center;
		background-size: 5% auto;
	}
	.d-contentsBox {
		background: url(../images/common/d-box-bg.png);
		background-size: 50%;
	}


	/* drama - setting
	========================================== */
	.d-area { margin: 3% auto; }
	.d-inner {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	/* drama-mainV（第2階層用ヘッダー　記事ページ含む）
	========================================== */
	.d-mainV-img a{
		padding-top: 41.4%;
		background-image: url(../images/common/mainV-2nd-sp.png);
	}

	/* area
	========================================== */
	.d-area { margin: 3% auto; }
	.d-inner {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	/* box
	========================================== */
	.chart-area,
	.intro-area,
	.story-area,
	.cast-area,
	.music-area,
	.gallery-area {
		padding: 15px 0 20px;
		margin: 0 auto;
	}
	.intro-area .d-box,
	.chart-area .d-box,
	.story-area .d-box,
	.cast-area .d-box,
	.music-area .d-box,
	.gallery-area .d-box {
		padding: 20px 4px 4px;
	}
	.chart-inner,
	.intro-inner,
	.story-inner,
	.cast-inner,
	.music-inner {
		padding: 0 2%;
	}


  /* drama-nav
	========================================== */
	.d-nav-area {
		-webkit-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.2);
		box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.2);
	}
	/* drama-nav-list
	------------------------------------------ */
	.d-nav-list { margin: 0 auto; padding: 1%; }
	.d-nav-item { width: 24.25%; }
	.d-nav-item:not(:first-child) { margin-left: 1%; }
	.d-nav-item:nth-child(4n+1) { margin-left: 0; }
	.d-nav-item:nth-child(n+5) { margin-top: 1%; }
	.d-nav-item a {
		padding-top: 80%;
		background-size:
			calc( 1395 / 155 * 100% )
			calc( 100 / 125 * 120% );
	}
	.d-nav-item a span { font-size: 0; }
	.d-nav-item.gallery a {
		background-size:
			calc( 1395 / 155 * 90% )
			calc( 100 / 125 * 110% );
	}
	.d-nav-item.is-new a:before {
		/* height: 45%;
		width: 45%; */
	}
	.d-nav-item.is-new a:after {
		width: calc(100% - 6px);
		height: calc(100% - 6px);
		top: 3px;
		left: 3px;
	}

	/* drama - title
	========================================== */
	.d-area .d-box-title {
		height: 40px;
		margin: 0 2% 15px;
	}
	.goods-area .d-box-title { margin-top: 17px; }
	.comment-area .d-box-title {
		height: 15px;
		background-repeat: no-repeat;
		background-size: 50% cover;
	}
	.movie-area .d-box-title { margin-top: 17px; }
	.cast-area .d-box-title.d-box-subTit,
	.music-area .d-box-title.d-box-subTit,
	#staff .d-box-title.d-box-subTit,
	#artist .d-box-title.d-box-subTit {
		height: 15px;
		background-repeat: no-repeat;
		background-size: 50% cover;
	}
	.chart-backnumber .d-box-title {
		height: 40px;
		margin: 0 0 15px;
	}
	.gallery-backnumber-area .d-box-title {
		height: 32px;
		margin: 0 2% 0;
	}
}

/* ------------------------------------------------------------------
	small-screen-up to medium-screen
------------------------------------------------------------------ */
@media only screen and (min-width: 601px) and (max-width: 992px) {
	.chart-area .d-box,
	.intro-area .d-box,
	.story-area .d-box,
	.cast-area .d-box,
	.music-area .d-box,
	.gallery-area .d-box {
		padding: 50px 20px 60px;
	}
}
/* ------------------------------------------------------------------
 SP 〜 tablet　（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
}

/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {
	.d-main a { transition: opacity .1s ease; }
	.d-main a:hover { opacity: 0.6; }
	.ntv-pageTop a {
		background: url(../images/common/takane-pageTop.png) no-repeat center;
		background-size: contain;
		background-color: transparent !important;
		z-index: 99;
	}
}

/* ------------------------------------------------------------------
 tablet FONT調整用（601px〜）
------------------------------------------------------------------ */
@media screen and (min-width : 601px){

}