@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  background:#000;
  color:#fff;
  font-size:16px;
  width: 100%;
}
body {
  min-width: 1000px;
  overflow-y:scroll;
}
a {color:#27C6FC;text-decoration: underline;outline: none;}
a:hover {  text-decoration: none; }
a,img {  border:none; }
li {  list-style-type:none; }
::selection {    background:#333; }
::-moz-selection {    background:#333;  }
.noselect,
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.legacy_ie {
  text-align:center;
  position: fixed;
  top: 20px;
  left:50%;
  width: 640px;
  margin-left: -320px;
  padding:10px 0;
  background:#000;
  color:#fff;
  z-index: 9000;
}
.anchor {
  display: block;
  height: 80px;
  margin-top:-80px;
}
.clear,
.clear:after {
  content: " ";
  clear: both;
  display: block;
}
.pc_br {
  display: block;
}
.sp_br {
  display: none;
}
/*-----------------------*/
/* over */
/*-----------------------*/
#over {
  width: 100%;
  height:auto;
  min-height: 100%;
  box-sizing:border-box;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(0,0,0,0.8);
  z-index: 9999;
  display: none;
  padding-bottom:60px;
  min-width: 1000px;
}
#over > .inner {
  position: relative;
  overflow: hidden;
}
#over .over_contents {
  margin:0 auto;
}
#over_youtube > div {
  margin:0 auto;
}
#over_youtube iframe {
  width: 100%;
  height: 100%;
}
#over_image img {
  display: block;
  width: 100%;
  height: 100%;
}
#over_controller {
  height:100px;
  width: 100px;
  position: fixed;
  top: 0;
  right: 0;
}
#over_close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 100px;
  width: 100px;
  transition-property: transform;
  transition-duration: 800ms;
  transition-timing-function: cubic-bezier(0.31,0.47,0,1);
  transform:rotate(0deg);
}
#over_close:hover {
  transform:rotate(180deg);
}
#over_close img {
  display: block;
  width: 100px;
  height: 100px;
}

#over_contents {
  background-position: center center;
  background-repeat: no-repeat;
  background-size:contain;
  min-width: 1000px;
}
#over_contents[data-char="pollon"] {
  background-image:url(../img/character/image_pollon.jpg);
}
#over_contents[data-char="momo"] {
  background-image:url(../img/character/image_momo.jpg);
}
#over_contents[data-char="cross"] {
  background-image:url(../img/character/image_cross.jpg);
}
#over_contents[data-char="juno"] {
  background-image:url(../img/character/image_juno.jpg);
}
#over_contents[data-char="azoth"] {
  background-image:url(../img/character/image_azoth.jpg);
}
#over_contents[data-char="bambi"] {
  background-image:url(../img/character/image_bambi.jpg);
}
#over_contents[data-char="gai"] {
  background-image:url(../img/character/image_gai.jpg);
}
#over_contents[data-char="vha"] {
  background-image:url(../img/character/image_vha.jpg);
}


#over_contents .text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding:25px;
  box-sizing: border-box;
  background:rgba(0,0,0,0.6);
}
#over_contents .text .name {
  font-size: 20px;
}
#over_contents .text .ruby {
  font-size: 10px;
}

/*-----------------------*/
/* show */
/*-----------------------*/
.share {
  transition-property: transform;
  transition-duration: 1400ms;
  transition-delay: 400ms;
  transition-timing-function: cubic-bezier(0.31,0.47,0,1);
}
.share {
  transform:translate(0,-50px);
}
.show .share {
  transform:translate(0,0);
}

/*-----------------------*/
/* share */
/*-----------------------*/
.share {
  position: fixed;
  top: 15px;
  right: 5px;
  z-index: 1000;
  transition-property: transform;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0.31,0.47,0,1);
  transform:translate(0,-50px);
}
.show .share {
  transform:translate(0,0);
}
.share > div {
  width: 45px;
  height: 40px;
  float: left;
}
.share > div > a {
  display: block;
  width: 34px;
  height: 34px;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../img/share.png);
  background-size: 160px 100px;
  background-repeat: no-repeat;
}
.share .share_tw {  background-position: 0 0; }
.share .share_tw:hover {  background-position: 0 -40px; }
.share .share_fb {  background-position: -40px 0; }
.share .share_fb:hover {  background-position: -40px -40px; }
.share .share_line {  background-position: -80px 0; }
.share .share_line:hover {  background-position: -80px -40px; }
.share .share_hb {  background-position: -120px 0; }
.share .share_hb:hover {  background-position: -120px -40px; }
.share .inner_line {
  display: none;
}
.sp .share .inner_line {
  display: block;
}

/*-----------------------*/
/* container */
/*-----------------------*/
.container {
  position: relative;
  width: 100%;
  min-width: 1000px;
}


/*-----------------------*/
/* bg */
/*-----------------------*/
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background-position:center center;
  background-repeat:no-repeat;
  background-size: cover;
  top: 0;
  left: 0;
  transition-property: opacity;
  transition-duration: 800ms;
  opacity: 1;
}
.bg_main {
  background-image:url(../img/bg.jpg);
  opacity: 0;
}
.bg_top {
  background-image:url(../img/bg_top2.jpg);
  margin-top: -75px;
}
.bg_top:after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}
.bg_arecibo {
  background-image:url(../img/bg_arecibo.jpg);
  margin-top: -75px;
}
.bg_bmi {
  background-image:url(../img/bg_bmi.jpg);
  margin-top: -75px;
}
.bg_graper {
  background-image:url(../img/bg_graper.jpg);
  margin-top: -75px;
}
.bg_cyber {
  background-image:url(../img/bg_cyber.jpg);
  margin-top: -75px;
}
.bg_gaia {
  background-image:url(../img/bg_gaia.jpg);
  margin-top: -75px;
}
.bg_gaudicode {
  background-image:url(../img/bg_gaudicode.jpg);
  margin-top: -75px;
}
.bg_key {
  background-image:url(../img/bg_top2.jpg);
  margin-top: -75px;
}

body[data-page="0"] .bg_gaudicode,
body[data-page="1"] .bg_gaudicode,
body[data-page="2"] .bg_gaudicode,
body[data-page="3"] .bg_gaudicode,
body[data-page="4"] .bg_gaudicode,
body[data-page="5"] .bg_gaudicode,
body[data-page="6"] .bg_gaudicode,
body[data-page="7"] .bg_gaudicode,
body[data-page="8"] .bg_gaudicode,
body[data-page="10"] .bg_gaudicode,
body[data-page="11"] .bg_gaudicode,

body[data-page="0"] .bg_gaia,
body[data-page="1"] .bg_gaia,
body[data-page="2"] .bg_gaia,
body[data-page="3"] .bg_gaia,
body[data-page="4"] .bg_gaia,
body[data-page="5"] .bg_gaia,
body[data-page="6"] .bg_gaia,
body[data-page="7"] .bg_gaia,
body[data-page="9"] .bg_gaia,
body[data-page="10"] .bg_gaia,
body[data-page="11"] .bg_gaia,

body[data-page="0"] .bg_cyber,
body[data-page="1"] .bg_cyber,
body[data-page="2"] .bg_cyber,
body[data-page="3"] .bg_cyber,
body[data-page="4"] .bg_cyber,
body[data-page="5"] .bg_cyber,
body[data-page="6"] .bg_cyber,
body[data-page="8"] .bg_cyber,
body[data-page="9"] .bg_cyber,
body[data-page="10"] .bg_cyber,
body[data-page="11"] .bg_cyber,

body[data-page="0"] .bg_graper,
body[data-page="1"] .bg_graper,
body[data-page="2"] .bg_graper,
body[data-page="3"] .bg_graper,
body[data-page="4"] .bg_graper,
body[data-page="5"] .bg_graper,
body[data-page="7"] .bg_graper,
body[data-page="8"] .bg_graper,
body[data-page="9"] .bg_graper,
body[data-page="10"] .bg_graper,
body[data-page="11"] .bg_graper,

body[data-page="0"] .bg_bmi,
body[data-page="1"] .bg_bmi,
body[data-page="2"] .bg_bmi,
body[data-page="3"] .bg_bmi,
body[data-page="4"] .bg_bmi,
body[data-page="6"] .bg_bmi,
body[data-page="7"] .bg_bmi,
body[data-page="8"] .bg_bmi,
body[data-page="9"] .bg_bmi,
body[data-page="10"] .bg_bmi,
body[data-page="11"] .bg_bmi,

body[data-page="0"] .bg_arecibo,
body[data-page="1"] .bg_arecibo,
body[data-page="2"] .bg_arecibo,
body[data-page="3"] .bg_arecibo,
body[data-page="5"] .bg_arecibo,
body[data-page="6"] .bg_arecibo,
body[data-page="7"] .bg_arecibo,
body[data-page="8"] .bg_arecibo,
body[data-page="9"] .bg_arecibo,
body[data-page="10"] .bg_arecibo,
body[data-page="11"] .bg_arecibo,

body[data-page="0"] .page_key,
body[data-page="2"] .page_key,
body[data-page="3"] .page_key,
body[data-page="4"] .page_key,
body[data-page="5"] .page_key,
body[data-page="6"] .page_key,
body[data-page="7"] .page_key,
body[data-page="8"] .page_key,
body[data-page="9"] .page_key,
body[data-page="10"] .page_key,
body[data-page="11"] .page_key,

body[data-page="1"] .bg_top,
body[data-page="2"] .bg_top,
body[data-page="3"] .bg_top,
body[data-page="4"] .bg_top,
body[data-page="5"] .bg_top,
body[data-page="6"] .bg_top,
body[data-page="7"] .bg_top,
body[data-page="8"] .bg_top,
body[data-page="9"] .bg_top,
body[data-page="10"] .bg_top,
body[data-page="11"] .bg_top,

body[data-page="0"] .bg_main {
  opacity: 0;
}

body[data-page="9"] .page_gaudicode,
body[data-page="8"] .bg_gaia,
body[data-page="7"] .bg_cyber,
body[data-page="6"] .bg_graper,
body[data-page="5"] .bg_bmi,
body[data-page="4"] .bg_arecibo,
body[data-page="1"] .page_key,

body[data-page="2"] .bg_main,
body[data-page="3"] .bg_main,
body[data-page="4"] .bg_main,
body[data-page="5"] .bg_main,
body[data-page="6"] .bg_main,
body[data-page="7"] .bg_main,
body[data-page="8"] .bg_main,
body[data-page="9"] .bg_main,
body[data-page="10"] .bg_main,
body[data-page="11"] .bg_main {
  opacity: 1;
}

/*-----------------------*/
/* page */
/*-----------------------*/
.page {
  width: 100%;
  margin:0 auto;
}
.page > div {
  margin-bottom: 140px;
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  transition-property: height;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0,.77,.44,.99);
  overflow: hidden;
}
.page > div > .inner {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  transition-property: transform,opacity;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0.31,0.47,0,1);
  opacity: 0;
  transform:rotate(5deg) scale(10);
}
.page .page_movie .inner {
  opacity: 0;
  transform:rotate(5deg) scale(2);
}
.page[data-page="11"] .page_movie,
.page[data-page="10"] .page_logo,
.page[data-page="9"] .page_gaudicode,
.page[data-page="8"] .page_gaia,
.page[data-page="7"] .page_cyber,
.page[data-page="6"] .page_graper,
.page[data-page="5"] .page_bmi,
.page[data-page="4"] .page_arecibo,
.page[data-page="3"] .page_char,
.page[data-page="2"] .page_intro,
.page[data-page="1"] .page_key,
.page[data-page="0"] .page_top {
  z-index: 200;
}
.page[data-page="11"] .page_movie .inner,
.page[data-page="10"] .page_logo .inner,
.page[data-page="9"] .page_gaudicode .inner,
.page[data-page="8"] .page_gaia .inner,
.page[data-page="7"] .page_cyber .inner,
.page[data-page="6"] .page_graper .inner,
.page[data-page="5"] .page_bmi .inner,
.page[data-page="4"] .page_arecibo .inner,
.page[data-page="3"] .page_char .inner,
.page[data-page="2"] .page_intro .inner,
.page[data-page="1"] .page_key .inner,
.page[data-page="0"] .page_top .inner {
  opacity: 1;
  transform:rotate(0deg) scale(1);
}
.page[data-page="1"] .page_top .inner,
.page[data-page="2"] .page_key .inner,
.page[data-page="3"] .page_intro .inner,
.page[data-page="4"] .page_char .inner,
.page[data-page="5"] .page_arecibo .inner,
.page[data-page="6"] .page_bmi .inner,
.page[data-page="7"] .page_graper .inner,
.page[data-page="8"] .page_cyber .inner,
.page[data-page="9"] .page_gaia .inner,
.page[data-page="10"] .page_gaudicode .inner,
.page[data-page="11"] .page_logo .inner {
  opacity: 0;
  transform:rotate(-5deg) scale(0);
}

.btn {
  color:#fff;
  display: block;
  width: 180px;
  height: 60px;
  position: fixed;
  left: 50%;
  bottom: 155px;
  margin-left: -90px;
  z-index: 400;
  transition-property: opacity;
  transition-duration: 600ms;
  display: none;
}
.btn:hover {
  opacity: 0.5;
}
.page[data-page] .btn_scroll {
  display: block;
}
.page[data-page="11"] .btn_scroll {
  display: none;
}
.page[data-page="11"] .btn_gotop {
  display: block;
}

/*-----------------------*/
/* page_top */
/*-----------------------*/
.page_top img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top:-212px;
  margin-left: -475px;
  width: 950px;
  height: 424px;
}

/*-----------------------*/
/* page_intro */
/*-----------------------*/
.page_intro img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top:-280px;
  width: 1000px;
  height: 580px;
  transition-property: width,height;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0,.77,.44,.99);
}

@media screen and (max-height: 830px) {
  .page_intro img {
    margin-left: -414px;
    margin-top:-250px;
    width: 828px;
    height: 480px;
  }
}
@media screen and (max-height: 700px) {
  .page_intro img {
    margin-left: -327px;
    margin-top:-200px;
    width: 655px;
    height: 380px;
  }
}

/*-----------------------*/
/* page_char */
/*-----------------------*/
.page_char > .inner > div {
  width: 960px;
  height: 480px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -480px;
  margin-top: -270px;
}
.page_char > .inner > div a {
  width: 220px;
  height: 220px;
  display: block;
  float: left;
  margin: 10px;
  overflow: hidden;
  position: relative;
}
.page_char > .inner > div a img {
  width: 220px;
  height: 220px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.page_char > .inner > div a:after {
  content: " ";
  display: block;
  width: 220px;
  height: 220px;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:rgba(0,0,0,0.6);
  background-size: 220px 220px;
  position: absolute;
  top: 0;
  left: 0;
  /*
  transition-property: transform,opacity;
  transition-duration: 800ms;
  transition-timing-function: cubic-bezier(0.31,0.47,0,1);
  transform:scale(1.2);
  */
  opacity: 0;
}
.page_char > .inner > div a:hover:after {
  /*transform:scale(1);*/
  opacity: 1;
}
.page_char > .inner > div a[data-char="pollon"]:after {
  background-image: url(../img/character/name_pollon.png);
}
.page_char > .inner > div a[data-char="momo"]:after {
  background-image: url(../img/character/name_momo.png);
}
.page_char > .inner > div a[data-char="cross"]:after {
  background-image: url(../img/character/name_cross.png);
}
.page_char > .inner > div a[data-char="juno"]:after {
  background-image: url(../img/character/name_juno.png);
}
.page_char > .inner > div a[data-char="azoth"]:after {
  background-image: url(../img/character/name_azoth.png);
}
.page_char > .inner > div a[data-char="bambi"]:after {
  background-image: url(../img/character/name_bambi.png);
}
.page_char > .inner > div a[data-char="gai"]:after {
  background-image: url(../img/character/name_gai.png);
}
.page_char > .inner > div a[data-char="vha"]:after {
  background-image: url(../img/character/name_vha.png);
}


.page_char > .inner > div > img {
  clear: both;
  display: block;
  width: 220px;
  height: 60px;
  margin: 0 auto;
}

/*-----------------------*/
/* page_arecibo */
/*-----------------------*/
.page_arecibo .inner img {
  position: absolute;
  left: 50px;
  bottom: 80px;
}

/*-----------------------*/
/* page_bmi */
/*-----------------------*/
.page_bmi .inner img {
  position: absolute;
  left: 50px;
  bottom: 80px;
}

/*-----------------------*/
/* page_graper */
/*-----------------------*/
.page_graper .inner img {
  position: absolute;
  left: 50px;
  bottom: 80px;
}
/*-----------------------*/
/* page_cyber */
/*-----------------------*/
.page_cyber .inner img {
  position: absolute;
  left: 50px;
  top: 50px;
}

/*-----------------------*/
/* page_gaia */
/*-----------------------*/
.page_gaia .inner img {
  position: absolute;
  left: 50px;
  bottom: 80px;
}

/*-----------------------*/
/* page_gaudicode */
/*-----------------------*/
.page_gaudicode .inner img {
  position: absolute;
  left: 50px;
  bottom: 80px;
}


/*-----------------------*/
/* page_logo */
/*-----------------------*/
.page_logo img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top:-300px;
  width: 1000px;
  height: 580px;
  transition-property: width,height;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(0,.77,.44,.99);
}
@media screen and (max-height: 850px) {
  .page_logo img {
    margin-left: -457px;
    margin-top:-300px;
    width: 914px;
    height: 530px;
  }
}
@media screen and (max-height: 720px) {
  .page_logo img {
    margin-left: -414px;
    margin-top:-280px;
    width: 828px;
    height: 480px;
  }
}

/*-----------------------*/
/* page_movie */
/*-----------------------*/
.page_movie .list {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -420px;
  margin-top:-125px;
  width: 840px;
  height: 250px;
}
.page_movie a {
  display: block;
  width: 400px;
  height: 225px;
  position: relative;
  float: left;
  margin: 10px;
  overflow: hidden;
}
.page_movie a img {
  display: block;
  width: 100%;
  height: 100%;
}
.page_movie a div {
  display: block;
  width: 100%;
  height: 32px;
  line-height: 32px;
  position: absolute;
  left: 0;
  bottom: 0;
  background:rgba(0,0,0,0.5);
  text-align: center;
  color:#fff;
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0,.77,.44,.99);
  transform:translate(0,40px);
}
.page_movie a:after {
  content: " ";
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  width: 85px;
  height: 60px;
  margin-top:-30px;
  margin-left:-43px;
  background-image: url(../img/playbtn.png);
  background-repeat: no-repeat;
}
.page_movie a:hover:after {
  background-position: -100px 0;
}
.page_movie a:hover div {
  transform:translate(0,0);
}


/*-----------------------*/
/* footer */
/*-----------------------*/
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 155px;
  width: 100%;
  min-width: 1000px;
  z-index: 500;
  background:#000;
}
.footer .update {
  background: #08baff;
  height: 35px;
}
.footer .update ul {
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
.footer .update .date,
.footer .update .text {
  display: inline-block;
  height: 100%;
  line-height: 35px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
}
.footer .update .date {
  color: #fff;
}
.footer .update .text a,
.footer .update .text {
  color: #000;
}
.footer .logos {
  height: 85px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  font-size: 0;
}
.footer .logos a,
.footer .logos div {
  display: inline-block;
  height: 80px;
  background-image: url(../img/logos.png);
  background-repeat: no-repeat;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  margin-top:2px;
}
.footer .logos .cero {
  background-position: 0 0;
  width: 70px;
}
.footer .logos .mages {
  background-position: -70px 0;
  width: 180px;
}
.footer .logos .fpb {
  background-position: -250px 0;
  width: 90px;
}
.footer .logos .chiyost {
  background-position: -340px 0;
  width: 80px;
}
.footer .copy {
  height: 35px;
  background:#000;
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 35px;
  font-family: Arial;
  letter-spacing: 1px;
}



/*-----------------------*/
/* cover */
/*-----------------------*/
.cover {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 300;
  display: none;
}