/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */
header {
}

#main0 img {
    animation: ani_bg 8s infinite;
}
@keyframes ani_bg {
    0% {transform: scale(1)}
    75% {transform: scale(1.05)}
    80% {transform: scale(1)}
}

#main1 {
    animation: ani_chara 8s infinite;
}
@keyframes ani_chara {
    0% {transform: translate(-5%, 2.5%)}
    75% {transform: translate(0%, 0%)}
    75.25% {transform: translate(-1%, 0.5%)}
    75.5% {transform: translate(1%, -0.5%)}
    77% {transform: translate(-4%, 2%)}
    100% {transform: translate(-5%, 2.5%)}
}
#main2 {
    animation: ani_ball 8s infinite;
}
@keyframes ani_ball {
    0% {transform: translate(0%, 0%) rotateZ(0deg);opacity: 0;}
    75% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
    75.5% {transform: translate(4px, 4px) rotateZ(1deg)}
    76% {transform: translate(0px, 4px) rotateZ(0deg)}
    76.5% {transform: translate(4px, 0px) rotateZ(-1deg)}
    77% {transform: translate(0px, 0px) rotateZ(0deg)}
    77.5% {transform: translate(4px, 4px) rotateZ(1deg)}
    78% {transform: translate(0px, 4px) rotateZ(0deg)}
    78.5% {transform: translate(4px, 0px) rotateZ(-1deg)}
    79% {transform: translate(0px, 0px) rotateZ(0deg) scale(1);}
	90%  {transform: translate(-40%, 20%) scale(2);opacity: 0;}
	100%  {transform: translate(-40%, 20%) scale(2);opacity: 0;}
}
img.ani2 {
    animation: ani_bg2 10s infinite;
    top:0;
    left:0;
}
@keyframes ani_bg2 {
    0% {opacity:0;}
    30% {opacity:0;}
    50% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}


section {
	opacity: 0;
	transition: all 1s ease;
}
section.active {
	opacity: 1;
	transition: all 1s ease;
}
section h3 {
	transform: translateX(0.5em);
	transition: all 1s ease;
}
section.active h3 {
	transform: unset;
}
#page h4 {
	transform: translateX(0.5em);
	transition: all 1s ease;
}
#page .active h4 {
	transform: unset;
}

#page ol li {
	display: block;
	transform: translateX(1em);
	transition: all 1s ease;
}
#page .active ol li {
	transform: unset;
}


#news li:nth-of-type(1) {
	transform:translateX(100px) rotateZ(0deg);
	opacity: 0;
}
#news li:nth-of-type(2) {
	transform:translateX(-100px) rotateZ(0deg);
	opacity: 0;
}
#news li:nth-of-type(3) {
	transform:translateX(100px) rotateZ(0deg);
	opacity: 0;
}
#news li.active:nth-of-type(1) {
	transform: translateX(0px) rotateZ(2deg);
	opacity: 1;
}
#news li.active:nth-of-type(2) {
	transform: translateX(0) rotateZ(-1deg);
	opacity: 1;
}
#news li.active:nth-of-type(3) {
	transform: translateX(0) rotateZ(3deg);
	opacity: 1;
}

#about p {
	opacity: 0;
	animation: 1s ease-out forwards;
}
#about p::nth-of-type(1) {
	animation-delay: 0.2s;
}
#about p:nth-of-type(2) {
	animation-delay: 0.3s;
}
#about p:nth-of-type(3) {
	animation-delay: 0.5s;
}
#about.active p {
	animation-name: move_y;
}
#about div {
	transition:  all 1s ease-in;
	opacity: 0;
	transform: translateY(1em);
}
#about div.active {
	opacity: 1;
	transform: unset;
}

#movie {
	opacity: 1;
}

#movie h3 {
	opacity: 0;
	transform: translateX(0.5em);
	transition: all 1s ease;
}
#movie.active h3 {
	opacity: 1;
	transform: unset;
}
#movie .movie_btn ,
#movie #scene_box {
	opacity: 0;
	transform: translateY(1em);
	transition: all 1s ease;
}
#movie.active .movie_btn ,
#movie.active #scene_box {
	opacity: 1;
	transform: unset;
}


#character .slick-dots li::after {
	opacity: 0;
	animation: 0.5s ease-in forwards;
}
#character .slick-dots li:nth-child(1)::after {
	animation-delay: 0s;
}
#character .slick-dots li:nth-child(2)::after {
	animation-delay: 0.1s;
}
#character .slick-dots li:nth-child(3)::after {
	animation-delay: 0.2s;
}
#character .slick-dots li:nth-child(4)::after {
	animation-delay: 0.3s;
}
#character .slick-dots li:nth-child(5)::after {
	animation-delay: 0.4s;
}
#character .slick-dots li:nth-child(6)::after {
	animation-delay: 0.5s;
}
#character .slick-dots li:nth-child(7)::after {
	animation-delay: 0.6s;
}
#character .slick-dots li:nth-child(8)::after {
	animation-delay: 0.7s;
}
#character .slick-dots li:nth-child(9)::after {
	animation-delay: 0.8s;
}
#character .slick-dots li:nth-child(10)::after {
	animation-delay: 0.9s;
}
#character .slick-dots li:nth-child(11)::after {
	animation-delay: 1.0s;
}
#character .slick-dots li:nth-child(12)::after {
	animation-delay: 1.1s;
}
#character .slick-dots li:nth-child(13)::after {
	animation-delay: 1.2s;
}
#character .slick-dots li:nth-child(14)::after {
	animation-delay: 1.3s;
}
#character .slick-dots li:nth-child(15)::after {
	animation-delay: 1.4s;
}
#character .slick-dots li:nth-child(16)::after {
	animation-delay: 1.5s;
}
#character .slick-dots li:nth-child(17)::after {
	animation-delay: 1.6s;
}
#character .slick-dots li:nth-child(18)::after {
	animation-delay: 1.7s;
}
#character .slick-dots li:nth-child(19)::after {
	animation-delay: 1.8s;
}
#character .slick-dots li:nth-child(20)::after {
	animation-delay: 1.9s;
}
#character .slick-dots li:nth-child(21)::after {
	animation-delay: 2.0s;
}
#character .slick-dots li:nth-child(22)::after {
	animation-delay: 2.1s;
}
#character.active .slick-dots li::after {
	animation-name: move_x;
}
@keyframes move_x{
	0%{
		opacity: 0;
		transform:translateX(1em);}
	100%{
		opacity: 1;
		transform:translateX(0);}
}
@keyframes move_y{
	0%{
		opacity: 0;
		transform:translateY(1em);}
	100%{
		opacity: 1;
		transform:translateY(0);}
}