@charset "UTF-8";
/*
 ドラマティザー用CSS
*/

/* 記事背景（全体） */
.drama-main {
	background: url(../template_assets/images/bg.jpg);
}
.drama-contentsWrap {
	/*background-color: #fff;*/
}

/* 記事にもメニュー追加
========================================== */

/* sub_mainvisual
========================================== */
.sub_mainvisual_inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.sub_mainvisual_area {
  display: block;
  width: 100%;
  
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  font-size: 0;
}
.sub_mainvisual_area .sub_mainvisual_inner {
	text-align: center;
}
.sub_mainvisual_img img.pc{
	margin-top: 70px;
}
@media screen and (max-width: 992.999px) {
	
}

@media only screen and (min-width: 601px) {
  .sub_mainvisual_img a {
    padding-top: 30%;
  }
}
@media only screen and (min-width: 993px) {
.sub_mainvisual_area {
		height: 500px;
	}
}
/* nav
========================================== */
#dkfuroba_nav {
	background: url(../images/top/nav_bg.png) center no-repeat;
	background-size: cover;
}
.dkfuroba_nav_area {
  width: 100%;
  margin: 0 auto;
}
.dkfuroba_nav_inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (min-width: 993px) {

#dkfuroba_nav {
	margin-top: 0;
	background: none;
}
}
/* dkfuroba_nav_list
------------------------------ */
.dkfuroba_nav_list {
  width: 100%;
  font-size: 0;
  text-align: center;
}
.dkfuroba_nav_item {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  position: relative;
}
.dkfuroba_nav_item:not(:first-child) { margin-left: 0.56%; }
.dkfuroba_nav_item a {
  display: block;
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  overflow: hidden;
}

/* dkfuroba_nav - status */
.dkfuroba_nav_item.is-new {}
.dkfuroba_nav_item.is-new:before {
  content: '';
  display: block;
  width: 27.5%;
  height: 27.5%;
  background: url(../images/common/nav_icon_new.png) no-repeat center; /* NEWマーク　左上固定の場合は left top */
  background-size: contain;
  position: absolute;
  top: -10%;
  right: -3%;
  z-index: 30;
}
.dkfuroba_nav_item.is-coming {}
.dkfuroba_nav_item.is-coming a {
  opacity: 0.6;
  pointer-events: none;
}

/* dkfuroba_nav - contents */
.dkfuroba_nav_item.intro a { background-image: url(../images/nav/nav-1.png); }
.dkfuroba_nav_item.story a { background-image: url(../images/nav/nav-2.png); }
.dkfuroba_nav_item.chart a { background-image: url(../images/nav/nav-3.png); }
.dkfuroba_nav_item.music a { background-image: url(../images/nav/nav-4.png); }

.dkfuroba_nav_item.cast a { background-image: url(../images/nav/nav-5.png); }
.dkfuroba_nav_item.sns a { background-image: url(../images/nav/nav-6.png); }
.dkfuroba_nav_item.hulu a { background-image: url(../images/nav/nav-7.png); }
.dkfuroba_nav_item.topics a { background-image: url(../images/nav/nav-8.png); }
.dkfuroba_nav_item.coming a { background-image: url(../images/nav/nav-coming.png); }
.dkfuroba_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;
}

@media only screen and (max-width: 600px) {
  .dkfuroba_nav_list { margin: 0 auto; padding: 0 1%; }
  .dkfuroba_nav_item { width: 24.25%; }
  .dkfuroba_nav_item:not(:first-child) { margin-left: 1%; }
  .dkfuroba_nav_item:nth-child(4n+1) { margin-left: 0; }
  .dkfuroba_nav_item:nth-child(n+5) { margin-top: 1%; }
  .dkfuroba_nav_item a span { font-size: 0; }
}

#d-mainV {
    background:url(../images/common/bg.jpg);
}

@media only screen and (min-width: 993px) {
  .dkfuroba_wrapper {
  background:url(../images/top/main_bg_tablet.jpg)no-repeat center top,url(../images/common/bg.jpg);	
}
#d-mainV {
  background:url(../images/top/sub_main_bg.jpg)no-repeat center top,url(../images/common/bg.jpg);	
}
	#d-mainV a {
    transition: opacity .1s ease;
  }
	
  #d-mainV a:hover {
    opacity: 0.6;
  }
  #d-mainV [id^="ntv_setAD"] a:hover {
    opacity: 1;
  }
	.mainvisual_area {
		height: 1818px;
	}
	.sub_mainvisual_area {
		height: 500px;
	}
}






/* MVバナー
========================================== */
ul.MV_banner {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
ul.MV_banner li img {
	width: 320px;
}
ul.MV_banner li {
	margin: 0 10px;
}

ul.sub_banner {
	margin-top: 190px;
}

.sp {
	display: none !important;
}
@media screen and (max-width: 992.999px) {
	ul.MV_banner {
	margin-top: 0;
}
	ul.MV_banner li img {
	width: 98%;
	    margin: 20px 0 30px 0;
}
	ul.sub_banner {
	margin-top: 0;
}
	.sp {
		display: block !important;
	}
	
	.pc {
		display: none !important;
	}
}




/* ------------------------------------------------------------------
 記事ヘッダー
 （from common.js）
------------------------------------------------------------------ */
.teaser-mainV-area {
	width: 100%;

}
.teaser-mainV-area a { display: block; }
.teaser-mainV-inner {
	width: 100%;
	max-width: 2000px;
	margin: 0 auto;
}
.teaser-mainV-img a{
	width: 100%;
	padding-top: 424px;
	background: url(../template_assets/images/common/mainV-2nd-pc.png)no-repeat center;
	background-size: cover;
	overflow: hidden;
}

@media only screen and (max-width: 992.999px) {
    .teaser-mainV-img a{
        padding-top: 57.33%;
        background: url(../template_assets/images/common/mainV-2nd-sp.png)no-repeat center;
		background-size: cover;
    }
}
/* ------------------------------------------------------------------
 記事ページ：左カラム
------------------------------------------------------------------ */
.drama-contentsBox {
	/* margin: 0; */
}
.drama-contentsBox-inner {
	/* padding: 0; */
}

/* ------------------------------------------------------------------
 記事ページ：タイトル
------------------------------------------------------------------ */
.drama-main .drama-box-title {
    width: 100%;
    margin: 0 auto;
}
.drama-main .drama-box-title > span.title-01 {
	text-indent: -999px;
    overflow: hidden;
    background: url("../template_assets/images/common/title.png") no-repeat center;
    width: 100%;
    height: 0;
    padding-top: 21.5%;
    background-size: contain;
}
.topics-index-area .drama-box-title .title-01{
    text-indent: -999px;
    overflow: hidden;
    background: url("../template_assets/images/common/title.png") no-repeat center;
    width: 100%;
    height: 0;
    padding-top: 36.28%;
    background-size: contain;
}

/* ------------------------------------------------------------------
 記事ページ：本文
------------------------------------------------------------------ */

/* 枠 */
body.second .drama-main .topics-area .drama-box-body {
	/* border: none; */
}

/* パディング */
body.second .drama-main .topics-area .drama-article {
	/* padding: 0; */
}

/* SNS */
.drama-share {}


/* ------------------------------------------------------------------
 記事ページ：右カラム
------------------------------------------------------------------ */
.drama-aside {
	/* background-color: #fff; */
}

/* 右カラム　タイトル */
.drama-box-title.title-base {
	/* background-color: #000; */
	/* color: #fff; */
}

/* ------------------------------------------------------------------
 記事ページ：バナーエリア
------------------------------------------------------------------ */

/* 背景 */
.drama-box-adBanner-area {
	/* background-color: #eee; */
}



/* ------------------------------------------------------------------
	small only 〜600px
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
}

/* ------------------------------------------------------------------
	medium and up 601px〜
------------------------------------------------------------------ */
@media only screen and (min-width: 601px) {
}

/* ------------------------------------------------------------------
	medium and down 〜992px
------------------------------------------------------------------ */
@media only screen and (max-width: 992px) {
}

/* ------------------------------------------------------------------
	large and up 993px〜
------------------------------------------------------------------ */
@media only screen and (min-width: 993px) {
}

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