@charset "utf-8";

@import "../../../common/css/layout.css";

/*-------------------------------------------------------------------------
  Key Visual
/*-----------------------------------------------------------------------*/

#kv {
}
img {
  width: 100%;
  height: auto;
}

#container {
  position: relative;
}

.logo-3ds {
  width: 34.13%;
  position: absolute;
  top: 0.42%;
  right: 2%;
  z-index: 10;
}

#key-visual {
  position: relative;
}
  #key-visual .badge {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: 35.33%;
    z-index: 15;
  }


/*-------------------------------------------------------------------------
  copy
/*-----------------------------------------------------------------------*/
#copy .copy01 img{
  position: relative;
}
  #copy .copy01 .anm img{
    transition: all 0.3s ease-out;
    width: 47%;
    top: -81vw;
    right: -115%;
    transition-delay: 1s;

  }
  #copy.show .copy01 .anm img{
    right: -54%;
  }

#copy .copy02{
  position: relative;
  margin-top: -75.5vw;
}
  #copy .copy02 .anm img{
    width: 36%;
    top: -49vw;
    left: 5%;
    transform: scale(0);
    transition: transform .3s;
    transition-delay: 1.5s;
    transition-timing-function: cubic-bezier(0.680, -0.150, 0.265, 1.650);
  }
  #copy.show .copy02 .anm img{
    transform: scale(1);
  }

/*-------------------------------------------------------------------------
  character
/*-----------------------------------------------------------------------*/
#character{
  margin-top: -45vw;
}
#character .character01 .anm img{
  position: relative;
}
  #character .character01 .anm img{
    transition: all 0.3s ease-out;
    width: 55%;
    top: -75vw;
    right: -115%;
  }
  #character .show .character01 .anm img{
    right: -52%;
  }

    #character .border_black01{
    top: -154vw;
    position: relative;
    }

#character .character02{
  margin-top: -74.5vw;
}
#character .character02 .anm img{
  position: relative;
}
  #character .character02 .anm img{
    transition: all 0.3s ease-out;
    width: 54%;
    top: -75.5vw;
    left: -115%;
  }
  #character .show .character02 .anm img{
    left: 1%;
  }

#character .character03{
  margin-top: -81.6vw;
}
#character .character03 .anm img{
  position: relative;
}
  #character .character03 .anm img{
    transition: all 0.3s ease-out;
    width: 65%;
    top: -69.5vw;
    right: -135%;
  }
  #character .show .character03 .anm img{
    right: -35%;
  }

#character .character04{
  margin-top: -64.9vw;
}
#character .character04 .anm img{
  position: relative;
}
  #character .character04 .anm img{
    transition: all 0.3s ease-out;
    width: 57%;
    top: -63.5vw;
    left: -115%;
  }
  #character .show .character04 .anm img{
    left: 0%;
  }

#character .character05{
  margin-top: -62.3vw;
}
#character .character05 .anm img{
  position: relative;
}
  #character .character05 .anm img{
    transition: all 0.3s ease-out;
    width: 73%;
    top: -69.5vw;
    right: -135%;
  }
  #character .show .character05 .anm img{
    right: -26%;
  }


#character .character06{
  margin-top: -72.3vw;
}
#character .character06 .anm img{
  position: relative;
}
  #character .character06 .anm img{
transition: all 0.3s ease-out;
    width: 59%;
    top: -70.1vw;
    left: -115%;
  }
  #character .show .character06 .anm img{
    left: -2%;
  }
  #character .border_black02{
  top: -159.5vw;
  position: relative;
  }


/*-------------------------------------------------------------------------
  footer_nav
/*-----------------------------------------------------------------------*/

#footer_nav {
  margin-top:-105.5vw;
}