/* ボタンまとめるラッパー */
#button_wrapper {
    text-align: center;
    margin-bottom: 10px;
}
#button_wrapper2 {
    text-align: center;
    margin-bottom: 10px;
    position: sticky;
    top: 0px;
    z-index: 1;
}
@media (max-width:414px){
    #container, #main {
      overflow: visible!important;
    }
    #button_wrapper2 {
        top: 0px;
    }
}
#button_wrapper2.fixed {
    position: fixed;
    top: 0;
}
/* 検索ボタン */
.search_button {
    border: 1px solid #bb5535;
    border-bottom: 3px solid #bb5535;
    background: #ed6d46;
    color: #fff;
    padding: 5px;
    width: 45%;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 5px;
    cursor: pointer;
}
/* リセットボタン */
.reset_button {
    border: 1px solid #c0c0c0;
    border-bottom: 3px solid #c0c0c0;
    background: #f5f5f5;
    padding: 5px;
    width: 45%;
    border-radius: 6px;
    font-size: 15px;
    margin-top: 10px;
    margin-right: 5px;
    cursor: pointer;
}

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

#utaware_search_tool td{
    padding: 4px 0;
}

/* 未選択時のグレースケール */
#type_wrapper label.fil_gray,
#category_wrapper label.fil_gray,
#element_wrapper label.fil_gray,
#item_wrapper label.fil_gray,
#condition_wrapper label.fil_gray,
#target_wrapper label.fil_gray,
#accumulation_wrapper label.fil_gray,
#sort_bool_wrapper label.fil_gray {
    background: #f6f6f6;
    color: #192f60;
}
/* .fil_gray {
    filter: grayscale(80%);
    opacity: 0.5;
} */

/* 検索項目 */
#type_wrapper,
#category_wrapper,
#element_wrapper,
#item_wrapper,
#condition_wrapper,
#target_wrapper,
#accumulation_wrapper,
#sort_bool_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
#utaware_search_tool td div.switch_container{
    height: 90px;
    overflow-y: scroll;
}
#utaware_search_tool td div.switch_container::-webkit-scrollbar {
    width: 0 !important
}
#utaware_search_tool td div.switch_container {
    -ms-overflow-style: none;
}
#utaware_search_tool td div.switch_container{
    overflow: -moz-scrollbars-none;
}



#utaware_search_tool .switch_wrapper{
    cursor: pointer;
}


#type_wrapper label,
#category_wrapper label,
#element_wrapper label,
#item_wrapper label,
#condition_wrapper label,
#target_wrapper label,
#accumulation_wrapper label,
#sort_bool_wrapper label  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32%;
    border-radius: 3px;
    padding: 5px;
    margin: 3px 0;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: bold;
    background: #192f60;
}

#element_wrapper label {
    width: 22%!important;
}

#target_wrapper .target_button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% / 3 - 2px);
    border-radius: 3px;
    padding: 5px;
    margin: 3px 2px;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: bold;
    border: 2px solid #d8aa2a;
    background: #192f60;
    color: #fff;
}
#target_wrapper .target_button[data-checked="none"]{
    background: #f6f6f6;
    color: #192f60;
}
#target_wrapper .target_button_line{
    width: 100%;
    border-top: 1px dotted #ccc;
    margin: 5px;
}
#target_wrapper .target_all{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#accumulation_wrapper label {
    margin: 3px 8%;
}

/* 特性/連撃ボタン */
.change_button {
    background-image: url(https://appmedia.jp/wp-content/uploads/2020/06/utaware_tabstyle_on.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 5px;
    width: 35%;
    height: 35px;
    border-radius: 6px;
    font-size: 12px;
    margin-top: 10px;
    text-shadow: 0px 0px 1px #ffdb15, 0px 0px 1px #ffdb15, 0px 0px 1px #ffdb15, 0px 0px 1px #ffdb15, 0px 0px 1px #ffdb15, 0px 0px 2px #ffdb15, 0px 0px 2px #ffdb15, 0px 0px 2px #ffdb15, 0px 0px 2px #ffdb15, 0px 0px 2px #ffdb15;
    cursor: pointer;
}
.gray {
    background-image: url(https://appmedia.jp/wp-content/uploads/2020/06/utaware_tabstyle_nomal.jpg);
    text-shadow: 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
    color: #808080!important;
}

/* 結果部分 */
.utaware_name {
    padding: 2px!important;
    font-size: 11px!important;
}
.utaware_detail {
    font-size:10px!important;
    padding: 2px!important;
}
.utaware_detail_div {
    text-align:left;
}
.utaware_hr {
    margin:0px!important;
}

/* ロードgif */
#loading_wrapper {
    width: 30px;
    margin: auto;
    display: none;
}

.selected_item_zone {
    position: relative;
    margin: 10px;
    padding: 0.5em 1em;
    border: solid 2px #192f60;
    border-radius: 8px;
    min-height: 50px;
}
.selected_item_zone .sz_title {
    position: absolute;
    display: inline-block;
    top: -8px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 13px;
    background: #FFF;
    color: #192f60;
    font-weight: bold;
}
.sz_items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.sz1_item, .sz2_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32%;
    border-radius: 3px;
    padding: 2px;
    margin: 3px 0;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    font-weight: bold;
    background: #192f60;
}

.skill_wrapper {
  margin: 2px 0px;
}

.skill_wrapper ul {
  width: 100%;
  display: flex;
  align-items: center;
}

.skill_wrapper ul li[data-type="skill_category_li"] {
  /* width: 10%; */
  width: 30%;
  margin-right: 2px;
}
.skill_wrapper ul li[data-type="skill_condition_li"] {
  width: 30%;
  margin-right: 2px;
}
.skill_wrapper ul li[data-type="skill_val_li"] {
  width: 70%;
  line-height: 1.5;
  text-align: left;
}

.skill_wrapper ul li .skill_category,
.skill_wrapper ul li .skill_condition {
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 84%;
  line-height: 1.2;
  padding: 5px 0px;
}

.skill_wrapper ul li .skill_category[data-type="連撃1"] {
  text-shadow: 0px 0px 2px #19348a;
  border: solid 0.2rem #19348a;
  background-color: #5a8fb9;
}

.skill_wrapper ul li .skill_category[data-type="連撃2"] {
  text-shadow: 0px 0px 2px #894c0a;
  border: solid 0.2rem #b06514;
  background-color: #e0a262;
}

.skill_wrapper ul li .skill_category[data-type="連撃3"] {
  text-shadow: 0px 0px 2px #720030;
  border: solid 0.2rem #b7505c;
  background-color: #cb6461;
}

.skill_wrapper ul li .skill_condition {
  text-shadow: 0px 0px 2px #1b6724;
  border: solid 0.2rem #377e40;
  background-color: #79b282;
  padding: 5px 1px;
}

.skill_wrapper ul li .skill_val {
  font-size: 85%;
  text-align: left;
}

.tool_wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tool_wrapper div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 85%;
}
.tool_wrapper input {
  margin: 0px 2px;
}

.skill_category_label {
  margin-bottom: 2px;
  font-weight: bold;
}
.skill_category_label[data-type="tokusei"] {
  color: #1b6724;
}
.skill_category_label[data-type="rengeki1"] {
  color: rgb(25, 52, 138);
}
.skill_category_label[data-type="rengeki2"] {
  color: rgb(176, 101, 20);
}
.skill_category_label[data-type="rengeki3"] {
  color: rgb(183, 80, 92);
}