@charset "utf-8";
/* CSS Document */


/* 基本レイアウト
-----------------------------------------------------------*/
.stage{
	width:1000px;
	height:1981px;
	position: relative;
}
.stage .scene {
	width:1000px;
	position: relative;
  margin-top: -32px;
	overflow: hidden;
}
.stage .scene2,
.stage .scene3,
.stage .scene4,
.stage .scene5 {
	height:616px;
}
.stage #bgCongrats {
	position: absolute;
	top:0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	display: none;
}
.stage #gameStage {
	position: absolute;
	top:0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	display: none;
}
.stage #gameFrame {
	position: absolute;
	top:0;
	left: 0;
	z-index: 10;
	pointer-events: none;
	display: none;
}
.scene1 .gameBtn_1,
.scene1 .gameBtn_2,
.scene2 .lead_1,
.scene2 .lead_2,
.scene2 .lead_3,
.scene3 #timeCount,
.scene3 #characterMatching,
.scene3 #characterStage,
.scene4 .message,
.scene4 .congrat,
.scene5 .message {
	position: absolute;
}

/* ボタンエフェクト
-----------------------------------------------------------*/
.scene1 .gameBtn.effect,
.scene5 .finalBtn li a.effect {
	display: block;
	animation-name:btn_effect;
	animation-timing-function:ease-in-out;
 	animation-duration:500ms;
	transform-origin: center center;
}
@-webkit-keyframes btn_effect {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.1, 0.8) translate(0%, 0%); }
  50%  { transform: scale(0.8, 1.1) translate(0%, 0%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@keyframes btn_effect {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.1, 0.8) translate(0%, 0%); }
  50%  { transform: scale(0.8, 1.1) translate(0%, 0%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* .scene1
-----------------------------------------------------------*/
.scene1 .gameBtn_1 {
	top:520px;
	left: 270px;
	cursor: pointer;
}
.scene1 .gameBtn_2 {
	bottom:75px;
	left: 270px;
	cursor: pointer;
}

/* .scene2
-----------------------------------------------------------*/
.scene2 .lead_1 {
	pointer-events: none;
	top: 155px;
	left: 48px;
	width: 904px;
	text-align: center;
}
.scene2 .lead_2 {
	bottom: 122px;
	left: 270px;
	width: 46%;
	text-align: center;
}
.scene2 .lead_3 {
	bottom: 122px;
	left: 222px;
	width: 56%;
	text-align: center;
}
.scene2 .lead_1 img,
.scene2 .lead_2 img,
.scene2 .lead_3 img {
	width: 100%;
}
.scene2 .lead_2,
.scene2 .lead_3 {
	pointer-events: none;
	opacity: 0;
}
.scene2 .lead_2.visible {
	animation-name:lead_2_visble;
	animation-timing-function:ease-in-out;
 	animation-duration:2000ms;
}
@-webkit-keyframes lead_2_visble {
	0% {opacity: 0;-webkit-transform:scale(1.8, 1.8);}
	30% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
	50% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
	100% {opacity: 0;-webkit-transform:scale(1.0, 1.0);}
}
@keyframes lead_2_visble {
	0% {opacity: 0;transform:scale(1.8, 1.8);}
	30% {opacity: 1;transform:scale(1.0, 1.0);}
	50% {opacity: 1;transform:scale(1.0, 1.0);}
	100% {opacity: 0;transform:scale(1.0, 1.0);}
}
.scene2 .lead_3.visible {
	animation-name:lead_3_visble;
	animation-timing-function:ease-in-out;
 	animation-duration:1200ms;
}
@-webkit-keyframes lead_3_visble {
	0% {opacity: 0;-webkit-transform:scale(1.0, 1.0);}
	30% {opacity: 1;}
	100% {opacity: 0;-webkit-transform:scale(1.4, 1.4);}
}
@keyframes lead_3_visble {
	0% {opacity: 0;transform:scale(1.0, 1.0);}
	30% {opacity: 1;}
	100% {opacity: 0;transform:scale(1.4, 1.4);}
}
.scene2 #kirakira_3_AreaWrap{
	pointer-events: none;
	width: 1000px;
	height: 616px;
	position: absolute;
	top:0;
	left:0;
}
.scene2 #kirakira_3_Area{
	width: 1000px;
	height: 616px;
	position:relative;
}
.scene2 #kirakira_3_Area img{
	position: absolute;
	display:none;
	width:120px;
}

/* .scene3
-----------------------------------------------------------*/
.stage .scene3 {
	position: absolute;
	top:0;
	left:0;
}
.scene3 #timeCount {
	bottom: 57px;
	left: 28px;
	width: 130px;
	padding: 0 70px 0 0;
	line-height: 1;
	font-size: 70px;
	font-weight: bold;
	color: #DD0D76;
	text-align: right;
}
.scene3 #timeCount.effect {
	animation-name:timeCountEffect;
	animation-timing-function:ease-in-out;
 	animation-duration:300ms;
	opacity: 1;
	transform-origin: center bottom;
}
@-webkit-keyframes timeCountEffect {
	0% {opacity: 0;-webkit-transform:scale(1.4, 1.4);}
	100% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
}
@keyframes timeCountEffect {
	0% {opacity: 0;transform:scale(1.4, 1.4);}
	100% {opacity: 1;transform:scale(1.0, 1.0);}
}
.scene3 #characterMatching {
	top: 78px;
	left: 70px;
}
.scene3 #characterStage {
	top: 56px;
	left: 291px;
	width: 704px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.scene3 #characterStage .chara {
	width: 14%;
	opacity: 0;
	position: absolute;
}
.scene3 #characterStage .chara.visible {
	animation-name:charaVisible;
	animation-timing-function:ease-in-out;
 	animation-duration:500ms;
	opacity: 1;
	transform-origin: center top;
}
@-webkit-keyframes charaVisible {
	from,
  20%,
  40%,
  60%,
  80%,
  to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3) translateY(80px);
        transform: scale3d(0.3, 0.3, 0.3) translateY(80px);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1) translateY(0);
        transform: scale3d(1, 1, 1) translateY(0);
    }
}
@keyframes charaVisible {
	from,
  20%,
  40%,
  60%,
  80%,
  to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3) translateY(80px);
        transform: scale3d(0.3, 0.3, 0.3) translateY(80px);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1) translateY(0);
        transform: scale3d(1, 1, 1) translateY(0);
    }
}
/*パターンID:0のときのキャラクター配置*/
.scene3[data-pattern-id="0"] #characterStage .chara_1 {
	top:39px;
	left:-1px;
	width:69px;
}
.scene3[data-pattern-id="0"] #characterStage .chara_2 {
	top:351px;
	left:266px;
	width:77px;
}
.scene3[data-pattern-id="0"] #characterStage .chara_3 {
	top:92px;
	left:70px;
	width:93px;
}
.scene3[data-pattern-id="0"] #characterStage .chara_4 {
	top:30px;
	left:168px;
	width:75px;
}
.scene3[data-pattern-id="0"] #characterStage .chara_5 {
	top:72px;
	left:254px;
	width:72px;
}
.scene3[data-pattern-id="0"] #characterStage .chara_6 {
	top:27px;
	left:349px;
	width:75px;
}		
.scene3[data-pattern-id="0"] #characterStage .chara_7 {
	top:35px;
	left:464px;
	width:71px;
}		
.scene3[data-pattern-id="0"] #characterStage .chara_8 {
	top:24px;
	left:560px;
	width:88px;
}			
.scene3[data-pattern-id="0"] #characterStage .chara_9 {
	top:215px;
	left:0x;
	width:91px;
}					
.scene3[data-pattern-id="0"] #characterStage .chara_10 {
	top:239px;
	left:99px;
	width:80px;
}	
.scene3[data-pattern-id="0"] #characterStage .chara_11 {
	top:195px;
	left:187px;
	width:74px;
}			
.scene3[data-pattern-id="0"] #characterStage .chara_12 {
	top:235px;
	left:272px;
	width:67px;
}			
.scene3[data-pattern-id="0"] #characterStage .chara_13 {
	top:160px;
	left:359px;
	width:87px;
	z-index:1;
}
.scene3[data-pattern-id="0"] #characterStage .chara_14 {
	position:absolute;
	top:152px;
	left:473px;
	width:93px;
}
.scene3[data-pattern-id="0"] #characterStage .chara_15 {
	top:349px;
	left:9px;
	width:87px;
}		
.scene3[data-pattern-id="0"] #characterStage .chara_16 {
	top:355px;
	left:155px;
	width:76px;
}			

.scene3[data-pattern-id="0"] #characterStage .chara_17 {
	top:277px;
	left:434px;
	width:68px;
}		
.scene3[data-pattern-id="0"] #characterStage .chara_18 {
	top:264px;
	left:572px;
	width:84px;
}			
.scene3[data-pattern-id="0"] #characterStage .chara_19 {
	top:393px;
	left:362px;
	width:68px;
}			
.scene3[data-pattern-id="0"] #characterStage .chara_20 {
	top:375px;
	left:507px;
	width:91px;
}
/*パターンID:1のときのキャラクター配置*/
.scene3[data-pattern-id="1"] #characterStage .chara_1 {
	top:375px;
	left:309px;
	width:69px;
}
.scene3[data-pattern-id="1"] #characterStage .chara_2 {
	top:220px;
	left:5px;
	width:77px;
}
.scene3[data-pattern-id="1"] #characterStage .chara_17 {
	top: 216px;
	left: 500px;
	width:68px;
}
.scene3[data-pattern-id="1"] #characterStage .chara_21 {
	top:23px;
	left:-5px;
	width:80px;
}
.scene3[data-pattern-id="1"] #characterStage .chara_22 {
	top:90px;
	left:83px;
	width:72px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_23 {
	top:34px;
	left:167px;
	width:76px;
}
.scene3[data-pattern-id="1"] #characterStage .chara_24 {
	top:84px;
	left:253px;
	width:71px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_25 {
	top:31px;
	left:331px;
	width:77px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_26 {
	top:21px;
	left:536px;
	width:112px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_27 {
	top:107px;
	left:412px;
	width:82px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_28 {
	top:236px;
	left:100px;
	width:77px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_29 {
	top:205px;
	left:193px;
	width:76px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_30 {
	top:203px;
	left:286px;
	width:85px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_31 {
	top:284px;
	left:384px;
	width:91px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_32 {
	top: 173px;
	left: 575px;
	width:72px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_33 {
	top: 344px;
	left: 18px;
	width:77px;
}		
.scene3[data-pattern-id="1"] #characterStage .chara_34 {
	top: 377px;
	left: 115px;
	width: 76px;
}	
.scene3[data-pattern-id="1"] #characterStage .chara_35 {
	top:346px;
	left:220px;
	width:78px;
}	
.scene3[data-pattern-id="1"] #characterStage .chara_36 {
	top:354px;
	left:498px;
	width:76px;
}	
.scene3[data-pattern-id="1"] #characterStage .chara_37 {
	top:306px;
	left:582px;
	width:69px;
}
/*パターンID:2のときのキャラクター配置*/
.scene3[data-pattern-id="2"] #characterStage .chara_38 {
	top: 18px;
	left: -7px;
	width: 75px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_39 {
	top: 37px;
	left: 83px;
	width: 72px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_40 {
	top: 30px;
	left: 208px;
	width: 81px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_41 {
	top: 26px;
	left: 317px;
	width: 81px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_42 {
	top: 39px;
	left: 415px;
	width: 74px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_43 {
	top: 29px;
	left: 584px;
	width: 65px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_44 {
	top: 163px;
	left: -2px;
	width: 75px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_45 {
	top: 157px;
	left: 142px;
	width: 66px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_46 {
	top: 143px;
	left: 305px;
	width: 98px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_47 {
	top: 136px;
	left: 496px;
	width: 74px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_48 {
	top: 195px;
	left: 213px;
	width: 87px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_1 {
	top: 217px;
	left: 415px;
	width: 69px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_2 {
	top: 207px;
	left: 580px;
	width: 77px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_49 {
	top: 283px;
	left: 80px;
	width: 75px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_50 {
	top: 282px;
	left: 505px;
	width: 71px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_51 {
	top: 361px;
	left: -2px;
	width: 71px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_52 {
	top: 334px;
	left: 167px;
	width: 100px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_53 {
	top: 345px;
	left: 280px;
	width: 101px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_54 {
	top: 364px;
	left: 402px;
	width: 76px;
}
.scene3[data-pattern-id="2"] #characterStage .chara_55 {
	top: 366px;
	left: 578px;
	width: 73px;
}
/*キャラクター配置ここまで*/
.scene3 #characterStage .chara img {
	width: 100%;
}
.scene3 #characterStage .chara .inner {
	position: relative;
}
.scene3 #characterStage .chara .inner .judgment {
	pointer-events: none;
	position: absolute;
	top: -20%;
	left: -30%;
	z-index: 20;
	width: 160%;
	height: 160%;
}
.scene3 #characterStage .chara .inner .judgment.correct,
.scene3 #characterStage .chara .inner .judgment.incorrect{
	animation-name:judgment;
	animation-timing-function:ease-in-out;
 	animation-duration:700ms;
}
.scene3 #characterStage .chara .inner .judgment.correct {
	background: url(../images/game/img_correct.png) no-repeat center center;
	background-size: contain;
}
.scene3 #characterStage .chara .inner .judgment.incorrect {
	background: url(../images/game/img_incorrect.png) no-repeat center center;
	background-size: contain;
}
@-webkit-keyframes judgment {
	0% {opacity: 0;-webkit-transform:scale(1.4, 1.4);}
	50% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
	100% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
}
@keyframes judgment {
	0% {opacity: 0;transform:scale(1.4, 1.4);}
	50% {opacity: 1;transform:scale(1.0, 1.0);}
	100% {opacity: 1;transform:scale(1.0, 1.0);}
}
.scene3 #characterStage .chara .inner .effect {
	pointer-events: none;
	position: absolute;
	top: -74%;
	left: -160%;
	z-index: 20;
	width: 300px;
	height: 300px;
}
.scene3 .charaStage {
	position: absolute;
	top:49px;
	left: 258px;
	width: 710px;
}
.scene3 #characterMatching .chara {
	width: 150px;
}
.scene3 #characterMatching .chara img,
.scene3 #characterMatching .charaName img {
	width: 100%;
}
.scene3 #characterMatching .chara.visible {
	animation-name:charaMatchingVisible;
	animation-timing-function:ease-in-out;
 	animation-duration:300ms;
	opacity: 1;
	transform-origin: center top;
}
@-webkit-keyframes charaMatchingVisible {
	0% {opacity: 0;-webkit-transform:scale(1.4, 1.4);}
	100% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
}
@keyframes charaMatchingVisible {
	0% {opacity: 0;transform:scale(1.4, 1.4);}
	100% {opacity: 1;transform:scale(1.0, 1.0);}
}
.scene3 #characterMatching .chara .inner {
	position:relative;
}
.scene3 #characterMatching .chara .inner .effect {
	pointer-events: none;
	position: absolute;
	top: -65px;
	left: -123px;
	width: 400px;
	height: 400px;
}
.scene3 #characterMatching .charaName {
	position: absolute;
	top: 228px;
	left: -19px;
	width: 186px;
}
.scene3 .charaMatching {
	position: absolute;
	top:45px;
	left: 31px;
	width: 220px;
}
.scene3 .charaMatchingFrame {
	position: absolute;
	top: 84px;
	left: 43px;
	width: 196px;
}
.scene3 .bgTimeCount {
	position: absolute;
	bottom:51px;
	left: 31px;
	width: 220px;
}

/* .scene4 .scene5
-----------------------------------------------------------*/
.scene4 .message {
	top: 20px;
	left: 21px;
	width: 958px;
}
.scene4 .congrat {
	top: 98px;
	left: 295px;
}
.scene4.zeroVer .congrat {
	top: 345px;
	left: 600px;
}
.scene4 .congrat #matchCountNum {
	width: 60px;
	opacity: 0;
}
.scene4.zeroVer .congrat #matchCountNum {
	display: none;
}
.scene4 .congrat #matchCountNum.visible {
	animation-name:matchCountNumVisible;
	animation-timing-function:ease-out;
 	animation-duration:300ms;
	opacity: 1;
	transform-origin: center bottom;
}
@-webkit-keyframes matchCountNumVisible {
	0% {-webkit-transform: scale(4.0, 4.0);}
	100% {-webkit-transform: scale(1.0, 1.0);}
}
@keyframes matchCountNumVisible {
	0% {transform: scale(4.0, 4.0);}
	100% {transform: scale(1.0, 1.0);}
}
.scene5 .message {
	top: 20px;
	left: 21px;
	width: 958px;
}
.scene4 .message img,
.scene5 .message img {
	width: 100%;
}
.scene5 #kirakiraAreaWrap,
.scene5 #kirakira_2_AreaWrap{
	width: 1000px;
	height: 616px;
	position: absolute;
	top:0;
	left:0;
}
.scene5 #kirakiraArea,
.scene5 #kirakira_2_Area{
	width: 1000px;
	height: 616px;
	position:relative;
}
.scene5 #kirakiraArea img,
.scene5 #kirakira_2_Area img{
	position: absolute;
	display:none;
	width:20px;
}
.scene5 .finalBtn {
	position: absolute;
	bottom:53px;
	left: 0;
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 20px;
}
.scene5 .finalBtn li {
	margin-right: 66px;
	width: 290px;
}
.scene5 .finalBtn li img {
	width: 100%;
}
.scene5 .finalBtn li:last-child {
	margin-right: 0;
}

/* .curtain カーテン
-----------------------------------------------------------*/
.curtainWrap {
	padding: 20px 21px;
}
.curtainWrap .curtain {
	width: 958px;
	height: 575px;
	position:relative;
	overflow: hidden;
}
.curtainWrap .curtain .top,
.curtainWrap .curtain .left,
.curtainWrap .curtain .right {
	position: absolute;
	top:0;
}
.curtainWrap .curtain .top {
	left: 0;
	width: 958px;
}
.curtainWrap .curtain .left,
.curtainWrap .curtain .right {
	height: 575px;
}
.curtainWrap .curtain .left {
	left: -32px;
}
.curtainWrap .curtain .right {
	right: -32px;
}

/* curtain open */
.curtainWrap .curtain.open .top {
	animation-name:topOpen;
	animation-timing-function:ease-in-out;
 	animation-duration:500ms;
	top: -154px;
}
@-webkit-keyframes topOpen {
	0% {top: 0;}
	30% {top: 0;}
	100% {top: -154px;}
}
@keyframes topOpen {
	0% {top: 0;}
	30% {top: 0;}
	100% {top: -154px;}
}
.curtainWrap .curtain.open .left {
	animation-name:leftOpen;
	animation-timing-function:ease-in-out;
 	animation-duration:500ms;
	left: -542px;
}
@-webkit-keyframes leftOpen {
	0% {left: -32px;}
	100% {left: -542px;}
}
@keyframes leftOpen {
	0% {left: -32px;}
	100% {left: -542px;}
}
.curtainWrap .curtain.open .right {
	animation-name:rightOpen;
	animation-timing-function:ease-in-out;
 	animation-duration:500ms;
	right: -542px;
}
@-webkit-keyframes rightOpen {
	0% {right: -32px;}
	100% {right: -542px;}
}
@keyframes rightOpen {
	0% {right: -32px;}
	100% {right: -542px;}
}

/* curtain close */
.scene4 .curtainWrap,
.scene4 .bg {
	position: absolute;
	top: 0;
	left: 0;
}
.scene4 .curtainWrap .curtain.close .top {
	animation-name:topClose;
	animation-timing-function:ease-in-out;
 	animation-duration:1000ms;
	top: 0;
}
@-webkit-keyframes topClose {
	0% {top: -111px;}
	30% {top: -111px;}
	70% {top: 0;}
	100% {top: 0;}
}
@keyframes topClose {
	0% {top: -111px;}
	30% {top: -111px;}
	70% {top: 0;}
	100% {top: 0;}
}
.scene4 .curtainWrap .curtain.close .left {
	animation-name:leftClose;
	animation-timing-function:ease-in-out;
 	animation-duration:1000ms;
	left: -32px;
}
@-webkit-keyframes leftClose {
	0% {left: -542px;}
	70% {left: -32px;}
	100% {left: -32px;}
}
@keyframes leftClose {
	0% {left: -542px;}
	70% {left: -32px;}
	100% {left: -32px;}
}
.scene4 .curtainWrap .curtain.close .right {
	animation-name:rightClose;
	animation-timing-function:ease-in-out;
 	animation-duration:1000ms;
	right: -32px;
}
@-webkit-keyframes rightClose {
	0% {right: -542px;}
	70% {right: -32px;}
	100% {right: -32px;}
}
@keyframes rightClose {
	0% {right: -542px;}
	70% {right: -32px;}
	100% {right: -32px;}
}

/* star effect
-----------------------------------------------------------*/
.star {
	background: url(../images/game/img_effect_star.png) 0 0 no-repeat;
	height: 0;
	overflow: hidden;
	padding-top: 400px;
	width: 400px;
	margin: 0 auto 0;
	animation: sprite 0.8s steps(20, end);
	-webkit-animation: sprite 0.8s steps(20, end);
}
@keyframes sprite {
	0%    {background-position: 0 0;}
	100%    {background-position: -8000px 0px;}

}
@-webkit-keyframes sprite {
	0%    {background-position: 0 0;}
	100%    {background-position: -8000px 0px;}
}

/* heart effect
-----------------------------------------------------------*/
.heart {
	background: url(../images/game/img_effect_heart.png) 0 0 no-repeat;
	height: 0;
	overflow: hidden;
	padding-top: 300px;
	width: 300px;
	margin: 0 auto 0;
	animation: heart 0.5s steps(10, end);
	-webkit-animation: heart 0.5s steps(10, end);
}
@keyframes heart {
	0%    {background-position: 0 0;}
	100%    {background-position: -3000px 0px;}

}
@-webkit-keyframes heart {
	0%    {background-position: 0 0;}
	100%    {background-position: -3000px 0px;}
}