@charset "UTF-8";

/* ==================================================================
CSS information
style info :「INDEX」 用
================================================================== */
@-webkit-keyframes fallin {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(3, 3, 3);
            transform: scale3d(3, 3, 3);
  }
  20% {
    opacity:0.6;
    -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
  }
  40% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  80% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes fallin {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(3, 3, 3);
            transform: scale3d(3, 3, 3);
  }
  20% {
    opacity:0.6;
    -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
  }
  40% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  80% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { width: 100%; height: 814px; position: relative;}

#mv-inner { position: absolute; top: 0; left: 0; width: 100%; height: 814px;}

#visual { width: 100%; height: auto; position: absolute; top: 0; left: 50%; margin-left: -800px; z-index: 0;}

.btn-guard {
	margin-left:230px;
	position:absolute;
	left:50%; bottom:12px;
	-webkit-animation: fallin 0.5s ease 1s;
	animation: fallin 0.5s ease 1s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.btn-trial{
  margin-left:-495px;
  position:absolute;
  left:50%; bottom:12px;
  -webkit-animation: fallin 0.55s ease 1.15s;
  animation: fallin 0.55s ease 1.15s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
}

/* #mainlogo
-------------------------------------------------------- */
#mainlogo { position: absolute; top: 465px; left: 50%; margin-left: -295px; z-index: 1; text-align: center; }
#mainlogo img { position: relative;}

#copy { position: absolute; top: 65px; left: 50%; margin-left: -424px; z-index: 2; text-align: center; width: 848px; height: 87px;}
#copy img { position: relative;}

.banner-specialmovie{
  width: 922px;
  margin: 0 auto 15px auto;
}

/* --------------------------------------------------------
#spec
-------------------------------------------------------- */
#spec-wrap { width: 100%; position: relative; background: #001223 url(../_img/index/spec_bg.png) top center repeat-x;}
#spec { width: 920px; margin: 0 auto; position: relative; padding: 12px 0; }

#spec .spec-box .btn-more { position:absolute; right:0; bottom:12px; }
#spec .spec-box .btnset { position:absolute; top:0; left:0; }
#spec .spec-box .btnset li { position:absolute; }
#spec .spec-box .btnset .amiibo { top:85px; left:80px; }
#spec .spec-box .btnset .cero { top:85px; left:118px; }
#spec .spec-box .btnset .btn_detail { top:81px; left:469px;}

#spec .btn-interview{position: absolute;right: 0;top: 10px;}
#spec .btn-more{position: absolute;right: 0;top: 101px;}

/* #spec #sns-box
-------------------------------------------------------- */
#footer #sns-box { width: 80px; position: absolute; top: -1px; right: 20px; letter-spacing: -.45em; font-size: 0; text-align: right;}
#sns-box li { display: inline-block; text-align: left; margin-left: 10px; letter-spacing: normal; }
#sns-box li a { margin: 0px; }

#copyright{
  margin-right: 100px;
}
#footer{
  height: 42px;
}


/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forDP
---------------------------------------------------------------------------------------------------------------- */
.forDP #cboxClose { top: 0px; right: 10px;}