@font-face {
font-family: "DotGothic16";
src:url("fonts/DotGothic16-Regular.woff") format("woff");
}
@font-face {
font-family: "RedditMono-ExtraBold";
src:url("fonts/RedditMono-ExtraBold.woff") format("woff");
}

*{
margin:0;
padding:0;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
max-width:100%;
vertical-align:bottom;
}
li{
list-style-type: none;
}

body{
text-size-adjust: none;/*iOS用*/
background-image: linear-gradient(180deg, #0a9aed, #71d5f5);
}

#curtain{
position:fixed;
width:100%;
height:100%;
background-color:#fff;
z-index:2;
}
#curtain #loading{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
width:104px;
opacity:0;
}

#container{
position:relative;
margin:0 auto;
width:510px;
z-index:1;
}

#stage_0{
position:relative;
top:0;
left:50%;
transform: translateX(-50%);
width:100%;
text-align:center;
background-color:#000;
overflow:hidden;
}
#stage_0 .bg{
padding-top:2%;
background:url(images/op_bg.jpg) no-repeat 50% 0%;
background-size: cover;
}
#stage_0 .catch{
position:relative;
margin:0 auto 0 auto;
width:85%;
z-index:1;
}
#stage_0 .title{
position:relative;
margin:0 auto 0 auto;
width:90%;
z-index:0;
}
#stage_0 .silhouette {
position:relative;
margin-top: 4%;
z-index:2;
}
#stage_0 .silhouette img{
margin:0 auto;
width:40%;
}
#stage_0 .shoei {
position:absolute;
top:7%;
left:50%;
transform: translateX(-50%);
display:inline-block;
width:95%;
z-index:3;
}
#stage_0 .shoei img{
margin:0;
width:49%;
}
#stage_0 .mawashite {
position: relative;
margin: -67% auto 0 auto;
width: 40%;
}
#stage_0 .mawashite .dial {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, 93%);
width: 22.8%;
}
#stage_0 .mawashite .capsule {
position:absolute;
top: 71%;
left: 50%;
transform: translate(-50%, 50%);
width: 20%;
}
#stage_0 .mawashite .capsule div{
position:absolute;
top:0;
left:0;
}
#stage_0 .lead{
position:relative;
margin:3% auto 0 auto;
width:90%;
}
#stage_0 .lead .text{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
}
#stage_0 .lead .text p{
font-family: DotGothic16;
font-size: 1.2rem;
line-height:1.6;
color:#005FD2;
}
#stage_0 .lead .text p .em{
font-family: DotGothic16;
color:#FF2D2D;
}
#stage_0 .btn{
margin:0 auto 0 auto;
padding-bottom:4%;
width:70%;
}

footer{
padding:2% 0 4% 0;
background-color:#000;
}
footer .copyright{
margin-top:1%;
font-size:0.7rem;
line-height:1.4;
color:#fff;
}
footer .copyright a{
color:#fff;
}
footer .sho{
margin-top:3%;
}
footer .sho a{
margin:0 auto 0 auto;
border:solid 1px #fff;
padding:1% 2%;
text-decoration:none;
font-size:1rem;
color:#fff;
}

/*stage_1*/
#stage_1{
position:absolute;
top:0;
left:0;
transform: translateY(80%);
text-align:center;
width:100%;
display:none;
}
#stage_1 #opponentName{
margin:6% auto 0 auto;
width:90%;
opacity:0;
}
#stage_1 #opponent{
margin:1% auto 0 auto;
width:60%;
opacity:0;
}
#stage_1 #opponent img{
filter: brightness(200);
}
#stage_1 .opponentText{
position:relative;
margin:1% auto 0 auto;
width:90%;
opacity:0;
}
#stage_1 .opponentText .text{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
}
#stage_1 .opponentText .text p{
font-family: DotGothic16;
font-size: 1.2rem;
line-height:1.6;
color:#005FD2;
}
#stage_1 .opponentText .text p .em{
font-family: DotGothic16;
color:#FF2D2D;
}
#stage_1 .btn{
margin:6% auto 0 auto;
width:100%;
opacity:0;
}
#stage_1 .btn img{
margin:0 -2%;
}
#stage_1 .btn a:nth-of-type(1) img{
width:50%;
}
#stage_1 .btn a:nth-of-type(2) img{
width:42%;
}

/*#stage_2*/
#stage_2{
position:relative;
top:0;
left:50%;
transform: translateX(-50%);
width:100%;
text-align:center;
/*pointer-events: none;*/
overflow: hidden;
display:none;
}
#stage_2 .content{
position:relative;
}
#stage_2 #opponent_2{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -55%);
width:50%;
z-index: 0;
}

#stage_2 #opponent_2{/*動き*/
/* animation-name:fawa;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1s;*/
}
@keyframes fawa {
0% {
transform: translate(-50%,-55%);
}
100% {
transform: translate(-50%,-60%);
}
}

#stage_2 #kirakira_1, #stage_2 #kirakira_2{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -55%);
width:30%;
opacity:0;
z-index: 1;
}
#stage_2 .waku{
position:absolute;
top: 0;
z-index: 101;
}
#stage_2 .catch{
position:absolute;
top: 17%;
left: 50%;
transform: translateX(-50%);
width: 65%;
z-index: 2;
}
#stage_2 .start{
position:absolute;
top:45%;
left:50%;
transform: translate(-50%, -40%);
width:60%;
opacity:0;
z-index: 3;
}
#stage_2 .finish{
position:absolute;
top:45%;
left:50%;
transform: translate(-50%, -40%);
width:80%;
opacity:0;
z-index: 6;
}
#stage_2 #hitCount{
position:absolute;
font-family: RedditMono-ExtraBold;
top: 9%;
right: 7%;
font-size: 3.5rem;
color: #FF2D2D;
z-index: 102;
}
#stage_2 #countDown{
position:absolute;
font-family: RedditMono-ExtraBold;
top: 2.8%;
right: 71%;
font-size: 6rem;
color:#FF2D2D;
z-index: 103;
}
#stage_2 #bar_graph{
position:absolute;
top: 2%;
left: -42%;
width: 150%;
z-index: 100;
}
#stage_2 #heart{
position:absolute;
left: 50%;
bottom: 1%;
transform: translateX(-50%);
width: 54%;
cursor: pointer;
opacity:0;
z-index: 104;
}
#stage_2 .heart {
position: absolute;
width: 10%;
bottom: 13%;
left: 50%;
transform: translateX(-50%);
z-index: 4;
pointer-events: none;
}
#stage_2 .heart_2 {
position: absolute;
width: 80%;
bottom: 13%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
}



@media (max-width: 639px) {
#container{
width:100%;
}

/*stage_0*/
#stage_0 .lead .text p{
font-size: 3.8vw;
}
footer .copyright{
font-size: 2.5vw;
}

/*stage_1*/
#stage_1 .opponentText .text p{
font-size: 3.8vw;
}
footer .copyright {
font-size: 2.5vw;
}

/*stage_2*/
#stage_2 #hitCount{
font-size: 11vw;
}
#stage_2 #countDown{
font-size: 19vw;
}
}