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

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


/* aside内(※margin, paddingは変更しないでください)
========================================== */

/* タイトル（フォント色、背景色）
------------------------------------------ */
.drama-box-title.title-base { background-color: #cf38c8; }


/* SNS・シェア（枠色）
------------------------------------------ */
.drama-box-sns-area,
.drama-box-share-area {}

/* SNS・シェア（タイトル色、タイトル背景色）
------------------------------------------ */
.drama-box-sns-area .drama-box-title,
.drama-box-share-area .drama-box-title {}

.drama-box-adBanner-area { background-image: url(../images/common/bg_floor.png); }

/* 共通
------------------------------------------ */
.altTx {
	font-size: 0;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}
.motif-door {
	display: inline-block;
	width: 40px;
	height: 45px;
	border: 1px solid #24739c;
	border-radius: 0 40px 0 0;
	background: #fff;
}

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

/* モチーフ付き */
.ieuru-box-deco {
	position: relative;
	margin-bottom: 60px;
}
.ieuru-box-deco:after {
	content: '';
	display: block;
	position: absolute;
	top: 99.5%;
	right: 0;
	width: 245px;
	height: 65px;
	border: 1px solid #fff;
	background-image: url(../images/common/bg_border_white.png);
	background-size: 2px 10px;
}
.ieuru-box-deco .motif-door {
	position: absolute;
	top: auto;
	bottom: 99.5%;
	left: auto;
	right: 60px;
	width: 60px;
	height: 60px;
	display: inline-block;
	border: 1px solid #fff;
	border-radius: 0 60px 0 0;
	background: transparent;
}
.ieuru-box-deco .motif-door.bottom {
	top: 99.5%;
	bottom: auto;
	left: 60px;
	right: auto;
	transform: rotate(90deg);
}
.ieuru-box-deco .motif-door.bottom + .bottom {
	top: 99.5%;
	bottom: auto;
	left: 120px;
	right: auto;
	transform: rotate(180deg);
}

/* タイトル
------------------------------------------ */
.ieuru-box-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 60px;
}
.ieuru-box-title .title-01 {
	position: relative;
	font-weight: bold;
	padding-left: 50px;
	letter-spacing: 0.25rem;
}
.ieuru-box-title .title-01:before {
	content: '';
	display: inline-block;
	width: 50px;
	height: 50px;
	background-image: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
}
.ieuru-box-title .title-02 {
	font-size: 14px;
	letter-spacing: 0.25rem;
	line-height: 2.5;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-left: 30px;
	padding: 0 5px;
}


/* 第2階層
------------------------------------------ */
.ieuru-second { background-image: url(../images/common/bg_floor.png); }
.ieuru-second .d-area { margin: 0 auto; }

.ieuru-second .ieuru-box-title { line-height: 1; padding: 70px 0;}
.ieuru-second .ieuru-box-title .title-01 { font-size: 60px; color: #fff; padding-left: 0; }
.ieuru-second .ieuru-box-title .title-02 {
	font-size: 16px;
	color: #fff;
	line-height: 1.9;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.ieuru-second .d-inner { padding: 0 0 100px; }
.ieuru-second .d-box-body {
	background: rgba(2,25,48,0.5);
	padding: 0 10px 25px;
}
.ieuru-second .ieuru-second-title {
	position: relative;
	display: flex;
	align-items: center;
	letter-spacing: 0.25rem;
	padding: 50px 0 45px;
	line-height: 1;
}
.ieuru-second .ieuru-second-title:before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url(../images/cast-staff/icon_cast.svg);
	margin-right: 10px;
}
.ieuru-second .ieuru-second-title.staff:before { background: url(../images/cast-staff/icon_staff.svg); }
.ieuru-second .ieuru-second-title .title-01 {
	color: #ffff00;
	font-size: 40px;
	margin-right: 10px;
	letter-spacing: 0.5rem;
}
.ieuru-second .ieuru-second-title .title-02 {
	position: relative;
	color: #ffff00;
	font-size: 16px;
	vertical-align: super;
	padding: 0 40px;
}
.ieuru-second .ieuru-second-title .title-02:before,
.ieuru-second .ieuru-second-title .title-02:after {
	position: absolute;
	top: 50%;
	left: 0px;
	content: '';
	display: inline-block;
	width: 30px;
	height: 1.5px;
	background: #ffff00;
}
.ieuru-second .ieuru-second-title .title-02:after {
	left: auto;
	right: 0;
}



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

	.ntv-pageTop a {
		background-color: #f39800;
		background-image: url(../images/common/pageTop.png);
		background-size: 64px 34px;
		background-position: center 6px;
		background-repeat: no-repeat;
		border-radius: 50%;
		z-index: 100;
		box-shadow:0px 0px 6px 1px rgba(0,0,0,0.3);
	}
	.ntv-pageTop a:after { display: none; }
	.ntv-pageTop a:before {
		position: absolute;
		top: 106%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60px;
		height: 62px;
		content: '';
		display: inline-block;
		background: url(../images/common/pageTop_deco.png) no-repeat center;
		background-size: contain;
	}

	/* 第2階層
	------------------------------------------ */
	.ieuru-second .d-box-body { padding: 0 70px 70px; }
}



/* ------------------------------------------------------------------
 tablet（0〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
	.ntv-wrapper { margin-bottom: 60px; }

	/* SPフッター固定ナビ
	------------------------------------------ */
	#ieuru-nav-sp { display: block; }
	.ieuru-nav-sp-unshown { display: none; }
	#ieuru-nav-sp-open {
		position: fixed;
		z-index: 100;
		bottom: 0;
		right: 0;
		display: inline-block;
		width: 60px;
		height: 60px;
		background-color: #7639d1;
		vertical-align: middle;
	}
	#ieuru-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;
	}
	#ieuru-nav-sp-open span:nth-child(1) { top: 25%; }
	#ieuru-nav-sp-open span:nth-child(3) { top: 55%; }
	#ieuru-nav-sp-open .txt {
		color: #ffffff;
		position: absolute;
		text-align: center;
		width: 100%;
		bottom: 0%;
		left: 50%;
		transform: translate(-50%, -30%);
		font-size: 10px;
	}
	#ieuru-nav-sp-footer {
		position: fixed;
		display: flex;
		z-index: 100;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: #222222;
		vertical-align: middle;
		padding-right: 60px;
		color: #ffffff;
	}
	#ieuru-nav-sp-footer > li {
		border-right: 1px solid #555;
		width: 33.33%;
		text-align: center;
	}
	#ieuru-nav-sp-footer > li a {
		display: block;
		line-height: 1;
		font-size: 10px;
		padding-top: 5px;
	}
	#ieuru-nav-sp-footer > li.ieuru-nav-sp-top a { color: #f39800; padding-top: 4px; }
	i[class^='ieuru-icon-'] {
		display: block;
		width: 35px;
		height: 30px;
		background-image: url(../images/common/icon_teiko.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
	}
	#ieuru-nav-sp-footer > li.is-coming {
		position: relative;
		background: #444;
	}
	#ieuru-nav-sp-footer > li.is-coming a {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		line-height: 1.5;
		font-size: 10px;
		color: #999;
		letter-spacing: 0.1rem;
	}
	#ieuru-nav-sp-footer > li.is-coming a i {
		display: none;
	}

	i.ieuru-icon-top { background-image: url(../images/common/icon_teiko.svg); height: 30px; margin: 0 auto 6px; }
	i.ieuru-icon-story { background-image: url(../images/common/icon_book.svg); margin: 4px auto 1px; }
	i.ieuru-icon-chart { background-image: url(../images/common/icon_cast.svg); margin: 4px auto 1px; }
	#ieuru-nav-sp-input:checked ~ #ieuru-nav-sp-content { opacity: 1; z-index: 99; }
	#ieuru-nav-sp-input:checked ~ #ieuru-nav-sp-open span:nth-child(1) { top: 40%; transform: translate(-50%, -50%) rotate(45deg); }
	#ieuru-nav-sp-input:checked ~ #ieuru-nav-sp-open span:nth-child(2) { opacity: 0; }
	#ieuru-nav-sp-input:checked ~ #ieuru-nav-sp-open span:nth-child(3) { top: 40%; transform: translate(-50%, -50%) rotate(-45deg); }
	#ieuru-nav-sp-content {
		overflow: auto;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgb(81,112,250);
		background: -webkit-linear-gradient(top, rgba(81,112,250,1) 0%,rgba(196,85,194,1) 100%);
		background: linear-gradient(to bottom, rgba(81,112,250,1) 0%,rgba(196,85,194,1) 100%);
		transition: .3s ease-in-out;
		opacity: 0;
		z-index: -1;
		padding-bottom: 100px;
	}
	.ieuru-nav-sp-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		padding: 25px 15px 0;
	}
	.ieuru-nav-sp-item {
		position: relative;
		width: 49%;
		text-align: center;
		margin-top: 5px;
	}
	.ieuru-nav-sp-item:nth-child(even) {
		margin-right: 2%;
	}
	.ieuru-nav-sp-item.top { width: 100%; margin-bottom: 20px; }
	.ieuru-nav-sp-item > a {
		min-height: 80px;
		display: inline-block;
		line-height: 1.1;
		width: 100%;
		color: #fff;
		font-size: 19px;
		background: rgba(77, 0, 143, 0.2);
		border-radius: 5px;
		padding-top: 20px;
	}
	.ieuru-nav-sp-item.is-coming a {
		color: #071f34;
		font-size: 17px;
		padding-top: 23px;
		pointer-events: none;
		letter-spacing: 0.1rem;
	}
	.ieuru-nav-sp-item.is-fin {
		opacity: 0.5;
	}

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

	.ieuru-nav-sp-item.top > a {
		display: block;
		background: none;
		min-height: auto;
		border-top: 2px solid #fff;
		border-bottom: 2px solid #fff;
		border-radius: 0px;
		padding: 10px 0;
	}
	.ieuru-nav-sp-item.top > a > span {
		display: block;
		width: 100%;
		height: 30px;
		background: url(../images/common/drama-spnav-top.png) no-repeat center;
		background-size: contain;
		margin-top: 0;
		font-size: 0;
		text-indent: -9999px;
		overflow: hidden;
		white-space: nowrap;
	}
	.ieuru-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: -7%;
		right: -3px;
		z-index: 30;
	}
	.ieuru-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;
	}

	.ieuru-nav-sp-bnr {
		width: 100%;
		padding: 10px 15px 0;
	}
	.ieuru-nav-sp-bnr a { display: block; }
	.ieuru-nav-sp-bnr a img { width: 100%; }

	/* タイトル */
	.ieuru-box-title { font-size: 30px; }
	.ieuru-box-title .title-01 { padding-left: 25px; letter-spacing: 0rem; }
	.ieuru-box-title .title-01:before {
		width: 30px;
		height: 35px;
	}
	.ieuru-box-title .title-02 {
		line-height: 1.6;
		margin-left: 15px;
		letter-spacing: 0.05rem;
		padding: 0 2px;
	}
}


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

	/* モチーフ付き */
	.ieuru-box-deco { margin-bottom: 30px; }
	.ieuru-box-deco:after {
		width: 100px;
		height: 30px;
		background-image: url(../images/common/bg_border_white.png);
		background-size: 1px 5px;
	}
	.ieuru-box-deco .motif-door {
		right: 20px;
		width: 30px;
		height: 30px;
		border-radius: 0 40px 0 0;
	}
	.ieuru-box-deco .motif-door.bottom { left: 20px; }
	.ieuru-box-deco .motif-door.bottom + .bottom { left: 50px; }



	/* 第2階層タイトル */
	.ieuru-second {
		background-image: url(../images/common/bg_floor.png);
		background-size: 340px 294px;
	}
	.ieuru-second .ieuru-box-title { padding: 30px 0 25px;}
	.ieuru-second .ieuru-box-title .title-01 { font-size: 30px; }
	.ieuru-second .ieuru-box-title .title-01:before { display: none; }
	.ieuru-second .ieuru-box-title .title-02 { font-size: 10px; }
	.ieuru-second .ieuru-second-title { padding: 23px 10px 20px; }
	.ieuru-second .ieuru-second-title:before { width: 20px; height: 20px;}
	.ieuru-second .ieuru-second-title .title-01 { font-size: 24px; letter-spacing: 0.25rem; }
	.ieuru-second .ieuru-second-title .title-02 { font-size: 12px; padding: 0 20px; }
	.ieuru-second .ieuru-second-title .title-02:before,
	.ieuru-second .ieuru-second-title .title-02:after { width: 15px; }


	/* 第2階層 */
	.ieuru-second .d-inner { padding: 0 0 50px; }
	.drama-box-adBanner-area {
		background-image: url(../images/common/bg_floor.png);
		background-size: 340px 294px;
	}


}