@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800&display=swap&subset=japanese");


@-webkit-keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink_animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/********************************/
/*
リセット
/***********************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none; }

a, a:hover {
  text-decoration: none; }

a > img, nav > img, li > img, div > img {
  width: 100%;
  height: auto; }

a {
  cursor: pointer;
  text-decoration: none;
  color: #000; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 0; }



.clearfix:after {
  content: ".";
  height: 0; }

body {
  position: absolute;
  
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: "ヒラギノ角ゴシック Pro W3",Hiragino Kaku Gothic Pro,"メイリオ",Meiryo,Osaka,"MS Pゴシック",MS PGothic,sans-serif;
  font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
  overflow: visible; }

body * {
  box-sizing: border-box; }

div, h1, h2, h3, h4, h5, ul, ol, li, dl, dt, dd {
  position: relative; }

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  line-height: 1; }

p, div, span {
  margin: 0;
  padding: 0;
  line-height: 1.5; }

ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1; }

img,
a img {
  border: none;
  display: inline-block; }

img {
  width: 100%;
  height: auto;
  user-select: none; }

h1, h2 {
  font-weight: bold; }


/********************************/

body {
  margin: 0;
  padding: 0;
  
  width: 100%;
  /*position: absolute;
  height: 100%;
  overflow: hidden;*/
}



body.noscroll {
  height: 100%;
  overflow: hidden; 
}

html{
  background-color: #fff;
  background-image: url("../img/back_pattern.png");
  background-size: 27px;
  background-position: bottom center;
}


.wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
}

header{
  background-color: #fff;
  border-bottom: 1px solid #ccc;
 
 
}

header img{
  display: block;
}

main {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}





.canvasframe{
  position: relative;

  /*width: calc(100vw - 110px);*/
  width: calc(100vw - 0px);
  margin-left: 0px;
  max-width: 600px;
  margin: 0 auto;
  height: 100%;
 

}

main.form-send .canvasframe{
  overflow: scroll;
}
main.form-send .canvasframe::-webkit-scrollbar{
  display:none;
}

.canvasarea {
  position: absolute;
  height: 100%;
  /*background-size: cover;
  background-size: 100% auto;*/
  width: 100%;
  transform: translate3d(0, 0px, 0px);
  background-position-y: bottom;
  background-size: cover;

  background-image: url(../img/stadium.png);

}

.canvasframe__footer{
  height: 10em;
  font-size: 0.65em;
      position: absolute;
    bottom: 0;
    width: 100%;
}


header,footer{
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  padding: 2%;
  padding: 0;
}

h1{
  font-size: 3em;
  line-height: 2;
}

h2{
  font-size: 2.0em;
   line-height: 2;
}

.header__content{
   font-size: 1.25em;
   line-height: 1.5;
   margin-bottom: 2em;
}


.start-game{
  font-size: 2.0em;
  font-weight: 800;
  color: white;
  width: 17.86%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
  position: fixed;
  right: 0;
  top: 73.5vw;
  overflow: hidden;
}

.start-game img{
  position: relative;
  display: block;
  width: 100%;
  transform: translateX(102%);
  transition: transform 0.3s ease-out;

}

.start-game.active img{
  transform: translateX(0%);
}
    

.canvasarea canvas {
  -webkit-transition: opacity 0.6s ease-out;
  -o-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
  display: block;
  /*border: solid 1px red;*/
}

.canvasarea canvas.show {
  opacity: 1;
}



.main__guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.uibord{
  position: absolute;
  top: 0;right: 0;
  height: 100vh;
  width: 110px;
  background-color: #999;
  padding-top: 50px;
  padding-left: 1em;
}

.uibord__btns{
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 5em;
}

.uibord__btn{
  margin-bottom: 1em;
  color: #fff;
  user-select: none;
}

.uibord__btns-set{
  margin-bottom: 2em;
}

.capture-sample{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;left: 0;
  opacity: 0;
  border: solid #e26e32 12px;
  border-radius: 56px;
  transform-origin: 98% 98%;
  display: block;
  overflow: hidden;

  transition: transform 0.6s ease-out,opacity 0.6s ease-out;
}

.capture-sample.compact{
  transform: scale(0.25);
  opacity: 1;
}

.capture-sample.hide{
   opacity: 0;
}

.shutter__area{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.shutter__top,
.shutter__bottom{
 position: absolute;
  width: 100%;
   top: 0;
  left: 0;
   height: 50%;
   background-color: rgba(0,0,0,0.3);
   transform-origin: left top;
   transform: scaleY(0);
  
}

.shutter__bottom{
  top: auto;
  bottom: 0;
  transform-origin: left bottom;
}

.shutter__area.shoot .shutter__top,
.shutter__area.shoot .shutter__bottom{
   transition: transform 0.15s linear;
   transform: scaleY(100%);
}

.model-change-preloader{
  position: absolute;
  display: block;
  left: 50%;top: 50%;
  width: 40%;
  opacity: 0;
  transform: translate(-50%,-50%);
  transition: opacity .3s ease-out;
  
}

.model-change-preloader.show{
  opacity: 1;
}

.guide-h,
.guide-v{
  position: absolute;
  pointer-events: none;
   top: 0;
   left: 0;
}
.guide-h{
  height: 50%;
  width: 100%;
  /*border-bottom: solid 1px red;*/

}

.left-toucharea,
.right-toucharea,
.top-toucharea,
.bottom-toucharea{
  position: absolute;
   background-color: rgba(1,0,0,0.0);
   

}

.left-toucharea,
.right-toucharea{
  width: 20%;
  height: 100%;
  top: 0;
  left: 0;

}

.right-toucharea{
  left: auto;
  right: 0;
}

.top-toucharea,
.bottom-toucharea{
  width: 100%;
  height: 12%;
  top: 0;
}

.top-toucharea{
  height: 30%;
  height: 0%;
}

.bottom-toucharea{
  top: auto;
  bottom: 0;

}

.guide-v{
  height:100%;
  width: 50%;
}

.tracebox{
  font-size: 1.3em;
}



.point-area{
pointer-events: none;
position: absolute;
/*transform: translateX(-50%);*/
left:2%;
top:0;
width: 22.8%;
}

.point-area img{
  position: absolute;
  top:0;
  left:0;
  visibility: hidden;
}

.point-area img.show{
  visibility: visible;
}

.point-area img.panel-point0{
  position: relative;
}


.point-area__message{
  margin-bottom: -0.4em;
      margin-bottom: -0.2em;
    padding-bottom: 0.2em;
    border-bottom: solid;
}

.point-area__message__point{
  font-weight: 800;
  font-size: 1.2em;
  margin-bottom: -0.15em;
  margin-top: -0.25em;
}

.point-area__point-number{
    font-size: 1.5em;
    vertical-align: -0.035em;
}

.ballcount-area{
pointer-events: none;
    position: absolute;
    top:0;
    right: 2%;
    width:52%;
    background-image: url("../img/remain_ball_board.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 15vw;
}



.ballcount-area__message{
  text-align: right;
      display: none;
}
.ballcount-area ul{
  display: flex;
      width: 87%;
    margin: 0 auto;
    margin-top: 14%;
}

.ballcount-area li{
  margin-right: -0.08em;
  color: #ff9900;
  width: 9%;
  margin-right: 0.7%;
}

.ballcount-area li.out img{
  color: #999;
  -webkit-filter:grayscale(100%);
  filter:grayscale(100%);
}

.ballcount-area li img{
  width: 100%;
}

.stop-game{
  position: absolute;
 top:0;
  left:2.5%;
  font-size: 1.5em;
  width: 25.2%;
  
  text-align: center;
  font-weight: 600;
 
  z-index: 1;
}

.stop-game img{
  display: block;
}

.stop-game.hide{
  display: none;
}



.play__area{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(128,128,128,0.5);
  transition: opacity 0.3s ease-out;
  z-index: 3;
}

.play-btn{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  color: white;
  font-weight: 800;
  font-size: 3em;
  text-align: center;
  width: 41.66%;  
}

.play-btn img{
  display: block;
}

.play-btn__btn-area{
  position: relative;
  line-height: 1.2;
}

.play__area.hide{
  opacity: 0;
  pointer-events: none;
}

.hand{
  width: 60%;
  position: relative;
}

.hand-point{
   width: 42%;
    position:absolute;
    left:-1%;
    top:-29%;
    left: -20%;
    top: -32%;
    animation: hand-point-blink 1.5s ease infinite;

}

@keyframes hand-point-blink{
  0%{opacity: 0}
  30%{opacity: 0}
  45%{opacity: 1}
  85%{opacity: 1}
  100%{opacity: 0}
}

.hand__area{
  position: absolute;
  width: 100%;
  left: 64%;
  top: 72%;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  left: 58%;
  top: 74%;
}

.hand__area.hide{
  opacity: 0;

}


/*
ゲームオーバー
***********************************/

.gameover{

  position: absolute;
  position:relative;
  top:0;
  left:50%;
  transform: translateX(-50%);
  padding: 10%;
  width: 100%;
  /*height: 100%;*/
  max-width: 600px;
    margin: 0 auto;
  background-color:#b4f0ff;
  background-image: url(../img/gameover-back.png);
  background-size: 16%;
  font-size: 1.2em;
  color: #fff;
  transition: opacity 0.6s ease-out;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  
  display: none;

}

.gameover__inner{
  height: 100%;
  padding-top: 17%;
}

.gameover__notchallenge{
  position: absolute;
  top:0;left: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0,0,0,40);
  visibility: hidden;
}

.gameover__notchallenge.show{
  visibility: visible;

}

.gameover__notchallenge-message{
  text-align: center;
  position: absolute;
  width: 85%;
  left: 50%;
 top: 40%;
 line-height: 1.75;
  transform: translate(-50%,-50%);
  color: white、;
}

.gameover.show{
 display: block;
  visibility: visible;
  opacity: 1;
}

.gameover.hide{
  opacity: 0;
  }



.gameover__header{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.gameover-caution {
    height: 40%;
    position: absolute;
    width: 88%;
        pointer-events: none;
}

.gameover__point{
  margin-bottom: 0.5em;
  font-size: 1.5em;
  width: 19.33%;
  position: absolute;
  top: 5.5%;
  left: 0;
}

.gameover__point img.fukidashi-point0{
  position: relative;
}


.gameover__point img{
  position: absolute;
  left: 0;
  top:0;
  visibility: hidden;

}

.gameover__point img.show{
  visibility:visible;
}

.gameover__form-wrap{
  background-image: url(../img/form-base.png);
  background-size: 100%;
  background-repeat: no-repeat;
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 50.3%;
  padding-bottom: 26%;

}

.gameover__point-h2{
  font-size:1.5em;
  display: none;
}
.gameover__message{
  margin-bottom: 2em;
  font-size: 1m;
  display: none;

}

.gameover__form input{
   font-size: 4vw;
   padding:0% 3%;;
   display: block;
   margin-bottom: 11.2%;
   width: 100%;
   font-size: 4vw;
    background-color: rgba(0,0,0,0);
    border: none;
    height: 1.6em;
}

.gameover__form input:nth-child(1){
  margin-top: 1.2%;
}
.gameover__form input:nth-child(2){
  margin-bottom: 10.8%;
}
.gameover__form input:nth-child(3){
  
}

.gameover-caution{
  
}

.gameover-caution__name,
.gameover-caution__mail,
.gameover-caution__postal{
  position: absolute;
  pointer-events: none;
  font-size: 3.5vw;
  color: #f00;
  left: 2%;
  z-index: 2;
}

.gameover-caution__name{
  top:2.5%;
}

.gameover-caution__mail{
  top: 34%;
  background-color: rgba(226,226,226,1);
  width: 19.7em;
}

.gameover-caution__postal{
  top: 65%;
  background-color: rgba(226,226,226,1);
  padding-top: 1%;
  padding-bottom: 1% ;
  left: 0 !important;
  padding-left: 2%;
}



.gameover.show_sendEnd{
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: 4;
  overflow: hidden;
  height: 100%;
}

.gameover.show_sendEnd .gameover__notchallenge{
  visibility: visible;
  max-width: 600px;
   /*z-index: 4;*/
}

.challenge-end__point{
  color: #000;
   font-size: 2.5em;
       text-align: center;
       display: none;
}

.challenge-end__inner{

}

.challenge-end__point-cloud{
  position: absolute;
    width: 100%;

}

.challenge-end__point-cloud img{
  display: block;
  position: absolute;
  left:0;top:0;
}

.challenge-end__point-cloud img.challenge-end__bang-cloud{
  position:relative;
  transform:scale(0.6);
}

.challenge-end__point-cloud img.cloud-part1{
  width:20.58%;
  height:22.5%;
  left:2.79%;
  top:5.67%;
  transform-origin: 100% 100%;
  transform:scale(0.1);
  opacity: 0;
}
.challenge-end__point-cloud img.cloud-part2{
  width:22.97%;
  height:33.33%;
  left:71.98%;
  top:1.03%; 
  transform-origin: 0% 100%;
  transform:scale(0.1);
  opacity: 0;
}
.challenge-end__point-cloud img.cloud-part3{
  width:18.73%;
  height:20.1%;
  left:2.92%;
  top:77.83%; 
  transform-origin: 100% 0%;
  transform:scale(0.1);
  opacity: 0;
}

.challenge-end__point-cloud img.cloud-player{
  width:22.58%;
  height:30.41%;
  left:76.1%;
  top:38.49%; 
  transform-origin: 0% 70%;
  transform:scale(0.1);
  opacity: 0;
}
.challenge-end__point-cloud img.cloud-present{
  width:16.33%;
  height:21.82%;
  left:1.59%;
  top:42.28%;
  transform-origin: 100% 50%;
  transform:scale(0.1);
  opacity: 0;
}

.challenge-end.show.show1 .challenge-end__point-cloud img.cloud-part1,
.challenge-end.show.show1 .challenge-end__point-cloud img.cloud-part2,
.challenge-end.show.show1 .challenge-end__point-cloud img.cloud-part3{
  transform:scale(1);
  animation:bouns-cloud 1s ease-in-out forwards;
}

.challenge-end.show.show2 .challenge-end__point-cloud img{
  transform:scale(1);
  animation:bouns-cloud 1s ease-in-out forwards;
}

.challenge-end.show .challenge-end__point-cloud img.challenge-end__bang-cloud{
  transform:scale(1);
  animation:bouns-cloud2 1s ease-in-out forwards;
}



@keyframes bouns-cloud{
  0%{transform:scale(0.1);opacity: 0;}
  20%{transform:scale(1.1);opacity: 1;}
  40%{transform:scale(0.8);}
  60%{transform:scale(1.05);}
  80%{transform:scale(0.95);}
  100%{transform:scale(1);}
}

@keyframes bouns-cloud2{
  0%{transform:scale(0.6);opacity: 0;}
  20%{transform:scale(1.1);opacity: 1;}
  40%{transform:scale(0.8);}
  60%{transform:scale(1.05);}
  80%{transform:scale(0.95);}
  100%{transform:scale(1);}
}





.postalcode{
  width: 100%;
  margin-bottom: 5%;
}

.gameover__form input.postalcode1{
   width: 19.5%;
   display: inline-block;
       margin-bottom: 0;
}

.gameover__form input.postalcode-{
  width: 5%;
  display: inline-block;
}

.gameover__form input.postalcode2{
   width: 23.5%;
   display: inline-block;
   margin-bottom: 0;
   margin-left: 8%;
}

.gameover__text-message{
   margin-bottom: 0.25em;
   font-size: 1em;
}


.gameover__button{
  
  font-weight: 800;
  color: #ffffff;
  
  display: block;
  margin: 0 auto;
  width: 62%;
  text-align: center;
}

.gameover__button img{
  display: blocks;
}

.gameover__close{
  position: absolute;
  bottom:0;

}

.gameover__present{
  width: 100%;
}

.gameover__present1,
.gameover__present2,
.gameover__present3{
  position: absolute;
  left:0;
  top:0;
  visibility: hidden;
}

.gameover__present1.show,
.gameover__present2.show,
.gameover__present3.show{
  visibility:visible;
}

.gameover__present1{
  position: relative;
}

/*
ポイントエリア
***********************************/

.getpoint__area{
  position: absolute;
  left:50%;top:48%;
  transform:translate(-50%,-50%);
  transform-origin: center;
  width: 66.6%;
  opacity: 0;
  pointer-events: none;
  transition: opacity;
}

.getpoint__area.show{
  animation: keyframe2 1.5s ease-out forwards;
}

.getpoint__area img{
   position: absolute;
}

.getpoint1{
  position: relative;
}

.getpoint2,
.getpoint3{
  position: absolute;
   top:0;
   left:0;
   width: 100%;
  height: 100%;

}

.point-get__cloud1{
  /*左上の雲*/
  width:32.8%;
  height: 33.09%;
  left:0.2%;
  top:14.4%;
  transform-origin: right bottom;
}

.getpoint__area img.point-get1{
   position: relative;
}

.point-get1{
  /*黄色の地*/
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}

.point-get2{
   /*POINT-GETの文字*/
   width: 54.8%;
   height:38.77%;
   left:26.3%;
   top:39.48%;
}

.point-get__cloud2{
  /*雲右上*/
   width: 26.4%;
   height:40.62%;
   left:69.6%;
   top:0.7%;
   transform-origin: left bottom;
}
.point-get__cloud3{
  /*雲左下*/
   width: 24.2%;
   height:19.14%;
   left:3%;
   top:64.54%;
   transform-origin: right top;
}

.point-get__wedge1{
  /*楔左上*/
   width: 19.2%;
   height:14.89%;
   left:16.4%;
   top:22.22%;
   transform-origin: right bottom;
}

.point-get__wedge2{
  /*楔右下*/
   width: 11.6%;
   height:7.56%;
   left:78.2%;
   top:81.8%;
   transform-origin: left top;
}

.getpoint__area.show .point-get__cloud1,
.getpoint__area.show .point-get__cloud2,
.getpoint__area.show .point-get__cloud3,
.getpoint__area.show .point-get__wedge1,
.getpoint__area.show .point-get__wedge2{ 
  animation: keyframe1 1.3s ease-out 0.2s forwards;

}

/*.getpoint__area img.getpoint1{
  position: relative;
  opacity: 0.8;
}
.getpoint__area img.getpoint2{
  
  opacity: 0.8;
}*/

.getpoint__area.show img.getpoint2{
  /*animation: keyframe1 8s linear infinite;*/
}

.getpoint__area img.getpoint2{
  
}



@keyframes keyframe1{
0%{transform: scale(0); opacity:0;}
20%{transform: scale(1);}
30%{transform: scale(0.8);opacity:1;}
40%{transform: scale(1);opacity:1;}
55%{transform: scale(0.92);}opacity:1;
60%{transform: scale(1);opacity:1;}
80%{transform: scale(1);opacity:1;}
100%{transform: scale(1);opacity:0;}

}

@keyframes keyframe2{
0%{transform: translate(-50%,-50%) scale(0); opacity:0;}
20%{transform: translate(-50%,-50%) scale(1);}
30%{transform: translate(-50%,-50%) scale(0.8);opacity:1;}
40%{transform: translate(-50%,-50%) scale(1);opacity:1;}
55%{transform: translate(-50%,-50%) scale(0.92);}opacity:1;
60%{transform: translate(-50%,-50%) scale(1);opacity:1;}
80%{transform: translate(-50%,-50%) scale(1);opacity:1;}
100%{transform: translate(-50%,-50%) scale(1);opacity:0;}
}


/*
チャレンジ終了
***********************************/

.challenge-end{
   position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);

  width: 100%;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.2em;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s ease-out;
  overflow: hidden;
  display: none;
  pointer-events: none;
  /*visibility: visible;
  opacity: 1;*/
  
}

.challenge-end.show{
  visibility: visible;
   opacity: 1;
   display: block;
   pointer-events: auto;
}




.challenge-end__inner{
  position: relative;
  height: 100vw;
  top: 50%;
  transform: translateY(-45%);
}

.challenge-end__animation-area{
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;top:-20vh;
  transition: opacity 0.5s ease-out;

}

.challenge-end__animation-area.hide{
  opacity:0;
}

.challenge-end__animation-area img{
  height: 100%;
  width: auto;
}

.challenge-end__paper_area,
.challenge-end__tape_area{
  position: absolute;
  width: 100%;
  height: 100%;
  height: 120%;
  left:0;top:0;
  pointer-events: none;
  transform: translate3d(0px, 0px, 0px);
}

div[class^='challenge-end__paper-'],
div[class^='challenge-end__tape-']{
  position: absolute;
  height: 3.5vh;
}

div[class^='challenge-end__tape-']{
   height: 15vh;
}

.challenge-end.show1 div[class^='challenge-end__tape-']{
  transform: rotate(26.8deg)
}

/*ドロップアニメーションのバリエーション*/

.challenge-end.show1 div[class^='challenge-end__tape-'] img{
  animation: wave3 2.25s ease-in-out infinite;
}

.challenge-end.show1 div[class^='challenge-end__tape-'] .challenge-end__tape-inner{
  animation: dropmove2 4.6s linear;
}


.challenge-end.show1 [class^='challenge-end__paper-'] img{
   animation: wave 2s ease-in-out infinite;
}

.challenge-end.show1 [class^='challenge-end__paper-'] .challenge-end__paper-inner{
  animation: droppaper1 5s linear;
}




@keyframes dropmove2{
  0%{transform: translate(0%,0%) scaleY(1) rotate(0deg);}
  25%{transform: translate(0%,150%) scaleY(1.1) rotate(10deg);}
  50%{transform: translate(0%,300%) scaleY(1.2) rotate(20deg);}
  75%{transform:translate(0%,450%) scaleY(1.3) rotate(10deg);}
  100%{transform: translate(0%,600%) scaleY(1.4) rotate(0deg);}
}

@keyframes dropmove2-rev{
  0%{transform: translate(0%,0%) scaleY(1) rotate(0deg);}
  25%{transform: translate(0%,150%) scaleY(1.1) rotate(-10deg);}
  50%{transform: translate(0%,300%) scaleY(1.2) rotate(-20deg);}
  75%{transform:translate(0%,450%) scaleY(1.3) rotate(-10deg);}
  100%{transform: translate(0%,600%) scaleY(1.4) rotate(0deg);}
}

@keyframes wave3{
  0%{transform: translate(0%,0%) scaleX(1) rotate(0deg);}
  25%{transform: translate(100%,0%) scaleX(0.75) rotate(10deg);}
  50%{transform: translate(0%,0%) scaleX(1) rotate(20deg);}
  75%{transform: translate(-100%,0%) scaleX(0.75) rotate(10deg);}
  100%{transform: translate(0%,0%) scaleX(1) rotate(0deg);}
}
@keyframes wave4{
   0%{transform: translate(0%,0%) scaleX(1) rotate(0deg);}
  25%{transform: translate(100%,0%) scaleX(0.75) rotate(-15deg);}
  50%{transform: translate(0%,0%) scaleX(1) rotate(-20deg);}
  75%{transform: translate(-100%,0%) scaleX(0.75) rotate(-15deg);}
  100%{transform: translate(0%,0%) scaleX(1) rotate(0deg);}
}




@keyframes droppaper1{
  0%{transform:translate(0%,0%) scale(0.5) rotateY(0deg);} 
  25%{transform:translate(0%,700%) scale(0.65) rotateY(180deg);}
  50%{transform:translate(0%,1400%) scale(0.8) rotateY(360deg);}
  75%{transform:translate(0%,2100%) scale(0.9) rotateY(520deg);} 
  100%{transform:translate(0%,2800%) scale(1) rotateY(640deg);}
}

@keyframes droppaper2{
  0%{transform:translate(0%,0%) scale(0.5) rotateY(0deg);} 
  25%{transform:translate(0%,700%) scale(0.65) rotateY(-180deg);}
  50%{transform:translate(0%,1400%) scale(0.8) rotateY(-360deg);}
  75%{transform:translate(0%,2100%) scale(0.9)rotateY(-520deg);} 
  100%{transform:translate(0%,2800%) scale(1) rotateY(-640deg);}
}

@keyframes wave{
  0%{transform: translate(0%,0%) scaleX(1);}
  25%{transform: translate(100%,0%) scaleX(0.5) rotateZ(90deg);}
  50%{transform: translate(0%,0%) scaleX(1) rotateZ(180deg);}
  75%{transform: translate(-100%,0%) scaleX(0.5) rotateZ(270deg);}
  100%{transform: translate(0%,0%) scaleX(1) rotateZ(360deg);}
}

@keyframes wave2{
  0%{transform: translate(0%,0%) scaleX(1);}
  25%{transform: translate(130%,0%) scaleX(0.5) rotateZ(-90deg);}
  50%{transform: translate(0%,0%) scaleX(1) rotateZ(-180deg);}
  75%{transform: translate(-130%,0%) scaleX(0.5) rotateZ(-270deg);}
  100%{transform: translate(0%,0%) scaleX(1) rotateZ(-360deg);}
}

.challenge-end_kira-area{
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  /*top:50vw;*/
  top:20vh;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out 0s ;
}

.challenge-end_kira{
  position: absolute;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 0.5s ease-out 0s;
  
}

.challenge-end_kira-inner{
  animation-fill-mode: forwards;
}

.challenge-end_kira-area.show{
   opacity: 1;
}

.challenge-end_kira-area.show .challenge-end_kira{
    opacity: 1;
  }

.challenge-end_kira-area.hide{
   opacity:0;
   /*transition-delay:0;*/
}

.challenge-end_kira-area.show .challenge-end_kira{
  transform: translate(-50%,-50%);
}

.challenge-end_kira-area.show .challenge-end_kira-inner{
  animation: kiraInner 3s ease-in-out infinite;
}

.challenge-end_kira1{
  position: relative;
  animation-fill-mode: forwards;
  
}

.challenge-end_kira-area.show .challenge-end_kira1{
  animation: kira1 3s linear infinite;
  }

.challenge-end_kira2{
  position: absolute;
  animation-fill-mode: forwards;
  left:0;
  top:0;
}

.challenge-end_kira-area.show .challenge-end_kira2{
   animation: kira2 6s linear infinite;
}

.challenge-end_kira img{
  width: auto;
  height: 7vh;
  transition: transform 1s 0.5s ease-out;
  transform: scale(0.01);
  /*opacity: 0;*/
}

.challenge-end_kira-area.show .challenge-end_kira img{
  transform: scale(1);
  /*transition-delay: 0s;*/
}

.challenge-end_kira-area.hide .challenge-end_kira img{
  transform: scale(0.01);
  transition-delay: 0s;
}

@keyframes kiraInner{
  0%{transform: scale(1.5)}
  50%{transform: scale(1)}
  100%{transform: scale(1.5)}

}

@keyframes kira1{
  0%{opacity:1}
  50%{opacity:0.7}
  100%{opacity:1}
}

@keyframes kira2{
  0%{transform: rotate(0deg)}
  50%{transform: rotate(180deg)}
  100%{transform: rotate(360deg)}
}

/*獲得商品出しわけと演出*/

.challenge-end__get-item{
  height: 100%;
  width: 100%;
  /*height: auto;?*/
  position: absolute;
  left:50%;
  transform: translateX(-50%);
}

.challenge-end__get-item.no2thButton{
  top:10%;
}

.challenge-end__get-item.maxNum{
      top: 10vw;
}

.challenge-end__get-item-image{
  position: absolute;
  height: 100%;
  width: 69%;
  left:50%;
  top: 15vw;
  transform: translateX(-50%);

}

.challenge-end__get-item-image div{
  position: absolute;
  width: 100%;
  top:0;
  left: 0;
  visibility: hidden;

}

.challenge-end__get-item-image--1,
.challenge-end__get-item-image--2,
.challenge-end__get-item-image--3{

}

.challenge-end__get-item-image--1{
  position: relative;
}

.challenge-end__get-item-image div.show{
  visibility: visible;
}

.challenge-end__get-item-image--1.show,
.challenge-end__get-item-image--2.show,
.challenge-end__get-item-image--3.show{
}

.challenge-end__challenge-2th.hide,
.challenge-end__challenge-2th-message.hide{
  display: none;
}

.challenge-end__go-btn{
  display: flex;
  flex-direction: column;
  font-size: 1.5em;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  top:30%;
  top: 35.5vw;
  top: 37.5vw;
  width: 62%;

}



.challenge-end__go-btn button{
}

.challenge-end__go-btn button img{
  display: block;
}


.challenge-end__challenge-2th-message{
  width: 100%;
  margin-bottom: 0;
  font-size: 0.35em;
}

.challenge-end__challenge-2th{
  width: 100%;
  margin-bottom: 1vw;
  margin-bottom: 3vw;
}

.challenge-end__get-item-point{
  width: 100%;
   margin-bottom: 1em;
   background-color: transparent;

}

.challenge-end__go-gameover{
  width: 100%;
  background-color: transparent;
}



/*最高*/
.challenge-end__max-message,
.gameover__max-message{
  display:none;
}

.challenge-end__max-message.show,
.gameover__max-message{
  display:inline;
}

.gameover-caution__name,
.gameover-caution__mail,
.gameover-caution__postal{
  display: none;
}


.gameover-caution__name{
    margin-top: -0.3%;
}
.gameover-caution__name.show,
.gameover-caution__mail.show,
.gameover-caution__postal.show{
  display: block;
  left:2%;
  
}

.gameover__presentback{
    position: absolute;
    width: 100%;
    left: 0;
    padding-top: 9%;
    visibility: hidden;
}

.gameover__presentback.show{
  visibility:visible;
}

.test-btns{
  position: absolute;
  z-index: 2;
  
  letter-spacing: -0.1em;
  text-align: center;
  right: 2%;
  top: 0.5em;
  font-size: 12px;
  z-index: 4;
  display: none;
}

.clear_cash{
  border: solid;
  border-radius: 1em;
  background-color: #fff;

}

.max_throw{
  font-size: 1.25em;
}

.max_point{
  font-size: 1.25em;
}

.max_throw__text,
.max_point__text{
  display: block;
}

#max_throw__num,
#max_point__num{
  width: 3em;
   font-size: 1.5em;
}
footer{
      position: relative;
}

.footer__gotop{
  position: absolute;
  width: 17.33%;
  bottom:2%;
  left:50%;
  transform: translate(-50%,-50%);
}

.window-size{
  position: fixed;
  width:98%;
  height: 98%;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  border: solid red 1px;
  pointer-events: none;
  width:100%;
  height:100%;
  max-width: 600px;
 border: none;
}

.expires{
  position: fixed;
  width:100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 100;
  left:0;
  top:0;
  display: none;
}

.expires.show{
  display: block;
}

.expires__message{
  position: absolute;
  width: 100%;
  color: #fff;
  font-size: 2em;
  line-height: 1.8;
  text-align: center;
  top:50%;
  transform: translateY(-50%);
}

.go-messe-exhibition{
  display: block;
  width: 85%;
  position: absolute;
  top:36.1%;
  left: 50.4%;
  transform: translateX(-50%);
}

.go-messe-exhibition img{
  display: block;
  width: 100%;
}



@media screen and (min-width:601px){
  .sp_only {
    display: none !important; 
  } 
 

  body {
    font-size: 16px; 
  }

  .start-game{
    right:50%;
    transform: translateX(300px);
    width: 108px;
    top: 441px;
  }

  .challenge-end__go-btn{
    top:213px;
    top:225px;
  }

  .challenge-end__inner{
    height: 600px;
  }


  .challenge-end__get-item-image{
    height: 270px;
    top:90px;
  }

  .challenge-end__get-item.maxNum{
      top: 60px;
  }

  .challenge-end__challenge-2th{
    margin-bottom: 6px;
    margin-bottom: 18px;
  }

  .gameover-caution__name,
  .gameover-caution__mail,
  .gameover-caution__postal{
    font-size: 21px;
  }
  .gameover__form input{
    font-size: 24px;
  }
  
  .ballcount-area{

      height: 90px;
  }

  .expires__message{
    font-size:24px;   
  }

}

@media screen and (max-width: 600px) {
  
  .pc_only {
    display: none !important; 
  }

  .sp_only {
    display: block !important; 
  } 

  body {
    font-size: 2vw; 
  }

  .canvasframe__footer{
    height: 20vw;
  }

  .tracebox{
    font-size: 2.0em;
  }

  .gameover{
     font-size: 2em;
  }
  

}

.gameover__form{
  pointer-events:none;
}