@charset "UTF-8";

*{
    font-family: 'Noto Sans JP';
    justify-content: center;
}

.section__title{
    font-size: 24px;
    padding-bottom:30px;
}

.sweets__img{
    height: 500px;
    object-fit: cover;
    width: 100%;
}

.card__cake,
.card__fresh,
.card__baked{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 auto;
    padding: 30px 20px;
    width: 100%;
}

.card__item__cake{
    background: #fff;
    border-radius: 20px;
    margin: 0;
    padding: 10px;
    width: 46%;
}

.card__item__fresh{
    background: #fff;
    border-radius: 20px;
    margin: 0;
    padding: 10px;
    width: 46%;
}

.card__item__baked{
    background: #fff;
    border-radius: 20px;
    margin: 0;
    padding: 10px;
    width: 46%;
}

.card__img{
    aspect-ratio: 1;
    margin-bottom: 20px;
}

.card__img img{
    border-radius: 20px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.card__title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.card__txt{
    font-size: 13px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.card__access{
    margin: 4px;
}

.info{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 10px;
    width: 100%;
}

.cake__info{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    justify-content: center;
    width: 100%;
}

.cake__last{
    background-color: white;
    border-radius: 20px;
    display: flex;
    font-size: 16px;
    margin: 0 auto;
    padding: 10px;
}

.access__icon{
    margin: 4px;
}

.btn{
    display: flex;
}

.baked__txt{
    font-size: 20px;
}

.baked__last{
    flex-direction: column;
    margin: 10px;
    padding: 20px;
    text-align: center;
    width: 100%;
}

@media all and (min-width:768px){
    .card__item__cake{
        background: #fff;
        border-radius: 20px;
        margin: 0;
        padding: 10px;
        width: 30%;
    }
    
    .card__item__fresh{
        background: #fff;
        border-radius: 20px;
        margin: 0;
        padding: 10px;
        width: 30%;
    }
    
    .card__item__baked{
        background: #fff;
        border-radius: 20px;
        margin: 0;
        padding: 10px;
        width: 40%;
    }

    .card__cake,
    .card__fresh,
    .card__baked{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 30px 10%;
        margin: 0 auto;
    }

    .card__item{
        background: #fff;
        border-radius: 20px;
        margin: 0 auto;
        padding: 20px;
        width: 40%;
    }

    .cake__last{
        background-color: white;
        border-radius: 20px;
        width: 30%;
    }
}

@media all and (min-width:992px){
    .card__item{
        margin: 20px 0;
        width: 20%;
    }
}