/* 関西版絞り込みページ専用CSS */

/* 都道府県アコーディオン */
.prefecture-accordion,
.station-accordion {
    width: 100%;
}

.prefecture-section {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.prefecture-row,
.line-row {
    display: flex;
    align-items: center;
    padding: 10px;
    background: #f9f9f9;
    cursor: pointer;
    position: relative;
}

.prefecture-row:hover,
.line-row:hover {
    background: #f0f0f0;
}

.prefecture-checkbox,
.line-checkbox {
    margin-right: 10px;
}

.prefecture-row label,
.line-row label {
    font-size: 15px;
    color: #6782ae;
    font-weight: 600;
    margin-right: 16px;
    cursor: pointer;
}

.prefecture-label {
    font-size: 15px;
    color: #6782ae;
    font-weight: 600;
    margin-right: auto;
}

.toggle-btn {
    color: #0070f3;
    cursor: pointer;
    margin-left: auto;
    font-size: 14px;
    font-weight: bold;
    user-select: none;
}

.toggle-btn:hover {
    color: #0056b3;
}

/* エリアリスト */
.area-list,
.station-list {
    display: none;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}

.area-list.active,
.station-list.active {
    display: block;
}

/* エリアグループ */
.area-group {
    margin-bottom: 20px;
}

.area-group-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.area-group-title input {
    margin-right: 8px;
}

/* チェックボックスリスト */
.area-group .checkbox-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-left: 25px;
    padding: 10px 0;
}

/* 駅リスト用のチェックボックスリスト */
.station-list .checkbox-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-left: 25px;
    padding: 10px 0;
}

.checkbox-list label {
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-list label:hover {
    color: #6782ae;
}

.checkbox-list input[type="checkbox"] {
    margin-right: 5px;
}

/* 路線グループ */
.line-group {
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.line-group:last-child {
    border-bottom: none;
}

/* グループチェックボックス */
.group-checkbox {
    cursor: pointer;
}

/* 子チェックボックス */
.child-checkbox {
    cursor: pointer;
}

/* アコーディオンが開いている時のトグルボタン */
.toggle-btn.active {
    color: #ff6b6b;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .area-group .checkbox-list,
    .station-list .checkbox-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prefecture-row label,
    .line-row label {
        font-size: 14px;
    }
    
    .checkbox-list label {
        font-size: 12px;
    }
}



/* 既存スタイルとの調整 */
.filter-section .prefecture-accordion,
.filter-section .station-accordion {
    margin-top: 10px;
}

/* section-contentの幅を100%に */
.section-content {
    width: 100%;
}

/* チェックボックスのスタイル統一 */
.prefecture-accordion input[type="checkbox"],
.station-accordion input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ホバーエフェクト */
.area-group-title:hover {
    color: #6782ae;
}

/* 選択状態の強調 */
.prefecture-checkbox:checked + label,
.line-checkbox:checked + label {
    color: #4a5eb8;
    font-weight: 700;
}

/* アニメーション */
.area-list,
.station-list {
    transition: all 0.3s ease-in-out;
}

/* スクロールバー */
.area-list {
    max-height: 400px;
    overflow-y: auto;
}

.station-list {
    max-height: 300px;
    overflow-y: auto;
}

/* カスタムスクロールバー */
.area-list::-webkit-scrollbar,
.station-list::-webkit-scrollbar {
    width: 8px;
}

.area-list::-webkit-scrollbar-track,
.station-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.area-list::-webkit-scrollbar-thumb,
.station-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.area-list::-webkit-scrollbar-thumb:hover,
.station-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}