.article-page {
    max-width: 920px;
}

.article-title {
    max-width: 700px;
    margin: 0 0 12px;
    color: var(--color-text-heading, var(--color-text));
    font-size: clamp(29px, 5vw, 44px);
    line-height: 1.35;
}

.article-blocks {
    grid-template-columns: 1fr;
}

.article-block {
    min-width: 0;
}

.article-block > h3[id] {
    scroll-margin-top: 84px;
}

.article-block .policy-text + .about-feature-list,
.article-block > p + .about-feature-list {
    margin-top: 14px;
}

/* 記事の箇条書きは、共通の特徴カードではなく1つのカード内のリストにする。 */
.article-block-list .about-feature-list {
    display: block;
    margin: 0;
    padding-inline-start: 1.4em;
    list-style: disc outside;
}

.article-block-list .about-feature-list li {
    display: list-item;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--color-text);
    border-radius: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.article-block-list .about-feature-list li + li {
    margin-top: 6px;
}

.article-block-button {
    text-align: center;
}

.article-block-button .policy-contact-link {
    margin-top: 0;
}

.article-block-faq > h3 {
    display: none;
}

.article-section-heading {
    grid-column: 1 / -1;
    margin: 12px 4px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: clamp(20px, 3vw, 26px);
    scroll-margin-top: 84px;
}

.article-section-heading.article-heading-level-h3:not([class*="article-font-px"]) {
    font-size: clamp(18px, 2.6vw, 22px);
}

.article-section-heading.article-heading-bg-yellow,
.article-section-heading.article-heading-bg-pink,
.article-section-heading.article-heading-bg-lavender,
.article-section-heading.article-heading-bg-blue,
.article-section-heading.article-heading-bg-green,
.article-section-heading.article-heading-bg-gray {
    margin-inline: 0;
    padding: 8px 10px;
    border-bottom-color: transparent;
    border-radius: 7px;
}
.article-section-heading.article-heading-bg-yellow { background: #fff2a8; }
.article-section-heading.article-heading-bg-pink { background: #ffe2ef; }
.article-section-heading.article-heading-bg-lavender { background: #f4e8f9; }
.article-section-heading.article-heading-bg-blue { background: #e6f3ff; }
.article-section-heading.article-heading-bg-green { background: #e8f7ec; }
.article-section-heading.article-heading-bg-gray { background: #f1f1f3; }
.article-section-heading.article-heading-text-black { color: var(--color-text-heading, var(--color-text)); }
.article-section-heading.article-heading-text-gray { color: var(--color-text-sub); }
.article-section-heading.article-heading-text-blue { color: #245b93; }
.article-section-heading.article-heading-text-green { color: #246b45; }
.article-section-heading.article-heading-text-red { color: #a63f4c; }

.article-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.article-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: 14px;
}

.article-table th,
.article-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--color-border);
    border-inline-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
}

.article-table th:last-child,
.article-table td:last-child {
    border-inline-end: 0;
}

.article-table tr:last-child td {
    border-bottom: 0;
}

.article-table th {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 750;
}

.article-figure {
    margin: 0;
}

.article-figure img {
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    border-radius: 12px;
}

.article-figure figcaption {
    margin-top: 8px;
    color: var(--color-text-sub);
    font-size: 12px;
    text-align: center;
}

.article-faq {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.article-faq summary {
    padding: 12px 0;
    color: var(--color-primary-dark);
    cursor: pointer;
    font-weight: 750;
}

.article-faq p {
    padding: 0 0 14px;
}

/* 目次はH2/H3から自動生成。公開画面ではdetailsで閉じた状態を標準にする。 */
.article-toc {
    grid-column: 1 / -1;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-primary-soft);
}

.article-toc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 13px 16px;
    color: var(--color-primary-dark);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.article-toc-title::-webkit-details-marker {
    display: none;
}

.article-toc-title::after {
    content: '＋';
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 500;
}

.article-toc[open] .article-toc-title::after {
    content: '−';
}

.article-toc-list,
.article-toc ol {
    margin: 0;
    padding: 0 16px 14px 2.7em;
}

.article-toc li + li {
    margin-top: 4px;
}

.article-toc-list-custom {
    list-style: none;
    padding-inline-start: 16px;
}

.article-toc-list-custom > li {
    display: grid;
    grid-template-columns: minmax(1.8em, auto) minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

.article-toc-marker {
    color: var(--color-text-sub);
    text-align: end;
    white-space: nowrap;
}

.article-toc-level-3 {
    margin-inline-start: 1em;
    font-size: .94em;
}

.article-toc a {
    color: var(--color-text);
    text-decoration: none;
}

.article-toc a:hover,
.article-toc a:focus-visible {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* A8の元コードは変更せず、外側のラッパーとCSSだけで見た目を整える。 */
.article-affiliate {
    grid-column: 1 / -1;
    position: relative;
    text-align: center;
}

.article-affiliate img[width="1"][height="1"] {
    position: absolute;
    width: 1px;
    height: 1px;
}

/* テキストリンクだけをボタン化。バナー画像リンクは元の見た目を保つ。 */
.article-affiliate a:not(:has(img)),
.article-affiliate-button a:not(:has(img)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.article-affiliate a:not(:has(img)):hover,
.article-affiliate a:not(:has(img)):focus-visible,
.article-affiliate-button a:not(:has(img)):hover,
.article-affiliate-button a:not(:has(img)):focus-visible {
    background: var(--color-primary-dark);
    color: #fff;
}

/* 必要な場合だけ、管理画面からA8コード本来の見た目へ戻せる。 */
.article-affiliate.article-affiliate-raw {
    text-align: start;
}

.article-affiliate.article-affiliate-raw a:not(:has(img)) {
    display: inline;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
}

.article-affiliate.article-affiliate-raw a:not(:has(img)):hover,
.article-affiliate.article-affiliate-raw a:not(:has(img)):focus-visible {
    background: transparent;
    color: inherit;
}

/* ブロックごとのデザイン設定。既存ブロックにはクラスを付けず従来表示を維持する。 */
.article-block.article-box-white { background: #fff; }
.article-block.article-box-gray { background: #f4f5f7; }
.article-block.article-box-lavender { background: #f4e8f9; }
.article-block.article-box-blue { background: #eaf3ff; }
.article-block.article-box-green { background: #eaf7ef; }
.article-block.article-box-amber { background: #fff3dc; }

.article-block.article-align-center,
.article-section-heading.article-align-center { text-align: center; }
.article-block.article-align-right,
.article-section-heading.article-align-right { text-align: right; }

.article-block.article-font-small { font-size: 14px; }
.article-block.article-font-large { font-size: 18px; }
.article-section-heading.article-font-small { font-size: 18px; }
.article-section-heading.article-font-large { font-size: 30px; }

.article-font-px12 { --article-font-size: 12px; }
.article-font-px14 { --article-font-size: 14px; }
.article-font-px16 { --article-font-size: 16px; }
.article-font-px18 { --article-font-size: 18px; }
.article-font-px20 { --article-font-size: 20px; }
.article-font-px24 { --article-font-size: 24px; }
.article-font-px28 { --article-font-size: 28px; }
.article-font-px30 { --article-font-size: 30px; }
.article-font-px32 { --article-font-size: 32px; }
.article-block[class*="article-font-px"],
.article-section-heading[class*="article-font-px"] { font-size: var(--article-font-size); }

.article-block.article-font-small > h3,
.article-block.article-font-large > h3 {
    font-size: 1.15em;
}

.article-block.article-font-small .about-feature-list li,
.article-block.article-font-large .about-feature-list li,
.article-block.article-font-small .article-table,
.article-block.article-font-large .article-table,
.article-block.article-font-small .article-faq summary,
.article-block.article-font-large .article-faq summary,
.article-block.article-font-small .article-faq p,
.article-block.article-font-large .article-faq p,
.article-block.article-font-small .article-figure figcaption,
.article-block.article-font-large .article-figure figcaption,
.article-block.article-font-small .policy-contact-link,
.article-block.article-font-large .policy-contact-link {
    font-size: inherit;
}

.article-block.article-font-small .article-table th,
.article-block.article-font-small .article-table td,
.article-block.article-font-large .article-table th,
.article-block.article-font-large .article-table td,
.article-block[class*="article-font-px"] > h3,
.article-block[class*="article-font-px"] .about-feature-list li,
.article-block[class*="article-font-px"] .article-table,
.article-block[class*="article-font-px"] .article-table th,
.article-block[class*="article-font-px"] .article-table td,
.article-block[class*="article-font-px"] .article-faq summary,
.article-block[class*="article-font-px"] .article-faq p,
.article-block[class*="article-font-px"] .article-figure figcaption,
.article-block[class*="article-font-px"] .policy-contact-link {
    font-size: inherit;
}

.article-block-button,
.article-affiliate:not(.article-affiliate-raw) {
    --article-cta-bg: var(--color-primary);
    --article-cta-text: #fff;
    --article-cta-border: var(--color-primary);
    --article-cta-hover-bg: var(--color-primary-dark);
    --article-cta-hover-text: #fff;
}

.article-block-button.article-button-secondary,
.article-affiliate.article-button-secondary:not(.article-affiliate-raw) {
    --article-cta-bg: #fff;
    --article-cta-text: var(--color-primary-dark);
    --article-cta-border: var(--color-primary-dark);
    --article-cta-hover-bg: var(--color-primary-soft);
    --article-cta-hover-text: var(--color-primary-dark);
}

.article-block-button.article-button-pink,
.article-affiliate.article-button-pink:not(.article-affiliate-raw) {
    --article-cta-bg: #d96aa7;
    --article-cta-border: #d96aa7;
    --article-cta-hover-bg: #c45694;
}

.article-block-button.article-button-neutral,
.article-affiliate.article-button-neutral:not(.article-affiliate-raw) {
    --article-cta-bg: #4b4650;
    --article-cta-border: #4b4650;
    --article-cta-hover-bg: #3f3a44;
}

.article-block-button.article-button-info,
.article-affiliate.article-button-info:not(.article-affiliate-raw) {
    --article-cta-bg: #245b93;
    --article-cta-border: #245b93;
    --article-cta-hover-bg: #1d4d7d;
}

.article-block-button.article-button-success,
.article-affiliate.article-button-success:not(.article-affiliate-raw) {
    --article-cta-bg: #246b45;
    --article-cta-border: #246b45;
    --article-cta-hover-bg: #1d5a3a;
}

.article-block-button .policy-contact-link,
.article-affiliate:not(.article-affiliate-raw) a:not(:has(img)) {
    background: var(--article-cta-bg);
    color: var(--article-cta-text);
    border: 1px solid var(--article-cta-border);
}

.article-block-button .policy-contact-link:hover,
.article-block-button .policy-contact-link:focus-visible,
.article-affiliate:not(.article-affiliate-raw) a:not(:has(img)):hover,
.article-affiliate:not(.article-affiliate-raw) a:not(:has(img)):focus-visible {
    background: var(--article-cta-hover-bg);
    color: var(--article-cta-hover-text);
}

/* 囲みなしは色の指定を残したまま、背景・枠・影・内側の余白だけを外す。 */
.article-block.article-box-style-plain,
.article-editor-preview .article-block.article-box-style-plain {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* リンクボタンはボタン本体だけを表示し、外側のカードは標準で付けない。 */
.article-block.article-block-button,
.article-editor-preview .article-block.article-block-button,
.article-visual-canvas .article-canvas-block.article-block-button,
.article-visual-canvas .article-canvas-block.article-block-affiliate {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.article-visual-canvas .article-canvas-block.article-block-toc {
    padding: 10px;
}

.article-visual-canvas .article-toc-preview {
    padding: 12px 14px;
    text-align: start;
}

.article-visual-canvas .article-toc-preview .article-toc-title {
    padding: 0;
}

.article-visual-canvas .article-toc-preview .article-toc-title::after {
    content: none;
}

.article-visual-canvas .article-toc-preview ol {
    padding: 7px 0 0 1.35em;
}

.article-affiliate-code-editor {
    min-height: 108px;
    padding: 7px;
    border: 1px solid var(--admin-border, var(--color-border));
    border-radius: 8px;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    text-align: start;
}

@media (max-width: 600px) {
    /* スマホでは通常リンクボタンとA8テキスト広告を同じ横幅に揃える。 */
    .article-block-button .policy-contact-link,
    .article-affiliate:not(.article-affiliate-raw) a:not(:has(img)) {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
    }

    .article-section-heading {
        margin-top: 8px;
        font-size: 20px;
    }

    .article-section-heading.article-font-small { font-size: 18px; }
    .article-section-heading.article-font-large { font-size: 25px; }

    .article-table {
        font-size: 13px;
    }

    .article-table th,
    .article-table td {
        padding: 9px 10px;
    }

    .article-toc-title {
        padding: 11px 13px;
    }

    .article-toc-list,
    .article-toc ol {
        padding: 0 13px 12px 2.45em;
    }
}