/* 読み込み中グルグル */
#loading {
    text-align: center;
    display:none;
    top: 10px;
    height: 60px;
    width: 100%;
}

/* チェックボックスは非表示 */
input[type=checkbox] {
    display: none;
}
input[type=radio] {
    display: none;
}

/* テーブルのラベルスタイル一括指定 */
#joker_search_table label {
    display: inline-block;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 3px;
    margin-right: 3px;
}
.joker_td {
    border-style: none !important;
}
#element_wrapper label img {
    vertical-align: middle;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 0px;
}

/* レアリティアイコン */
#joker_search_table label.rarity_ssr_icon {
        background-image: url("https://appmedia.jp/wp-content/themes/appmedia/lib/joker/img/icon/rarity/ssr.png");
        width: 40px;
        height: 40px;
        cursor: pointer;
}
#joker_search_table label.rarity_kr_icon {
        background-image: url("https://appmedia.jp/wp-content/themes/appmedia/lib/joker/img/icon/rarity/kr.png");
        width: 40px;
        height: 40px;
        cursor: pointer;
}
#joker_search_table label.rarity_kyuukyoku_kr_icon {
        background-image: url("https://appmedia.jp/wp-content/themes/appmedia/lib/joker/img/icon/rarity/ultimate_kr.png");
        width: 40px;
        height: 40px;
        cursor: pointer;
}
#joker_search_table label.rarity_lg_icon {
        background-image: url("https://appmedia.jp/wp-content/themes/appmedia/lib/joker/img/icon/rarity/lg.png");
        width: 40px;
        height: 40px;
        cursor: pointer;
}
/* ここまで */

/* アイコンの大きさを一括で指定 */
#rarity_wrapper label, #element_wrapper label, #position_wrapper label {
    width: 40px;
    height: 40px;
    cursor: pointer;
}
#ability_wrapper label {
    width: 100px;
    height: 40px;
    font-size: 10px;
    text-align: center;
    text-align: center;
    vertical-align:top;
    cursor: pointer;
}

#element_wrapper2 label {
    width: 50px;
    height: 50px;
    cursor: pointer;
}
#ougi_wrapper label, #ability_wrapper2 label, #musou_type_wrapper label {
    display: inline-block;
    width: 230px;
    background: #8b0000;
    border-radius: 10px;
    padding: 8px;
    margin: 3px;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
}
#ability_wrapper2 label {
    width: 110px!important;
}

#magnification, #charge_time, #effect_time, #gauge, #use_cnt {
    height: 30px;
    width: 150px;
}

/* #ability_wrapper2 label {
    background: #f5f5f5;
    display: inline-block;
    width: 113px;
    border-radius: 10px;
    padding: 8px;
    margin: 3px;
    font-size: 11px;
    cursor: pointer;
} */
input[type="radio"]:checked + label {
    background: #155867!important;
    color: #fff;
}

/* スマホクエリ */
@media (max-width:414px){
    #rarity_wrapper label, #element_wrapper label, #element_wrapper2 label, #position_wrapper label {
        width: 45px !important;
        height: 45px !important;
    }
    #ability_wrapper label {
        width: 72px !important;
        height: 72px !important;
        font-size: 10px;
        text-align: center;
        vertical-align:top;
    }
    #ougi_wrapper label, #musou_type_wrapper label {
        width: 140px;
        font-size: 10px;
        letter-spacing: -0.12em;
    }
    #magnification, #charge_time, #effect_time, #gauge, #use_cnt  {
        height: 30px;
        width: 100px;
    }
    #ability_wrapper2 label {
        width: 87px!important;
    }
}

/* テキスト検索部分 */
#ability_text {
    text-align: center;
    width: 100%;
    height: 40px;
    text-indent: 10px;
    font-size: 14px;
    margin: 4px auto;
    display: inline-block;
    height: 32px;
    border: 1px solid #dde4e6;
    background: #FFFFFF;
}

/* ボタンまとめるラッパー */
#button_wrapper {
    text-align: center;
    margin-bottom: 30px;
}
/* 検索ボタン */
#search_button {
    /* border: 1px solid #ff6600; */
    border-bottom: none!important;
    background: #c12713;
    color: #fff;
    padding: 5px;
    width: 45%;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 5px;
    cursor: pointer;
}
#search_button2 {
    /* border: 1px solid #ff6600; */
    border-bottom: none!important;
    background: #c12713;
    color: #fff;
    padding: 5px;
    width: 80%;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 5px;
    cursor: pointer;
}
/* リセットボタン */
#reset_button {
    /* border: 1px solid #333333; */
    border-bottom: none!important;
    background: #3289ab;
    color: #fff;
    padding: 5px;
    width: 45%;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    margin-right: 5px;
    cursor: pointer;
}

/* アイコングレー */
.fil_gray {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* 検索ボタン */
.tool_button {
    width: 100%;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: solid 4px #627295;
    margin-bottom: 16px;
    display: inline-block;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    border-radius: 3px;
}
.tool_button:active {
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}

/* 全選択/全解除ボタンのwrapper */
.all_check_btn_wrapper {
    text-align: center;
}

/* 全選択ボタン */
.all_check_btn {
    width: 49%;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    padding: 7px;
    text-decoration: none;
    color: #FFF;
    background: #fd9535;/*背景色*/
    border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
}
.all_check_btn:active {
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}