/* ===================================
   ReRise 競技×怪我 記事ページ 追加CSS
   ※ style.css の後に読み込む前提。
   ※ 配色・フォントは style.css の :root 変数を継承。
   =================================== */

/* 記事全体のコンテナ（読みやすい横幅に制限） */
.article {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 24px) var(--spacing-md) var(--spacing-xxl);
}

@media (min-width: 768px) {
    .article {
        padding-top: calc(var(--header-height) + 40px);
    }
}

/* PCヘッダー右のCTA（スマホでは非表示） */
.pc-cta-header { display: none; }
@media (min-width: 768px) {
    .pc-cta-header { display: inline-flex; padding: 10px 20px; font-size: 14px; }
}

/* ===== パンくず ===== */
.breadcrumb {
    font-size: 13px;
    color: var(--color-gray-dark);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}
.breadcrumb a { color: var(--color-primary); text-decoration: underline; }
.breadcrumb-sep { margin: 0 6px; color: var(--color-gray); }
.breadcrumb-current { color: var(--color-gray-dark); }

/* ===== ページ見出し（ヒーロー） ===== */
.article-hero { margin-bottom: var(--spacing-xl); }
.article-hero-tag {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.05em;
}
.article-hero-title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
    .article-hero-title { font-size: 36px; }
}
.article-hero-lead {
    font-size: 16px;
    line-height: 1.9;
    color: var(--color-text);
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

/* 監修者表記 */
.article-supervisor {
    font-size: 13px;
    color: var(--color-gray-dark);
    margin-top: var(--spacing-sm);
    padding-left: 12px;
    border-left: 3px solid var(--color-primary);
    line-height: 1.7;
}

/* 番号付き手順リスト（本文中） */
.steps {
    counter-reset: step;
    list-style: none;
    margin: var(--spacing-md) 0;
}
.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 42px;
    margin-bottom: var(--spacing-sm);
    line-height: 1.8;
}
.steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 28px; height: 28px;
    background-color: var(--color-primary);
    color: #fff; font-size: 14px; font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* ===== 目次 ===== */
.toc {
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    background-color: #fff;
}
.toc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}
.toc-list { list-style: none; counter-reset: toc; }
.toc-list li { counter-increment: toc; margin-bottom: 10px; padding-left: 30px; position: relative; line-height: 1.6; }
.toc-list li:last-child { margin-bottom: 0; }
.toc-list li::before {
    content: counter(toc);
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px;
    background-color: var(--color-primary);
    color: #fff; font-size: 12px; font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.toc-list a { color: var(--color-text); text-decoration: none; }
.toc-list a:hover { color: var(--color-primary); text-decoration: underline; }

/* ===== 本文タイポグラフィ ===== */
.article-body { font-size: 16px; line-height: 1.9; }
.article-body section { margin-bottom: var(--spacing-xxl); scroll-margin-top: calc(var(--header-height) + 16px); }

.article-body h2 {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-primary);
    padding-left: 14px;
    border-left: 5px solid var(--color-accent);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
    .article-body h2 { font-size: 26px; }
}
.article-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--spacing-lg) 0 var(--spacing-xs);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-gray);
}
.article-body p { margin-bottom: var(--spacing-md); }
.article-body strong { color: var(--color-accent); font-weight: 700; }

/* ===== 囲み枠（callout） ===== */
.callout {
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}
.callout-title { font-weight: 700; margin-bottom: var(--spacing-xs); }
.callout ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.callout li { margin-bottom: 6px; line-height: 1.7; }

/* ポイント＝ブルー系 */
.callout-point {
    background-color: #eaf1f9;
    border-left: 4px solid var(--color-primary);
}
.callout-point .callout-title { color: var(--color-primary); }

/* 注意＝レッド系（アクセント） */
.callout-note {
    background-color: #fbeeed;
    border-left: 4px solid var(--color-accent);
}
.callout-note .callout-title { color: var(--color-accent); }

/* 控えめな注記（一行・グレー） */
.note-inline {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    padding: 10px 14px;
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius);
    margin: var(--spacing-md) 0;
}

/* ===== 記事途中のCTA帯 ===== */
.cta-band {
    background: linear-gradient(135deg, var(--color-primary) 0%, #16345c 100%);
    color: #fff;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    margin: var(--spacing-xl) 0;
}
.cta-band-text { font-size: 16px; font-weight: 500; line-height: 1.8; margin-bottom: var(--spacing-md); }

/* ===== FAQ ===== */
.faq-item {
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}
.faq-q { font-weight: 700; color: var(--color-primary); position: relative; padding-left: 28px; margin-bottom: var(--spacing-xs); }
.faq-q::before {
    content: "Q"; position: absolute; left: 0; top: -2px;
    color: #fff; background: var(--color-primary);
    width: 20px; height: 20px; border-radius: 4px;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.faq-a { padding-left: 28px; position: relative; line-height: 1.8; }
.faq-a::before {
    content: "A"; position: absolute; left: 0; top: -2px;
    color: #fff; background: var(--color-accent);
    width: 20px; height: 20px; border-radius: 4px;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
}

/* ===== 関連リンク ===== */
.related { border-top: 1px solid var(--color-gray); padding-top: var(--spacing-lg); }
.related-list { list-style: none; }
.related-list li { margin-bottom: var(--spacing-sm); }
.related-list a {
    display: block;
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-primary);
    font-weight: 500;
    transition: var(--transition);
}
.related-list a:hover { background-color: #eaf1f9; transform: translateX(4px); }

/* ===== 末尾CTA ===== */
.cta-final {
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    margin-top: var(--spacing-xxl);
}
.cta-final-title { font-size: 22px; font-weight: 900; color: var(--color-primary); margin-bottom: var(--spacing-md); line-height: 1.5; }
.cta-final-lead { font-size: 15px; line-height: 1.9; color: var(--color-gray-dark); margin-bottom: var(--spacing-lg); }

/* ===== フッター店舗情報 ===== */
.footer-info {
    text-align: center;
    margin: var(--spacing-md) 0;
    color: rgba(255, 255, 255, 0.85);
}
.footer-info-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.footer-info-row {
    font-size: 12.5px;
    line-height: 1.9;
}