@charset "UTF-8";

/* ページ構成
---------------------------------------------------------- */
#app313_02{
	background: #ff9d97;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
	/*background:url(../../../img/contents_pc/lp/app313/app313_pc_a01_bg.png) repeat-x center top0;*/
}


#app313_02 section[class^="box0"]{
	position: relative;
	width: 1900px;       /* 中央揃え指定 */
	left: 50%;           /* 中央揃え指定 */
	margin-left: -950px; /* 中央揃え指定 */
}

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

#app313_02 section[class^="box0"] p{
	position: absolute;
}

/* ボタン
---------------------------------------------------------- */
/* 疑似クラスを使うためのボタンコンテナ */
#app313_02 section[class^="box0"] p.btn{
	position: absolute;
	width: 220px;
	height: 220px;
	left: 50%;
	z-index: 20;
}

/* ボタン画像01 */
#app313_02 section[class^="box0"] a{
	background: url(../../../img/contents_pc/lp/app313/app313_02_btn_sprite.png) no-repeat left top;
	background-position: -39px 3px;
	position: absolute;
	width: 220px;
	height: 220px;
	z-index: 100;
	line-height:99em;
	overflow:hidden;
}
/* hover指定 */
#app313_02 section[class^="box0"] a:hover{background-position: -39px -231px;margin-top: 1px;}

/* ボタン位置調整 */
#app313_02 .box01 p.btn{ top: 410px; margin-left: 190px;}/* 1段目 */
#app313_02 .box03 p.btn{ top: 629px;margin-left: 290px;}/* 3段目 */


/* 雲 */
#app313_02 .box01 p.btn:before,
#app313_02 .box03 p.btn:before,
#app313_02 .box01 p.btn:after,
#app313_02 .box03 p.btn:after{
	content: "";
	width: 220px;
	padding-top: 70px;
	position: absolute;
	left: 50%;
	margin-left: -75px;
	top: 10px;
	background: url(../../../img/contents_pc/lp/app313/app313_02_btn_sprite.png) no-repeat 0 0;
	background-position: -70px -475px;
	z-index: 2;
	-webkit-animation: cloudMove 10s ease-in-out 0.1s infinite both;
	animation: cloudMove 10s ease-in-out 0.1s infinite both;
}

#app313_02 .box01 p.btn:after,
#app313_02 .box03 p.btn:after{
	background: url(../../../img/contents_pc/lp/app313/app313_02_btn_sprite.png) no-repeat 0 0;
	background-position: -16px -566px;
	top: 150px;
	margin-left: -125px;
	-webkit-animation: cloudMove 7s ease-in-out 0.1s infinite both;
	animation: cloudMove 7s ease-in-out 0.1s infinite both;
}

@-webkit-keyframes cloudMove{
	0%,10%,100%{ -webkit-transform:translate3d(-15px,0,0);}
	60%{ -webkit-transform:translate3d(10px,0,0) scale(1.05,1.05);}
}
@keyframes cloudMove{
	0%,10%,100%{ transform:translate3d(-15px,0,0);}
	60%{ transform:translate3d(10px,0,0) scale(1.05,1.05);}
}


/* box_01（上段）
---------------------------------------------------------- */
#app313_02 .box01 h1{
	background: url(../../../img/contents_pc/lp/app313/app313_02_mainpic_01.jpg) no-repeat center top;
	background-size: contain;
	width: 1900px;
	height: 0;
	padding-top: 660px;
	line-height: 200%;
	overflow: hidden;
}

#app313_02 .box01 p.kaguralogoText{
	position: absolute;
	background:url(../../../img/contents_pc/lp/app313/app313_02_img_sprite_01.png) no-repeat left top;
	height: 0;
	overflow: hidden;
	line-height: 200%;
	background-size: contain;
	width: 820px;
	padding-top: 657px;
	top: 0px;
	left: 50%;
	margin-left: -395px;
	z-index: 10;
}

#app313_02 div.animateCharactor{
  top: 0px;
  left: 50%;
  z-index: 10;
}

#app313_02 div.animateCharactor p{
  background:url(../../../img/contents_pc/lp/app313/app313_02_img_sprite_02.png) no-repeat;
  position: absolute;
  overflow:hidden;
  height: 0;
  line-height: 200%;
}

/*妖怪左*/
#app313_02 div.animateCharactor .youkai01{
  background-position: -580px -130px;
  width: 460px;
  padding-top: 490px;
  top: 270px;
  left: 50%;
  margin-left: -720px;
  z-index: 1;
  -webkit-animation: yokai 2.5s ease 0s 1 both;
  animation: yokai 2.5s ease 0s 1 both;
}

/*SD妖怪右*/
#app313_02 div.animateCharactor .youkai02{
  background-position: -1053px -210px;
  width: 310px;
  padding-top: 380px;
  top: 320px;
  left: 50%;
  margin-left: 330px;
  z-index: 1;
  -webkit-animation: yokai 2.5s ease 0s 1 both;
  animation: yokai 2.5s ease 0s 1 both;
}
@-webkit-keyframes yokai{
0%{
	padding-top:490px; opacity: 0;
}
40%,
80%{
	padding-top: 490px; opacity: 1;
}
100%{
	padding-top:0px; opacity: 0;
}
}
@keyframes yokai{
0%{
	padding-top:490px; opacity: 0;
}
40%,
80%{
	padding-top: 490px; opacity: 1;
}
100%{
	padding-top:0px; opacity: 0;
}
}


/*嵐山いぶき*/
#app313_02 div.animateCharactor .ibuki{
  background-position: -543px -670px;
  width: 670px;
  padding-top: 590px;
  top: 190px;
  left: 50%;
  margin-left: -170px;
  z-index: 1;
  -webkit-animation: slideIn01 .4s ease 1.5s 1 both;
  animation: slideIn01 .4s ease 1.5s 1 both;
}
@-webkit-keyframes slideIn01{
0%{
	-webkit-transform: translate(400px,-100px) scale(1.3,1.3); opacity: 0;
}
100%{
	-webkit-transform: translate(0px,0px); opacity: 1;
}
}
@keyframes slideIn01{
0%{
	transform: translate(400px,-100px) scale(1.3,1.3); opacity: 0;
}
100%{
	transform: translate(0px,0px); opacity: 1;
}
}

/*雷道なずな*/
#app313_02 div.animateCharactor .nazuna{
  background-position: 7px -670px;
  width: 510px;
  padding-top: 690px;
  top: 220px;
  left: 50%;
  margin-left: -420px;
  z-index: 1;
  -webkit-animation: slideIn02 .5s ease 1.5s 1 both;
  animation: slideIn02 .5s ease 1.5s 1 both;
}
@-webkit-keyframes slideIn02{
0%{
	-webkit-transform: translate(-300px,-100px) scale(1.3,1.3); opacity: 0;
}
100%{
	-webkit-transform: translate(0px,0px); opacity: 1;
}
}
@keyframes slideIn02{
0%{
	transform: translate(-300px,-100px) scale(1.3,1.3); opacity: 0;
}
100%{
	transform: translate(0px,0px); opacity: 1;
}
}


/* 斬撃左 */
#app313_02 div.animateCharactor .slashLeft{
    background: url(../../../img/contents_pc/lp/app313/slash_left.png) no-repeat 0 0;
    overflow:hidden;
    top: 340px;
    left: 50%;
    margin-left: -590px; /* 位置指定 */
    width: 240px;
    padding-top: 240px; /* 表示領域の指定 */
    z-index: 2;
    animation: slash .2s steps(8) 1.5s 1 both;
}

/* 斬撃左 */
#app313_02 div.animateCharactor .slashRight{
    background: url(../../../img/contents_pc/lp/app313/slash_right.png) no-repeat 0 0;
    overflow:hidden;
    top: 340px;
    left: 50%;
    margin-left: 380px; /* 位置指定 */
    width: 240px;
    padding-top: 240px; /* 表示領域の指定 */
    z-index: 2;
    -webkit-animation: slash .2s steps(8) 1.5s 1 both;
    animation: slash .2s steps(8) 1.5s 1 both;
}
@-webkit-keyframes slash{
0%  { background-position: 0px 0px; -webkit-transform: scale(2,2); opacity: 0;}  
10% { background-position: 0px 0px; -webkit-transform: scale(2,2); opacity: 1; }
100%{ background-position: -1920px 0px; -webkit-transform: scale(1.5,1.5); }
}

@keyframes slash{
0%  { background-position: 0px 0px; transform: scale(2,2); opacity: 0;}  
10% { background-position: 0px 0px; transform: scale(2,2); opacity: 1; }
100%{ background-position: -1920px 0px; transform: scale(1.5,1.5); }
}


/* kaguraBox_02（中段）
---------------------------------------------------------- */
#app313_02 .box02 h1{
	background: url(../../../img/contents_pc/lp/app313/app313_02_mainpic_02-01.jpg) no-repeat center top;
	background-size: contain;
	width: 1900px;
	height: 0;
	padding-top: 1744px;
	line-height: 200%;
	overflow: hidden;
}

/* 人物紹介ボード */
#app313_02 .box02 p.charaBoard{
	background:url(../../../img/contents_pc/lp/app313/app313_02_mainpic_02-02.jpg) no-repeat center top;
	width: 1129px;
	padding-top: 1738px;
	height: 0;
	line-height: 200%;
	overflow: hidden;
	top: 0px;
	left: 50%;
	margin-left: -564.5px;
	z-index: 10;
}

/*SDキャラ*/
#app313_02 .box02 div.sdChara{
	top: 0px;
	left: 50%;
	margin-left: -564.5px;
}

/*SD共通*/
#app313_02 .box02 div.sdChara p{
	background:url(../../../img/contents_pc/lp/app313/app313_02_img_sprite_02.png) no-repeat;
	position: absolute;
	overflow:hidden;
	height: 0;
	line-height: 200%;
	z-index: 11;
}

/*SDいぶき*/
#app313_02 .box02 div.sdChara .sdIbuki{
  background-position: -30px -20px;
  width: 250px;
  padding-top: 290px;
  top: 500px;
  left: 50%;
  margin-left: -590px;
}

/*SDなずな*/
#app313_02 .box02 div.sdChara .sdNazuna{
  background-position: -287px -30px;
  width: 270px;
  padding-top: 280px;
  top: 511px;
  left: 50%;
  margin-left: 360px;
}

/*SD護*/
#app313_02 .box02 div.sdChara .sdMamoru{
  background-position: 7px -320px;
  width: 275px;
  padding-top: 310px;
  top: 1240px;
  left: 50%;
  margin-left: -590px;
}

/*SD勇*/
#app313_02 .box02 div.sdChara .sdYuu{
  background-position: -277px -332px;
  width: 230px;
  padding-top: 280px;
  top: 1261px;
  left: 50%;
  margin-left: 360px;
}

/* JS用アニメ指定 */
.popup{
  -webkit-animation: popup .3s ease 0s 1 both;
  animation: popup .3s ease 0s 1 both;
}
.popup02{
  -webkit-animation: popup .3s ease .2s 1 both;
  animation: popup .3s ease .2s 1 both;
}

@-webkit-keyframes popup{
0%  { -webkit-transform: scale(0,0);opacity:0;}
90% { -webkit-transform: scale(1.2,1.2);opacity:1;}
100%{ -webkit-transform: scale(1,1);opacity:1;}
}

@keyframes popup{
0%  { transform: scale(0,0);opacity:0;}
90% { transform: scale(1.2,1.2);opacity:1;}
100%{ transform: scale(1,1);opacity:1;}
}


/* kaguraBox_03（下段）
---------------------------------------------------------- */
#app313_02 .box03 h1{
	background: url(../../../img/contents_pc/lp/app313/app313_02_mainpic_03.jpg) no-repeat center top;
	background-size: contain;
	width: 1900px;
	height: 0;
	padding-top: 954px;
	line-height: 200%;
	overflow: hidden;
}






/* ---------------------------------------------------------
　舞い散るsakuraアニメーション
--------------------------------------------------------- */
/* sakura_02アニメーション
--------------------------------------------------------- */
.sakura_01{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_01 25s ease-in-out 0s infinite both;
	animation:sakura_01 25s ease-in-out 0s infinite both;
}

.sakura_01_01{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_01 35s ease-in-out 20s infinite both;
	animation:sakura_01 35s ease-in-out 20s infinite both;

}

@-webkit-keyframes sakura_01{
0%	{opacity:0; -webkit-transform:rotate(0deg); top:-5%; margin-left:400px;}
10%	{opacity:1;}
30%	{-webkit-transform:rotate(-360deg); margin-left:600px;}
65%	{-webkit-transform:rotate(360deg); margin-left:400px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(0deg); top:105%; margin-left:600px;} 
}
@keyframes sakura_01{
0%	{opacity:0; transform:rotate(0deg); top:-5%; margin-left:400px;}
10%	{opacity:1;}
30%	{transform:rotate(-360deg); margin-left:600px;}
65%	{transform:rotate(360deg); margin-left:400px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(0deg); top:105%; margin-left:600px;} 
}


/* sakura_02アニメーション
--------------------------------------------------------- */
.sakura_02{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-filter: blur(1px);
	-webkit-animation:sakura_02 30s ease-in-out 0s infinite both;
	animation:sakura_02 30s ease-in-out 0s infinite both;
}

.sakura_02_01{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_02 30s ease-in-out 15s infinite both;
	animation:sakura_02 30s ease-in-out 15s infinite both;
}


@-webkit-keyframes sakura_02{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.8); top:-5%; margin-left:-800px;}
10%	{opacity:1;}
30%	{-webkit-transform:rotate(180deg) scale(-0.8); margin-left:-600px;}
65%	{-webkit-transform:rotate(-480deg) scale(-1); margin-left:-800px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-600px;} 
}
@keyframes sakura_02{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.8); top:-5%; margin-left:-800px;}
10%	{opacity:1;}
30%	{transform:rotate(180deg) scale(-0.8); margin-left:-600px;}
65%	{transform:rotate(-480deg) scale(-1); margin-left:-800px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-600px;} 
}


/* sakura_03アニメーション
--------------------------------------------------------- */
.sakura_03{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_03 32s ease-in-out 10s infinite both;
	animation:sakura_03 32s ease-in-out 10s infinite both;
}

.sakura_03_01{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-filter: blur(2px);
	-webkit-animation:sakura_03 32s ease-in-out 20s infinite both;
	animation:sakura_03 32s ease-in-out 20s infinite both;
}

@-webkit-keyframes sakura_03{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.6); top:-5%; margin-left:-700px;}
10%	{opacity:1;}
30%	{-webkit-transform:rotate(180deg) scale(-0.8); margin-left:-900px;}
65%	{-webkit-transform:rotate(-480deg) scale(-0.6); margin-left:-700px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-900px;} 
}
@keyframes sakura_03{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.6); top:-5%; margin-left:-700px;}
10%	{opacity:1;}
30%	{transform:rotate(180deg) scale(-0.8); margin-left:-900px;}
65%	{transform:rotate(-480deg) scale(-0.6); margin-left:-700px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(0deg) scale(-0.8); top:105%; margin-left:-900px;} 
}


/* sakura_04アニメーション
--------------------------------------------------------- */
.sakura_04{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_04 29s ease-in-out 5s infinite both;
	animation:sakura_04 29s ease-in-out 5s infinite both;
}

.sakura_04_01{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-filter: blur(2px);
	-webkit-animation:sakura_04 29s ease-in-out 14s infinite both;
	animation:sakura_04 29s ease-in-out 14s infinite both;
}

@-webkit-keyframes sakura_04{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:700px;}
10%	{opacity:1;}
20%	{-webkit-transform:rotate(180deg) scale(-0.9); margin-left:500px;}
40%	{-webkit-transform:rotate(-480deg) scale(-0.6); margin-left:700px;}
60%	{-webkit-transform:rotate(0deg) scale(-0.6); margin-left:600px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.8); top:105%; margin-left:400px;} 
}
@keyframes sakura_04{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:700px;}
10%	{opacity:1;}
20%	{transform:rotate(180deg) scale(-0.9); margin-left:500px;}
40%	{transform:rotate(-480deg) scale(-0.6); margin-left:700px;}
60%	{transform:rotate(0deg) scale(-0.6); margin-left:600px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(-360deg) scale(-0.8); top:105%; margin-left:400px;} 
}


/* sakura_05アニメーション
--------------------------------------------------------- */
.sakura_05{
	height:20px;
	width:20px;
	position:absolute;
	top:-10%;/* IE9以下用 画面外に飛ばす */
	left:50%;
	z-index:1000;
	-webkit-animation:sakura_05 40s ease-in-out 8s infinite both;
	animation:sakura_05 40s ease-in-out 8s infinite both;
}

@-webkit-keyframes sakura_05{
0%	{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:200px;}
10%	{opacity:1;}
20%	{-webkit-transform:rotate(180deg) scale(-0.9); margin-left:-300px;}
40%	{-webkit-transform:rotate(-480deg) scale(-0.7); margin-left:200px;}
60%	{-webkit-transform:rotate(0deg) scale(-0.8); margin-left:-200px;}
90%	{opacity:1;} 
100%{opacity:0; -webkit-transform:rotate(-360deg) scale(-0.6); top:105%; margin-left:300px;} 
}
@keyframes sakura_05{
0%	{opacity:0; transform:rotate(-360deg) scale(-0.5); top:-5%; margin-left:200px;}
10%	{opacity:1;}
20%	{transform:rotate(180deg) scale(-0.9); margin-left:-300px;}
40%	{transform:rotate(-480deg) scale(-0.7); margin-left:200px;}
60%	{transform:rotate(0deg) scale(-0.8); margin-left:-200px;}
90%	{opacity:1;} 
100%{opacity:0; transform:rotate(-360deg) scale(-0.6); top:105%; margin-left:300px;} 
}