@charset "utf-8";

/* index.html */
@keyframes fadein {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

.first img {
    animation: 2s both fadein;
    animation-delay: 2s;
}

.scroll {
    animation: 3s both fadein-floating;
    animation-delay: 3s;
}

@keyframes fadein-floating {
    0% {
        opacity: 0%;
    }

    50% {
        opacity: 100%;
        transform: translateY(0.75rem);
    }
    
    100% {
        opacity: 100%;
    }
}


@keyframes scroll-in {
    0% {
      opacity: 0;
      translate: 0 -20px;
    }
    10% {
      opacity: 0;
      translate: 0 -20px;
    }
    20% {
      opacity: 1;
      translate: 0 0;
    }
    100% {
      opacity: 1;
    }
}

header {
    animation: 3s fadein both;
}

.index-header .header-pc {
    opacity: 1;
    animation: 0.5s scroll-in linear;
    animation-timeline: scroll();
}

.index-header .nav-btn {
    opacity: 1;
    animation: 0.5s scroll-in linear;
    animation-timeline: scroll();
}



@keyframes blur {
    0% {
        filter: blur(10px);
    }

    100% {
        filter: blur(0);
    }
}

.first {
    animation: 2s blur;
}

.grobal-nav {
    animation: blur 1s ease-in-out;
}

.gotop img:hover {
    animation: floating 2s ease-in-out alternate infinite;
}

@keyframes floating {
    to {
        transform: translateY(1rem);
    }
    
}

.backhome-btn:hover, 
.readmore-btn:hover,
.prevnext-btn a:hover,
.google-map__btn:hover, 
.faq-btn:hover,
.contact-btn:hover,
.submit:hover {
    animation: click 0.1s linear forwards;
}

@keyframes click {
    to {
        transform: translateY(0.25em);
    }
}