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

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

body {
	color: #000;
}

.altTxt {
  font-size: 0;
}

/* d-contents
========================================== */
.d-contentsWrap {
	width: 100%;
}
.d-main {
	width: 100%;
}

/* img
========================================== */
.d-contentsWrap [class*="-img"] img {
	display: block;
	width: 100%;
}

/* d-btn
========================================== */
.d-btn {
	position: relative;
	display: block;
	width: 300px;
	height: 60px;
	line-height: 60px;
	margin: 0 auto;
	border: 1px solid #181617;
	border-radius: 0px;
	color: #fff;
	background-color: #181617;
	text-align: center;
	word-break: break-all;
	cursor: pointer;
}


/* drama-mainV（第2階層用ヘッダー　記事ページ含む）
========================================== */
.d-mainV-area {
	width: 100%;

}
.d-mainV-area a { display: block; }
.d-mainV-inner {
	width: 100%;
	margin: 0 auto;
}

.d-mainV-img a{
	width: 100%;
	padding-top: 19.93%;
	background-image: url(../images/common/mainv_second_pc.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}


/* d-nav
========================================== */
.d-nav-area {
	width: 100%;
	background-color: #040404;
}
.d-nav-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}


/* drama-nav-list
------------------------------ */
.d-nav-list {
	width: 96%;
	font-size: 0;
	font-family: Arial;
	text-align: center;
	position: relative;
	margin: auto;
}

.d-nav-item {
	display: inline-block;
	width: 12.5%;
	vertical-align: top;
	position: relative;
	background-color: #000;
}

.d-nav-item:nth-child(n)::after, .d-nav-list::after {
	display: block;
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 80%;
	background-color: #333;
	z-index: 10;
}
.d-nav-item:nth-child(n)::after { left: 0; }
.d-nav-list::after { right: 0;}

.d-nav-item a {
	display: block;
	width: 100%;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	overflow: hidden;
	background-size: 75%;
}

.d-nav-item.is-coming a {
	opacity: 0.3;
	pointer-events: none;
}

/* d-nav - contents */
.d-nav-item.story a { background-image: url(../images/common/menu_story.png); }
.d-nav-item.movie a { background-image: url(../images/common/menu_movie.png) }
.d-nav-item.chart a { background-image: url(../images/common/menu_chart.png); }
.d-nav-item.caststaff a { background-image: url(../images/common/menu_caststaff.png); }
.d-nav-item.music a { background-image: url(../images/common/menu_music.png); }
.d-nav-item.topics a { background-image: url(../images/common/menu_topics.png); }
.d-nav-item.goods a { background-image: url(../images/common/menu_goods.png); }
.d-nav-item.hulu a { background-image: url(../images/common/menu_hulu.png); }
.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: 0;
	padding: 0;
}
.d-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 60px 0;
}

/* area-background
------------------------------ */
/* background-color */
.d-bg_white {
	background-color: #fff;
}

.d-bg_yellow {
	background-color: #ffce07;
}

.d-bg_black {
	background-color: #000;
}

/* background-image */
.d-bg_white .d-inner {
	background-image: url(../images/top/bg_white.png);
	background-repeat: no-repeat;
	background-position: top center; 
}

.d-bg_yellow .d-inner {
	background-image: url(../images/top/bg_yellow.png);
	background-repeat: no-repeat;
	background-position: top right;
}

.d-bg_black .d-inner {
	background-image: url(../images/top/bg_black.png);
	background-repeat: no-repeat;
	background-position: top left; 
}


/* box
========================================== */
.d-box {
	word-break: break-all;
}

/* 各セクションのタイトルロゴ */
.d-box-title {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin: 0 auto 35px;
	font-size: 0px;
}

/* 下層ページ */
.d-box-body_second {
  width: 100%;
  padding: 80px 50px;
  background-color: #fff;
}


/* ------------------------------------------------------------------
 PC（993px〜）
------------------------------------------------------------------ */
@media screen and (min-width: 993px) {

	/* d-nav
========================================== */
	/* d-nav - contents */
	.d-nav-item.story a:hover { background-image: url(../images/common/hovmenu_story.png); }
	.d-nav-item.movie a:hover { background-image: url(../images/common/hovmenu_movie.png); }
	.d-nav-item.chart a:hover { background-image: url(../images/common/hovmenu_chart.png); }
	.d-nav-item.caststaff a:hover { background-image: url(../images/common/hovmenu_caststaff.png); }
	.d-nav-item.music a:hover { background-image: url(../images/common/hovmenu_music.png); }
	.d-nav-item.topics a:hover { background-image: url(../images/common/hovmenu_topics.png); }
	.d-nav-item.goods a:hover { background-image: url(../images/common/hovmenu_goods.png); }
	.d-nav-item.hulu a:hover { background-image: url(../images/common/hovmenu_hulu.png); }

}


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

	/* drama - setting
	========================================== */
	.d-inner {
		padding: 60px 20px;
	}

	/* d-btn
	========================================== */
	.d-btn {
		width: 100%;
	}

}


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

	/* drama-contentsWrap
	========================================== */
	.d-contentsWrap {
		background-position: 10% center;
		background-size: 5% auto;
	}


	/* drama - setting
	========================================== */
	.d-inner {
		padding: 30px 10px;
	}


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


	/* drama-nav
	========================================== */
	/* drama-nav-list
	------------------------------------------ */
	.d-nav-list { 
		width: 100%;
		margin: 0 auto;
		background: #333;
	}
	.d-nav-item { width: 25%; }
	.d-nav-item:nth-child(n+5) { margin-top: 1px; }
	.d-nav-item a {	padding-top: 64%; }
	.d-nav-item a span { font-size: 0; }

	.d-nav-item:nth-child(n)::after, .d-nav-list::after {
		top: 0;
		transform: translateY(0);
		height: 100%;
	}
	.d-nav-item:first-child::after,
	.d-nav-item:nth-child(5)::after,
	.d-nav-list::after { 
		display: none;
	}

	/* d-btn
	========================================== */
	.d-btn {
		height: 40px;
		line-height: 37.5px;
	}

	/* box
	========================================== */
	/* 各セクションのタイトルロゴ */
	.d-box-title {
		margin-bottom: 15px;
	}

	/* 下層ページ */
	.d-box-body_second {
    padding: 30px 15px;
  }

	/* area
========================================== */
	/* area-background
	------------------------------ */
	/* background-image */
	.d-bg_white .d-inner {
		background-position: -80% -5%;
    background-size: 90%;
	}

	.d-bg_yellow .d-inner {
		background-position: top center;
		background-size: 105%;
	}

	.d-bg_black .d-inner {
		background-position: top right;
		background-size: 130%; 
	}

}