@media screen and (max-width: 767px) {
    body{
        padding-bottom: 3.4rem;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    .center{
        width: 100%;
    }

    .ingredient-card, .ingredient-card:nth-child(even) {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .ingredient-info p, .ingredient-card:nth-child(even) .ingredient-info p {
        border: none;
        padding: 0;
        text-align: center;
    }
    .ingredient-card:nth-child(even) .ingredient-info h3 {
        justify-content: center;
    }
    .ingredient-card:nth-child(even) .ingredient-info h4 {
        text-align: center;
    }
    .bg-text {
        font-size: 3rem;
        top: 0;
    }

}