/* learn-to-trade 配下共通トンマナ（what-is-forex / market-content-page 系） */

body.market-content-page.learn-to-trade-page,
body.market-content-page .learn-to-trade-main,
body.market-content-page .what-is-forex-main {
    font-family: "Noto Sans JP", sans-serif;
    color: #1f2430;
}

body.market-content-page.learn-to-trade-page {
    /* パンくず（sof-breadcrumb__inner）と同じ 60% / モバイル 90% */
    --learn-to-trade-column-width: 60%;
}

.learn-to-trade-main,
.what-is-forex-main {
    display: block;
    padding-top: 4.5rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .learn-to-trade-main,
    .what-is-forex-main {
        padding-top: 2rem;
        padding-bottom: 4.5rem;
    }
}

/* 本文カラム（.containers 未使用）：パンくずと同幅にし、子の 60% が親基準で狭くなるのを防ぐ */
body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) {
    max-width: var(--learn-to-trade-column-width, 60%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) > .how-do-i-make-a-deposit,
body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) > .learn-to-trade-hero {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) .learn-to-trade-section :is(h1.payment, hr, .candlesticks),
body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) .learn-to-trade-hero :is(.market-page-title, .learn-to-trade-lead) {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) .learn-to-trade-hero .learn-to-trade-lead {
    margin-top: 1rem;
    margin-right: auto;
    margin-left: auto;
}

/* .containers 内：ディレクトリ style.css の 60% 指定を無効化し、パンくずと同じカラム幅に */
body.market-content-page .learn-to-trade-main .containers :is(
    h1.payment,
    h2.candlesticks-forcus,
    h2.reason,
    h2.deposit,
    h3,
    .reason-text,
    .py-3,
    .candlesticks,
    .primary-factor,
    .how-do-i-make-a-deposit,
    .technical-box,
    .advanced-box,
    .reason-info,
    .learn-to-trade-lead,
    .what-is-forex-lead,
    hr
) {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.market-content-page .learn-to-trade-main .containers learn-more-contents,
body.market-content-page .learn-to-trade-main .containers account-open {
    width: 100%;
    max-width: 100%;
}

body.market-content-page .learn-to-trade-main,
body.market-content-page .what-is-forex-main {
    --learn-to-trade-desc-size: clamp(11pt, 0.5vw + 10.2pt, 13pt);
}

/* 旧 h1 装飾のリセット → ページタイトル */
body.market-content-page.learn-to-trade-page .containers > h1:first-of-type,
body.market-content-page .learn-to-trade-main .containers > h1:first-of-type,
body.market-content-page .learn-to-trade-main > .mx-auto > h1:first-of-type,
body.market-content-page .learn-to-trade-hero .market-page-title,
body.market-content-page .what-is-forex-hero .market-page-title {
    position: static;
    padding: 12px 16px;
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
    max-width: none;
    margin: 24px auto 8px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

body.market-content-page .learn-to-trade-main h1::before,
body.market-content-page .learn-to-trade-main .containers > h1::before {
    display: none;
    content: none;
}

/* セクション見出し */
body.market-content-page .learn-to-trade-main h1.payment,
body.market-content-page .learn-to-trade-main h2.candlesticks-forcus,
body.market-content-page .learn-to-trade-main h2.reason,
body.market-content-page .learn-to-trade-main h2.deposit,
body.market-content-page .what-is-forex-main .what-is-forex-section h1.payment {
    position: static;
    background: none;
    border: none;
    width: auto;
    max-width: var(--learn-to-trade-column-width, 60%);
    margin: 4.5rem auto 0;
    padding: 0;
    text-align: left;
    font-size: 30px;
    font-weight: 700;
    color: #222;
    line-height: 1.35;
}

body.market-content-page .learn-to-trade-main h2.candlesticks-forcus,
body.market-content-page .learn-to-trade-main h2.reason {
    text-align: left;
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

body.market-content-page .learn-to-trade-main .containers .containers {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

body.market-content-page.learn-to-trade-page .containers > h2.candlesticks-forcus:first-of-type,
body.market-content-page.learn-to-trade-page .containers > h2.reason:first-of-type {
    margin-top: 3rem;
}

body.market-content-page .learn-to-trade-main .learn-to-trade-hero + .learn-to-trade-section h1.payment,
body.market-content-page .what-is-forex-main .what-is-forex-hero + .what-is-forex-section h1.payment {
    margin-top: 5rem;
}

body.market-content-page .learn-to-trade-main h1.payment + hr,
body.market-content-page .learn-to-trade-main .learn-to-trade-section hr,
body.market-content-page .what-is-forex-main .what-is-forex-section hr {
    border: 0;
    border-top: 1px solid rgba(26, 26, 26, 0.12);
    margin: 1.25rem auto;
    max-width: var(--learn-to-trade-column-width, 60%);
}

/* 説明文（12pt 可変） */
body.market-content-page .learn-to-trade-main .what-is-forex-lead,
body.market-content-page .learn-to-trade-main .learn-to-trade-lead,
body.market-content-page .learn-to-trade-main .how-do-i-make-a-deposit p,
body.market-content-page .learn-to-trade-main .how-do-i-make-a-deposit .reason-info p,
body.market-content-page .learn-to-trade-main .candlesticks,
body.market-content-page .learn-to-trade-main .reason-text,
body.market-content-page .learn-to-trade-main .py-3,
body.market-content-page .learn-to-trade-main .primary-factor,
body.market-content-page .learn-to-trade-main .tm-copy,
body.market-content-page .what-is-forex-main .what-is-forex-lead,
body.market-content-page .what-is-forex-main .how-do-i-make-a-deposit .reason-info p {
    font-size: var(--learn-to-trade-desc-size);
    font-weight: 400;
    line-height: 1.68;
    color: #333;
}

body.market-content-page.learn-to-trade-page .containers,
body.market-content-page.learn-to-trade-page .containers.learn-to-trade-content,
body.market-content-page .learn-to-trade-main .containers,
body.market-content-page .what-is-forex-main .containers {
    max-width: var(--learn-to-trade-column-width, 60%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* PC：what-is-forex の .containers 内子要素 */
@media screen and (min-width: 601px) {
    body.market-content-page .what-is-forex-main .containers :is(
        h1.payment,
        .reason-text,
        .reason-info,
        hr
    ) {
        max-width: 100%;
        width: 100%;
    }

    body.market-content-page .what-is-forex-main .containers learn-more-contents,
    body.market-content-page .what-is-forex-main .containers account-open {
        width: 100%;
        max-width: 100%;
    }
}

body.market-content-page .learn-to-trade-main .candlesticks {
    padding-bottom: 1.5rem;
}

/* ヒーロー */
body.market-content-page .learn-to-trade-hero,
body.market-content-page .what-is-forex-hero {
    text-align: center;
    margin-bottom: 2rem;
}

body.market-content-page .learn-to-trade-eyebrow,
body.market-content-page .what-is-forex-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #b8892a;
    margin: 0 0 0.75rem;
}

body.market-content-page .learn-to-trade-lead,
body.market-content-page .what-is-forex-lead {
    max-width: var(--learn-to-trade-column-width, 60%);
    margin: 1rem auto 0;
}

/* reason-info（アイコン＋本文） */
body.market-content-page .learn-to-trade-main .reason-info,
body.market-content-page .what-is-forex-main .reason-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 0.5rem;
    max-width: var(--learn-to-trade-column-width, 60%);
}

body.market-content-page .learn-to-trade-main .reason-info img,
body.market-content-page .what-is-forex-main .reason-info img {
    flex-shrink: 0;
    width: auto;
    height: 50px;
}

body.market-content-page .learn-to-trade-main .reason-info p,
body.market-content-page .what-is-forex-main .reason-info p {
    margin-bottom: 1rem;
}

body.market-content-page .learn-to-trade-main .reason-info p:last-child,
body.market-content-page .what-is-forex-main .reason-info p:last-child {
    margin-bottom: 0;
}

/* ハブページ：カード一覧 */
body.market-content-page .learn-to-trade-main .advanced-box {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: var(--learn-to-trade-column-width, 60%);
    margin: 2rem auto 3rem;
    padding: 0;
}

body.market-content-page .learn-to-trade-main .advanced-box .box {
    width: 100%;
    max-width: none;
    border: 1px solid rgba(26, 26, 26, 0.1);
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(26, 26, 26, 0.05);
    margin: 0 0 1rem;
}

body.market-content-page .learn-to-trade-main .advanced-box .box h3 {
    margin: 0;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    color: #1f2430;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;
    white-space: nowrap;
}

body.market-content-page .learn-to-trade-main .advanced-box .box h3::after {
    content: ">";
    flex-shrink: 0;
    margin-left: 0.25em;
}

body.market-content-page .learn-to-trade-main .advanced-box .box a {
    display: block;
    text-decoration: none;
    color: inherit;
}

body.market-content-page .learn-to-trade-main .advanced-box .box a:hover h3 {
    color: #b8892a;
}

body.market-content-page .learn-to-trade-main .advanced-box .box .inner {
    padding: 1rem 1.5rem 1.25rem;
    font-size: var(--learn-to-trade-desc-size);
    line-height: 1.68;
    color: #333;
}

/* インジケーター一覧 */
body.market-content-page .learn-to-trade-main h3 {
    background: none;
    color: #222;
    text-align: left;
    max-width: var(--learn-to-trade-column-width, 60%);
    margin: 2.5rem auto 1rem;
    font-size: 1.375rem;
    font-weight: 700;
    padding: 0;
}

body.market-content-page .learn-to-trade-main .technical-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: var(--learn-to-trade-column-width, 60%);
    margin: 0 auto 2rem;
    gap: 0.75rem 1.5rem;
}

body.market-content-page .learn-to-trade-main .technical {
    flex: 0 0 calc(33.333% - 1rem);
    box-sizing: border-box;
}

body.market-content-page .learn-to-trade-main .technical a {
    color: #1f2430;
    font-weight: 500;
    text-decoration: none;
    font-size: var(--learn-to-trade-desc-size);
}

body.market-content-page .learn-to-trade-main .technical a:hover {
    color: #b8892a;
    text-decoration: underline;
}

body.market-content-page learn-more-contents {
    display: block;
    width: var(--learn-to-trade-column-width, 60%);
    max-width: var(--learn-to-trade-column-width, 60%);
    margin-left: auto;
    margin-right: auto;
}

/* 旧パンくず非表示 */
body.market-content-page ol.breadcrumb:not(.sof-breadcrumb__list) {
    display: none;
}

@media screen and (max-width: 600px) {
    body.market-content-page.learn-to-trade-page {
        --learn-to-trade-column-width: 90%;
    }

    body.market-content-page .learn-to-trade-main > .mx-auto:not(:has(.containers)) {
        max-width: var(--learn-to-trade-column-width, 90%);
    }

    body.market-content-page .learn-to-trade-main h1.payment,
    body.market-content-page .learn-to-trade-main h2.candlesticks-forcus,
    body.market-content-page .learn-to-trade-main h2.reason,
    body.market-content-page .what-is-forex-main .what-is-forex-section h1.payment {
        margin-top: 3.25rem;
        max-width: var(--learn-to-trade-column-width, 90%);
    }

    body.market-content-page .learn-to-trade-main .learn-to-trade-hero + .learn-to-trade-section h1.payment,
    body.market-content-page .what-is-forex-main .what-is-forex-hero + .what-is-forex-section h1.payment {
        margin-top: 3.75rem;
    }

    body.market-content-page .learn-to-trade-main .containers > h1:first-of-type,
    body.market-content-page .learn-to-trade-hero .market-page-title {
        font-size: 28px;
    }

    body.market-content-page .learn-to-trade-main .candlesticks,
    body.market-content-page .learn-to-trade-main .reason-text,
    body.market-content-page .learn-to-trade-main .py-3,
    body.market-content-page .learn-to-trade-main .how-do-i-make-a-deposit,
    body.market-content-page .learn-to-trade-main .containers,
    body.market-content-page .what-is-forex-main .containers,
    body.market-content-page .learn-to-trade-main h3,
    body.market-content-page .learn-to-trade-main .technical-box,
    body.market-content-page .learn-to-trade-main .advanced-box,
    body.market-content-page .learn-to-trade-main .reason-info,
    body.market-content-page .learn-to-trade-main h1.payment + hr,
    body.market-content-page .learn-to-trade-main .learn-to-trade-section hr {
        max-width: var(--learn-to-trade-column-width, 90%);
    }

    body.market-content-page .learn-to-trade-main .containers :is(
        h2.reason,
        h3,
        .reason-text,
        .py-3,
        .technical-box,
        .advanced-box
    ) {
        max-width: 100%;
        width: 100%;
    }

    body.market-content-page .learn-to-trade-lead,
    body.market-content-page .what-is-forex-lead {
        max-width: var(--learn-to-trade-column-width, 90%);
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }

    body.market-content-page .learn-to-trade-main .reason-info,
    body.market-content-page .what-is-forex-main .reason-info {
        gap: 1.5rem;
    }

    body.market-content-page learn-more-contents {
        width: var(--learn-to-trade-column-width, 90%);
        max-width: var(--learn-to-trade-column-width, 90%);
    }

    body.market-content-page .learn-to-trade-main .containers learn-more-contents,
    body.market-content-page .learn-to-trade-main .containers account-open {
        width: 100%;
        max-width: 100%;
    }

    body.market-content-page .learn-to-trade-main .technical {
        flex: 0 0 100%;
    }

    /* ハブページ：カード一覧を画面幅いっぱいに（90% の二重制約を解除） */
    body.market-content-page.learn-to-trade-page .containers.learn-to-trade-content {
        max-width: 100%;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    body.market-content-page .learn-to-trade-main .advanced-box {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    body.market-content-page .learn-to-trade-main .advanced-box .box {
        width: 100%;
        max-width: none;
    }

    /* .containers 内は 90% の二重適用を防ぐ（上の .candlesticks 等の指定より優先） */
    body.market-content-page .learn-to-trade-main .containers :is(
        h1.payment,
        h2.candlesticks-forcus,
        h2.reason,
        h2.deposit,
        .candlesticks,
        .py-3,
        .primary-factor,
        .how-do-i-make-a-deposit,
        hr
    ) {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 767px) and (min-width: 601px) {
    body.market-content-page.learn-to-trade-page .containers.learn-to-trade-content {
        max-width: calc(100% - 2rem);
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    body.market-content-page .learn-to-trade-main .advanced-box {
        max-width: 100%;
        width: 100%;
    }

    body.market-content-page .learn-to-trade-main .advanced-box .box {
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 768px) {
    body.market-content-page .scroll-txt.d-md-none {
        display: none !important;
    }

    body.market-content-page .learn-to-trade-main .advanced-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem 1.5rem;
    }

    body.market-content-page .learn-to-trade-main .advanced-box .box {
        margin: 0;
    }
}