@charset "UTF-8";

/*animation
----------------------------------------*/
.mainarea .chara {
    opacity: 1;
    transition: all 300ms cubic-bezier(0,.48,.87,1.13) 300ms;
}
.mainarea .chara.active {
    opacity: 0;
}
.mainarea .chara.passive {
    opacity: 1;
}

.mainarea .card {
    opacity: 1;
    transition: all 300ms cubic-bezier(0,.48,.87,1.13) 300ms;
}
.mainarea .card.active {
    opacity: 0;
}
.mainarea .card.passive {
    opacity: 1;
}

.mainarea .ballon {
    opacity: 1;
    transition: all 300ms cubic-bezier(0,.48,.87,1.13) 300ms;
}
.mainarea .ballon.active {
    opacity: 0;
}
.mainarea .ballon.passive {
    opacity: 1;
}

.randomCard {
	opacity: 0;
    transition: all 200ms cubic-bezier(0,.48,.87,1.13) 300ms;
}
.randomCard.active {
    opacity: 1;
    transform: scale(1.2);
}
.randomCard.passive {
    opacity: 1;
    transform: scale(1);
}
.randomCard:hover {
	z-index: 10;
	transform: scale(1.4);
	box-shadow: 0 60px 20px 20px rgba(0, 0, 0, 0.4);
}
.randomCard__Small:hover {
	z-index: 10;
	transform: scale(3.0);
	box-shadow: 0 60px 20px 20px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 736px) {
	.randomCard:hover {
		z-index: 10;
		transform: initial;
		box-shadow: initial;
	}
	.randomCard__Small:hover {
		z-index: 10;
		transform: initial;
		box-shadow: initial;
	}
}

.trainer .cards .trainerCard {
    opacity: 0;
    transition: all 200ms cubic-bezier(0,.48,.87,1.13) 300ms;
    transform: translateY(100px);
}
.trainer .cards .trainerCard.active {
    opacity: 1;
    transform: translateY(0px);
}
.trainer .cards .trainerCard.passive {
    opacity: 1;
	transform: scale(1);
	transform: translateY(0px);
}
.trainer .cards .trainerCard:hover {
	z-index: 20;
	transform: scale(2.3);
}
@media only screen and (max-width: 736px) {
	.trainer .cards .trainerCard:hover {
		z-index: 20;
		transform: initial;
	}
}

.other .cards .otherCard {
    opacity: 0;
    transition: all 200ms cubic-bezier(0,.48,.87,1.13) 300ms;
    transform: translateY(100px);
}
.other .cards .otherCard.active {
    opacity: 1;
    transform: translateY(0px);
}
.other .cards .otherCard.passive {
    opacity: 1;
    transform: translateY(0px);
}
.other .cards .otherCard:hover {
	z-index: 10;
	transform: scale(2.3);
	box-shadow: 0 60px 20px 20px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 736px) {
	.other .cards .otherCard:hover {
		z-index: 10;
		transform: initial;
		box-shadow: initial;
	}
}


.newtrainer .cards .newTrainerCardParent {
    opacity: 0;
    transition: all 200ms cubic-bezier(0,.48,.87,1.13) 300ms;
    transform: translateY(100px);
}
.newtrainer .cards .newTrainerCardParent.active {
    opacity: 1;
    transform: translateY(0px);
}
.newtrainer .cards .newTrainerCardParent.passive {
    opacity: 1;
    transform: translateY(0px);
}
.newtrainer .cards .newTrainerCardParent:hover {
	z-index: 10;
	transform: scale(1.8);
}


@media only screen and (max-width: 736px) {
	.newtrainer .cards .newTrainerCardParent:hover {
		transform: initial;
	}
}


.mirror .cards .mirrorCardParent {
    opacity: 0;
    transition: all 200ms cubic-bezier(0,.48,.87,1.13) 300ms;
    transform: translateY(100px);
}
.mirror .cards .mirrorCardParent.active {
    opacity: 1;
    transform: translateY(0px);
}
.mirror .cards .mirrorCardParent.passive {
    opacity: 1;
    transform: translateY(0px);
}
.mirror .cards .mirrorCardParent:hover {
	z-index: 10;
	transform: scale(1.5);
	/* box-shadow: 0 60px 20px 20px rgba(0, 0, 0, 0.4); */
}

@media only screen and (max-width: 736px) {
	.mirror .cards .mirrorCardParent:hover {
		transform: initial;
	}
}