/* ================================
   グリッドレイアウト設定（地域選択リスト）
   ================================ */
.p-region-level1__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1em;
    list-style: none;
    padding: 0;
}

.p-region-level1__list li {
    text-align: center;
    padding: 1em;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 10px;
}

/* ================================
   イベントカードのスタイル
   ================================ */
.p-region-level2__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2em;
}

.p-region-level2__card {
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: 1.2em;
}
/* イベントごとに細い区切り線を追加 */
.p-region-events__card {
    border-bottom: 1px solid #ccc;  /* 細い区切り線 */
    padding-bottom: 10px;  /* 下部の余白 */
    margin-bottom: 10px;   /* 各イベントの間隔 */
	margin-top: 0;         /* 上部余白をゼロに */
}

/* 最後のイベント項目に区切り線を表示しない */
/*
.p-region-events__card:last-child {
    border-bottom: none;
}
*/

/* ================================
   イベントフィルタリンクのスタイル
   ================================ */
.p-region-events__filters a {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: #f1f1f1;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
}

.p-region-events__filters a:hover {
    background-color: #e0e0e0;
}

/* ================================
   ボタン（イベントフィルタ）のスタイル
   ================================ */
.c-btn--thin {
    padding: 0.6em 1em;
    font-size: 1rem;
    border-radius: 5px;
    text-decoration: none;
    background-color: #0073e6;
    color: #fff;
    transition: background-color 0.3s;
}

.c-btn--thin:hover {
    background-color: #005bb5;
}

/* ================================
   レスポンシブ対応（グリッドのレスポンシブ調整）
   ================================ */
@media (max-width: 768px) {
    .p-region-level1__list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .p-region-level2__cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .p-region-level2__cards {
        gap: 0.8em; /* スペースを少し小さく */
    }

    .p-region-events__filters a {
        font-size: 0.9rem; /* ボタンの文字サイズを小さくする */
    }

}
@media (max-width: 480px) {
    .p-region-level1__list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* より小さいサイズに対応 */
    }

    .p-region-level2__cards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* より小さいサイズに対応 */
    }
}