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

 主に「.d-*」など、番組のみに使用するクラスを記述するCSS
 ※「.drama-*」などの色を変更したい場合は「style.css」に記述
*/
.imgAll100 {
		width:100%;
	}
.sp {
	display: none!important;
}
.center {
	margin: 0 auto;
}
.titleImg {
	margin: -90px auto 0 auto ;
	display: block;
	text-align: center;
}
a:hover {
  transition: opacity .1s;
	text-decoration:none;
	opacity:0.65;
}
@media screen and (max-width: 600px) {
	.titleImg {
	margin:-67px auto 0 auto ;
}
}

@media screen and (max-width: 992px) {
	.img100 {
		width:100%;
	} 
	.img90 {
		width:90%;
	}
	.img80 {
		width: 80%;
	}
	.img84 {
		width: 84%;
	}
	.img60 {
		width: 60%;
	}
}
/* d-contents
========================================== */
.d-contentsWrap {
	width: 100%;
}
.d-main {
	width: 100%;
	background: url(../images/common/mainBg.gif)center;
}

/* 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);
}

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

}
.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(https://placehold.jp/1000x300.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}


/* d-nav
========================================== */
.d-nav-area {
	width: 100%;
	background: url(../images/common/navBg.png)center;
}
.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%;
	vertical-align: top;
	position: relative;
    padding: 14px 0;
}
.d-nav-item:not(:first-child) {
	border-left: 1px solid #000;
}
.d-nav-item:not(:first-child) { margin-left: 0.56%; }
.d-nav-item a {
	display: block;
	width: 100%;
	padding-top: 55%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	overflow: hidden;
}

/* d-nav - status */
.d-nav-item.is-new {}
.d-nav-item.is-new:before {
	content: '';
	display: block;
	width: 27.5%;
	height: 27.5%;
	background: url(../images/common/drama-nav-icon-new.png) no-repeat center; /* NEWマーク　左上固定の場合は left top */
	background-size: contain;
	position: absolute;
	top: -10%;
	right: -3%;
	z-index: 30;
}
.d-nav-item.is-coming {
	
}
.d-nav-item.is-coming a {
	opacity: 0.6;
	pointer-events: none;
}
.d-nav-item.hulu a,.d-nav-item.sns a {
	opacity: 0.6;
	pointer-events: none;
}
/* d-nav - contents */
.d-nav-item.intro a { background-image: url(../images/common/nav_intro.png); }
.d-nav-item.cast a { background-image: url(../images/common/nav_cast.png); }
.d-nav-item.story a { background-image: url(../images/common/nav_story.png); }
.d-nav-item.music a { background-image: url(../images/common/nav_music.png); }
.d-nav-item.chart a { background-image: url(../images/common/nav_chart.png); }
.d-nav-item.topics a { background-image: url(../images/common/nav_topics.png); }
.d-nav-item.sns a { background-image: url(../images/common/nav_sns.png); }
.d-nav-item.hulu a { background-image: url(../images/common/nav_hulu.png); }
.d-nav-item.comingsoon a { background-image: url(../images/common/nav_coming.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;
}

.bgImages {
	background: url(../images/common/navBg_bottom.jpg);
	height: 1.6vw;
}
.d-nav-item .up {
    display: block;
    text-align: center;
    background-color: #d91212;
    font-size: 1.1rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 24px;
    border-radius: 2px;
    transform: translateY(-50%);
    line-height: 1;
    padding: 5px 20px;
    z-index: 1;
	color:#fff;
}

@media only screen and (max-width: 992px) {
	.d-nav-item .up {
	position: absolute;
    left: 0;
    right: 0;
    margin: auto;
	width: 72%;
	padding: 3px 0;
}
}


/* あらすじ画面
========================================== */
.story-area {
	margin-top: 90px;
	padding-bottom: 0px;
	display: block;
	text-align: center;
}
.story-area .parts {
	position: relative;
	top:0;
	left: -351px;
}
.story-area h2 img {
	margin-top: -62px;
}
.story-inner {
	padding: 0 30px 50px;
	margin: 0 auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
	margin-top: -70px;
}

.story-contents {
	padding: 9% 0 4% 0;
}

.BSstory-area {
	margin-top: 130px;
	padding-bottom: 100px;
	display: block;
	text-align: center;
}
.BSstory-area .parts {
	position: relative;
	top:0;
	right: -351px;
}
.BSstory-area h2 img {
	margin-top: -62px;
}
.BSstory-inner {
	padding: 80px 30px 50px;
	margin: 0 auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
	margin-top: -70px;
}

.BSstory-contents {
	padding: 4% 1% 0 1%;
}
@media only screen and (max-width: 992px) {
	
	.story-inner {
	margin: 0 2%;
	margin-top: -11vw;
	padding: 12% 3% 2% 3%;
}
	.story-area .parts {
		display: none;
	}
	.story-area h2 img {
	margin-top: -20px;
}

	.story-contents {
	padding: 0 1% 0 1%;
}
	
	
	.BSstory-inner {
	margin: 0 2%;
	margin-top: -11vw;
	padding: 8% 3% 2% 3%;
}
	.BSstory-area .parts {
		display: none;
	}
	.BSstory-area h2 img {
	margin-top: -20px;
}
}

@media only screen and (max-width: 600px) {
	.d-nav-item:nth-child(n+5) {
		border-top: 1px solid rgba(0,0,0,.85);
	}
	.story-area {
	margin-top: 0;
}
	.story-area .titleImg {
	margin: 46px auto 0 auto
}
	.BSstory-area {
	
}
	.BSstory-inner {
	padding: 12% 3% 2% 3%;
}
	.BSstory-area .titleImg {
	margin: -90px auto 0 auto
}
}

/* イントロダクション
========================================== */
.intro-area {
	margin-top: 90px;
	padding-bottom: 100px;
	display: block;
	text-align: center;
}
.intro-area .parts {
	position: relative;
	top:0;
	right: -374px;
}
.intro-area h2 img {
	margin-top: -154px;
}
.intro-inner {
	padding: 20px 0 50px;
	margin: 0 auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
	margin-top: -70px;
}
.intro-contents {
	padding: 9% 0 4% 0;
}
.intro-contents img {
	width: 100%;
}
@media only screen and (max-width: 992px) {
	.intro-inner {
	padding:2% 0 8%;
	margin: 0 2%;
	max-width:1000px;
	margin-top: -11vw;
}
	.intro-area .parts {
		display: none;
	}
	.intro-area h2 img {
	margin-top: -20px;
}
	.intro-contents {
	padding: 12% 0 4% 0;
}
}
@media only screen and (max-width: 600px) {
	.intro-area {
	margin-top: 0;
}
	.intro-area .titleImg {
	margin: 46px auto 0 auto
}
}

/* キャスト
========================================== */
.cast-area {
	margin-top: 90px;
	padding-bottom: 100px;
	display: block;
	text-align: center;
}
.cast-area .parts {
	position: relative;
	top:0;
	left: -351px;
}
.cast-area h2 img {
	margin-top: -144px;
}

.cast-inner {
	padding: 20px 0 50px;
	margin: -70px auto 70px auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
}
.cast-contents {
	padding: 17% 0 4% 0;
}

.cast-contents img {
	display:block;
	margin: 0 auto;
}

.comment-area {
	margin-top: 90px;
	padding-bottom: 50px;
	display: block;
	text-align: center;
}
.comment-area .parts2 {
	position: relative;
	top:-26px;
	right: -387px;
}
.comment-area h2 img {
	margin-top: -154px;
	margin-bottom: 40px;
}

.comment-inner {
	padding: 20px 0 20px;
	margin: 0 auto 100px auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
}
.comment-contents {
	padding: 0;
}
.comment-contents img {
	float: left;
	margin:-50px 14px 6px -25px;
}
.commentH2 {
	margin: 100px 0 0 0;
}
.comment-contents h3 {
	font-size: 4rem;
	font-weight: bold;
}
.comment-contents h3 span {
	font-size: 0.6em;
}
.comment-contents .castname {
	font-size: 2.4rem;
	margin: -15px 0 0 0;
	text-indent: -11px;
	font-weight: bold;
}
.comment-contents .casttext {
	font-size: 1.4em;
	padding: 2.9%;
	line-height: 1.6em;
	margin-top: -17px;
}



.staff-area {
	margin-top: 90px;
	padding-bottom: 100px;
	display: block;
	text-align: center;
}
.staff-area .parts3 {
	position: relative;
	top:-86px;
	left: -351px;
}
.staff-area h2 img {
	margin-top: -154px;
}

.staff-inner {
	padding: 20px 0 50px;
	margin: 0 auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
	margin-top: -70px;
	    padding-bottom: 40px;
	
}
.staff-contents {
	padding: 10% 0 0 0;
}

.staff-contents img {
	display:block;
	margin: 0 auto;
}

@media only screen and (max-width: 992px) {
	.cast-inner {
	padding:2% 0 8%;
	margin: 0 2%;
	max-width:1000px;
	margin-top: -11vw;
}
	.cast-area .parts {
		display: none;
	}
	.cast-area h2 img {
	margin-top: 0;
}
	
	.comment-inner {
	width: 96%;
		margin-top: 20px;
		    margin-bottom: 50px;
}
	.comment-contents img {
	margin:-50px 14px 6px -17px;
}
	.comment-area {
	margin-top: 20px;
	padding-bottom: 0;
	}
	.comment-area .parts2 {
		display: none;
	}
	.comment-area h2 img {
	margin-top: 0;
}
	.staff-area {
	margin-top: 0;
	}
	.staff-inner {
	padding:2% 0 8%;
	margin: 0 2%;
	max-width:1000px;
	margin-top: -11vw;
}
	.staff-area .parts3 {
		display: none;
	}
	.staff-area h2 img {
	margin-top: 0;
}
}

@media only screen and (max-width: 600px) {
	.cast-area {
	margin-top: 0;
		padding-bottom: 50px;
}
	.cast-area .titleImg {
	margin: 46px auto 0 auto
}
	.cast-contents img {
	width: 60%;
}
	.comment-area {
		margin-top: 0;
	}
	.comment-contents h3 {
		font-size:3rem;
	}
	.comment-contents h3 span {
		display: block;
		text-indent: -11px;
		margin: -10px 0 10px 0;
	}
	.comment-contents .castname {
		font-size: 1.3em;
	}
	.comment-contents .casttext {
		margin-top: 0;
		font-size: 16px;
	}
	.comment-contents img {
		width: 50%;
    	background-size: contain;
    	margin-left: -4%;
}
}

/* 相関図
========================================== */
.chart-area {
	margin-top: 90px;
	padding-bottom: 100px;
	display: block;
	text-align: center;
}
.chart-area .parts {
	position: relative;
	top:0;
	left: -374px;
}
.chart-area h2 img {
	margin-top: -70px;
}
.chart-inner {
	padding: 20px 0 50px;
	margin: 0 auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
	margin-top: -70px;
}
.chart-contents {
	padding: 9% 0 0 0;
}

.chart-contents img {
	width: 100%;
}

@media only screen and (max-width: 992px) {
	.chart-area .parts {
		display: none;
	}
	.chart-area h2 img {
	margin-top: 0;
}
	.chart-inner {
	padding:2% 0 4%;
	margin: 0 2%;
	max-width:1000px;
	margin-top: -11vw;
}
}

@media only screen and (max-width: 600px) {
	.chart-area {
	margin-top: 0;
}
	.chart-area .titleImg {
	margin: 46px auto 0 auto
}
	
	
}

/* 主題歌
========================================== */
.music-area {
	margin-top: 90px;
	padding-bottom: 100px;
	display: block;
	text-align: center;
}
.music-area .parts {
	position: relative;
	top:0;
	right: -374px;
}
.music-area h2 img {
	margin-top: -52px;
}
.music-inner {
	padding: 20px 0 50px;
	margin: 0 auto;
    text-align: left;
	max-width: 1000px;
	background:#fff;
	border:7px solid #000;
	margin-top: -70px;
}
.music-contents {
	padding: 6% 0 0 0;
}

.music-contents img {
	width: 100%;
}

@media only screen and (max-width: 992px) {
	.music-inner {
	padding:2% 0 8%;
	margin: 0 2%;
	max-width:1000px;
	margin-top: -11vw;
}
	.music-area .parts {
		display: none;
	}
	.music-area h2 img {
	margin-top: 0;
}
}

@media only screen and (max-width: 600px) {
	.music-area {
	margin-top: 0;
}
	.music-area .titleImg {
	margin: 46px auto 0 auto
}
}








/* contentsBox
========================================== */
.d-contentsBox {

}
.topBgGen {
	background: url(../images/top/gen.png)no-repeat center top;
}
.d-contentsBox-inner {
	overflow: hidden;
}
@media only screen and (max-width: 992px) {
	.d-contentsBox {
		background-size:contain;
	}
}


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

/* box
========================================== */
.d-box {
	word-break: break-all;
}
.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;
	text-align: center;
}
.d-box-title-01 {}
.d-box-title-02 {}

.d-box-body {
	
}


/* ------------------------------------------------------------------
 SP（〜600px）
------------------------------------------------------------------ */
@media only screen and (max-width: 600px) {
	.sp {
		display: block !important;
	}
	.pc {
		display: none !important;
	}

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


	/* 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: 53.125%;
		background-image: url(https://placehold.jp/640x340.png);
	}


  /* drama-nav
	========================================== */
	/* drama-nav-list
	------------------------------------------ */
	.d-nav-list { margin: 0 auto; padding: 0; }
	.d-nav-item { width: 25%;padding: 0 }
	.d-nav-item:not(:first-child) { margin-left: 0; }
	.d-nav-item:nth-child(4n+1) { margin-left: 0; }
	.d-nav-item:nth-child(n+5) { margin-top: 0; }
	.d-nav-item a span { font-size: 0; }
}


/* ------------------------------------------------------------------
 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;
	}
}