@charset "utf-8";

/*------------------------------------------
common div blocks Cascading Style Sheets
------------------------------------------*/

/*---------------------
wrapper block
---------------------*/
.block-wrapper {
  margin:0 auto;
  width:980px;
  background:url(../img/color-white50.png);  
  position:relative;
}

/*---------------------
header block
---------------------*/
.block-header{
	background:url(../img/top.jpg) no-repeat 0px 0px;
	width:980px;
	height:787px;
	position:relative;
	overflow:hidden;
}

.block-header h1,
.block-header h2,
.block-header ul li a{
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#title-h1{
	position:absolute;
	background:url(../img/logo.png) no-repeat 0px 0px;
	width:614px;
	height:165px;
	top:6px;
	left:20px;
	z-index:11;
    -webkit-transition: 0.6s linear;
       -moz-transition: 0.6s linear;
         -o-transition: 0.6s linear;
		-ms-transition: 0.6s linear;
            transition: 0.6s linear;
}

#title-h2{
	position:absolute;
	background:url(../img/release.png) no-repeat 0px 0px;
	width:627px;
	height:39px;
	top:720px;
	right:11px;
	z-index:11;
	opacity:1;
    -webkit-transition: 0.6s linear;
       -moz-transition: 0.6s linear;
         -o-transition: 0.6s linear;
		-ms-transition: 0.6s linear;
            transition: 0.6s linear;
}

.block-header h3{
	display:block;
	padding:0 10px 0 5px;
	position:absolute;
	top:690px;
	right:11px;
	font-size:1.5em;
	color:#287995;
	z-index:11;
	background:#c78311;
	border-radius:10px;
	opacity:0.85;
}

.block-header h4{
	display:block;
	padding:0 10px 0 5px;
	position:absolute;
	top:660px;
	right:240px;
	font-size:1.4em;
	z-index:11;
	background:#c78311;
	border-radius:10px;
	opacity:0.85;
}

/*---------------------
header menu
---------------------*/
.block-header ul{
	display:block;
}

.block-header ul li a{
	display:block;
	width:245px;
	height:60px;
	position:absolute;
	z-index:10;
    -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
            transition: 0.2s linear;
}
/*-----------
arrow
-----------*/
.block-header ul li a + span{
	display:block;
	position:absolute;
	width:50px;
	height:60px;
	opacity:0;
	z-index:10;
    -webkit-transition: 0.3s linear;
       -moz-transition: 0.3s linear;
         -o-transition: 0.3s linear;
		-ms-transition: 0.3s linear;
            transition: 0.3s linear;
}
#header-arrow2,
#header-arrow4{
	background:url(../img/menu-arrow1.png) no-repeat;
}
#header-arrow1,
#header-arrow3{
	background:url(../img/menu-arrow2.png) no-repeat;
}
.block-header ul li a:hover + span{
	opacity:1;
}

/*-----------
menu
-----------*/
#header-a-concept{
	background:url(../img/menu-concept.png) no-repeat;
	top:250px;
	left:60px;
	opacity:0.8;
}
#header-a-concept:hover{
	opacity:1;
}

#header-arrow1{
	top:250px;
	left:305px;
}

#header-a-information{
	background:url(../img/menu-information.png) no-repeat;
	top:320px;
	left:60px;
	opacity:0.8;
}
#header-a-information:hover{
	opacity:1;
}
#header-arrow2{
	top:320px;
	left:305px;
}

#header-a-tracklist{
	background:url(../img/menu-tracklist.png) no-repeat;
	top:390px;
	left:60px;
	opacity:0.8;
}
#header-a-tracklist:hover{
	opacity:1;
}
#header-arrow3{
	top:390px;
	left:305px;
}

#header-a-cast{
	background:url(../img/menu-cast.png) no-repeat;
	top:460px;
	left:60px;
	opacity:0.8;
}
#header-a-cast:hover{
	opacity:1;
}
#header-arrow4{
	top:460px;
	left:305px;
}

#header-a-close{
	top:-105px;
	right:5px;
	width:100px;
	height:100px;
	background:url(../img/close.png) no-repeat 50% 50%;
	background-size:contain;
	opacity:0.8;
}
#header-a-close:hover{
	opacity:1;
	width:110px;
	height:110px;
}

#header-a-prev{
	top:705px;
	left:60px;
	width:270px;
	height:75px;
	background:#fff;
	opacity:1;
	background:url(../img/banner/banner-prev.png) no-repeat;
	
}
#header-a-prev:hover{
	opacity:0.7;
}

/*---------------------
contents common
---------------------*/
#contents-block{
	z-index:9;
	display:block;
	width:100%;
	height:787px;
	background:url(../img/top2.jpg)  no-repeat 0px 0px;
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	overflow:hidden;
    -webkit-transition: 0.8s linear;
       -moz-transition: 0.8s linear;
         -o-transition: 0.8s linear;
		-ms-transition: 0.8s linear;
            transition: 0.8s linear;
}

#contents-block h3{
	display:block;
	width:245px;
	height:60px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:0 0 30px 0;
}

/*-----------
concept
-----------*/
#concept-block{
	display:block;
	position:absolute;
	top:220px;
	left:980px;
	width:800px;
	line-height:1.8em;
	font-size:1.5em;
	text-shadow: 5px 5px 2px #222;
	font-weight:bold;
    -webkit-transition: 0.5s linear;
       -moz-transition: 0.5s linear;
         -o-transition: 0.5s linear;
		-ms-transition: 0.5s linear;
            transition: 0.5s linear;
}

#concept-block h3{
	background:url(../img/menu-concept.png) no-repeat;	
}

/*-----------
information
-----------*/
#information-block{
	display:block;
	position:absolute;
	top:220px;
	left:-980px;
	width:800px;
	line-height:2.3em;
	font-size:1.5em;
	text-shadow: 5px 5px 2px #222;
	font-weight:bold;
    -webkit-transition: 0.5s linear;
       -moz-transition: 0.5s linear;
         -o-transition: 0.5s linear;
		-ms-transition: 0.5s linear;
            transition: 0.5s linear;
}

#information-block h3{
	background:url(../img/menu-information.png) no-repeat;	
}

#information-block p img{
	position:absolute;
	top:70px;
	right:150px;
	width:200px;
	height:200px;
}
/*-----------
tracklist
-----------*/
#tracklist-block{
	display:block;
	position:absolute;
	top:-787px;
	left:100px;
	width:880px;
	line-height:1em;
	text-shadow: 5px 5px 2px #222;
    -webkit-transition: 0.5s linear;
       -moz-transition: 0.5s linear;
         -o-transition: 0.5s linear;
		-ms-transition: 0.5s linear;
            transition: 0.5s linear;
}

#tracklist-block h3{
	background:url(../img/menu-tracklist.png) no-repeat;
}

#tracklist-block ol li{
	width:400px;
	height:30px;
	margin:10px 20px;
	position:relative;
	float:left;
	background:url(../img/bg-tracklist.png) no-repeat;
	text-indent:30px;
	list-style:decimal outside;
	font-weight:bold;
}

#tracklist-block ol li a{
	display:block;
	width:30px;
	height:30px;
	position:absolute;
	right:0px;
	top:0px;
	background:url(../img/dl.png) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	opacity:0.7;
    -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
            transition: 0.2s linear;	
}
#tracklist-block ol li a:hover{
	opacity:1;
}

#tracklist-block ol li dt{
	font-size:1.5em;
}

#tracklist-block ol li dd{
	margin:5px 0 0 20px;
	font-size:1.2em;
	text-shadow: 2px -2px 2px #222;
}

#tracklist-block iframe{
	margin:10px 0 0 50px;
}

/*-----------
cast
-----------*/
#cast-block{
	display:block;
	position:absolute;
	top:800px;
	left:100px;
	width:880px;
	line-height:1.2em;
	text-shadow: 5px 5px 2px #222;
    -webkit-transition: 0.5s linear;
       -moz-transition: 0.5s linear;
         -o-transition: 0.5s linear;
		-ms-transition: 0.5s linear;
            transition: 0.5s linear;
}

#cast-block h3{
	background:url(../img/menu-cast.png) no-repeat;
}

#cast-block ol li{
	width:400px;
	height:45px;
	margin:5px 20px;
	position:relative;
	float:left;
	background:url(../img/bg-cast.png) no-repeat 100% 100%;
	font-size:1.2em;
	font-weight:bold;
}

.cast-block-banner{
	display:block;
	position:absolute;
	width:200px;
	height:40px;
	top:10px;
	left:0px;
	opacity:1;
    -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
            transition: 0.2s linear;
}
.cast-block-banner:hover{
	opacity:0.7;
}

#cast-block ol li p{
	display:block;
	position:absolute;
	top:18px;
	left:210px;
}

.cast-block-twitter{
	display:block;
	position:absolute;
	top:13px;
	right:0px;
	width:40px;
	height:40px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../img/twitter-icon.png) no-repeat;
	opacity:0.7;
    -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
            transition: 0.2s linear;
}
.cast-block-twitter:hover{
	opacity:1;
	right:5px;
}



/*---------------------
footer
---------------------*/
#footer-block{
	width:100%;
	margin:30px 0 0 0;
	padding:0 0 30px 0;
	text-align:center;
	line-height:1.5px;
	font-size:1.2em;
	color:#000;
	font-weight:bold;
}