@charset "UTF-8";

/*
ブレイクポイント
SP 〜519px
tab 520px ~ 959px (min-width:520px)
pc 960px~ (min-width:960px)
*/

/*======================
shop
======================*/
.shop {
    margin: var(--section-gutter) 0;
    padding: 0 var(--contents-side-gutter);
}

.shop .shop_box {
    margin: var(--section-gutter) 0;
}

.shop dl {
    margin: 0 0 var(--section-gutter);
}

.shop dl dt {
    padding: 0.5em 0 0 0;
}

.shop dl dd {
    border-bottom: 1px solid var(--accent-color);
    padding: 0.5em 0 0.5em 1em;
}

.shop .shop_left {
    max-width: 400px;
    margin: 0 auto;
}

/* ===============ここからmin-width:520px=============== */
@media screen and (min-width:520px) {}

/* ===============ここまでmin-width:520px=============== */

/* ===============ここからmin-width:960px=============== */
@media screen and (min-width:960px) {

    /*======================
    shop
    ======================*/
    .shop {
        margin-bottom: var(--section-gutter-pc);
        width: 80%;
        margin: 0 0 0 auto;
        padding: 0 10% 0 0;
    }

    .shop .shop_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }

    .shop dl {
        display: flex;
        flex-wrap: wrap;
        max-width: 600px;
    }

    .shop dl dt {
        border-bottom: 1px solid var(--accent-color);
        padding: 0.5em 0;
        width: 25%;
    }

    .shop dl dd {
        border-bottom: 1px solid var(--accent-color);
        padding: 0.5em 0;
        width: 75%;
    }

    .shop .shop_left {
        max-width: 500px;
    }
}

/* ===============ここまでmin-width:960px=============== */