/* ==========================================================================
   スマホ以外（画面横幅768px以上）のときに適用するスタイル
   ========================================================================== */
@media screen and (min-width: 768px) {

    /* JavaScriptが生成したカスタムリストを、PC表示では完全に非表示にする */
    .custom-select-wrapper .custom-select-trigger,
    .custom-select-wrapper .custom-options {
        display: none !important;
    }

    /* ラッパーの余計な位置固定をリセット */
    .custom-select-wrapper {
        position: static !important;
        display: inline !important;
    }

    /* ドロップダウンリスト（セレクトボックス）の横幅・余白・デザインの調整 */
    .searchandfilter select {
        /* 元の矢印アイコンを消去 */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;

        /* 文字配置の設定 */
        text-align: left !important;
        text-align-last: left !important;
        direction: ltr !important;

        /* 基本デザイン */
        padding: 10px 35px 10px 12px !important; /* 右側に矢印用の余白を確保 */
        font-size: 15px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        min-width: 220px !important;
        max-width: 100% !important;
    }

    /* ドロップダウンの中の選択肢（option）をすべて左寄せにする */
    .searchandfilter select option {
        text-align: left !important;
        direction: ltr !important;
    }

    /* 親カテゴリー（メーカー）を太文字にする */
    .searchandfilter select option.level-0 {
        font-weight: bold !important;
        color: #333 !important; 
        background-color: #dcdcdc !important; /* 親だとわかりやすいように背景を薄いグレーに */
    }

    /* 子カテゴリー（車種）は通常の太さ＋少し右にズラして見やすくする */
    .searchandfilter select option.level-1 {
        font-weight: normal !important;
        padding-left: 20px !important; /* 左側に隙間をあけて1段下げる */
        background-color: #fff !important;
    }

    /* 価格帯のドロップダウン（iPhone・通常共通対応版） */
    .searchandfilter select#ofpost_tag {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: #ffffff !important;
        color: #333333 !important;
    }

    /* 展開した時の選択肢リストおよび強制表示 */
    .searchandfilter select#ofpost_tag option,
    .searchandfilter select#ofpost_tag option.hide,
    .searchandfilter select#ofpost_tag option.empty {
        display: block !important;
        background-color: #ffffff !important;
        color: #333333 !important;
    }

    /* 検索フォーム自体の配置は全体のデザインに合わせる */
    .searchandfilter {
        display: flex;
        flex-wrap: wrap;
        gap: 15px; 
        align-items: flex-end;
        list-style: none !important;
        padding: 15px 0;
    }

    .searchandfilter li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }


     /* ボタン部分 */
    .custom-select-trigger {
        position: relative;
        display: block !important;
        text-align: left !important;
        padding: 14px 40px 14px 15px !important;
        font-size: 16px !important;
        color: #333 !important;
        background: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 6px;
        cursor: pointer;
        box-sizing: border-box;
        font-weight: bold;
    }

    /* 右側の矢印アイコン */
    .custom-select-trigger:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        right: 15px;
        top: 50%;
        margin-top: -3px;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #666 transparent transparent transparent;
        transition: transform 0.3s;
    }

    .custom-select-wrapper.open .custom-select-trigger:after {
        transform: rotate(180deg);
    }    

    /* 検索ボタンの見た目と余白の調整 */
    .searchandfilter input[type="submit"] {
        padding: 8px 20px !important;
        font-size: 1em !important;
        font-weight: bold !important;
        background-color: #31538f !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
        white-space: nowrap !important; /* 文字が改行されるのを防ぐ */
    }

    /* 検索ボタンにマウスを乗せたときの効果 */
    .searchandfilter input[type="submit"]:hover {
        opacity: 0.8 !important;
    }

    /* IE向け（念のための非表示設定） */
    .searchandfilter select::-ms-expand {
        display: none !important;
    }

}

/* ==========================================================================
   スマートフォン表示（画面横幅767px以下）のときだけ適用するスタイル
   ========================================================================== */
@media screen and (max-width: 767px) {
    
    /* 1. スマホ時のみ元のselectタグを完全に非表示にする */
    .searchandfilter select.postform {
        display: none !important;
    }

    /* 2. カスタムプルダウン全体の枠 */
    .custom-select-wrapper {
        position: relative;
        user-select: none;
        width: 100%;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    /* 3. スマホ用のボタン部分 */
    .custom-select-trigger {
        position: relative;
        display: block !important;
        text-align: left !important;
        padding: 14px 40px 14px 15px !important;
        font-size: 16px !important;
        color: #333 !important;
        background: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 6px;
        cursor: pointer;
        box-sizing: border-box;
        font-weight: bold;
    }

    /* 右側の矢印アイコン */
    .custom-select-trigger:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        right: 15px;
        top: 50%;
        margin-top: -3px;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #666 transparent transparent transparent;
        transition: transform 0.3s;
    }

    .custom-select-wrapper.open .custom-select-trigger:after {
        transform: rotate(180deg);
    }

    /* 4. 選択肢（オプション）のリストの枠 */
    .custom-options {
        position: absolute;
        display: block;
        top: 100%;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 999;
        max-height: 280px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.2s ease;
        padding: 5px 0;
        box-sizing: border-box;
    }

    .custom-select-wrapper.open .custom-options {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

  
    /* 5. 各選択肢 */
    .custom-option {
        position: relative;
        display: block !important;
        text-align: left !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        color: #333 !important;
        cursor: pointer;
        transition: background 0.15s;
        border-bottom: none !important;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    /* メーカー名（トヨタ・ホンダなど）の少し太字化 */
    .custom-option.level-0 {
        font-weight: bold !important;
        color: #333 !important; 
        background-color: #dcdcdc !important;
    }

    #ofpost_tag option {
    background-color: #ffffff !important;
    color: #333333 !important;
    }

    /* 車種名（インデントを下げて見やすく） */
    .custom-option.level-1 {
        padding-left: 35px !important;
    }

    /* 価格帯のドロップダウンの背景色を白にする */
    .searchandfilter select#ofpost_tag {
        background-color: #ffffff !important;
        color: #333333 !important;
    }

    /* 展開した時の選択肢リストも白にする */
    .searchandfilter select#ofpost_tag option {
        background-color: #ffffff !important;
        color: #333333 !important;
    }

    /* 検索ボタンの見た目と余白の調整 */
    .searchandfilter input[type="submit"] {
        padding: 15px 0px !important;
        font-size: 1em !important;
        background-color: #31538f !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        width: 100%;        
        font-weight: bold;
    }

    /* 選択中、または指が触れているときの色 */
    .custom-option:active,
    .custom-option.selected {
        background: #e6f7ff !important;
        color: #0050b3 !important;
    }
}