@charset "utf-8";
/* head */
#header .head .wrap {position: relative;}
#header .head .wrap .main {height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#header .head .wrap .main .logo {width: 75vw; margin: 0 auto 11vh;}
#header .head .wrap .main .catch {text-align: center;}
#header .head .wrap .main .catch div {font-family: "Josefin Sans", sans-serif; font-weight: bold; font-size: 40px;}
#header .head .wrap .main .catch p {font-weight: bold;}
#header .head .wrap .main .catch .blue {color: #2C3E50;}
#header .head .wrap .main .catch .gray {color: #4A4A4A;}
#header .head .wrap .scrolldown {position: absolute; left: 50%; bottom: 10px; transform: translate(-50%,0); z-index: 98; text-align: center;}
#header .head .wrap .scrolldown div {font-size: 16px;}
#header .head .wrap .scrolldown span {display: block; margin: 7px auto 0; width: 1px; height: 20px; background-color: #dcdcdc; position: relative;}
@keyframes scrollanimeA {
    0% {
        bottom: 100%;
        opacity: 1
    }

    5% {
        bottom: 100%;
        opacity: 1
    }

    75% {
        bottom: 0;
        opacity: 1
    }

    100% {
        bottom: 0;
        opacity: 0
    }
}
.swiper-box .scrolldown span::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 100%; background-color: #222; animation: 3.2s scrollanimeA ease infinite 3.32s;}
@keyframes scrollanimeB {
    0% {
        top: 0;
        opacity: 1;
        transform: translate(0, -50%) scale(0)
    }

    5% {
        top: 0;
        opacity: 1;
        transform: translate(0, -50%) scale(1)
    }

    75% {
        top: 100%;
        opacity: 1;
        transform: translate(0, -50%) scale(1)
    }

    100% {
        top: 100%;
        opacity: 0;
        transform: translate(0, -50%) scale(3)
    }
}
#header .head .wrap .scrolldown span::after {content: ""; display: block; width: 5px; height: 5px; background-color: #222; border-radius: 50%; position: absolute; top: 0; left: -100px; right: -100px; margin: 0 auto; animation: 3.2s scrollanimeB ease infinite 3.32s; transform: translate(0,-50%) scale(0);}
@media screen and (max-width:768px) {
    #header .head .wrap .main .logo {width: 90vw; margin: 0 auto 6vh;}
    #header .head .wrap .main .catch div {font-size: 30px;}
    #header .head .wrap .scrolldown div {font-size: 14px;}
}
@media screen and (max-width:590px) {
    #header .head .wrap .main .catch div {font-size: 24px;}
    #header .head .wrap .main .catch p {font-size: 14px; white-space: pre-wrap; word-break: keep-all;}
    #header .head .wrap .scrolldown div {font-size: 12px;}
}