@charset "utf-8";

/* =========================================================
追加
========================================================= */

.mv_heart,
.tab_icon2,
.howto_bottom_pattern {
	animation: kakukaku1 0.8s steps(2) infinite alternate;
}
@keyframes kakukaku1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}

.mv_cloud,
.dl_cloud,
.howto_top_cloud {
	animation: kakukaku2 0.8s steps(2) infinite alternate;
}
@keyframes kakukaku2 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}

.mv_star,
.box_title_star,
.tab1_bottom_star,
.howto_bottom_star {
    animation: kakukaku3 0.8s steps(2) infinite alternate;
}
@keyframes kakukaku3 {
    0% {
        transform: translateY(0) rotate(-3deg);
    }
    100% {
        transform: translateY(-8px) rotate(3deg);
    }
}

.mv_cloud,
.dl_cloud,
.howto_top_cloud,
.mv_star,
.box_title_star,
.tab1_bottom_star,
.howto_bottom_star,
.mv_heart,
.tab_icon2,
.howto_bottom_pattern {
    animation-duration: .8s;
    animation-timing-function: steps(2);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused; /* 最初は止めておく */
}

.mv_cloud,
.dl_cloud,
.howto_top_cloud {
    animation-name: kakukaku2;
}

.mv_star,
.box_title_star,
.tab1_bottom_star,
.howto_bottom_star {
    animation-name: kakukaku3;
}

.mv_heart,
.tab_icon2,
.howto_bottom_pattern {
    animation-name: kakukaku1;
}

.dl_pattern {
	z-index: 1;
}
.dl_circle {
    animation:
		spin 30s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.dl_cta-hand,
.tab1_cta-hand {
    animation: handmove 2.5s cubic-bezier(.22, 1, .36, 1) infinite;
    will-change: transform, opacity;
}
@keyframes handmove {
    0%, 40% {
        opacity: 0;
        transform: translate(20px, 20px);
    }
    70% {
        opacity: 1;
        transform: translate(-15px, -10px);
    }
    95% {
        opacity: 1;
        transform: translate(-15px, -10px);
    }
    100% {
        opacity: 0;
        transform: translate(-15px, -10px);
    }
}

#kizon_contents .tab1_fukidashi1,
#kizon_contents .tab1_fukidashi2{
	opacity: 0;
}