/* メリットページ：全体とページ見出し */
:where(.merit-page) {
  --space-size-48: 4.8rem;
  --space-size-197: 19.7rem;
  --space-size-85: 8.5rem;
  --space-size-107: 10.7rem;
  --space-size-120: 12rem;
  --space-size-65: 6.5rem;
  --space-size-2: 0.2rem;
  --space-size-11: 1.1rem;
}

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

:where(.merit-page) .page-heading {
  padding-block: var(--space-size-85) var(--space-size-107);
  background: url("/image/feature/margin-trade/bg-apply.png") center / cover;

  & .title {
    line-height: 1;
  }
}

:where(.merit-page) .section-area.-inset {
  margin-inline: var(--page-gutter);

  & > .inner {
    inline-size: min(100% - var(--page-gutter) * 2, var(--content-width));
  }
}

:where(.merit-page) .intro-lead,
:where(.merit-page) .section-lead {
  margin-block-end: var(--space-6);
  text-align: center;
}

:where(.merit-page) img {
  max-inline-size: 100%;
  block-size: auto;
}

:where(.merit-page) .prose > * + * {
  margin-block-start: var(--space-size-28);
}

:where(.merit-page) :where(.prose, .content, .collateral-notes) a:not([class]) {
  color: var(--link-color);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

:where(.merit-page) sup {
  font-size: 0.645em;
  line-height: 0;
}

/* メリットページ：導入カードと仕組み */
:where(.merit-page) .merit-cards {
  margin-block-start: var(--space-6);

  & img {
    inline-size: 16rem;
  }

  & .feature-card {
    padding: calc(var(--space-6) - var(--space-size-1));
  }

  & .bullet-list {
    inline-size: 100%;
    padding-inline-start: var(--space-size-14);
    font-size: var(--text-sm);
    line-height: var(--line-heading);
    text-align: start;
    list-style: disc;
  }

  & li {
    list-style: disc;
  }

  & li::marker {
    color: var(--color-gold);
  }

  & li + li {
    margin-block-start: var(--space-1);
  }

  & .button-primary {
    margin-block-start: var(--space-2);
  }
}

:where(.merit-page) .mechanism {
  display: grid;
  grid-template-columns: minmax(0, 54.4rem) minmax(0, 40rem);
  align-items: start;
  gap: var(--space-7);
  padding: var(--space-8) var(--space-size-104);
  margin-block-start: var(--space-8);
  background: var(--color-surface);

  & .title {
    padding-block-end: var(--space-2);
    border-block-end: 2px solid var(--color-border);
    margin-block-end: var(--space-6);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--line-heading);
  }

  & img {
    inline-size: 100%;
    aspect-ratio: 25 / 17;
    object-fit: fill;
  }
}

:where(.merit-page) .bar-heading {
  padding-inline-start: var(--space-3);
  border-inline-start: 8px solid var(--color-gold);
  margin-block-end: var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
}

/* メリットページ：現物取引との比較 */
:where(.merit-page) .comparison,
:where(.merit-page) .trade-basics {
  margin-block-start: var(--space-8);
}

:where(.merit-page) .merit-comparison {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  line-height: var(--line-heading);

  & :is(td, th) {
    padding: var(--space-3);
    text-align: center;
    vertical-align: middle;
  }

  & tr > :first-child {
    inline-size: calc(224 / 1200 * 100%);
    padding-inline-start: 0;
    text-align: start;
  }

  & tbody th {
    font-weight: var(--weight-semibold);
  }

  & :is(thead th, tbody td) {
    box-shadow: inset var(--space-3) 0 var(--color-white);
  }

  & thead th {
    padding-block: var(--space-size-12);
    padding-inline-start: var(--space-5);
    color: var(--color-white);
    background: var(--color-gray);
    font-weight: var(--weight-semibold);
  }

  & thead th:nth-child(2) {
    background: var(--color-gold);
  }

  & tr {
    border-block-end: 1px solid var(--color-border);
  }

  & tbody td {
    color: var(--color-gray);
    font-weight: var(--weight-semibold);
    padding-inline-start: var(--space-5);
    background: var(--color-surface);
  }

  & tbody td:nth-child(2) {
    color: var(--color-gold);
  }
}

:where(.merit-page) .comparison-icon {
  display: block;
  inline-size: 3.2rem;
  block-size: 3.2rem;
  margin-inline: auto;
}

:where(.merit-page) .comparison-mobile {
  display: none;
}

/* メリットページ：本文中の図解 */
:where(.merit-page) .diagram-card {
  padding: var(--space-6);
  background: var(--color-white);
  text-align: center;

  &.-outlined {
    border: 1px solid var(--color-border);
  }

  & figcaption {
    margin-block-end: var(--space-4);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1.6;
  }

  & figcaption > span {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5rem;
  }

  & figcaption small {
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
  }

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

  & p {
    margin-block-start: var(--space-3);
    text-align: start;
  }
}

:where(.merit-page) .trade-basics .diagram-card {
  padding: calc(var(--space-6) - var(--space-size-1));

  & figcaption {
    line-height: 1.5;
  }

  & small {
    display: block;
    margin-block-start: var(--space-size-2);
    font-weight: var(--weight-semibold);
  }
}

:where(.merit-page) .trade-basics .card-grid {
  margin-block-start: var(--space-6);
}

:where(.merit-page) .trade-basics .note-list,
:where(.merit-page) .trade-example > .note-list {
  margin-block-start: var(--space-3);
}

/* メリットページ：各メリットの見出しと内容 */
:where(.merit-page) .merit-label {
  position: relative;
  display: table;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-size-13);
  color: var(--color-white);
  background: var(--color-gold);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);

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

:where(.merit-page) .section-area.leverage-area > .inner {
  position: relative;
}

:where(.merit-page) .merit-person {
  position: absolute;
  inset-block-start: var(--space-size-65);
  inset-inline-start: var(--space-6);
  inline-size: 15.7rem;
}

:where(.merit-page) .content-panel {
  & > .content {
    padding: var(--space-8)
      max(var(--space-5), calc((100% - var(--reading-width)) / 2));
  }

  & + .content-panel {
    margin-block-start: var(--space-6);
  }

  & .text-link {
    line-height: var(--line-heading);
    margin-block-start: var(--space-6);
  }
}

:where(.merit-page) .leverage-area .content-panel {
  background: var(--color-white);
}

:where(.merit-page) .leverage-explanation {
  align-items: start;
  margin-block-start: var(--space-6);
}

:where(.merit-page) .trade-example {
  margin-block-start: var(--space-8);

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

  & > .diagram-card {
    background: var(--color-surface);
  }

  & > .diagram-card img {
    block-size: auto;
    max-inline-size: 57.6rem;
    margin-inline: auto;
  }

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

:where(.merit-page) .collateral-notes {
  margin-block-start: var(--space-6);
}

:where(.merit-page) .diagram-card .trade-result {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
  text-align: center;

  & .profit {
    color: #2aa468;
  }

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

:where(.merit-page) .repeat-area .section-title {
  margin-block-end: var(--space-size-26);
}

/* メリットページ：下層ナビと申込み */
:where(.merit-page) .navigation-area,
:where(.merit-page) .merit-apply {
  margin-block-start: var(--space-4);
}

:where(.merit-page) .navigation-area .title .line {
  display: block;
}

:where(.merit-page) .navigation-area .title .sp-break {
  display: none;
}

:where(.merit-page) .merit-apply {
  position: relative;
  isolation: isolate;
}

:where(.merit-page) .section-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

:where(.merit-page) .apply-surface {
  padding: var(--space-6);
  color: var(--color-black);
  background: var(--color-white);
  text-align: center;

  & > .title {
    margin-block-end: var(--space-5);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
  }

  & > .title > span {
    display: inline-block;
    vertical-align: top;
    border-block-end: 2px solid;
  }

  & .card-grid {
    gap: 0;
    margin-inline: calc(-1 * var(--space-6));
  }

  & .apply-option + .apply-option {
    border-inline-start: 1px solid var(--color-border);
  }

  & .button-primary {
    inline-size: min(100%, 44.8rem);
    padding-block: var(--space-size-20);
    font-size: var(--text-xl);
    line-height: 1.75;
  }

  & .icon {
    display: inline-block;
    margin-inline-start: var(--space-2);
    vertical-align: 0.05em;
  }

  & .note {
    margin-block-start: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--line-heading);
  }
}

@media (width >= 768px) {
  :where(.merit-page) .merit-label::after {
    border-block-start-width: 10px;
  }

  :where(.merit-page) .pc-line {
    display: block;
  }
}

/* メリットページ：中間幅の人物イラスト */
@media (768px <= width < 1200px) {
  :where(.merit-page) .merit-person {
    position: static;
    display: block;
    margin: 0 auto;
  }
}

/* メリットページ：SPの見出し・図解・本文 */
@media (width < 768px) {
  :where(.merit-page) > article {
    padding-block-end: var(--space-8);
  }

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

  :where(.merit-page) .sp-line {
    display: block;
  }

  :where(.merit-page) .page-heading {
    padding-block: var(--space-size-38);

    & .title {
      line-height: var(--line-heading);
    }
  }

  :where(.merit-page) .section-title::after {
    margin-block-start: var(--space-3);
  }

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

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

  :where(.merit-page) .intro-lead {
    display: none;
  }

  :where(.merit-page) .section-lead {
    text-align: start;
  }

  :where(.merit-page) .merit-cards {
    gap: var(--space-2);
    margin-block-start: var(--space-4);

    & .feature-card {
      padding: calc(var(--space-5) - var(--space-size-1))
        calc(var(--space-size-20) - var(--space-size-1));
    }

    & .button-primary {
      margin-block-start: var(--space-2);
    }
  }

  :where(.merit-page) .mechanism {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) var(--space-size-20);
    margin-block-start: var(--space-7);

    & .title {
      font-size: var(--text-md);
      margin-block-end: var(--space-5);
    }
  }

  :where(.merit-page) .bar-heading {
    padding-inline-start: var(--space-2);
    border-inline-start-width: 6px;
    font-size: var(--text-md);
  }

  :where(.merit-page) .merit-comparison {
    display: none;
  }

  :where(.merit-page) .comparison-mobile {
    display: grid;
    gap: var(--space-3);
  }

  :where(.merit-page) .comparison-list {
    text-align: center;

    & dd {
      color: var(--color-gold);
      font-weight: var(--weight-semibold);
    }

    &:last-child dd {
      color: var(--color-gray);
    }

    & h4 {
      padding: var(--space-size-12);
      color: var(--color-white);
      background: var(--color-gold);
      font-weight: var(--weight-semibold);
      line-height: var(--line-heading);
    }

    &:last-child h4 {
      background: var(--color-gray);
    }

    & dl > div {
      padding: var(--space-3);
      border-block-end: 1px solid var(--color-border);
      background: var(--color-surface);
      font-size: var(--text-sm);
      line-height: var(--line-heading);
    }

    & dl > div:last-child {
      padding-block-end: var(--space-4);
      border: 0;
    }

    & dt {
      margin-block-end: var(--space-2);
      font-weight: var(--weight-semibold);
    }
  }

  :where(.merit-page) .diagram-card {
    padding: var(--space-5) var(--space-size-20);

    & figcaption {
      font-size: var(--text-base);
    }
  }

  :where(.merit-page) .trade-basics .diagram-card {
    padding: calc(var(--space-5) - var(--space-size-1))
      calc(var(--space-size-20) - var(--space-size-1));

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

  :where(.merit-page) .trade-basics .card-grid {
    gap: var(--space-2);
  }

  :where(.merit-page) .merit-label {
    margin-block-end: var(--space-size-13);
    font-size: var(--text-sm);
  }

  :where(.merit-page) .merit-person {
    position: static;
    display: block;
    inline-size: 12.8rem;
    margin: 0 auto;
  }

  :where(.merit-page) .content-panel {
    & > .title {
      padding: var(--space-size-11) var(--space-3) var(--space-size-10);
      font-size: var(--text-md);
    }

    & > .content {
      padding: var(--space-5) var(--space-size-20);
    }

    & + .content-panel {
      margin-block-start: var(--space-3);
    }

    & .text-link {
      margin-block-start: var(--space-4);
    }
  }

  :where(.merit-page) .leverage-explanation {
    gap: var(--space-4);
    margin-block-start: var(--space-4);
  }

  :where(.merit-page) .leverage-area .section-lead {
    margin-block-end: var(--space-4);
  }

  :where(.merit-page) .selling-area .pc-line {
    display: block;
  }

  :where(.merit-page) .trade-example .bar-heading {
    font-size: var(--text-md);
  }

  :where(.merit-page) .trade-example .diagram-card {
    padding-inline: var(--space-3);
  }

  :where(.merit-page) .trade-example > .diagram-card {
    padding: var(--space-4) var(--space-size-10);
  }

  :where(.merit-page) .collateral-notes {
    margin-block-start: var(--space-4);
  }

  :where(.merit-page) .diagram-card .trade-result {
    margin-block-start: var(--space-4);
    font-size: var(--text-base);
  }

  :where(.merit-page) .repeat-area .section-title {
    margin-block-end: var(--space-4);
  }

  :where(.merit-page) .repeat-area .diagram-card figcaption {
    line-height: 1.625;
  }

  :where(.merit-page) .repeat-area .card-grid {
    gap: var(--space-2);
  }

  :where(.merit-page) .navigation-area,
  :where(.merit-page) .merit-apply {
    margin-block-start: var(--space-2);
  }

  :where(.merit-page) .navigation-area .title .sp-break {
    display: block;
  }

  :where(.merit-page) .apply-surface {
    padding: var(--space-5) var(--space-size-20);

    & > .title {
      margin-block-end: var(--space-4);
      font-size: var(--text-lg);
      line-height: 1.6;
    }

    & > .title > span {
      border: 0;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.5rem;
    }

    & .card-grid {
      margin-inline: 0;
      gap: var(--space-4);
    }

    & .apply-option + .apply-option {
      padding-block-start: var(--space-4);
      border-inline-start: 0;
      border-block-start: 1px solid var(--color-border);
    }

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

    & .button-primary {
      padding: var(--space-size-15) var(--space-3);
      font-size: var(--text-lg);
      line-height: 1.25;
    }
  }
}

/* メリットページ：PCヘッダーと見出し背景 */
@media (width >= 1200px) {
  .site-header.-merit {
    margin-block-end: calc(
      -1 *
      var(--site-header-height, var(--space-size-88))
    );
    background: transparent;
  }

  .site-header.-merit.is-enhanced {
    position: fixed;
    inset-inline: 0;
    margin-block-end: 0;
  }

  .site-header.-merit > .inner {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(
        max-content,
        1fr
      );
  }

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

  :where(.merit-page) .page-heading {
    padding-block-start: calc(
      var(--space-size-85) +
      var(--site-header-height, var(--space-size-88))
    );
  }
}

/* メリットページ：PCの人物横の見出し */
@media (width >= 1200px) {
  :where(.merit-page) .leverage-area .section-title {
    padding-inline: var(--space-size-197);
  }
}

/* 申込み欄：タブレットの選択肢 */
@media (768px <= width < 1200px) {
  :where(.merit-page) .apply-surface {
    & .card-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
    }

    & .apply-option + .apply-option {
      padding-block-start: var(--space-4);
      border-inline-start: 0;
      border-block-start: 1px solid var(--color-border);
    }
  }
}