.modal-tip {
  background-color: rgba(0, 0, 0, 0.75); }
  .modal-tip .modal-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .modal-tip .modal-body .tip img {
      width: 50%;
      margin-bottom: 10px;
      -webkit-animation: tip 0.4s infinite;
      animation: tip 0.4s infinite; }

@-webkit-keyframes tip {
  0% {
    -webkit-transform: translateX(-15px) rotate(0deg);
    transform: translateX(-15px) rotate(0deg); }
  50% {
    -webkit-transform: translateX(15px) rotate(15deg);
    transform: translateX(15px) rotate(15deg); }
  100% {
    -webkit-transform: translateX(-15px) rotate(0deg);
    transform: translateX(-15px) rotate(0deg); } }

@keyframes tip {
  0% {
    -webkit-transform: translateX(-15px) rotate(0deg);
    transform: translateX(-15px) rotate(0deg); }
  50% {
    -webkit-transform: translateX(15px) rotate(15deg);
    transform: translateX(15px) rotate(15deg); }
  100% {
    -webkit-transform: translateX(-15px) rotate(0deg);
    transform: translateX(-15px) rotate(0deg); } }
    .modal-tip .modal-body .tip p {
      color: #fff;
      font-size: 22px;
      font-weight: 500; }

.modal-result {
  background-color: rgba(0, 0, 0, 0);
  -webkit-animation: shadow 1.5s 1;
  animation: shadow 1.5s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

@-webkit-keyframes shadow {
  0% {
    background-color: rgba(0, 0, 0, 0); }
  25% {
    background-color: rgba(0, 0, 0, 0); }
  45% {
    background-color: rgba(0, 0, 0, 0.6); }
  100% {
    background-color: rgba(0, 0, 0, 0.6); } }

@keyframes shadow {
  0% {
    background-color: rgba(0, 0, 0, 0); }
  25% {
    background-color: rgba(0, 0, 0, 0); }
  45% {
    background-color: rgba(0, 0, 0, 0.6); }
  100% {
    background-color: rgba(0, 0, 0, 0.6); } }
  .modal-result .modal-wrapper .jump-area {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%; }
    .modal-result .modal-wrapper .jump-area img {
      width: 80%;
      -webkit-transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg);
      -ms-transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg);
      transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg);
      -webkit-animation: jump 1.8s 1;
      animation: jump 1.8s 1; }

@-webkit-keyframes jump {
  0% {
    -webkit-transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg);
    transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg); }
  40% {
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-15deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-15deg); }
  49% {
    opacity: 1;
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg); } }

@keyframes jump {
  0% {
    -webkit-transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg);
    transform: translate(0%, 120vh) scaleX(-1) rotate(-15deg); }
  40% {
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-15deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-15deg); }
  49% {
    opacity: 1;
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg); }
  50% {
    opacity: 1;
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg);
    transform: translate(0%, 32vh) scaleX(-1) rotate(-25deg); } }
  .modal-result .modal-wrapper .prize-area {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 94%;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0; }
    .modal-result .modal-wrapper .prize-area.show-prize {
      -webkit-animation: modal .5s 1;
      animation: modal .5s 1;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards; }

@-webkit-keyframes modal {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2); }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; } }

@keyframes modal {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2); }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; } }
    .modal-result .modal-wrapper .prize-area .prize-image {
      position: absolute;
      left: 50%;
      top: 23.5%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%);
      width: 53%;
      opacity: 1; }
    .modal-result .modal-wrapper .prize-area .prize-button {
      position: absolute;
      left: 50%;
      top: 62.6%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%);
      opacity: 1; }
      .modal-result .modal-wrapper .prize-area .prize-button img {
        width: 70%;
        margin-bottom: 5px;
        cursor: pointer; }

.op-area {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10; }

.machine-area {
  position: relative; }
  .machine-area .machine-wrapper {
    position: absolute;
    width: 82%;
    padding-top: 72%;
    left: 50%;
    top: 56.8%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden; }
    .machine-area .machine-wrapper .gacha {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 11;
      width: 100%; }
      .machine-area .machine-wrapper .gacha img {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .machine-area .machine-wrapper .clip {
      position: absolute;
      left: 50%;
      top: -59%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%);
      z-index: 10;
      width: 26%; }
      .machine-area .machine-wrapper .clip .part {
        position: absolute;
        width: 18%;
        -webkit-transform-origin: center 20%;
        -ms-transform-origin: center 20%;
        transform-origin: center 20%; }
        .machine-area .machine-wrapper .clip .part:nth-of-type(1) {
          left: 1%;
          bottom: 0%;
          -webkit-transform: rotate(-30deg);
          -ms-transform: rotate(-30deg);
          transform: rotate(-30deg); }
        .machine-area .machine-wrapper .clip .part:nth-of-type(2) {
          right: 1%;
          bottom: 0%;
          -webkit-transform: rotate(30deg);
          -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
    .machine-area .machine-wrapper .prize {
      position: absolute;
      z-index: 2;
      left: 46%;
      bottom: 10%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%);
      width: 45%;
      opacity: 0; }
    .machine-area .machine-wrapper.start .clip {
      -webkit-animation: clip-anime 4s 1 linear;
      animation: clip-anime 4s 1 linear;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-delay: 3s;
      animation-delay: 3s; }

@-webkit-keyframes clip-anime {
  0% {
    top: -59%; }
  25% {
    top: -59%; }
  50% {
    top: -25%; }
  100% {
    top: -59%; } }

@keyframes clip-anime {
  0% {
    top: -59%; }
  25% {
    top: -59%; }
  50% {
    top: -25%; }
  100% {
    top: -59%; } }
      .machine-area .machine-wrapper.start .clip .part:nth-of-type(1) {
        -webkit-animation: clip1 4s 1 linear;
        animation: clip1 4s 1 linear;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 3s;
        animation-delay: 3s; }

@-webkit-keyframes clip1 {
  0% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg); }
  20% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); } }

@keyframes clip1 {
  0% {
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg); }
  20% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); } }
      .machine-area .machine-wrapper.start .clip .part:nth-of-type(2) {
        -webkit-animation: clip2 4s 1 linear;
        animation: clip2 4s 1 linear;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 3s;
        animation-delay: 3s; }

@-webkit-keyframes clip2 {
  0% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  20% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); } }

@keyframes clip2 {
  0% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg); }
  20% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }
  100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); } }
    .machine-area .machine-wrapper.start .prize {
      -webkit-animation: prize 4s 1 linear;
      animation: prize 4s 1 linear;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-delay: 3s;
      animation-delay: 3s; }

@-webkit-keyframes prize {
  0% {
    bottom: 10%;
    opacity: 0; }
  50% {
    bottom: 10%;
    opacity: 1; }
  100% {
    bottom: 45%;
    opacity: 1; } }

@keyframes prize {
  0% {
    bottom: 10%;
    opacity: 0; }
  50% {
    bottom: 10%;
    opacity: 1; }
  100% {
    bottom: 45%;
    opacity: 1; } }
  .machine-area .machine-text {
    position: absolute;
    right: 8%;
    bottom: 11.8%;
    width: 47%;
    overflow: hidden; }
    .machine-area .machine-text img:nth-of-type(1) {
      opacity: .6;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .machine-area .machine-text img.anime:nth-of-type(1) {
      -webkit-animation: light 1.8s infinite linear;
      animation: light 1.8s infinite linear; }

@-webkit-keyframes light {
  0% {
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%); }
  100% {
    -webkit-transform: translate(200%, -50%);
    transform: translate(200%, -50%); } }

@keyframes light {
  0% {
    -webkit-transform: translate(-200%, -50%);
    transform: translate(-200%, -50%); }
  100% {
    -webkit-transform: translate(200%, -50%);
    transform: translate(200%, -50%); } }
  .machine-area .button-start {
    position: absolute;
    left: 44.5%;
    bottom: .5%;
    width: 20%;
    cursor: pointer; }
    .machine-area .button-start.pressed {
      -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation: pressed .4s 1;
      animation: pressed .4s 1; }

@-webkit-keyframes pressed {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1); }
  50% {
    -webkit-transform: scaleY(0.9);
    transform: scaleY(0.9); }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1); } }

@keyframes pressed {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1); }
  50% {
    -webkit-transform: scaleY(0.9);
    transform: scaleY(0.9); }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1); } }
    .machine-area .button-start img.push {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      opacity: 1; }
      .machine-area .button-start img.push.anime {
        -webkit-animation: push 1s infinite;
        animation: push 1s infinite; }

@-webkit-keyframes push {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes push {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.info-area {
  position: relative; }
  .info-area h6 {
    position: absolute;
    left: 47.3%;
    top: 0.1%;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    color: #d8b58b;
    font-size: 34px;
    font-weight: 500;
    z-index: 1; }
  .info-area .share {
    position: absolute;
    right: 6.8%;
    top: 2%;
    z-index: 10;
    width: 37%;
    cursor: pointer; }
  .info-area .info-prize {
    position: relative; }
    .info-area .info-prize img.chara {
      position: absolute;
      width: 26%;
      -webkit-animation: chara 3s infinite;
      animation: chara 3s infinite; }

@-webkit-keyframes chara {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  10% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  20% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  30% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  40% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  60% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes chara {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  10% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  20% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  30% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  40% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  60% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }
      .info-area .info-prize img.chara:nth-of-type(1) {
        left: 4%;
        top: 29.4%; }
      .info-area .info-prize img.chara:nth-of-type(2) {
        left: 46.6%;
        top: 29.4%; }
      .info-area .info-prize img.chara:nth-of-type(3) {
        left: 4%;
        top: 44.2%; }
      .info-area .info-prize img.chara:nth-of-type(4) {
        left: 46.6%;
        top: 44%; }
      .info-area .info-prize img.chara:nth-of-type(5) {
        left: 4%;
        top: 59%; }
      .info-area .info-prize img.chara:nth-of-type(6) {
        left: 46.6%;
        top: 60.2%; }
      .info-area .info-prize img.chara:nth-of-type(7) {
        left: 4%;
        top: 75.4%; }
      .info-area .info-prize img.chara:nth-of-type(8) {
        left: 46.6%;
        top: 75.4%; }