@charset "utf-8";

/* ---------------------------------- */
/*  ズームイン(jsトリガー発火)  */
/* ---------------------------------- */
.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);
    }
}

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

.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;
    }
}


/* ---------------------------------- */
/*  バウンスイン  */
/* ---------------------------------- */
.bounce-in {
    opacity: 0;
}

.bounce-in.active {
    opacity: 1;
    animation: bounceIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}

@keyframes bounceIn {
    0% {
        transform: translateY(-80px) scale(0.6);
        opacity: 0;
    }

    40% {
        transform: translateY(0) scale(1.1);
        opacity: 1;
    }

    60% {
        transform: translateY(-15px) scale(0.95);
    }

    75% {
        transform: translateY(0) scale(1.03);
    }

    90% {
        transform: translateY(-5px) scale(0.98);
    }

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


/* ---------------------------------- */
/*  バウンスループ  */
/* (対象要素にクラス付与) */
/* ---------------------------------- */
.bounce-loop {
    display: inline-block;
    animation: bounceUpDown 2s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes bounceUpDown {
    0% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-12px);
    }

    30% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(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%);
    }
}

/* ---------------------------------- */
/*  スライドインアニメーション  */
/* ---------------------------------- */
.slide-box {
    opacity: 0;
    transition:
        transform 0.8s ease,
        opacity 0.8s ease;
    will-change: transform, opacity;
}

/* ①右から左(初期状態：右にずらしておく) */
.slide-right {
    transform: translateX(80px);
}

/* ②左から右(初期状態：左にずらしておく) */
.slide-left {
    transform: translateX(-80px);
}

/* ③下から上(初期状態：下にずらしておく) */
.slide-bottom {
    transform: translateY(80px);
}

/* 画面内に入った後の状態 */
.is-show {
    opacity: 1;
    transform: translate(0, 0);
}


/* ---------------------------------- */
/*  ワイプ  */
/* ---------------------------------- */
.bg .bg-wrap {
    position: relative;
    display: inline-block;
    margin-top: 5px;
}

.bg.is-animated .bg-wrap::before {
    animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: left center;
}

.bg .bg-wrap .inn {
    color: #fff;
    display: inline-block;
    font-size: 36px;
    font-weight: bold;
    padding: 5px 15px;
    position: relative;
    z-index: 1;
}

@keyframes bg {
    0% {
        opacity: 0;
        transform: scaleX(0) translateX(-5%);
    }

    30% {
        transform: scaleX(1) translateX(0);
    }

    100% {
        transform: scaleX(1) translateX(0);
    }

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


/* ---------------------------------- */
/*  テキストマーカー  */
/* ---------------------------------- */
.marker-text {
    display: inline-block;
    position: relative;
    z-index: 1;
    font-weight: bold;
}

/* マーカー本体 */
.marker-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15em;
    /* 位置調整 */
    width: 100%;
    height: 0.55em;
    /* マーカーの太さ */
    background: #fff16a;
    /* マーカー色 */
    z-index: -1;

    /* 最初は非表示 */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s ease;
}

/* 発火後 */
.marker-text.is-show::after {
    transform: scaleX(1);
}


/* ---------------------------------- */
/*  ラベル  */
/* ---------------------------------- */

.reveal img {
    display: block;
    width: 100%;
    clip-path: inset(0 100% 0 0);
}

.reveal.is-show img {
    animation: titleReveal 1.2s ease-out forwards;
}

@keyframes titleReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}


/* 拡大・縮小 */

.keyframe5 {
    animation-name: anim_sc;
    transform: scale(0.95, 0.95);
}

@keyframes anim_sc {
    100% {
        transform: scale(1, 1);
    }
}

.animation {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.7s;
}


/*点滅*/

.flash {
    animation: flash 1.5s linear infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}