@charset "utf-8";



.eena.active{ 

/*	color: #e9618d;*/

	transition: 0.2s ease;

	animation: eena_active .3s;

}

@keyframes eena_active{

0%{ transform: scale(1);}

25%{ transform: scale(1.2);}

50%{ transform: scale(0.95);}

}





.anim_wrap{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.anim_wrap .heart{

  color: #eb0808;

  margin: 0;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  opacity:0;

  text-align: center;

  position: absolute;

  width: 100%;

  height: 100%;

}

.anim_wrap .heart img{

	width: 50%;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%,-50%);

}



.anim_wrap.is-show .heart{

  animation: bobble 1.2s;

  animation-delay: .2s;

  animation-fill-mode: both;

  opacity: 1;

  z-index: 2;

}

@keyframes bobble {

  0%   { transform: translate(-50%,-50%) scale(0, 0); color: #ff6464; opacity: 1;}

  10%  { transform: translate(-50%,-50%) scale(1.3, 1.3); opacity: 1;}

  15% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 1;}

  50% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 1;}

  100% { transform: translate(-50%,-50%) scale(1.0, 1.0); opacity: 0;}

}

.anim_wrap.is-show .heart span{

	position: absolute;

	font-size: 10px;

	font-weight: bold;

	white-space: nowrap;

	color: #fff;

	top: 44%;

	left: 50%;

	transform: translate(-50%,-50%) rotate(-9deg);

}





.anim_wrap:after,

.anim_wrap:before{

  border-radius: 50%;

  content:"";

  display: block;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  position: absolute;

  z-index: 1;

  width: 100px;

  height: 100px;

}

.anim_wrap.is-show:before{

  animation: character-defaultAnim-before .3s !important;

}

.anim_wrap.is-show:after{

  animation: character-defaultAnim-after .3s !important;

}

#contTopics .anim_wrap.is-show:before,

#contRanking .anim_wrap.is-show:before,

#contCharacter .anim_wrap.is-show:before{

  animation: character-defaultAnim-before2 .3s !important;

}

#contTopics .anim_wrap.is-show:after,

#contRanking .anim_wrap.is-show:after,

#contCharacter .anim_wrap.is-show:after{

  animation: character-defaultAnim-after2 .3s !important;

}

@keyframes character-defaultAnim-before {

  0%   { transform: translate(-50%,-50%) scale(0, 0); background-color: #7de8dc; opacity: 1;}

  50%  {background-color: #7de8dc;}

  99%  { opacity: 1;}

  100%  { transform: translate(-50%,-50%) scale(1, 1); background-color: #4dcdd4;  opacity: 0;}

}

@keyframes character-defaultAnim-after {

  0%    { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff; opacity: 1;}

  50%   { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff;}

  99%  { opacity: 1;}

  100%  { transform: translate(-50%,-50%) scale(1, 1); background-color: #fff;  opacity: 0;}

}

@keyframes character-defaultAnim-before2 {

  0%   { transform: translate(-50%,-50%) scale(0, 0); background-color: #fff; opacity: 1;}

  50%  {background-color: #fff;}

  99%  { opacity: 1;}

  100%  { transform: translate(-50%,-50%) scale(1, 1); background-color: #fff;  opacity: 0;}

}

@keyframes character-defaultAnim-after2 {

  0%    { transform: translate(-50%,-50%) scale(0, 0); background-color: #c2eef0; opacity: 1;}

  50%   { transform: translate(-50%,-50%) scale(0, 0); background-color: #c2eef0;}

  99%  { opacity: 1;}

  100%  { transform: translate(-50%,-50%) scale(1, 1); background-color: #c2eef0;  opacity: 0;}

}

.anim_wrap .bobble_particle{

    width: 100%;

    height: 100%;

	position: absolute;

    top: 0;

    left: 0;

}

.anim_wrap .bobble_particle i{

  border-radius: 50%;

  display: block;

  width: 30px;

  height: 30px;

  position: absolute;

  top: 48%;

  left: 50%;

  transform: translate(-50%,-50%);

  opacity: 0;

}

@media only screen and (max-width: 768px){

.anim_wrap .bobble_particle i{

  width: 5vw;

  height: 5vw;

}

}

.anim_wrap.is-show .bobble_particle i{

  transition: .2s;

  opacity: 1;

}

.anim_wrap.is-show .bobble_particle i:nth-child(1){

  animation: bobble_particle_01 1s ease-out .3s;

}

@keyframes bobble_particle_01 {

  0%    { transform: rotate(10deg) translate(200px, 0); background-color: #f7cbb2;}

  80%   { transform: rotate(10deg) translate(20px, 0); }

  100%  { width: 0; height: 0; background-color: #f7cbb2;}

}

.anim_wrap.is-show .bobble_particle i:nth-child(2){

  animation: bobble_particle_02 1s ease-out .3s;

}

@keyframes bobble_particle_02 {

  0%    { transform: rotate(70deg) translate(200px, 0); background-color: #b7daf2;}

  80%   { transform: rotate(70deg) translate(20px, 0); }

  100%  { width: 0; height: 0; background-color: #6eb4e6;}

}

.anim_wrap.is-show .bobble_particle i:nth-child(3){

  animation: bobble_particle_03 1s ease-out .3s;

}

@keyframes bobble_particle_03 {

  0%    { transform: rotate(130deg) translate(200px, 0); background-color: #fbdf84;}

  80%   { transform: rotate(130deg) translate(20px, 0); }

  100%  { width: 0; height: 0; background-color: #fac80f;}

}

.anim_wrap.is-show .bobble_particle i:nth-child(4){

  animation: bobble_particle_04 1s ease-out .3s;

}

@keyframes bobble_particle_04 {

  0%    { transform: rotate(190deg) translate(200px, 0); background-color: #f7cbb2;}

  80%   { transform: rotate(190deg) translate(20px, 0); }

  100%  { width: 0; height: 0; background-color: #f09664;}

}

.anim_wrap.is-show .bobble_particle i:nth-child(5){

  animation: bobble_particle_05 1s ease-out .3s;

}

@keyframes bobble_particle_05 {

  0%    { transform: rotate(250deg) translate(200px, 0); background-color: #b7daf2;}

  80%   { transform: rotate(250deg) translate(20px, 0); }

  100%  { width: 0; height: 0; background-color: #6eb4e6;}

}

.anim_wrap.is-show .bobble_particle i:nth-child(6){

  animation: bobble_particle_06 1s ease-out .3s;

}

@keyframes bobble_particle_06 {

  0%    { transform: rotate(310deg) translate(200px, 0); background-color: #fbdf84;}

  80%   { transform: rotate(310deg) translate(20px, 0); }

  100%  { width: 0; height: 0; background-color: #fac80f;}

}



.anim_wrap.is-show .bobble_particle2 i:nth-child(1){

  animation: bobble_particle2_02 1s ease-out .3s forwards;

}

@keyframes bobble_particle2_01 {

  0%    { transform: rotate(20deg) translate(200px, 0); background-color: #f7cbb2;}

  40%   { transform: rotate(20deg) translate(205px, 0); }

  60%,100%  { transform: rotate(20deg) translate(205px, 0); width: 0; height: 0; background-color: #f7cbb2;}

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(2){

  animation: bobble_particle2_03 1s ease-out .3s forwards;

}

@keyframes bobble_particle2_02 {

  0%    { transform: rotate(80deg) translate(200px, 0); background-color: #b7daf2;}

  40%   { transform: rotate(80deg) translate(205px, 0); }

  60%,100%  { transform: rotate(80deg) translate(205px, 0); width: 0; height: 0; background-color: #6eb4e6;}

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(3){

  animation: bobble_particle2_04 1s ease-out .3s forwards;

}

@keyframes bobble_particle2_03 {

  0%    { transform: rotate(140deg) translate(200px, 0); background-color: #fbdf84;}

  40%   { transform: rotate(140deg) translate(205px, 0); }

  60%,100%  { transform: rotate(140deg) translate(205px, 0); width: 0; height: 0; background-color: #fac80f;}

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(4){

  animation: bobble_particle2_05 1s ease-out .3s forwards;

}

@keyframes bobble_particle2_04 {

  0%    { transform: rotate(200deg) translate(200px, 0); background-color: #f7cbb2;}

  40%   { transform: rotate(200deg) translate(205px, 0); }

  60%,100%  { transform: rotate(200deg) translate(205px, 0); width: 0; height: 0; background-color: #f09664;}

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(5){

  animation: bobble_particle2_06 1s ease-out .3s forwards;

}

@keyframes bobble_particle2_05 {

  0%    { transform: rotate(260deg) translate(200px, 0); background-color: #b7daf2;}

  40%   { transform: rotate(260deg) translate(205px, 0); }

  60%,100%  { transform: rotate(260deg) translate(205px, 0); width: 0; height: 0; background-color: #6eb4e6;}

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(6){

  animation: bobble_particle2_01 1s ease-out .3s forwards;

}

@keyframes bobble_particle2_06 {

  0%    { transform: rotate(320deg) translate(200px, 0); background-color: #fbdf84;}

  40%   { transform: rotate(320deg) translate(205px, 0); }

  60%,100%  { transform: rotate(320deg) translate(205px, 0); width: 0; height: 0; background-color: #fac80f;}

}









@keyframes bobble_particle_01_sp {

  0%    { transform: rotate(10deg) translate(25vw, 0); background-color: #f7cbb2;}

  80%   { transform: rotate(10deg) translate(2vw, 0); }

  100%  { width: 0; height: 0; background-color: #f7cbb2;}

}

@keyframes bobble_particle_02_sp {

  0%    { transform: rotate(70deg) translate(25vw, 0); background-color: #b7daf2;}

  80%   { transform: rotate(70deg) translate(2vw, 0); }

  100%  { width: 0; height: 0; background-color: #6eb4e6;}

}

@keyframes bobble_particle_03_sp {

  0%    { transform: rotate(130deg) translate(25vw, 0); background-color: #fbdf84;}

  80%   { transform: rotate(130deg) translate(2vw, 0); }

  100%  { width: 0; height: 0; background-color: #fac80f;}

}

@keyframes bobble_particle_04_sp {

  0%    { transform: rotate(190deg) translate(25vw, 0); background-color: #f7cbb2;}

  80%   { transform: rotate(190deg) translate(2vw, 0); }

  100%  { width: 0; height: 0; background-color: #f09664;}

}

@keyframes bobble_particle_05_sp {

  0%    { transform: rotate(250deg) translate(25vw, 0); background-color: #b7daf2;}

  80%   { transform: rotate(250deg) translate(2vw, 0); }

  100%  { width: 0; height: 0; background-color: #6eb4e6;}

}

@keyframes bobble_particle_06_sp {

  0%    { transform: rotate(310deg) translate(25vw, 0); background-color: #fbdf84;}

  80%   { transform: rotate(310deg) translate(2vw, 0); }

  100%  { width: 0; height: 0; background-color: #fac80f;}

}





@keyframes bobble_particle2_01_sp {

  0%    { transform: rotate(20deg) translate(25vw, 0); background-color: #f7cbb2;}

  40%   { transform: rotate(20deg) translate(27vw, 0); }

  60%,100%  { transform: rotate(20deg) translate(27vw, 0); width: 0; height: 0; background-color: #f7cbb2;}

}

@keyframes bobble_particle2_02_sp {

  0%    { transform: rotate(80deg) translate(25vw, 0); background-color: #b7daf2;}

  40%   { transform: rotate(80deg) translate(27vw, 0); }

  60%,100%  { transform: rotate(80deg) translate(27vw, 0); width: 0; height: 0; background-color: #6eb4e6;}

}

@keyframes bobble_particle2_03_sp {

  0%    { transform: rotate(140deg) translate(25vw, 0); background-color: #fbdf84;}

  40%   { transform: rotate(140deg) translate(27vw, 0); }

  60%,100%  { transform: rotate(140deg) translate(27vw, 0); width: 0; height: 0; background-color: #fac80f;}

}

@keyframes bobble_particle2_04_sp {

  0%    { transform: rotate(200deg) translate(25vw, 0); background-color: #f7cbb2;}

  40%   { transform: rotate(200deg) translate(27vw, 0); }

  60%,100%  { transform: rotate(200deg) translate(27vw, 0); width: 0; height: 0; background-color: #f09664;}

}

@keyframes bobble_particle2_05_sp {

  0%    { transform: rotate(260deg) translate(25vw, 0); background-color: #b7daf2;}

  40%   { transform: rotate(260deg) translate(27vw, 0); }

  60%,100%  { transform: rotate(260deg) translate(27vw, 0); width: 0; height: 0; background-color: #6eb4e6;}

}

@keyframes bobble_particle2_06_sp {

  0%    { transform: rotate(320deg) translate(25vw, 0); background-color: #fbdf84;}

  40%   { transform: rotate(320deg) translate(27vw, 0); }

  60%,100%  { transform: rotate(320deg) translate(27vw, 0); width: 0; height: 0; background-color: #fac80f;}

}



@media only screen and (max-width: 768px){

.anim_wrap.is-show .bobble_particle i:nth-child(1){

  animation: bobble_particle_01_sp 1s ease-out .3s;

}

.anim_wrap.is-show .bobble_particle i:nth-child(2){

  animation: bobble_particle_02_sp 1s ease-out .3s;

}

.anim_wrap.is-show .bobble_particle i:nth-child(3){

  animation: bobble_particle_03_sp 1s ease-out .3s;

}

.anim_wrap.is-show .bobble_particle i:nth-child(4){

  animation: bobble_particle_04_sp 1s ease-out .3s;

}

.anim_wrap.is-show .bobble_particle i:nth-child(5){

  animation: bobble_particle_05_sp 1s ease-out .3s;

}

.anim_wrap.is-show .bobble_particle i:nth-child(6){

  animation: bobble_particle_06_sp 1s ease-out .3s;

}



.anim_wrap.is-show .bobble_particle2 i:nth-child(1){

  animation: bobble_particle2_02_sp 1s ease-out .3s forwards;

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(2){

  animation: bobble_particle2_03_sp 1s ease-out .3s forwards;

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(3){

  animation: bobble_particle2_04_sp 1s ease-out .3s forwards;

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(4){

  animation: bobble_particle2_05_sp 1s ease-out .3s forwards;

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(5){

  animation: bobble_particle2_06_sp 1s ease-out .3s forwards;

}

.anim_wrap.is-show .bobble_particle2 i:nth-child(6){

  animation: bobble_particle2_01_sp 1s ease-out .3s forwards;

}

}