/**
 * 採寸予約マップスタイル
 * version 1.12.34
 * 修正内容: 店舗一覧の最大幅を900pxに制限し、カードのレイアウトを最適化。
 */
:root {
    --bg-canvas: #f8fafc;
    --c-hokkaido: #7fb1d3;
    --c-tohoku: #9ed4c6;
    --c-kanto: #8ec350;
    --c-chubu: #abd16d;
    --c-kinki: #f9e264;
    --c-chugoku: #c9b13c;
    --c-shikoku: #f7a02c;
    --c-kyushu: #e55a15;
}

/* --- 基本レイアウト --- */

.ur-canvas-frame {
    position: relative;
    background: var(--bg-canvas);
    border: 1px solid #d1d9e0;
    border-radius: 12px 12px 0 0;
    height: 550px;
    width: 100%;
    overflow: hidden;
}

.ur-map-layout {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.ur-map-container {
    flex: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ur-japan-map-svg {
    width: 100%;
    height: 100%;
    max-height: 500px;
}

/* --- サイドメニュー --- */
.ur-region-side-menu {
    width: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px !important;
    background: #fff !important;
    border-left: 1px solid #d1d9e0 !important;
}

.ur-side-btn {
    appearance: none !important;
    background: #fdfdfd !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-align: left !important;
    border-radius: 4px !important;
    color: #444 !important;
}

.ur-side-btn:hover,
.ur-side-btn.active {
    background: #f1f5f9 !important;
    transform: translateX(-3px);
}

/* --- SVG マップ --- */
.ur-region-path {
    stroke: #fff;
    stroke-width: 4;
    cursor: pointer;
    transition: 0.2s;
}

.ur-region-path:hover {
    opacity: 0.7;
}

.hokkaido {
    fill: var(--c-hokkaido);
}

.tohoku {
    fill: var(--c-tohoku);
}

.kanto {
    fill: var(--c-kanto);
}

.chubu {
    fill: var(--c-chubu);
}

.kinki {
    fill: var(--c-kinki);
}

.chugoku {
    fill: var(--c-chugoku);
}

.shikoku {
    fill: var(--c-shikoku);
}

.kyushu {
    fill: var(--c-kyushu);
}

.okinawa {
    fill: var(--c-kyushu);
}

/* --- 都道府県選択エリア --- */
.ur-selection-display {
    display: block !important;
    background: #fff !important;
    border: 1px solid #d1d9e0 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 25px !important;
    min-height: 150px !important;
}

.ur-selection-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 15px;
    background: #f1f5f9;
    border-radius: 8px;
    text-align: center;
}

.ur-selection-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
}

.ur-pref-btn {
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 15px 5px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-align: center !important;
    color: #333 !important;
}

.ur-pref-btn:hover {
    background: #1e293b !important;
    color: #fff !important;
}

/* --- 店舗一覧エリア（900px制限） --- */
.ur-shop-list-display {
    margin: 40px auto 0;
    max-width: 900px;
    /* 店舗一覧全体の幅を900pxに制限 */
    width: 100%;
    animation: urFadeIn 0.6s ease both;
}

.ur-shop-list-title {
    font-size: 1.4rem;
    margin-bottom: 25px;
    padding-left: 15px;
    font-weight: bold;
    text-align: center;
    /* タイトルも中央へ */
}

/* 2列のグリッドレイアウト設定 */
.ur-shop-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 20px 0;
}

.ur-card-body {
    width: 100%;
    text-align: left;
    margin-bottom: 25px;
    min-height: 80px;
    /* 高さを揃えるための最低値 */
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
    .ur-shop-grid-container {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .ur-custom-shop-card {
        max-width: 100%;
    }

    .ur-canvas-frame {
        height: auto;
    }

    .ur-map-layout {
        flex-direction: column !important;
    }

    .ur-region-side-menu {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        border-left: none !important;
        border-top: 1px solid #d1d9e0 !important;
    }

    .ur-side-btn {
        flex: 1 1 calc(50% - 10px);
    }
}

@keyframes urFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.swell-block-column {
    box-shadow: 4px 2px 15px -5px #777777;
    border-radius: 10px;
    padding: 1em !important;
}

.swell-block-columns .swell-block-column {
    margin: 0 0 0 var(--swl-clmn-mrgn--x);
    padding: var(--swl-clmn-pddng);
    width: calc(var(--clmn-w) - var(--swl-clmn-mrgn--x));
}

/* SWELLの店舗リストの順序を強制的にDOMの並び順にする */
.swell-block-columns__inner {
    display: flex !important;
    flex-direction: row !important; /* 横並びの向きを左から右へ固定 */
    flex-wrap: wrap !important;
}

.swell-block-column {
    order: initial !important; /* CSSによる並び順をリセット */
}