.nazo_wrap {
  width: 100%;
  position: relative;
  height: 542px;
}

.nazo_gacha {
  width: 280px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -140px;
  cursor: pointer;
  transform-origin: center bottom;
}
.nazo_gacha:before {
    content: "";
    position: absolute;
    display: block;
    width: 97%;
    height: 57.5%;
    top: 9.8%;
    left: 50%;
    background: #000;
    opacity: 0;
    transform: translate(-50%,0);
    transition: 0.3s;
}
.nazo_gacha:hover:before {
      opacity: 0.3;
}
.nazo_gacha_body {
  width: 100% !important;
  height: auto;
  display: block;
}

.nazo_gacha_c {
  display: block;
  position: absolute;
  left: 50% !important;
  top: 79% !important;
  width: 22.2% !important;
  height: auto;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.nazo_item {
  width: 500px;
  height: auto;
  display: block;
  position: absolute;
/*  transform: translate(-50%, -100px);*/
  left: 50%;
  bottom: -100px;
  z-index: 10;
  transition: all 40ms cubic-bezier(0.535, -0.145, 0.975, 0.565);
  /* custom */
  opacity: 0;
  pointer-events: none;
    margin-left:-250px;

}

.nazo_item.nazo_item_on {
/*  transform: translate(-50%, 100px);
  transition: all 400ms cubic-bezier(0.535, -0.145, 0.975, 0.565); */
  /* custom */
  backface-visibility: hidden;
        animation: bounceInDown2 1.7s ease-in 0s 1 alternate;
transform-origin: 50% 90%;
  opacity: 1;
  pointer-events: auto;
}

@media screen and (min-width: 768px) {
  .nazo_item.nazo_item_on:hover {
    transform:  scale(1.05);
    transition: all 300ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  }
  .nazo_gacha:not(:hover) .nazo_gacha_c {
      animation: ncrotation32 0.2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 reverse;
      animation-fill-mode: forwards !important;
  }
  .nazo_gacha:hover .nazo_gacha_c {
      animation: crotation 1.6s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 alternate;
      animation: ncrotation3 0.8s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 alternate;
      animation-fill-mode: forwards !important;
  }

  .nazo_gacha:focus .nazo_gacha_c, 
  .nazo_gacha:active .nazo_gacha_c,
  .nazo_gacha:hover:focus .nazo_gacha_c, 
  .nazo_gacha:hover:active .nazo_gacha_c {
      animation: ncrotation4 0.8s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 alternate !important;
      animation-fill-mode: forwards !important;
  }
}




@keyframes crotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  12% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  20% {
    transform: translate(-50%, -50%) rotate(80deg);
  }
  28% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  58% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}






@keyframes ncrotation3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  36% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(80deg);
  }
  84% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
}




@keyframes ncrotation32 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  36% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(80deg);
  }
  84% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
}




@keyframes ncrotation4 {
  0% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}







.nazo_item_img {
  width: 100% !important;
  max-width: 100% !important height: auto;
  display: block;
  transform-origin: center bottom;
}

.nazo_item.nazo_item_on .nazo_item_img {
/*  animation: nrotation 0.9s ease-in-out 0s 1 alternate; */
}

@keyframes nrotation {
  0% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-15deg);
  }
  85% {
    transform: rotate(9deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.nazo_wrap_1 .nazo_gacha {
  opacity: 0;
  transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
  /* easeInExpo */
}

.nazo_wrap_1.nazo_wrap_2 .nazo_gacha {
  width: 146px;
  right: 30px;
  left: auto;
  margin-left: 0;
  transition: all 0ms linear;
  /* easeInExpo */
  transform: scale(0.7);
}

.nazo_wrap_1.nazo_wrap_2.nazo_wrap_3 .nazo_gacha {
  transform: scale(1);
  opacity: 1;
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  /* easeOutExpo */
}

.nazo_clicked .nazo_gacha, .nazo_clicked .nazo_gacha_body_sp {
  animation: njump 0.2s ease-out 0s 1 alternate;
}

@keyframes njump {
  0% {
    transform: scale(1);
  }
  1% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.nazo_wrap .c-button {
  display: none;
}

@media screen and (max-width: 767px) {
  .nazo_wrap {
    height: 404px;
  }
  .nazo_gacha {
    width: 200px;
    margin-left: -100px;
    transition: all 400ms cubic-bezier(0.535, -0.145, 0.975, 0.565);
    transform: scale(1);
  }
  .nazo_item {
    width: 220px;
    height: auto;
    display: block;
    position: absolute;
    margin-left:-110px;
    left: 50%;
    bottom: -35px;
    z-index: 10;
    transition: all 40ms cubic-bezier(0.535, -0.145, 0.975, 0.565);
    /* custom */
    opacity: 0;
    pointer-events: none;
  }
  .nazo_item.nazo_item_on {
  }


.nazo_wrap_1.nazo_wrap_2 .nazo_gacha {
right:auto;
    width: 200px;
    margin-left: -100px;
}


  .nazo_wrap_1.nazo_wrap_2.nazo_wrap_3 .nazo_gacha {
    display: none;
  }
  .nazo_wrap .c-button {
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 50;
    top: 50px;
    width: 321px;
    left: 50%;
    transform: translate(-50%, 0) scale(0.5);
    transform-origin: center center !important;
    opacity: 0;
    transition: all 0ms cubic-bezier(0.950, 0.050, 0.795, 0.035) !important;
    animation: none !important;
    pointer-events: none;
  }
  .nazo_wrap .c-button a {
    pointer-events: none;
  }
  .nazo_wrap.nazo_wrap_1.nazo_wrap_2 .c-button {
    display: block;
  }
  .nazo_wrap_1.nazo_wrap_2.nazo_wrap_3 .c-button {
    pointer-events: auto;
    transition: all 700ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    /* easeOutExpo */
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
  .nazo_gacha_body_sp {
    width: 37px !important;
    height: auto;
    display: block;
    position: absolute;
    left: 30px;
    bottom: 0px;
    transform-origin: center bottom;
    z-index: 1;
  }
  @keyframes njump {
    0% {
      transform: scale(1);
    }
    1% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
}


@keyframes bounceInDown2_old {

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0) rotate(15deg);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    transform: translate3d(-15%, 5%, 0) rotate(-35deg);
                animation-timing-function: ease-out;
  }
  65% {
    transform: translate3d(0, -54%, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }
  75% {
    transform: translate3d(7%, 5%, 0) rotate(30deg);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translate3d(0, -18%, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }
  85% {
    transform: translate3d(0, 0, 0) rotate(-15deg);
    animation-timing-function: ease-out;
  }
  88% {
    transform: translate3d(0, -4%, 0) rotate(-0deg);
    animation-timing-function:  cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  91% {
    transform: translate3d(0, 0%, 0) rotate(1deg);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
        animation-timing-function: ease-out;

  }
}


@keyframes bounceInDown2 {

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0) rotate(7.5deg);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
    opacity: 1;
    transform: translate3d(-8%, 5%, 0) rotate(-16deg);
                animation-timing-function: ease-out;
  }
  65% {
    transform: translate3d(0, -44%, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }
  75% {
    transform: translate3d(3.5%, 5%, 0) rotate(13deg);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translate3d(0, -18%, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }
  85% {
    transform: translate3d(0, 0, 0) rotate(-7.5deg);
    animation-timing-function: ease-out;
  }
  88% {
    transform: translate3d(0, -4%, 0) rotate(-0deg);
    animation-timing-function:  cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  92% {
    transform: translate3d(0, 0%, 0) rotate(1deg);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
        animation-timing-function: ease-out;

  }
}