@charset "UTF-8";

/*＝＝画面の大きさ＝＝*/
/* SP       ～519px
   tab 520px～959px
   PC  960px～      */

/* ＝＝【shop】＝＝ */

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

.shop .shop_inner {
    max-width: 900px;
    padding: 0 var(--side-gutter);
}

.shop .shop_info {
    margin-bottom: var(--section-gutter);
}

.shop .shop_info dl {
    padding: 0 var(--side-gutter);
    margin-bottom: calc(var(--gutter-base)*2);
}

/* ↓ 最終行は下に余白を取らない */
.shop .shop_info dl:last-child {
    margin-bottom: 0;
}

/* ↓ 「営業時間」など項目名に色と下線をつける */
.shop .shop_info dl dt {
    padding: 5px;
    border-bottom: 1px dotted var(--text-color);
    background-color: var(--footer-color);
}

.shop .shop_info dl dd {
    padding: 5px;
    color: var(--main-color);
}

/* ＝＝【shop】＝＝PC版 */

@media screen and (min-width:960px) {
    .shop {
        margin-bottom: var(--section-gutter-pc);
    }
}

/* ＝＝【shop情報】＝＝Tab版・PC版 */

@media screen and (min-width:520px) {

    /* ↓ 項目と内容を横並びに変更 */
    .shop .shop_info dl {
        display: flex;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .shop .shop_info dl dt {
        width: 40%;
        /* ↑ 「所在地」など項目の幅 */
        background-color: #ffffff;
        /* ↑ PCでは「営業時間」など項目名の色を消す */
    }

    .shop .shop_info dl dd {
        width: 60%;
        /* ↑ 項目内容の幅 */
        border-bottom: 1px dotted var(--text-color);
        /* ↑ PCでは項目内容にも下線をつける */
    }
}