@charset "utf-8";
/************************************
 * PC/SP共通
 ************************************/

 .rateboard {
    margin: 0;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
}
/* カラーパレット */
.rateboard .ratenoca { color: #404040 !important; }
.rateboard .rateup { color: #ff0131 !important; }
.rateboard .ratedown { color: #235aff !important; }
/* 小数点最下位 */
.rateboard span.s { vertical-align: baseline; font-size: 10px; padding-top: 2px; }

.rateTab .tabTitle ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.rateTab .tabTitle ul {
    overflow: hidden;
}

.rateTab .tabTitle ul li {
    width: calc(100% / 2) ;
    text-align: center;
}

/* バナーエリア追加 2026/2/14 */
.campBnrWrap {
    margin-bottom: 58px;
}
.campBnrWrap a {
    transition: all ease 0.3s;
}
.campBnrWrap a img {
    width: 100%;
    display: block;
}

/************************************
 * PC用設定
 ************************************/

 @media only screen and (min-width: 768px) {
    /* タブ */
    .rateTab .tabTitle ul li .tabBtn { display: inline-block; padding: 8px 15px; }

    .rateTab h2{
        overflow: hidden;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.375;
        text-align: center;
    }
    .rateTab .pc_mt{
        margin-top: 36px;
    }

     /* テーブル */
    .tableStyleWrap_mark td { font-size: 16px; }

    .rateboard table td.first img:last-of-type { margin-right: 8px;}

    .rateboard table th.first{ width: 33%;}
    .rateboard table th.bid,.rateboard table th.ask,.rateboard table th.lightbid,.rateboard table th.lightask { width: 14%;}
    .rateboard table th.spread,.rateboard table th.lightspread { width: 11%;}
    .rateboard table th.bidhigh,.rateboard table th.asklow { width: 14%;}
    
    .rateboard table td.first { width: 33%; padding-left: 8px; text-align: left; color: #404040; font-weight: bold; }
    .rateboard table td.first img { vertical-align: middle; height: 18px; width: 27px; }
    .rateboard table td.first .fxPair { display: inline-block; width: 80px; }
    .rateboard table td.bid,.rateboard table td.ask,.rateboard table td.lightbid,.rateboard table td.lightask { width: 14%; padding-right: 8px ; text-align: right; }
    .rateboard table td.spread,.rateboard table td.lightspread { width: 11%; text-align: right; padding-right: 8px;}
    .rateboard table td.bidhigh,.rateboard table td.asklow { width: 14%; padding-right: 8px ; text-align: right; }
    

    /* スワップ強化アイコン 2024/11/21 */
    .rateboard table td { padding: 9px; }

    .swapIcon01 {
      font-size: 12px;
      line-height: 1;
      font-weight: bold;
      color: #ffffff;
      background-color: #F69C00;
      padding: 2px 8px;
      margin: 0 0 0 10px;
      border-radius: 3px;
    }
    .swapIcon03 {
      font-size: 12px;
      display: inline-block;
      line-height: 1;
      font-weight: bold;
      color: #ffffff;
      background-color: #F69C00;
      padding: 4px 8px;
      border-radius: 3px;
    }
  }

/************************************
 * SP用設定
 ************************************/
 @media screen and (max-width: 767px) {
    .rateTab { font-size: 14px; }
    .rateTab .tabTitle ul li .tabBtn { display: inline-block; padding: 13.5px 6px; }
    .rateTab h2{
        overflow: hidden;
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.375;
        text-align: center;
    }
    
    .tableStyleWrap_mark td { font-size: 14px; }

    .rateboard table th.first{ width: 36%;}
    .rateboard table th.bid,.rateboard table th.ask,.rateboard table th.lightbid,.rateboard table th.lightask { width: 22%;}
    .rateboard table th.spread,.rateboard table th.lightspread { width: 20%; text-align: center; padding: 0}

    table td.hd img { margin-right: 5px; vertical-align: middle; height: 13px; width: auto; }
    .rateboard table td.first { width: 36%; text-align: center; font-weight: bold; line-height: 1.6; }
    .rateboard table td.first img { margin: auto; vertical-align: middle; height: 16px; width: 24px; }
    .rateboard table td.bid,.rateboard table td.ask,.rateboard table td.lightbid,.rateboard table td.lightask { width: 22%; padding-right: 4px ; text-align: right; }
    .rateboard table td.spread,.rateboard table td.lightspread { width: 20%; text-align: center; padding: 0; }


    /* スワップ強化アイコン 2024/11/21 */
    .rateboard table td { padding: 5px 0; }

    .swapIcon01 {
      font-size: 12px;
      line-height: 2;
      font-weight: bold;
      color: #ffffff;
      background-color: #F69C00;
      padding: 2px 8px;
      border-radius: 3px;
    }
    .swapIcon02 {
      font-size: 12px;
      line-height: 1;
      font-weight: bold;
      color: #ffffff;
      background-color: #F69C00;
      padding: 1.5px 8px;
      border-radius: 3px;
    }
}