@charset "utf-8";
/*////////////////////////////////////////////////////////

animation

////////////////////////////////////////////////////////*/
/* common
------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUp2 {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeStamp {
  0% {
    opacity: 0;
    transform: scale(2.3, 2.3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeStamp2 {
  0% {
    opacity: 0;
    transform: scale(.5, .5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeDecrease {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(20px);
  }
  40% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  52% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(0.5, 0.5) translateY(0);
  }
}
@keyframes fadeFuki {
  0% {
    opacity: 0;
    transform: scale(.3, .3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeFit {
  0% {
    max-height: 300px;
  }
  100% {
    max-height: 140px;
  }
}
@keyframes balloon {
  0% {
    opacity: 0;
    transform: scale(2.3, 2.3);
  }
  50% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1.08, 1.08);
  }
  70% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1.03, 1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes leftLight {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes slideLeftRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideRightLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(30px);
  }
}
@keyframes moveRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-30px);
  }
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(.3, .3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes zoom2 {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  17% {
    opacity: 1;
    transform: scale(4, 4.3);
  }
  70% {
    opacity: 1;
    transform: scale(4, 4.3);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes flash {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(11);
  }
  60% {
    opacity: 1;
    transform: scale(11);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
@keyframes buruburu {
  0% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(12deg);
  }
  60% {
    transform: rotateZ(-12deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes buruburu2 {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg)
  }
  25% {
    transform: translate(2px, 1px) rotateZ(1deg)
  }
  50% {
    transform: translate(0px, 1px) rotateZ(0deg)
  }
  75% {
    transform: translate(1px, 0px) rotateZ(-1deg)
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg)
  }
}
@keyframes uneune {
  0% {
    opacity: 0;
    transform: scale(.2, .2);
  }
  10% {
    opacity: .3;
    transform: scale(.7, .3);
  }
  20% {
    opacity: .5;
    transform: scale(1, 1);
  }
  30% {
    opacity: .7;
    transform: scale(.85, .85);
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(.9, .9);
  }
  60% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes glitch_effect {
  0% {
    opacity: 0;
    transform: scale(.2, .2);
  }
  33% {
    transform: scale(1, 1);
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    transform: skewY(20deg) translate(8px, 6px);
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
    transform: skewY(-10deg) translate(-10px, -10px);
  }
  33.9% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    transform: none;
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    transform: skewX(5deg) translate(-4px, 10px);
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
    transform: skewX(-7deg) translate(4px, -6px);
  }
  66.9% {
    opacity: 1;
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewY(10deg) translate(10px, -6px);
  }
  77.6% {
    transform: skewY(-22deg) translate(-5px, 8px);
    filter: invert(100%);
  }
  77.9% {
    transform: none;
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
}
@keyframes glitch1 {
  0% {
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
  }
  33.9% {
    opacity: 1;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
  }
  66.9% {
    opacity: 1;
  }
  77.3% {}
  77.6% {
    filter: invert(100%);
  }
  77.9% {
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    filter: invert(0%);
  }
}
@keyframes bom {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  15% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05, 1.05);
  }
}
[class*='fade_'] {
  opacity: 0;
}
[class*='fade_in'].active {
  animation: fadeIn 1.7s forwards;
}
[class*='fade_out'] {
  opacity: 1;
}
[class*='fade_out'].active {
  animation: fadeOut 1.7s forwards;
}
[class*='fade_up'] {
  transform: translateY(30px);
}
[class*='fade_up'].active {
  animation: fadeUp .8s forwards;
}
[class*='fade_up2'].active {
  animation: fadeUp2 2s forwards;
}
[class*='fade_down'] {
  transform: translateY(-70px);
}
[class*='fade_down'].active {
  animation: fadeDown 1.5s ease forwards;
}
[class*='fade_left'] {
  transform: translateX(30px);
}
[class*='fade_left'].active {
  animation: fadeLeft 1s forwards;
}
[class*='fade_right'] {
  transform: translateX(-30px);
}
[class*='fade_right'].active {
  animation: fadeRight 1s forwards;
}
[class*='fade_stamp'] {
  transform: scale(2.3, 2.3);
}
[class*='fade_stamp'].active {
  animation: fadeStamp .5s forwards;
}
[class*='fade_stamp2'].active {
  animation: fadeStamp2 .3s forwards;
}
[class*='fade_decrease'].active {
  animation: fadeDecrease 1.75s forwards;
}
[class*='fade_fuki'].active {
  animation: fadeFuki .7s forwards;
}
[class*='fade_fit'].active {
  animation: fadeFit .9s forwards;
}
[class*='fade_balloon'] {
  transform: scale(2.3, 2.3);
}
[class*='fade_balloon'].active {
  animation: balloon .7s forwards;
}
[class*='slide_RightLeft'] {
  opacity: 0;
  animation: slideRightLeft 1.5s forwards;
}
[class*='slide_LeftRight'] {
  opacity: 0;
  animation: slideLeftRight 1.5s forwards;
}
[class*="shiny"] {
  position: relative;
}
[class*="shiny"]:after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 60px;
  height: 90%;
  transform: rotate(-10deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .4) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
[class*='flash'].active {
  animation: flash 1s ease-out forwards;
}
.moveLeftRight {
  animation: moveLeftRight 1s linear forwards;
}
.moveRightLeft {
  animation: moveRightLeft 1s linear forwards;
}
.zoom {
  animation: zoom .7s ease-out forwards;
}
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
.poyopoyo:nth-of-type(2) {
  animation-delay: .1s;
}
.glitch {
  animation: glitch_effect 1s ease-out infinite;
}


/* free
------------------------------------------------------- */
/*--- ユーザーのコメント ---*/
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slide {
  animation: loop-slide 100s infinite linear 1s both;
}

/*--- ハート・スマイルの浮遊 ---*/
@keyframes float_good {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-40px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translateY(-72px) scale(0);
    opacity: 0;
  }
}
[class*="box_float_good"] span:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 2s;
}
[class*="box_float_good"] span:nth-child(2) {
  left: 20%;
  animation-delay: 1s;
  animation-duration: 1.6s;
}
[class*="box_float_good"] span:nth-child(3) {
  left: 35%;
  animation-delay: 0.6s;
  animation-duration: 2.7s;
}
[class*="box_float_good"] span:nth-child(4) {
  left: 50%;
  animation-delay: 1.6s;
  animation-duration: 1s;
}
[class*="box_float_good"] span:nth-child(5) {
  left: 65%;
  animation-delay: 0.2s;
  animation-duration: 3s;
}
[class*="box_float_good"] span:nth-child(6) {
  left: 75%;
  animation-delay: 0.9s;
  animation-duration: 2s;
}
[class*="box_float_good"] span:nth-child(7) {
  left: 30%;
  animation-delay: 1.2s;
  animation-duration: 1.7s;
}
[class*="box_float_good"] span:nth-child(8) {
  left: 40%;
  animation-delay: 0.7s;
  animation-duration: 2.8s;
}
[class*="box_float_good"] span:nth-child(9) {
  left: 55%;
  animation-delay: 1.8s;
  animation-duration: 1.4s;
}
[class*="box_float_good"] span:nth-child(10) {
  left: 75%;
  animation-delay: 1s;
  animation-duration: 2.5s;
}


/* result
------------------------------------------------------- */
/*--- 共通結果前のセリフ ---*/
@keyframes icon_move {
  0% {
    top: 32px;
  }
  25% {
    top: 67px;
  }
  50% {
    top: 102px;
  }
  75% {
    top: 138px;
  }
  100% {
    top: 172px;
  }
}
.active .icon_move {
  animation: icon_move 3.4s steps(1) forwards;
  animation-delay: .22s;
}
@keyframes serif_move {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.active .serif_move {
  animation: serif_move .4s linear forwards;
}

/*--- カードシャッフル ---*/
/* 手の動き */
@keyframes shuffle_left {
  0% {
    transform: translate(10px, -20px);
  }
  25% {
    transform: translate(80px, 10px);
  }
  50% {
    transform: translate(10px, 40px);
  }
  75% {
    transform: translate(-20px, 10px);
  }
  100% {
    transform: translate(10px, -20px);
  }
}
@keyframes shuffle_right {
  0% {
    transform: translate(-10px, -20px);
  }
  25% {
    transform: translate(20px, 10px);
  }
  50% {
    transform: translate(-10px, 40px);
  }
  75% {
    transform: translate(-70px, 0);
  }
  100% {
    transform: translate(-10px, -20px);
  }
}
/* カードの動き */
@keyframes orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes self-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.box_shuffle.active:not(.end) .inner {
  animation: orbit 4s linear 20;
}
.box_shuffle.active:not(.end) img {
  animation: self-rotate 4s linear 20;
}
.box_shuffle.active:not(.end):before {
  animation: shuffle_left 4s linear 20; 
}
.box_shuffle.active:not(.end):after {
  animation: shuffle_right 4s linear 20;
  animation-delay: .5s;
}

/*--- spブルブル ---*/
.buruburu_mes.active {
  animation: buruburu2 .1s 50;
}