@charset "UTF-8";
/*下線*/
.under-line-animation {
    display: block;
    position: relative;
}
.under-line-animation::after {
    position: absolute;
    left: 0;
    bottom: -5px;
    content: '';
    width: 100%;
    height: 1px;
    background: #282828;
    transform: scale(0, 1);
    transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
    transition: transform 0.8s; /*変形の時間*/
}
.under-line-animation.gold::after {
    background: #A78B4E;
}
.under-line-animation.is-active::after {
    transform: scale(1, 1);
}
/*フェードアップ*/
.fadeup.is-active {
    animation: ani-fadeup 1.2s forwards;
}
@keyframes ani-fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*縦棒*/
.line-vertical-area {
    padding-top: 150px;
}
.line-vertical {
    display: block;
    position: relative;
    width: 7px;
    margin: 0 auto;
    margin-top: -120px;
}
.line-vertical::before {
    bottom: 0;
}
.line-vertical.is-active::before {
    opacity: 1;
    position: absolute;
    content: '●';
    font-size: 1.0rem;
    left: 50%;
    animation: ani-downdot 1.6s forwards;
    transform: translateX(-50%);
}
.line-vertical.ajust.is-active::before {
    animation: ani-downdot 1.6s forwards;
}
.line-vertical::after {
    background: #282828;
    content: "";
    display: block;
    height: 0;
    width: 1px;
    position: absolute;
    top: -63px;
    left: 8px;
}
.line-vertical.is-active::after {
    animation: line-downdot 1.6s forwards;
}
/*点滅*/
.blink.is-active {
    animation: ani-blink 1s step-end infinite;
}
@keyframes ani-downdot {
    0% {
        transform: translateY(-60px);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(45px);
    }
}
@keyframes line-downdot {
    0% {
        height: 0;
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        height: 100px;
    }
}
@keyframes ani-blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media screen and (max-width: 767px) {
    .marker {
        background: linear-gradient(transparent 0%, #FFFFFFB3 0%);
        background-repeat: no-repeat;
        background-size: 0% 100%;
        transition:background-size 1.5s;
    }
    .marker.is-active {
        background-size: 100% 100%;
    }
    @keyframes ani-downdot {
        0% {
            transform: translateY(-60px);
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(5px);
        }
    }
    @keyframes line-downdot {
        0% {
            height: 0;
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            height: 67px;
        }
    }
}