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




#wrapSecond.game h1{
padding-top:50px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}

#infoBlock{
	padding-top:50px;
}



/*消しておく*/
#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: 528px;
    height: 490px;
    top: 597px;
    left: 110px;
	display:none;
}
#gameBlock #scratchArea{
    width: 528px;
    height: 490px;
	background: #fff;
}

/*回答*/
#selectArea .answer1{
    position: absolute;
    left: 95px;
    bottom: 85px;
    width: 200px;
    height: 192px;
}
#selectArea .answer2{
	position: absolute;
    right: 95px;
    bottom: 85px;
    width: 200px;
    height: 192px;
}


/*カウント*/
#countArea{
	position: absolute;
	top: 380px;
	right: 85px;
	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-weight:bold;
	text-align:center;
	margin:690px 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;
	bottom: 200px;
	right: 50px;
	width: 645px;
	height: 380px;
}

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


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

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

/*スコア表示*/
.scoreWrap #score {
	position:absolute;
    bottom: 460px;
    left: 220px;
	z-index:10;
}
.scoreWrap .after {
	position:absolute;
    bottom: 463px;
    left: 354px;
	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 img{
	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);}
}