body {
  overflow: hidden;
  background: #FFFFFF;
  font-family:'Times','ヒラギノ明朝 Pro W3','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','ＭＳ Ｐ明朝','MS P Mincho', serif;
}

ul{
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
}
li{
  list-style: none;
}

header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  margin: 0px auto 0px auto;
  z-index: 100;
  display:none;
  opacity: 0;
}
header .inner {
  position: relative;
  width: 980px;
  height: 40px;
  margin: 0px auto 0px auto;
}
header h1 a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
background: url(../img/header_diverse.png) no-repeat;
background-size: 133px 20px;
width: 133px;
height: 20px;
position: absolute;
top: 7px;
left: 10px;
}
header .social {
position: absolute;
right: 0px;
bottom: 5px;
}
header .social li {
display: block;
float: left;
margin-right: 10px;
}
header .social .twitter {
width: 95px;
}
header .social .facebook {
width: 80px;
}
header .social .google_plus {
width: 62px;
}
header .social .hatebu {
}


/*

  main

*/

.main {
  width: 100%;
  height: 100%;

}

.main > .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow:hidden;
}

.main > .container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow:hidden;
}
.main > .container > .contents {

  position:relative;
  height: 100%;
  margin: 0px auto 0px auto;

  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}

/*

  menu

*/
.main > .container > .contents > .menu {
  width: 100px;
  margin-top: -65px;
  position: absolute;
  left:40px;
  top: 50%;
  font-size: 10px;
  /**/
  display: none;
  opacity: 0;
  z-index: 100;
}
.main > .container > .contents > .menu > ul > li {
  display: block;
  margin-bottom: 20px;
  cursor: pointer;
}
.main > .container > .contents > .menu > ul > li > .dot {
  background: #FFFFFF;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border-radius:  5px;
  display: inline-block;
}
.main > .container > .contents > .menu > ul > li > span {
  opacity: 0;
  display: inline-block;
  height: 8px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.main > .container > .contents > .menu > ul > li.home > span {
  width: 32px;
  background: url(../img/menu_1_home.png) left top no-repeat;
  background-size: 32px 8px;
}
.main > .container > .contents > .menu > ul > li.disc > span {
  width: 52px;
  background: url(../img/menu_2_disc_info.png) left top no-repeat;
  background-size: 52px 8px;
}
.main > .container > .contents > .menu > ul > li.track > span {
  width: 59px;
  background: url(../img/menu_3_track_list.png) left top no-repeat;
  background-size: 59px 8px;
}
.main > .container > .contents > .menu > ul > li.staff > span {
  width: 70px;
  background: url(../img/menu_4_staff_credit.png) left top no-repeat;
  background-size: 70px 8px;
}
.main > .container > .contents > .menu > ul > li.share > span {
  width: 34px;
  background: url(../img/menu_5_share.png) left top no-repeat;
  background-size: 34px 8px;
}

/*

  bg

*/
.main > .bg {

}
.main > .bg > .bgs {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.main > .bg > .bgs > .red {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #9d2226;
  background: -moz-linear-gradient(top, #b6482a, #9d2226);
  background: -webkit-gradient(linear, left top, left bottom, from(#b6482a), to(#9d2226));
  opacity: 0;
  display: none;
}
.main > .bg > .bgs > .blue {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #1d2087;
  background: -moz-linear-gradient(top, #1d2087, #685a87);
  background: -webkit-gradient(linear, left top, left bottom, from(#1d2087), to(#685a87));
  opacity: 0;
  display: none;
}
.main > .bg > .bgs > .gold {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #be9e6d;
  opacity: 0;
  display: none;
}
.main > .bg > .bgs > .done {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #464d58;
  background: -moz-linear-gradient(top, #464d58, #b36082);
  background: -webkit-gradient(linear, left top, left bottom, from(#464d58), to(#b36082));
  opacity: 0;
  display: none;
}

.main > .bg > .jacket {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
}
.main > .bg > .jacket > .inner {
  width: 464px;
  height: 400px;

  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -232px;
  margin-top: -200px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);

  opacity:0;
  display:none;
}
.main > .bg > .jacket .o1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 464px;
  height: 400px;
  background: url(../img/jacket_o1.jpg) no-repeat left top;
  background-size: 464px 400px;
}
.main > .bg > .jacket .u1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 464px;
  height: 400px;
  background: url(../img/jacket_u1.jpg) no-repeat left top;
  background-size: 464px 400px;
}
.main > .bg > .jacket .l1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 22px;
  height: 400px;
  background: url(../img/jacket_l1.jpg) no-repeat left top;
  background-size: 22px 400px;
}
.main > .bg > .jacket .r1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 22px;
  height: 400px;
  background: url(../img/jacket_r1.jpg) no-repeat left top;
  background-size: 22px 400px;
}
.main > .bg > .jacket .t1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 464px;
  height: 22px;
  background: #000000;
}
.main > .bg > .jacket .b1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 464px;
  height: 22px;
  background: #000000;
}

.main > .bg > .jacket .blue1 {
  width: 464px;
  height: 400px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #1d2087;
  background: -moz-linear-gradient(top, #1d2087, #685a87);
  background: -webkit-gradient(linear, left top, left bottom, from(#1d2087), to(#685a87));
}
.main > .bg > .jacket .blue2 {
  width: 464px;
  height: 400px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #1d2087;
  background: -moz-linear-gradient(top, #1d2087, #685a87);
  background: -webkit-gradient(linear, left top, left bottom, from(#1d2087), to(#685a87));
}
.main > .bg > .jacket .gold {
  width: 464px;
  height: 400px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #be9e6d;
}
.main > .bg > .jacket .done {
  width: 464px;
  height: 400px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #464d58;
  background: -moz-linear-gradient(top, #464d58, #b36082);
  background: -webkit-gradient(linear, left top, left bottom, from(#464d58), to(#b36082));
}

/*

  article

*/

.main > .container > .contents > article {
  opacity: 0;
  display: none;

}
.main > .container > .contents > article > .inner {
  width: 980px;
  margin:0px auto;
  position: relative;
  margin-top: -320px;
  margin-left: -490px;
  position: absolute;
  left: 50%;
  top: 50%;

  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}

/*

home

*/
article.home {

}
article.home .bg {
  position: absolute;
  left: 0px;
  top: 0px;
}
article.home .bg .shoji {
  position: absolute;
  left: 50%;
  top: 50%;
}
article.home .bg .shoji .left {
  position: absolute;
  left: -178px;
  top: -178px;
  width: 178px;
  height: 356px;
  background: url(../img/p1_shoji_left.png) no-repeat left top;
  background-size: 178px 356px;
}
article.home .bg .shoji .right {
  position: absolute;
  left:0px;
  top: -178px;
  width: 178px;
  height: 356px;
  background: url(../img/p1_shoji_right.png) no-repeat left top;
  background-size: 178px 356px;
}

article.home .logo {
  display: inline-block;
  background: url(../img/p1_logo.png) left top no-repeat;
  background-size: 501px 274px;
  width: 501px;
  height: 274px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

  position: absolute;
  left: -64px;
  top: 160px;
}
article.home .diverse {
  position: absolute;

left: 110px;
top: 460px;
}
article.home .diverse a {
  text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
background: url(../img/p1_diverse.png) no-repeat;
background-size: 133px 20px;
width: 133px;
height: 20px;
}
article.home .code {
  text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
background: url(../img/p1_code.png) no-repeat;
background-size: 64px 8px;
width: 64px;
height: 8px;
position: absolute;
left: 256px;
top: 466px;
}
article.home .txt {
  text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
background: url(../img/p1_txt.png) no-repeat;
background-size: 272px 14px;
width: 272px;
height: 14px;
position: absolute;
left: 83px;
top: 530px;
}

article.home .illust {
  position: absolute;
  left: 180px;
  top: 46px;
}
article.home .illust .origin {
  display: none;
}
article.home .illust .msk {
  display: none;
}

article.home .scroll {
  position: absolute;
  left: 50%;
  top: 560px;
}
article.home .scroll > .inner {
  position: relative
}
article.home .scroll .arrow {
  position: absolute;
  left:0px;
  top:8px;
  background: url(../img/btn_scroll_arrow.png) no-repeat;
  background-size: 36px 19px;
  width: 36px;
  height: 19px;
  margin-left: -18px;
}
article.home .scroll .txt {
  position: absolute;
  left:0px;
  top:-18px;
  background: url(../img/btn_scroll_txt.png) no-repeat;
  background-size: 90px 10px;
  width: 90px;
  height: 10px;
  margin-left: -45px;
  -webkit-animation: home_scroll_txt 1.5s linear infinite;

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
@-webkit-keyframes home_scroll_txt {
  0% { opacity: 1;}
  20% { opacity: 1; }
  100% { opacity: 0; }
}

article.home .scroll .bg1 {
  position: absolute;
  left:0px;
  top:0px;
  background: url(../img/btn_scroll_bg1.png) no-repeat;
  background-size: 92px 92px;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  margin-top: -46px;
}
article.home .scroll .bg2 {
  position: absolute;
  left:0px;
  top:20px;
  background: url(../img/btn_scroll_bg2.png) no-repeat;
  background-size: 92px 92px;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  margin-top: -46px;
}

/*

disc

*/
article.disc {

}
article.disc .jacket {
  position: absolute;
  left: 20px;
  top: 130px;
  width: 464px;
  height: 400px;
  background: url(../img/jacket_o1.jpg) no-repeat left top;
  background-size: 464px 400px;
  /*
  display: none;
  */
  display: block;
  opacity: 0;
}
article.disc .btn_buy {
  background: url(../img/p2_btn_buy.png) no-repeat;
  background-size: 95px 28px;
  width: 95px;
  height: 28px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.disc .btn_buy:hover {
  background-color: #7b0b00;
}
article.disc .docs{
  position:absolute;
  left: 525px;
  top: 65px;
  width: 400px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.disc .docs .title {
  background: url(../img/p2_logo.png) no-repeat;
  background-size: 314px 69px;
  width: 314px;
  height: 69px;
  margin-left: -20px;
  margin-bottom: 25px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.disc .docs .desc {
  position: relative;
  margin-bottom: 30px;
  height: 80px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.disc .docs .desc_txt {
  background: url(../img/p2_desc.png) no-repeat;
  background-size: 190px 80px;
  width: 190px;
  height: 80px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.disc .docs .btn_buy {
  position:absolute;
  left: 161px;
  top: 60px;
}
article.disc .docs .comike {
  position: relative;
  padding-left: 20px;
  border-left: 4px solid #FFFFFF;
  margin-bottom: 30px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.disc .docs .comike .comike_txt {
  background: url(../img/p2_comike.png) no-repeat;
  background-size: 354px 133px;
  width: 354px;
  height: 133px;
  margin-bottom: 20px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.disc .docs .comike .twitcmap {
  background: url(../img/p2_twitcmap.png) no-repeat;
  background-size: 247px 19px;
  width: 247px;
  height: 19px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.disc .docs .comike .twitcmap:hover {
  opacity: 0.7;
}
article.disc .docs .poster {
  position: relative;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.disc .docs .poster .poster_txt {
  background: url(../img/p2_poster.png) no-repeat;
  background-size: 304px 40px;
  width: 304px;
  height: 40px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.disc .docs .poster .btn_buy {
  position: absolute;
  left: 0px;
  top: 50px;
}

/*

track

*/
article.track {

}
article.track .tracks {
  position: absolute;
  left: 180px;
  top: 140px;
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.track .tracks ul {
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.track .tracks li {
  display: block;
  height: 16px;
  margin-bottom: 20px;
}

article.track .tracks li .title {
  display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
article.track .tracks li .bar {
  display: inline-block;
  background:url(../img/p3_t_bar.png) repeat-x;
  background-size: 1px 16px;
  width: 45px;
  height: 16px;
  margin: 0px 10px;
}
article.track .tracks li .comp {
  display: inline-block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

article.track .tracks .t1 .title {
  background: url(../img/p3_t_1_title.png) no-repeat;
  background-size: 46px 16px;
  width: 46px;
  height: 16px;
}
article.track .tracks .t1 .comp {
  background: url(../img/p3_t_1_comp.png) no-repeat;
  background-size: 45px 16px;
  width: 45px;
  height: 16px;
}
article.track .tracks .t2 .title {
  background: url(../img/p3_t_2_title.png) no-repeat;
  background-size: 67px 16px;
  width: 67px;
  height: 16px;
}
article.track .tracks .t2 .comp {
  background: url(../img/p3_t_2_comp.png) no-repeat;
  background-size: 79px 16px;
  width: 79px;
  height: 16px;
}
article.track .tracks .t3 .title {
  background: url(../img/p3_t_3_title.png) no-repeat;
  background-size: 73px 16px;
  width: 73px;
  height: 16px;
}
article.track .tracks .t3 .comp {
  background: url(../img/p3_t_3_comp.png) no-repeat;
  background-size: 46px 16px;
  width: 46px;
  height: 16px;
}
article.track .tracks .t4 .title {
  background: url(../img/p3_t_4_title.png) no-repeat;
  background-size: 73px 16px;
  width: 73px;
  height: 16px;
}
article.track .tracks .t4 .comp {
  background: url(../img/p3_t_4_comp.png) no-repeat;
  background-size: 26px 16px;
  width: 26px;
  height: 16px;
}
article.track .tracks .t5 .title {
  background: url(../img/p3_t_5_title.png) no-repeat;
  background-size: 77px 16px;
  width: 77px;
  height: 16px;
}
article.track .tracks .t5 .comp {
  background: url(../img/p3_t_5_comp.png) no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}
article.track .tracks .t6 .title {
  background: url(../img/p3_t_6_title.png) no-repeat;
  background-size: 45px 16px;
  width: 45px;
  height: 16px;
}
article.track .tracks .t6 .comp {
  background: url(../img/p3_t_6_comp.png) no-repeat;
  background-size: 53px 16px;
  width: 53px;
  height: 16px;
}
article.track .tracks .t7 .title {
  background: url(../img/p3_t_7_title.png) no-repeat;
  background-size: 82px 16px;
  width: 82px;
  height: 16px;
}
article.track .tracks .t7 .comp {
  background: url(../img/p3_t_7_comp.png) no-repeat;
  background-size: 26px 16px;
  width: 26px;
  height: 16px;
}
article.track .tracks .t7 .title {
  background: url(../img/p3_t_7_title.png) no-repeat;
  background-size: 82px 16px;
  width: 82px;
  height: 16px;
}
article.track .tracks .t7 .comp {
  background: url(../img/p3_t_7_comp.png) no-repeat;
  background-size: 26px 16px;
  width: 26px;
  height: 16px;
}
article.track .tracks .t8 .title {
  background: url(../img/p3_t_8_title.png) no-repeat;
  background-size: 48px 16px;
  width: 48px;
  height: 16px;
}
article.track .tracks .t8 .comp {
  background: url(../img/p3_t_8_comp.png) no-repeat;
  background-size: 35px 16px;
  width: 35px;
  height: 16px;
}
article.track .tracks .t9 .title {
  background: url(../img/p3_t_9_title.png) no-repeat;
  background-size: 45px 16px;
  width: 45px;
  height: 16px;
}
article.track .tracks .t9 .comp {
  background: url(../img/p3_t_9_comp.png) no-repeat;
  background-size: 163px 16px;
  width: 163px;
  height: 16px;
}
article.track .tracks .t10 .title {
  background: url(../img/p3_t_10_title.png) no-repeat;
  background-size: 73px 16px;
  width: 73px;
  height: 16px;
}
article.track .tracks .t10 .comp {
  background: url(../img/p3_t_10_comp.png) no-repeat;
  background-size: 44px 16px;
  width: 44px;
  height: 16px;
}
article.track .tracks .t11 .title {
  background: url(../img/p3_t_11_title.png) no-repeat;
  background-size: 75px 16px;
  width: 75px;
  height: 16px;
}
article.track .tracks .t11 .comp {
  background: url(../img/p3_t_11_comp.png) no-repeat;
  background-size: 8px 16px;
  width: 8px;
  height: 16px;
}

article.track .btn_play {
  background: url(../img/p3_btn_play.png) no-repeat;
  background-size: 203px 58px;
  width: 203px;
  height: 58px;
  margin-left: -101px;
  position: absolute;
left: 700px;
top: 280px;
  cursor: pointer;
}
article.track .soundcloud {
  display: none;
  position: absolute;
  left: 770px;
top: 250px;
margin-left: -250px;
width: 420px;
}


/*

staff

*/
article.staff {

}
article.staff .title {
  background: url(../img/p4_title.png) no-repeat;
  background-size: 43px 36px;
  width: 43px;
  height: 36px;
  margin-left: -21px;
  position: absolute;
  left: 480px;
  top: 160px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.staff .staffs {
  position: absolute;
  left: 280px;
  top: 240px;
}
article.staff .staffs ul {
  transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(1000px);
  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
  -webkit-transform: perspective(1000px);
}
article.staff .staffs li {
  display: block;
  height: 26px;
  margin-bottom: 20px;
}

article.staff .staffs li .position {
  display: inline-block;
  width: 200px;
  width: 16px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
article.staff .staffs li .name {
  display: inline-block;
  width: 16px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
article.staff .staffs li .group {
  display: inline-block;
  width: 11px;
  padding-bottom: 12px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

article.staff .staffs .s1 .position {
  background: url(../img/p4_s_1_position.png) no-repeat;
  background-size: 96px 15px;
  width: 200px;
  height: 15px;
}
article.staff .staffs .s1 .name {
  background: url(../img/p4_s_1_name.png) no-repeat;
  background-size: 74px 16px;
  width: 74px;
  height: 16px;
}
article.staff .staffs .s1 .group {
  background: url(../img/p4_s_1_group.png) no-repeat;
  background-size: 35px 11px;
  width: 35px;
  height: 11px;
}
article.staff .staffs .s2 .position {
  background: url(../img/p4_s_2_position.png) no-repeat;
  background-size: 128px 15px;
  width: 200px;
  height: 15px;
}
article.staff .staffs .s2 .name {
  background: url(../img/p4_s_2_name.png) no-repeat;
  background-size: 213px 16px;
  width: 213px;
  height: 16px;
}
article.staff .staffs .s2 .group {
  background: url(../img/p4_s_2_group.png) no-repeat;
  background-size: 72px 11px;
  width: 72px;
  height: 11px;
}
article.staff .staffs .s3 .position {
  background: url(../img/p4_s_3_position.png) no-repeat;
  background-size: 101px 15px;
  width: 200px;
  height: 15px;
}
article.staff .staffs .s3 .name {
  background: url(../img/p4_s_3_name.png) no-repeat;
  background-size: 225px 16px;
  width: 225px;
  height: 16px;
}
article.staff .staffs .s3 .group {
  background: url(../img/p4_s_3_group.png) no-repeat;
  background-size: 41px 11px;
  width: 41px;
  height: 11px;
}
article.staff .staffs .s4 .position {
  background: url(../img/p4_s_4_position.png) no-repeat;
  background-size: 81px 15px;
  width: 200px;
  height: 15px;
}
article.staff .staffs .s4 .name {
  background: url(../img/p4_s_4_name.png) no-repeat;
  background-size: 108px 16px;
  width: 108px;
  height: 16px;
}
article.staff .staffs .s4 .group {
  background: url(../img/p4_s_4_group.png) no-repeat;
  background-size: 66px 11px;
  width: 66px;
  height: 11px;
}
article.staff .staffs .s5 .position {
  background: url(../img/p4_s_5_position.png) no-repeat;
  background-size: 62px 15px;
  width: 200px;
  height: 15px;
}
article.staff .staffs .s5 .name {
  background: url(../img/p4_s_5_name.png) no-repeat;
  background-size: 181px 16px;
  width: 181px;
  height: 16px;
}
article.staff .staffs .s6 .position {
  background: url(../img/p4_s_6_position.png) no-repeat;
  background-size: 157px 15px;
  width: 200px;
  height: 15px;
}
article.staff .staffs .s6 .name {
  background: url(../img/p4_s_6_name.png) no-repeat;
  background-size: 92px 16px;
  width: 92px;
  height: 16px;
}

/*

share

*/
article.share {

}
article.share .title {
  background: url(../img/p5_title.png) no-repeat;
  background-size: 98px 37px;
  width: 98px;
  height: 37px;
  margin-left: -49px;
  position: absolute;
  left: 480px;
  top: 155px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.share .social {
position: absolute;
left: 480px;
top: 215px;
margin-left: -160px;
}
article.share .social li {
display: block;
float: left;
margin-right: 10px;
}
article.share .social .twitter {
width: 95px;
}
article.share .social .facebook {
width: 80px;
}
article.share .social .google_plus {
width: 62px;
}
article.share .social .hatebu {
}

article.share .banner_468 {
  background: url(../img/p5_banner_468.jpg) no-repeat;
  background-size: 468px 80px;
  width: 468px;
  height: 80px;
  margin-left: -234px;
  position: absolute;
  left: 480px;
  top: 280px;
}
article.share .banner_468 input {
  width: 100%;
  height: 100%;
  text-align:center;
  background: #a73d28;
  background: rgba(164, 45, 35, 0.9);
  color: #FFFFFF;
  opacity:0;
  outline: none;
  border: none;
  margin: 0px;
  padding: 0px;
}
article.share .banner_200 {
  background: url(../img/p5_banner_200.jpg) no-repeat;
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  margin-left: -100px;
  position: absolute;
  left: 480px;
  top: 385px;
}
article.share .banner_200 input {
  width: 100%;
  height: 100%;
  text-align:center;
  background: #a73d28;
  background: rgba(164, 45, 35, 0.9);
  color: #FFFFFF;
  opacity:0;
  outline: none;
  border: none;
  margin: 0px;
  padding: 0px;
}

article.share .diverse {
  background: url(../img/p5_diverse.png) no-repeat;
  background-size: 147px 27px;
  width: 147px;
  height: 27px;
  margin-left: -73px;
  position: absolute;
  left: 480px;
  top: 470px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
article.share .copyright {
  background: url(../img/p5_copyright.png) no-repeat;
  background-size: 198px 9px;
  width: 198px;
  height: 9px;
  margin-left: -99px;
  position: absolute;
  left: 480px;
  top: 510px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}


/*


*/


.scrollBody {
  height: 500%;
}



.case {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  position: absolute;
  left:50%;
  top: 50%;
  margin-left:-150px;
  margin-top:-150px;
  width: 300px;
  height: 300px;
}
.case .o1 {
  width: 300px;
  height: 300px;
  background: #CCCCCC;
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.case .o2 {
  width: 300px;
  height: 300px;
  background: #FFCCCC;
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transform: translate3d(0px, 0px, -50px);
}




@media only screen and (-webkit-min-device-pixel-ratio: 2) {

header h1 a {
background-image: url(../img/header_diverse@2x.png);
}

.main > .container > .contents > .menu > ul > li.home > span {¥
  background-image: url(../img/menu_1_home@2x.png);
}
.main > .container > .contents > .menu > ul > li.disc > span {
  background-image: url(../img/menu_2_disc_info@2x.png);
}
.main > .container > .contents > .menu > ul > li.track > span {
  background-image: url(../img/menu_3_track_list@2x.png);
}
.main > .container > .contents > .menu > ul > li.staff > span {
  background-image: url(../img/menu_4_staff_credit@2x.png);
}
.main > .container > .contents > .menu > ul > li.share > span {
  background-image: url(../img/menu_5_share@2x.png);
}

.main > .bg > .jacket .o1 {
  background-image: url(../img/jacket_o1@2x.jpg);
}

.main > .bg > .jacket .u1 {
  background-image: url(../img/jacket_u1@2x.jpg);
}
.main > .bg > .jacket .l1 {
  background-image: url(../img/jacket_l1@2x.jpg);
}
.main > .bg > .jacket .r1 {
  background-image: url(../img/jacket_r1@2x.jpg);
}

article.home .bg .shoji .left {
  background-image: url(../img/p1_shoji_left@2x.png);
}
article.home .bg .shoji .right {
  background-image: url(../img/p1_shoji_right@2x.png);
}
article.home .logo {
  background-image: url(../img/p1_logo@2x.png);
}
article.home .diverse a {
background-image: url(../img/p1_diverse@2x.png);
}
article.home .code {
background-image: url(../img/p1_code@2x.png);
}
article.home .txt {
background-image: url(../img/p1_txt@2x.png);
}
article.home .scroll .arrow {
  background-image: url(../img/btn_scroll_arrow@2x.png);
}
article.home .scroll .txt {
  background-image: url(../img/btn_scroll_txt@2x.png);
}
article.home .scroll .bg1 {
  background-image: url(../img/btn_scroll_bg1@2x.png);
}
article.home .scroll .bg2 {
  background-image: url(../img/btn_scroll_bg2@2x.png);
}
article.disc .jacket {
  background: url(../img/jacket_o1@2x.jpg);
}
article.disc .btn_buy {
  background-image: url(../img/p2_btn_buy@2x.png);
}
article.disc .docs .title {
  background-image: url(../img/p2_logo@2x.png);
}
article.disc .docs .desc_txt {
  background-image: url(../img/p2_desc@2x.png);
}
article.disc .docs .comike .comike_txt {
  background-image: url(../img/p2_comike@2x.png);
}
article.disc .docs .comike .twitcmap {
  background-image: url(../img/p2_twitcmap@2x.png);
}
article.disc .docs .poster .poster_txt {
  background-image: url(../img/p2_poster@2x.png);
}
article.track .tracks li .bar {
  background-image:url(../img/p3_t_bar@2x.png);
}
article.track .tracks .t1 .title {
  background-image: url(../img/p3_t_1_title@2x.png);
}
article.track .tracks .t1 .comp {
  background-image: url(../img/p3_t_1_comp@2x.png);
}
article.track .tracks .t2 .title {
  background-image: url(../img/p3_t_2_title@2x.png);
}
article.track .tracks .t2 .comp {
  background-image: url(../img/p3_t_2_comp@2x.png);
}
article.track .tracks .t3 .title {
  background-image: url(../img/p3_t_3_title@2x.png);
}
article.track .tracks .t3 .comp {
  background-image: url(../img/p3_t_3_comp@2x.png);
}
article.track .tracks .t4 .title {
  background-image: url(../img/p3_t_4_title@2x.png);
}
article.track .tracks .t4 .comp {
  background-image: url(../img/p3_t_4_comp@2x.png);
}
article.track .tracks .t5 .title {
  background-image: url(../img/p3_t_5_title@2x.png);
}
article.track .tracks .t5 .comp {
  background-image: url(../img/p3_t_5_comp@2x.png);
}
article.track .tracks .t6 .title {
  background-image: url(../img/p3_t_6_title@2x.png);
}
article.track .tracks .t6 .comp {
  background-image: url(../img/p3_t_6_comp@2x.png);
}
article.track .tracks .t7 .title {
  background-image: url(../img/p3_t_7_title@2x.png);
}
article.track .tracks .t7 .comp {
  background-image: url(../img/p3_t_7_comp@2x.png);
}
article.track .tracks .t7 .title {
  background-image: url(../img/p3_t_7_title@2x.png);
}
article.track .tracks .t7 .comp {
  background-image: url(../img/p3_t_7_comp@2x.png);
}
article.track .tracks .t8 .title {
  background-image: url(../img/p3_t_8_title@2x.png);
}
article.track .tracks .t8 .comp {
  background-image: url(../img/p3_t_8_comp@2x.png);
}
article.track .tracks .t9 .title {
  background-image: url(../img/p3_t_9_title@2x.png);
}
article.track .tracks .t9 .comp {
  background-image: url(../img/p3_t_9_comp@2x.png);
}
article.track .tracks .t10 .title {
  background-image: url(../img/p3_t_10_title@2x.png);
}
article.track .tracks .t10 .comp {
  background-image: url(../img/p3_t_10_comp@2x.png);
}
article.track .tracks .t11 .title {
  background-image: url(../img/p3_t_11_title@2x.png);
}
article.track .tracks .t11 .comp {
  background-image: url(../img/p3_t_11_comp@2x.png);
}
article.track .btn_play {
  background-image: url(../img/p3_btn_play@2x.png);
}
article.staff .title {
  background-image: url(../img/p4_title@2x.png);
}
article.staff .staffs .s1 .position {
  background-image: url(../img/p4_s_1_position@2x.png);
}
article.staff .staffs .s1 .name {
  background-image: url(../img/p4_s_1_name@2x.png);
}
article.staff .staffs .s1 .group {
  background-image: url(../img/p4_s_1_group@2x.png);
}
article.staff .staffs .s2 .position {
  background-image: url(../img/p4_s_2_position@2x.png);
}
article.staff .staffs .s2 .name {
  background-image: url(../img/p4_s_2_name@2x.png);
}
article.staff .staffs .s2 .group {
  background-image: url(../img/p4_s_2_group@2x.png);
}
article.staff .staffs .s3 .position {
  background-image: url(../img/p4_s_3_position@2x.png);
}
article.staff .staffs .s3 .name {
  background-image: url(../img/p4_s_3_name@2x.png);
}
article.staff .staffs .s3 .group {
  background-image: url(../img/p4_s_3_group@2x.png);
}
article.staff .staffs .s4 .position {
  background-image: url(../img/p4_s_4_position@2x.png);
}
article.staff .staffs .s4 .name {
  background-image: url(../img/p4_s_4_name@2x.png);
}
article.staff .staffs .s4 .group {
  background-image: url(../img/p4_s_4_group@2x.png);
}
article.staff .staffs .s5 .position {
  background-image: url(../img/p4_s_5_position@2x.png);
}
article.staff .staffs .s5 .name {
  background-image: url(../img/p4_s_5_name@2x.png);
}
article.staff .staffs .s6 .position {
  background-image: url(../img/p4_s_6_position@2x.png);
}
article.staff .staffs .s6 .name {
  background-image: url(../img/p4_s_6_name@2x.png);
}
article.share .title {
  background-image: url(../img/p5_title@2x.png);
}
article.share .banner_468 {
  background-image: url(../img/p5_banner_468@2x.jpg);
}
article.share .banner_200 {
  background-image: url(../img/p5_banner_200@2x.jpg);
}
article.share .diverse {
  background-image: url(../img/p5_diverse@2x.png);
}
article.share .copyright {
  background-image: url(../img/p5_copyright@2x.png);
}

}