@charset "utf-8";
/* swap calender 2020.01.15 */
  .buy{ color:red;}
  .sell{ color:blue;}
  .rrr{ text-align: right; }
  .lll{ text-align: left; }
  .ccc{ text-align: center; }
  .tbl { width: 100%; color: #333333; font-size: 16px; line-height: 1.2;}
  .tbl thead{ background-color: #626262; color: #fff;}
  .tbl tbody tr{ background-color:#f3f3f3 !important; }
  .tbl tbody tr.saturday,.tbl tbody tr.sunday{ background-color:#d5d5d5 !important; }
  .tbl tbody td.saturday_click,.tbl tbody td.sunday_click{ background-color:#e4e4e4 !important; }
  .tbl .th_highlight{ background-color:#333 !important;}
  .tbl .td_highlight{ background-color:#FFF !important;}
  .tbl th{
    padding: 6px;
    border-color: #999;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    font-weight:bold;
  }
  .tbl th p {
    font-size: 14px;
  }
  .th_ttl{
    text-align: center;
  }
  .tbl td{
    padding: 5px 3px;
    border-color: #999;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    overflow-wrap: break-word;
    word-break: break-all;
  }
  .btn_commodity{
    float:left; margin-bottom: 5px; border:2px solid #888; cursor: pointer; font-weight:bold;
    background: -moz-linear-gradient(top,#FFF 0%,#888); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#888));border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px !important;
  }
  .btn_commodity:hover {border: 2px solid #04a000;}
  .btn_commodity_click{
    float:left; margin-left:3px; margin-bottom: 5px; cursor: pointer; font-weight:bold; border: 2px solid red /*#00FFDD*/;
    background: -moz-linear-gradient(top,#888 0%,#FFF); background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#FFF));border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;
  }
  .btn_commodity.btn_commodity_click{
    border: 1px solid #005BAC;
    background-color: #E9F0F5;
  }
    .swapBox .swapWrap{
      overflow: hidden;
    }
    .swapWrap.close{display: none;}
    .swapBtn p.hide{display: none;}
    .btn_commodity {
      box-sizing: border-box;
      width: calc((100% - 21px) / 4);
      margin-bottom:5px;
      margin:5px 0 5px 7px;
      padding: 12px 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #999999;
      background: 0;
      border-radius: 0 !important;
      font-weight: normal;
      text-align: left;
      cursor: pointer;
    }
    .btn_commodity:nth-child(4n+1) {
      margin-left: 0;
    }
    .btn_commodity:hover {
      border: 1px solid #00a6eb;
    }
    .btn_commodity_flags {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .btn_commodity_flags img:first-of-type{
      margin-right:2px;
    }
    .btn_commodity_flags img {
      width: 27px;
    }
    .btn_commodity_txt{
      line-height: 1.3;
      font-size: 14px;
      font-weight:bold;
    }
    .btn_commodity_txt::after {
      content: "";
      clear: both;
      display: block;
    }
    .swapBtn {
      margin: 0 0 30px;
      text-align: center;
      color: #3f6974;
    }
    .swapBtn-open {
      display: inline-block;
      text-decoration: underline;
      cursor: pointer;
    }
    .swapBtn-close {
      display: inline-block;
      text-decoration: underline;
      cursor: pointer;
    }
    .swapBtn-open::before{
      content: "▼";
      display: inline-block;
      margin-right: .5em;
      text-decoration: none;
      color: #404040;
    }
    .swapBtn-close::before{
      content: "▲";
      display: inline-block;
      margin-right: .5em;
      text-decoration: none;
      color: #404040;
    }
    .tbl_list .currencyPair_text{
      font-size:85%;
    }
    .month_nav{
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      width: 100%;
      margin-bottom:10px;
    }
    .month_nav .prev{
      margin-right:auto;
    }
    .month_nav .next {
      margin-left:auto;
    }
    .month_nav .back {
      text-align: center;
      grid-column: 2;
      font-weight:bold;
    }

    /* swap point 2023.10.21 */
    .tableStyleWrap table th,
    .tableStyleWrap table td {
      padding:8px;
    }

    .tbl_swap td{
        vertical-align: top;
        text-align: left;
        padding-bottom: 8px;
    }

    /* スワップ強化アイコン 2024/11/21 */
    .swapIcon04 {
      font-size: 12px;
      line-height: 1;
      font-weight: bold;
      color: #ffffff;
      background-color: #F69C00;
      padding: 3px;
      margin: 0 0 0 8px;
      border-radius: 3px;
    }

    @media screen and (max-width: 767px){
    .tbl tbody tr{ background-color:#fff !important; }
    .tbl tbody tr.saturday,.tbl tbody tr.sunday{ background-color:#e6e6e6 !important; }
      
    select#currencyPair_select{
      width:100%;
      padding:12px 23px 10px 13px;
    }
    .tbl_list .currencyPair_title{
      text-align: left;
      padding:6px 10px;
    }
    .tbl_list .currencyPair_title p,
    .tbl_list .currencyPair_title span{
      vertical-align: middle;
    }
    .tbl_list .currencyPair_text{
      display: inline-block;
      margin-right:10px;
      font-size:16px;
    }
    .tbl thead{ background-color: transparent; color: #404040;}
    .tbl .currencyPair_title{
        padding: 6px;
        color: #404040;
        font-weight:bold;
        border: none;
    }
    .tbl .th_ttl{
        vertical-align: middle;
        font-size: 12px;
        border: solid 1px #bfbfbf;
        background-color: #e5e5e5;
        color: #404040;
        text-align: center;
        font-weight: bold;
        padding: 20px 0;
    }
    .tbl td {
        border-color: #bfbfbf;
    }

    /* スワップ強化アイコン 2024/11/21 */
    .swapIcon05 {
      font-size: 12px;
      line-height: 1;
      font-weight: bold;
      color: #ffffff;
      background-color: #F69C00;
      padding: 3px 8px;
      margin: 0 0 0 10px;
      border-radius: 3px;
    }
  }

.banner img {
  width: 100%;
  height: auto;
}