/* General Styles */
body {
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    background-color: #FFFDF4;
    padding: 0;
    margin: 0;
    min-width: 320px;
}

/* Page Wrapper */
.page-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #CAA846;
}



/* Main Image */
.main-image {
    margin-bottom: 0;
}

/* Introduction Section */
.intro-section {
    /* margin-bottom: 20px; */
}

/* Farmers Grid */
.farmers-grid {
    padding: 10px;
}

.farmer-pair {
    display: flex;
    /* gap: 20px; */
    /* margin-bottom: 20px; */
}

.farmer-card {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.farmer-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vote Section */
.vote-section {
    position: relative;
    margin-top: 0;
}

.vote-bg {
    width: 100%;
    height: auto;
    display: block;
}

.vote-button-wrapper {
    position: absolute;
    left: 50%;
    top: 87%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

/* Bottom Vote Button */
.bottom-vote-wrapper {
    text-align: center;
    padding: 40px 20px;
}

.vote-button {
    width: 460px;
    height: auto;
    transition: opacity 0.3s ease;
    max-width: 100%;
}

.vote-button:hover {
    opacity: 1;
    filter: brightness(0.9);
}

/* Footer */
.footer {
    /* margin-top: 20px; */
}

@media only screen and (max-width:767px) {
    .page-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .farmers-grid {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: none;
    }

    .farmer-pair {
        flex-direction: column;
        /* display: block; */
        margin-bottom: 0;
        gap: 0;
    }

    .farmer-card {
        width: 100%;
        margin: 0;
        padding: 5px;
    }


    .farmer-card img {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 15px;
    }

    .vote-button {
        width: calc(100% - 40px);
        max-width: 335px;
        height: auto;
    }

    .vote-button-wrapper {
        padding: 0;
        top: 0px;
    }

    .bottom-vote-wrapper {
        padding: 40px 20px;
        background-color: #CAA846;
    }

    .bottom-vote-wrapper .vote-button {
        width: 100%;
        max-width: 335px;
    }

    .main-image {
        margin-bottom: 0;
    }

    .vote-section {
        /*margin-top: 30px;*/
    }
}