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



/*+++++++++++++++++++++++++++++++++++++++++++++

汎用

+++++++++++++++++++++++++++++++++++++++++++++*/
body , html{
	width: 100%;
	min-height: 100%;
	height: 100%;
	background-color: #182b8a;

}

#wrapper{
	width: 100%;
	/* height: 100%; */
}

.dn{
	display: none !important;
}


/*+++++++++++++++++++++++++++++++++++++++++++++

contents

+++++++++++++++++++++++++++++++++++++++++++++*/
.contents{
	/* width: 1200px; */
	width: 100%;
	height: 100%;
	margin: auto;
	background-image: url("../img/bg_short.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center top;


}

/* .contents.short{
	width: 1198px;
	height: 1200px;
	background-image: url("../img/bg_short.png");
	background-size: 1198px 1200px;
	background-repeat: no-repeat;
	background-position: center top;
} */


/*+++++++++++++++++++++++++++++++++++++++++++++

header

+++++++++++++++++++++++++++++++++++++++++++++*/
header{
	width: 100%;
	height: 380px;
	/* background-image: url("../img/chara.png"); */
	/* background-size: 1014px 380px; */
	background-size: 700px 250px;
	background-repeat: no-repeat;
	background-position: left top;
	/* background-position: center top; */
	/* animation: tictac 0.5s infinite; */
	backface-visibility: hidden;
}

header > *{
	float: right;
	margin-top: 23px;
}
header h1{
	margin-right: 75px;
}
header div{
	margin: 45px 5px 0 0;
}


/*+++++++++++++++++++++++++++++++++++++++++++++

content

+++++++++++++++++++++++++++++++++++++++++++++*/
.content{
	margin-top: -377px;
}
.title{
	text-align: center;
}
.content-box{
	max-width: 900px;
	max-height: 630px;
	margin: -55px auto 0;
}
.content > div:not(.title){
	display: none;
}
.active{
	display: block !important;
}
.frm1{
	background-image: url("../img/frame1.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	border: 8px #e35502 solid;
}
.frm2{
	background-image: url("../img/frame2.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	border: 8px #e35502 solid;
}
.frm3{
	background-image: url("../img/frame3.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	border: 8px #e35502 solid;
}


/***** rule *****/
.rule{
	text-align: center;
	padding-top: 5px;
	display: none;
}
.rule .flow{
	margin-top: 45px;
}
.rule .btn{
	margin-top: 520px;
}
.rule .att{
	margin-top: 20px;
}
.rule .btn img{
	width: 300px;
}

/***** timer *****/
.timer{
	text-align: center;
	display: none;
}
.timer .mini{
	width: 90px;
}
.time-area{
	text-align: center;
	padding-top: 225px;
}
.time-area img{
	margin: 0 5px;
}
.timer .btn{
	margin-top: 70px;
}
.timer .att{
	margin-top: 22px;
}
.escape{
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	opacity: 0;
}

/***** timeup *****/
.timeup{
	display: none;
	text-align: center;
}
.timeup .tl{
	padding-top: 155px;
}
.timeup .btn{
	margin-top: 55px;
}

/***** finish *****/
.finish{
	display: none;
	text-align: center;
}
.finish .tl{
	padding-top: 265px;
}
.finish .btn{
	margin-top: 110px;
}

/***** retry*****/
.retry img{
	width: 70px;
	height: 70px;
} 

/***** result1 *****/
.result1{
	position: relative;
	display: none;
}
.result1 .tl{
	padding-top: 35px;
  text-align: center;
}
.result1 .result{
	margin-top: 20px !important;
}
.result1 .result img{
	margin: 0 5px;
}
.result1 .prize{
	position: absolute;
	top: 50px;
	left: -85px;
}
/* .result1 .btn{
	margin-top: 50px;
	text-align: center;
} */

/***** result2 *****/
.result2{
	position: relative;
	display: none;
}
.result2 .tl{
	padding-top: 35px;
  text-align: center;
}
.result2 .result{
	margin-top: 20px !important;
}
.result2 .result img{
	margin: 0 5px;
}
.result2 .prize{
  text-align: center;
	margin: 20px;
}
/* .result2 .btn{
	margin-top: 50px;
	text-align: center;
} */

/***** result3 *****/
.result3{
	position: relative;
	display: none;
}
.result3 .tl{
	padding-top: 35px;
  text-align: center;
}
.result3 .result img{
	margin: 0 5px;
}
.result3 .prize{
	margin-top: 20px;
	text-align: center;
}
/* .result3 .btn{
	margin-top: 50px;
	text-align: center;
} */
/***** result4 *****/
.result4{
	position: relative;
	display: none;
}
.result4 .tl{
	padding-top: 35px;
  text-align: center;
}
.result4 .result img{
	margin: 0 5px;
}
.result4 .prize{
	margin-top: 20px;
	text-align: center;
}
/* .result4 .btn{
	margin-top: 50px;
	text-align: center;
} */
/***** result5 *****/
.result5{
	position: relative;
	display: none;
}
.result5 .tl{
	padding-top: 35px;
  text-align: center;
}
.result5 .result img{
	margin: 0 5px;
}
.result5 .prize{
	margin-top: 20px;
	text-align: center;
}
/* .result5 .btn{
	margin-top: 50px;
	text-align: center;
} */
/***** result6 *****/
.result6{
	position: relative;
	display: none;
}
.result6 .tl{
	padding-top: 35px;
  text-align: center;
}
.result6 .result img{
	margin: 0 5px;
}
.result6 .prize{
	margin-top: 20px;
	text-align: center;
}
/* .result6 .btn{
	margin-top: 50px;
	text-align: center;
} */
/***** result7 *****/
.result7{
	position: relative;
	display: none;
}
.result7 .tl{
	padding-top: 35px;
  text-align: center;
}
.result7 .result img{
	margin: 0 5px;
}
.result7 .prize{
	margin-top: 20px;
	text-align: center;
}
/* .result7 .btn{
	margin-top: 50px;
	text-align: center;
} */

/*** result timer ***/
.frm3 .result{
	margin-top: 150px;
}
.frm3 .result:before{
	display: inline-block;
	content: " ";
	width: 100px;
	height: 120px;
	background-image: url("../img/count/time-logo.png");
	background-size: 100%;
	background-repeat: no-repeat;
	vertical-align: top;
  /* margin: 13px 10px 0 125px; */
  margin: 50px 10px 0 50px;
  animation: poyon 1.0s infinite;

}
.frm3 .result img{
	/* width: 90px;default 75px */
	width: 150px;
	/* 試し */
	animation: poyon 1.0s infinite;
}

.frm3 .result img.seq{
	width: 22px;
	margin: 0 5px;
}
.frm3 .result img.mini{
	/* width: 75px;default 55px */
	width: 130px;

}

.frm3 .tl img{
	/* 試し */
	width: 90%;
	height: auto;
	animation: jajan 0.4s infinite;
}


/*** result btn ***/
.frm3 .btn{
	/* text-align: center; */
	/* text-align: right; */
	/* margin-top: -600px; */
	position: absolute;
	/* width: 70px;
	height: 70px; */
  right: 10px;
  top: 10px;
}
.frm3 .btn > div,
.timeup .btn > div{
	display: inline-block;
	position: relative;
	z-index: 2;
}

/***** prize *****/
.prize-bot{
	text-align: center;
	margin-top: 20px;
}


/***** footer *****/
.copyright{
	text-align: center;
	margin-top: 20px;
}
footer{padding-bottom:3px;}

/***** animation *****/
@keyframes tictac {
	0%   { transform: rotate(0deg);}
	50%   { transform: rotate(3deg);}
	100%  { transform: rotate(0deg);}
}

@keyframes poyon {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
	50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	60%  { transform: scale(0.9, 1.2) translate(0%, -50%); }
	75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
	85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  
  }

  @keyframes jajan {
	 0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	50%  { transform: scale(1.05, 1.1) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }