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

  各セクション見出し

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

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

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

#app333_03 {
  background: url(../../../img/contents_pc/lp/app333/app333_03_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_03 .box01{ height:710px;}
#app333_03 .box02{ height:866px;}
#app333_03 .box03{ height:780px;}

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

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

#app333_03 .box03 h1{
	background: url(../../../img/contents_pc/lp/app333/app333_03_chara_02.png) no-repeat center 0;
	height: 780px;
}

/*
#app333_03 .box00 h1{
	position:fixed;
	color: rgba(0,0,0,0);
	width: 1325px;
	height: 709px;
	left:50%;
	margin-left:-664px;
	z-index: 100;
	overflow: hidden;
	background: url(../../../img/contents_pc/lp/app333/app333_03_effect_01.png) no-repeat center 0;
}
*/

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

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

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

.box02 div.btnStart a{	background-position: 0 -328px;	}
.box03 div.btnStart a{	background-position: 0 -656px;	}


/*----- ホバー時 -----*/
div.btnStart a:hover { background-position: 0 -164px; }
.box02 div.btnStart a:hover { background-position: 0 -492px; }
.box03 div.btnStart a:hover { background-position: 0 -820px; }


/*----- ボタン位置調整 -----*/
#app333_03 .box02 div.btnStart { left:190px; bottom:85px; }


/*----- ボタンbgアニメーション -----*/
.btnStart:before,
.btnStart:after{
	content: "";
	display: block;
	width: 190px;
	height: 190px;
	position: absolute;
	top:-13px;
	left:-13px;
	background: url(../../../img/contents_pc/lp/app333/app333_03_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);}
}

/* -----------------------------------------------------
	box01
----------------------------------------------------- */

#app333_03 .box01 div.chara01 {
    position: absolute;
    width: 1325px;
    height: 709px;
    overflow: hidden;
    background: url(../../../img/contents_pc/lp/app333/app333_03_chara_01.png) no-repeat 0 0;
    left: 50%;
    margin-left: -663px;
	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_03 .box01 div.text01 {
    position: absolute;
    width: 1325px;
    height: 709px;
    overflow: hidden;
    background: url(../../../img/contents_pc/lp/app333/app333_03_text_01.png) no-repeat 0 0;
    left: 50%;
    margin-left: -663px;
	top:-12px;
}

#app333_03 .box01 div.logo01 {
    position: absolute;
    width: 332px;
    height: 185px;
    overflow: hidden;
    background: url(../../../img/contents_pc/lp/app333/app333_03_logo_01.png) no-repeat 0 0;
    left: 50%;
    margin-left: -166px;
	bottom:50px;
	z-index:100;
}

#app333_03 .box01 div.kirakira01 {
    position: absolute;
    width: 1325px;
    height: 709px;
    overflow: hidden;
    background: url(../../../img/contents_pc/lp/app333/app333_03_effect_01.png) no-repeat 0 0;
    left: 50%;
    margin-left: -663px;
	top:-12px;
	-webkit-animation: shain 1.5s ease 0s infinite both;
    animation: shain 1.5s ease 0s infinite both;
}
@-webkit-keyframes shain{
    0%  { opacity: 0;}
    50%  { opacity: 1;}
    100%{ opacity: 0;}
}
@keyframes shain{
    0%  { opacity: 0;}
    50%  { opacity: 1;}
    100%{ opacity: 0;}
}


/* 表示 */
#app333_03 div.inner{
	-webkit-animation: fadeInUp 1.5s ease 0s 1 both;
    animation: fadeInUp 1.5s ease 0s 1 both;
}

@-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);}

}


/* -----------------------------------------------------
	box02
----------------------------------------------------- */

/* フレーム */
#app333_03 .box02 div.frame01 {
    position: absolute;
    width: 1559px;
    height: 866px;
    overflow: hidden;
    background: url(../../../img/contents_pc/lp/app333/app333_03_pic_02.png) no-repeat 0 0;
    left: 50%;
    margin-left: -850px;
	top:1px;
}

/* キャラ */

div[class*="charainfo0"] {
    position: absolute;
    width: 1559px;
    height: 866px;
    overflow: hidden;
    left: 50%;
    margin-left: -850px;
	top:1px;
	opacity: 0;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.box02 div.charainfo01 { background: url(../../../img/contents_pc/lp/app333/app333_03_intro_01.png) no-repeat 0 0;}

.box02 div.charainfo02 { background: url(../../../img/contents_pc/lp/app333/app333_03_intro_02.png) no-repeat 0 0;}

.box02 div.charainfo03 { background: url(../../../img/contents_pc/lp/app333/app333_03_intro_03.png) no-repeat 0 0;}

.box02 div.charainfo04 { background: url(../../../img/contents_pc/lp/app333/app333_03_intro_04.png) no-repeat 0 0;}

.box02 div.charainfo05 { background: url(../../../img/contents_pc/lp/app333/app333_03_intro_05.png) no-repeat 0 0;}

.box02 div[class*="charainfo"].on { opacity: 1!important;}


/* -----------------------------------------------------
	character selectbtn
----------------------------------------------------- */

p[class*="selectbtn"] {
    position: absolute;
    width: 310px;
    height: 73px;
    left: 50%;
    margin-left: -490px;
    overflow: hidden;
	top: 212px;
	cursor: pointer;
    background: url(../../../img/contents_pc/lp/app333/app333_03_btn_03.png) no-repeat 0 0;
}

.box02 p.selectbtn02 { top:286px; background-position: 0 -146px; }
.box02 p.selectbtn03 { top:359px; background-position: 0 -292px; }
.box02 p.selectbtn04 { top:432px; background-position: 0 -438px; }
.box02 p.selectbtn05 { top:505px; background-position: 0 -584px; }

/*----- ホバー時 -----*/

.box02 p.selectbtn01:hover {margin-left: -475px; background-position: 0 -73px;}
.box02 p.selectbtn02:hover {margin-left: -475px; background-position: 0 -219px;}
.box02 p.selectbtn03:hover {margin-left: -475px; background-position: 0 -365px;}
.box02 p.selectbtn04:hover {margin-left: -475px; background-position: 0 -511px;}
.box02 p.selectbtn05:hover {margin-left: -475px; background-position: 0 -658px;}