@charset "utf-8";
/************************************
 * PC/SP共通
 ************************************/
.markTab .tabTitle ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.markTab .tabTitle ul {
    overflow: hidden;
}

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


.markTopSwap table th,.markTopSwap table td{
    text-align: center;
}


/************************************
 * PC用設定
 ************************************/
 @media only screen and (min-width: 768px) {
    .markTab .tabTitle ul li .tabBtn { display: inline-block; padding: 8px 15px; }

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

    .tableStyleWrap_mark td { font-size: 16px; }

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

    .markTopSwap table th.first { width: 52%; }
    .markTopSwap table th.date { width: 12%; }
    .markTopSwap table th.buy { width: 18%; }
    .markTopSwap table th.sell { width: 18%; }
    
    .markTopSwap table td.date { width: 12%; }
    .markTopSwap table td.buy { width: 18%; }
    .markTopSwap table td.sell { width: 18%; }
    
    .markTopSwap table td.first { padding-left: 8px; text-align: left; color: #404040; font-weight: bold; }
    .markTopSwap table td.first img { vertical-align: middle; height: 18px; width: 27px; }
  }

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



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

    .markTopSwap table th.first { width: 38%; }
    .markTopSwap table th.date { width: 16%; }
    .markTopSwap table th.buy { width: 23%; }
    .markTopSwap table th.sell { width: 23%; }

    .markTopSwap table td.first { width: 38%; text-align: center; font-weight: bold; line-height: 1.6; }
    .markTopSwap table td.date { width: 16%; }
    .markTopSwap table td.buy { width: 23%; }
    .markTopSwap table td.sell { width: 23%; }
    .markTopSwap table td.first img { margin: auto; vertical-align: middle; height: 16px; width: 24px; }

    .sp_mt{
        margin-top: 33px;
    }

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