/* 全体の余白を持たせて、詰まって見えないように調整 */
    .form-group {
        margin-bottom: 20px;
    }

    /* 拠点や世帯、駅距離などのフォーム要素のスタイル */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        
    }

    /* 各ラジオボタンのラベルをボタン風に（デフォルトをグレーに設定） */
    .btn-secondary {
        padding: 8px 12px;
        font-size: 1rem;
        
        border: 1px solid #ced4da;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .btn-check:checked + .btn-secondary {
        background-color: #007bff;  /* チェックされた状態は青 */
        color: white;
        border-color: #007bff;
    }

    .btn-check:not(:checked) + .btn-secondary:hover {
        background-color: #e2e6ea;
        color: black;
    }

    /* こだわり条件用のスタイル */
    .kodawari-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;  /* こだわり条件のボタンの間隔 */
        margin-bottom: 20px;
    }

    .kodawari-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
        background-color: #f8f9fa;  /* デフォルトの背景はライトグレー */
        border: 1px solid #007bff;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .btn-check:checked + .kodawari-btn {
        background-color: #007bff;  /* チェックされた状態は青 */
        color: white;
    }

    .btn-check:not(:checked) + .kodawari-btn:hover {
        background-color: #e2e6ea;
        color: black;
    }

    /* 検索ボタンの余白とサイズを調整 */
    .btn-primary {
        padding: 10px 20px;
        font-size: 1.1rem;
        margin-top: 15px;
    }