@charset "UTF-8";

@media print, screen and (max-width: 480px) {
    .refine {
        width: 100%;
        clear: both;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 80px;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    /**
     * ヘッダー全体
     */
    .l-refine-header {
        width: 100%;
        padding: 12px 3%;
        background-color: #fff;
        box-shadow: 0px 3px 5px -3px #b8b8b8;
    }

    /**
     * ヘッダー内部
     */
    .l-refine-header_inner {
        height: 37px;
        position: relative;
    }
    
    /**
     * ヘッダー閉じるボタン
     */
    .refine-header_close {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .refine-header_close a:hover {
        color: #1F3641;
    }
    
    /**
     * ヘッダータイトル
     */
    .refine-header_tittle {
        margin: auto;
        color: #0055B8;
        font-size: 18px;
    }
    
    /**
     * 大区分
     */
    .refine h2 {
        font-size: 16px;
        color: #1F3641
    }
    
    /**
     * 大区分の要素数
     */
    .refine h2 span {
        font-size: 16px;
        font-weight: bold;
        margin-left: auto;
    }
    
    /**
     * 中区分
     */
    .refine p {
        font-weight: bold;
        margin-top: 10px;
    }
    
    /**
     * 区切り線
     */
    .refine .no-wrapper-part,
    .refine .wrapper-part {
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #dedcd7;
        padding-top: 5px;
        margin: 20px 0 0 0;
    }
    .refine .wrapper-part + .wrapper-part {
        margin-top: 0;
    }
    
    /**
     * チェックボックス
     */
    .refine .checkbox label {
        position: relative;
        padding-left: 22px;
    }
    
    .refine label:hover {
        color: inherit;
    }
    
    .refine label + label {
        
        margin-left: 10px;
    }
    
    .refine input[type="checkbox"] {
        appearance: none;
        background: none;
        border: none;
        border-radius: 0;
        cursor: pointer;
        height: auto;
        margin: 0;
        outline: none;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: auto;
    }
    .refine input[type="checkbox"]::before,
    .refine input[type="checkbox"]::after {
        box-shadow: none;
        content: "";
        display: block;
        position: absolute;
    }
    .refine input[type="checkbox"]::before {
        background-color: #fff;
        border-radius: 2px;
        border: 1px solid #999;
        height: 14px;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
    }
    .refine input[type="checkbox"]::after {
        background: none;
        border-bottom: 2px solid #fff;
        border-left: 2px solid #fff;
        height: 4px;
        left: 3px;
        opacity: 0;
        opacity: 1;
        top: -5px;
        transform: rotate(-45deg);
        transform-origin: center;
        width: 8px;
    }
    .refine input[type="checkbox"]:checked::before {
        background-color: #0055b8;
        border: 1px solid #0055b8;
    }
    .refine input[type="checkbox"]:checked::after {
        opacity: 1;
    }
    /* セレクト */
    .refine .select {
        align-items: center;
        display: flex;
    }
    .refine .select label {
        position: relative;
        width: 100%;
    }
    .refine .select label::after {
        border-bottom: solid 3px #0055B8;
        border-right: solid 3px #0055B8;
        content: '';
        height: 7px;
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-70%) rotate(45deg);
        width: 7px;
    }
    .refine .select span {
        margin: 0 10px;
    }
    .refine .select label select {
        background-color: #fff;
        border: solid 1px #dedcd7;
        border-radius: 3px;
        box-sizing: border-box;
        box-shadow: 0px 0px 1px 0px rgba(0,0,0,.03);
        color: inherit;
        font-size: 12px;
        height: auto;
        line-height: 1.5;
        margin-bottom: 0;
        padding: 8px 10px;
        width: 100%;
        -webkit-appearance: none;
    }
    
    /* フリーテキスト */
    .refine .input {
        position: relative;
        width: 100%;
        border: 1px solid #dedcd7;
        font-size: 12px;
        height: auto;
        padding: 8px;
    }
    
    /* トグルスイッチ */
    .refine .toggle-switch {
        align-items: center;
        display: flex;
    }
    .refine .toggle-switch label {
        position: relative;
        width: 100%;
        height: auto;
        line-height: 40px;
        border: 1px solid #dedcd7;
        font-size: 12px;
        text-align: center;
    }
    .refine .toggle-switch input[type="radio"] {
        display: none;
    }
    .refine .toggle-switch input[type="radio"] + label {
        background-color: #fff;
        color: inherit;
    }
    .refine .toggle-switch input[type="radio"]:checked + label {
        background-color: #0055B8;
        color: #fff;
    }
    
    .refine_tittle_blue {
        color: #0055B8 !important;
    }
    
    .refine_item_box {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* 背景色、文字色統一 */
    .refine_item_round {
        position: relative;
        background-color: #ecf5fc;
        border-radius: 20px;
        color: #0055B8;
        display: flex;
        text-align: center;
        padding: 10px 10px 10px 10px;
        margin: 3px
    }
    .refine_item_round:has(.delBtn) {
        padding: 10px 30px 10px 10px;
    }
    
    /* 削除ボタン */
    .refine_item_round .delBtn::after {
        position: absolute;
        display: inline-block;
        top: 0;
        bottom: 0;
        margin:auto 0;
        margin-left: 7px;
        content: '×';
        font-size: 13px;
        line-height: 13px;
        background-color: #0055B8;
        color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }
    
    /* アコーディオンのスタイル適用で崩れる部分を修正 */
    .refine_item_round a {
        padding: 0px;
        line-height: normal;
        align-items: center;
    }    
    .refine_item_round a::after {
        content: none;
    }
    
    /**
     * フッターのボタン
     * 形など
     */
    .refine_save_search_button,
    .refine_search_button {
        padding: 15px 15px 15px 15px;
        border-radius: 4px;
        font-size: 15px;
    }
    
    /**
     * 検索条件を保存ボタン
     */
    .refine_save_search_button {
        border-color: #0055B8;
        color: #0055B8;
    }
    
    /**
     * 検索条件を保存ボタン押下後に出現するモーダル
     */
    .blue_mini_modal_shape {
        bottom: 65px;
        top: auto;
        left: auto;
    }
    
    /**
     * 検索ボタン
     */
    .refine_search_button {
        background-color: #0055B8;
        color: inherit;
        font-weight: 900;
    }
    
    .refine-footer {
        padding: 15px 10px 15px 10px;
        background-color: #fff;
        box-shadow: 0px 0px 10px -3px #b8b8b8;
    }
    
    .refine-footer div {
        margin: 10px 0 10px 0;
    }
}