@media screen and (min-width: 1100px) {
    .hajimetebako-about__list{
        margin-bottom: 30px;
        align-items: stretch;
    }
    .hajimetebako-about__list > .swiper-slide {
    height: auto;
    }
    .hajimetebako-about__list-item {
        background-color: #fff;
        border-radius: 20px;
        padding: 3%;
    }

    .hajimetebako-about__list-item-header-text-wrap {
        text-align: center;
        color: var(--accent-color);
        margin-bottom: 30px;
    }

    .hajimetebako-about__list-item-title {
        font-weight: bold;
    }

    .hajimetebako-about__list-item-img-wrap {
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after{
        display: none;
    }
}

@media screen and (max-width: 1100px) {
    .hajimetebako-about__container{
        margin: 0 auto;
        max-width: 350px;
    }

    .hajimetebako-about__list-wrap {
        background-color: #fff;
        border-radius: 20px;
        padding: 10% 10% 20% 10%;
        margin-bottom: 30px;
    }

    .hajimetebako-about__list-item-header-text-wrap {
        text-align: center;
        color: var(--accent-color);
        margin-bottom: 30px;
    }

    .hajimetebako-about__list-item-title {
        font-size: 4.1vw;
        font-weight: bold;
    }

    .hajimetebako-about__list-item-img-wrap {
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 5%;
    }

    .swiper-pagination-bullet {
        background-color: var(--accent-color);
    }

    .hajimetebako-about__container {
        position: relative;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 50px;
        margin: auto;
        width: 50px;
    }

    .swiper-button-prev::after {
        background-image: url(../images/swiper-arrow.png);
        transform: translateX(-50%);
    }

    .swiper-button-next::after {
        background-image: url(../images/swiper-arrow.png);
        transform: translateX(50%) rotate(180deg);
    }

}