/* ============================================================
   article.css — くだもの狩りマップ 特集・読みもの 共通スタイル
   articles/*.html で使用。common.css（ヘッダー・フッター等）とセットで読み込む。
   ============================================================ */

.container{max-width:1180px;margin:0 auto;padding:28px 20px 80px}
.article-wrap{max-width:760px;margin:0 auto}

.article-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:700;margin-bottom:18px}
.article-back:hover{color:var(--green)}

.article-hero{padding:12px 0 8px}
.article-eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green-dark);font-size:12px;font-weight:800;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.article-hero h1{font-size:clamp(26px,4vw,38px);line-height:1.35;margin:0 0 14px;letter-spacing:-.01em}
.article-lead{font-size:16px;color:var(--muted);line-height:1.85;margin:0}

.article-body{margin-top:8px}
.article-body h2{font-size:20px;margin:40px 0 14px;display:flex;align-items:center;gap:10px}
.article-body h2::before{content:"";width:6px;height:22px;border-radius:4px;background:var(--green-2);display:inline-block;flex:0 0 auto}
.article-body p{font-size:15.5px;line-height:1.9;color:#33453d;margin:0 0 18px}
.article-body ul{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:10px}
.article-body ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.75;color:#33453d}
.article-body ul li::before{content:"✓";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#eef8f1;color:var(--green);display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}

.callout{margin:24px 0;padding:18px 20px;border-left:4px solid var(--green-2);background:#f3faf5;border-radius:10px;color:#3f534a;font-size:14.5px;line-height:1.8}
.callout b{color:var(--green-dark)}

.article-cta{margin-top:44px;padding:28px;border-radius:22px;background:linear-gradient(135deg,#2f8f5b,#55b877);color:#fff;text-align:center;box-shadow:0 14px 28px rgba(47,143,91,.22)}
.article-cta h3{margin:0 0 8px;font-size:19px}
.article-cta p{margin:0 0 18px;color:rgba(255,255,255,.92);font-size:14px}
.article-cta a{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--green-dark);border-radius:14px;padding:13px 24px;font-weight:900}

.article-related{margin-top:48px}
.article-related h3{font-size:16px;margin:0 0 14px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.related-card{display:block;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.related-card b{display:block;font-size:14px;margin-bottom:4px}
.related-card span{font-size:12.5px;color:var(--muted)}

@media(max-width:680px){
  .container{padding:14px 14px 70px}
  .article-hero{padding:6px 0 4px}
  .related-grid{grid-template-columns:1fr}
}

/* Markdown の引用（> ）は「ポイント」の囲み（.callout と同じ見た目）として使う */
.article-body blockquote{margin:24px 0;padding:18px 20px;border-left:4px solid var(--green-2);background:#f3faf5;border-radius:10px;color:#3f534a;font-size:14.5px;line-height:1.8}
.article-body blockquote p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.article-body blockquote strong{color:var(--green-dark)}