@charset "UTF-8";

/* 動きの型 */
@keyframes a-up {
    from {
        opacity: 0;
        translate: 0 1.2rem;
    }
}

@keyframes a-fade {
    from {
        opacity: 0;
    }
}

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

@keyframes a-reveal {
    from {
        clip-path: inset(-30% 100% -30% -10%);
    }
    to {
        clip-path: inset(-30% -10% -30% -10%);
    }
}

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

@keyframes a-num {
    0% {
        opacity: 0;
        scale: .3;
    }
    30% {
        opacity: 1;
    }
}

@keyframes a-drop {
    0% {
        opacity: 0;
        translate: 0 -12rem;
        rotate: -25deg;
        animation-timing-function: cubic-bezier(.5, 0, .9, .5);
    }
    12% {
        opacity: 1;
    }
    60% {
        translate: 0 0;
        rotate: 0deg;
        animation-timing-function: cubic-bezier(.2, .6, .4, 1);
    }
    78% {
        translate: 0 -1rem;
        animation-timing-function: cubic-bezier(.6, 0, .8, .4);
    }
    100% {
        translate: 0 0;
    }
}

@keyframes a-stack {
    0% {
        opacity: 0;
        translate: 0 -6rem;
        animation-timing-function: cubic-bezier(.5, 0, .9, .5);
    }
    20% {
        opacity: 1;
    }
    60% {
        translate: 0 0;
        animation-timing-function: cubic-bezier(.2, .6, .4, 1);
    }
    80% {
        translate: 0 -.6rem;
        animation-timing-function: cubic-bezier(.6, 0, .8, .4);
    }
    100% {
        translate: 0 0;
    }
}

@keyframes a-shine {
    from {
        background-position: 150% 0;
    }
    to {
        background-position: -50% 0;
    }
}

@keyframes a-hop {
    0% {
        translate: 0 0;
        animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    }
    33% {
        translate: 0 -.7rem;
        animation-timing-function: cubic-bezier(.5, 0, .75, 0);
    }
    67% {
        translate: 0 0;
        animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    }
    83% {
        translate: 0 -.22rem;
        animation-timing-function: cubic-bezier(.5, 0, .75, 0);
    }
    100% {
        translate: 0 0;
    }
}

/* FV 登場（見出しの2行だけ） */
html.intro:not(.go) .s01 * {
    animation-play-state: paused !important;
}

html.intro .s01-band--1 > span {
    animation: a-wipe .5s cubic-bezier(.25, 1, .5, 1) both;
}

html.intro .s01-copy--1 > span {
    animation: a-reveal .5s cubic-bezier(.25, 1, .5, 1) .06s both;
}

html.intro .s01-band--2 > span {
    animation: a-wipe .5s cubic-bezier(.25, 1, .5, 1) .12s both;
}

html.intro .s01-copy--2 > span {
    animation: a-reveal .5s cubic-bezier(.25, 1, .5, 1) .18s both;
}

html.intro .s01-note-mark--1 {
    animation: a-fade .2s ease .3s both;
}

html.intro .s01-note-mark--2 {
    animation: a-fade .2s ease .42s both;
}

/* ボタンの光と吹き出し（追従ボタンと最後のボタンが出たときに1回だけ） */
html.anim .s01-cta__btn::after,
html.anim .s10__pc .s10-cta__btn::after,
html.anim .s10__sp .s10-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 65%) 150% 0 / 250% 100% no-repeat;
    pointer-events: none;
}

html.anim .float-cta.is-seen .s01-cta__btn::after,
html.anim .s10__pc .s10-cta.is-on .s10-cta__btn::after,
html.anim .s10__sp .s10-cta.is-on::before {
    animation: a-shine .9s ease-in-out .4s;
}

html.anim .float-cta.is-seen .s01-cta__balloon,
html.anim .s10-cta.is-on .s10-cta__union,
html.anim .s10-cta.is-on .s10-cta__balloon {
    animation: a-hop .8s .4s;
}

/* スクロールで表示 */
html.anim .m-wait {
    opacity: 0 !important;
}

html.anim .m-wait,
html.anim .m-go {
    transition: none !important;
}