.benefit-card {
    height: 100%;
    overflow: hidden;
    background-color: var(--color-beige);
    border-radius: 6px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);

    @media (width >= 768px) {
        border-radius: 20px;
    }
}

.benefit-card-image-area {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.benefit-card-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit-card-body {
    padding: 20px;
    color: var(--color-dark-brown);
    text-align: center;

    @media (width >= 768px) {
        padding: 20px 40px 47px;
    }
}

.benefit-card-title {
    margin-bottom: 12px;
    font-size: var(--text-ja-24);
    letter-spacing: 0.05em;
}

.benefit-card-text { 
    display: inline-block;
    font-size: clamp(13px, 0.36vw + 11.6px, 16px);
    line-height: 1.7;
    text-align: left;
}