/* ==============================
SP絞り込み：選択中の条件表示
============================== */

/* 選択済み条件のまとまり */
#Search_filter .sp-selected-filter-area {
    box-sizing: border-box;
    width: 100%;
    margin: -4px 0 18px;
    padding: 12px;
    border-left: 4px solid #a09284;
    background-color: #f3f0ed;
}

/* 「選択中の絞り込み条件」見出し */
#Search_filter .sp-selected-filter-title {
    margin: 0 0 9px;
    padding: 0;
    color: #333;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
}

/* 選択済みタグの並び */
#Search_filter .sp-selected-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
}

/* ブラックなどの選択済みタグ */
#Search_filter .sp-selected-filter-item {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background-color: #333;
    color: #fff;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.4;
}

/* 適用済みを示すチェックマーク */
#Search_filter .sp-selected-filter-item::before {
    content: "\2713";
    margin-right: 5px;
    color: #fff;
    font-weight: bold;
}


/* ==============================
SP絞り込み：項目選択状態
============================== */

/* 選択中はlabelの背景色を黒にする */
#Search_filter .MdlSearch_item.g_check.is-selected label {
    background-color: #333 !important;
    color: #fff !important;
}

/* 中のテキスト色を白にする */
#Search_filter .MdlSearch_item.g_check.is-selected label span {
    color: #fff !important;
}

/* 選択中チェックマーク */
#Search_filter .MdlSearch_item.g_check.is-selected label span::before {
    content: "\2713";
    margin-right: 0.3em;
    color: #fff;
    font-weight: bold;
}


/* ==============================
SP絞り込み：解除ボタン
============================== */

/* 既存の背景色を打ち消す */
#Search_filter .remove_filter {
    margin: 0 0 16px;
    background: none !important;
    background-color: transparent !important;
    color: #fff;
    text-align: center;
}

/* 解除ボタン本体 */
#Search_filter .remove_filter a {
    display: inline-block;
    box-sizing: border-box;
    min-width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: #1f1f1f;
    color: #fff !important;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

/* 解除ボタン押下時 */
#Search_filter .remove_filter a:active {
    opacity: 0.8;
}

/* 既存の選択条件テキストが残った場合は非表示 */
#Search_filter .remove_filter .select_filter {
    display: none !important;
}


/* ==============================
SP絞り込み：送信ボタン
============================== */

/* ボタンエリア */
#Search_filter .sp-filter-submit-area {
    box-sizing: border-box;
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
    border-top: none;
    text-align: center;
}

/* 絞り込みボタン */
#Search_filter .sp-filter-submit-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 70%;
    max-width: 280px;
    min-height: 44px;
    margin: 0 auto;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    background-color: #1f1f1f;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        opacity 0.2s ease,
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

/* 右側の矢印 */
#Search_filter .sp-filter-submit-button::after {
    content: "\203A" !important;
    display: block !important;
    position: absolute;
    top: 50%;
    right: 15px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 2rem;
    font-weight: normal;
    line-height: 1;
    transform: translateY(-53%);
    pointer-events: none;
}

/* タップ時 */
#Search_filter .sp-filter-submit-button:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* ホバー可能な端末 */
#Search_filter .sp-filter-submit-button:hover {
    opacity: 0.88;
}

/* 未選択時 */
#Search_filter .sp-filter-submit-button.is-disabled,
#Search_filter .sp-filter-submit-button:disabled {
    background-color: #1f1f1f !important;
    box-shadow: none;
    color: #fff !important;
    opacity: 0.45;
    cursor: default;
    transform: none;
}

/* 未選択時は矢印も薄くする */
#Search_filter .sp-filter-submit-button.is-disabled::after,
#Search_filter .sp-filter-submit-button:disabled::after {
    opacity: 0.7;
}