.confetti-wrapper{
    position: absolute;
    top:104px;
    left:160px;
    width: 960px;
    height: 512px;

    border-radius: 12px;
    overflow: hidden;
}
#complete{
  z-index: 1;
  border-radius: 12px;
}
#result{
  z-index: 1;
  border-radius: 12px;
}
.complete-wapper{
  background: #fff3ed;
}
.result-wapper{
  background: #fcfcd7;
}
.confetti-wrapper > canvas{
  position: absolute;
  top:0;
  left:0;
}
.cannon{
  position: absolute;
  z-index: 2;
}
#cannon-left{
  bottom:0;
  left:0;
}
#cannon-right{
  bottom:0;
  right:0;
}
.animaton1{
  width: 254px;
  height: 204px;
  top:5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  opacity: 0;
}
.animaton2{
  top:52%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 440px;

}
.animaton2 > span > img,
.animaton_r_2 > span > img{
  transform: scale(0);
}

.modal_close__btn{
  position: absolute;
  top:16px;
  right: 16px;
  width: 32px;
  height: 32px;
  z-index: 2;
  cursor: pointer;
}
.animaton > span{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.animaton3{
  top:50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 660px;
  height: 124px;
  opacity: 0;
}
.animaton_r_3{
  top:46%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 720px;
  height: 124px;
  opacity: 0;
}
.animaton_r_1{
  top:10%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  opacity: 0;
}
.animaton_r_2{
  top:48%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 458px;
}

.count_txt{
  width: 60px;
  position: absolute;
  font-size: 40px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: right;
}
.max_count{
  color:#333333;
  top:24px;
  left:208px;
}
.correct_count{
  color:#ff3c6e;
  top:82px;
  left:208px;
}
.face-left{
  position: absolute;
  left: 0;
  top:0;
}
.face-right{
  position: absolute;
  right: 0;
  top:0;
}
.face-right2{
  position: absolute;
  right: 0;
  top:0;
  width: 130px;
  transform-origin: center bottom;
}
.face4-wap{
  position: relative;
  right: 0;
  top:0;
  width: 130px;
  height: 102px;
  
}
.face-bonbon{
  position: absolute;
  z-index: 10;
  left:20px;

}
.bonbon1{
  position: absolute;
  z-index: 40;
  left:0px;
  top:60px;
}
.bonbon2{
  position: absolute;
  z-index: 40;
  right:0px;
  top:60px;
}
#text2{
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.cannonAction{
  width: 960px;
  height: 512px;
}
.cannonBom{
  display: block;
  /* background-color: #ff3c6e; */
  width: 80px;
  height: 80px;
  z-index: 400;
}
.cannonBom1{
  position: absolute;
  bottom: 0;
  left: 0;

}
.cannonBom2{
  position: absolute;
  bottom: 0;
  right: 0;

}
.modal-btns{
  position: absolute;
  bottom:10%;
  opacity: 0;
}
.p-histry_clear__btn{
  display: inline-block;
  margin-left:8px;
}
.p-modal_close__btn{
  display: inline-block;
  
}
/*-- 譁�ｭ� --*/
.confetti-text{
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.animaton{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 2;
}
.animaton1.is-animated,
.animaton_r_1.is-animated {
  animation: fadeIn 500ms cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animaton2 > span > img.is-animated,
.animaton_r_2 > span > img.is-animated {
  /* transform: scale(1); */
  animation: zoomIn 300ms cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

.animaton3.is-animated,
.animaton_r_3.is-animated {
  animation: zoomIn2 500ms cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
.modal-btns.is-animated{
  animation: fadeIn 500ms cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes zoomIn {
  0% {  transform: scale(0) rotate(0.001deg);}
  100% {  transform: scale(1) rotate(0.001deg);}
}
@-webkit-keyframes zoomIn {
  0% { transform: scale(0) rotate(0.001deg); }
  100% {  transform: scale(1) rotate(0.001deg);}
}
@keyframes zoomIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.purun {
  animation: purun 0.8s linear 0s 1;
  animation-iteration-count: infinite;
}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.korokoro {
  animation: korokoro 2.5s linear 0s 1;
  animation-iteration-count: infinite;
}

@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}
.purupuru {
  animation: purupuru 0.8s linear 0s 1;
  animation-iteration-count: infinite;
}

@keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.poyooon {
  animation: poyooon 0.9s linear 0s 1;
  animation-iteration-count: infinite;
}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.puyon {
  animation: puyon 1.0s linear 0s 1;
  animation-iteration-count: infinite;
}
@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
.pururun {
  animation: pururun 1.2s linear 0.2s 1;
  animation-iteration-count: infinite;
}

@keyframes pururun {
0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
10%  { transform: scale(1.0, 1.0) translate(10%, 0%) skew(-10deg, 0deg); }
60%  { transform: scale(1.0, 1.0) translate(20%, 0%) skew(-20deg, 0deg); }
70%  { transform: scale(1.0, 1.0) translate(-15%, 0%) skew(15deg, 0deg); }
80%  { transform: scale(1.0, 1.0) translate(15%, 0%) skew(-15deg, 0deg); }
80%  { transform: scale(1.0, 1.0) translate(5%, 0%) skew(-5deg, 0deg); }
90%  { transform: scale(1.0, 1.0) translate(-5%, 0%) skew(5deg, 0deg); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}