/* 記事ガイド共通テーマ。occupation/careerジャンルの記事詳細(.article-guide)だけに効く。
   色トークン・読書面・フラット化はここが唯一の定義。ジャンル差分は occupation.css / career.css へ。 */
html:has(.article-guide),
body:has(.article-guide) {
    overflow-x: clip;
}

.article-guide {
    --guide-navy: #12203a;
    --guide-navy-2: #1b2c49;
    --guide-gold: #b88b46;
    --guide-gold-deep: #8a6534;
    --guide-brown: #5f5232;
    --guide-coral: #c23a24;
    --guide-brick: #7d3328;
    --guide-amber: #9a6500;
    --guide-amber-soft: #fff4d6;
    --guide-gray: #5a5a5a;
    --guide-ivory: #fffaf0;
    --guide-surface: #fffefb;
    --guide-line: rgba(138, 101, 52, .32);
    --guide-line-strong: rgba(138, 101, 52, .5);
    --guide-font-serif: var(--article-font-serif);
    --guide-font-sans: var(--article-font-sans);

    /* 共通部品が参照する色も、このラッパー内だけ同じ役割へ寄せる。 */
    --article-navy: var(--guide-navy);
    --article-navy-2: var(--guide-navy-2);
    --article-gold: var(--guide-gold);
    --article-gold-deep: var(--guide-gold-deep);
    --article-gold-text: var(--guide-gold-deep);
    --article-text: #1f1f1f;
    --article-muted: var(--guide-gray);
    --article-muted-2: var(--guide-gray);
    --article-crimson: var(--guide-coral);
    --article-line: var(--guide-line);
    --article-line-strong: var(--guide-line-strong);
}

.article-guide .article-main {
    background: var(--guide-surface);
}

.article-guide [id] {
    scroll-margin-top: 92px;
}

.article-guide .article-markdown-body > h2 {
    font-family: var(--guide-font-sans);
    text-wrap: balance;
}

.article-guide .article-markdown-body > p {
    max-width: 46rem;
    color: var(--article-text);
    font-size: 17px;
    line-height: 1.8;
    text-align: left;
    text-wrap: pretty;
}

.article-guide .article-markdown-body > .article-direct-answer,
.article-guide .article-callout {
    max-width: 46rem;
}

.article-guide .article-callout--caution {
    border-top-color: var(--guide-amber);
    background: var(--guide-amber-soft);
}

.article-guide .article-callout--caution .article-callout-label {
    color: var(--guide-amber);
}

.article-guide a:focus-visible,
.article-guide button:focus-visible,
.article-guide summary:focus-visible,
.article-guide [tabindex="0"]:focus-visible {
    outline: 3px solid #f0b93d;
    outline-offset: 3px;
}

.article-guide .article-markdown-body mark {
    color: var(--article-text);
    background: linear-gradient(transparent 58%, rgba(234, 173, 2, .3) 58%);
}

/* ==== 本文中間CTA(_article_mid_cta.html) ====
   ボトムCTA(career.css)と同じ紺パネル＋朱ボタンの語彙をコンパクトに使う。 */
.article-guide .article-mid-cta {
    display: grid;
    gap: 10px;
    max-width: 46rem;
    margin: 44px 0;
    padding: clamp(22px, 3.5vw, 30px);
    border-radius: 14px;
    color: var(--article-on-dark);
    background: var(--guide-navy);
}

.article-guide .article-markdown-body .article-mid-cta-eyebrow {
    margin: 0;
    color: #ffd767;
    font-size: 13px;
    font-weight: 800;
}

.article-guide .article-markdown-body .article-mid-cta-heading {
    margin: 0;
    color: var(--article-on-dark);
    font-family: var(--guide-font-sans);
    font-size: clamp(19px, 2.4vw, 22px);
    font-weight: 800;
    line-height: 1.5;
    text-wrap: balance;
}

.article-guide .article-markdown-body .article-mid-cta-body {
    margin: 0;
    color: var(--article-on-dark);
    font-size: 15px;
    line-height: 1.75;
}

/* 本文内では .article-markdown-body a (金リンク)に勝つ詳細度でボタン色を確定させる */
.article-guide .article-markdown-body .article-mid-cta .article-affiliate-btn {
    justify-self: start;
    min-height: 48px;
    padding: 12px 22px;
    border-color: var(--guide-gold);
    color: var(--article-white);
    background: var(--guide-coral);
    text-decoration: none;
}

.article-guide .article-markdown-body .article-mid-cta .article-affiliate-btn:hover {
    color: var(--article-white);
    background: #a93120;
}

.article-guide .article-markdown-body .article-mid-cta-note {
    margin: 2px 0 0;
    color: rgba(244, 236, 214, .75);
    font-size: 12.5px;
    line-height: 1.65;
}

/* :not()は出力タイプ別リンク規則((0,4,1))に勝つための詳細度確保 */
.article-guide .article-markdown-body .article-mid-cta .article-mid-cta-note a:not(.article-affiliate-btn) {
    color: var(--article-on-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 480px) {
    .article-guide .article-mid-cta {
        padding: 22px 18px;
    }

    .article-guide .article-mid-cta .article-affiliate-btn {
        justify-self: stretch;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-guide *,
    .article-guide *::before,
    .article-guide *::after {
        scroll-behavior: auto;
        transition-duration: .01ms;
    }
}

/* ==== フラット化(2026-07-16 ユーザー指示・全記事共通方針) ====
   カード区分けの枠線・影をやめ、余白で区切る。画像に枠を付けない。 */
.article-guide .article-visual {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.article-guide .article-generated-illustration {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.article-guide .article-generated-illustration img {
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}