@charset "UTF-8";

/*---------------
 CFD 取引ルール(/corp/guide/cfd/rule/)専用
 11．取引上限 の目次と銘柄表の開閉
-----------------*/

/* 目次: ページ内移動なので矢印を下向きにする(.m-anchor-navi と同じ向き・位置) */
.m-limit-toc > li > .m-link-list__type::before {
  top: .25em;
  left: 2px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

/* 銘柄表の開閉: JS が .-collapsed を付けたときだけ 6 行目以降を畳む(JS が無ければ全行表示) */
.m-limit-acc.-collapsed > .m-table > .m-table__body > .m-table__matrix > tbody > tr:nth-child(n+6) {
  display: none;
}

/* 畳んだときは 5 行目を薄くして続きがあることを示す */
.m-limit-acc.-collapsed > .m-table > .m-table__body > .m-table__matrix > tbody > tr:nth-child(5) > td {
  position: relative;
}
.m-limit-acc.-collapsed > .m-table > .m-table__body > .m-table__matrix > tbody > tr:nth-child(5) > td::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  background: linear-gradient(transparent, var(--color-white));
  pointer-events: none;
  content: "";
}

/* 7 区分の見出し: ページ内リンクで飛んだとき、固定ヘッダー分(html の scroll-padding-top)に 16px の余白を足す */
h3[id^="anc-11-"] {
  scroll-margin-top: 16px;
}

/* 開閉ボタン(HTML は hidden で出し、JS が外す)。色はタブ(.m-tablist_basic)の選ばれていない状態に合わせる */
.m-limit-acc > ._toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--color-gray-secondary);
  border-top: none;
  background: var(--color-pale-blue);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.m-limit-acc > ._toggle[hidden] {
  display: none;
}
@media (hover: hover) {
  .m-limit-acc > ._toggle:hover {
    background: var(--color-ui-blue-light);
    color: var(--color-blue-secondary);
  }
}
.m-limit-acc > ._toggle:focus-visible {
  outline: 2px solid var(--color-ui-blue);
  outline-offset: 2px;
}
/* 開閉の矢印: 閉=下、開=上 */
.m-limit-acc > ._toggle::after {
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  content: "";
}
.m-limit-acc > ._toggle[aria-expanded="true"]::after {
  margin-top: 4px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

@media only screen and (max-width: 767.98px) {
  .m-limit-toc > li > .m-link-list__type::before {
    top: .15em;
  }
  /* 横スクロールの表(app.css の data-table-sp="scroll")の下の 20px を詰め、ボタンを表に接して見せる。
     スクロールバーは padding の外側に出るので消えない。影は背景の高さに追従する */
  .m-limit-acc > .m-table[data-table-sp="scroll"] > .m-table__body {
    padding-bottom: 0;
  }
}

/* 印刷: 畳んだ行もすべて出し、ボタンとフェードは出さない */
@media print {
  .m-limit-acc.-collapsed > .m-table > .m-table__body > .m-table__matrix > tbody > tr:nth-child(n+6) {
    display: table-row;
  }
  .m-limit-acc.-collapsed > .m-table > .m-table__body > .m-table__matrix > tbody > tr:nth-child(5) > td::after {
    content: none;
  }
  .m-limit-acc > ._toggle {
    display: none;
  }
}