@charset "utf-8";

/* -------------------------
01 BASE
02 NAVIGATION
03 CONTENTS
 ∟	TOP
 ∟	SUB
------------------------- */


/* ------------------------- 01 BASE ------------------------- */
body {
	color:#000000;
	/*background-color:#1f1100;*/
}

body, html{
	width:100%; height:100%;
}



div#stage{
 	width:100%; height:100%;
	display:none;   
}


a {
	color:#000000;
	text-decoration:underline;
	outline:none;/*chrome枠線消去*/
	border: 0;
}
a img{
	border: 0;
}
a:link {
}
a:visited {
}
a:hover {
	
}
a:active {
}

a.active,
a.soon {
	cursor:default;
	outline:none;
}

.inner {
	width:980px;
	margin:0 auto;
	position:relative;
}

#headWrap {
	height:99px;
	background:url(../images/new/header_loop3.png) center top;
}
#header1 {
	height:60px;
	background:url(../images/new/header_loop1.png) center top;
}



h1 {
	position:absolute;
	top:10px;
	left:0;
}
h1 a {
	width:275px;
	height:60px;
	display:block;
}

#nav {
	position: absolute;
	top: 11px;
	left: 287px;
	width: 717px;
}
#nav li {
	float:left;
	margin-right:55px;
}
#nav li a {
	display:block;
	height:40px;
}
#nav li.nav1 a {
	width:61px;
	background-image:url(../images/new/nav1.png);
}
#nav li.nav2 a {
	width:178px;
	background-image:url(../images/new/nav2.png);
}
#nav li.nav3 a {
	width:67px;
	background-image:url(../images/new/nav3.png);
}
#nav li.nav4 a {
	width:90px;
	background-image:url(../images/new/nav4.png);
}
#nav li.nav5 a {
	width:62px;
	background-image:url(../images/new/nav5.png);
}
#nav li.nav6 a {
	width:74px;
	background-image:url(../images/new/nav6.png);
}
#nav li.nav6{
	margin-right: 0;
}
#nav li.nav5.soon a {
	width:62px;
	background-image:url(../images/new/nav5_soon.png);
	pointer-events:none;
}
#nav li a:hover,
#nav li a.active {
	background-position:0 bottom;
}




#nav2 {
	position:absolute;
	top:8px;
	left:0;
}
#nav2 li {
	float:left;
}

#nav2 li.nav7 {
	border:none;
}

#nav2 li a {
	display:block;
	height:20px;
	background-repeat:no-repeat;
}
#nav2 li.nav1 a {
	width:150px;
	background-image:url(../images/new/snav1.png);
}
#nav2 li.nav2 a {
	width:85px;
	background-image:url(../images/new/snav2.png);
}
#nav2 li.nav3 a {
	width:66px;
	background-image:url(../images/new/snav3.png);
}
#nav2 li.nav4 a {
	width:97px;
	background-image:url(../images/new/snav4.png);
}
#nav2 li.nav5 a {
	width:69px;
	background-image:url(../images/new/snav5.png);
}
#nav2 li.nav6 a {
	width:98px;
	background-image:url(../images/new/snav6.png);
}
#nav2 li.nav7 a {
	width:50px;
	background-image:url(../images/new/snav7.png);
}
#nav2 li a:hover,
#nav2 li a.active {
	background-position:0 bottom;
}

#nav2 li a.soon,
#nav2 li a.soon:hover {
	background-position:0 top;
	opacity:0.4;
}


#footer {
	width:100%;
	height:123px;
	background-color:#1f1100;
	padding-top:10px;
}

#loadshow {
	width:470px;
	height:78px;
	margin:0 auto;
	background:url(../images/new/loadshow.jpg) no-repeat 50px center;
}

#share {
	width:230px;
	margin:0 auto;
	clear:both;
}
#share td {
	padding-right:10px;
}



#main {
	text-align:center;
	position: relative;
}


#story .inner {
	min-height:800px;
}

#storyTex {
	width:967px;
	height:292px;
	background-image:url(../images/new/story_main.png);
	position:absolute;
	bottom:30px;
}


#intro .inner {
	min-height:800px;
}

#introTex1 {
	width:620px;
	height:212px;
	background-image:url(../images/new/intro_main.png);
	position:absolute;
	top:80px;
}
#introTex2 {
	width:967px;
	height:208px;
	background-image:url(../images/new/intro_main2.png);
	position:absolute;
	bottom:30px;
}


/*-- castPage staffPage ---*/

#staffPage #mainWrap{
	background:url(../images/new/bg.jpg) no-repeat center top;
	padding: 40px 0;
	background-size: 100% auto;
}

#castPage .main,
#staffPage .main{
	width: 960px;
	text-align: center;
	margin: 0 auto;
}


#castPage .main2 {
	width: 1024px;
	text-align: center;
	margin: 0 auto;
	padding: 0 0 50px;
}

#castList{
	overflow: hidden;
}
#castList li{
	float: left;
}
#castList2 li img:hover,
#castList li img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

#castList li.cast01{
	display: block;
	width:960px;
	margin: 0 auto;
	margin-bottom: 50px;
}
#castList li.cast02{
	margin-left: 150px;
}

#castList li.cast03{
	margin-left: 50px;
}


#castList li.castN01{
	display: block;
	width:1024px;
	margin: 0 auto;
	margin-bottom: 50px;
}

#castList2{
	overflow: hidden;
	width:980px;
	margin: 0 auto;
}

#castList2 li{
	float: left;
	height: 213px;
	margin-bottom: 20px;
}


#castList2 li.castN02,
#castList2 li.castN03,
#castList2 li.castN04,
#castList2 li.castN06,
#castList2 li.castN07,
#castList2 li.castN08,
#castList2 li.castN10,
#castList2 li.castN11,
#castList2 li.castN12,
#castList2 li.castN14{
	margin-right: 20px;
}
#castList2 li.castN05,
#castList2 li.castN09,
#castList2 li.castN13{
	margin-right: 0;
}

.pageTtl{
	margin-top: 50px;
	margin-bottom: 50px;

}
#staffList li{
	margin-bottom: 0;
}

#cBox {
	padding:50px 0 0;	
}

#cBox p {
	padding:0 0 20px;	
}



/*-- pronoPag ---*/

#pronoPage #mainWrap{
	padding: 40px 0;
	background-size: 100% auto;
}

#pronoPage .main{
	width: 1024px;
	text-align: center;
	margin: 0 auto;
}

#pronoPage #wrap{
	padding:70px 0;
}

#pronoPage #pronoBox{
	width: 1024px;
	background:url(../images/new/prono_middlebg.png) 0 0 repeat-y;
}

#pronoPage #pronoBox .inner{
	text-align:left;
	padding:0 0 30px 42px;
}

#pronoPage #pronoBox h4{
	padding:25px 0 10px;
}

#pronoPage #pronoBox p{
	font-size:15px;
	line-height:1.5em;
	padding:0 25px 0 0;
}

#pronoPage .left {
	width:549px;
	float:left;
}

#pronoPage .right {
	width:411px;
	float:left;
}


/*-- charaPage ---*/

#charaPage #mainWrap{
	padding: 40px 0;
	background-size: 100% auto;
}

#charaPage .main{
	width: 960px;
	text-align: center;
	margin: 0 auto;
}

#charaList{
	overflow: hidden;
}
#charaList li{
	float: left;
}
#charaList li img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

#charaList li.chara01,
#charaList li.chara02{
	margin-right: 0;
}
#charaList li.chara03{
	margin-right: 0;
}


/*-- interviewPage ---*/

#interviewPage #mainWrap{
	padding: 40px 0;
	background-size: 100% auto;
}

#interviewPage .main{
	width: 1025px;
	text-align: center;
	margin: 0 auto;
}

#interviewList{
	overflow: hidden;
	padding: 30px 0 0;
}
#interviewList li{
	float: left;
}
#interviewList li img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

#interviewList li.int01{
	margin-left: 120px;
}

#interviewList li.int02,
#interviewList li.int03,
#interviewList li.int04{
	margin-right: 0;
}


#interviewPage #intBox {
	text-align:left;
	font-size:14px;
	line-height:1.5em;
	padding:30px 0;
}


#interviewPage .left {
	width:728px;
	float:left;
}

#interviewPage .right {
	width:297px;
	float:left;
}


#interviewPage .left2 {
	width:564px;
	float:left;
}

#interviewPage .right2 {
	width:460px;
	float:left;
}

#interviewPage #intBox p {
	padding:0 0 30px 33px;
}

#interviewPage #intBox .end {
	text-align:right;
}

#intBox .btn {
	text-align:right;
}

#intBox .btn img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}


#intBox .btn2 {
	text-align:left;
}

#intBox .btn2 img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

#intBox .btn22 {
	text-align:left;
	margin:0 0 0 30px;
}

/*-- musicPage ---*/

#musicPage #mainWrap{
	padding: 40px 0;
	background-size: 100% auto;
}

#musicPage .main{
	width: 1025px;
	text-align: center;
	margin: 0 auto;
}


/*-- -TOP(OPENING) ---*/

div#op{
	width:100%; height: 100%;
	background: #fff url(../images/new/op_bg.jpg) no-repeat 50% 0;
	background-size: cover;
	position: relative;
	display:none;
}

div#op ul#catchCopy{
	width:232px;
	margin: 95px auto 0 auto;
	position: relative;
}

div#op ul#catchCopy li{
	position: absolute;
	top:0;
	display:none;
}

div#op ul#catchCopy li#copy1{
	left:144px;
}

div#op ul#catchCopy li#copy2{
	left:88px;
}



div#op p#skip{
	width:980px;
	margin: 0 auto;
	text-align: right;
	padding-top:10px;
}



/*-- -TOP ---*/

#topHero{
	width:100%;
	min-height: 907px;
	background: url(../images/new/hero_bg.jpg) no-repeat 50% 0;
	text-align: center;
}





#topPage .main{
	text-align: left;
	margin: 0 auto;
	position: relative;
	width: 1024px;
	padding: 15px 0 0 0;
}
#topPage .fbBtn{
	position: absolute;
	right: 0;
	bottom: 125px;
}
#topPage .twBtn{
	position: absolute;
	right: 0;
	bottom: 92px;
}
#topPage .tbBtn{
	position: absolute;
	right: 0;
	bottom: 405px;
}

#topPage .cpBtn{
	position: absolute;
	right: 390px;
	bottom: 405px;
}
#topPage .spBtn{
	position: absolute;
	right: 160px;
	bottom: 405px;
}
#topPage .spBtn02{
	position: absolute;
	right: 370px;
	bottom: 413px;
}

#topPage #mainWrap{
	background: #efece6 url(../images/new/top_bg.jpg) no-repeat center top;
	padding: 0 0 0 0;
	background-size: 100% auto;
	position: relative;
	min-height: 910px;
}
#topPage #footer{
	padding: 20px 0 !important;
}
#topPage .ft_txt{
	text-align: center;
}
#topPage #share {
	width:230px;
	margin:0 auto;
	clear:both;
	position: relative !important;
	top: 0;
	left:inherit;
	margin-bottom: 20px;
}
#topPage .snsfb{
	position: relative !important;
	top: 0;
	left:inherit;
	margin-bottom: 0!important;
}
#topPage #share td {
	padding-right:10px;
}



/* float clear
--------------------------------------------------*/
.resetcol:after {
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
	}

/*\*//*/
.resetcol {
	display:inline-table;
	width:100%;
	}
/**/

/*\*/
* html .resetcol {
	height:1%;
	}

.resetcol {
	display:block;
	}
/**/.charaimg img {
	display: none;
}


/*----------------

commentary

----------------*/

#commentaryPage{
	text-align: left;
	margin:80px 0;
	color: #020202;
	font-size: 14px;
}
#commentaryPage .name{
	margin-bottom: 50px;
}
#commentaryPage .txtBox{
	margin-bottom: 50px;
}
#commentaryPage .txtBox p{
	text-indent: 1em;
	line-height: 1.8em;
	margin-bottom: 10px;
}
#commentaryPage .txtBox p.subTtl{
	text-indent: 0;
	font-weight: bold;
}
#commentaryPage .photoBox{
	overflow: hidden;
}
#commentaryPage .photoBox img{
	float: left;
	margin-right: 50px;
}
#commentaryPage .photoBox p{
	float: left;
	line-height: 1.8em;
}

.commentaryBtn{
	overflow: hidden;
}
.commentaryBtn img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.commentaryBtn .prevBtn{
	float: left;
}
.commentaryBtn .nextBtn{
	float: right;
}
/*----------------

commentary

----------------*/

#triviaPage #mainWrap{
	padding: 0 0;
	background-size: 100% auto;
}

#triviaPage .main{
	width: 1000px;
	padding: 60px 80px; 
	text-align: center;
	margin: 0 auto;
	background: url(../images/trivia/trivia_txt_bg.png) repeat-y center;
}
#triviaPage .subTtl{
	font-weight: bold;
	color: #ff000c;
	text-align: center;
	background: url(../images/trivia/sttl_bg.png) no-repeat center;
	padding: 30px 0;
	font-size: 18px;
}
#triviaPage .subTtl2{
	font-weight: bold;
	color: #ff000c;
	text-align: center;
	background: url(../images/trivia/sttl_bg2.png) no-repeat center;
	padding: 30px 0;
	font-size: 18px;
	line-height: 1.3em !important;
}
#triviaPage .txtBoxWrap{
	overflow: hidden;
	margin-bottom: 30px;
}
#triviaPage .txtBoxWrap a{
	text-decoration: none;
}
#triviaPage .txtBoxWrap img{
	float: right;
}
#triviaPage .txtBox{
	width: 505px;
	float:left;
	font-weight: bold;
}
#triviaPage .txtBox.long{
	width: 100%;
	font-weight: bold;
}
#triviaPage .txtBox.long .subTtl{
	width: 505px;
	font-size: 18px !important;
}
#triviaPage .txtBox p{
	text-indent: 0;
	line-height: 1.8em;
	margin-top: 20px;
}
#triviaPage .pageTtl{
	text-align: left;
	margin: 0 0 60px 0;
}
#triviaPage #btnArea{
	text-align: center;
}

#triviaPage #btnArea img{
	margin-bottom: 50px;

}
#triviaPage #btnArea img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.soon{
	pointer-events:none;
}

/*----------------

協賛企業(TOP)

----------------*/
#topPage #footer{
	text-align: center;
	padding-bottom: 50px !important;
}
#topPage #compnyList{
	margin: 20px auto 0 auto;
}
#topPage #compnyList li{
	display: inline;
	padding: 0 10px;
}
#topPage #compnyList li img{
	margin: 0 10px;
}

/*-----------------

special
nav

------------------*/

#nav3 {
	position:absolute;
	top:8px;
	left:50%;
	margin-left: -100px;
}
#nav3 li {
	float:left;
	margin-right: 20px;
}

#nav3 li.nav2 {
	border:none;
}

#nav3 li a {
	display:block;
	height:20px;
	background-repeat:no-repeat;
}
#nav3 li.nav1 a {
	width:75px;
	background-image:url(../images/new/snav1.png);
}
#nav3 li.nav2 a {
	width:44px;
	background-image:url(../images/new/snav2.png);
}

.phBox{
	float: right;
	width: 443px;
}
.phBox img{
	float: left;
}
.phBox p{
	float: left;
	width: 420px;
	text-align: right;
}

/*----------------------

galleryArea

----------------------*/
#galleryArea{
	padding: 20px;
}
#galleryArea ul{
	overflow: hidden;
}
#galleryArea ul li{
	float: left;
}
#galleryArea ul li img{
	margin: 10px;
}
#galleryArea ul li img:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}


/*-----------------

special snav

-----------------*/
#nav .nav6{
	width: 74px;
}
#nav .nav6 a:hover{
	cursor: pointer !important;
}
#navS{
	display: none;	
	position: absolute;
	top: 40px;
	padding-top: 10px;
	z-index: 100;
	width: 74px;
}
#navS li{
	display: block;
}
#navS li a{
	background-color:rgba(255,255,255,0.90);
	background-color: #FFFFFF\9;
	display: inline-block;
	width: 54px !important;
	line-height: 1em;
	background-image: none !important;
	text-align: center;
	padding: 10px 20px !important;
	text-decoration: none;
	height: 15px;
}
#navS li a:hover{
	background-color:rgba(255,107,19,0.90);
	color: #FFFFFF;
}
/*-----------------

special snav(TOP)

-----------------*/
.hnav .hnav5 a{
	width: 74px !important;
}
.hnav .hnav5 li a{
	width: 74px !important;
}
.hnav .hnav5 a:hover{
	cursor: pointer !important;
}
.hnav .hnav5 li{
	margin: 0  !important;
	clear: left;
	height: 35px;
}
.hnav .hnav5 #navS li a{
	padding: 10px 20px !important;
}