@charset "UTF-8";
body {
  background: transparent;
}

main {
  padding-top: 0;
}

/*----------------------------------------------------
 hero
----------------------------------------------------*/
.triauto-spread-hero {
  align-items: center;
  background: linear-gradient(180.43deg, #3976d5 18.61%, #1f5cbf 74.02%);
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 140px;
  overflow: hidden;
  padding: 34px 20px 38px;
  position: relative;
  width: 100%;
}

.triauto-spread-hero__content {
  align-items: center;
  display: flex;
  filter: drop-shadow(0 4px 7px rgba(30, 95, 173, .2));
  justify-content: center;
  width: min(480px, 100%);
}

.triauto-spread-hero__title {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .triauto-spread-hero {
    background: linear-gradient(181.58deg, #3976d5 18.61%, #1f5cbf 74.02%);
    min-height: 140px;
    padding: 45px 20px 47px;
  }

  .triauto-spread-hero__title {
    display: inline-block;
    font-size: 28px;
    line-height: 1.7;
  }
}

/*----------------------------------------------------
 icon
----------------------------------------------------*/
.--fx .triauto-rules-icon-pdf,
.--etf .triauto-rules-icon-pdf {
  background: url(../img/icon-pdf.png) no-repeat left center;
  color: #666 !important;
  padding-left: 2.5rem;
}

.--fx .triauto-rules-icon-external-link,
.--etf .triauto-rules-icon-external-link {
  background: url(../img/icon-external-link.png) no-repeat right center;
  background-size: auto 1.5rem;
  color: #FF6B00;
  display: inline-block;
  padding-right: 2.5rem;
}

.--fx .triauto-rules-icon-download,
.--etf .triauto-rules-icon-download {
  background: url(../img/icon-download.png) no-repeat right center;
  background-size: auto 1.5rem;
  color: #FF6B00;
  display: inline-block;
  padding-right: 2.5rem;
}

.triauto-rules-manual-link {
  align-items: center;
  display: flex;
}

.triauto-rules-manual-link__icon {
  background: none;
  color: var(--ta-color-main, #1e5fad);
  flex: 0 0 auto;
  font-size: 3rem;
  line-height: 1;
  margin-right: 1.6rem;
}

.triauto-rules-manual-link__text,
.triauto-rules-manual-link__text strong {
  color: var(--ta-color-main, #1e5fad);
}


/*----------------------------------------------------
 タブ
----------------------------------------------------*/
.triauto-rules-tab {
  margin-bottom: 20px;
  width: 100%;
}

.triauto-rules-tab-each {
  margin-right: 2rem;
  margin-bottom: 2rem;
}

/* 表示 */
.triauto-rules-each {
  display: none;
}
/* 初期値なので表示 */
#triauto-rules {
  display: block;
}

.triauto-rules-tab-each a {
  border-bottom: 2px solid #fff;
  color: #989898;
  cursor: pointer;
  display: inline-block;
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: .5rem;
  text-decoration: none;
}

.triauto-rules-tab-etf a.triauto-rules-tab-active {
  border-bottom-color: #ff187a;
  color: #ff187a;
}
.triauto-rules-tab-fx a.triauto-rules-tab-active {
  border-bottom-color: #FF6B00;
  color: #FF6B00;
}
.triauto-rules-tab-cfd a.triauto-rules-tab-active {
  border-bottom-color: #2B73DF;
  color: #2B73DF;
}

@media (min-width: 940px) {
  .triauto-rules-tab {
    margin: 0 auto;
    min-width: 900px;
  }
}

/* etf method */
.triauto-rules-method-tab {
  margin-bottom: 4rem;
  max-width: 300px;
}

.triauto-rules-method-tab-each:nth-child(1) {
  margin-right: 1rem;
}
.triauto-rules-method-tab-each:nth-child(2) {
  margin-left: 1rem;
}

/* 表示 */
#triauto-rules-method-manual {
  display: none;
}

.triauto-rules-method-tab-each span {
  border-bottom: 2px solid #fff;
  color: #989898;
  cursor: pointer;
  display: inline-block;
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: .5rem;
}

.triauto-rules-method-tab-each span.triauto-rules-method-tab-active {
  border-bottom-color: var(--ta-color-main, #1e5fad);
  color: var(--ta-color-main, #1e5fad);
}

/*----------------------------------------------------
 triauto用カスタム
----------------------------------------------------*/
body.--triauto .filter__list .filter__list--item .filter__list--item-label {
  align-items: flex-start;
}

body.--triauto .filter__list .filter__list--item .filter__list--item-label::after {
  background-image: url("../img/icon-nav-arrow-gray.svg");
  width: 1.5rem;
}
body.--triauto .filter__list .filter__list--item .filter__list--item-label.--is-active::after {
  background-image: url("../img/icon-nav-arrow-white.svg");
}

body.--triauto .filter__list .filter__list--item .filter__list--item-label:hover::after {
  background-image: url("../img/icon-nav-arrow-white.svg");
}
body.--triauto .pages__section--block-title::before {
  content: none;
}
body.--triauto .pages__section--block-title {
    align-items: center;
    flex-wrap: wrap;
}

body.--triauto .pages__section--block-title > * {
    margin-bottom: .5rem;
    margin-right: 2rem;
}
body.--triauto .pages__section--block-title img {
    max-height: 3rem;
    /* max-height だけだと width 属性(243px)が残って縦に潰れる。
       幅も比率どおり縮めて歪みを防ぐ（2026-07-14） */
    width: auto;
}

/* 最後のセクションとパンくずの間: SP 40px / PC 80px。
   パンくずは footer.php 側の共通パーツなので、余白はこのラッパーの padding-bottom で作る。 */
body.--triauto .--pages.section__contents--block {
  padding-bottom: 40px;
}

@media screen and (min-width: 940px) {
  body.--triauto .--pages.section__contents--block {
    padding-bottom: 80px;
  }
}

/* fx */
.--fx .--pages.section__contents--block .pages__section--block-title {
  color: #FF6B00;
}

/* etf */
.--etf .filter__list .filter__list--item .filter__list--item-label.--is-active {
  background-color: #ff187a;
}
.--etf .filter__list .filter__list--item .filter__list--item-label:hover {
  background-color: #ff187a;
}
.--etf .filter__list .filter__list--item .filter__list--item-label {
  background-color: #e9e7e8;
}
.--etf .--pages.section__contents--block .pages__section--block-title {
  color: #ff187a;
}
/* cfd */
.--cfd .filter__list .filter__list--item .filter__list--item-label.--is-active {
  background-color: #2B73DF;
}
.--cfd .filter__list .filter__list--item .filter__list--item-label:hover {
  background-color: #2B73DF;
}
.--cfd .filter__list .filter__list--item .filter__list--item-label {
  background-color: #e9e7e8;
}
.--cfd .--pages.section__contents--block .pages__section--block-title {
  color: #2B73DF;
}

/*----------------------------------------------------
 rules each
----------------------------------------------------*/
.triauto-rules-each {
  display: none;
}

.triauto-rules-active {
  display: block;
}

/*----------------------------------------------------
 triauto-rules-body
----------------------------------------------------*/
.triauto-rules-body  {
    line-height: 1.7;
}

.triauto-rules-text-orange {
  color: #FF6B00;
}

.triauto-rules-center {
  margin-left: auto;
  margin-right: auto;
}

.triauto-rules-spacer-s {
  margin-bottom: 1rem;
}
.triauto-rules-spacer-m {
  margin-bottom: 2rem;
}
.triauto-rules-spacer-l {
  margin-bottom: 3rem;
}

.triauto-rules-body .triauto-horizontal-scroll,
.triauto-rules-body .triauto-horizontal-scroll--small {
  overflow-x: auto;
}

.triauto-rules-body .triauto-horizontal-scroll > * {
  min-width: 940px;
}

.triauto-rules-body .triauto-horizontal-scroll--small > * {
  min-width: 600px;
}

* + .triauto-rules-body-each {
  margin-top: 3rem;
}
* + .triauto-rules-body-each--space-wide {
  margin-top: 6rem;
}

.--fx .triauto-rules-body a {
  color: #FF6B00;
}
.--cfd .triauto-rules-body a {
  color: #2B73DF;
}
.--etf .triauto-rules-body a {
  color: #FF187A;
}


.triauto-rules-body strong {
  font-weight: bold;
}

.triauto-rules-body th {
  white-space: nowrap;
}

.triauto-rules-body td > div + div {
  margin-top: 1.5rem;
}

/*----------------------------------------------------
 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;
}
.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;
}

/*----------------------------------------------------
 triauto-rules-app
----------------------------------------------------*/
.triauto-rules-app {
  padding-top: 2rem;
  text-align: center;
}
.triauto-rules-app-each + .triauto-rules-app-each {
  margin-top: 3rem;
}
.triauto-rules-app-link {
  padding: 1rem 0 .5rem;
}

@media (min-width: 940px) {
  .triauto-rules-app-each + .triauto-rules-app-each {
    margin-top: 0;
  }
  .triauto-rules-app-each + .triauto-rules-app-each {
    margin-left: 6rem;
  }
}

/*----------------------------------------------------
 remittance_payment-img1
----------------------------------------------------*/
.triauto-rules-remittance_payment-img1 img {
  margin-bottom: 2rem;
}

@media (min-width: 940px) {
  .triauto-rules-remittance_payment-img1 {
    position: relative;
  }
  .triauto-rules-remittance_payment-img1 img {
    margin-bottom: 0;
  }
  .triauto-rules-remittance_payment-img1 p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

/*----------------------------------------------------
 table-summary1
----------------------------------------------------*/
.table-summary1 td:nth-child(3) {
  text-align: left !important;
}

/*----------------------------------------------------
 triauto-rules-keep-flex
----------------------------------------------------*/
.triauto-rules-keep-flex > div {
  margin-bottom: 2rem;
}

@media (min-width: 940px) {
  .triauto-rules-keep-flex > div:first-child {
    margin-right: 1rem;
  }
  .triauto-rules-keep-flex > div:last-child {
    margin-left: 1rem;
  }
}

/*----------------------------------------------------
 current theme overrides
----------------------------------------------------*/
body.--rules {
  background: var(--ta-color-bg, #fff);
  color: var(--ta-color-text, #1a1a2e);
  font-family: var(--ta-font-family-ja);
  font-feature-settings: "palt";
  letter-spacing: 0;
}

body.--rules .triauto-content,
body.--rules .triauto-rules-each,
body.--rules .section__contents--block.--light,
body.--rules .triauto-rules-body {
  background: var(--ta-color-bg, #fff);
  color: var(--ta-color-text, #1a1a2e);
}

body.--rules .triauto-content {
  padding: 0;
}

body.--rules .contents__block {
  color: var(--ta-color-text, #1a1a2e);
  padding-top: 0;
}

/* hero 下の余白は 40px。cfd/rules は hero の次が .triauto-content（タブ帯）なので、
   余白を必要とする側であるそこに margin-top で持たせる（main / .triauto-content の padding-top は 0）。 */
body.--rules .ta-hero + .triauto-content {
  margin-top: 40px;
}

body.--rules .triauto-rules-body {
  /* 本文は 16px（html が font-size: 62.5% なので 1.6rem = 16px） */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
}

body.--rules .triauto-rules-body p,
body.--rules .triauto-rules-body li,
body.--rules .triauto-rules-body td,
body.--rules .triauto-rules-body th {
  color: inherit;
}

/* 注記の文字色は本文と同色。薄いグレー（--ta-color-sub-text）は使わない */
body.--rules .triauto-rules-body small,
body.--rules .triauto-rules-body .--note-primary {
  color: inherit;
}

body.--rules .triauto-rules-tab-each a {
  border-bottom-color: transparent;
  color: var(--ta-color-sub-text, #5a6a85);
  font-size: 2rem;
  letter-spacing: 0;
  text-decoration: none;
}

body.--rules .triauto-rules-tab-fx a.triauto-rules-tab-active,
body.--rules .triauto-rules-tab-fx a:hover {
  border-bottom-color: var(--ta-color-main, #1e5fad);
  color: var(--ta-color-main, #1e5fad);
  text-decoration: none;
}

body.--rules .triauto-rules-tab-cfd a.triauto-rules-tab-active,
body.--rules .triauto-rules-tab-cfd a:hover {
  border-bottom-color: var(--ta-color-main, #1e5fad);
  color: var(--ta-color-main, #1e5fad);
  text-decoration: none;
}

body.--rules .filter__list .filter__list--item .filter__list--item-label {
  background-color: var(--ta-color-bg-light, #f7f9fc);
  border: 1px solid var(--ta-color-border, #d4dce8);
  border-radius: 6px;
  color: var(--ta-color-sub-text, #5a6a85);
  font-size: 1.3rem;
  letter-spacing: 0;
}

body.--rules .filter__list .filter__list--item .filter__list--item-label::after {
  background-image: none;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: .7rem;
  min-width: .7rem;
  padding-left: 0;
  transform: rotate(-45deg);
  width: .7rem;
}

body.--rules .--fx .filter__list .filter__list--item .filter__list--item-label.--is-active,
body.--rules .--fx .filter__list .filter__list--item .filter__list--item-label:hover {
  background-color: var(--ta-color-main, #1e5fad);
  border-color: var(--ta-color-main, #1e5fad);
  color: #fff;
}

body.--rules .--cfd .filter__list .filter__list--item .filter__list--item-label.--is-active,
body.--rules .--cfd .filter__list .filter__list--item .filter__list--item-label:hover {
  background-color: var(--ta-color-main, #1e5fad);
  border-color: var(--ta-color-main, #1e5fad);
  color: #fff;
}

body.--rules .--pages.section__contents--block .pages__section--block-title,
body.--rules .contents__block--title {
  color: var(--ta-color-primary, #0a2463);
  font-family: var(--ta-font-family-ja);
  letter-spacing: 0;
}

body.--rules .--fx .--pages.section__contents--block .pages__section--block-title {
  color: var(--ta-color-primary, #0a2463);
}

body.--rules .--cfd .--pages.section__contents--block .pages__section--block-title {
  color: var(--ta-color-primary, #0a2463);
}

body.--rules .pages__section--block-title::before,
body.--rules .contents__block--title::after {
  background-color: var(--ta-color-main, #1e5fad);
}

body.--rules .--cfd .pages__section--block-title::before {
  background-color: var(--ta-color-main, #1e5fad);
}

body.--rules .triauto-rules-text-orange,
body.--rules .--fx .triauto-rules-body a,
body.--rules .triauto-rules-icon-external-link,
body.--rules .triauto-rules-icon-download {
  color: var(--ta-color-main, #1e5fad);
}

body.--rules .--cfd .triauto-rules-body a {
  color: var(--ta-color-main, #1e5fad);
}

body.--rules .table-bg-gray,
body.--rules .table-gray > * > tr > th,
body.--rules .table-normal--stripe > * > tr:nth-child(even) > * {
  background: var(--ta-color-bg-light, #f7f9fc);
}

body.--rules .table-normal,
body.--rules .table-orange,
body.--rules .table-blue,
body.--rules .table-gray,
body.--rules .table-border {
  color: var(--ta-color-text, #1a1a2e);
}

body.--rules .table-normal > * > tr > *,
body.--rules .table-orange > * > tr > *,
body.--rules .table-blue > * > tr > *,
body.--rules .table-gray > * > tr > *,
body.--rules .table-border > * > tr > * {
  border-color: var(--ta-color-border, #d4dce8);
}

body.--rules .--fx .table-normal > * > tr > *,
body.--rules .table-orange > * > tr > * {
  border-color: rgba(30, 95, 173, .28);
}

body.--rules .--cfd .table-normal > * > tr > *,
body.--rules .table-blue > * > tr > * {
  border-color: rgba(30, 95, 173, .28);
}

body.--rules .--fx .table-normal > * > tr > th,
body.--rules .table-orange > tbody > tr > th {
  background: var(--ta-color-primary-pale, #ebf3fc);
}

body.--rules .--cfd .table-normal > * > tr > th,
body.--rules .table-blue > tbody > tr > th {
  background: var(--ta-color-primary-pale, #ebf3fc);
}

body.--rules .table-orange > thead > tr > th {
  background: var(--ta-color-main, #1e5fad);
  color: #fff;
}

body.--rules .table-blue > thead > tr > th {
  background: var(--ta-color-main, #1e5fad);
  color: #fff;
}

/*----------------------------------------------------
 パンくずリスト（2026-07-09 リニューアル / DESIGN.md 準拠）
 共通定義は assets/css/app.css にあるが、このページはその後に src/styles/app.css を読み込むため、
 旧デザイン（グレー背景・6rem高・オレンジリンク・">"区切り）が後勝ちしてしまう。
 ここで再宣言して新デザインを取り戻す。本家 app.css を変更したらここも追従すること。
 トークン（--ta-color-primary-light 等）は app.css の :root がそのまま効く。
----------------------------------------------------*/
.breadcrumbs__nav {
  align-items: center;
  background-color: var(--ta-color-primary-light);
  display: flex;
  min-height: 0;
  padding: 12px 20px;
  position: relative;
  /* SP でも1行を保ち、長い場合だけ横スクロールへ逃がす（ページ全体には横スクロールを出さない） */
  overflow-x: auto;
  scrollbar-width: none;
}

/* 旧デザインの上部境界線を打ち消す */
.breadcrumbs__nav::before {
  content: none;
}

.breadcrumbs__nav::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 940px) {
  .breadcrumbs__nav {
    margin: 0 auto;
    padding: 12px 0;
    width: 100%;
  }
}

.breadcrumbs__nav .breadcrumbs__nav--list {
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 940px) {
  .breadcrumbs__nav .breadcrumbs__nav--list {
    margin: 0 auto;
    max-width: var(--content-width);
    width: 100%;
  }
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item {
  color: #fff;
  font: 500 12px/1.4 var(--ta-font-family-ja);
  letter-spacing: var(--ta-letter-spacing-ja);
  white-space: nowrap;
  /* 旧CSSの display: flex を戻す。シェブロン(::before)を vertical-align で揃えるため */
  display: block;
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item a {
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item a:hover {
  text-decoration: none;
}

.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item:last-child,
.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item:last-child a {
  color: var(--ta-color-primary-pale);
  font: 700 12px/1.4 var(--ta-font-family-ja);
}

/* 区切りは画像を使わず CSS シェブロンで描画 */
.breadcrumbs__nav .breadcrumbs__nav--list .breadcrumbs__nav--list-item + .breadcrumbs__nav--list-item::before {
  border: solid #e3e3e3;
  border-width: 0 1.5px 1.5px 0;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 0 8px;
  transform: rotate(-45deg);
  vertical-align: middle;
  width: 7px;
}