/***************************************************
           SLOT
****************************************************/



.slot{

   position: relative;
    width: 100%;
    max-width: 768px;
    height: 100%;
    top: 0;
    pointer-events: none;
    background-color: rgba(255,255,255,1);
    /*opacity: 0;*/
    transition: opacity 0.5s ease-out;
   /* padding-top: 5em;*/
    background-color: #d6ceb7;
    z-index: 400;
    /*overflow: scroll;*/
    background: url("../img/slot__bg.png") repeat-y;
    background-size: 100%;
    pointer-events: auto;
    opacity: 1;

}

.slot.show{
  opacity: 1;
   pointer-events: auto;
 
}

.slot__back{
position: absolute;
width: 100%;height: 100%;
 padding-top: 95%;
}

.slot__back{
/*background: url("../img/slot__bg.png") repeat-y;*/
   
}

.slot__back img{
  display: block;
}

.slot.show.active{
   
}

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

.slot__window{
 
    margin: 0 auto;

    position: relative;
    padding-top: 21%;
    min-height: 100%;
    overflow: hidden;

}

.slot__count{
  color: #000;
  display: flex;
  margin-bottom: 0.25em;
  position: absolute;
  width: 100%;
  top: 0;
}

.slot__count-back{
  position: relative;
  margin-top: -0.2em;
  width: 100%;

}

.wrapper{

}

.charenge{
  text-align: center;
 /* background-color: #ff0099;*/
  width: 14em;
  margin-right: 0.8em;
  height: 1.75em;
  margin-top: 0.3em;
  border-radius: 0.5em;
  padding-left: 4em;
  visibility: hidden;
  transition: background-color 0.3s ease-out;
  display: inline-block;
}


.charenge__num-display{
  position: absolute;
    width: auto;
    padding-top: 12.4%;
    padding-left: 11.75%;
    white-space: nowrap;
    left: 47%;
    top: 1%;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}


.charenge__nums{
  width: 5.75em;
}

.charenge__num{
  /*background-color: #fff;
  border: solid #999 1px;*/
  height: 1.5em;
  width: 1.5em;
  vertical-align: 0.5em;
  color: #000;
  display: inline-block;
  text-align: center;
  line-height: 1.5em;
  font-size: 1.25em;
  margin-right: 0.25em;
}

.charenge__num-text{
  display: inline-block;
  visibility: hidden;
      margin-top: 0.1em;
}

.slot__game{
    width: 100%;
    left: 0%;
    overflow: hidden;
  
 
  /*justify-content: space-between;
  height: 70vw;*/
  margin-bottom: 0.3em;
 
}

.slot__panel{
display: flex;
justify-content: space-between;
    height: 94%;
    width: 86%;
    margin-left: 6.5%;
    padding-top: 2.5%;
 overflow: hidden;
     background: #fff;
}

.slot__cover{
  position: absolute;
  top: 0;
}




.game-slot__front{
  position: absolute;
  width: 100%;
  top: 0;
  transform: translate3D(0,0,0);
}



.game-slot__front img{
  position: absolute;
  top: 0;
  display: block;
  opacity: 0;

}

.game-slot__front img.show{
  opacity: 1;
}

img.game-slot__base{
  position: relative;
  opacity: 1;
      width: 100.5%;
    margin-left: -0.25%;
}

img.game-slot__light{
  opacity: 1;
}



.slot__cards{
  height: 400%;/*200->400*/
  width: 30.5%;
   display: flex;
   flex-direction: column;
   margin-left: 2.2%;
   /*
   border: solid #999 1px;*/
   /* transform: translateY(-37.5%); */
   transform: translateY(-68.75%);
   transition: .4s linear;
}

/*.slot__cards:nth-child(1){
  transition-duration: 0.385s;
}

.slot__cards:nth-child(3){
   transition-duration: 0.37s;
}*/

.slot__cards.move{
  /* transform: translateY(-12.5%); */
  transform: translateY(-6.25%);
}

.slot__cards.notransition{
  transition:none;
}

.slot__cards:nth-child(3){
  margin-right: 2.2%;
}

.slot-game__btns{
  /*display: flex;
  justify-content: space-between;*/
}

.slot__attention{
  width: 92.5%;
  margin: -1em auto 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}
.slot__attention.hide{
  display: none;
  transition: opacity 0.3s ease-out;
}

.slot__card{
 
  text-align: center;

  width: 96%;
  margin-left: 3%;
  height: 25%;
  padding: 2%;
  position: relative;
  
}

.card__a,
.card__b,
.card__c,
.card__d,
.card__e,
.card__f,
.card__g,
.card__h{
  border-top: solid #ccc 1px;
  /*border-bottom: solid #999 1px;*/
  height: 100%;
  width: 100%;
  line-height:2.4em;
  font-size: 3em;
  position: absolute;
      overflow: hidden;
  /*top: 50%;
  transform: translateY(-50%);
*/
}

.slot__card img{
    margin-top: 5%;
}

.slot-game__btns{
  width: 100%;
  padding-top: 3%;
  margin-left: auto;
  margin-right: auto;  justify-content: space-between;
  position: absolute;
  top: 2%;

}

.slot-game__btns img{
  display: block;
}

.slot-game__btn-wrap{
  width:41.6%;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.3s ease-out;
}

.slot-game__btn-wrap.hide{
  opacity: 0;
}


.slot-game__btn{
 
  margin: 0 auto;
  position: relative;
  transition:opacityr 0.3s ease-out ;
}

.slot-game__btn-off,
.slot-game__btn-on,
.slot-game__btn-off-disactive{
   display: block;
   transition: opacity 0.2s ease-out;
}

.slot-game__btn-off{
  position: relative;
 
}



.slot-game__btn-off-disactive{
  position: absolute;
  top: 0;left: 0;
  opacity: 0;
}

.slot-game__btn-off-disactive.show{
   opacity: 1;
}

.slot-game__btn-on{
  position: absolute;
  top: 0;left: 0;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.slot-game__btn.press1{
  /* background-color: #f09;*/
  position: relative;
}

.slot-game__btn.press2{
   /*background-color: #ccc;*/
}

.slot-game__btn.press1 .slot-game__btn-on{
  opacity: 1;
}

.slot-game__btn.press1 .slot-game__btn-off{
  opacity: 0;
}

.slot-game__btn.press2 .slot-game__btn-on{
  opacity: 0;
}

.slot-game__btn.press2 .slot-game__btn-off{
  opacity: 0;
}

.slot-game__btn.press2 .slot-game__btn-off-disactive{
  opacity: 1;
}

.slot__present-btn{
  font-size: 2.5em;
  padding: 0.2em 0.5em;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  font-weight: bold;
 
  position: absolute;
  width: 90%;
  left: 50%;
  top: 50.5%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition:opacity 0.6s ease-out ;
}

.slot__present-btn-inner{
  transform: scale(0.01);

}

.slot__present-btn.show,
.slot__present-btn.show__special{
   opacity: 1;
  
}

.slot__present-btn.show .slot__present-btn-inner,
.slot__present-btn.show__special .slot__present-btn-inner{
   animation: slotPresentBtnMove 0.6s ease-in-out;
   transform: scale(1);

}

.slot__present-btn.hide .slot__present-btn-inner{
   transform: scale(1);
}

.slot__present-get{
  position: relative;

}

.present__get-back{
  position: relative;
}

.present__get-back__special{
  position: relative;
  opacity: 0;
  display: none;
}

.present__get-text{
  position: absolute;
  left: 0;top: 0;
}

.present__get-text__special{
  position: absolute;
  left: 0;top: 0;
  opacity: 0;
  display: none;
}

.slot__present-lose {
  position: absolute;
  top: 0;
  opacity: 0;
}

.slot__present-btn.show__special .present__get-back__special{
  opacity: 1;
  display: block;
}

.slot__present-btn.show__special .present__get-text__special{
  opacity: 1;
  display: block;
}

.slot__present-btn.show__special .present__get-back{
  opacity: 0;
  display: none;
}

.slot__present-btn.show__special .present__get-text{
  opacity: 0;
  display: none;
}

.slot__present-btn.show.lose .slot__present-get,
.slot__present-btn.show.lose .present__get-text__special{
  opacity: 0;
}

.slot__present-btn.hide.lose .slot__present-get,
.slot__present-btn.hide.lose .present__get-text__special{
  opacity: 0;
}

.slot__present-btn.show.lose .slot__present-lose{
  opacity: 1;
}
.present__lose-back{
   position: relative;
}

.present__lose-text{
  position: absolute;
  left: 0;top: 0;
}

.slot__retry-btn{
  color: #fff;
  /*font-size: 2.5em;*/

    width: 14em;
    width: 43.73%;
    line-height: 1;
    padding: 0.5em;
   
    display: block;
   /* background-color: #ff9900;*/
    text-align: center;
    margin-bottom: 0.5em;
    border-radius: 0.5em;
    opacity: 0;
   transition: opacity 0.3s ease-out;
   pointer-events: none;
}

.slot__retry-btn.active{
  opacity: 1;
  pointer-events:auto;

}

.entry__atention{
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 1.2em;
  padding-top: 0.8em;
  margin-bottom: 0.25em;
}

.slot__reset{
  pointer-events: none;
  opacity: 0;
  position: absolute;
  top: 0;left: 0;
  transition: opacity 0.3s ease-out;
  width: 100%;

}

.slot__reset.active{
  pointer-events: auto;
  opacity: 1;
}

.slot__reset-btn{
  color: #fff;
  /*font-size: 2.5em;*/

    width:  52.66%;
    line-height: 1;
   
    display: block;
   /* background-color: #ff3399;*/
    text-align: center;
    margin-bottom: 2em;
    border-radius: 0.5em;
    margin-left: auto;
    margin-right: auto;
   
    transition:opacity 0.3s ease-out;
}

.slot__reset-btn.disactive{
  pointer-events: none;
}

.slot__manual{
  position: absolute;
    border-radius: 0.5em;
    width: 70%;
    top: 53.5%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background-color: rgba(255,127,127,0.8);
    margin-bottom: 1em;
    padding: 1.5em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

.slot__manual.show{
  opacity: 1;
}

.slot__manual>div{
  transition: opacity 0.3s ease-out;
  text-align: center;
}

.slot__manual p{
  line-height: 1.5;
}
.slot__manual2{
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  top: 0.2em;
  font-size: 1.25em;
}

.slot__manual.get-present .slot__manual1{
  opacity: 0;
}

.slot__manual.get-present .slot__manual2{
  opacity: 1;
}

.slot__message{
  display: none;
  transition: opacity 0.3s ease-out;
  position: absolute;
  width: 81%;
  top: 34%;
  left: 9.5%;
  pointer-events: none;
}
.slot__message.show{
  display: block;
  /*position: relative;
  bottom: 2em;*/
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.3s ease-out;
  width: 85.2%;
 /*opacity: 0;*/
}

.slot__message-1,
.slot__message-2{
  width: 100%;
  text-align: center;
  position: absolute;
 left: 0;top: 0;
 transition: opacity 0.3s ease-out;
 opacity: 0;
  pointer-events: none;
  
}

.slot__message-1{
  /*visibility: hidden;*/
  position: relative;
  pointer-events: none;
}

.slot__message-2{
  pointer-events: none;
  top: -7%;
}
  

.slot__message-1.show,
.slot__message-2.show{
  /*visibility: visible;*/
  opacity: 1;
   pointer-events: auto;
}



.slot__getpresent{
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.slot__getpresent.show{
  opacity: 1;
}

.slot__getpresent-1{
  position: relative;
  visibility: hidden;
}

.slot__getpresent-1b,
.slot__getpresent-2,
.slot__getpresent-3{
  position: absolute;
  left: 0;top: 0;
  visibility: hidden;
}

.slot__getpresent-1.show,
.slot__getpresent-1b.show,
.slot__getpresent-2.show,
.slot__getpresent-3.show{
  visibility:visible;
}

.slot__getpresent-bottom{
  position: relative;
}

.slot__getpresent-top1,
.slot__getpresent-top2,
.slot__getpresent-top3{
  position: absolute;
  left: 0;top: 0;
  opacity: 0;
}

.slot__getpresent-top1.show,
.slot__getpresent-top2.show,
.slot__getpresent-top3.show{
  opacity: 1;
}

.slot__gopresent-char,
.slot__recharenge-char1,
.slot__recharenge-char2{
  width: 43.5%;
  position: absolute;
  display: block;
}

.slot__gopresent-text,
.slot__recharenge-text1,
.slot__recharenge-text2{
  width: 38%;
  display: block;
  position: absolute;
}
.slot__gopresent-text{
  left: 67%;
  top: -94%;
}

.slot__recharenge-message1,
.slot__recharenge-message2{
  transition: opacity 0.15s ease-out;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.slot__recharenge-message1{
  
}

.slot__recharenge-message1.hide,
.slot__recharenge-message2.hide{
  opacity: 0;
  transition: none;
}

.slot__recharenge-message2{
  opacity: 0;
  /* overflow: hidden;
 position: absolute;
  top: 0;
  width: 100%;
  height: 100%;*/
}

.slot__recharenge-message2.show{
   opacity: 1;
}

.slot__recharenge-message1{
  /*visibility: hidden;*/
}


.slot__nextchallenge-btns{
      position: absolute;
    top: 41.75%;
    width: 71.4%;
    width: 100%;
    left: 14.3%;
    left: 0%;
     opacity: 0;
  transition: opacity 0.3s ease-out;
}

.slot__nextchallenge-btns.show{
  opacity: 1;
}

.slot__nextchallenge-btn-1{
  position: relative;
  visibility: hidden;
}

.slot__nextchallenge-btn-2,
.slot__nextchallenge-btn-3{
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.slot__nextchallenge-btn-3{
      top: -26.5%;
}

.slot__nextchallenge-btn-1.show,
.slot__nextchallenge-btn-2.show,
.slot__nextchallenge-btn-3.show{
  visibility: visible;
}

.slot__getmessage{
  position: absolute;
  width: 75%;
  left: 12%;
  top: -110%;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.slot__getmessage.show{
  opacity: 1;
}

.slot__getmessage-1{
  position: relative;
  visibility: hidden;

}

.slot__getmessage-1b,
.slot__getmessage-2,
.slot__getmessage-3{
   position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.slot__getmessage-3{
    /*top: -27%;*/
}

.slot__getmessage-1.show,
.slot__getmessage-1b.show,
.slot__getmessage-2.show,
.slot__getmessage-3.show{
  visibility:visible;
}


.slot__gopresent-char{
  left: 28.25%;
  top: -48%;
}

.slot__recharenge-char1{
  left: auto;
  right: -5%;
  top: 12%;
}

.slot__message-2.show .slot__recharenge-char1{
  top: 15%;
}
.slot__recharenge-char2{
  left: auto;
  right: -11%;
  top: 10%;
}

.slot__recharenge-text1{
  left: auto;
  right: -8%;
  top: -84%;
}
.slot__recharenge-text2{
  left: auto;
  right: -12%;
  top: -74%;
}

/*テスト用*/

.slot__message{
  /*display: block;*/
}

.slot__message-1{
 /* opacity: 1;*/
}

.getnow-message{
  position: absolute;
    width: 81%;
    top: 33%;
    left: 9.5%;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
    /* visibility: hidden; */
    opacity: 0;
  }

  .wrapper.show .getnow-message{
    /* visibility:visible; */
    opacity: 1;
  }

  .getnow-message.hide{
    opacity: 0 !important;
  }

  .getnow-message__back{
    position:relative;
  }



  .getnow-message__back1,
  .getnow-message__back2{
    position:relative;
     width: 100%;
     visibility: hidden;
  }

  .getnow-message__back1.show,
  .getnow-message__back2.show{
    visibility:visible;
  }

  .getnow-message__back2{
    position:absolute;
    top: 0;left: 0;
  }

  .getnow-message__ab{
    position: absolute;
    width: 100%;
    left: -5%;
    top: -19%;
  }

  .getnow-message__a1,
  .getnow-message__a2,
  .getnow-message__b{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    visibility:hidden;
  }

  .getnow-message__a1.show,
  .getnow-message__a2.show,
  .getnow-message__b.show{
    visibility:visible;
  }

   .getnow-message__a1{
    position: relative;
   }


/*修正*/

.slot{
  /*position: fixed;*/
  /*left: 50%;
  transform: translateX(-50%);*/
}

.present-count{
  position: absolute;
  top: 3.45em;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1.15em;

}

.present-count__text.hide{
   display: none;
}

.present-count__text2{
  display: none;
}

.present-count__text2.show{
   display: block;
}

.present-count__num{
  margin-left: 0.15em;
  margin-right: 0.2em;
}



.slot__retry-more-btn,
.slot__add-entry-btn{
  position: absolute;
  bottom: 5.35em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;

}

.slot__gopresent-btn{
   position: absolute;
  bottom: 2em;
  left: 50%;
  width: 69.8%;
  transform: translateX(-50%);
  white-space: nowrap;

}

.slot__add-entry-btn {
  /*pointer-events: none;*/
}

.slot__retry-more-btn{
  display: none;
  width: 55.6%;
  width: 69.8%;
}

.slot__retry-more-btn.show{
  display:block;
}

.slot__add-entry-btn.hide{
   display: none;
}



.slot__message.present-hit{
  /*top: -2.2em;*/
}

.slot__gopresent-text{
  display: none;
}

.slot__gopresent-char {
    width: 98.6%;
    left: 8.25%;
    top: -101%;
    transition: opacity 0.6s ease-out;
}

.slot__gopresent-char.hide{
  visibility: hidden;
  opacity: 0;
  transition:none;
}

.slot__gopresent-char.present-hit{
  opacity: 1;
  top: -66%;
  visibility:visible;
  
}

.slot__recharenge-text1.end5{
  top: -17%;
}

.slot__message-2.show .slot__recharenge-char2.end5{
  top: 34%;
}

.slot__message.end5{
  top: -4em;
}

.slot__recharenge{
  transition: opacity 0.3s ease-out 0.3s;
}

.slot__recharenge.hide{
  opacity: 0;
  transition: none;
  
}

.slot__recharenge.hide.show{
  opacity: 1;
  
}

.slot__under{
  position: relative;
}

.exchange{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  max-width: 768px;
   left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-aspect-ratio: 7/10) and (max-height: 1097px) {
  .exchange{
    max-width: 70vh;
    min-width: inherit;
    max-height: 120vh;
  } 
}

.exchange{
overflow-y: scroll;
    background-color: #fffbf3;
}

.exchange.show{
   opacity: 1;
    pointer-events:auto;
    visibility: visible;
    pointer-events: auto;
    z-index: 1000;
}

.exchange__head{
   position: relative;
   width: 100%;
}

.exchange__body{
  position: relative;
  width: 100%;
  /* height: 100%; */
  background-color:#FFFCD7;
  /* min-height: 146vw; */

}

.exchange__body-inner{
   /*position: relative;
   height: 100%;*/
  /* width: 100%;
   position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);*/
}

.exchange__btn{
  position: absolute;
  width: 45.2%;
  left: 49%;
  transform: translateX(-50%);
  top: 62%;
}

.exchange__body-inner>img{
  
}

.exchange__present{
  display: none;
}

.exchange__present.show{
  display:block;
}

.exchange__present-hukubukuro,
.exchange__present-otoshidama,
.exchange__present-vja{
  visibility: hidden;
  position: absolute;
  left: 0;top: 0;
}

.exchange__present-hukubukuro{
  position:relative;
}

.exchange__present-hukubukuro.show,
.exchange__present-otoshidama.show,
.exchange__present-vja.show{
  visibility: visible;
}


form{
  display: block;
  position: absolute;
      top: 35.8%;
    width: 100%;
    height: 54%;
   

}




.present__nickname,
.present__mailadress{
  position: absolute;
  width: 90%;
  left: 5%;

}

#nickname,
#mailadress{

  font-size: 1.25em;
  padding: 0 1em;
  padding: 0.1em 0.5em 0;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  width: 100%;
 /* background-color: transparent;
  border: none;*/
  background-color:#fff;
  border: solid 0.1em #333;
  /*border-radius: 0.25em;*/
}

.present__nickname{
  top: 12.6%;
}

.present__mailadress{
  top: 34.5%;
}

.present__nickname-text,
.present__mailadress-text{
  font-size: 0.75em;
}

.present__nickname-aleret,
.present__mailadress-aleret{
  
  position:absolute;
  top: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  opacity:0 ;
  padding-left: 1em;
  line-height: 2.5;
  color: #f00;

}



.present__mailadress.fail,
.present__nickname.fail{
  background-color: #f99;
  
}

.present__mailadress.fail .present__mailadress-aleret,
.present__nickname.fail .present__nickname-aleret{
  opacity:1;
}

.slot__getpresent-message{
  position: absolute;
  top: 36%;left: 50%;
  transform: translate(-50%,-50%);
  font-weight: bold;
  visibility: hidden;
  width: 100%;
}

.slot__getpresent-message.show{
  visibility:visible;
}


#reset-slot{
	display:none;
}

html,body{
  background: linear-gradient(to left, #ffbd68, #faecbc, #ffbd68);
    height: auto;
    width: 100%;
}