/* Service-guide articles receive brand values through their wrapper CSS variables. */
.output-service-guide .article-markdown-body > h2 {
    color: #fff;
    background: var(--service-main, #12203a);
}

.output-service-guide .article-markdown-body mark {
    background: var(--service-marker, rgba(234, 173, 2, .3));
}

.output-service-guide .article-callout {
    border-top-color: var(--service-main, #12203a);
    background: var(--service-surface, #fffefb);
}

.output-service-guide .article-callout .article-callout-label {
    color: var(--service-main, #12203a);
}

.output-service-guide .article-callout > p {
    color: var(--service-text, var(--article-text));
}

.output-service-guide .article-markdown-body ::selection {
    background: var(--service-highlight, rgba(234, 173, 2, .35));
}

.output-service-guide .article-markdown-body a:not(.article-cta__button) {
    color: var(--service-main, #12203a);
}

/* ==== 目次(md-toc)のブランド化: 金アクセント → メイン色。値は記事のブランドCSS変数から ==== */
.output-service-guide .md-toc {
    background: color-mix(in srgb, var(--service-marker, #fffdf8) 40%, #ffffff);
    border-color: color-mix(in srgb, var(--service-main, #c8a24a) 30%, #ffffff);
}

.output-service-guide .md-toc-title {
    color: var(--service-main, #8a6d1f);
}

.output-service-guide .md-toc-title::after {
    border-right-color: var(--service-main, #8a6d1f);
    border-bottom-color: var(--service-main, #8a6d1f);
}

.output-service-guide .md-toc li {
    color: var(--service-main, #8a6d1f);
}

.output-service-guide .md-toc a {
    color: var(--service-text, #1f1f1f);
}

.output-service-guide .md-toc a:hover {
    color: var(--service-main, #8a6d1f);
}

/* 右サイドバーはサイト共通デザイン(金)のまま。ブランド色は本文面だけに限定する(2026-07-18ユーザー指示) */

/* チェックリスト等の線画アイコン(SVGはcurrentColor参照)もブランド色へ変数化(2026-07-18ユーザー指示) */
.output-service-guide .article-gold-checklist-icon {
    color: var(--service-main, #b8860b);
}

/* チェックアイコンは丸枠なしのチェックのみ。元の丸枠サイズまで拡大する(2026-07-18ユーザー指示) */
.output-service-guide .article-gold-checklist-icon svg circle {
    display: none;
}

.output-service-guide .article-gold-checklist-icon svg path {
    transform: scale(1.8);
    transform-box: view-box;
    transform-origin: center;
}

/* ==== 統合CTA面のブランド化（夜空紺+金 → メイン色グラデ+ミント） ==== */
.output-service-guide .article-cta,
.output-service-guide .article-cta--inline {
    --article-cta-text: #fff;
    --article-cta-muted: rgb(255 255 255 / 92%);
    --article-cta-heading: #fff;
    --article-cta-eyebrow: var(--service-marker, #f7ecd4);
    --article-cta-link: #fff;
    background: linear-gradient(150deg, var(--service-main, #15243a), color-mix(in srgb, var(--service-main, #15243a) 60%, #08282c));
    border-color: color-mix(in srgb, var(--service-main-light, #c5a55a) 55%, #fff);
}

.output-service-guide .article-cta::before {
    border-color: rgb(255 255 255 / 28%);
}

/* DB由来のcta_description(結果ページ向け汎用文。「診断でわかった強みを…」等)は紹介記事では出さない。
   記事固有のbody(conversion_profile)が同じ役割を担っており、診断結果が自動連携されるような誤解も防ぐ。 */
.output-service-guide .article-cta__description,
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__description {
    display: none;
}

/* PRチップ: 金地→ミント地+本文色（articles.cssの長い連鎖ルールに勝たせる） */
.output-service-guide .article-cta__service span,
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__service span {
    color: var(--service-text, #1f1f1f);
    background: var(--service-marker, #eaad02);
}

/* 公式バナーの額装: 白マット+角丸+浮かせる影。リンクは /go/ 統一済み */
.output-service-guide .article-cta__media,
.output-service-guide .article-cta--media-wide .article-cta__media,
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__media {
    width: min(100%, 440px);
    padding: 6px;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
}

.output-service-guide .article-cta__media img {
    display: block;
    border-radius: 8px;
}

/* 最終CTAのみ、横並び時のバナー列を300→340pxへ広げて公式クリエイティブの存在感を出す。
   中間CTAはテンプレ既定(300px)のままコピー幅を優先する。 */
@container article-cta (min-width: 600px) {
    .output-service-guide .article-cta--terminal.article-cta--affiliate.has-media.article-cta--media-wide:not(.article-cta--rail) .article-cta__layout {
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    }

    .output-service-guide .article-cta--terminal.article-cta--media-wide .article-cta__media {
        width: min(100%, 340px);
    }
}

/* articles.css の `.article-main.markdown-content .article-markdown-body .article-cta .article-cta__button`
   (特異度0,5,0)に勝つため、同じ連鎖へ .output-service-guide を足して上書きする。
   ティール面の上ではハイライト色(公式LPの注目色)のピルが最も視認される。 */
.output-service-guide .article-cta__button,
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__button {
    border: none;
    border-radius: 999px;
    color: var(--service-text, #1f1f1f);
    background: var(--service-highlight, #eaad02);
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

.output-service-guide .article-cta__button:hover,
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__button:hover {
    color: var(--service-text, #1f1f1f);
    background: color-mix(in srgb, var(--service-highlight, #eaad02) 82%, #ffffff);
}

/* 広告掲載ポリシー(PR開示)の視認性を上げる。ティール面の上で白リンク+下線。
   本文リンクのブランド色(--service-main)がCTA内へ流れ込むのを、この高特異度で打ち消す。 */
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__policy {
    color: rgb(255 255 255 / 90%);
}
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__policy a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
}
.output-service-guide .article-main.markdown-content .article-markdown-body .article-cta .article-cta__policy a:hover {
    color: var(--service-marker, #fff);
}

/* ヒーロー(サムネ)まわりのborderをブランドのメイン色に寄せる（金枠→ティール系の淡色） */
.output-service-guide .article-detail-hero {
    border-color: color-mix(in srgb, var(--service-main, #c8a24a) 35%, #ffffff);
}

/* 公式スクリーンショットのヒーロー下に出す取得元・参照日クレジット */
.output-service-guide .article-detail-hero-credit {
    margin: 6px 2px 0;
    font-size: 12.5px;
    color: #6b7280;
    text-align: right;
}

/* 中間CTAもバナーあり(2026-07-18ユーザー指示)。articles.cssの横長コンパクトテンプレート
   (media-wide: 左バナー+右コピーの2カラム・縦幅を抑える)をそのまま使う。 */

.output-service-guide .article-cta--terminal .article-cta__media {
    border-color: var(--service-main-light, #c8a24a);
    background: var(--service-surface, #fffefb);
}