@charset "utf-8";
/** kv title **/
.kv-title .kv-title-wrap {
    position: relative;
    display: inline-block;
    margin-top: 7px;
}

.kv-title.is-animated .kv-title-wrap::after {
    animation: kv-title 8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    content: "";
    position: absolute;
    top: 8px;
    left: -8px;
    width: 0;
    height: 100%;
    background: var(--color-lp-orange-80);
    z-index: -2;
    transform: rotate(-3deg);
}

.kv-title.is-animated .kv-title-wrap::before {
    animation: kv-title 8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    background: linear-gradient(to right, var(--color-lp-blue-30) 20%,var(--color-lp-green-10) 100%);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    transform: rotate(-3deg);
}

.kv-title .kv-title-wrap .inn {
    color: var(--color-white);
    display: inline-block;
    font-size: 53px;
    line-height: 67px;
    font-weight: bold;
    padding: 5px 15px;
    position: relative;
    z-index: 1;
    transform: rotate(-3deg);
}

@keyframes kv-title {
    0% {
        opacity: 0;
        width: 0;
    }
    30% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
    30%, 100% {
        opacity: 1;
    }
}

/******* SP *******/
@media screen and (max-width: 80rem) {
    .kv-title-sp {
        margin-left: clamp(22px,5vw,76px);
    }

    .kv-title-sp .kv-title-sp-wrap {
        position: relative;
        display: inline-block;
        margin-top: 7px;
    }

    .kv-title-sp.is-animated .kv-title-sp-wrap::after {
        animation: kv-title 8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        content: "";
        position: absolute;
        top: 6px;
        left: -6px;
        width: 0;
        height: 100%;
        background: var(--color-lp-orange-80);
        z-index: -2;
        transform: rotate(-3deg);
    }

    .kv-title-sp.is-animated .kv-title-sp-wrap::before {
        animation: kv-title 8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        background: linear-gradient(to right, var(--color-lp-blue-30) 20%,var(--color-lp-green-10) 100%);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        z-index: -1;
        transform: rotate(-3deg);
    }

    .kv-title-sp .kv-title-sp-wrap .inn {
        color: var(--color-white);
        display: inline-block;
        font-size: 44px;
        line-height: 52px;
        font-weight: bold;
        padding: 5px 30px 5px 15px;
        position: relative;
        z-index: 1;
        transform: rotate(-3deg);
    }

    @keyframes kv-title-sp {
        0% {
            opacity: 0;
            width: 0;
        }
        30% {
            width: 100%;
        }
        100% {
            width: 100%;
        }
        30%, 100% {
            opacity: 1;
        }
    }
}

@media screen and (max-width: 48rem) {
    .kv-title-sp .kv-title-sp-wrap .inn {
        font-size: 26px;
        line-height: 33px;
        padding: 5px 20px 5px 15px;
    }

    .kv-title-sp .kv-title-sp-wrap .inn.tight {
        font-size: 24px;
        line-height: 28px;
        padding: 5px 5px 5px 5px;
    }
}