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

/* ntv-wrapper
========================================== */
.ntv-wrapper {
	background-color: #fff !important;
}



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

.oresuka-anime-jump {
	animation: anime-jump 1.5s infinite;
}

@keyframes anime-jump {
	0% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
	9% {
		transform: translateY(-40%);
	}
	11% {
		transform: translateY(-40%);
		animation-timing-function: ease-in;
	}
	20% {
		transform: translateY(0%);
	}
	24% {
		transform: translateY(-5%);
	}
	26% {
		transform: translateY(0%);
	}
	100% {

	}
}

/* SPナビ */
#oresuka-nav-sp { display: none; }

/* ------------------------------------------------------------------
 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) {

	.ntv-wrapper { margin-bottom: 60px; }

	/* SPフッター固定ナビ
	------------------------------------------ */
	#oresuka-nav-sp {
		display: block;
	}



	.oresuka-nav-sp-unshown {
		display: none;
	}

	#oresuka-nav-sp-open {
		position: fixed;
		z-index: 100;
		bottom: 0;
		right: 0;
		display: inline-block;
		width: 60px;
		height: 60px;
		background-color: #000;
		vertical-align: middle;
	}

	#oresuka-nav-sp-open span {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 30px;
		height: 2px;
		background-color: #ffffff;
		display: block;
		content: '';
		cursor: pointer;
		transition: .3s linear;
	}

	#oresuka-nav-sp-open span:nth-child(1) {
		top: 25%;
	}

	#oresuka-nav-sp-open span:nth-child(3) {
		top: 55%;
	}

	#oresuka-nav-sp-open .txt {
		color: #ffffff;
		position: absolute;
		text-align: center;
		width: 100%;
		bottom: 0%;
		left: 50%;
		transform: translate(-50%, -30%);
		font-size: 10px;
	}

	#oresuka-nav-sp-footer {
		position: fixed;
		display: flex;
		z-index: 100;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background: url(../images/common/bg-darkblue.png) repeat center top;
		vertical-align: middle;
		padding-right: 60px;
		color: #ffffff;
	}

	#oresuka-nav-sp-footer,
	#oresuka-nav-sp-open {
		bottom: -60px;
		transition: bottom .3s ease;
	}
	#oresuka-nav-sp.is-active #oresuka-nav-sp-footer,
	#oresuka-nav-sp.is-active #oresuka-nav-sp-open {
		bottom: 0;
	}

	#oresuka-nav-sp-footer>li {
		border-right: 1px solid #fff;
		width: 33.33%;
		text-align: center;
	}
	#oresuka-nav-sp-footer > li:last-child {
		border: none;
	}

	#oresuka-nav-sp-footer>li a {
		display: block;
		line-height: 1;
		font-size: 12px;
		padding-top: 5px;
	}

	#oresuka-nav-sp-footer>li.oresuka-nav-sp-top a {
		padding-top: 4px;
	}

	#oresuka-nav-sp-footer i {
		display: block;
		font-size: 35px;
	}

	#oresuka-nav-sp-footer>li.is-coming {
		/* position: relative;
		background: #444; */
	}

	#oresuka-nav-sp-footer>li.is-coming a {
		opacity: 0.6;
		pointer-events: none;
	}

	#oresuka-nav-sp-input:checked~#oresuka-nav-sp-content {
		opacity: 1;
		z-index: 99;
	}

	#oresuka-nav-sp-input:checked~#oresuka-nav-sp-open span:nth-child(1) {
		top: 40%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#oresuka-nav-sp-input:checked~#oresuka-nav-sp-open span:nth-child(2) {
		opacity: 0;
	}

	#oresuka-nav-sp-input:checked~#oresuka-nav-sp-open span:nth-child(3) {
		top: 40%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	#oresuka-nav-sp-content {
		overflow: auto;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: url(../images/common/bg-blue.png) repeat center top;
		transition: .3s ease-in-out;
		opacity: 0;
		z-index: -1;
		padding-bottom: 100px;
	}

	.oresuka-nav-sp-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		padding: 15px 20px 0;
		border-bottom: 2px solid rgba(255,255,255, .45);
	}

	.oresuka-nav-sp-item {
		position: relative;
		width: 50%;
		text-align: center;
	}

	.oresuka-nav-sp-item:nth-child(2n + 1) {
		padding-left: 4px;
	}

	.oresuka-nav-sp-item:nth-child(2),
	.oresuka-nav-sp-item:nth-child(3) {
		border-top: 2px solid rgba(255,255,255, .45);
	}

	.oresuka-nav-sp-item:nth-child(2n) {
		border-right: 2px solid rgba(255,255,255, .45);
		padding-right: 4px;
	}

	.oresuka-nav-sp-item:nth-child(n + 4) a {
		border-top: 2px solid rgba(255,255,255, .45);
	}

	.oresuka-nav-sp-item.top {
		width: 100%;
		margin-bottom: 10px;
	}

	.oresuka-nav-sp-item > a {
		height: 70px;
		display: block;
		width: 100%;
		font-size: 0;
		text-indent: -9999px;
		overflow: hidden;
		background: no-repeat center / auto 120px ;
		/* padding-top: 20px; */
		position: relative;
	}

	.oresuka-nav-sp-item.intro > a { background-image: url(../images/common/nav-intro.png);}
	.oresuka-nav-sp-item.story > a { background-image: url(../images/common/nav-story.png);}
	.oresuka-nav-sp-item.cast > a { background-image: url(../images/common/nav-cast2.png);}
	.oresuka-nav-sp-item.music > a { background-image: url(../images/common/nav-music.png);}
	.oresuka-nav-sp-item.staff > a { background-image: url(../images/common/nav-staff.png); 
		/* border-bottom: 2px solid rgba(255,255,255,0.4); */
	}

	.oresuka-nav-sp-item.movie > a { background-image: url(../images/common/nav-movie.png);}
	.oresuka-nav-sp-item.goods > a { background-image: url(../images/common/nav-goods.png);}
	.oresuka-nav-sp-item.hulu > a { background-image: url(../images/common/nav-hulu.png);}

	.oresuka-nav-sp-item.is-coming a {
		border-top: 2px solid rgba(255,255,255,0.7);
		color: #071f34;
		font-size: 17px;
		padding-top: 23px;
		pointer-events: none;
		letter-spacing: 0.1rem;
	}

	.oresuka-nav-sp-item.is-fin {
		opacity: 0.5;
	}

	.oresuka-nav-sp-item>a>span {
		display: block;
		font-size: 10px;
		color: #071f34;
		margin-top: 0.5rem;
	}

	.oresuka-nav-sp-item.top>a {
		display: block;
		background: none;
		min-height: auto;
		border-radius: 0px;
		height: 0;
		padding-top: calc((146 / 495) * 100%);
		background: url(../images/common/nav-sp-logo.png) no-repeat center center / auto 80%;
	}

	.oresuka-nav-sp-item.top>a>span {
		display: block;
		width: 100%;
		height: 30px;
		background-size: contain;
		margin-top: 0;
		font-size: 0;
		text-indent: -9999px;
		overflow: hidden;
		white-space: nowrap;
	}

	.oresuka-nav-sp-item.is-new:before {
		content: '';
		display: block;
		width: 27.5%;
		height: 27.5%;
		background: url(../images/common/drama-nav-icon-new.png) no-repeat;
		background-position: right center;
		background-size: contain;
		position: absolute;
		top: 2px;
		right: 3px;
		z-index: 30;
	}

	.oresuka-nav-sp-item.is-blank:after {
		content: '';
		display: block;
		width: 12px;
		height: 12px;
		background: url(../images/common/icon_blank.svg) no-repeat center;
		/* NEWマーク　左上固定の場合は left top */
		background-size: contain;
		position: absolute;
		bottom: 2px;
		right: 5px;
		z-index: 30;
	}

	.oresuka-nav-sp-bnr {
		width: 100%;
		padding: 10px 15px 0;
	}

	.oresuka-nav-sp-bnr a {
		display: block;
	}

	.oresuka-nav-sp-bnr a img {
		width: 100%;
	}
}


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

	.ntv-pageTop a {
		background-color: #e5027f;
		border-radius: 5px;
	}
	.ntv-pageTop a::before {
		content: "TOP";
		display: block;
		width: 68px;
		height: 59px;
		background: url(../images/common/icon-chara.png) no-repeat center / contain;
		position: absolute;
		top: 4px;
		left: -35px;
		}
	.ntv-pageTop a:after {
    content: "TOP";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin-top: 24.5px ;
	}
}