.ja-kurabu {
    --ja-kurabu-accent: #155e75;
    --ja-kurabu-border: #dce3e8;
    --ja-kurabu-muted: #52616b;
    margin-block: 1.25rem;
    overflow-wrap: anywhere;
    scroll-margin-top: 6rem;
}
.ja-kurabu *, .ja-kurabu *::before, .ja-kurabu *::after { box-sizing: border-box; }
.ja-kurabu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.ja-kurabu__card { min-width: 0; overflow: hidden; border: 1px solid var(--ja-kurabu-border); border-radius: .65rem; background: #fff; }
.ja-kurabu__media { aspect-ratio: 16 / 9; background: #f3f6f8; padding: .4rem; }
.ja-kurabu__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ja-kurabu__body { padding: 1.25rem; }
.ja-kurabu .ja-kurabu__title { margin: 0 0 .85rem; font-size: 1.25rem; line-height: 1.35; }
.ja-kurabu__description { white-space: pre-line; line-height: 1.6; }
.ja-kurabu__description img { max-width: 100%; height: auto; }
.ja-kurabu__description > :first-child { margin-top: 0; }
.ja-kurabu__description > :last-child { margin-bottom: 0; }
.ja-kurabu__facts, .ja-kurabu__hours { margin: 0; }
.ja-kurabu__facts { margin-top: 1rem; }
.ja-kurabu__facts > div, .ja-kurabu__hours > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; padding-block: .25rem; }
.ja-kurabu__facts dt, .ja-kurabu__hours dt { font-weight: 600; }
.ja-kurabu__facts dd, .ja-kurabu__hours dd { margin: 0; }
.ja-kurabu__detail { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--ja-kurabu-border); }
.ja-kurabu__detail h4 { margin: 0 0 .5rem; font-size: 1rem; }
.ja-kurabu__detail p { margin: .25rem 0; }
.ja-kurabu__detail address { margin: 0; font-style: normal; }
.ja-kurabu__detail address span { display: block; }
.ja-kurabu .ja-kurabu__card a, .ja-kurabu .ja-kurabu__pagination a { color: var(--ja-kurabu-accent); text-underline-offset: .15em; }
.ja-kurabu a:focus-visible { outline: 3px solid var(--ja-kurabu-accent); outline-offset: 3px; }
.ja-kurabu a.ja-kurabu__button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--ja-kurabu-accent); border-radius: .4rem; text-decoration: none; font-weight: 600; background: #fff; }
.ja-kurabu a.ja-kurabu__button:hover { background: #edf6f8; }
.ja-kurabu__pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.ja-kurabu__page { color: var(--ja-kurabu-muted); }
.ja-kurabu__notice { padding: 1rem 1.25rem; border-left: 4px solid var(--ja-kurabu-accent); background: #f3f6f8; }
@media (max-width: 420px) { .ja-kurabu__body { padding: 1rem; } }

/* Bootstrap 5.3 supplies layout, cards and controls; only media/calendar need additions. */
.ja-kurabu .ja-kurabu-tile-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ja-kurabu .ja-kurabu-detail-image { display: block; max-width: 100%; height: auto; max-height: 34rem; object-fit: contain; }
.ja-kurabu .ja-kurabu-calendar { table-layout: fixed; min-width: 42rem; }
.ja-kurabu .ja-kurabu-calendar td { height: 7rem; }
.ja-kurabu .ja-kurabu-description { overflow-x: auto; overflow-wrap: anywhere; }
.ja-kurabu .ja-kurabu-description img { max-width: 100%; height: auto; }
.ja-kurabu [id^="detail-kurabu-event-"], .ja-kurabu [id^="kurabu-calendar-"] { scroll-margin-top: 5rem; }