/*
<link rel="stylesheet" href="/mobile.css" type="text/css" media="screen and (max-width:767px)" />
*/


/*
#######################################
    レスポンシブ対応
#######################################
*/

/*
--------------------------------------------
    1.common
--------------------------------------------
*/
@media only screen and (max-width: 767px) {
html{
    font-size: 14px;
}
body {
    min-width: 320px;
    width: 100%;
}
img {
    width: 100%;
}
section{
    padding: 1rem 0;
}

.wrap{
        width: 100%;
}
.see-sp{
        display: block;
}
.see-pc{
        display: none;
}

/* タイトル */
.box_ttl{
  padding: 10px 13px;
}
.box_ttl h2{
  font-size: 16px;
  line-height: 1.6;
}
.box_ttl .ttl-ribon{
  left: 10px;
}
    
/*
--------------------------------------------
    2.header
--------------------------------------------
*/
.logo img{
    width: 110px;
}
.eyecatch{
    height: 200px;
}

.search_tbl th {
    padding: .65rem;
    width: 76px;
}
.search_tbl td .form-control{
    width: 80%;
}

/*
--------------------------------------------
    3.Agent_box
--------------------------------------------
*/
.Agent_box .rank_body .rank_box{
    flex-wrap: wrap;
}
.rank_box li.rank_image, .rank_box li.rank_contents, .rank_box li.rank_image, .rank_box li.rank_tbl, .rank_box li.rank_text{
  width: 100%;
  padding: 0;
}

.rank_box li.rank_text p{
  margin-top: 10px;
}
.agent_rank .body_rank > ul{
    -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}

.Rank-tbl{
    overflow: hidden;
    overflow-x: scroll;
}
.Rank-tbl .table{
    table-layout: fixed;
    width: 900px;
}
.Rank_List{
    padding: 0 6px 10px 6px;
}
.Rank-tbl .table .tbl-sticky{
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    left: 0;
    box-shadow: 1px 0 1px #ddd;
}
}

@media only screen and (max-width: 480px){
    .container-fluid{
        padding: 0;
    }
    .eyecatch{
        background-size: cover;
        height: 132px;
    }
    .eyecatch .head_ttl{
        right: 15px;
    }
    .eyecatch .head_ttl h2{
        font-size: 23px;
        margin-bottom: 12px;
    }
    .eyecatch .head_ttl h1{
        font-size: 25px;
        text-align: right;
    }
    .see-sm{
        display: block;
    }
    .Rank-tbl .table{
        width: 780px;
    }
    .tbl-eva, .tbl-price, .tbl-fee, .tbl-spread, .tbl-swap, .tbl-pair {
        width: 8%;
    }
    .Rank-tbl .table .tbl-sticky.w-5{
        width: 50px;
    }
    .Rank-tbl .table .tbl-sticky.w-12{
        width: 102px;
    }
    .search_box{
        width: 96%;
        margin: auto;
    }
    .search_list_box{
        padding: 0 6px;
    }
    .search_list_tbl th{
        font-size: 82%;
    }
    .search_list_tbl .recomend{
        width: 18%;
    }
    .search_list_tbl td span.icon{
        width: 20px;
    }
    .search_list_tbl td span.txt{
        font-size: 70%;
    }
    .search_box .card-footer .btn-wrap{
        width: 100%;
        margin: auto;
        position: relative;
    }
    .search_box .card-footer .btn.btn-orange{
        padding: 0;
        height: 52px;
        line-height: 52px;
    }
    .search_box .card h2 a .collapse-icon, .search_box .card h2 a.collapsed .collapse-icon{
        width: 18px;
        height: 18px;
    }
    .rank_box{
        margin: 0 6px;
    }
    .Agent_box .rank_head {
        padding: 0 10px;
    }
    .Agent_box .rank_icon {
        width: 38px;
        padding-right: 6px;
        vertical-align: middle;
    }
    .Agent_box .rank_head .link{
        font-size: 1.5rem;
        line-height: 2;
    }
    .Agent_box .rank_body{
        padding: 10px;
    }
    .evaluation{
        margin-top: 1rem;
    }
    .evaluation .star .score strong{
        font-size: 38px;
    }
    .survey-box{
        margin: 0 6px;
    }
    .rank_box li.rank_contents .table td.small-m{
        width: 78px;
    }

}