@charset "UTF-8";
/* #header */
body#top #header {
	width: 1000px;
	padding-top:10px;
	position: relative;
	background-color: #000;
	height: 630px;
}
body#top #header p ,#header h1,#header #btn-sbm{
	font-size: 0%;
	position: relative;
}
body#top #header p{
	position: absolute;
}
body#top #header div.photo_01{
	position: absolute;
	left: 0px;
	top: 10px;
}
body#top #header div.photo_02{
		position: absolute;
	left: 0px;
	top: 500px;
}
body#top #header div.photo_03{
		position: absolute;
	left: 229px;
	top: 500px;
}
body#top #header p.txt_01{
	left: 502px;
	top: 15px;
}
body#top #header p.txt_02{
	left: 638px;
	top: 59px;
}
body#top #header h1.logo{
	position: absolute;
	left: 510px;
	top: 87px;
}
body#top #header p.txt_07{
	left: 518px;
	top: 498px;
	z-index: 2;
}
body#top #header p.txt_03{
	left: 496px;
	top: 569px;
	z-index: 2;
}
body#top #header p.txt_04{
	left: 478px;
	top: 595px;
	z-index: 2;
}
body#top #header div.item_01{
	left: 885px;
	top: 215px;
	background-image: url(../images/top/header_item_01.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 360px;
	width: 101px;
	position: absolute;
}
body#top #header p.item_02{
	left: 36px;
	top: 34px;
}
body#top #header p.txt_05{
	left: 0px;
	top: 392px;
}
body#top #header p.txt_06{
	left: 108px;
	top: 449px;
}
body#top #header div.photo_01{
    width: 459px;
    height: 491px;
}
body#top #header div.photo_01 .wrap {
    width: 459px;
    height: 491px;
    margin: 0 auto;
    -webkit-perspective: 1000;
    perspective: 1000;
}
body#top #header div.photo_01 .inner {
    position: relative;
	transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
	animation: animation01 0.25s ease 1s both;
	-webkit-animation: animation01 0.25s ease 1s both;
}
@keyframes animation01 {
	from {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	}
	to {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);
		}
}
@-webkit-keyframes animation01 {
	from {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	}
	to {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);
		}
}
body#top #header div.photo_01 .front,
body#top #header div.photo_01 .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 459px;
    height: 491px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
body#top #header div.photo_01 .front {
}
body#top #header div.photo_01 .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);

}

body#top #header div.photo_02{
    width: 229px;
    height: 115px;
}
body#top #header div.photo_02 .wrap {
    width: 229px;
    height: 115px;
    margin: 0 auto;
    -webkit-perspective: 1000;
    perspective: 1000;
}
body#top #header div.photo_02 .inner {
    position: relative;
    -webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	animation: animation02  0.25s ease 1.1s both;
	-webkit-animation: animation02  0.25s ease 1.1s both;
}
@keyframes animation02 {
	from {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	}
	to {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);
		}
}
@-webkit-keyframes animation02 {
	from {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	}
	to {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);
		}
}
body#top #header div.photo_02 .front,
body#top #header div.photo_02 .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 229px;
    height: 115px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
body#top #header div.photo_02 .front {
}
body#top #header div.photo_02 .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);

}

body#top #header div.photo_03{
    width: 230px;
    height: 115px;
}
body#top #header div.photo_03 .wrap {
    width: 229px;
    height: 115px;
    margin: 0 auto;
    -webkit-perspective: 1000;
    perspective: 1000;
}
body#top #header div.photo_03 .inner {
    position: relative;
    -webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	animation: animation03 0.25s ease 1.2s both;
	-webkit-animation: animation03 0.25s ease 1.2s both;
}
@keyframes animation03 {
	from {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	}
	to {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);
		}
}
@-webkit-keyframes animation03 {
	from {
	-webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);	}
	to {
	-webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);
		}
}

body#top #header div.photo_03 .front,
body#top #header div.photo_03 .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 230px;
    height: 115px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
body#top #header div.photo_03 .front {
}
body#top #header div.photo_03 .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
	-ms-transform: rotateY(0deg);

}
body#top #header p.txt_05{
	animation: animation04 0.2s ease 1.5s both;
	-webkit-animation: animation04 0.2s ease 1.5s both;
	transform: scale(0, 0);
}
body#top #header p.txt_06{
	animation: animation04 0.2s ease 1.6s both;
	-webkit-animation: animation04 0.2s ease 1.6s both;
	transform: scale(0, 0);
}

@keyframes animation04 {
  0%   { transform: scale(0, 0); }
  1%   { transform: scale(20, 20); }
  99%  { transform: scale(0.7, 0.7); }
  100%  { transform: scale(1, 1); }
}
@-webkit-keyframes animation04 {
  0%   { -webkit-transform: scale(0, 0); }
  1%   { -webkit-transform: scale(20, 20); }
  99%  { -webkit-transform: scale(0.7, 0.7); }
  100%  { -webkit-transform: scale(1, 1); }
}
body#top #header h1.logo{
	animation: animation05 0.25s ease 2s both;
	-webkit-animation: animation05 0.25s ease 2s both;
	transform: scale(0, 0);
}

@keyframes animation05 {
  0%   { transform: scale(0, 0); }
  1%   { transform: scale(50, 50); }
  99%  { transform: scale(0.5, 0.5); }
  100%  { transform: scale(1, 1); }
}
@-webkit-keyframes animation05 {
  0%   { -webkit-transform: scale(0, 0); }
  1%   { -webkit-transform: scale(50, 50); }
  99%  { -webkit-transform: scale(0.5, 0.5); }
  100%  { -webkit-transform: scale(1, 1); }
}
body#top #header div.item_01{
	animation: animation06 0.5s ease 2.1s both;
	-webkit-animation: animation06 0.5s ease 2.1s both;
	transform:  translate(300px, 0px); 
	-webkit-transform:  translate(300px, 0px);

}
@keyframes animation06 { 
  0%   {  opacity: 0; transform:translate(300px, 0px);     } 
  25%   { transform: translate(300px, 0px); }
  75%   { opacity: 1; transform:translate(-20px, 0px);   }
  100%  { transform:translate(0px, 0px);   } 
} 
@-webkit-keyframes animation06 { 
  0%   { opacity:0; -webkit-transform:translate(300px, 0px);    } 
  25%   { -webkit-transform:translate(300px, 0px);   }
  75%   {  opacity:1; -webkit-transform:  translate(-20px, 0px);   }
  100%  { -webkit-transform:translate(0px, 0px);   } 
} 

/* SNSボタン */
body#top #btn-sbm {
	text-align: right;
	padding: 20px 0px 20px 0px;
	position: absolute;
	right: 0px;
	top: 620px;
	background-color: #000;
	width: 325px;
}

body#top #btn-sbm li {
	display: inline-block;
	margin-left: 0px;
	margin-right: 5px;
	padding: 0px;
	line-height: normal;
	list-style: none;
	vertical-align: top;
}

body#top #btn-sbm li a { margin: 0px; }

body#top #btn-sbm .btnFaceBook { width: 110px; }

body#top #btn-sbm .btnHatenaBookmark { margin-right: 10px; }

/* #block_cd */
body#top #main #article #block_cd{
	margin-bottom:20px;
}
body#top #main #article #block_cd .box{
	background-image: url(../images/top/cd_bg_01.png);
	width: 615px;
	background-repeat: repeat;
	background-position: center top;
	padding-right: 30px;
	padding-left: 30px;
	margin-top: -1px;
}
body#top #main #article #block_cd{
	background-image: url(../images/top/cd_bg_02.png);
	width: 675px;
	background-repeat: repeat;
	background-position: center bottom;
	padding-bottom: 30px;
	background-repeat: no-repeat;
}
body#top #main #article #block_cd #playercover{
	width: 615px;
	padding-bottom:20px;
}

body#top #main #article #block_cd #cd2{
	display: block;
	overflow: hidden;
	background-image: url(../images/top/cd_txt_01.png);
	background-repeat: no-repeat;
	padding-left: 160px;
	background-position:0px 15px;
	padding-bottom:20px;
	margin-left:5px;
} 
body#top #main #article #block_cd #cd2 span.num01 {
	display: block;
	float: left;
	width: 32px;
	height: 50px;
	background: url(../images/top/cd_num_03.png) no-repeat 0px 0px;
	padding: 1px;
	margin: 1px;
	border-radius: 1px;        /* CSS3草案 */  
    -webkit-border-radius: 1px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 1px; 

} 

body#top #main #article #block_cd #cd2 span.image0 {background-color: #FFF; background-position: 0px 0px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.image1 {background-color: #FFF; background-position: 0px -50px;	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
 } 
body#top #main #article #block_cd #cd2 span.image2 {background-color: #FFF; background-position: 0px -100px;	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
 } 
body#top #main #article #block_cd #cd2 span.image3 {background-color: #FFF; background-position: 0px -150px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.image4 {background-color: #FFF; background-position: 0px -200px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.image5 {background-color: #FFF; background-position: 0px -250px;	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
 } 
body#top #main #article #block_cd #cd2 span.image6 {background-color: #FFF; background-position: 0px -300px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.image7 {background-color: #FFF; background-position: 0px -350px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.image8 {background-color: #FFF; background-position: 0px -400px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.image9 {background-color: #FFF; background-position: 0px -450px; 	box-shadow: 0 1px 0 rgba(000,000,000,0.5);
} 
body#top #main #article #block_cd #cd2 span.days { background-position: 0px -500px; width: 90px; margin-left:5px;} 
body#top #main #article #block_cd #cd2 span.hours { background-position: 0px -550px;  width: 20px; margin-left:5px;}  
body#top #main #article #block_cd #cd2 span.minutes { background-position: 0px -600px;  width: 20px; margin-left:5px;}  
body#top #main #article #block_cd #cd2 span.seconds {
	background-position: 0px -700px;
	width: 20px;
	margin-left:5px;
	display: none;
}  
/* #block_pr */
body#top #main #article #block_pr .box{
	background-image: url(../images/top/pr_bg_01.png);
	width: 615px;
	background-repeat: repeat;
	background-position: center top;
	padding-right: 30px;
	padding-left: 30px;
}
body#top #main #article #block_pr{
	background-image: url(../images/top/pr_bg_02.png);
	width: 675px;
	background-repeat: repeat;
	background-position: center bottom;
	padding-bottom: 30px;
	background-repeat: no-repeat;
}
body#top #main #article #block_pr #playercover{
	width: 615px;
	padding-bottom:20px;
}
body#top #main #article #block_pr #playercover_02{
	width: 615px;
	padding-bottom:20px;
}


/* #nav */
body#top #nav {
	height: 670px;
	position: relative;
	z-index: 1;
	background-image: url(../images/top/nav_bg_01.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: 20px;
	margin-bottom: 20px;
}
body#top #nav ul li {
}
body#top #nav ul li#link-project {
	position: absolute;
	left: 5px;
	top: 35px;
	z-index: 2;
}
body#top #nav ul li#link-chart {
	position: absolute;
	left: 5px;
	top: 245px;
	z-index: 2;
}
body#top #nav ul li#link-story{
	position: absolute;
	left: 190px;
	top: 247px;
	z-index: 2;
}
body#top #nav ul li#link-caststaff{
	position: absolute;
	left: 190px;
	top: 398px;
	z-index: 2;
}
body#top #nav ul li#link-music{
	position: absolute;
	left: 5px;
	top: 550px;
	z-index: 2;
}
body#top #nav ul li a,
body#top #nav ul li span {
	display: block;
	text-decoration: none;
}

/* #bnr */
body#top #bnr {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;	
}
body#top #bnr p.bnr_01{
	display: block;
	height: 97px;
	width: 334px;
	float: left;
	margin-right: 5px;
}
body#top #bnr p.bnr_02{
	display: block;
	height: 97px;
	width: 334px;
	float: left;
}
body#top #bnr p.bnr_01 a{
	display: block;
	height: 97px;
	width: 334px;
	background-image: url(../images/top/wowow_btn_01.png);
	background-position: 0px 0px;
	text-indent: -9999px;
	float: left;
}
body#top #bnr p.bnr_02 a{
	display: block;
	height: 97px;
	width: 334px;
	background-image: url(../images/top/hulu_btn_01.png);
	background-position: 0px 0px;
	text-indent: -9999px;
}

/* #bnr */
body#top #bnr_02 {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	overflow: hidden;	
}
/* #bnr_03 */
body#top #bnr_03 {
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;	
}
body#top #bnr_03 p.bnr_01{
	display: block;
	width: 334px;
	float: left;
	margin-right: 5px;
}
body#top #bnr_03 p.bnr_02{
	display: block;
	width: 334px;
	float: left;
}

/* #block_wn */
body#top #main #article #block_wn .box{
	background-image: url(../images/top/wn_bg_01.png);
	width: 615px;
	background-repeat: repeat;
	background-position: center top;
	padding-right: 30px;
	padding-left: 30px;
}
body#top #main #article #block_wn{
	background-image: url(../images/top/wn_bg_02.png);
	width: 675px;
	background-]repeat: repeat;
	background-position: center bottom;
	padding-bottom: 20px;
	background-repeat: no-repeat;
	margin-bottom: 20px;
}
body#top #main #article #block_wn ul{
	padding-bottom: 15px;
}
body#top #main #article #block_wn ul li{
	display: block;
	padding: 5px;
	margin-bottom: 20px;
	background-color: #000;
}
body#top #main #article #block_wn ul li.rotate_01{
	transform: rotate(2deg);
}
body#top #main #article #block_wn ul li.rotate_02{
	transform: rotate(-2deg);
}
body#top #main #article #block_wn ul li span.date{
	padding-right: 10px;
}


/* #block_twt */
body#top #main #article #block_twt .timeline{
	width:600px;
	margin:0 auto;
	background-color: #000;
	padding: 5px;
}
body#top #main #article #block_twt .box{
	background-image: url(../images/top/twt_bg_01.png);
	width: 615px;
	background-repeat: repeat;
	background-position: center top;
	padding-right: 30px;
	padding-left: 30px;
}
body#top #main #article #block_twt{
	background-image: url(../images/top/twt_bg_02.png);
	width: 675px;
	background-]repeat: repeat;
	background-position: center bottom;
	padding-bottom: 20px;
	background-repeat: no-repeat;
}

/* テキスト指定 */
body#top #main #article #block_wn ul li{
	color: #FFEE2D;
	font-size: 18px;

}
body#top #main #article #block_wn ul li a{
	color: #FFEE2D;

}
body#top #main #article #block_wn ul li span.date{
	font-family: 'Rubik Mono One', sans-serif;
}