@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif !important;
}


.hero {
    position: relative;
    width: 100%;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.hero-content {
    text-align: center;
    color: #fff;
}

.hero-content img {
    width: 100%;
    height: auto;
    max-width: 960px;
}

#date-image {
    width: 100% !important;
    max-width: 600px;
    
}


@media screen and (max-width: 768px) {
    .hero-content img {
        width: 100%;
        height: auto;
    }
}



@media (max-width: 1024px) {
    .hero {
        height: auto;
    }

}

@media (max-width: 768px) {
    .hero {
        height: 100vw;

    }

    .hero-overlay {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

}



@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-32px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-24px);
    }

    80% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.6s ease-in-out;
}



.text-be {
    color: #aa7f1c;
}


.btn-eclp {
    background-color: #aa7f1c;
    padding: 6px 12px 10px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-size: small;
}



.bg-red {
    background-color: #e94841;
    color:#fff
}

.bg-grey {
    background-color: #f9f9f9;
}

.cta-btn1 {
    background-color: #e94841;
        padding: 6px 20px 10px;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
}



.cta-btn2 {
    background-color: #fff;
        padding: 6px 20px 10px;
        color: #e94841;
        text-decoration: none;
        border-radius: 5px;
}