@charset "utf-8";

/* -------------------------------------------------------------
	共通
-----------------------------------------------------------------*/

body {
	background:
	url(../../img/bg_01.jpg) 50% 0 no-repeat,
	url(../../img/bg_02.jpg) 50% 400px no-repeat;
	background-color: #ecae0e;
}
#wrap {
	background:
	url(../../img/bg_03.jpg) 50% 800px no-repeat,
	url(../../img/bg_04.jpg) 50% 1200px no-repeat,
	url(../../img/bg_04.jpg) 50% 1600px no-repeat;
}
#btn_pagetop {
	width: 100px;
	height: 80px;
	padding: 10px 0;
	text-align: center;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.6);
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 999;
	transition: 0.2s;
}
#btn_pagetop a {
	text-decoration: none;
}
#btn_pagetop:hover {
	opacity: 0.8;
}
#btn_pagetop span:nth-child(1) {
	font-size: 42px;
	display: block;
	line-height: 1;
	margin-bottom: 5px;
}
#btn_pagetop span:nth-child(2) {
	font-size: 14px;
	display: block;
}
#btn_pagetop a {
	color: #fff;
}

/*	フッター
-----------------------------------------------------------------*/
footer {
	background-color: #5c4022;
}
footer .inner {
	width: 1110px;
	margin: 0 auto;
	text-align: right;
	padding-top: 25px;
	padding-bottom: 100px;
}


/*	ヘッダー
-----------------------------------------------------------------*/
header {
	width: 1110px;
	/*height: 1450px;
	height: 1600px;*/
	height: 1550px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
header .inner {

}
header h1 {
	position: absolute;
	/*top: 330px;*/
	top: 240px;
	right: 10px;
	z-index: 10;
}
header #top_date {
	position: absolute;
	top: 25px;
	left: 20px;
	z-index: 10;
}
header #top_date02 {
	position: absolute;
	top: 145px;
	left: 20px;
	z-index: 10;
}

nav {
	position: absolute;
	top: 631px;
	/*top: 585px;*/
	left: 295px;
	z-index: 10;
}
nav ul {
	height: 265px;
}
nav ul li {
	float: right;
	margin-right: 20px;
}
nav ul li #present-balloon {
	position: absolute;
	top: -90px;
	left: -20px;
	z-index: 15;
}
nav ul li #present-close {
	position: absolute;
	top: 95px;
	left: 220px;
	z-index: 15;
}

/*#top_tada {
	width: 208px;
	position: absolute;
	top: 695px;
	left: 20px;
	z-index: 10;
}
#top_tada a:hover {
	opacity: 0.6;
}*/

#bn_dvd {
	/*width: 208px;*/
	position: absolute;
	top: 915px;
	/*top: 484px;*/
	/*left: 292px;*/
	left: 409px;
	z-index: 10;
}
#bn_dvd a:hover {
	opacity: 0.6;
}

#top_hulu {
	width: 208px;
	position: absolute;
	top: 676px;
	/*top: 630px;*/
	/*top: 639px;*/
	left: 20px;
	z-index: 10;
}
#top_hulu a:hover {
	opacity: 0.6;
}

#top_btn {
	position: absolute;
	top: 860px;
	/*top: 814px;*/
	left: 20px;
	z-index: 10;
}

#top_info {
	position: absolute;
	top: 864px;
	left: 155px;
	z-index: 10;
	width: 800px;
	height: 140px;
	background-color: rgba(255,255,255,0.9);
}
#top_info h2 {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 11;
}
#top_info ul {
	margin: 45px 20px 0;
	overflow: hidden;
	overflow-y: scroll;
	position: relative;
	height: 85px;
}
#top_info li {
	color: #333;
	line-height: 1.4;
	margin-bottom: 4px;
}

#bn_sho-ten_dramasp {
	position: absolute;
	top: 512px;
	/*top: 864px;*/
	left: 294px;
	/*left: 155px;*/
	z-index: 10;
	display: none;
}
#bn_sho-ten_dramasp:hover {
	opacity: 0.7;
}

.bn_sho-ten_dramasp_14 {
	font-size: 2.5em;
	font-weight: bold;
	position: absolute;
	top: 1130px;
	/* top: 969px; */
	left: 300px;
	z-index: 10;
}

#bn_sho-ten_dramasp_14 {
	/* display: flex; */
	position: absolute;
	/* top: 1030px; */
	top: 1200px;
	/* left: 294px; */
	z-index: 10;
}

#bn_sho-ten_dramasp_14 img{
	margin:0 20px;
	width:320px;
	height:105px;
}

#bn_sho-ten_dramasp_14 a:hover {
	opacity: 0.7;
}


#top_video {
	position: absolute;
	/* top: 1024px; */
	/* top: 1200px; */
	top: 1350px;
	left: 227px;
	z-index: 10;
}

/* スポンサー */
#sponsor {
	width: 1040px;
	position: absolute;
	top: 1450px;
	left: 0;
	z-index: 11;
	margin: 0 35px;
}
#sponsor ul {
	width: 1040px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 10px;
}
#sponsor li {
	display: inline;
	margin-right: 10px;
}
#sponsor li:last-child {
	margin-right: 0;
}
#sponsor li a {
	transition: 0.2s;
}
#sponsor li a:hover {
	opacity: 0.6;
}

#top_bg {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
}

/* -------------------------------------------------------------
	サブ共通
-----------------------------------------------------------------*/
#contents {
	background-color: #fff;
}
#contents .inner {
	width: 1010px;
	margin: 0 auto;
	padding: 50px 0;
	position: relative;
}
#contents .box {

}
#contents h2 {
	text-align: center;
	margin-bottom: 35px;
}

/* 	概要
-----------------------------------------------------------------*/
#outline {
	background: url(../../img/bg_contents.png) 50% 0 repeat-y;
	background-color: #efe5f5;
	border-top: 6px solid #660099;
}
#outline .txt01 {
	text-align: center;
	margin-bottom: 20px;
}
#outline .txt02 {
	margin: 0 0 20px;
	text-align: center;
}
#outline .pic {

}


/* 	登場人物
-----------------------------------------------------------------*/
#cast {
	background: url(../../img/bg_contents.png) 50% 0 repeat-y;
	background-color: #e5f5fa;
	border-top: 6px solid #0099cc;
}
#cast .ttl_sub {
	position: absolute;
	top: 10px;
	right: 30px;
	z-index: 0;
}
#cast .cast_list li {
	margin-bottom: 10px;
}
#cast .cast_list li:last-child {
	margin-bottom: 0;
}


/* 	ツイッター
-----------------------------------------------------------------*/
#twitter {
	background: url(../../img/bg_contents.png) 50% 0 repeat-y;
	background-color: #fdfaf3;
	border-top: 6px solid #e9ca86;
}
#twitter .timeline {
	width: 800px;
	height: 420px;
	background-color: #e9ca86;
	padding: 3px; 
	margin: 0 auto;
	border-radius: 6px;
}


/* 	制作スタッフ
-----------------------------------------------------------------*/
#staff {
	background: url(../../img/bg_contents.png) 50% 0 repeat-y;
	background-color: #eaf6eb;
	border-top: 6px solid #2dab38;
}
#staff .staff_txt {
	text-align: center;
}


/* 	プレゼント
-----------------------------------------------------------------*/
#present {
	background: url(../../img/bg_contents.png) 50% 0 repeat-y;
	background-color: #fdf1ff;
	border-top: 6px solid #ee77ff;
}
#present #present-close2 {
	position: absolute;
	top: 90px;
	right: 180px;
	z-index: 10;
}
#present #present-close3 {
	position: absolute;
	top: 1185px;
	left: 200px;
	z-index: 10;
}
#present #present-close3 img {
	width: 70%;
}
#present dl {
	width: 800px;
	margin: 0 auto;
}
#present dt {
	font-size: 16px;
	font-weight: bold;
	line-height: 2em;
	color: #fff;
	background: rgba(238,119,255,0.8);
	border-radius: 5px;
	text-indent: 1em;
	margin-bottom: 8px;
	clear: both;
}
#present dd {
	font-size: 16px;
	line-height: 1.4;
	margin: 0 10px 15px;
}
#present .list {
	display: block;
	width: 360px;
	height: 400px;
	padding: 0 10px;
	text-align: center;
	font-weight: bold;
	float: left; /*background-color:#FC9;*/
}
#present .list img {
	width: 360px;
	margin-bottom: 5px;
	border: 1px solid #ccc;
}
#present .btn {
	font-size: 18px;
	font-weight: bold;
	float: left;
	margin-right: 20px;
	margin-bottom: 15px;
}
#present .btn a {
	width: 240px;
	color: #fff;
	line-height: 2.5;
	text-align: center;
	text-decoration: none;
	background-color: #2dab38;
	border-radius: 5px;
	display: block;
}
#present .btn a:hover {
	opacity: 0.6;
}
#present .btn_close {/*プレゼント終了*/
	opacity: 0.6;	
	width: 240px;
	color: #fff;
	line-height: 2.5;
	text-align: center;
	text-decoration: none;
	background-color: #2dab38;
	border-radius: 5px;
	display: block;
}
#present .oubo_txt {
	display: block;
	margin: 12px 0;
	text-align: center;
	font-weight: bold;
}
#present .hagaki {
	line-height: 3;
}
#present .privacy {
	font-size: 14px;
	line-height: 1.4;
	background-color: #eee;
	padding: 10px;
	display: block;
}


/* 	4K注意書き
-----------------------------------------------------------------*/
#add_4k {
	margin: 100px 0;
}
#add_4k .logo_4k {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	width: 66px;
	height: 37px;
	background: url(../../img/logo_4k.png) 0 0 no-repeat;
}
#add_4k .logo_bs4 {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	width: 140px;
	height: 26px;
	background: url(../../img/logo_bs4.png) 0 0 no-repeat;
	position: relative;
	top: -2px;
}
#add_4k p {
	text-align: center;
	color: #000;
	font-size: 28px;
	line-height: 2;
}


/* sns
----------------------------------------------------*/
#sns_list {
	width: auto;
	height: 20px;
	padding: 8px 10px;
	position: absolute;
	top: 816px;
	/*top: 770px*/;
	left: 20px;
	z-index: 11;
	background: rgba(255,255,255,0.6);
	border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#sns_list li {
	float: left;
	margin-right: 5px;
	height: 20px;
}
#sns_list li:last-child {
	margin-right: 0;
}
#sns_list li.facebook iframe {
    width: 95px !important;
}

/* TVer
----------------------------------------------------*/

/* 背景色・画像がある場合はここに個別に追記が必要 ここから*/
.streaming-bnr {
/*
    background: url(/mousou-train/images/common/gxih1sryy3l7pume93x782iw9w9akc.png);
    background-size: 100px 100px;
*/
    z-index: 10;
    position: absolute;
    top: 970px;
    left: 320px;
    width: 450px;
}
.streaming-bnr a:hover {
	opacity: 0.6;
}

/* ここまで */

.streaming-bnr__list {
    display: flex;
    flex-wrap: wrap;
}
.streaming-bnr__card {
    display: block;
}
.streaming-bnr__img {
    display: block;
    width: 100%;
}
/*
@media only screen and (max-width: 767.98px) {
    .streaming-bnr__item {
        width: 100%;
    }
    .streaming-bnr__item:nth-child(n+2) {
        margin-top: 20px;
    }
}
@media only screen and (min-width: 768px) {
    .streaming-bnr__item {
        width: calc((100% - 41px) / 2);
    }
    .streaming-bnr__item:nth-child(n+2) {
        margin-left: 40px;
    }
}
*/