/* TOPページ専用スタイル */
.site-header.-top {
  margin-block-end: calc(-1 * var(--site-header-height, var(--space-size-88)));
  background: transparent;
}

/* TOP：メインビジュアル */

:where(.margin-site) .hero {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: 56.25vw;
  padding: 11.0417vw 6.6667%;
  background: var(--color-navy);

  & .image {
    position: absolute;
    inset: 0;
  }

  & :where(.image img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  & .content {
    position: relative;
    max-inline-size: 100%;
  }

  & h1 {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: 1;
  }

  & .eyebrow,
  & .title {
    max-inline-size: 100%;
    padding-inline: var(--space-4);
    background: var(--color-navy);
  }

  & .eyebrow {
    padding-block: var(--space-size-19) var(--space-size-22);
    font-size: 3.5rem;
  }

  & .title {
    padding-block: var(--space-size-18) var(--space-size-30);
    font-size: 12rem;
    line-height: 1;
  }

  & .lead {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1;
  }

  & .lead span {
    max-inline-size: 100%;
    padding: var(--space-size-12) var(--space-3);
    color: var(--color-navy);
    background: var(--color-white);
  }
}

:where(.top-page) .section-area {
  &.-inset {
    margin-inline: var(--space-4);
  }

  &.-inset + .section-area.-inset {
    margin-block-start: var(--space-4);
  }
}

:where(.top-page) > article {
  padding-block-end: var(--space-9);
}

:where(.top-page) .phrase {
  display: inline-block;
  max-inline-size: 100%;
}

:where(.top-page) :where(.pain-area) .section-title .title,
:where(.top-page) :where(.comparison-area) .section-title .title {
  max-inline-size: 46rem;
  margin-inline: auto;
}

:where(.top-page) :where(.benefit-area) .section-title .title {
  max-inline-size: 60rem;
  margin-inline: auto;
}

/* 共通の紹介カード */

:where(.top-page) .feature-card:where(.-merit, .-benefit) .title {
  max-inline-size: 24rem;
  margin-inline: auto;
  text-align: center;
}

:where(.margin-site) .pain-area > .inner {
  max-inline-size: var(--reading-width);
}

/* TOP：悩み紹介の吹き出し・人物イラスト */

:where(.margin-site) .pain-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-size-38);
  margin-block-start: var(--space-5);

  & .bubble {
    position: relative;
    margin-block-start: var(--space-size-28);
    padding: var(--space-size-30) var(--space-size-20);
    color: #4d4d4d;
    background: var(--color-cream);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    text-align: center;
  }

  & .bubble::after {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% 0;
    border: 12px solid transparent;
    border-block-start-color: var(--color-cream);
    border-inline-end-color: var(--color-cream);
    content: "";
  }

  & .bubble:nth-child(2)::after {
    transform: scaleX(-1);
  }

  & .bubble:nth-child(2) {
    grid-column: 3;
    margin-block-start: var(--space-size-68);
  }

  & .person {
    position: relative;
    grid-area: 1 / 2;
  }

  & :where(.person > img:first-child) {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  & .worry {
    inline-size: 8rem;
    block-size: auto;
    position: absolute;
    inset-block-start: calc(-1 * var(--space-2));
    inset-inline-end: calc(-1 * var(--space-6));
  }
}

:where(.margin-site) .pain-area {
  & .conclusion {
    margin-block-start: var(--space-5);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    text-align: center;
  }

  & .conclusion .intro {
    display: block;
  }

  & .conclusion strong {
    color: var(--color-gold);
  }
}

:where(.top-page) .feature-card {
  box-shadow: none;

  &.-merit {
    display: block;
    padding: var(--space-6);
  }

  &:where(.-merit) > img {
    display: block;
    inline-size: 16rem;
    block-size: auto;
    margin: 0 auto var(--space-3);
  }

  & .title {
    font-size: var(--text-lg);
    line-height: 1.5;
  }
}

:where(.margin-site) .point-list {
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-3);
  padding-inline-start: var(--space-size-14);
  list-style: disc;
  font-size: var(--text-sm);
  line-height: 1.5;

  & li::marker {
    color: transparent;
  }

  & li {
    position: relative;
  }

  & li::before {
    position: absolute;
    inset-inline-start: calc(-1 * var(--space-size-14));
    inset-block-start: calc((1lh - var(--space-size-6)) / 2);
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: 50%;
    background: var(--color-gold);
    content: "";
  }
}

:where(.margin-site) .section-link {
  margin-block-start: var(--space-6);
}

:where(.margin-site) .merit-area .text-link {
  --link-color: var(--color-white);
}

/* TOP：信用取引・現物取引の比較表 */

/* TOP：比較表・手数料表の列間 */
:where(.margin-site) :is(.trade-table, .fee-table) {
  --table-column-gap: var(--space-3);
  --table-gutter-color: var(--color-white);

  & :is(thead th:nth-child(2), tbody .credit) {
    box-shadow: inset calc(-1 * var(--table-column-gap)) 0
      var(--table-gutter-color);
  }
}

/* TOP：比較表の列・見出し・セル */
:where(.margin-site) .trade-table {
  table-layout: fixed;
  inline-size: 100%;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.5;

  & .row-column {
    inline-size: 20%;
  }

  & .credit-column {
    inline-size: 40.6667%;
  }

  & :is(th, td) {
    border-block-end: 1px solid var(--color-border);
    vertical-align: middle;
  }

  & th {
    font-weight: var(--weight-semibold);
    text-align: start;
  }

  & td {
    padding: var(--space-3) var(--space-2);
    color: var(--color-gold);
    background: var(--color-surface);
    text-align: center;
  }

  & td:where(.credit) {
    padding-inline-end: var(--space-4);
  }

  & td.cash {
    color: var(--color-gray);
  }

  & :where(thead) th {
    padding: 0;
    text-align: center;
  }

  & thead .credit {
    background: var(--color-gold);
  }

  & thead .cash {
    background: var(--color-gray);
  }

  & thead .label {
    display: block;
    padding: var(--space-size-12);
    color: var(--color-white);
  }

  & thead .credit .label {
    margin-inline-end: var(--space-3);
  }

  & .symbol {
    display: block;
    margin-inline: auto;
  }

  & .mobile-label {
    display: none;
  }
}

/* PCヘッダー：ナビゲーション */
@media (width >= 1200px) {
  .site-header.-top > .inner {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(
        max-content,
        1fr
      );
  }

  .site-header.-top .button-primary {
    justify-self: end;
  }
}

@media (width >= 768px) {
  :where(.top-page) .hero .lead {
    line-height: 1;
  }
}

:where(.margin-site) .campaign-area {
  & .section-title {
    position: relative;
    padding-block-start: var(--space-size-72);
  }

  & .english {
    position: absolute;
    inset-block-start: calc(-1 * var(--space-3));
    inset-inline: 0;
    font-size: clamp(5.6rem, 8.89vw, 12rem);
    opacity: 0.1;
  }
}

:where(.margin-site) .campaign-banner {
  display: block;
  max-inline-size: 78.4rem;
  margin-inline: auto;
  text-decoration: none;

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
}

:where(.margin-site) .campaign-area .caption.text-link {
  display: block;
  max-inline-size: 78.4rem;
  margin-block-start: var(--space-2);
  margin-inline: auto;
  text-align: center;
}

/* TOP：キャンペーンの注意書き */
:where(.top-page) .campaign-notice {
  max-inline-size: 78.4rem;
  margin-block-start: var(--space-6);
  margin-inline: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;

  @media (width >= 768px) {
    text-align: center;
  }
}

:where(.top-page) .feature-card.-benefit {
  display: block;
  padding: 0 0 var(--space-6);
}

:where(.top-page) .feature-card:where(.-benefit) img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

:where(.top-page) .feature-card:where(.-benefit) .title {
  padding: var(--space-2) var(--space-4) 0;
}

/* TOP：取引コストの紹介 */

:where(.margin-site) .cost-intro {
  display: grid;
  grid-template-columns: minmax(0, 440fr) minmax(0, 680fr);
  gap: var(--space-size-80);

  & > .content {
    grid-column: 2;
    grid-row: 1 / 3;
    padding-block-end: var(--space-9);
  }

  & .section-title {
    max-inline-size: 40rem;
    text-align: start;
  }

  & .section-title::after {
    margin-inline-start: 0;
  }

  & .point {
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }

  & .badge {
    position: relative;
    display: inline-block;
    margin-block-end: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: 100px;
    color: var(--color-white);
    background: var(--color-gold);
    font-weight: var(--weight-semibold);
  }

  & .badge::after {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: calc(50% - var(--space-size-6));
    border-inline: 6px solid transparent;
    border-block-start: 12px solid var(--color-gold);
    content: "";
  }

  & :where(.point) .title {
    margin-block-end: var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
  }

  & .point sup {
    font-size: var(--text-sm);
  }

  & .point p {
    color: var(--text-muted);
  }

  & .note-list {
    margin-block-start: var(--space-6);
  }
}

:where(.margin-site) .cost-person {
  inline-size: 19.2rem;
  block-size: auto;
  display: block;
  grid-column: 1;
  align-self: end;
  margin-inline-start: var(--space-6);
}

:where(.margin-site) .cost-panel {
  padding: var(--space-8) max(var(--space-4), 8.6667%);
  background: var(--color-surface);

  & > .title {
    padding-block-end: var(--space-2);
    border-block-end: 2px solid var(--color-border);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
  }

  & .sub-title {
    margin-block: var(--space-8) var(--space-4);
    padding-inline-start: var(--space-3);
    border-inline-start: 8px solid var(--color-gold);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
  }

  & > .sub-title:first-of-type {
    margin-block-start: var(--space-6);
  }
}

/* TOP：手数料表 */

:where(.margin-site) .fee-table,
:where(.margin-site) .interest-table {
  table-layout: fixed;
  line-height: 1.5;
}

:where(.margin-site) .fee-table {
  --table-gutter-color: var(--color-surface);

  &:has(+ p) {
    margin-bottom: var(--space-6);
  }

  & :is(th, td) {
    padding: var(--space-size-18) var(--space-2);
    border-block-end: 1px solid var(--color-border);
    font-weight: var(--weight-semibold);
    vertical-align: middle;
  }

  & th:where(:first-child) {
    text-align: start;
  }

  & thead th:where(:not(:first-child)) {
    color: var(--color-white);
    background: var(--color-gold);
  }

  & thead th:where(:last-child) {
    background: var(--color-gray);
  }

  & td {
    color: var(--color-gold);
    background: var(--color-white);
    text-align: center;
  }

  & td.cash {
    color: var(--color-gray);
  }

  & small {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
  }
}

:where(.margin-site) .interest-table {
  border-collapse: collapse;
  margin-block: var(--space-6);
  font-size: var(--text-sm);

  & :is(th, td) {
    padding: var(--space-size-12) var(--space-3);
    border: 1px solid var(--color-border);
    vertical-align: middle;
  }

  & thead :is(th, td) {
    border-color: var(--color-white);
    padding-block: var(--space-1);
    color: var(--color-white);
    background: var(--color-navy);
  }

  & thead th {
    text-align: center;
    inline-size: 33.3333%;
  }

  & tbody th {
    border-color: var(--color-white);
    background: var(--color-border);
    font-weight: var(--weight-semibold);
    text-align: start;
  }

  & td {
    background: var(--color-white);
    text-align: center;
  }
}

:where(.top-page) .section-area:is(.trade-area, .apply-area) {
  position: relative;
  isolation: isolate;
  background: var(--color-navy);

  /* 取引フロー・申込みセクションの背景画像 */
  & > .section-background {
    position: absolute;
    z-index: -1;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
  }
}

/* TOP：申込み・審査・取引開始のフロー */

:where(.margin-site) .trade-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  margin-block-start: var(--space-size-56);
  list-style: none;

  & li {
    --step-tip: 4.8rem;

    position: relative;
    isolation: isolate;
    padding: var(--space-7) var(--space-4);
    color: var(--color-navy);
    background: transparent;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
  }

  & li::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--color-white);
    content: "";
  }

  & li:not(:last-child)::before {
    inset-inline-end: calc(-1 * var(--step-tip));
    clip-path: polygon(
      0 0,
      calc(100% - var(--step-tip)) 0,
      100% 50%,
      calc(100% - var(--step-tip)) 100%,
      0 100%
    );
  }

  & img {
    flex: none;
    inline-size: 5.6rem;
    block-size: 5.6rem;
  }

  & li > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
  }

  & li:last-child > div > :where(span) {
    max-inline-size: 21.6rem;
  }

  & .number {
    position: absolute;
    inset-block-start: calc(-1 * var(--space-4));
    inset-inline-start: calc(50% - var(--space-4));
    display: grid;
    place-items: center;
    inline-size: 4.8rem;
    block-size: 4.8rem;
    border-radius: 50%;
    color: var(--color-white);
    background: var(--color-gold);
    font-family: var(--font-english);
    font-size: 3.2rem;
    font-weight: var(--weight-medium);
    line-height: 1;
  }
}

:where(.margin-site) .trade-area {
  & .action {
    margin-block-start: var(--space-6);
    text-align: center;
  }

  & .button-primary {
    inline-size: min(100%, 57.6rem);
  }
}

/* 取引開始案内：証券総合取引口座の開設 */
:where(.top-page) .trade-account {
  margin-block-start: var(--space-7);
  padding: var(--space-6);
  color: var(--color-black);
  background: var(--color-white);
  text-align: center;

  & .title {
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-end: var(--space-5);
    font-size: var(--text-xl);
  }

  & .title .line {
    border-block-end: 2px solid currentcolor;
  }

  & .button-primary > span,
  & .button-primary .last-line {
    display: inline-flex;
    align-items: center;
  }

  & .button-primary .last-line {
    gap: var(--space-2);
  }

  & .button-primary {
    inline-size: min(100%, 44.8rem);
  }
}

:where(.margin-site) .information-card {
  display: block;

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    margin-block-end: var(--space-2);
  }
}

:where(.margin-site) .faq-link {
  max-inline-size: var(--reading-width);
  margin-inline: auto;
  margin-block-start: var(--space-6);
  text-align: start;
}

:where(.margin-site) .tools-area > .inner {
  --space-size-300: 30rem;

  position: relative;
}

/* TOP：ツール紹介の人物イラスト */

:where(.margin-site) .tools-person {
  inline-size: 26rem;
  block-size: auto;
  position: absolute;
  inset-block-start: calc(-1 * var(--space-size-30));
  inset-inline-end: var(--space-6);
  pointer-events: none;
}

:where(.margin-site) .tools-area .section-title {
  padding-inline: var(--space-size-300);
}

:where(.top-page) .feature-card.-tool {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

:where(.top-page) .feature-card.-tool > img,
:where(.margin-site) .image-placeholder {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
}

:where(.margin-site) .image-placeholder {
  background: #999;
}

:where(.top-page) .feature-card.-tool p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

:where(.top-page) .feature-card.-tool .button-primary {
  align-self: center;
  margin-block-start: auto;
}

:where(.margin-site) .apply-area {
  & .lead {
    text-align: center;
  }

  & .apply-options {
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  & .option {
    padding: var(--space-6);
    border: 0;
    color: var(--color-black);
    background: var(--color-white);
  }

  & .option .note {
    margin-block-start: var(--space-2);
    line-height: 1.5;
  }
}

:where(.top-page) .apply-area {
  & .button-primary > span,
  & .button-primary .last-line {
    display: inline-flex;
    align-items: center;
  }

  & .button-primary .last-line {
    gap: var(--space-2);
  }
}

@media (width < 1200px) {
  .site-header.-top {
    margin-block-end: calc(
      -1 *
      var(--site-header-height, var(--space-size-56))
    );
    background: var(--color-white);
  }

  :where(.margin-site) .hero {
    & .eyebrow {
      font-size: 2.8rem;
    }

    & .title {
      font-size: 8rem;
    }

    & .lead {
      font-size: var(--text-lg);
    }
  }

  :where(.margin-site) .cost-intro {
    gap: var(--space-6);
  }

  :where(.margin-site) .tools-person {
    position: static;
    display: block;
    margin: 0 auto;
  }

  :where(.margin-site) .tools-area .section-title {
    padding: 0;
  }
}

@media (width >= 768px) {
  :where(.top-page) .cost-intro .badge::after {
    border-block-start-width: 10px;
  }

  :where(.top-page) .pain-area .conclusion {
    margin-block-start: var(--space-size-34);
  }

  :where(.top-page) .section-link {
    display: flex;
  }

  :where(.top-page) .text-link,
  :where(.top-page) .cost-intro .badge,
  :where(.top-page) .cost-panel > .title,
  :where(.top-page) .cost-panel .sub-title {
    line-height: 1.5;
  }

  :where(.top-page) .fee-table + .sub-title {
    margin-block-start: var(--space-8);
  }

  :where(.top-page) .merit-area .round-icon {
    background: var(--color-blue);
  }

  :where(.top-page) .campaign-area {
    & .section-title {
      padding-block-start: var(--space-8);
    }

    & .caption {
      line-height: 1.5;
    }
  }

  :where(.top-page) .point-list {
    text-align: start;
  }

  :where(.top-page) .feature-card {
    border: 0;

    &:where(.-merit, .-benefit) .title {
      max-inline-size: none;
    }
  }

  /* PC：比較表・手数料表の列背景 */
  :where(.top-page) .fee-table {
    & :is(.label-column, .credit-column) {
      inline-size: 33.871%;
    }

    & :is(th, td) {
      padding-block: var(--space-3);
      background-clip: padding-box;
    }

    & th:where(:first-child) {
      inline-size: 33.871%;
      padding-inline: 0 var(--space-3);
    }

    & thead th {
      padding: 0;
    }

    & .credit {
      inline-size: 33.871%;
      padding-inline-end: var(--space-4);
    }

    & tbody .cash {
      position: relative;
    }
  }

  /* PC：手数料表の現物取引行の罫線 */
  :where(.top-page) .fee-table tbody .cash::after {
    position: absolute;
    inset-inline-start: calc(-1 * var(--space-3));
    inset-block-end: -1px; /* 罫線の下端位置 */
    inline-size: var(--space-3);
    block-size: 1px;
    background: var(--color-border);
    content: "";
    pointer-events: none;
  }

  :where(.top-page) .fee-table thead .label {
    display: block;
    padding: var(--space-size-12) var(--space-2);
    color: var(--color-white);
  }

  :where(.top-page) .fee-table thead th:where(:nth-child(2)) .label {
    margin-inline-end: var(--space-3);
  }

  :where(.top-page) .interest-table {
    & :is(th, td) {
      border-block-start: 0;
    }

    & thead th {
      padding-block: var(--space-size-5);
      text-align: center;
    }
  }

  :where(.top-page) .trade-steps li {
    display: grid;
    align-content: center;
    padding-block: var(--space-size-44);
  }
}

@media (width < 768px) {
  :where(.top-page) .information-area .card-grid {
    gap: var(--space-4);
  }

  :where(.top-page) .section-title {
    margin-block-end: var(--space-4);

    &::after {
      margin-block-start: var(--space-3);
    }
  }

  :where(.top-page) .pc-break {
    display: none;
  }

  :where(.top-page) > article {
    padding-block-end: var(--space-2);
  }

  :where(.top-page) .section-area {
    &.-inset {
      margin-inline: 0;
    }

    &.-inset + .section-area.-inset {
      margin-block-start: var(--space-2);
    }
  }

  :where(.top-page) .hero {
    align-items: start;
    min-block-size: 177.8667vw;
    padding: calc(
        var(--site-header-height, var(--space-size-56)) +
        var(--space-4)
      )
      var(--space-size-15) var(--space-size-285);

    & h1 {
      gap: var(--space-size-6);
      line-height: 1;
    }

    & .eyebrow {
      padding: var(--space-size-10) var(--space-size-12) var(--space-size-12);
      font-size: var(--text-lg);
    }

    & .title {
      padding: var(--space-size-10) var(--space-size-12) var(--space-size-18);
      font-size: 6.4rem;
    }

    & .lead {
      gap: var(--space-size-6);
      margin-block-start: var(--space-size-10);
      font-size: var(--text-sm);
      line-height: 1;
    }
  }

  :where(.top-page) .trade-steps li > div > span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: start;
    line-height: 1;
  }

  :where(.top-page) .hero .lead span {
    padding: var(--space-size-10) var(--space-2);
  }

  :where(.top-page) .pain-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block-start: var(--space-4);

    & .bubble {
      inline-size: 25.5rem;
      max-inline-size: 100%;
      margin: 0;
      padding: var(--space-size-13) var(--space-size-14);
      color: #4b4b4b;
      font-size: var(--text-base);
    }

    & .bubble:nth-child(2) {
      align-self: end;
      margin: 0;
    }

    & .person {
      align-self: center;
      inline-size: 12rem;
    }

    & .worry {
      inset-block-start: 0;
      inset-inline-end: calc(-1 * var(--space-5));
      inline-size: 5.6rem;
      block-size: 5.6rem;
    }
  }

  :where(.top-page) .pain-area .conclusion {
    margin-block-start: var(--space-3);
    font-size: var(--text-md);
  }

  :where(.top-page) .feature-card.-merit {
    padding: var(--space-6) var(--space-size-20);
    padding-block: var(--space-5);
  }

  :where(.top-page) .trade-table {
    --table-column-gap: 0;

    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
  }

  /* SP：比較表の行グループ・行 */
  :where(.top-page) .trade-table :is(thead, tbody, tr) {
    display: contents;
  }

  :where(.top-page) .trade-table colgroup {
    display: none;
  }

  :where(.top-page) .trade-table .row-heading {
    position: absolute;
    inline-size: 0.1rem;
    block-size: 0.1rem;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
  }

  :where(.top-page) .trade-table :is(th, td) {
    font-size: var(--text-sm);
  }

  :where(.top-page) .trade-table td {
    padding: var(--space-3);
    background: var(--color-surface);
  }

  :where(.top-page) .trade-table .cash {
    order: 1;
  }

  :where(.top-page) .trade-table :where(thead) th {
    padding: 0;
    border: 0;
    font-size: var(--text-base);
  }

  :where(.top-page) .trade-table thead .cash {
    margin-block-start: var(--space-3);
  }

  :where(.top-page) .fee-table {
    --table-column-gap: var(--space-size-15);

    & thead .label {
      display: block;
      padding: var(--space-2) var(--space-1);
      line-height: calc(9 / 7);
    }

    & thead th:where(:nth-child(2)) .label {
      margin-inline-end: var(--space-size-15);
      padding-block: var(--space-size-17);
    }

    font-size: var(--text-sm);

    & :is(th, td) {
      padding: var(--space-2) 0;
    }
  }

  :where(.top-page) .apply-area .button-callout > .label {
    inset-block-start: calc(-1 * var(--space-size-18));
  }

  :where(.top-page) .trade-table thead .credit .label {
    margin: 0;
  }

  :where(.top-page) .trade-table .mobile-label {
    display: block;
    margin-block-end: var(--space-2);
    color: var(--color-black);
  }

  :where(.top-page) .campaign-area {
    & .section-title {
      padding-block-start: var(--space-size-20);
    }

    & .title {
      max-inline-size: 24rem;
      margin-inline: auto;
    }

    & .caption.text-link {
      font-size: var(--text-sm);
      text-align: start;
    }
  }

  :where(.top-page) .cost-intro {
    display: block;

    & > .content {
      padding-block-end: 0;
    }

    & .section-title {
      max-inline-size: 29rem;
      margin-inline: auto;
      text-align: center;
    }

    & .section-title::after {
      margin-inline: auto;
    }

    & .point {
      padding-block: 0 var(--space-6);
      border: 0;
      text-align: center;
      padding-block-end: var(--space-4);
      border-block-end: 1px solid var(--color-border);
    }

    & .point + .point {
      padding-block-start: var(--space-4);
    }

    & :where(.point) .title {
      max-inline-size: 29rem;
      margin: 0 auto var(--space-5);
      font-size: var(--text-lg);
      margin-block-end: var(--space-3);
    }

    & .point p {
      text-align: start;
    }

    & .note-list {
      margin-block-start: var(--space-4);
    }
  }

  :where(.top-page) .cost-person {
    inline-size: 12.8rem;
    block-size: 16rem;
    margin: var(--space-8) auto 0;
    margin-block-start: var(--space-6);
  }

  :where(.top-page) .cost-panel {
    margin-inline: calc(-1 * var(--space-size-15));
    padding: var(--space-8) var(--space-size-15);

    & > .title {
      font-size: var(--text-md);
      padding-block-end: var(--space-3);
      line-height: var(--line-heading);
    }

    & .sub-title {
      padding-inline-start: var(--space-2);
      border-inline-start-width: 6px;
      font-size: var(--text-md);
      line-height: var(--line-heading);
    }
  }

  :where(.top-page) .interest-table {
    & tbody th {
      font-size: var(--text-xs);
    }

    & :is(th, td) {
      padding: var(--space-2) var(--space-1);
      padding-inline: var(--space-2);
      border-block-start: 0;
    }
  }

  :where(.top-page) .trade-steps {
    gap: var(--space-3);
    margin-block-start: var(--space-size-44);

    & li {
      --step-tip: 1.6rem;

      padding: var(--space-6) var(--space-1) var(--space-4);
      font-size: var(--text-md);
      text-align: center;
      padding-block: var(--space-6);
    }

    & li > div {
      flex-direction: column;
      gap: var(--space-3);
    }

    & img {
      inline-size: 3.2rem;
      block-size: 3.2rem;
    }
  }

  :where(.top-page) .feature-card.-tool {
    padding: var(--space-size-20);
    gap: var(--space-3);
  }

  :where(.top-page) .tools-person {
    /* SP：ツール紹介カード上部の人物・パソコン */
    position: relative;
    z-index: 1;
    inset: auto;
    inline-size: 16rem;
    block-size: auto;
    margin-block-end: calc(-1 * var(--space-2));
  }

  :where(.top-page) .apply-area {
    & .lead {
      text-align: start;
    }

    & .option {
      padding: var(--space-6) var(--space-size-20);
      padding-block: var(--space-5);
    }
  }

  :where(.top-page) .section-link {
    display: flex;
  }

  :where(.top-page) .card-grid:has(> .feature-card) {
    gap: var(--space-2);
  }

  :where(.top-page) .feature-card {
    &:is(.-merit, .-benefit) {
      border: 0;
      padding-block-end: var(--space-5);
    }

    &:where(.-merit, .-benefit) .pc-break {
      display: initial;
    }
  }

  :where(.top-page) .point-list {
    text-align: start;
  }

  :where(.top-page) .merit-area .round-icon {
    background: var(--color-blue);
  }

  :where(.top-page) .text-link {
    line-height: var(--line-heading);
  }

  :where(.top-page) .pain-points .bubble::after {
    content: none;
  }

  :where(.top-page) .trade-table tbody tr:last-child td {
    padding-block-end: var(--space-4);
    border-block-end: 0;
  }

  :where(.top-page) .cost-intro .badge {
    line-height: var(--line-heading);
  }

  :where(.top-page) .fee-table :is(.label-column, .credit-column) {
    inline-size: 34.7826%;
  }

  :where(.top-page) .fee-table tbody th {
    font-size: var(--text-xs);
  }

  :where(.top-page) .fee-table td.credit {
    padding-inline-end: var(--space-size-15);
  }

  :where(.top-page) .fee-table thead th {
    padding: 0;
    font-size: var(--text-sm);
    vertical-align: bottom;
  }

  :where(.top-page) .fee-table thead th:where(:first-child) {
    font-size: var(--text-sm);
    vertical-align: middle;
  }

  :where(.top-page) .interest-table col:nth-child(1) {
    inline-size: 12.7536%;
  }

  :where(.top-page) .interest-table col:nth-child(2) {
    inline-size: 19.7101%;
  }

  :where(.top-page) .interest-table col:nth-child(3) {
    inline-size: 34.7826%;
  }

  :where(.top-page) .interest-table col:nth-child(4) {
    inline-size: 32.7537%;
  }

  :where(.top-page) .interest-table thead th {
    inline-size: auto;
    text-align: center;
  }

  :where(.top-page) .trade-steps .number {
    inset-block-start: calc(-1 * var(--space-size-20));
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 4rem;
    block-size: 4rem;
    font-size: var(--text-2xl);
  }

  :where(.top-page) .trade-area .button-primary {
    min-block-size: 6.4rem;
    font-size: var(--text-md);
  }

  :where(.top-page) .trade-account {
    margin-block-start: var(--space-6);
    padding: var(--space-5) var(--space-size-20);

    & .title {
      font-size: var(--text-lg);
      line-height: var(--line-heading);
    }

    & .button-callout {
      margin-block-start: var(--space-size-10);
    }

    & .button-primary {
      min-block-size: 8rem;
    }

    & .button-primary > span {
      display: block;
    }
  }

  :where(.top-page) .disclosure .question {
    font-size: var(--text-base);
  }

  :where(.top-page) .faq-area {
    & .disclosure > summary {
      font-size: var(--text-base);
      line-height: var(--line-heading);
    }

    & .answer {
      color: var(--text-muted);
    }
  }

  :where(.top-page) .tools-area {
    & .feature-card:first-child {
      padding-block-end: var(--space-4);
    }

    & .feature-card:last-child {
      padding-block-end: var(--space-5);
    }

    & .feature-card:where(:first-child) .title {
      font-size: var(--text-md);
    }
  }

  :where(.top-page) .cost-area {
    padding-block-end: var(--space-2);
  }

  :where(.top-page) .campaign-area .english {
    inset-block-start: 0;
  }

  :where(.top-page) .apply-area .apply-options {
    gap: var(--space-2);
  }

  :where(.top-page) .apply-area .apply-options > .option + .option {
    padding-inline: var(--space-size-20);
    border: 0;
  }

  :where(.top-page) .apply-area .option .title {
    display: grid;
    justify-items: center;
    margin-block-end: var(--space-4);
    border: 0;
    font-size: var(--text-lg);
    line-height: var(--line-heading);
    text-decoration: none;
  }

  :where(.top-page) .apply-area .option .title .sp-break {
    display: none;
  }

  :where(.top-page) .apply-area .option .title .line {
    border-block-end: 2px solid currentcolor;
  }

  :where(.top-page) .apply-area .button-callout {
    margin-block-start: var(--space-size-18);
  }

  :where(.top-page) .apply-area .button-primary {
    padding-block: var(--space-size-15);
  }

  :where(.top-page) .trade-area .action {
    display: flex;
    justify-content: center;
  }

  :where(.top-page) .apply-area .button-primary > span {
    display: block;
  }

  :where(.top-page) .apply-area .option .note {
    margin-block-start: var(--space-3);
    white-space: normal;
  }
}

@media (width >= 768px) {
  :where(.top-page) .sp-break {
    display: none;
  }
}

/* 無料特典のキャッシュバック注記 */
:where(.top-page) .benefit-note {
  display: grid;
  grid-template-columns: var(--space-size-20) minmax(0, 1fr);
  margin-block-start: var(--space-3);
  color: rgb(255 255 255 / 50%);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* 取引開始フローの注意文 */
:where(.top-page) .trade-area .apply-risk-note {
  color: rgb(255 255 255 / 50%);
}