@charset "utf-8";

/* ---------- スライドイン ---------- */

/* -- 共通 -- */
.slideIn {
    opacity: 0;
}

/* -- 上から下 -- */
.slideDown.is-active {
    animation: slideDown 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideDown {
    0% {
        transform: translateY(-180px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

/* -- 下から上 -- */
.slideUp.is-active {
    animation: slideUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideUp {
    0% {
        transform: translateY(180px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

/* -- 左から右 -- */
.slideRight.is-active {
    animation: slideRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideRight {
    0% {
        transform: translateX(-180px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

/* -- 右から左 -- */
.slideLeft.is-active {
    animation: slideLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideLeft {
    0% {
        transform: translateX(180px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
    }

    40%,
    100% {
        opacity: 1;
    }
}

/* ---------- ズームイン ---------- */
.zoomIn {
    opacity: 0;
}

.zoomIn.is-active {
    animation: zoomIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}



/* ---------- ぽよぽよ ---------- */
.poyopoyo {
    animation: poyopoyo 2.5s ease-out infinite;
    opacity: 1;
}

@keyframes poyopoyo {

    0%,
    40%,
    60%,
    80% {
        transform: scale(1.0);
    }

    50%,
    70% {
        transform: scale(0.95);
    }
}

/* ---------- きらん ---------- */
.kiran {
    opacity: 1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.kiran::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    opacity: 0;
    transition: cubic-bezier(0.32, 0, 0.67, 0);
}

.kiran:hover::before {
    animation: kiran 1s linear;
}

@keyframes kiran {
    0% {
        transform: scale(2) rotate(45deg);
        opacity: 0;
    }

    20% {
        transform: scale(20) rotate(45deg);
        opacity: 0.6;
    }

    40% {
        transform: scale(30) rotate(45deg);
        opacity: 0.4;
    }

    80% {
        transform: scale(45) rotate(45deg);
        opacity: 0.2;
    }

    100% {
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


/* ---------- リフレクション ---------- */
.reflection {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.reflection:after {
    content: "";
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


/* ---------- 縦方向伸縮アニメーション ---------- */
.puyon {
    animation: puyon 2s linear 1s infinite;
}

@keyframes puyon {
    0% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }

    40% {
        transform: scale(0.95, 1.2) translate(0%, -10%);
    }

    50% {
        transform: scale(1.1, 0.9) translate(0%, 5%);
    }

    60% {
        transform: scale(0.95, 1.05) translate(0%, -3%);
    }

    70% {
        transform: scale(1.05, 0.95) translate(0%, 3%);
    }

    80% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }

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