/* 色は画像のトーンに寄せた変数。必要に応じて微調整 */
:root {
    --spot-blue: #2F6CF5;
    --pill-bg: #E8EAEE;
    --pill-active: #FF7A64;
    /* オレンジ */
    --pill-text: #111;
    --pill-active-text: #fff;
    --select-green: #46E08A;
}

#spot {
    background: var(--spot-blue);
}

#spot .title h2 {
    color: #fff;
}

.spot_tabs,
.spot_subtabs {
    display: grid;
    gap: 12px;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    margin: 16px 0;
    border-radius: 9999px;
}

.tier-tab,
.region-tab {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 14px 28px;
    font-weight: 700;
    font-size: 18px;
    border-radius: 9999px;
    background: #b9c6e14f;
    color: var(--pill-text);
    transition: transform .1s ease, background .2s ease;
    width: 100%;
}

.tier-tab.is-active,
.region-tab.is-active {
    background: var(--pill-active);
    color: var(--pill-active-text);
    width: 100%;
}

.tier-tab:active,
.region-tab:active {
    transform: translateY(1px);
}

/* B1選択時のみ見せる */
.spot_subtabs {
    display: flex;
}

.spot_subtabs.is-hidden {
    display: none;
}

/* セレクトは画像のグリーンピルに寄せる */
.spot_select {
    display: flex;
    justify-content: center;
    margin: 18px 0 8px;
}

#clubSelector {
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 9999px;
    border: 0;
    outline: 0;
    background: var(--select-green);
    color: #0b1630;
}

/* コンテンツの表示切替 */
.club-content[hidden] {
    display: none !important;
}

/* 以降は既存の .spot_scroll / .spot_list などのスタイルをそのまま使用 */

.map{
    width: 100%;
    height: 300px;
}


/* 見た目は最低限。hidden 制御が肝 */
.spot_selects { margin-top: 12px; }
.spot_select[hidden] { display: none !important; }
.club-content[hidden] { display: none !important; }

/* スクリーンリーダー用 */
.sr-only {
  position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}