@charset "UTF-8";

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

/* ＝＝【cafe】＝＝ */

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

.cafe .cafe_inner {
    padding: 0 var(--side-gutter);
}

.cafe .cafe_text {
    margin-bottom: var(--contents-gutter);
}

/* ＝＝【cafe】＝＝PC版 */

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

    /* ↓ PC画面では横2列表示にする */
    .cafe .cafe_img {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
        align-items: center;
        column-gap: calc(var(--gutter-base)*4);
    }

    .cafe .cafe_text {
        padding: 0 calc(var(--gutter-base)*3) 0;
    }

    /* ↓ PC画面ではCafe画像は右側2マス分の場所に表示 */
    .cafe .cafe_img picture {
        grid-column: 2/3;
        grid-row: 1/2;
        margin-bottom: 0;
    }
}


/* ＝＝【cafeコンサート】＝＝ */

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

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

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

.concert dl dd {
    border-bottom: 2px dotted var(--main-color);
    padding-bottom: var(--gutter-base);
}

/* ＝＝【cafeコンサート】＝＝Tab版・PC版 */

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

    /* ↓ 日付とトピックを横並びに変更 */
    .concert dl {
        display: flex;
        border-bottom: 2px dotted var(--main-color);
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .concert dl dt {
        width: 45%;
        /* ↑ 日付の幅 */
    }

    .concert dl dd {
        width: 55%;
        /* ↑ コンサート内容の幅 */
        border-bottom: none;
    }
}