@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-pop {
    from {
        opacity: 0;
        scale: .9;
    }
}

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

@keyframes a-zoom {
    from {
        scale: 1.12;
    }
}

@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 登場 */
html.intro:not(.go) .s01 * {
    animation-play-state: paused !important;
}

html.intro .s01 .s01-cta {
    transition: none;
}

html.intro .s01-bg1__in img,
html.intro .s01-bg2__in img,
html.intro .s01-light__in img {
    animation: a-zoom 1.8s cubic-bezier(.25, 1, .5, 1) both;
}

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

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

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

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

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

html.intro .s01-sub {
    animation: a-up .6s cubic-bezier(.25, 1, .5, 1) .45s both;
}

html.intro .s01-offer,
html.intro .s01-board {
    animation: a-pop .6s cubic-bezier(.34, 1.48, .68, 1) .5s both;
}

html.intro .s01-offer__price,
html.intro .s01-board__price {
    animation: a-num .6s cubic-bezier(.34, 1.68, .66, 1) .62s both;
}

html.intro .s01-offer__tax,
html.intro .s01-board__tax,
html.intro .s01-board__note {
    animation: a-up .35s cubic-bezier(.25, 1, .5, 1) .85s both;
}

html.intro .s01 .s01-cta {
    animation: a-up .6s cubic-bezier(.25, 1, .5, 1) .7s 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 .s01 .s01-cta__btn::after {
    animation: a-shine .9s ease-in-out 1.35s;
}

html.anim .s01 .s01-cta__balloon {
    animation: a-hop .8s 1.35s;
}

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