/* リスクページ：見出しと本文 */
:where(.risk-page) {
  --space-size-48: 4.8rem;
  --space-size-108: 10.8rem;
  --space-size-11: 1.1rem;
  --space-size-22: 2.2rem;
  --space-size-85: 8.5rem;
  --space-size-107: 10.7rem;
  --space-size-36: 3.6rem;
  --space-size-56: 5.6rem;
  --space-size-200: 20rem;
  --space-size-252: 25.2rem;
}

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

:where(.risk-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(.risk-page .tool-area) > .inner {
  position: relative;
}

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

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

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

:where(.risk-page) .risk-introduction .section-lead {
  margin-block-end: 0;
}

:where(.risk-page) .section-title .subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--line-heading);
}

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

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

:where(.risk-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(.risk-page) .text-link {
  line-height: var(--line-heading);
  margin-block-start: var(--space-6);
}

:where(.risk-page) .media-block {
  align-items: start;
}

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

:where(.risk-page) .content-panel {
  &.-white {
    background: var(--color-white);
  }

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

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

  & > .content > .media-block:not(:first-child) {
    margin-block-start: var(--space-6);
  }
}

:where(.risk-page) .figure-surface {
  padding: var(--space-6);
  background: var(--color-white);
}

/* リスクページ：損失の比較 */
:where(.risk-page) .about-risk .section-lead {
  margin-block-end: 0;
}

:where(.risk-page) .risk-note {
  margin-block: var(--space-3) var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;

  & a {
    color: var(--link-color);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
  }
}

:where(.risk-page) .loss-comparison {
  margin-block-start: var(--space-8);
}

:where(.risk-page) .loss-card {
  background: var(--color-white);

  & > .title {
    padding: var(--space-size-13) var(--space-4);
    background: var(--color-gray);
    color: var(--color-white);
    text-align: center;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--line-heading);
  }

  &:where(:last-child) > .title {
    background: var(--color-gold);
  }

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

  & > .content {
    padding: var(--space-6);
  }

  & figcaption {
    display: grid;
    place-content: center;
    min-block-size: 5.7rem;
    margin-block-end: var(--space-4);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    text-align: center;
    line-height: var(--line-heading);
  }

  & figcaption small {
    display: block;
    margin-block-start: var(--space-size-6);
    font-size: var(--text-sm);
  }

  & img {
    inline-size: 100%;
  }

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

:where(.risk-page)
  :is(.loss-card figcaption, .resolution-card .title, .ratio-card figcaption)
  > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5rem;
}

:where(.risk-page) .risk-summary {
  padding: var(--space-size-36);
  border: 4px solid var(--color-border);
  margin-block-start: var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  text-align: center;
}

/* リスクページ：追証の発生・解消と予防 */
:where(.risk-page) .precautions-area .section-lead {
  margin-block-end: var(--space-8);
}

:where(.risk-page) :where(.trigger-example) .note {
  display: grid;
  grid-template-columns: var(--space-size-20) minmax(0, 1fr);
  margin-block-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--line-heading);
}

:where(.risk-page) .trigger-example + .trigger-example {
  margin-block-start: var(--space-8);
}

:where(.risk-page) .triggers-area .section-lead {
  margin-block-end: var(--space-8);
}

:where(.risk-page) .resolution-cards {
  margin-block-start: var(--space-8);
}

:where(.risk-page) .resolution-card {
  position: relative;
  padding: calc(var(--space-6) - var(--space-size-1));
  border: 1px solid var(--color-border);
  text-align: center;

  & > .title {
    margin-block-end: var(--space-size-26);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--line-heading);
  }

  & img {
    display: block;
    inline-size: 20rem;
    margin-inline: auto;
  }

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

:where(.risk-page) .point-label {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-3));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  border-radius: 10rem;
  background: var(--color-gold);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  line-height: var(--line-heading);
  white-space: nowrap;
}

:where(.risk-page) .resolution-area .note-list {
  margin-block-start: var(--space-3);
}

:where(.risk-page) .resolution-notice {
  margin-block-start: var(--space-8);
}

:where(.risk-page) .point-panel {
  position: relative;
  margin-block-start: var(--space-7);

  & + .point-panel {
    margin-block-start: var(--space-size-56);
  }

  & :where(.content-panel) > .title {
    padding-block: var(--space-size-22);
  }
}

:where(.risk-page) .ratio-cards {
  margin-block-start: var(--space-6);
}

:where(.risk-page) .ratio-card {
  padding: var(--space-6);
  background: var(--color-surface);

  & figcaption {
    margin-block-end: var(--space-size-26);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    text-align: center;
    line-height: var(--line-heading);
  }

  & img {
    display: block;
    inline-size: 24rem;
    margin-inline: auto;
  }

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

:where(.risk-page) .account-review {
  margin-block-start: var(--space-8);

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

/* リスクページ：サービス紹介 */

:where(.risk-page) .support-person {
  position: absolute;
  inset-inline-end: var(--space-6);
  inset-block-start: var(--space-size-108);
  inline-size: 21.2rem;
}

:where(.risk-page) .tool-area .note-list {
  margin-block-start: var(--space-3);
}

:where(.risk-page) .tool-area .content > p + .note-list {
  margin-block-start: var(--space-6);
}

:where(.risk-page) .start-points {
  margin-block-start: var(--space-8);

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

:where(.risk-page) .start-card {
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--color-white);

  & img {
    display: block;
    inline-size: calc(100% + var(--space-3));
    max-inline-size: none;
    margin-inline: calc(-1 * var(--space-2));
  }

  & .title {
    margin-block: var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-align: center;
    line-height: var(--line-heading);
  }

  & p,
  & .text-link {
    font-size: var(--text-sm);
  }

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

/* リスクページ：追証説明の下余白 */
:where(.risk-page) .precautions-area {
  padding-block-end: var(--space-8);
}

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

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

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

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

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

/* リスクページ：PCのサービス見出し */
@media (width >= 1200px) {
  :where(.risk-page) .tool-area .section-title {
    padding-inline: var(--space-size-252);
  }
}

/* リスクページ：中間幅とSPのサービス画像 */
@media (width < 1200px) {
  :where(.risk-page) .support-person {
    position: static;
    display: block;
    inline-size: 13.8rem;
    margin: 0 auto;
  }
}

/* リスクページ：SPの本文・図解 */
@media (width < 768px) {
  :where(.risk-page) > article {
    padding-block-end: var(--space-8);
  }

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

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

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

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

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

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

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

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

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

  :where(.risk-page) .section-title .subtitle {
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
  }

  :where(.risk-page) .precautions-area .section-lead {
    margin-block-end: var(--space-6);
  }

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

  :where(.risk-page) .media-block {
    gap: var(--space-5);
  }

  :where(.risk-page) .trigger-example .media-block {
    gap: var(--space-4);
  }

  :where(.risk-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 > .media-block:not(:first-child) {
      margin-block-start: var(--space-5);
    }

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

  :where(.risk-page) .risk-note {
    text-align: start;
    margin-block-start: var(--space-5);
  }

  :where(.risk-page) .loss-card {
    & > .title {
      padding: var(--space-size-11) var(--space-2) var(--space-size-10);
      font-size: var(--text-md);
    }

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

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

  :where(.risk-page) .loss-comparison .card-grid {
    gap: var(--space-2);
  }

  :where(.risk-page) .risk-summary {
    padding: var(--space-size-28) var(--space-3);
    margin-block-start: var(--space-4);
    font-size: var(--text-base);
    text-align: start;
  }

  :where(.risk-page) .figure-surface {
    padding: var(--space-size-20);
  }

  :where(.risk-page) .resolution-cards {
    margin-block-start: var(--space-size-56);
    gap: var(--space-5);
  }

  :where(.risk-page) .resolution-card {
    padding: calc(var(--space-5) - var(--space-size-1))
      calc(var(--space-size-20) - var(--space-size-1));

    & > .title {
      font-size: var(--text-base);
    }
  }

  :where(.risk-page) .point-panel {
    margin-block-start: var(--space-size-36);
  }

  :where(.risk-page) .point-panel .point-label {
    font-size: var(--text-xs);
    padding: var(--space-size-3) var(--space-size-12);
    inset-block-start: calc(-1 * var(--space-size-12));
  }

  :where(.risk-page .point-panel) .content-panel > .title {
    padding-block: var(--space-size-15) var(--space-size-14);
  }

  :where(.risk-page) .point-panel + .point-panel {
    margin-block-start: var(--space-size-28);
  }

  :where(.risk-page) .ratio-cards {
    margin-block-start: var(--space-5);
    gap: var(--space-2);
  }

  :where(.risk-page) .ratio-card {
    padding: var(--space-4) var(--space-size-10);

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

  :where(.risk-page) .account-review .bar-heading {
    font-size: var(--text-md);
  }

  :where(.risk-page) .content-panel:where(.-mimamorukun) > .title {
    padding-inline: 0;
  }

  :where(.risk-page) .tool-area .content-panel + .content-panel {
    margin-block-start: var(--space-3);
  }

  :where(.risk-page) .tool-area .section-lead {
    margin-block-end: 0;
  }

  :where(.risk-page) .support-person {
    inline-size: 16rem;
    margin-block: var(--space-4) calc(-1 * var(--space-2));
    position: relative;
    inset: auto;
  }

  :where(.risk-page) .start-points {
    margin-block-start: var(--space-5);

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

  :where(.risk-page) .start-points .card-grid {
    gap: var(--space-2);
  }

  :where(.risk-page) .start-card {
    padding: var(--space-4) var(--space-size-10);

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

    & img {
      inline-size: 27.2rem;
      max-inline-size: 100%;
      margin-inline: auto;
    }
  }
}

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

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

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

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

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

:where(.risk-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(.risk-page) .navigation-area,
  :where(.risk-page) .risk-apply {
    margin-block-start: var(--space-2);
  }

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

  :where(.risk-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;
    }
  }
}

:where(.risk-page) .navigation-area {
  margin-block-start: 0;
}

/* 申込み欄：タブレットの選択肢 */
@media (768px <= width < 1200px) {
  :where(.risk-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);
    }
  }
}