@charset "UTF-8";
/* =====================================================
空戦乙女 スカイヴァルキリーズ
===================================================== */
/*
  レイアウト

  各セクション見出し

  ボタン
    - 大サイズボタン
    - その他

　box01

　box02
  - キャラクタ選択ボタン
*/

/* -----------------------------------------------------
レイアウト
----------------------------------------------------- */
body { width: 100%;}

#app333_07 {
  background: url(../../../img/contents_pc/lp/app333/app333_07_bg.jpg) no-repeat top center fixed;
  width: 100%;
  overflow: hidden;
  position: relative;
}

section[class^="box0"]{
  position: relative;
  width: 1800px;
  margin-left: -900px;
  left: 50%;
  text-align: center;
}

section[class^="box0"] > img{vertical-align: bottom;}

#app333_07 .box01{ height:710px;}
#app333_07 .box02{height: 506px;}
#app333_07 .box03{height: 720px;}

/* -----------------------------------------------------
各セクション見出し
----------------------------------------------------- */
section[class*="box"] h1,
section[class*="box"] h2 {
  font-size: 0;
  color: rgba(0,0,0,0);
  width: 100%;
  overflow: hidden;
}

#app333_07 .box02 h2{
  background: url(../../../img/contents_pc/lp/app333/app333_07_pic_01.png) no-repeat center 0;
  height: 866px;
}

#app333_07 .box03 h2{
  background: url(../../../img/contents_pc/lp/app333/app333_07_chara_02.png) no-repeat center 0;
  height: 700px;
  margin-left: 14px;
}


/* -----------------------------------------------------
ボタン
----------------------------------------------------- */
/* 大サイズボタン
----------------------------------------------------- */

/* ホバー時のチラつき防止 */
#app333_07 div.btnStart {
  width: 164px;
  height: 164px;
  position: absolute;
  left: 50%;
  margin-left: 247px;
  bottom: -62px;
  background: url(../../../img/contents_pc/lp/app333/app333_07_btn_01.png) no-repeat 0 0;
  z-index: 30;
}

div.btnStart a {
  display: block;
  color: rgba(0,0,0,0);
  width: 169px;
  height: 0;
  padding-top: 170px;
  overflow: hidden;
  background: url(../../../img/contents_pc/lp/app333/app333_07_btn_01.png) no-repeat 0 0;
  position: relative;
  z-index: 40;
}



/*----- ホバー時 -----*/
div.btnStart a:hover {background-position: 0 -175px;}


/*----- ボタン位置調整 -----*/
#app333_07 .box03 div.btnStart {margin-left: 166px;top: 397px;}


/*----- ボタンbgアニメーション -----*/
.btnStart:before,
.btnStart:after{
  content: "";
  display: block;
  width: 190px;
  height: 190px;
  position: absolute;
  top: -15px;
  left: -15px;
  background: url(../../../img/contents_pc/lp/app333/app333_07_btn_02.png) no-repeat 0 0;
  z-index: 30;
  -webkit-animation: mecaRotate 4s cubic-bezier(.05,1.16,.97,1.12) infinite both;
  -moz-animation: mecaRotate 4s cubic-bezier(.05,1.16,.97,1.12) infinite both;
  animation: mecaRotate 4s cubic-bezier(.05,1.16,.97,1.12) infinite both;
}

@-webkit-keyframes mecaRotate{
  0%,5% {-webkit-transform: rotate(0deg);}
  25%,30% {-webkit-transform: rotate(90deg);}
  50%,55% {-webkit-transform: rotate(180deg);}
  75%,80% {-webkit-transform: rotate(270deg);}
  100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes mecaRotate{
  0%,5% {-webkit-transform: rotate(0deg);}
  25%,30% {-webkit-transform: rotate(90deg);}
  50%,55% {-webkit-transform: rotate(180deg);}
  75%,80% {-webkit-transform: rotate(270deg);}
  100%{-webkit-transform: rotate(360deg);}
}
@keyframes mecaRotate{
  0%,5% {-webkit-transform: rotate(0deg);}
  25%,30% {-webkit-transform: rotate(90deg);}
  50%,55% {-webkit-transform: rotate(180deg);}
  75%,80% {-webkit-transform: rotate(270deg);}
  100%{-webkit-transform: rotate(360deg);}
}


/* アプリボタン
-----------------------------------*/
#app333_07 .appbtn{
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 84px;
  left: 50%;
  margin-left: -440px;
}

#app333_07 .appbtn .apple{margin-right: 10px;}
#app333_07 .appbtn .google{}

#app333_07 .appbtn .apple a{
  display: block;
  background: url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat 0 0;
  background-size: contain;
  width: 200px;
  padding-top: 60px;
  height: 0;
  overflow: hidden;
  text-indent: 100%;
}

#app333_07 .appbtn .google a{
  display: block;
  background: url(../../../img/contents_pc/lp/app333/app333_07_btn_google_02.png) no-repeat 0 0;
  background-size: contain;
  width: 200px;
  padding-top: 60px;
  height: 0;
  overflow: hidden;
  text-indent: 100%;
}





/* -----------------------------------------------------
  box01
----------------------------------------------------- */
#app333_07 .box01 div.chara01 {
    position: absolute;
    width: 1325px;
    padding-top: 709px;
    height: 0;
    overflow: hidden;
    text-indent: 100%;
    background: url(../../../img/contents_pc/lp/app333/app333_07_chara_01.png) no-repeat 0 0;
    left: 50%;
    margin-left: -633px;
    top:-12px;
    -webkit-animation: flying 5s cubic-bezier(.55,-0.27,.56,.97) 0s infinite both;
    animation: flying 5s cubic-bezier(.55,-0.27,.56,.97) 0s infinite both;
 }
 @-webkit-keyframes flying {
 0%   { -webkit-transform: translateY(0px);}
 50% { -webkit-transform: translateY(20px);}
100%{ -webkit-transform: translateY(0px);}
 }
 @keyframes flying {
 0%   { transform: translateY(0px);}
 50% { transform: translateY(20px);}
100%{ transform: translateY(0px);}
 }

#app333_07 .box01 div.text01 {
    position: absolute;
    width: 1045px;
    height: 490px;
    overflow: hidden;
    background: url(../../../img/contents_pc/lp/app333/app333_07_text_02.png) no-repeat 0 0;
    left: 50%;
    margin-left: -566px;
    top: 291px;
}


/* 表示 */
#app333_07 div.inner{
  -webkit-animation: fadeInUp 1.5s ease 0s 1 both;
  animation: fadeInUp 1.5s ease 0s 1 both;
  position: relative;
  z-index:10;
}

@-webkit-keyframes fadeInUp{
    0%  { opacity: 0; -webkit-transform: translateY(30px);}
    100%{ opacity: 1; -webkit-transform: translateY(0px);}
}
@keyframes fadeInUp{
    0%  { opacity: 0; -webkit-transform: translateY(30px);}
    100%{ opacity: 1; -webkit-transform: translateY(0px);}

}

/*#app333_07 .appbtn {
    left: 50%;
}

#app333_07 div.appbtn .apple{
    margin-left: 459px;
    bottom: 81px;
    position: absolute;
    z-index: 10;
}

#app333_07 div.appbtn .google{
    margin-left: 454px;
    bottom: 71px;
    position: absolute;
}
#app333_07 div.appbtn .google img{
    width: 36%;
}*/

.reserveCopyright{
  position: absolute;
  width: 540px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 3px 0;
  bottom: 6px;
  color: #fff;
  text-align: center;
  font-style: 11px;
  z-index: 100;
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 50%,rgba(0,0,0,0) 100%);
}

.reserveCopyright span{
  font-size: 28px;
  line-height: 18px;
  vertical-align: middle;
}


/* 復刻マーク */
#app333_07 .box01 .mark01 {
  position: absolute;
  background: url(../../../img/contents_pc/lp/app333/app333_07_mark_01.png) no-repeat 0 0;
  background-size: contain;
  width: 237px;
  padding-top: 241px;
  height: 0px;
  left: 50%;
  margin-left: -546px;
  top: 121px;
  overflow: hidden;
  text-indent: 100%;
}