@charset "UTF-8";

.red {
    color: #ff005d;
}

.blue {
    color: #00f;
}

@media (max-width: 939px) {
  .main-title {
    padding-bottom: 0;
    text-align: left;
  }
}

/*----------------------------------------------------
 タブ
----------------------------------------------------*/
.triauto-market-tab-each {
    margin-right: 2rem;
    margin-bottom: 2rem;
}

/* 表示 */
.triauto-market-each {
    display: none;
}

.triauto-market-tab-btn  {
    border-bottom: 2px solid #fff;
    color: #989898;
    cursor: pointer;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: bold;
    padding-bottom: .5rem;
    transition: all 1s;
    -webkit-transition: all 1s;
}

.triauto-market-tab-btn.triauto-market-tab-active,
.triauto-market-tab-btn:hover {
    border-bottom-color: #ff187a;
    color: #ff187a;
}

@media (max-width: 939px) {
  .triauto-market-tab-each {
      margin-right: 0;
  }

  .triauto-market-tab-btn {
      display: none;
      width: 100%;
  }
  .triauto-market-tab-open .triauto-market-tab-btn {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .triauto-market-tab-btn.triauto-market-tab-active,
  .triauto-market-tab-btn:hover {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  .triauto-market-tab-btn.triauto-market-tab-active::after {
    content: '▼';
  }
  .triauto-market-tab-open .triauto-market-tab-btn.triauto-market-tab-active::after {
    content: '▲';
  }
}

/*----------------------------------------------------
 経済指標カレンダー
----------------------------------------------------*/
.triauto-market-iframe {
    height: 850px;
    margin-bottom: 6rem;
    overflow: auto;
    position: relative;
}

.triauto-market-iframe iframe {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@media (min-width: 940px) {
    .triauto-market-iframe {
        margin-bottom: 10rem;
    }
}

/*----------------------------------------------------
 link
----------------------------------------------------*/
.triauto-market-swap-link {
  margin-bottom: 5rem;
}
.triauto-market-swap-link a img {
  max-width: 266px;
}

@media (min-width: 940px) {
  .triauto-market-swap-link {
    margin-bottom: 0;
    order: 2;
  }
}

/*----------------------------------------------------
 カレンダー
----------------------------------------------------*/
/* select */
.triauto-market-calendar-select {
    margin-bottom: 5rem;
}
.triauto-market-calendar-select-wrap {
}
.triauto-market-calendar-select-in {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  gap: 30px;
}
.triauto-market-calendar-select-each {
  width: 50%;
}

/* title */
.triauto-market-calendar-title {
    color: #666;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* list */
.triauto-market-calendar-list {
    margin-bottom: 6rem;
}

.triauto-market-calendar-list table {
    border-collapse: collapse;
    position: relative;
    text-align: center;
    width: 100%;
}
.triauto-market-calendar-list table thead {
  position: sticky;
  top: 70px;
}

.triauto-market-calendar-list th,
.triauto-market-calendar-list td {
    border-left: 1px solid #999;
    padding: .5rem .5rem;
}
.triauto-market-calendar-list tr:first-child th:first-child,
.triauto-market-calendar-list td:first-child {
    border-left: 0;
}

.triauto-market-calendar-list td:nth-child(3),
.triauto-market-calendar-list td:nth-child(4) {
    width: 20%;
}
.triauto-market-calendar-list .triauto-market-swap-each td:nth-child(3),
.triauto-market-calendar-list .triauto-market-swap-each td:nth-child(4) {
    text-align: right;
}

.triauto-market-calendar-list tbody:nth-child(odd) {
    background: #f5f5f5;
}

/* holiday */
.triauto-market-calendar-holiday {
    background: #ffefdd;
}

/* thead */
.triauto-market-calendar-list th {
    background: #f2f2f2;
}
.triauto-market-calendar-list .triauto-market-calendar-selling {
    background: #b8ddff;
}
.triauto-market-calendar-list .triauto-market-calendar-buy {
    background: #ffd5e9;
}
.triauto-market-calendar-list th img {
    height: 1.8rem;
    margin: 0 auto .5rem;
    vertical-align: middle;
}
.triauto-market-swap .triauto-market-calendar-list th img {
  display: inline-block;
  height: 1.5rem;
  margin: 0 .5rem 0 0;
}

@media (min-width: 940px) {
    /* select */
    .triauto-market-calendar-select {
        margin-bottom: 7rem;
    }
  .triauto-market-calendar-select-wrap {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
    .triauto-market-calendar-select-in {
      gap: 50px;
    }
    .triauto-market-calendar-select-each {
      max-width: 250px;
    }
            
    /* title */
    .triauto-market-calendar-title {
        font-size: 2.1rem;
    }
    
    /* list */
    .triauto-market-calendar-list {
        margin-bottom: 10rem;
    }
    .triauto-market-calendar-list table thead {
      top: 90px;
    }
        
    .triauto-market-calendar-list th,
    .triauto-market-calendar-list td {
        font-size: 1.6rem;
        padding: 1rem;
    }
    .triauto-market-calendar-list td:nth-child(3),
    .triauto-market-calendar-list td:nth-child(4) {
        width: 33%;
    }
    .triauto-market-calendar-list .triauto-market-swap-each td:nth-child(3),
    .triauto-market-calendar-list .triauto-market-swap-each td:nth-child(4) {
        text-align: center;
    }
    /* thead */
    .triauto-market-calendar-list th {
        font-size: 1.8rem;
        vertical-align: middle;
    }
    .triauto-market-calendar-list th img {
        display: inline-block;
        height: 2.1rem;
        margin: 0 1rem 0 0;
    }
}

/*----------------------------------------------------
 FXスワップカレンダー・金利調整カレンダー
----------------------------------------------------*/
.triauto-market-swap a,
.triauto-market-cfd-interest a,
.triauto-market-interest a {
    color: #ff187a;
}

/* select */
.triauto-market-calendar-select th,
.triauto-market-calendar-select td {
    padding: 0 15px 10px 0;
}
.triauto-market-calendar-select select {
    font-size: 1.5rem;
    min-width: 120px;
    padding: .7rem 5px;
    width: 100%;
}

/* calendar */
.triauto-market-swap-each,
.triauto-market-cfd-interest-each,
.triauto-market-interest-each {
    display: none;
}
/* 初期値なので表示 */
.triauto-market-swap-USDJPY, 
.triauto-market-cfd-interest-CODE_JPC_MJPY, 
.triauto-market-interest-CODE_1306TKSJPY {
    display: block;
}

@media (min-width: 940px) {
    /* select */
    .triauto-market-calendar-select th,
    .triauto-market-calendar-select td {
        padding: 0 15px 20px 0;
    }
}

/*----------------------------------------------------
 remark
----------------------------------------------------*/
.triauto-market-remark {
    margin-top: 4rem;
}

/*----------------------------------------------------
 table
----------------------------------------------------*/
/* common */
.table-bg-gray {
    background: #F2F2F2;
}
  
.table-text-center > * > tr > *,
.table-text-center > tr > *,
.table-text-center > * {
    text-align: center;
}
.table-vertical-center > * > tr > *,
.table-vertical-center > tr > *,
.table-vertical-center > * {
  vertical-align: middle;
}

.table-text-center-th > * > tr > th,
.table-text-center-th > tr > th,
.table-text-center-th > th {
  text-align: center;
}

.table-vertical-center-th > * > tr > th,
.table-vertical-center-th > tr > th,
.table-vertical-center-th > th {
  vertical-align: middle;
}

.table-text-center-td > * > tr > td,
.table-text-center-td > tr > td,
.table-text-center-td > td {
  text-align: center;
}


/* 横並びにする場合 */
.table-flex > table + table {
  margin-left: 0;
}

@media (min-width: 940px) {
  .table-flex > table + table {
    margin-left: 2rem;
  }
}


/* normal */
.table-normal {
  color: #000;
  border-collapse: collapse;
}
.table-normal > * > tr > * {
  border: 1px solid #666;
  padding: 1.5rem;
}
/* narrow */
.table-normal--narrow > * > tr > * {
  padding: .5rem 1.5rem;
}
/* noborderは2列専用 */
.table-normal--noborder > * > tr > th,
.table-normal--noborder > * > tr > td {
  border-left: 0;
  border-right: 0;
}
.table-normal--noborder > * > tr > td {
  padding: 2.5rem .5rem 2.5rem 3rem;
}
/* bg color */
.table-normal--stripe > * > tr:nth-child(even) > * {
  background: #E6E6E6;
}
.--fx .table-normal > * > tr > th {
  background: #FFEFDD;
}
.--etf .table-normal > * > tr > th {
  background: #FFD3E6;
}
.--cfd .table-normal > * > tr > th {
  background: #bBe3fF;
}

/* simple */
.table-simple > * > tr + tr > th,
.table-simple > * > tr + tr > td {
  padding-top: 1.5rem;
}

.table-simple > * > tr > td {
  padding-left: 1rem;
}

/* border */
.table-border > * > tr > * {
  border: 1px solid #666;
  padding: 1rem 2rem 1rem;
}
.table-border > * > tr > *.table-border-right-none {
  border-right: 0;
}
.table-border > * > tr > *.table-border-right-none + * {
  border-left: 0;
}

/* gray */
.table-gray > * > tr > th,
.table-gray > * > tr > td {
  border: 2px solid #000;
  padding: .5rem;
}

.table-gray > * > tr > th {
  background: #F2F2F2;
}

/* orange */
.table-orange > * > tr > th,
.table-orange > * > tr > td {
  border: 1px solid #333;
  padding: 1rem 2rem 1rem;
}

.table-orange > thead > tr > th {
  background: #FF6A33;
  color: #fff;
}

.table-orange > tbody > tr > th {
  background: #FFEFDD;
}

/* pink */
.table-pink > * > tr > th,
.table-pink > * > tr > td {
  border: 1px solid #333;
  padding: 1rem 2rem 1rem;
}

.table-pink > thead > tr > th {
  background: #FF5791;
  color: #fff;
}

.table-pink > tbody > tr > th {
  background: #FFD3E6;
}

/* blue */
.table-blue > * > tr > th,
.table-blue > * > tr > td {
  border: 1px solid #333;
  padding: 1rem 2rem 1rem;
}

.table-blue > thead > tr > th {
  background: #2B73DF;
  color: #fff;
}

.table-blue > tbody > tr > th {
  background: #bBe3fF;
}