@charset "utf-8";

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

/*---------------------
wrapper block
---------------------*/
.block-wrapper {
  margin:0 auto;
  width:100%;
  height:100%;
  /*background:url(../img/color-white50.png);*/  

}

/*---------------------
contents
---------------------*/
.block-container{
	width:100%;
	height:661px;
	background: url(../img/header-bg.png) repeat-x;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	overflow:hidden;
	z-index:2;
}

.block-container:before{
	content:" ";
	display:block;
	background:url(../img/before-bg.png) repeat-x;
	width:100%;
	height:20px;
	position:absolute;
	top:0px;
	z-index:3;
}
.block-container:after{
	content:" ";
	background:url(../img/after-bg.png) repeat-x;
	width:100%;
	height:20px;
	position:absolute;
	bottom:0px;
	z-index:3;
}

#block-contents-container{
	width:980px;
	position:relative;
	margin:0px auto;
	top:0px;
	-webkit-transition: 1s ease-in-out;
       -moz-transition: 1s ease-in-out;
         -o-transition: 1s ease-in-out;
		-ms-transition: 1s ease-in-out;
            transition: 1s ease-in-out;
}

/*---------------------
navi
---------------------*/
.block-navi{
	width:220px;
	height:;
	position:absolute;
	top: 50px;
	right:20px;
	z-index:3;
}

.block-navi ul li a{
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:220px;
	height:100px;
	-webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
         -o-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
            transition: 0.2s linear;
}

#menu-about{
	background:url(../img/menu-about.png) no-repeat;
	margin:0 0px 20px 20px;
	opacity:1;
}
#menu-about:hover{
	margin:0 20px 20px 0px;
	opacity:0.8;
}

#menu-tracklist{
	background:url(../img/menu-tracklist.png) no-repeat;
	margin:0 0px 20px 20px;
	opacity:1;
}
#menu-tracklist:hover{
	margin:0 20px 20px 0px;
	opacity:0.8;
}
#menu-cast{
	background:url(../img/menu-cast.png) no-repeat;
	margin:0 0px 20px 20px;
	opacity:1;
}
#menu-cast:hover{
	margin:0 20px 20px 0px;
	opacity:0.8;
}
#menu-volumen{
	background:url(../img/menu-volumen.png) no-repeat;
	margin:0 0px 20px 20px;
	opacity:1;
}
#menu-volumen:hover{
	margin:0 20px 20px 0px;
	opacity:0.8;
}
#menu-top{
	background:url(../img/menu-logo.png) no-repeat;
	margin:0 0px 20px 20px;
	opacity:1;
}
#menu-top:hover{
	margin:0 20px 20px 0px;
	opacity:0.8;
}

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

.block-header div{
	display:block;
	width:400px;
	height:250px;
	background:url(../img/haguruma.png) no-repeat 100% 100%;
	position:absolute;
	bottom:5px;
	right:50px;
}

.block-header div h1{
	position:absolute;
	top:50px;
	left:0px;
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:400px;
	height:200px;
	background:url(../img/logo.png) no-repeat;
}

.block-header div p{
	position:absolute;
	bottom:9px;
	left:15px;	
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../img/top-catchcopy.png) no-repeat;
	width:270px;
	height:29px;
}

/*---------------------
about
---------------------*/
.block-about{
	background:url(../img/top2.png) no-repeat 0px 0px;
	width:980px;
	height:661px;
	position:relative;
	overflow:hidden;
	margin:0px auto;
}

.block-about h2{
	position:absolute;
	top:0px;
	left:50px;
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:300px;
	height:150px;
	background:url(../img/title-about.png) no-repeat;
}

.block-about div p:nth-of-type(1){
	position:absolute;
	top:170px;
	left:120px;
	line-height:1.8em;
	font-size:1.2em;
}

.block-about div p:nth-of-type(2){
	position:absolute;
	top:170px;
	left:500px;
}

/*---------------------
tracklist
---------------------*/
.block-tracklist{
	background:url(../img/top2.png) no-repeat 0px 0px;
	width:980px;
	height:661px;
	position:relative;
	overflow:hidden;
	margin:0px auto;
}

.block-tracklist h2{
	position:absolute;
	top:0px;
	left:50px;
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:300px;
	height:150px;
	background:url(../img/title-tracklist.png) no-repeat;
}

.block-tracklist ol{
	position:absolute;
	top:170px;
	left:200px;
	font-size:1.2em;
	background:url(../img/haguruma.png) bottom right no-repeat;
}

.block-tracklist ol li{
	width:500px;
	padding:5px 0 5px 0;
	position:relative;
	list-style:upper-roman;
	margin:0 0 10px 0;
	background:url(../img/tracklist-bg.png) bottom left no-repeat;
}

.block-tracklist ol li a{
	position:absolute;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	top:0;
	right:80px;
	width:30px;
	height:30px;
	background:url(../img/dl.png) no-repeat;
	opacity:1;
}

.block-tracklist ol li a:hover{
	opacity:0.7;
}


/*---------------------
cast
---------------------*/
.block-cast{
	background:url(../img/top2.png) no-repeat 0px 0px;
	width:980px;
	height:661px;
	position:relative;
	overflow:hidden;
	margin:0px auto;
}

.block-cast h2{
	position:absolute;
	top:0px;
	left:50px;
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	width:300px;
	height:150px;
	background:url(../img/title-cast.png) no-repeat;
}

.block-cast ul{
	position:absolute;
	top:170px;
	left:200px;
	font-size:1.2em;
	/*background:url(../img/haguruma.png) bottom right no-repeat;*/
}

.block-cast ul li{
	width:600px;
	height:30px;
	padding:5px 0 5px 0;
	position:relative;
	margin:0 0 15px 0;
	background:url(../img/tracklist-bg.png) bottom left no-repeat;
	font-weight:bold;
}

.block-cast ul li .position{
	position:absolute;
	top:5px;
	left:0;	
}

.block-cast ul li .circlename{
	position:absolute;
	top:5px;
	left:165px;
}

.block-cast ul li .twitter{
	position:absolute;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	display:block;
	width:50px;
	height:40px;
	top:0;
	right:40px;
	background:url(../img/twitter.png) bottom left no-repeat;
}
.block-cast ul li .twitter:hover{
	opacity:0.7;
}

.block-cast ul li .banner{
	position:absolute;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	top:0;
	right:100px;
	width:200px;
	height:40px;
}
.block-cast ul li .banner:hover{
	opacity:0.7;
}

#cast-emotionarhythm{
	background:url(../img/banner/emotionarhythm.png) no-repeat;
}

/*---------------------
footer
---------------------*/
#footer-block{
	width:100%;
	height:30px;
	position:fixed;
	bottom:0;
	background:url(../img/color-white50.png);
	color:#000;
	padding:0 20px;
}

#footer-block p a{
	display:block;
	width:150px;
	height:30px;
	position:absolute;
	top:0;
	right:50px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background:url(../img/footer-icon.png) no-repeat;
	opacity:0.8;
}
#footer-block p a:hover{
	opacity:1;
}