@charset "UTF-8";

/* セマンティックタグ化(div→h2/h3/p)した見出し・本文のブラウザ既定
   マージンを打ち消す。レイアウトは flex/gap が担うため margin は 0。 */
.triauto-top-content .frame .auto-title,
.triauto-top-content .frame .text-wrapper-2,
.triauto-top-content .frame .af-title-2,
.triauto-top-content .frame .af-title,
.triauto-top-content .frame .ec-title,
.triauto-top-content .frame .s-title,
.triauto-top-content .frame .af-desc-2,
.triauto-top-content .frame .text-wrapper-4,
.triauto-top-content .frame .text-wrapper-7,
.triauto-top-content .frame .s-desc,
.triauto-top-content .frame .af-desc,
.triauto-top-content .frame .ma-desc-2,
.triauto-top-content .frame .ma-desc-4 {
  margin: 0;
}

body.triauto-top {
  margin: 0;
  padding-top: 0 !important;
}

body.triauto-top .triauto-top-content {
  padding-top: 0 !important;
}

.triauto-sp-content {
  display: none;
}

.triauto-top-content .frame {
  margin-left: auto !important;
  margin-right: auto !important;
}

@font-face {
  font-family: "DIN 2014 Narrow-Bold";
  src: url("https://anima-uploads.s3.amazonaws.com/5c93b64a64f3d80009a14e7a/{ParaType} DIN 2014 Narrow Bold Typeface.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@media (min-width: 940px) {
  body.triauto-top .triauto-top-content {
    padding-top: 0 !important;
  }
}

/* メインビジュアル (Figma 案1: 537:8、1440x430 キャンバス)。
   1440px以上は等倍・中央固定。768〜1439px は Section 21 の .frame zoom で
   ページ全体ごと等倍縮小されるため、ここでは別スケール層を持たない。 */
.triauto-top-content .frame .triauto-mainvisual {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  left: auto !important;
  width: 100vw !important;
  max-width: none !important;
  height: 430px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
  transform: none !important;
  background: #1e5fad url("/triauto/assets/img/mainvisual-background.png") center top / cover no-repeat !important;
  align-self: center !important;
  zoom: 1 !important;
}

.triauto-top-content .frame .triauto-mainvisual::before {
  content: none !important;
}

.triauto-mainvisual__inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1440px;
  max-width: none;
  height: 430px;
  transform: translateX(-50%);
}

/* 左の No.1 バッジ背面の放射影 (Figma 537:147: 430x430 @ 68,40) */
.triauto-mainvisual__inner::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 68px;
  width: 430px;
  height: 430px;
  pointer-events: none;
  background: url("/triauto/assets/img/mainvisual-no1-shadow.svg") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

/* 左の No.1 バッジ (Figma: 312x272.324 @ 136,99) */
.triauto-mainvisual__award {
  position: absolute;
  top: 99px;
  left: 136px;
  width: 312px;
  height: 272.324px;
  max-width: none;
}

/* 中央のスマホモック (527x527 透過webp)。Figma では -1.49deg 回転で
   キャンバス上下にはみ出し、hero の overflow: hidden で切れる想定 */
.triauto-mainvisual__phone {
  position: absolute;
  top: -43px;
  left: 449px;
  width: 527px;
  height: 527px;
  max-width: none;
  transform: rotate(-1.49deg);
}

/* 右のテキスト列 (Figma: x=1014、縦中央揃え、要素間 gap 30px) */
.triauto-mainvisual__content {
  position: absolute;
  top: 50%;
  left: 1014px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  transform: translateY(-50%);
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
}

.triauto-mainvisual__title {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 白箱2つ（ロゴ / キャッチ）の縦積み */
.triauto-mainvisual__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.triauto-mainvisual__logo {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  background: #fff;
}

.triauto-mainvisual__logo img {
  width: 213px;
  height: 30px;
  max-width: none;
}

.triauto-mainvisual__catch {
  margin: 0;
  padding: 8px 20px;
  background: #fff;
  color: #0a2463;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* CTAボタンと直下テキストの縦積み */
.triauto-mainvisual__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.triauto-mainvisual__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 209px;
  height: 70px;
  padding: 18px 40px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  background: #ff6800;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
}

.triauto-mainvisual__cta span {
  font-size: 16px;
  font-weight: 500;
}

/* hover は .ta-hover-glow（白の半透明レイヤー）に統一。旧 opacity 減衰は廃止（DESIGN.md） */
.triauto-mainvisual__cta:hover {
  color: #fff;
  text-decoration: none;
}

.triauto-mainvisual__desc {
  margin: 0;
  color: #ebf3fc;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* バッジ下の注記 (Figma: 10px、幅348pxで2行に折返し) */
.triauto-mainvisual__note {
  position: absolute;
  top: 382px;
  left: 136px;
  width: 348px;
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 1px;
}

.triauto-top-content .frame .div-8 .crown-img {
  display: block;
  width: 39px;
  height: 32px;
  max-width: none;
}

.triauto-top-content .frame .auto-trade-section {
  gap: 80px !important;
  padding: 80px !important;
  background: #fff !important;
}

.triauto-top-content .frame .auto-trade-section .div-12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 40px !important;
  width: 578.866px !important;
  min-height: 283.155px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #ebf3fc !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 7px rgba(235, 243, 252, 0.48) !important;
}

.triauto-top-content .frame .auto-trade-section .ac {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
  width: 538.866px !important;
  min-height: 143.155px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.triauto-top-content .frame .auto-trade-section .ac-l {
  margin: 0 !important;
  color: #0a2463 !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .auto-trade-section .group-3-big {
  display: block !important;
  width: 218.866px !important;
  height: 143.155px !important;
  max-width: none !important;
  object-fit: contain !important;
}

.triauto-top-content .frame .auto-trade-section .auto-sub {
  width: 520px !important;
  margin: 0 !important;
  color: transparent !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
}

.triauto-top-content .frame .auto-trade-section .text-wrapper-6 {
  color: #1e5fad !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
}

.triauto-top-content .frame .auto-trade-section .auto-row {
  display: block !important;
  position: relative !important;
  width: 1000px !important;
  height: 196px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.triauto-top-content .frame .auto-trade-section .ac-2,
.triauto-top-content .frame .auto-trade-section .ac-4,
.triauto-top-content .frame .auto-trade-section .ac-6 {
  position: absolute !important;
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  /* オレンジの点とラベルをひとまとまりとしてカード内で中央寄せ */
  justify-content: center !important;
  gap: 20px !important;
  width: 320px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #ebf3fc !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 7px rgba(235, 243, 252, 0.48) !important;
}

.triauto-top-content .frame .auto-trade-section .ac-2::before,
.triauto-top-content .frame .auto-trade-section .ac-4::before,
.triauto-top-content .frame .auto-trade-section .ac-6::before {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: #ffa54f;
  border-radius: 50%;
}

.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(1) {
  top: 108px !important;
  left: 0 !important;
}

.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(2) {
  top: 108px !important;
  left: 340px !important;
}

.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(3) {
  top: 108px !important;
  left: 680px !important;
}

.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(4),
.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(5) {
  top: 0 !important;
  width: 326.667px !important;
}

.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(4) {
  left: 520px !important;
}

.triauto-top-content .frame .auto-trade-section .auto-row > :nth-child(5) {
  left: 153.333px !important;
}

.triauto-top-content .frame .auto-trade-section .ac-3,
.triauto-top-content .frame .auto-trade-section .ac-5 {
  width: auto !important;
  margin: 0 !important;
  color: #0a2463 !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  /* auto-row のカードラベルはユーザー指定で 20px（PC見出し 28px の例外） */
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .auto-trade-section .ac-5 br {
  display: none !important;
}

.triauto-top-content .frame .auto-trade-section .group-3 {
  display: none !important;
}

/* 5部門 No.1 の注記（SP の .triauto-sp-no1__note と同内容を PC でも表示）。
   SPと同じくセクション末尾（.auto-row の下）に配置。
   上は section の 80px gap を -40px で 40px に圧縮。下は section の padding-bottom 80px に任せる
   （margin-bottom を付けると padding と二重になり 80+80 になるため 0 にする）。 */
.triauto-top-content .frame .auto-trade-section__note {
  width: 100% !important;
  margin: -40px 0 0 !important;
  color: var(--ta-color-sub-text) !important;
  text-align: center !important;
}

.triauto-top-content .frame .easy-section-2 .frame-wrapper {
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 221px !important;
  padding: 32px 28px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.triauto-top-content .frame .easy-section-2 .div-21 {
  width: 100% !important;
}


.triauto-top-content .frame .flow-section .step-right {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}
.triauto-top-content .frame .easy-section-2 .div-22 {
  align-items: center !important;
  gap: 8px !important;
}

.triauto-top-content .frame .easy-section-2 .div-10 {
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.triauto-top-content .frame .easy-section-2 .component,
.triauto-top-content .frame .easy-section-2 .component-2 {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 39px !important;
}

.triauto-top-content .frame .easy-section-2 .flag-combined {
  display: block !important;
  width: 52px !important;
  height: 39px !important;
  max-width: none !important;
  object-fit: contain !important;
}

.triauto-top-content .frame .easy-section-2 .ma-label {
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: max(1.75rem, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: max(0.0625rem, 1px) !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .easy-section-2 .ma-title-wrapper {
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.triauto-top-content .frame .easy-section-2 .ma-title-3 {
  display: block !important;
  margin: 0 !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .easy-section-2 .ma-title-3 .span {
  display: inline !important;
  vertical-align: baseline !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-family: "DIN 2014 Narrow", "DIN 2014 Narrow-Bold", Helvetica, sans-serif !important;
  font-size: max(6rem, 96px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.triauto-top-content .frame .easy-section-2 .ma-title-3 .text-wrapper-3 {
  display: inline !important;
  vertical-align: baseline !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: max(1.75rem, 28px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: max(0.0625rem, 1px) !important;
}

.triauto-top-content .frame .easy-section-3,
.triauto-top-content .frame .swap-lineup-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: max(5rem, 80px) !important;
  width: 100vw !important;
  max-width: none !important;
  align-self: center !important;
  padding: max(5rem, 80px) max(5rem, 80px) max(2.5rem, 40px) !important;
  box-sizing: border-box !important;
  background: var(--Primary-Pale, var(--primary-pale, #ebf3fc)) !important;
}

.triauto-top-content .frame .easy-section-3 {
  padding-bottom: 80px !important;
  background: var(--ta-color-bg) !important;
}

.triauto-top-content .frame .easy-section-3 .div-12,
.triauto-top-content .frame .swap-lineup-section .div-12 {
  align-items: center !important;
  gap: 24px !important;
}

.triauto-top-content .frame .easy-section-3 .auto-title,
.triauto-top-content .frame .swap-lineup-section .auto-title {
  margin: 0 !important;
  color: #0a2463 !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: max(0.0625rem, 1px) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .easy-section-3 .rectangle-2,
.triauto-top-content .frame .swap-lineup-section .rectangle-2 {
  width: 100px !important;
  height: 2px !important;
  background: #ffa54f !important;
}

.triauto-top-content .frame .easy-section-3 .div-20,
.triauto-top-content .frame .swap-lineup-section .div-20 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  column-gap: 20px !important;
  row-gap: 40px !important;
  width: 1000px !important;
}

.triauto-top-content .frame .swap-lineup-section .div-20 {
  row-gap: 20px !important;
}

.triauto-top-content .frame .easy-section-3 .div-23,
.triauto-top-content .frame .swap-lineup-section .div-23 {
  display: contents !important;
}

.triauto-top-content .frame .easy-section-3 .div-wrapper,
.triauto-top-content .frame .easy-section-3 .ma-4,
.triauto-top-content .frame .swap-lineup-section .div-wrapper,
.triauto-top-content .frame .swap-lineup-section .ma-4 {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 244px !important;
  padding: 32px 28px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(235, 243, 252, 0.48) !important;
}

.triauto-top-content .frame .easy-section-3 .div-5,
.triauto-top-content .frame .easy-section-3 .div-22,
.triauto-top-content .frame .swap-lineup-section .div-5,
.triauto-top-content .frame .swap-lineup-section .div-22 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.triauto-top-content .frame .easy-section-3 .div-10,
.triauto-top-content .frame .swap-lineup-section .div-10 {
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.triauto-top-content .frame .easy-section-3 .component,
.triauto-top-content .frame .swap-lineup-section .component {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 39px !important;
}

.triauto-top-content .frame .easy-section-3 .flag-combined,
.triauto-top-content .frame .swap-lineup-section .flag-combined {
  display: block !important;
  width: 52px !important;
  height: 39px !important;
  max-width: none !important;
  object-fit: contain !important;
}

.triauto-top-content .frame .easy-section-3 .ma-label-2,
.triauto-top-content .frame .easy-section-3 .ma-label-3,
.triauto-top-content .frame .easy-section-3 .ma-label-4,
.triauto-top-content .frame .swap-lineup-section .ma-label-2,
.triauto-top-content .frame .swap-lineup-section .ma-label-3,
.triauto-top-content .frame .swap-lineup-section .ma-label-4 {
  width: auto !important;
  margin: 0 !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: max(0.0625rem, 1px) !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .easy-section-3 .ma-title-wrapper,
.triauto-top-content .frame .swap-lineup-section .ma-title-wrapper {
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.triauto-top-content .frame .easy-section-3 .ma-title-3,
.triauto-top-content .frame .swap-lineup-section .ma-title-3 {
  display: block !important;
  margin: 0 !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .easy-section-3 .ma-title-3 .span,
.triauto-top-content .frame .swap-lineup-section .ma-title-3 .span {
  display: inline !important;
  vertical-align: baseline !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-family: "DIN 2014 Narrow", "DIN 2014 Narrow-Bold", Helvetica, sans-serif !important;
  font-size: max(6rem, 96px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.triauto-top-content .frame .easy-section-3 .ma-title-3 .text-wrapper-3,
.triauto-top-content .frame .swap-lineup-section .ma-title-3 .text-wrapper-3 {
  display: inline !important;
  vertical-align: baseline !important;
  color: var(--Mane-color, var(--mane-color, #1e5fad)) !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: max(1.75rem, 28px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: max(0.0625rem, 1px) !important;
}

.triauto-top-content .frame .easy-section-3 .ma-desc-5,
.triauto-top-content .frame .swap-lineup-section .ma-desc-5 {
  width: 1000px !important;
  margin: -40px 0 0 !important;
  color: #5a6a85 !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: max(0.0625rem, 1px) !important;
}

.triauto-top-content .frame .easy-section-3 .ma-desc-5 span,
.triauto-top-content .frame .easy-section-3 .ma-desc-5 a,
.triauto-top-content .frame .swap-lineup-section .ma-desc-5 span,
.triauto-top-content .frame .swap-lineup-section .ma-desc-5 a {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.triauto-top-content .frame .easy-section-3 .ma-desc-5 a,
.triauto-top-content .frame .swap-lineup-section .ma-desc-5 a {
  text-decoration: underline !important;
}

.triauto-top-content .frame .swap-lineup-section .badge-new--corner {
  top: 16px !important;
  left: 16px !important;
}

.triauto-top-content .frame .div-19 .check-box {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
}

.triauto-top-content .frame .div-19 .vector-8 {
  display: block !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
}

/* 高スペックな取引ツール (CFD Top の同セクションを移植) */
.triauto-top-content .frame .triauto-app-tools {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: var(--ta-space-4xl);
  width: 1440px;
  padding: var(--ta-section-padding-pc);
  background: var(--ta-color-primary-pale);
}

.triauto-top-content .frame .triauto-app-tools__heading {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.triauto-top-content .frame .triauto-app-tools__heading .ta-heading-bar,
.triauto-sp-app-tools__heading .ta-heading-bar {
  margin-top: var(--ta-space-xl);
}

.triauto-top-content .frame .triauto-app-tools__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ta-space-2xl);
  width: 100%;
}

.triauto-top-content .frame .triauto-app-tools__devices {
  display: block;
  width: 334px;
  height: auto;
}

.triauto-top-content .frame .triauto-app-tools__info {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ta-space-l);
}

.triauto-top-content .frame .triauto-app-tools__lead,
.triauto-top-content .frame .triauto-app-tools__desc,
.triauto-top-content .frame .triauto-app-tools__note {
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* 注記の文字色: /triauto/index.php は既存の注記に合わせてサブテキスト色（薄いグレー）で統一する。
   サイト共通の .ta-text-caption は本文色のため、ここで上書きする。 */
.triauto-top-content .frame .triauto-app-tools__note {
  color: var(--ta-color-sub-text);
}

.triauto-top-content .frame .triauto-app-tools__download {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ta-space-l);
}

.triauto-top-content .frame .triauto-app-tools__badges {
  display: flex;
  align-items: center;
  gap: var(--ta-space-l);
}

.triauto-top-content .frame .triauto-app-tools__badge-link {
  display: inline-flex;
  flex: 0 0 auto;
}

.triauto-top-content .frame .triauto-app-tools__badge {
  display: block;
  height: auto;
}

.triauto-top-content .frame .triauto-app-tools__badge--app {
  width: 210px;
}

.triauto-top-content .frame .triauto-app-tools__badge--google {
  width: 262px;
}

.triauto-top-content .frame .torche-common-section {
  --torche-side: max(40px, calc((100vw - 1000px) / 2));
  --torche-frame-offset: max(0px, calc((100vw - 1440px) / 2));
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  height: 442px !important;
  min-height: 442px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: #0b3cae !important;
  background-image: url("/triauto/assets/img/torche-background-color.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  align-self: center !important;
}

.triauto-top-content .frame .torche-common-section .hero-c-3 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 442px !important;
}

.triauto-top-content .frame .torche-common-section .vector-8 {
  position: absolute !important;
  top: 0 !important;
  left: calc(50% - 419px) !important;
  right: auto !important;
  z-index: 1 !important;
  width: 839px !important;
  height: 442px !important;
  max-width: none !important;
  mix-blend-mode: color-dodge !important;
  background-blend-mode: color-dodge !important;
}

.triauto-top-content .frame .torche-common-section .hero-content {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 32px !important;
  position: absolute !important;
  top: 127px !important;
  left: calc(var(--torche-frame-offset) + 160px) !important;
  z-index: 3 !important;
  max-width: 390px !important;
}

.triauto-top-content .frame .torche-common-section .frame-33 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

.triauto-top-content .frame .torche-common-section .hero-tag {
  position: relative !important;
  width: fit-content !important;
  margin: -1px 0 0 !important;
  color: #fff !important;
  font-family: "DIN 2014 Narrow", Helvetica, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 39px !important;
  height: 39px !important;
  letter-spacing: 0.48px !important;
  white-space: nowrap !important;
  font-style: normal !important;
}

.triauto-top-content .frame .torche-common-section .hero-h {
  position: relative !important;
  width: fit-content !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: normal !important;
}

.triauto-top-content .frame .torche-common-section .hero-cta-3 {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  position: absolute !important;
  top: 300px !important;
  left: calc(var(--torche-frame-offset) + 964px) !important;
  right: auto !important;
  z-index: 4 !important;
  padding: 18px 40px !important;
  box-sizing: border-box !important;
  color: #fff !important;
  text-decoration: none !important;
  background: #ff6800 !important;
  border-radius: 6px !important;
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2) !important;
  white-space: nowrap !important;
}

.triauto-top-content .frame .torche-common-section .hero-cta-3 .hero-cta-text {
  color: #fff !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
}

.triauto-top-content .frame .torche-common-section .hero-cta-3 .hero-cta-2 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: fit-content !important;
  height: auto !important;
  margin-top: -1px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: 1px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.triauto-top-content .frame .torche-common-section .frame-35 {
  position: absolute !important;
  top: 60px !important;
  left: calc(var(--torche-frame-offset) + 656px) !important;
  right: auto !important;
  z-index: 3 !important;
  width: 189px !important;
  height: 321px !important;
  max-width: none !important;
}

.triauto-top-content .frame .torche-common-section .x-xf {
  position: absolute !important;
  top: 103px !important;
  left: calc(var(--torche-frame-offset) + 814px) !important;
  right: auto !important;
  z-index: 3 !important;
  width: 408px !important;
  height: 171px !important;
  max-width: none !important;
}

/* 中間幅(1100px/900px)の torche 再配置は、calc の length÷length
   除算(zoom 等倍縮小)を解釈できないブラウザ専用のフォールバックに変更。
   対応ブラウザではファイル末尾の Section 21「PC全体のフレキシブル化」zoom が
   768〜1439px を等倍縮小で担い、この再配置は発動しない */
@supports not (zoom: calc(100vw / 1440px)) {
  @media (min-width: 768px) and (max-width: 1100px) {
    .triauto-top-content .frame .torche-common-section {
      --torche-side: 40px;
    }

    .triauto-top-content .frame .torche-common-section .hero-content {
      top: 112px !important;
      left: var(--torche-side) !important;
      max-width: 340px !important;
    }

    .triauto-top-content .frame .torche-common-section .hero-tag {
      font-size: 22px !important;
      line-height: 1.7 !important;
      height: auto !important;
    }

    .triauto-top-content .frame .torche-common-section .hero-h {
      font-size: 36px !important;
    }

    .triauto-top-content .frame .torche-common-section .frame-35 {
      top: 86px !important;
      right: 330px !important;
      left: auto !important;
      width: 160px !important;
      height: auto !important;
    }

    .triauto-top-content .frame .torche-common-section .x-xf {
      top: 120px !important;
      right: 40px !important;
      left: auto !important;
      width: 340px !important;
      height: auto !important;
    }

    .triauto-top-content .frame .torche-common-section .hero-cta-3 {
      top: 306px !important;
      right: 40px !important;
      left: auto !important;
    }
  }

  @media (min-width: 768px) and (max-width: 900px) {
    .triauto-top-content .frame .torche-common-section .hero-content {
      top: 100px !important;
      max-width: 300px !important;
    }

    .triauto-top-content .frame .torche-common-section .hero-tag {
      font-size: 20px !important;
    }

    .triauto-top-content .frame .torche-common-section .hero-h {
      font-size: 32px !important;
    }

    .triauto-top-content .frame .torche-common-section .frame-35 {
      display: none !important;
    }

    .triauto-top-content .frame .torche-common-section .x-xf {
      top: 146px !important;
      left: auto !important;
      width: 300px !important;
    }

    .triauto-top-content .frame .torche-common-section .hero-cta-3 {
      top: 318px !important;
    }
  }
}

/* ============================================================
   14-b. 選ばれ続ける理由がある セクション (Figma: 2679:50882)
   ============================================================ */

.triauto-top-content .frame .feature-sec {
  min-height: 967.92px;
  box-sizing: border-box;
}

.triauto-top-content .frame .feature-sec .div-4 {
  width: 1000px;
  height: 565.92px;
}

.triauto-top-content .frame .fs-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  align-self: stretch;
}

.triauto-top-content .frame .fs-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 20px;
  background: var(--ta-color-bg);
  border: 1px solid var(--ta-color-card-border);
  border-radius: var(--ta-radius-l);
  box-shadow: var(--ta-shadow-card);
}

.triauto-top-content .frame .fs-card--award {
  align-items: center;
  gap: 16px;
  height: 289px;
}

.triauto-top-content .frame .fs-card__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 509.12px;
  height: 192px;
}

.triauto-top-content .frame .fs-card__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 213px;
  height: 192px;
}

.triauto-top-content .frame .fs-card__lead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.triauto-top-content .frame .fs-card__crown {
  flex: 0 0 auto;
  width: 39px;
  height: 32px;
}

.triauto-top-content .frame .fs-card__lead-text {
  margin: 0;
  color: var(--ta-color-main);
  font-family: var(--ta-font-family-ja);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

.triauto-top-content .frame .fs-card__heading {
  margin: 0;
  width: 213px;
  text-align: center;
  white-space: nowrap;
}

.triauto-top-content .frame .fs-card__no1 {
  display: block;
  flex: 0 0 auto;
  width: 256.12px;
  height: 169.47px;
  margin-top: 11.26px;
  object-fit: contain;
}

.triauto-top-content .frame .fs-card__note {
  margin: 0;
  color: var(--ta-color-sub-text); /* 注記はサブテキスト色で統一 (.triauto-app-tools__note と同方針) */
  text-align: center;
}

.triauto-top-content .frame .fs-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 490px);
  gap: 20px;
  width: 1000px;
}

.triauto-top-content .frame .fs-card--metric {
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 256.92px;
}

.triauto-top-content .frame .fs-card__metric-main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  width: 450px;
}

.triauto-top-content .frame .fs-card__metric-main--spread {
  width: 352px;
}

.triauto-top-content .frame .fs-card__metric-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.triauto-top-content .frame .fs-card__pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.triauto-top-content .frame .fs-card__pair img {
  display: block;
  width: 52px;
  height: 39px;
  max-width: none;
  object-fit: contain;
}

.triauto-top-content .frame .fs-card__pair p {
  margin: 0;
  color: var(--ta-color-main);
  font-family: var(--ta-font-family-ja);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  white-space: nowrap;
}

.triauto-top-content .frame .fs-card__metric-heading {
  margin: 0;
  color: var(--ta-color-primary);
  font-family: var(--ta-font-family-ja);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

.triauto-top-content .frame .fs-card__metric-heading--swap {
  font-size: 24px;
}

.triauto-top-content .frame .fs-card__metric-heading--spread {
  font-size: 28px;
}

.triauto-top-content .frame .fs-card__metric-value {
  display: flex;
  align-items: baseline;
  margin: 0;
  color: var(--ta-color-main);
  white-space: nowrap;
}

.triauto-top-content .frame .fs-card__metric-num {
  font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}

.triauto-top-content .frame .fs-card__metric-unit {
  font-family: var(--ta-font-family-ja);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
}

/* ============================================================
   14-c. メインビジュアル(hero-v2) (Figma: 3133:17430)
         背景はCSSグラデーション(画像不使用)。1440pxのステージを
         中央配置し、min(1, 100vw/1440)で「縮小のみ」スケール。
         → 1920px等の大画面でも文字・余白が拡大せずFigma比率を維持。
   ============================================================ */

.triauto-top-content .frame .hero-v2 {
  /* --hero-v2-scale は JS(top-pc）が min(1, innerWidth/1440) を設定。
     未設定時は 1(=1440基準)。純CSSでは vw から無単位倍率を作れないため。 */
  position: relative;
  width: 100%;
  height: calc(430px * var(--hero-v2-scale, 1));
  overflow: hidden;
  background: linear-gradient(184.9deg, rgb(55, 125, 194) 21.5%, rgb(26, 60, 141) 73.7%);
}

/* 右下の明るい斜めシェイプ(Rectangle 29)をCSSで再現 */
.triauto-top-content .frame .hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(205deg, rgba(120, 170, 220, 0.45) 0%, rgba(120, 170, 220, 0) 55%);
  clip-path: polygon(42% 100%, 100% 26%, 100% 100%);
  pointer-events: none;
}

.triauto-top-content .frame .hero-v2__stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 430px;
  transform: translateX(-50%) scale(var(--hero-v2-scale, 1));
  transform-origin: top center;
}

.triauto-top-content .frame .hero-v2__content {
  position: absolute;
  left: 217px;
  top: 50%;
  transform: translateY(-50%);
  width: 396px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  z-index: 2;
}

.triauto-top-content .frame .hero-v2__title {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.triauto-top-content .frame .hero-v2__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 264px;
}

.triauto-top-content .frame .hero-v2__cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 40px;
  background: #ff6800;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.triauto-top-content .frame .hero-v2__cta:hover {
  opacity: 0.9;
}

.triauto-top-content .frame .hero-v2__cta-label {
  font-family: var(--ta-font-family-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
}

.triauto-top-content .frame .hero-v2__cta-arrow {
  font-family: var(--ta-font-family-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 1px;
}

.triauto-top-content .frame .hero-v2__lead {
  margin: 0;
  color: #fff;
  font-family: var(--ta-font-family-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

.triauto-top-content .frame .hero-v2__note {
  margin: 0;
  width: 348px;
  color: #fff;
  font-family: var(--ta-font-family-ja);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 1px;
}

.triauto-top-content .frame .hero-v2__phone {
  position: absolute;
  left: 852px;
  top: 14px;
  width: 351px;
  height: 410px;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.triauto-top-content .frame .hero-v2__badge {
  position: absolute;
  left: 510px;
  top: 186px;
  width: 177px;
  height: 129px;
  object-fit: contain;
  z-index: 2;
}

/* ============================================================
   15. NEWバッジ共通コンポーネント
   ============================================================ */

.triauto-top-content .frame .badge-new {
  /* NEW バッジのオレンジはユーザー指定 #ff6800（--ta-color-accent-light の #ffa54f ではない）。
     swap-lineup-card__badge と同色 */
  background: #ff6800;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-family: var(--ta-font-family-ja);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 4px 8px;
}

.triauto-top-content .frame .badge-new--corner {
  position: absolute;
  top: 16px;
  left: 16px;
}

/* ============================================================
   16. 取り扱い通貨ペア多数！ セクション (Figma: 2851:26214 / SP: 2916:14844)
        test-cards/ のカルーセル実装 (cp-*) を本番トークンに合わせて移植
   ============================================================ */

.triauto-top-content .frame .currency-pair-section {
  align-items: center;
  background-color: var(--ta-color-primary-pale);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 1440px;
  gap: var(--ta-space-4xl);
  overflow: hidden;
  padding: var(--ta-space-4xl);
  position: relative;
  flex: 0 0 auto;
}

.triauto-top-content .frame .cp-carousel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.triauto-top-content .frame .cp-carousel__body {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 100%;
}

.triauto-top-content .frame .cp-scrollable {
  box-sizing: border-box;
  cursor: grab;
  height: 260px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  width: min(860px, 100%);
}

.triauto-top-content .frame .cp-scrollable.is-dragging {
  cursor: grabbing;
}

.triauto-top-content .frame .cp-card-list {
  --base-deg: -60;
  --scroll-y: 0px;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  perspective: 720px;
  pointer-events: none;
  position: relative;
  transform: translateY(var(--scroll-y));
  transform-style: preserve-3d;
  width: 100%;
}

.triauto-top-content .frame .cp-card-list::after {
  content: "";
  display: block;
  height: 420px;
  pointer-events: none;
}

.triauto-top-content .frame .cp-ring-card {
  --card-scale: 1;
  /* リング半径。隣接カードの中心間距離 = 2 * --r * sin(180deg / --card-count) が
     カード幅 233px を下回ると重なる。通貨ペア8組=16枚では r=540px だと 211px となり重なるため 620px にした
     （620px なら中心間 242px ≒ 余白 9px で、7組=14枚・r=540px 当時の余白 7px とほぼ同等）。
     ペアを増減したらこの値を再計算すること。 */
  --r: 620px;
  /* 正面カードの奥行きを従来どおり -50px に保つため --r と同じだけ増やす（--z-offset = --r + 50px） */
  --z-offset: 670px;
  --rotate-deg: calc(360 / var(--card-count));
  --card-angle: calc((var(--base-deg) + (var(--index) * var(--rotate-deg))) * 1deg);
  height: 232px;
  left: calc(50% - 116.5px);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate3d(calc(sin(var(--card-angle)) * var(--r)), -50%, calc((cos(var(--card-angle)) * var(--r)) - var(--z-offset))) rotateY(var(--card-angle)) scale(var(--card-scale));
  transform-origin: center center;
  transform-style: preserve-3d;
  width: 233px;
}

.triauto-top-content .frame .cp-ring-card .cp-face {
  align-items: center;
  backface-visibility: hidden;
  background: var(--ta-color-bg);
  border: 1px solid var(--ta-color-card-border);
  border-radius: 10px;
  box-shadow: var(--ta-shadow-card);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
}

.triauto-top-content .frame .cp-ring-card .cp-front {
  transform: rotateY(0deg);
}

.triauto-top-content .frame .cp-ring-card .cp-back {
  transform: rotateY(180deg);
}

.triauto-top-content .frame .cp-ring-card.isActive .cp-front {
  transform: rotateY(179.9deg);
}

.triauto-top-content .frame .cp-ring-card.isActive .cp-back {
  transform: rotateY(359.9deg);
}

.triauto-top-content .frame .cp-card-list:not(.is-scrolling) .cp-face {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.triauto-top-content .frame .cp-card-face__inner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
  width: 100%;
}

.triauto-top-content .frame .cp-card__flags {
  display: block;
  flex: 0 0 auto;
  height: 48px;
  object-fit: contain;
  width: 64px;
}

.triauto-top-content .frame .cp-card__text {
  align-items: center;
  color: var(--ta-color-main);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.triauto-top-content .frame .cp-card__name {
  font-family: var(--ta-font-family-ja);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  margin: 0;
  /* 長いペア名（ノルウェークローネ/南アランド等）はカード内寸(約200px)に収まらないため
     折返しを許可。折返し位置はHTML側の <wbr>（「/」の直後）で制御（2026-07-10） */
  white-space: normal;
}

.triauto-top-content .frame .cp-card__code {
  font-family: var(--ta-font-family-ja);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: var(--ja-PC-body-16px-medium-letter-spacing);
  margin: 0;
  white-space: nowrap;
}

.triauto-top-content .frame .cp-dots {
  align-items: center;
  display: flex;
  gap: 17px;
  justify-content: center;
  min-height: 10px;
  width: 88px;
}

.triauto-top-content .frame .cp-dots__dot {
  appearance: none;
  background: var(--ta-color-bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 10px;
  padding: 0;
  transition: background 0.2s ease;
  width: 10px;
}

.triauto-top-content .frame .cp-dots__dot.is-active {
  background: var(--ta-color-main);
}

/* ============================================================
   17. 選べる・組み合わせる自動売買の収益率 セクション (Figma: 2933:35001)
        Figma準拠で専用マークアップ(profit-rate-*)を用意。
        カード内は「国旗の上に通貨ペア名」を縦積み(Figma構造どおり)。
   ============================================================ */

.triauto-top-content .frame .profit-rate-section {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: var(--ta-space-4xl);
  padding: var(--ta-space-4xl);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--ta-color-primary-pale);
}

.triauto-top-content .frame .profit-rate__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.triauto-top-content .frame .profit-rate__title {
  text-align: center;
}

.triauto-top-content .frame .profit-rate__bar {
  display: block;
  width: 100px;
  height: 2px;
  background: var(--ta-color-accent-light);
}

.triauto-top-content .frame .profit-rate__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: min(1000px, calc(100% - 80px));
}

.triauto-top-content .frame .profit-rate-grid {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.triauto-top-content .frame .profit-rate-card {
  flex: 0 0 235px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 235px;
  height: 254px;
  padding: 20px;
  background: var(--ta-color-bg);
  border: 1px solid var(--ta-color-card-border);
  border-radius: var(--ta-radius-l);
  box-shadow: var(--ta-shadow-card);
}

.triauto-top-content .frame .profit-rate-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.triauto-top-content .frame .profit-rate-card__flag {
  display: block;
  width: 52px;
  height: 39px;
  object-fit: contain;
}

.triauto-top-content .frame .profit-rate-card__name {
  margin: 0;
  color: var(--ta-color-main);
  font-family: var(--ta-font-family-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

.triauto-top-content .frame .profit-rate-card__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ta-color-main);
}

.triauto-top-content .frame .profit-rate-card__period {
  margin: 0 0 -10px;
  color: var(--ta-color-main);
  white-space: nowrap;
}

.triauto-top-content .frame .profit-rate-card__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 0;
  height: 100px;
  line-height: 100px;
  text-align: center;
  white-space: nowrap;
  color: var(--ta-color-main);
}

.triauto-top-content .frame .profit-rate-card__num {
  font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 100px;
  letter-spacing: 1px;
  vertical-align: baseline;
}

.triauto-top-content .frame .profit-rate-card__unit {
  font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 100px;
  letter-spacing: 1px;
  vertical-align: baseline;
}

.triauto-top-content .frame .profit-rate__note {
  margin: 0;
  color: var(--ta-color-sub-text); /* 注記はサブテキスト色で統一 */
}

/* ============================================================
   17-b. 業界最高水準のスワップポイント セクション (Figma: 2679:93870)
        Figma準拠で専用マークアップ(swap-high-*)。
        通貨ペア名は 28px(このセクション固有), 数字96px + 円28px。
        カードは 2枚(490px相当)を 20px gap で 1000px 幅に並べる。
        外枠は既存 .easy-section-2(全幅背景+SP非表示)を流用。
   ============================================================ */

.triauto-top-content .frame .swap-high-section {
  padding-top: 80px !important;
  padding-bottom: 40px !important;
}

.triauto-top-content .frame .swap-high__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.triauto-top-content .frame .swap-high__title {
  margin: 0;
  color: var(--ta-color-primary);
  font-family: var(--ta-font-family-ja);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}

.triauto-top-content .frame .swap-high__bar {
  display: block;
  width: 100px;
  height: 2px;
  background: var(--ta-color-accent-light);
}

.triauto-top-content .frame .swap-high__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: min(1000px, calc(100% - 160px));
}

.triauto-top-content .frame .swap-high__grid {
  display: flex;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.triauto-top-content .frame .swap-high-card {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 28px;
  background: var(--ta-color-bg);
  border-radius: var(--ta-radius-l);
}

.triauto-top-content .frame .swap-high-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.triauto-top-content .frame .swap-high-card__flag {
  display: block;
  width: 52px;
  height: 39px;
  object-fit: contain;
}

.triauto-top-content .frame .swap-high-card__name {
  margin: 0;
  color: var(--ta-color-main);
  font-family: var(--ta-font-family-ja);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  white-space: nowrap;
}

.triauto-top-content .frame .swap-high-card__value {
  margin: 0;
  text-align: center;
  white-space: nowrap;
  color: var(--ta-color-main);
}

.triauto-top-content .frame .swap-high-card__num {
  font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  vertical-align: baseline;
}

.triauto-top-content .frame .swap-high-card__unit {
  font-family: var(--ta-font-family-ja);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  vertical-align: baseline;
}

.triauto-top-content .frame .swap-high__note {
  margin: 0;
  color: var(--ta-color-sub-text);
  font-family: var(--ta-font-family-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 1px;
}

/* ============================================================
   18. 高スワップ銘柄を多数取り扱い セクション (Figma: 2679:108287)
        Figma準拠で専用マークアップ(swap-lineup-*)。2x2グリッド。
        カード: 左上にNEWバッジ(#ff6800/DIN 14px), その下に
        [国旗] + [通貨名20px / コード16px] を横並び(左寄せ)。
        外枠(全幅背景+SP非表示+80px gap)は共有オーバーライド
        (.easy-section-3, .swap-lineup-section)を流用。
   ============================================================ */

.triauto-top-content .frame .swap-lineup-section {
  padding-top: 40px !important;
}

.triauto-top-content .frame .swap-lineup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.triauto-top-content .frame .swap-lineup__title {
  margin: 0;
  color: var(--ta-color-primary);
  font-family: var(--ta-font-family-ja);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}

.triauto-top-content .frame .swap-lineup__bar {
  display: block;
  width: 100px;
  height: 2px;
  background: var(--ta-color-accent-light);
}

.triauto-top-content .frame .swap-lineup__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 8px;
  row-gap: 20px;
  width: min(1000px, calc(100% - 160px));
  margin: 0;
  padding: 0;
  list-style: none;
}

.triauto-top-content .frame .swap-lineup-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--ta-color-bg);
  border: 1px solid var(--ta-color-card-border);
  border-radius: var(--ta-radius-l);
  box-shadow: var(--ta-shadow-card);
}

.triauto-top-content .frame .swap-lineup-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #ff6800;
  color: #fff;
  font-family: "DIN 2014 Narrow", "Arial Narrow", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1px;
}

.triauto-top-content .frame .swap-lineup-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.triauto-top-content .frame .swap-lineup-card__flag {
  display: block;
  flex: 0 0 auto;
  width: 52px;
  height: 39px;
  object-fit: contain;
}

.triauto-top-content .frame .swap-lineup-card__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ta-color-main);
  letter-spacing: 1px;
}

.triauto-top-content .frame .swap-lineup-card__name {
  margin: 0;
  font-family: var(--ta-font-family-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.triauto-top-content .frame .swap-lineup-card__code {
  margin: 0;
  font-family: var(--ta-font-family-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}

/* ============================================================
   19. スワップ運用に役立つ便利な機能も充実 セクション (Figma: 2764:18839)
        グリッドは既存 .auto-feat-grid / .div-13 を再利用
   ============================================================ */

.triauto-top-content .frame .swap-tools-section {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: var(--ta-space-4xl);
  padding-top: 40px;
  padding-right: var(--ta-space-4xl);
  padding-bottom: var(--ta-space-4xl);
  padding-left: var(--ta-space-4xl);
  position: relative;
  flex: 0 0 auto;
  background-color: var(--ta-color-primary-pale);
}

/* ============================================================
   20. フッター前 最終CTAバナー セクション (Figma: 2764:19691)
   ============================================================ */

/* 背景は /index.php の .CV-2 実表示と同じ画像を使う。 */
.triauto-top-content .frame .final-cta-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: none;
  height: 323px;
  overflow: hidden;
  background: url("/img/common/conversion-area-background.png") center center / cover no-repeat;
  align-self: center;
  flex: 0 0 auto;
}

.triauto-top-content .frame .final-cta-decoration {
  display: none;
}

.triauto-top-content .frame .final-cta-decoration img {
  display: block;
  width: 790px;
  height: 323px;
  max-width: none;
  object-fit: contain;
}

.triauto-top-content .frame .final-cta-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.triauto-top-content .frame .final-cta-lead,
.triauto-top-content .frame .final-cta-note {
  margin: 0;
  color: var(--ta-color-primary-pale);
  font-family: var(--ta-font-family-ja);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  text-align: center;
  white-space: nowrap;
}

.triauto-top-content .frame .final-cta-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 800px;
  height: 80px;
  padding: 18px 40px;
  background: #ff6800;
  border-radius: 6px;
  box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* hover は .ta-hover-glow に統一。opacity 減衰は白レイヤーごと薄くなるため使わない（DESIGN.md） */

.triauto-top-content .frame .final-cta-button__label {
  font-family: var(--ta-font-family-ja);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
}

.triauto-top-content .frame .final-cta-button__arrow {
  font-family: var(--ta-font-family-ja);
  font-weight: var(--ja-PC-body-16px-medium-font-weight);
  font-size: var(--ja-PC-body-16px-medium-font-size);
  line-height: var(--ja-PC-body-16px-medium-line-height);
}

@media (max-width: 767px) {
  body.triauto-top .global-header-reserve {
    height: 48px !important;
  }

  /* SP は .triauto-sp-content が正。PC マークアップは SP では表示しない */
  body.triauto-top .triauto-top-content {
    display: none !important;
    padding-top: 0 !important;
  }

  .triauto-sp-content {
    --triauto-sp-scale: min(1, calc(100vw / 390px));
    /* Figma 374:994 準拠のため等倍（旧 *0.9 縮小は 2026-07-09 廃止。390px端末でデザイン原寸） */
    --triauto-sp-hero-scale: var(--triauto-sp-scale);
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow: hidden;
    background: #fff;
  }

  .triauto-top-content > .div-wrapper {
    padding-top: 0 !important;
  }

  .triauto-sp-hero,
  .triauto-sp-campaign {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Figma 374:994: 390x470 のメインビジュアル */
  .triauto-sp-hero {
    height: calc(470px * var(--triauto-sp-hero-scale));
    background: #1e5fad url("/triauto/assets/img/mainvisual-background-sp.png") center top / cover no-repeat;
  }

  .triauto-sp-hero__stage {
    position: relative;
    flex: 0 0 390px;
    width: 390px;
    height: 470px;
    overflow: hidden;
    background: transparent;
    transform: scale(var(--triauto-sp-hero-scale));
    transform-origin: top center;
  }

  /* テキスト列 (Figma Frame 499: 15,46 w257、縦積み gap 20px。
     h1 → 白箱2つ → No.1バッジ の順) */
  .triauto-sp-hero__copy {
    position: absolute;
    top: 46px;
    left: 15px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 257px;
  }

  .triauto-sp-hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--ta-font-family-ja);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* 白箱2つ（タグ / ロゴ）の縦積み (Figma Frame 498: gap 8px) */
  .triauto-sp-hero__boxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* 白タグ「自動売買という選択を。」(Figma 3208:13927: w228 固定) */
  .triauto-sp-hero__tag {
    box-sizing: border-box;
    width: 228px;
    margin: 0;
    padding: 4px 10px;
    background: #fff;
    color: #0a2463;
    font-family: var(--ta-font-family-ja);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* 白箱のトライオートFXロゴ (Figma 2796:17975) */
  .triauto-sp-hero__logo {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 4px 10px;
    background: #fff;
  }

  .triauto-sp-hero__logo img {
    display: block;
    width: 170px;
    height: 24px;
  }

  /* No.1 バッジ (Figma 374:1150: 165x144。PC と同じ mainvisual-award.svg を縮小利用) */
  .triauto-sp-hero__award {
    display: block;
    width: 165px;
    height: auto;
    max-width: none;
  }

  .triauto-sp-hero__note {
    position: absolute;
    top: 422px;
    left: 16px;
    z-index: 2;
    width: 348px;
    margin: 0;
    color: #fff;
    font-family: var(--ta-font-family-ja);
    font-size: 8px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  /* 右のスマホモック (Figma 3365:28382: 196x299 @ 192,51 回転なし)。
     透過元画像(2747x2861)を Figma の fill crop と同じ比率で拡大配置し、
     表示窓 (__phone-clip) の overflow: hidden で切り出す */
  .triauto-sp-hero__phone-clip {
    position: absolute;
    top: 51px;
    left: 192px;
    z-index: 1;
    width: 196px;
    height: 299px;
    overflow: hidden;
    pointer-events: none;
  }

  .triauto-sp-hero__phone {
    position: absolute;
    top: 0;
    left: -68.69%;
    display: block;
    width: 174.08%;
    height: 118.66%;
    max-width: none;
  }

  .triauto-sp-campaign {
    height: calc(163px * var(--triauto-sp-scale));
    background: #fff;
  }

  .triauto-sp-campaign__stage {
    position: relative;
    flex: 0 0 390px;
    width: 390px;
    height: 163px;
    overflow: hidden;
    transform: scale(var(--triauto-sp-scale));
    transform-origin: top center;
  }

  .triauto-sp-campaign__viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 163px;
    overflow: hidden;
  }

  .triauto-sp-campaign__track {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    height: 163px;
    padding: 11px 0;
    box-sizing: border-box;
    transform: translateX(-294px);
    transition: transform 0.45s cubic-bezier(0.45, 0, 0.2, 1);
    touch-action: pan-y;
    will-change: transform;
  }

  .triauto-sp-campaign__item {
    display: block;
    flex: 0 0 318px;
    width: 318px;
    height: 141px;
    text-decoration: none;
  }

  .triauto-sp-campaign__item img {
    display: block;
    width: 318px;
    height: 141px;
    max-width: none;
    object-fit: cover;
  }

  .triauto-sp-campaign__control {
    position: absolute;
    top: 66px;
    z-index: 3;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(10, 36, 99, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(10, 36, 99, 0.18);
    cursor: pointer;
  }

  .triauto-sp-campaign__control::before {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #0a2463;
    border-right: 2px solid #0a2463;
    content: "";
  }

  .triauto-sp-campaign__control--prev {
    left: 8px;
  }

  .triauto-sp-campaign__control--prev::before {
    transform: rotate(-135deg);
  }

  .triauto-sp-campaign__control--next {
    right: 8px;
  }

  .triauto-sp-campaign__control--next::before {
    left: 9px;
    transform: rotate(45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .triauto-sp-campaign__track {
        transition: none;
    }
  }

  .triauto-sp-reason,
  .triauto-sp-auto-feature {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .triauto-sp-reason {
    padding: 40px 20px;
    background: #fff;
  }

  .triauto-sp-auto-feature {
    padding: 40px 20px;
    background: #ebf3fc;
  }

  .triauto-sp-reason__inner,
  .triauto-sp-auto-feature__inner {
    width: min(350px, 100%);
  }

  .triauto-sp-section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0 auto;
    text-align: center;
  }

  .triauto-sp-section-heading h2 {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-section-heading span {
    display: block;
    width: 100px;
    height: 2px;
    background: #ffa54f;
  }

  .triauto-sp-reason__cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
  }

  .triauto-sp-reason-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #ebf3fc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(235, 243, 252, 0.48);
  }

  .triauto-sp-reason-card--award {
    min-height: 260px;
    justify-content: center;
    align-items: center;
  }

  .triauto-sp-reason-card__award-main {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
  }

  .triauto-sp-reason-card__award-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .triauto-sp-reason-card__award-lead,
  .triauto-sp-reason-card__pair {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .triauto-sp-reason-card__award-lead img {
    display: block;
    width: 39px;
    height: 32px;
    max-width: none;
  }

  .triauto-sp-reason-card__award-lead p,
  .triauto-sp-reason-card__pair h3 {
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-reason-card__award-lead p {
    font-size: 24px;
  }

  .triauto-sp-reason-card__award-copy h3 {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  .triauto-sp-reason-card__no1 {
    display: block;
    width: 145px;
    height: 96px;
    max-width: none;
  }

  .triauto-sp-reason-card__pair img {
    display: block;
    width: 52px;
    height: 39px;
    max-width: none;
  }

  .triauto-sp-reason-card__pair h3 {
    font-size: var(--triauto-sp-reason-pair-size, 20px);
  }

  .triauto-sp-reason-card--swap {
    --triauto-sp-reason-pair-size: 20px;
    --triauto-sp-reason-copy-size: 16px;
    --triauto-sp-reason-value-width: 166px;
    --triauto-sp-reason-value-height: 68px;
    --triauto-sp-reason-row-height: 68px;
    --triauto-sp-reason-label-width: 135px;
  }

  .triauto-sp-reason-card--spread {
    --triauto-sp-reason-pair-size: 18px;
    --triauto-sp-reason-copy-size: 18px;
    --triauto-sp-reason-value-width: 145px;
    --triauto-sp-reason-value-height: 76px;
    --triauto-sp-reason-row-height: 76px;
    --triauto-sp-reason-label-width: 126px;
  }

  .triauto-sp-reason-card--swap .triauto-sp-reason-card__pair {
    align-items: flex-start;
  }

  .triauto-sp-reason-card--spread .triauto-sp-reason-card__pair {
    align-items: center;
  }

  .triauto-sp-reason-card__metric {
    position: relative;
    display: block;
    width: 100%;
    min-height: var(--triauto-sp-reason-row-height, 68px);
    box-sizing: border-box;
    container-type: inline-size;
  }

  .triauto-sp-reason-card__metric-frame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: var(--triauto-sp-reason-row-height, 68px);
  }

  .triauto-sp-reason-card__metric p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    flex: 0 0 min(var(--triauto-sp-reason-label-width, 124px), calc(100% - 92px));
    min-width: 0;
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: var(--triauto-sp-reason-copy-size, 16px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-reason-card__metric strong {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--triauto-sp-reason-value-width, 166px);
    min-height: var(--triauto-sp-reason-value-height, 68px);
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 0;
    font-weight: 700;
    line-height: 0;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .triauto-sp-reason-card__metric-line {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    width: 100%;
  }

  /* Figma 374:1276 / 1130:21994: 310px行内に数値96px＋単位28pxで配置（SE等の狭幅端末で収まりにくいため少し縮小） */
  .triauto-sp-reason-card__metric-number {
    font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 82px;
    font-weight: 400;
    line-height: 0.72;
    letter-spacing: 0;
  }

  .triauto-sp-reason-card__metric-unit {
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-reason-card__note {
    width: 100%;
    margin: 0;
    color: var(--ta-color-sub-text); /* 注記はサブテキスト色で統一 */
  }

  .triauto-sp-auto-feature__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
  }

  .triauto-sp-auto-feature-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-auto-feature-card__image {
    display: block;
    width: 350px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .triauto-sp-auto-feature-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .triauto-sp-auto-feature-card__body h3 {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-auto-feature-card__body p {
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  /* ===== FX自動売買5部門 業界No.1 セクション (Figma: 378:3753) ===== */
  .triauto-sp-no1 {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    background: #fff;
    box-sizing: border-box;
  }

  .triauto-sp-no1__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: min(350px, 100%);
  }

  .triauto-sp-no1__award {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 349.156px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ebf3fc;
    box-shadow: 0 4px 14px rgba(235, 243, 252, 0.48);
  }

  .triauto-sp-no1__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-no1__laurel {
    position: relative;
    display: block;
    width: 173px;
    height: 113.25px;
  }

  .triauto-sp-no1__laurel-image,
  .triauto-sp-no1__number-image {
    position: absolute;
    display: block;
    max-width: none;
  }

  .triauto-sp-no1__laurel-image {
    bottom: 0;
    left: 0;
    width: 173px;
    height: 84px;
  }

  .triauto-sp-no1__number-image {
    top: 0;
    left: 27px;
    width: 121px;
    height: 80px;
  }

  .triauto-sp-no1__desc {
    width: 100%;
    text-align: center;
  }

  .triauto-sp-no1__desc p {
    margin: 0;
  }

  .triauto-sp-no1__desc p strong {
    color: #1e5fad;
    font-size: 18px;
    font-weight: 700;
  }

  .triauto-sp-no1__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .triauto-sp-no1__results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .triauto-sp-no1__note {
    width: 100%;
    margin: 0;
    color: var(--ta-color-sub-text); /* 注記はサブテキスト色で統一 */
  }

  .triauto-sp-no1-item {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 54px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ebf3fc;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(235, 243, 252, 0.48);
  }

  .triauto-sp-no1-item__bullet {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    background: #ffa54f;
    border-radius: 50%;
  }

  .triauto-sp-no1-item__label {
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* ===== 難しい設定は不要 セクション (Figma: 388:5149) ===== */
  .triauto-sp-easy {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    background: #fff;
    box-sizing: border-box;
  }

  .triauto-sp-easy__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: min(350px, 100%);
  }

  .triauto-sp-easy__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .triauto-sp-easy__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-easy__bar {
    display: block;
    width: 100px;
    height: 2px;
    background: #ffa54f;
  }

  .triauto-sp-easy__lead {
    margin: 0;
    color: #1a1a2e;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-easy__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .triauto-sp-easy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
  }

  .triauto-sp-easy-card__image {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* 画像自体が #f7f9fc の不透明背景を持つカードビジュアルのため、カード角丸(12px)を画像に直接当てる
       （PC側 .af-img と同じ扱い）。全画像とも1200x800(アスペクト1.5)に統一済みのため幅は共通 */
    border-radius: var(--ta-radius-l);
  }

  .triauto-sp-easy-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 286px;
    max-width: 100%;
    text-align: center;
  }

  .triauto-sp-easy-card__label {
    margin: 0;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .triauto-sp-easy-card__label--select {
    color: #ff6800;
  }

  .triauto-sp-easy-card__label--autoselect {
    color: #18a558;
  }

  .triauto-sp-easy-card__label--simulation {
    color: #1e5fad;
  }

  .triauto-sp-easy-card__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-easy-card__desc {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  /* ===== 業界最高水準のスワップポイント セクション (Figma: 388:10904) ===== */
  .triauto-sp-swap {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px 0;
    background: #ebf3fc;
    box-sizing: border-box;
  }

  .triauto-sp-swap__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: min(350px, 100%);
  }

  .triauto-sp-swap__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .triauto-sp-swap__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-swap__bar {
    display: block;
    width: 100px;
    height: 2px;
    background: #ffa54f;
  }

  .triauto-sp-swap__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-swap__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Figma 388:10910 / 388:10917: 350×174px、内側310×134px */
  .triauto-sp-swap-card {
    display: grid;
    align-items: center;
    grid-template-columns: 46.45% 53.55%;
    gap: 0;
    width: 100%;
    min-height: 174px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
  }

  .triauto-sp-swap-card__pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .triauto-sp-swap-card__pair img {
    display: block;
    width: 52px;
    height: 39px;
    max-width: none;
  }

  .triauto-sp-swap-card__pair p {
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-swap-card__value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* Figma 388:10916 / 388:10923（SE等の狭幅端末で収まりにくいため少し縮小） */
  .triauto-sp-swap-card__value > span:first-child {
    font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 82px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
  }

  .triauto-sp-swap-card__unit {
    line-height: 1.7;
  }

  .triauto-sp-swap__note {
    width: 100%;
  }

  .triauto-sp-swap__note p,
  .triauto-sp-swap__note a {
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
  }

  .triauto-sp-swap__note a {
    display: block;
    text-decoration: underline;
  }

  /* ===== 業界最狭水準のスプレッド セクション (Figma: 1836:8609) ===== */
  .triauto-sp-spread {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px 20px;
    background: #fff;
    box-sizing: border-box;
  }

  .triauto-sp-spread__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: min(350px, 100%);
  }

  .triauto-sp-spread__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .triauto-sp-spread__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-spread__bar {
    display: block;
    width: 100px;
    height: 2px;
    background: #ffa54f;
  }

  .triauto-sp-spread__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-spread__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Figma 2916:15940: 旗+通貨名を上段中央、数値を下段中央の縦型カード。
     セクション背景が白のため、境界は枠線+シャドウで出す */
  .triauto-sp-spread-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ebf3fc;
    border-radius: 12px;
    box-shadow: 0 4px 14px 0 rgba(235, 243, 252, 0.48);
  }

  .triauto-sp-spread-card__pair {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .triauto-sp-spread-card__pair img {
    display: block;
    width: 52px;
    height: 39px;
    max-width: none;
  }

  .triauto-sp-spread-card__pair p {
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-spread-card__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* PC版と同じDIN数字表現。SPでは現行の64px/単位20pxを維持する */
  .triauto-sp-spread-card__value span {
    font-family: "DIN 2014 Narrow", "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
  }

  .triauto-sp-spread__note {
    width: 100%;
  }

  .triauto-sp-spread__note p,
  .triauto-sp-spread__note a {
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
  }

  .triauto-sp-spread__note a {
    display: block;
    text-decoration: underline;
  }

  /* ===== 自動売買の特長・サポート体制 セクション (Figma: 1968:15808) ===== */
  .triauto-sp-features {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 20px 40px;
    background: #fff;
    box-sizing: border-box;
  }

  .triauto-sp-features__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: min(350px, 100%);
  }

  .triauto-sp-feature-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-feature-card__image {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 14px;
  }

  .triauto-sp-feature-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .triauto-sp-feature-card__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-feature-card__desc {
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-feature-card__checks {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .triauto-sp-feature-card__checks li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .triauto-sp-feature-card__check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: url('/triauto/assets/img/check-box-blue.svg') center / contain no-repeat;
  }

  .triauto-sp-support {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
  }

  .triauto-sp-support__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
    text-align: center;
  }

  .triauto-sp-support__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-support-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-support-card__image {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 14px;
    background: #ebf3fc;
  }

  .triauto-sp-support-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .triauto-sp-support-card__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-support-card__desc {
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  /* ===== 高スペックな取引ツール (CFD Top の同セクションを移植) ===== */
  .triauto-sp-app-tools {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ta-space-2xl);
    width: 100%;
    padding: var(--ta-section-padding-sp) var(--ta-space-l);
    background: var(--ta-color-primary-pale);
  }

  .triauto-sp-app-tools__heading,
  .triauto-sp-app-tools__content,
  .triauto-sp-app-tools__download {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .triauto-sp-app-tools__content {
    gap: var(--ta-space-l);
  }

  .triauto-sp-app-tools__lead,
  .triauto-sp-app-tools__note {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .triauto-sp-app-tools__note {
    color: var(--ta-color-sub-text); /* 注記はサブテキスト色で統一 */
  }

  .triauto-sp-app-tools__devices {
    display: block;
    width: min(334px, 100%);
    height: auto;
  }

  .triauto-sp-app-tools__download {
    justify-content: center;
    gap: var(--ta-space-xs);
  }

  .triauto-sp-app-tools__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ta-space-l);
    width: 100%;
  }

  .triauto-sp-app-tools__badge-link {
    display: inline-flex;
    flex: 0 1 auto;
  }

  .triauto-sp-app-tools__badge {
    display: block;
    flex: 0 1 auto;
    height: auto;
  }

  .triauto-sp-app-tools__badge--app {
    width: 147.39px;
  }

  .triauto-sp-app-tools__badge--google {
    width: 182.85px;
  }

  /* ===== Torche CV セクション (Figma: 388:11925) ===== */
  .triauto-sp-torche {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(588px * var(--triauto-sp-scale));
    margin: 0;
    overflow: hidden;
    background: #0b3cae url('/triauto/assets/img/torche-bacground-sp.png') center top / cover no-repeat;
  }

  .triauto-sp-torche__stage {
    position: relative;
    z-index: 2;
    flex: 0 0 390px;
    width: 390px;
    height: 588px;
    overflow: hidden;
    transform: scale(var(--triauto-sp-scale));
    transform-origin: top center;
  }

  .triauto-sp-torche__world {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: center;
    opacity: 0.28;
    filter: brightness(0) invert(1);
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .triauto-sp-torche__content {
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 390px;
    color: #fff;
    text-align: center;
  }

  .triauto-sp-torche__tag {
    width: 100%;
    margin: 0;
    color: #fff;
    font-family: "DIN 2014 Narrow", "Arial Narrow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .triauto-sp-torche__title {
    width: 100%;
    margin: 0;
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  .triauto-sp-torche__logo {
    position: absolute;
    top: 266px;
    left: 20px;
    z-index: 3;
    display: block;
    width: 237px;
    height: 99px;
    max-width: none;
  }

  .triauto-sp-torche__illustration {
    position: absolute;
    top: 229px;
    left: 264px;
    z-index: 3;
    display: block;
    width: 106px;
    height: 179px;
    max-width: none;
  }

  .triauto-sp-torche__cta {
    position: absolute;
    top: 438px;
    left: 20px;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: 350px;
    height: 70px;
    padding: 18px 40px;
    box-sizing: border-box;
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    line-height: 1.7;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    background: #ff6800;
    border-radius: 6px;
    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2);
  }

  .triauto-sp-torche__cta span:first-child {
    font-size: 20px;
    font-weight: 700;
  }

  .triauto-sp-torche__cta span:last-child {
    margin-top: -1px;
    font-size: 16px;
    font-weight: 500;
  }

  /* ===== 3ステップで簡単口座開設 セクション (Figma: 391:12666) ===== */
  .triauto-sp-flow {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  .triauto-sp-flow__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: min(350px, 100%);
  }

  .triauto-sp-flow__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    text-align: center;
  }

  .triauto-sp-flow__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  .triauto-sp-flow__bar {
    display: block;
    width: 100px;
    height: 2px;
    background: #ffa54f;
  }

  .triauto-sp-flow__lead {
    width: 100%;
    margin: 0;
    color: #1a1a2e;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  .triauto-sp-flow__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .triauto-sp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 245px;
    padding: 20px;
    box-sizing: border-box;
    background: #f7f9fc;
    border-radius: 16px;
    text-align: center;
  }

  .triauto-sp-flow-step__icon {
    display: block;
    width: 58px;
    height: 58px;
    max-width: none;
  }

  .triauto-sp-flow-step__title {
    margin: 0;
    color: #0a2463;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }

  .triauto-sp-flow-step__desc {
    width: 100%;
    margin: 0;
    color: #5a6a85;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
  }

  .triauto-sp-flow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 23px;
    color: #1e5fad;
    font-family: Inter, "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transform: rotate(90deg);
  }

  /* ===== NEWバッジ共通コンポーネント ===== */
  .triauto-sp-badge-new {
    display: inline-block;
    /* NEW バッジのオレンジはユーザー指定 #ff6800（PC .badge-new と同色） */
    background: #ff6800;
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    border-radius: 4px;
    padding: 4px 8px;
  }

  /* ===== 取り扱い通貨ペア多数！ セクション (Figma: 2916:14844) ===== */
  .triauto-sp-currency {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    background: #ebf3fc;
    box-sizing: border-box;
    overflow: hidden;
  }

  .triauto-sp-currency__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: min(350px, 100%);
  }

  /* SPは3Dリングではなく「横長カード×2段」の無限マーキー。
     上段(.cp-marquee__row)は左へ、下段(--reverse)は右へ流れる */
  .triauto-sp-currency .cp-marquee {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 40px;
    /* セクションのpadding 20pxを突き抜けるフルブリード。両端は .triauto-sp-currency の overflow: hidden でクリップ */
    width: 100vw;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }

  .triauto-sp-currency .cp-marquee__row {
    display: flex;
    width: max-content;
    list-style: none;
    margin: 0;
    padding: 0;
    /* 縦方向はページスクロールに渡し、横ドラッグだけJS(currency-marquee.js)が拾う */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    animation: cp-marquee-scroll 26s linear infinite;
  }

  .triauto-sp-currency .cp-marquee__row--reverse {
    animation-direction: reverse;
    animation-duration: 32s;
  }

  /* currency-marquee.js が有効なときはCSSアニメを止め、JSのtransform制御に切り替える
     （ドラッグでの加速・慣性のため）。CSSアニメはJS無効環境のフォールバック */
  .triauto-sp-currency .cp-marquee.is-js .cp-marquee__row {
    animation: none;
    will-change: transform;
  }

  @keyframes cp-marquee-scroll {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      /* カード一式を2周並べているため -50% でシームレスにループする */
      transform: translate3d(-50%, 0, 0);
    }
  }

  .triauto-sp-currency .cp-marquee-card {
    align-items: center;
    background: #fff;
    border: 1px solid #ebf3fc;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(30, 95, 173, 0.1);
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    height: 56px;
    /* カードの横間隔。-50%ループの計算を揃えるため row の gap ではなく margin-right で統一 */
    margin-right: 12px;
    padding: 0 16px;
  }

  .triauto-sp-currency .cp-card__flags {
    display: block;
    flex: 0 0 auto;
    height: 32px;
    object-fit: contain;
    width: 42px;
  }

  .triauto-sp-currency .cp-card__text {
    align-items: flex-start;
    color: #1e5fad;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .triauto-sp-currency .cp-card__name {
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
  }

  .triauto-sp-currency .cp-card__code {
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
  }

  /* ===== 選べる・組み合わせる自動売買の収益率 セクション (Figma想定・PC 2933:35001 に準拠) ===== */
  .triauto-sp-profit-rate {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    background: #ebf3fc;
    box-sizing: border-box;
  }

  .triauto-sp-profit-rate__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: min(350px, 100%);
  }

  /* Figma 2963:28498: 2列グリッドの縦型カード */
  .triauto-sp-profit-rate__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
  }

  .triauto-sp-profit-rate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--ta-color-card-border);
    border-radius: 12px;
    box-shadow: var(--ta-shadow-card);
  }

  .triauto-sp-profit-rate-card__pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .triauto-sp-profit-rate-card__pair img {
    display: block;
    width: 52px;
    height: 39px;
    max-width: none;
  }

  .triauto-sp-profit-rate-card__pair p {
    margin: 0;
    color: #1e5fad;
    white-space: nowrap;
  }

  .triauto-sp-profit-rate-card__pair .triauto-sp-profit-rate-card__period {
    /* pair の gap 8px と合わせて名前との間隔を 16px にする */
    margin: 8px 0 0;
    color: #1e5fad;
  }

  /* 期間ラベルの直下に数値を詰める（Figma: mb -10px 相当） */
  .triauto-sp-profit-rate-card__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: -10px 0 0;
    color: #1e5fad;
    font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-profit-rate-card__value span {
    font-family: "DIN 2014 Narrow-Bold", "Arial Narrow", Arial, sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.7;
  }

  .triauto-sp-profit-rate__note {
    margin: 20px 0 0;
    color: var(--ta-color-sub-text); /* 注記はサブテキスト色で統一 */
  }

  @media (max-width: 359px) {
    .triauto-sp-profit-rate-card__pair p {
      min-height: 54px;
      white-space: normal;
      text-align: center;
    }

    .triauto-sp-swap-card__pair p {
      font-size: 16px;
      line-height: 1.4;
      white-space: normal;
    }

  }

  /* ===== 高スワップ銘柄を多数取り扱い セクション (Figma想定・PC 2679:108287 に準拠) ===== */
  .triauto-sp-swap-lineup {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    background: #ebf3fc;
    box-sizing: border-box;
  }

  .triauto-sp-swap-lineup__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: min(350px, 100%);
  }

  .triauto-sp-swap-lineup__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Figma 2916:15282: NEWバッジを上段（国旗に被せない）、下段に旗+通貨名の縦並びカード */
  .triauto-sp-swap-lineup-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
  }

  .triauto-sp-swap-lineup-card__row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .triauto-sp-swap-lineup-card img {
    display: block;
    width: 52px;
    height: 39px;
    max-width: none;
  }

  .triauto-sp-swap-lineup-card p {
    margin: 0;
    color: #1e5fad;
    font-family: "Noto Sans JP", "Noto Sans", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1px;
  }

  .triauto-sp-swap-lineup-card__pair {
    display: flex;
    flex-direction: column;
  }

  /* Figma 2916:15275: 通貨コード行（名前の下） */
  .triauto-sp-swap-lineup-card__code {
    color: #5a6a85 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 1px;
  }

  /* ===== スワップ運用に役立つ便利な機能も充実 セクション (Figma: 2916:15309) ===== */
  .triauto-sp-swap-tools {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
    background: #ebf3fc;
    box-sizing: border-box;
  }

  .triauto-sp-swap-tools__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: min(350px, 100%);
  }

  /* Figma 2916:15309 のカードタイトルは h3-18px（共通 .triauto-sp-feature-card__title の28pxを上書き） */
  .triauto-sp-swap-tools .triauto-sp-feature-card__title {
    font-size: 18px;
  }

  /* ===== SP表示時に重複する PC 版セクションを非表示 ===== */
  .triauto-top-content .frame .auto-feat-grid,
  .triauto-top-content .frame .auto-feature-section,
  .triauto-top-content .frame .auto-trade-section,
  .triauto-top-content .frame .currency-pair-section,
  .triauto-top-content .frame .easy-section-2,
  .triauto-top-content .frame .easy-section-3,
  .triauto-top-content .frame .feature-sec,
  .triauto-top-content .frame .final-cta-section,
  .triauto-top-content .frame .flow-section,
  .triauto-top-content .frame .profit-rate-section,
  .triauto-top-content .frame .swap-lineup-section,
  .triauto-top-content .frame .swap-tools-section,
  .triauto-top-content .frame .torche-common-section,
  .triauto-top-content .frame > .easy-section,
  .triauto-top-content .frame > .div-19:has(> .div-12),
  .triauto-top-content .frame > .div-19:has(> .auto-feat-grid),
  .triauto-top-content .frame > .easy-section-2,
  .triauto-top-content .frame > .easy-section-3 {
    display: none !important;
  }

  .triauto-top-content .frame {
    padding-top: 0 !important;
  }

  .triauto-top-content .frame .triauto-mainvisual {
    display: none !important;
  }

  .triauto-top-content .frame .triauto-mainvisual {
    height: 360px !important;
  }

  .triauto-top-content .frame .torche-common-section {
    --torche-frame-offset: 0px;
    width: 1440px !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .triauto-top-content .frame .torche-common-section .hero-c-3 {
    width: 1440px !important;
  }

  .triauto-mainvisual__inner {
    transform: translateX(-50%) scale(0.706);
    transform-origin: top center;
  }
}

/* ============================================================
   21. PC全体のフレキシブル化: 768px〜1439px は等倍縮小で形を保つ
       /index.php (/css/add.css)・/cfd/index.php (style-index.css) と同方式。
       Figma基準幅1440pxのPCレイアウト全体を zoom でウィンドウ幅に
       合わせて縮小する。レイアウトの形・比率は1440px時と完全に同一
       のまま小さくなる（フォントサイズ等の個別調整はしない）。
       ・1440px以上: 従来どおり等倍。max-width:1440で中央寄せ、
         full-bleed背景(100vw逆算)だけ画面端まで伸びる
       ・767px以下: 従来どおりSP表示 .triauto-sp-content (このブロックの対象外)
       ・zoom は transform:scale と違いレイアウト寸法ごと縮むため、
         下に余白が残らず、中央寄せもそのまま機能する
       ・@supports ガード: calc の length÷length 除算(数値化)を解釈
         できないブラウザでは、この節全体を無効にして現状表示を維持
         (torche の狭幅フォールバックは Section 14 側 @supports not を参照)
   ============================================================ */
@supports (zoom: calc(100vw / 1440px)) {
  @media (min-width: 768px) and (max-width: 1439px) {
    /* top-pc.css Section 1「zoom アプローチ→レスポンシブ frame」の
       width:100% / zoom:unset をこのレンジだけ再上書きして縮小を有効化 */
    .triauto-top-content .frame {
      width: 1440px !important;
      max-width: none !important;
      zoom: calc(100vw / 1440px) !important;
    }

    /* zoom 空間内ではフレーム幅(1440px)自体が画面全幅に相当するため、
       100vw ベースの full-bleed 逆算はズレる(zoom で縮んで画面幅より
       狭くなる)。このレンジではフレーム全幅 1440px に戻す。
       元指定: 本ファイル .triauto-mainvisual / .easy-section-3 /
       .swap-lineup-section / .torche-common-section(+.hero-c-3) /
       .final-cta-section、top-pc.css 5-b .CV-3 / 5-c .top-bg-section */
    .triauto-top-content .frame .triauto-mainvisual,
    .triauto-top-content .frame .CV-3,
    .triauto-top-content .frame .top-bg-section,
    .triauto-top-content .frame .easy-section-3,
    .triauto-top-content .frame .swap-lineup-section,
    .triauto-top-content .frame .torche-common-section,
    .triauto-top-content .frame .torche-common-section .hero-c-3,
    .triauto-top-content .frame .final-cta-section {
      width: 1440px !important;
      max-width: none !important;
    }

    /* 100vw full-bleed 用の負マージン(calc(50% - 50vw))センタリングを解除 */
    .triauto-top-content .frame .triauto-mainvisual,
    .triauto-top-content .frame .torche-common-section {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* torche 左右余白: 100vw 基準 → 1440px 基準に固定
       (元指定 max(40px, calc((100vw - 1000px) / 2)) の 100vw=1440px 換算) */
    .triauto-top-content .frame .torche-common-section {
      --torche-side: 220px;
    }
  }
}

/* ============================================================
 * Promo banners (mainvisual 下)  added 2026-07-16
 * PC: 11通貨ペア追加 + 25銘柄追加CP 横並び（フラット画像）。
 * .frame は 1440px 設計→zoom 縮小。バナーは設計px(530)で配置。
 * ============================================================ */
.triauto-top-content .frame .ta-promo {
  padding: var(--ta-space-2xl) 0 0; /* hero下 40px */
  background-color: var(--ta-color-bg);
}
.triauto-top-content .frame .ta-promo__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}
.triauto-top-content .frame .ta-promo__item {
  display: block;
  width: 530px;
  height: 200px;
  overflow: hidden;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.triauto-top-content .frame .ta-promo__item:hover {
  opacity: 0.88;
}
.triauto-top-content .frame .ta-promo__img {
  display: block;
  width: 530px;
  height: 200px;
  object-fit: cover;
}