@charset "utf-8";

@media print{
	#top #main #header, #article .pic { display:none; }
}

body {
	min-width: 1000px;
	background: url(../images/common/bg.png);
}

html > body > iframe {
	display: none;
	height:0;
}

#contents {
	width: 675px;
	margin:0 auto;
}
/* anchor */
#wrapper a,
#wrapper .article{
	-webkit-transition: all 0.2s 0s ease;
	-moz-transition: all 0.2s 0s ease;
	transition: all 0.2s 0s ease;
}

/* #main */
#main {
	width: 675px;
	padding-bottom: 35px;
	position: relative;
}

/* SNS自動設置エリア */
.global_NTV_snsArea .global_NTV_snsList{
	margin-top: -15px;
	padding: 0 40px 20px 20px;
	text-align: right;
}

.global_NTV_snsArea .global_NTV_snsList li{
	display: inline-block;
	margin-right: 15px;
	vertical-align: top;
}

.global_NTV_snsArea .fb_iframe_widget span{
	vertical-align: top!important;
}

/* #side */
#side { padding: 10px 0px 0px; }

#wrapper #contents #side .box .title {
	background: rgb(218,225,229); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%, rgba(218,225,229,1) 51%,rgba(238,241,244,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(218,225,229,1)), color-stop(100%,rgba(238,241,244,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%, rgba(218,225,229,1) 51%,rgba(238,241,244,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%, rgba(218,225,229,1) 51%,rgba(238,241,244,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%, rgba(218,225,229,1) 51%,rgba(238,241,244,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#dce2e6',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%, rgba(218,225,229,1) 51%,rgba(238,241,244,1) 100%); /* W3C */
}

#wrapper #contents #side #oa .info a,
#wrapper #contents #side #blog .info a{
	background-color: rgba(153,153,153,0.5);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
}


/*-----------------------------
 header
-------------------------------*/
#header .subtit, #header h1 a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#header .subtit {
	width: 675px;
	height: 173px;
	margin: 0 auto;
	background: url(../images/common/img_header.png) center top no-repeat;
}
#header h1 a {
	width: 337px;
	height: 138px;
	background: url(../images/common/logo.png) center top no-repeat;
	position: absolute;
	top: 20px;
	right: 10px;
	display: block;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#header h1 a:hover { opacity: 0.5; }


/*-----------------------------
  nav
-------------------------------*/
#article #nav ul {
	width: 675px;
	margin: 0 auto;
	padding-bottom: 40px;
	display: table;
}
#article #nav ul li { display: table-cell; }
#article #nav ul li a { display: block; }
#article #nav ul li.link_01 a,
#article #nav ul li.link_02 a,
#article #nav ul li.link_03 a,
#article #nav ul li.link_04 a {
	height: 80px;
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#article #nav ul li.link_01 a {
	width: 168px;
	background: url(../images/common/nav_intro_off.png) center top no-repeat;
}
#article #nav ul li.link_02 a {
	width: 169px;
	background-image: url(../images/common/nav_story_off.png);
}
#article #nav ul li.link_03 a {
	width: 169px;
	background-image: url(../images/common/nav_cast_off.png);
}
#article #nav ul li.link_04 a {
	width: 169px;
	background-image: url(../images/common/nav_staff_off.png);
}
#article #nav ul li.link_01 a:hover { background: url(../images/common/nav_intro_on.png) center top no-repeat; }
#article #nav ul li.link_02 a:hover { background: url(../images/common/nav_story_on.png) center top no-repeat; }
#article #nav ul li.link_03 a:hover { background: url(../images/common/nav_cast_on.png) center top no-repeat; }
#article #nav ul li.link_04 a:hover { background: url(../images/common/nav_staff_on.png) center top no-repeat; }


/*-----------------------------
 contents
-------------------------------*/
body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* .clearfix */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility:hidden;
}
.clearfix { display: inline-block; } 
/* Hides from IE Mac \*/
* html .clearfix { height: 1%; }
.clearfix { display:block; }
/* End Hack */ 

#side #sp_rectangle { display: none; }
#wrapper { background: url(../images/common/bg_header.png) center -654px repeat-x; }

#article .contwrap {
	width: 605px;
	margin:0 auto 100px;
/*	padding: 0 35px;*/
}
#article .contwrap h2 {
	width: 605px;
	height: 51px;
	margin-bottom: 30px;
	background-position: left top;
	background-repeat: no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#article #movie h2 { background-image: url(../images/top/tit_movie.png); }
#article #intro h2 { background-image: url(../images/top/tit_intro.png); }
#article #staff h2 { background-image: url(../images/top/tit_staff.png); }
#article #storyCont h2 { background-image: url(../images/story/tit_story.png); }
#article #castCont h2 { background-image: url(../images/cast/tit_cast.png); }
#article #chartCont h2 { background-image: url(../images/cast/tit_chart.png); }


/*-----------------------------
  top
-------------------------------*/

/* #header */

#top #wrapper { background: url(../images/common/bg_header.png) center top repeat-x; }
#top #wrapper .bgwrap { background: url(../images/top/bg_gra.jpg) center top no-repeat; }
#top #wrapper .bgline { background: url(../images/top/bg_line.png) center bottom repeat-x; }
#top #main #top #header,#top  #header h1, #top #header .subtit, #top #header .daytime, #top #header .lead {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#top #main #header {
	width: 675px;
	height: 827px;
	background-color: #3b2720;
	position: relative;
	overflow: hidden;
	-webkit-animation: all 2s ease;
	-moz-animation: all 2s ease;
	-ms-animation: all 2s ease;
	animation: all 2s ease;
	animation-name: headerimg;
}
@keyframes headerimg {
	from { opacity: 0; }
	to { opacity: 1; }
}
#top #header .headerbg {
	width: 675px;
	height: 827px;
	background: url(../images/top/img_main.jpg) center top no-repeat;
	position: relative;
	-webkit-animation: all 12s ease;
	-moz-animation: all 12s ease;
	-ms-animation: all 12s ease;
	animation: all 12s ease;
	animation-name: headerbg;
}
@keyframes headerbg {
	from { opacity: 0; }
	to { opacity: 1; }
}
#top #main .mainimg {
	width: 652px;
	height: 470px;
	background: url(../images/top/img_pic.png) center top no-repeat;
	position: absolute;
	left: 0;
	bottom: 91px;
	z-index: 5;
	-webkit-animation: all 4s;
	-moz-animation: all 4s;
	-ms-transition: all 4s;
	animation: all 4s;
	animation-name: mainimg;
}
@keyframes mainimg {
	from { opacity: 0; }
	to { opacity: 1; }
}
#top #header .subtit {
	width: 328px;
	height: 23px;
	background: url(../images/top/tit_sub.png) center top no-repeat;
	position: absolute;
	top: 48px;
	left: 75px;
	z-index: 10;
	-webkit-animation: all 3s ease-in-out;
	-moz-animation: all 3s ease-in-out;
	-ms-animation: all 3s ease-in-out;
	animation: all 3s ease-in-out;
	animation-name: subtit;
}
@keyframes subtit {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
}
#top #header h1 {
	width: 530px;
	height: 160px;
	background: url(../images/top/tit_main.png) center top no-repeat;
	position: absolute;
	top: 85px;
	left: 74px;
	z-index: 10;
	-webkit-animation: all 3s ease-in-out;
	-moz-animation: all 3s ease-in-out;
	-ms-animation: all 3s ease-in-out;
	animation: all 3s ease-in-out;
	animation-name: maintit;
}
@keyframes maintit {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
}
#top #header .daytime {
	width: 675px;
	height: 92px;
	background: url(../images/top/img_daytime.png) center top no-repeat;
	position: absolute;
	bottom: 95px;
	left: 0;
	z-index: 10;
	-webkit-animation: all 3s ease-in;
	-moz-animation: all 3s ease-in;
	-ms-animation: all 3s ease-in;
	animation: all 3s ease-in;
	animation-name: daytime;
}
@keyframes daytime {
	0% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 1; }
}
#top #header .lead {
	width: 114px;
	height: 400px;
	background: url(../images/top/txt_lead.png) center top no-repeat;
	position: absolute;
	top: 232px;
	right: 30px;
	z-index: 20;
	-webkit-animation: all 6s ease-in-out;
	-moz-animation: all 6s ease-in-out;
	-ms-animation: all 6s ease-in-out;
	animation: all 6s ease-in-out;
	animation-name: lead;
}
@keyframes lead {
	0% { opacity: 0; }
	60% { opacity: 0; }
	100% { opacity: 1; }
}
#top #header .slbtn {
	width: 405px;
	height: 55px;
	background: #ffffff;
	position: absolute;
	left: 135px;
	bottom: 28px;
}
#top #header .slbtn a img {
	opacity: 1; 
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

#top #header .slbtn a:hover img { opacity: 0.5; }


/* #movie */
#article #movie .moviearea {
	width: 605px;
	height: 366px;
	background: url(../images/top/bg_movie.png) center top no-repeat;
	position: relative;
}
#article #movie .moviearea img {
	position: absolute;
	top: 27px;
	left: 26px;
}


/* #intro */
#article #intro {
	width: 100%;
	height: 1024px;
	background: url(../images/top/bg_intro.jpg) left bottom no-repeat;
	position: relative;
	margin-left: 35px;
}
#article #intro .introtxt {
	width: 586px;
	height: 682px;
	background: url(../images/top/txt_intro.png) center top no-repeat;
	position: absolute;
	top: 120px;
	left: 19px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}


/* #twitter */
#article #twitter {
	width: 605px;
	height: 382px;
	background: url(../images/top/bg_twitter.png) center bottom no-repeat;
	position: relative;
}
#article #twitter h2 {
	width: 605px;
	height: 81px;
	margin-bottom: 0;
	background: url(../images/top/tit_twitter.png) center top no-repeat;
}
#article #twitter .timeline {
	width: 540px;
	margin: 0 auto;
}
#article #twitter .twbtn a {
	width: 93px;
	height: 102px;
	background: url(../images/top/btn_follow_off.png) center top no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	opacity: 1;
	position: absolute;
	top: -5px;
	right: 65px;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}
#article #twitter .twbtn a:hover { background: url(../images/top/btn_follow_on.png) center top no-repeat; }


/* #setlist */
#article #setList.contwrap {
	width: 605px;
	margin-bottom: 80px;
	padding-bottom: 20px;
	background: url(../images/top/bg_shadow.jpg) center bottom no-repeat;
}
#article #setList h2 {
	width: 605px;
	height: 145px;
	margin-bottom: 0;
	background: url(../images/top/tit_setlist.png) center top no-repeat;
}
#article #setList dl {
	width: 100%;
	padding: 0 44px 22px;
	background: url(../images/top/bg_setlist.jpg) center top repeat-y;
}
#article #setList dl dd { display: none; }
#article #setList dl dd p.lead {
	padding: 16px 0 32px;
	text-align: center;
	font-size: 18px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#article #setList dl dd p.year {
	padding-bottom: 3px;
	color: #ec672d;
	font-weight: bold;
	border-bottom: solid 1px #ec672d;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 2px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-style: italic;
}
#article #setList dl dd ul {
	width: 547px;
	padding: 15px 0 20px 0;
}
#article #setList dl dd ul li {
	width: 238px;
	font-size: 15px;
	margin-bottom: 7px;
	padding-left: 1em;
	padding-right: 15px;
	text-indent: -1em;
	line-height: 1.6;
	float: left;
}
#article #setList dl dd li:last-child { padding-right: 0; }
#article #setList dl dd ul li:before {
	content: "●";
	color: #ec672d;
}
#article #setList dl dd ul.last { padding-bottom: 0; }
#article #setList dl dd ul li span {
	font-weight: bold;
	font-size: 17px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#article #setList dl dt {
	width: 205px;
	height: 70px;
	margin: 0 auto;
	background: url(../images/top/btn_slopen.png) center top no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	opacity: 1;
	cursor: pointer;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#article #setList dl dt:hover { opacity: 0.5; }
#article #setList dl dt.active {
	background: url(../images/top/btn_slclose.png) center top no-repeat;
}


/* #staff */
#article #staff .stafftxt {
	width: 32em;
	margin: 0 auto;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
}
#article #staff dt {
	width: 12em;
	text-align: right;
	float: left;
}
#article #staff dd {
	margin: 0;
	width: 19em;
	float: left;
}


/* .bnrarea */
#article .bnrarea {
	height: 90px;
	margin: 0 auto;
	text-align: center;
}


/*-----------------------------
 story
-------------------------------*/
#story #storyCont .mainimg  {
	width: 605px;
	height: 366px;
	margin-bottom: 8px;
	background: url(../images/story/img_01.jpg) center top no-repeat;
}
#story #storyCont .storytxt {
	font-size: 14px;
	line-height: 2.1;
}
#story #storyCont .storytxt p {
	margin-bottom: 20px;
	padding-top: 16px;
}
#story #storyCont .pic02,
#story #storyCont .pic03,
#story #storyCont .pic04 {
	width: 290px;
	height: 198px;
}
#story #storyCont .pic02 { background: url(../images/story/img_02.jpg) center top no-repeat; }
#story #storyCont .pic03 { background: url(../images/story/img_03.jpg) center top no-repeat; }
#story #storyCont .pic04 { background: url(../images/story/img_04.jpg) center top no-repeat; }
#story #storyCont .picleft {
	margin: 10px 20px 5px 0;
	float: left;
}
#story #storyCont .picright {
	margin: 10px 0 5px 10px;
	float: right;
}
#story #storyCont .pic05 {
	width: 605px;
	height: 241px;
	background: url(../images/story/img_05.jpg) center top no-repeat;
}


/*-----------------------------
 cast & chart
-------------------------------*/
/* #castCont */
#cast #castCont .castbox li {
	width: 605px;
	padding: 17px 0 20px;
	background: url(../images/cast/bg_line.png) center bottom no-repeat;
}
#cast #castCont .castbox li:first-child {
	padding-top: 0;
}
#cast #castCont .castbox li.twoline {
	padding-bottom: 23px;
	background: url(../images/cast/bg_twoline.png) center bottom no-repeat;
}
#cast #castCont .castbox .imgbox {
	width: 190px;
	margin: 0 17px 0 5px;
	float: left;
}
#cast #castCont .castbox .pic02,
#cast #castCont .castbox .pic03,
#cast #castCont .castbox .pic04,
#cast #castCont .castbox .pic05,
#cast #castCont .castbox .pic06 {
	width: 190px;
	height: 208px;
}
#cast #castCont .castbox .pic01 {
	width: 190px;
	height: 238px;
	background: url(../images/cast/img_01.jpg) center top no-repeat;
}
#cast #castCont .castbox .pic02 { background: url(../images/cast/img_02.jpg) center top no-repeat; }
#cast #castCont .castbox .pic03 { background: url(../images/cast/img_03.jpg) center top no-repeat; }
#cast #castCont .castbox .pic04 { background: url(../images/cast/img_04.jpg) center top no-repeat; }
#cast #castCont .castbox .pic05 { background: url(../images/cast/img_05.jpg) center top no-repeat; }
#cast #castCont .castbox .pic06 { background: url(../images/cast/img_06.jpg) center top no-repeat; }
#cast #castCont .castbox .detailbox {
	width: 371px;
	font-size: 14px;
	line-height: 1.8;
	float: left;
}
#cast #castCont .castbox .detailbox img { margin: 10px 0 5px; }
#cast #chartCont .chartimg {
	width: 605px;
	height: 1142px;
	background: url(../images/cast/img_chart.jpg) center top no-repeat;
}


/*-----------------------------
 pagetop
-------------------------------*/
.innerlink-head {
	width: 91px;
	height: 100px;
	position: fixed;
	right: 15%;
	bottom: 30px;
	display: none;
}
.innerlink-head a {
	width: 91px;
	height: 100px;
	background: url(../images/common/btn_pagetop.png) center top no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	opacity: 1;
	display: block;
}
.innerlink-head a:hover { opacity: 0.7; }