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

/*消しておく*/
#gameBlock,
#resultBlock{
	display:none;
	position:relative;
}


/*スタートボタン*/
#game .content #startBtn a {
	width:244px;
	margin:0 auto;
	display: block;
}


/*スクラッチ部分*/
#gameBlock .scratchWrap{
	box-sizing:border-box;
	position:absolute;
	width: 404px;
	height: 376px;
	top: 264px;
	left: 79px;
	display:none;
}
#gameBlock #scratchArea{
	width: 404px;
	height: 376px;
	background: #fff;
}

/*回答*/
#selectArea .answer1{
	position: absolute;
    left: 40px;
    bottom: 120px;
	width:128px;
	height:123px;
}
#selectArea .answer2{
	position: absolute;
	right: 60px;
 	bottom: 120px;
	
	width:128px;
	height:123px;
}


/*カウント*/
#countArea{
	position: absolute;
	top: 96px;
    right: 75px;
	text-align: right;
	display: inline-block;
	font-size: 25px;
	color:#FF45A6;
	font-family: "メイリオ",Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', "ＭＳ Ｐゴシック", sans-serif;
}
#countArea span{
	font-size: 60px;
	font-weight:bold;
	position: absolute;
	bottom: -12px;
	right: 30px;
}


/*スタートカウント*/
#countDown{
	font-size:100px;
	font-weight:bold;
	text-align:center;
	margin:220px auto;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:10;
}

/*オーバーレイ*/
#grayOut{
	width:100%;
	height:100%;
	background:plum;
	opacity:0.5;
	position:absolute;
	z-index:5;
	top:0;
	left:0;
}


/*回答ボタン*/
#selectArea{
	position: absolute;
	top: 265px;
	right: 50px;
	width: 400px;
	height: 380px;
}

/*もう一回遊ぶボタン*/
#resultBlock #moreBtn{
	position:absolute;
    bottom: 80px;
    left: 330px;
    z-index: 10;
}
/*ゲーム終わるボタン*/
#resultBlock #endBtn{
    position: absolute;
    bottom: 80px;
    right: 340px;
    z-index: 10;
}


/*ボタン結果*/
#selectArea li{
	position:relative;
}
#selectArea li .resultIcon{
	position:absolute;
	top:0;
	left:-8px;
}
/*スクラッチ結果*/

#resultText{
	position:absolute;
	bottom:100px;
	left:79px;
	width: 404px;
	text-align: center;
}

/*スコア表示*/
.scoreWrap #score {
	position:absolute;
	top:60px;
	left:48px;
	z-index:10;
}
.scoreWrap .after {
	position:absolute;
	top: 106px;
    left: 174px;
	z-index:10;
}

/* エフェクト関連
-----------------------------------------------------------*/
#game .content #startBtn.effect a,
#selectArea .answer1 a.effect,
#selectArea .answer2 a.effect,
#resultBlock #moreBtn a.effect,
#resultBlock #endBtn 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%);
    }
}

#countDown.effect {
	animation-name:startCountDown;
	animation-timing-function:ease-in-out;
	animation-duration:300ms;
	animation-fill-mode: forwards;
	transform-origin: center bottom;
}
@-webkit-keyframes startCountDown {
	0% {opacity: 0;-webkit-transform:scale(1.4, 1.4);}
	100% {opacity: 1;-webkit-transform:scale(1.0, 1.0);}
}
@keyframes startCountDown {
	0% {opacity: 0;transform:scale(1.4, 1.4);}
	100% {opacity: 1;transform:scale(1.0, 1.0);}
}

#selectArea li .resultIcon.win {
	display: block;
	animation-name: resultIconWin;
	animation-timing-function: ease-in-out;
	animation-duration: 200ms;
	transform-origin: center center;
}
@-webkit-keyframes resultIconWin {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes resultIconWin {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#selectArea li .resultIcon.lose {
	display: block;
	animation-name: resultIconLose;
	animation-timing-function: ease-in-out;
	animation-duration: 200ms;
	transform-origin: center center;
}
@-webkit-keyframes resultIconLose {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes resultIconLose {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#resultText .resultImg.win {
	display: block;
	animation-name: resultImgWin;
	animation-timing-function: ease-in-out;
	animation-duration: 500ms;
	transform-origin: center center;
}
@-webkit-keyframes resultImgWin {
    0% {
        transform: scale(1.4, 1.4) translate(0%, 0%);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}
@keyframes resultImgWin {
    0% {
        transform: scale(1.4, 1.4) translate(0%, 0%);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}

#resultText .resultImg.lose {
	display: block;
	animation-name: resultImgLose;
	animation-timing-function: ease-in-out;
	animation-duration: 500ms;
	transform-origin: center center;
}
@-webkit-keyframes resultImgLose {
    0% {
        transform: scale(1.4, 1.4) translate(0%, 0%);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}
@keyframes resultImgLose {
    0% {
        transform: scale(1.4, 1.4) translate(0%, 0%);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}

#countArea span.effect {
	animation-name:timeCountEffect;
	animation-timing-function:ease-in-out;
	animation-duration:300ms;
	animation-fill-mode: forwards;
	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);}
}

.scoreWrap #score {
	animation-name:score;
	animation-timing-function:ease-out;
	animation-duration:300ms;
	transform-origin: center bottom;
}
@-webkit-keyframes score {
    0% {-webkit-transform: scale(4.0, 4.0);}
	100% {-webkit-transform: scale(1.0, 1.0);}
}
@keyframes score {
    0% {transform: scale(4.0, 4.0);}
	100% {transform: scale(1.0, 1.0);}
}