/* =========================================================
   税理士ラボ｜記事ページ共通スタイル
   ========================================================= */

.article-hero{
  background:linear-gradient(180deg,#0A1628 0%,#1F3554 100%);
  color:#fff;padding:140px 0 60px;position:relative;overflow:hidden;
}
.article-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 50%,rgba(20,184,166,.15) 0%,transparent 60%);
}
.article-hero-content{
  position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 24px;
}
.article-cat{
  display:inline-block;padding:5px 14px;border-radius:99px;
  background:rgba(20,184,166,.2);border:1px solid rgba(94,234,212,.4);
  color:var(--teal-light);font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px;
}
.article-cat.cat-career{background:rgba(59,130,246,.2);border-color:rgba(147,197,253,.4);color:#93C5FD}
.article-cat.cat-independence{background:rgba(245,158,11,.2);border-color:rgba(252,211,77,.4);color:#FCD34D}
.article-cat.cat-management{background:rgba(16,185,129,.2);border-color:rgba(110,231,183,.4);color:#6EE7B7}
.article-cat.cat-succession{background:rgba(139,92,246,.2);border-color:rgba(196,181,253,.4);color:#C4B5FD}
.article-title{
  font-family:var(--serif);font-size:38px;font-weight:600;
  line-height:1.5;margin-bottom:24px;letter-spacing:-.01em;
}
.article-meta{
  display:flex;gap:24px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.65);
}
.article-meta-item{display:flex;align-items:center;gap:6px}

.article-body{
  background:#FAFAF9;padding:80px 0 100px;
}
.article-content{
  max-width:760px;margin:0 auto;padding:0 24px;
  font-size:16px;line-height:2;color:#1F2937;
}
.article-content h2{
  font-family:var(--serif);font-size:28px;font-weight:600;
  color:#0F172A;line-height:1.5;
  margin:56px 0 20px;padding-top:8px;
  border-top:3px solid var(--teal);padding-top:32px;
  letter-spacing:-.01em;
}
.article-content h2:first-child{margin-top:0;border-top:none;padding-top:0}
.article-content h3{
  font-family:var(--serif);font-size:20px;font-weight:600;
  color:#0F172A;line-height:1.5;
  margin:36px 0 14px;
}
.article-content p{
  margin-bottom:20px;
}
.article-content p strong, .article-content li strong{
  color:#0F172A;font-weight:600;
  background:linear-gradient(transparent 65%,rgba(20,184,166,.18) 65%);
}
.article-content ul, .article-content ol{
  margin:0 0 24px 0;padding-left:0;
}
.article-content li{
  margin-bottom:10px;padding-left:32px;position:relative;
  list-style:none;
}
.article-content ul li::before{
  content:'●';position:absolute;left:8px;top:1px;
  color:var(--teal);font-size:8px;
}
.article-content ol{counter-reset:item}
.article-content ol li{counter-increment:item}
.article-content ol li::before{
  content:counter(item);position:absolute;left:0;top:4px;
  width:22px;height:22px;border-radius:50%;
  background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1;
}
.article-content blockquote{
  background:#fff;border-left:4px solid var(--teal);
  padding:24px 28px;margin:28px 0;border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  font-size:15px;color:#334155;line-height:1.9;
}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content .lead{
  font-size:18px;line-height:1.95;color:#334155;
  padding:24px 28px;background:#fff;border-radius:12px;
  border-left:4px solid var(--teal);margin-bottom:40px;
}
.article-content table{
  width:100%;border-collapse:collapse;
  background:#fff;border-radius:8px;overflow:hidden;
  margin:24px 0;font-size:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.article-content th{
  background:var(--navy);color:#fff;padding:12px 16px;
  text-align:left;font-weight:700;font-size:13px;
}
.article-content td{
  padding:12px 16px;border-bottom:1px solid #E5E7EB;
}
.article-content tr:last-child td{border-bottom:none}
.article-content .highlight{background:#F0FDFA;color:var(--teal-dark);font-weight:600}

.article-toc{
  background:#fff;border:1px solid #E5E7EB;border-radius:12px;
  padding:24px 28px;margin-bottom:40px;
}
.article-toc-title{
  font-size:13px;font-weight:700;color:var(--navy);
  margin-bottom:14px;letter-spacing:.5px;
}
.article-toc ol{margin:0}
.article-toc li{padding-left:0;margin-bottom:6px}
.article-toc li::before{display:none}
.article-toc a{
  color:#475569;text-decoration:none;font-size:14px;line-height:1.7;
  display:block;padding:4px 0;
}
.article-toc a:hover{color:var(--teal-dark)}

.article-cta{
  background:linear-gradient(135deg,#0A1628 0%,#1F3554 100%);
  color:#fff;border-radius:16px;padding:40px;margin:48px 0 24px;
  text-align:center;position:relative;overflow:hidden;
}
.article-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(20,184,166,.15) 0%,transparent 70%);
}
.article-cta-content{position:relative;z-index:1}
.article-cta-eyebrow{
  font-size:11px;font-weight:700;color:var(--teal-light);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;
}
.article-cta h3{
  font-family:var(--serif);font-size:24px;font-weight:600;
  margin-bottom:14px;line-height:1.5;color:#fff;
}
.article-cta p{
  font-size:14px;color:rgba(255,255,255,.85);margin-bottom:24px;line-height:1.8;
}
.article-cta .btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--teal);color:#fff;padding:14px 28px;border-radius:10px;
  font-weight:700;font-size:14px;text-decoration:none;
  box-shadow:0 6px 16px rgba(20,184,166,.3);transition:all .2s;
}
.article-cta .btn-primary:hover{background:var(--teal-dark);transform:translateY(-1px);color:#fff}

.related-articles{
  margin-top:60px;padding-top:40px;
  border-top:1px solid #E5E7EB;
}
.related-articles h3{
  font-family:var(--serif);font-size:20px;font-weight:600;
  color:#0F172A;margin-bottom:24px;
}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.related-card{
  background:#fff;border:1px solid #E5E7EB;border-radius:10px;
  padding:20px 24px;text-decoration:none;color:inherit;
  transition:all .2s;display:block;
}
.related-card:hover{transform:translateY(-2px);border-color:var(--teal);color:inherit}
.related-card-cat{
  font-size:10px;font-weight:700;color:var(--teal-dark);
  letter-spacing:1.5px;margin-bottom:8px;
}
.related-card-title{font-size:14px;font-weight:600;color:#0F172A;line-height:1.5}

@media (max-width:768px){
  .article-title{font-size:24px}
  .article-content{font-size:15px}
  .article-content h2{font-size:22px;margin:40px 0 16px}
  .article-content h3{font-size:18px}
  .article-content .lead{font-size:16px;padding:18px}
  .article-cta{padding:28px 24px}
  .related-grid{grid-template-columns:1fr}
}