@charset "UTF-8";
/*=============================================================

*メリポクイズ アニメーション

	Date: 2020-03-05
	
=============================================================*/

/* 雲 */
@keyframes cloud_anime {
    0% {
        transform: translate(0px, 0);
    }
    50% {
        transform: translate(0, 13px);
    }
    100% {
        transform: translate(0px, 0);
    }
}

/* 地球 */
@keyframes base_anime {
    0% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-3deg);
    }
}

/* メリポ */
@keyframes meripo_anime {
    0% {
				opacity: 0;
    transform: translate(-400px, 150px) scale(0.7);
    }
				70% {
        opacity: 1;
    }
    100% {
        transform: translate(0px, 0) scale(1.0);
    }
}

/** フェードアニメーション **/
.fade_mr {
 animation: fade 1.0s forwards;
 visibility: visible !important;
 opacity: 0;
}
@keyframes fade {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

.fadeIn_mr {
    opacity: 0;
}
.fadeIn_mr.on {
    animation: fadeIn 0.5s forwards 0s;
}
@keyframes fadeIn {
    0% {
            transform: translateY(0.8em);
            opacity: 0;
    }
    100% {
            transform: translateY(0);
            opacity: 1;
    }
}

@keyframes fall {
 0% {
  transform: translateY(-100px);
  animation-timing-function: ease-in;
  opacity: 0;
 }
 24% {
  opacity: 1;
 }
 40% {
  transform: translateY(-17px);
  animation-timing-function: ease-in;
 }
 65% {
  transform: translateY(-8px);
  animation-timing-function: ease-in;
 }
 25%, 55%, 75% {
  transform: translateY(0px);
  animation-timing-function: ease-out;
 }
 100% {
  transform: translateY(0px);
  animation-timing-function: ease-out;
  opacity: 1;
 }
}
/*タイトル*/
@keyframes swing-in-bottom-fwd {
 0% {
  transform: rotateX(100deg);
  transform-origin: bottom;
  opacity: 0;
 }
 100% {
  transform: rotateX(0);
  transform-origin: bottom;
  opacity: 1;
 }
}

/* タイトル　メリカちゃん */
@keyframes fade_marika {
 0% {
  opacity: 0;
  transform: translateY(25px) translateX(25px);
 }
 70% {
  opacity: 1;
  transform: translateY(-3px) translateX(-3px);
 }
 100% {
  opacity: 1;
  transform: translateY(0) translateX(0);
 } 
}
/* タイトル　メリカちゃんの手 */
@keyframes fade_marika_hand {
 0% {
  opacity: 0;
 }
 70% {
  opacity: 0;
  transform: translateY(-3px) translateX(-3px);
 }
 100% {
  opacity: 1;
  transform: translateY(0) translateX(0);
 } 
}


/*点滅*/
@keyframes blink {
 0%, 49% {
  opacity: 1;
 }
 50%, 100% {
  opacity: 0;
 }
}
/* コマ バン！ */
@keyframes zoom_ttl {
 0% {
  transform: scale(1.2) translateX(00px);
  opacity: 0;
 }
 85% {
  transform: scale(0.97);
 }
 100% {
  transform: scale(1.0);
  opacity: 1;
 }
}

@keyframes zoom_koma {
 0% {
  transform: scale(1.4) translateX(00px);
  opacity: 0;
 }
 70% {
  transform: scale(0.98);
 }
 85% {
  transform: scale(1.03);
 }
 100% {
  transform: scale(1.0);
  opacity: 1;
 }
}

/* プレゼントどうぞ */
@keyframes present_left {
 0% {
  transform: translateX(-50px) translateY(-0px);
 }
 70% {
  transform: translateX(-10px) translateY(-5px);
 }
 100% {
  transform: translateX(0px) translateY(0px);
 }
}
@keyframes bound {
 0% {
  transform: translateY(-0px);
 }
 50% {
  transform: translateY(-5px);
 }
 100% {
  transform: translateY(0px);
 }
}
@keyframes bound_start {
 0% {
  transform: translateY(-0px);
 }
 10% {
  transform: translateY(-0px);
 }
 50% {
  transform: translateY(3px);
 }
 90% {
  transform: translateY(0px);
 }
 100% {
  transform: translateY(0px);
 }
}

@keyframes bound_zoom {
 0% {
  transform: scale(1.0) translateY(-0px);
 }
 50% {
  transform: scale(1.08) translateY(-10px);
 }
 100% {
  transform: scale(1.0) translateY(0px);
 }
}


@keyframes fade_bound {
 0% {
  opacity: 0;
  transform: translateY(-0px);
 }
 50% {
  transform: translateY(-5px);
 }
 100% {
  transform: translateY(0px);
  opacity: 1;
 }
}





/* 斜め右から */
@keyframes rotate-in-2-br-ccw {
 0% {
  transform: rotate(45deg);
  transform-origin: 100% 100%;
  opacity: 0;
 }
 100% {
  transform: rotate(0);
  transform-origin: 100% 100%;
  opacity: 1;
 }
}
/* 下からフェード */
@keyframes fade_btm {
 0% {
  opacity: 0;
  transform: translateY(25px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes fade_btm02 {
0% {
    opacity: 0;
    transform: translateY(0px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes fade_btm03 {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
    }
    


/* 左からフェード */
@keyframes fade_left {
 0% {
  opacity: 0;
  transform: translateX(-500px);
 }
 100% {
  opacity: 1;
  transform: translateX(0);
 }
}
/* 下からバウンド */
@keyframes fall_btm {
0% { transform: translateY(20px); opacity: 0;}
50% {transform: translateY(-14px);opacity: 1;}
85% {transform: translateY(1px);}
100% {transform: translateY(0); opacity: 1;}
}


/* 吹き出し */
@keyframes fukidashi {
 0% {
  transform: scale(3.5) translateX(-500px);
  opacity: 0;
 }
 30% {
  opacity: 1;
 }
 70% {
  transform: scale(0.95)translateX(0px);
  opacity: 1;
 }
 85% {
  transform: scale(1.05) translateX(0px);
  opacity: 1;
 }
 100% {
  transform: scale(1.0) translateX(0px);
  opacity: 1;
 }
}