@charset "utf-8";

/*====================
スマホを基本設計にする
- 〜599px：スマートフォン
- 600px〜959px：タブレット
- 960px〜：PC
====================*/

/* 〜479px：SP
------------------------------ */
#shop-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左揃えにする */
    align-items: flex-start; /* 上端を揃える */
    gap: 16px;
}
#shop-container a {
    display: block;
    width: calc(50% - 16px);
    text-decoration: none;
}
.shop-wrapper {
    padding: 5px;
    background-color: white;
    transition: opacity 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shop-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.shop-wrapper h2 {
    padding: 5px;
    font-size: 1em;
    font-family: sans-serif;
    color: #000;
    text-align: center;
}
.shop-wrapper:hover {
    opacity: 0.7;
}

/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
}

/* 960px〜：PC
------------------------------ */
@media screen and (min-width:960px) {
    #shop-container a {
        width: calc(33.333% - 16px);
    }
}