@charset "UTF-8";
#omikuji {
  position: relative;
  max-width: 1920px;
  height: 849px;
  background: url(https://d23h2dywmtq7mr.cloudfront.net/omikuji/bg.jpg);
  background-position: center;
}
.omikuji_box {
  position: absolute;
  left: 50%;
  top: 31%;
  transform: translate(-50%,0);
  z-index: 9;
}
.omikuji_box-rod {
  position: absolute;
  bottom: 93%;
  left: 50%;
  width: 11.3%;
  background-image: url(https://d23h2dywmtq7mr.cloudfront.net/omikuji/omikuji_b.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  transform: translate(-50%,0);
  transition: height 0.7s ease 1.8s;
  height: 0;
}
.omikuji_bg-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.omikuji_title {
  position: absolute;
  left: 50%;
  top: 3%;
  transform: translate(-50%,0);
  width: 742px;
  z-index: 10;
}
.omikuji_title img {
  margin: 0 auto;
  display: block;
}
.bears > img {
  position: absolute;
  top: 41%;
  z-index: 5;
}
.bear1{
  right:50%;
  transform: translate(-28%,0);
}
.bear2{
  left:50%;
  transform: translate(32%,0);
}
#omikuji_button {
  position: absolute;
  bottom: 6%;
  z-index: 20;
  left: 50%;
  transform: translate(-50%,0);
  width: 470px;
  margin: 0 auto;
  text-align: center;
}
.fukidashi {
  position: absolute;
  left: 50%;
  z-index: 30;
  top: 30%;
  transform: translate(115%,0);
  z-index: 10;
}
.omikuji_box-img {
  position: relative;
  z-index: 20;
}
.omikuji_box:after {
  content:"";
  display: block;
  position: absolute;
  z-index: 10;
  background-image: url(https://d23h2dywmtq7mr.cloudfront.net/omikuji/shadow.png);
  width: 100%;
  height: 27.6%;
  background-size: 100% 100%;
  bottom: -3%;
}

#omikuji_action.action {
  animation:normal 1 omikuji1 1s ease;
  transform:translate3d(0,-5%,0) rotate(0deg);
}
#omikuji_action.action2 {
  animation:normal 1 omikuji2 2s ease;
  transform: translate3d(0,-15%,0) rotate(-125deg);
}
.action2 .omikuji_box-rod {
  height: 41.7%;
}
@keyframes omikuji1{
  0%{ transform:translate3d(0,-0%,0) rotate(0deg); }
  20%{ transform:translate3d(0,-5%,0) rotate(-10deg); }
  40%{ transform:translate3d(0,-5%,0) rotate(10deg); }
  60%{ transform:translate3d(0,-5%,0) rotate(-10deg); }
  80%{ transform:translate3d(0,-5%,0) rotate(10deg); }
  100%{ transform:translate3d(0,-5%,0) rotate(0deg); }
}
@keyframes omikuji2{
  0%{ transform:translate3d(0,-5%,0) rotate(0deg); }
  50%{ transform: translate3d(0,-15%,0) rotate(-125deg);}
  60%{ transform: translate3d(0,-18%,0) rotate(-125deg);}
  70%{ transform: translate3d(0,-13%,0) rotate(-125deg);}
  80%{ transform: translate3d(0,-18%,0) rotate(-125deg);}
  90%{ transform: translate3d(0,-13%,0) rotate(-125deg);}
  100%{ transform: translate3d(0,-15%,0) rotate(-125deg);}

}

#omikuji_wrap::before {
  content: "";
  background-image: url(https://d23h2dywmtq7mr.cloudfront.net/omikuji/kirakira.png);
  width: 517px;
  display: block;
  height: 159px;
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%,-50%);
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
@media screen and (min-width:768px){
  .sp_bg {
    display: none;
  }
  .sp{
    display: none;
  }
}
@media screen and (max-width:1130px){
  .fukidashi {
    transform: none;
    left: inherit;
    right: 1%;
    max-width: 26%;
  }
}
@media screen and (max-width:767px){
  #omikuji {
    height: auto;
    width: 100%;
    background: none;
  }
  #omikuji img{
    width:100%;
    height:auto;
  }
  .pc {
    display: none;
  }
  #omikuji .omikuji_title.fade {
    width: 100%;
    top: -1.5%;
  }
  #omikuji .omikuji_box {
    width: 40%;
    top: 36%;
  }
  #omikuji .bear1 {
    width: 45.7%;
  }
  #omikuji .bear2 {
    width: 38.4%;
  }
  #omikuji .bears > img {
    top: 46%;
  }
  #omikuji_button {
    width: 80%;
    bottom: 8%;
  }
  #omikuji #omikuji_button img {
    margin: 0 auto;
    width: 100%;
  }
  .fukidashi {
    top: 22%;
    width: 41%;
    max-width: 41%;
  }
  #omikuji_wrap:before {
    background-image: url(https://d23h2dywmtq7mr.cloudfront.net/omikuji/kirakira_sp.png);
    width: 75%;
    height: 21%;
    top: 37%;
  }
}