/* =====================================================
   DNSJP コラム/ブログ/ガイド 共通スタイル (article.css)
   ===================================================== */

.article-page { color: #1a1a1a; background: #f8fafc; line-height: 1.8;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; }
.article-page * { box-sizing: border-box; }
.article-page a { color: #1e3a5f; }
.article-page a:hover { text-decoration: underline; }

/* === Hero === */
.article-hero { color: #fff; padding: 3.2em 0 2.4em; text-align: center;
  background: linear-gradient(135deg, #0f1b2d 0%, #1e3a5f 100%); }
.article-hero[data-cat="data"]  { background: linear-gradient(135deg,#0c2540 0%,#1d4ed8 100%); }
.article-hero[data-cat="data"]  h1 span { color: #60a5fa; }
.article-hero[data-cat="ai"]    { background: linear-gradient(135deg,#0f3825 0%,#166534 100%); }
.article-hero[data-cat="ai"]    h1 span { color: #4ade80; }
.article-hero[data-cat="email"] { background: linear-gradient(135deg,#3f1212 0%,#991b1b 100%); }
.article-hero[data-cat="email"] h1 span { color: #fca5a5; }
.article-hero[data-cat="guide"] { background: linear-gradient(135deg,#3a1f10 0%,#9a3412 100%); }
.article-hero[data-cat="guide"] h1 span { color: #fdba74; }
.article-hero .category { display: inline-block; font-size: 0.72em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(255,255,255,0.15); color: #fff;
  padding: 4px 14px; border-radius: 999px; margin-bottom: 1em; }
.article-hero h1 { font-size: 2em; font-weight: 800; margin: 0 auto 0.5em;
  line-height: 1.45; max-width: 720px; }
.article-hero .lead { color: rgba(255,255,255,0.85); font-size: 1.02em;
  max-width: 680px; margin: 0 auto; line-height: 1.7; }

/* === Breadcrumb === */
.article-breadcrumb { max-width: 880px; margin: 0 auto;
  padding: 14px clamp(12px,3vw,40px) 4px;
  font-size: 0.85em; color: #64748b; }
.article-breadcrumb a { color: #475569; text-decoration: none; }
.article-breadcrumb a:hover { color: #1e3a5f; text-decoration: underline; }
.article-breadcrumb .sep { color: #cbd5e1; margin: 0 6px; }

/* === Container === */
.article-container { max-width: 760px; margin: 0 auto;
  padding: 0 clamp(12px,3vw,40px); }

/* === Meta Bar === */
.article-meta { display: flex; align-items: center; gap: 14px;
  margin: 1.2em 0 0.6em; padding-bottom: 1em;
  font-size: 0.84em; color: #6b7280; flex-wrap: wrap;
  border-bottom: 1px solid #e2e8f0; }
.article-meta .meta-author a { color: #1e3a5f; font-weight: 600;
  text-decoration: none; }
.article-meta .meta-author a:hover { text-decoration: underline; }
.article-meta time { font-weight: 500; }
.article-meta .meta-dot { width: 4px; height: 4px; border-radius: 50%;
  background: #cbd5e1; display: inline-block; }

/* === TOC === */
.article-toc { background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 18px 24px; margin: 1.4em 0 2em; }
.article-toc-title { font-size: 0.78em; text-transform: uppercase;
  letter-spacing: 0.08em; color: #64748b; font-weight: 700;
  margin-bottom: 0.7em; display: flex; align-items: center; gap: 8px; }
.article-toc-title::before { content: ""; width: 14px; height: 2px;
  background: #1e3a5f; display: inline-block; }
.article-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.article-toc ol li { counter-increment: toc; padding: 5px 0 5px 32px;
  position: relative; font-size: 0.92em; line-height: 1.5; }
.article-toc ol li::before { content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 6px; font-size: 0.72em;
  font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }
.article-toc ol li a { color: #334155; text-decoration: none; }
.article-toc ol li a:hover { color: #1e3a5f; text-decoration: underline; }

/* === Body Typography === */
.article-body { padding: 0.5em 0 2em; }
.article-body h2 { font-size: 1.35em; font-weight: 700; line-height: 1.5;
  margin: 2.4em 0 0.8em; padding: 0 0 0 14px;
  border-left: 4px solid #1e3a5f; color: #0f1b2d;
  scroll-margin-top: 80px; }
.article-page[data-cat="data"]  .article-body h2 { border-left-color: #1d4ed8; }
.article-page[data-cat="ai"]    .article-body h2 { border-left-color: #16a34a; }
.article-page[data-cat="email"] .article-body h2 { border-left-color: #b91c1c; }
.article-page[data-cat="guide"] .article-body h2 { border-left-color: #c2410c; }
.article-body h3 { font-size: 1.08em; font-weight: 700;
  margin: 1.6em 0 0.5em; color: #1e3a5f;
  scroll-margin-top: 80px; }
.article-body p { color: #334155; margin-bottom: 1em; }
.article-body ul, .article-body ol { color: #334155; padding-left: 1.4em;
  margin-bottom: 1em; }
.article-body li { margin-bottom: 0.3em; }
.article-body strong { color: #0f1b2d; font-weight: 700; }
.article-body code { background: #f1f5f9; padding: 2px 6px;
  border-radius: 4px; font-family: 'SF Mono', Consolas, Menlo, monospace;
  font-size: 0.9em; color: #b91c1c; }
.article-body pre { background: #0f1b2d; color: #e2e8f0; border-radius: 8px;
  padding: 14px 18px; overflow-x: auto; font-size: 0.88em;
  line-height: 1.6; margin: 1em 0; }
.article-body pre code { background: transparent; color: inherit;
  padding: 0; font-size: inherit; }
.article-body blockquote { border-left: 4px solid #cbd5e1;
  padding: 0.4em 1em; margin: 1.4em 0; color: #475569; }
.article-body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2em 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px;
  margin: 1em 0; border: 1px solid #e2e8f0; }

/* === Card === */
.article-card { background: #fff; border-radius: 12px;
  padding: 22px 26px; border: 1px solid #e2e8f0; margin-bottom: 16px; }
.article-card > :first-child { margin-top: 0; }
.article-card > :last-child { margin-bottom: 0; }

/* === Callout === */
.article-callout { background: #eff6ff; border-left: 4px solid #3b82f6;
  border-radius: 0 8px 8px 0; padding: 14px 18px;
  margin: 1.4em 0; font-size: 0.95em; }
.article-callout p { color: #1e3a5f; margin: 0; }
.article-callout p + p { margin-top: 0.6em; }
.article-callout[data-tone="warn"]   { background: #fffbeb; border-left-color: #f59e0b; }
.article-callout[data-tone="warn"] p { color: #78350f; }
.article-callout[data-tone="danger"] { background: #fef2f2; border-left-color: #ef4444; }
.article-callout[data-tone="danger"] p { color: #7f1d1d; }
.article-callout[data-tone="success"] { background: #f0fdf4; border-left-color: #22c55e; }
.article-callout[data-tone="success"] p { color: #14532d; }

/* === Table === */
.article-table { width: 100%; border-collapse: collapse;
  font-size: 0.9em; margin: 1.2em 0; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.article-table th, .article-table td { padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.article-table th { background: #f8fafc; font-weight: 700;
  font-size: 0.85em; color: #475569; white-space: nowrap; }
.article-table tr:last-child td { border-bottom: 0; }
.article-table td.num { text-align: right;
  font-variant-numeric: tabular-nums; font-family: 'SF Mono', Consolas, monospace; }
.article-table tr.highlight td { background: #fffbeb; font-weight: 600; }

/* === Big Stat === */
.article-big-stat { background: #fff; border-radius: 12px;
  padding: 28px 20px; text-align: center; border: 1px solid #e2e8f0;
  margin: 1.4em 0; }
.article-big-stat .num { font-size: 3.2em; font-weight: 800;
  line-height: 1.1; color: #0f1b2d;
  font-variant-numeric: tabular-nums; }
.article-big-stat .label { font-size: 0.95em; color: #475569; margin-top: 6px; }
.article-big-stat .sub { font-size: 0.83em; color: #94a3b8; margin-top: 4px; }

/* === Stat Grid === */
.article-stat-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 1.4em 0; }
.article-stat-grid .stat { background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 18px 14px; text-align: center; }
.article-stat-grid .stat .val { font-size: 1.7em; font-weight: 800;
  line-height: 1.2; color: #1e3a5f;
  font-variant-numeric: tabular-nums; }
.article-stat-grid .stat .lbl { font-size: 0.82em; color: #6b7280; margin-top: 4px; }

/* === Step (toha型) === */
.article-step { display: flex; gap: 16px; margin-bottom: 18px;
  align-items: flex-start; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 18px 22px; }
.article-step .step-num { font-weight: 800; font-size: 1em;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #e0e7ff; color: #1e3a8a; }
.article-page[data-cat="ai"]    .article-step .step-num { background: #dcfce7; color: #14532d; }
.article-page[data-cat="email"] .article-step .step-num { background: #fee2e2; color: #7f1d1d; }
.article-page[data-cat="guide"] .article-step .step-num { background: #fed7aa; color: #7c2d12; }
.article-step .step-body { flex: 1; }
.article-step .step-body h3 { margin: 0 0 0.3em;
  font-size: 1.02em; color: #0f1b2d; }
.article-step .step-body p { color: #475569; font-size: 0.93em;
  margin: 0 0 0.5em; }
.article-step .step-body > :last-child { margin-bottom: 0; }

/* === FAQ === */
.article-faq { background: #fff; border-radius: 12px;
  padding: 24px 28px; border: 1px solid #e2e8f0; margin: 2em 0; }
.article-faq dl { margin: 0; }
.article-faq dt { font-weight: 700; font-size: 1em;
  margin-top: 1.4em; padding-left: 32px; position: relative;
  color: #0f1b2d; line-height: 1.5; }
.article-faq dt::before { content: "Q"; position: absolute;
  left: 0; top: 1px; width: 22px; height: 22px;
  border-radius: 50%; background: #1e3a5f; color: #fff;
  text-align: center; line-height: 22px; font-size: 0.78em;
  font-weight: 800; }
.article-faq dt:first-child { margin-top: 0; }
.article-faq dd { color: #475569; margin: 0.5em 0 0 32px;
  font-size: 0.95em; }

/* === CTA Box === */
.article-cta { background: #f8fafc; border: 2px solid #e2e8f0;
  border-radius: 12px; padding: 26px 30px; text-align: center;
  margin: 2.2em 0; }
.article-cta h3 { font-size: 1.1em; color: #0f1b2d; margin-bottom: 0.5em; }
.article-cta p { color: #475569; margin-bottom: 1em;
  font-size: 0.95em; }
.article-cta .btn { display: inline-block; padding: 11px 26px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
  margin: 0 4px 8px; font-size: 0.95em; }
.article-cta .btn-primary { background: #1e3a5f; color: #fff; }
.article-cta .btn-primary:hover { background: #0f1b2d; text-decoration: none; }
.article-cta .btn-secondary { background: transparent; color: #1e3a5f;
  border: 2px solid #1e3a5f; }
.article-cta .btn-secondary:hover { background: #1e3a5f; color: #fff;
  text-decoration: none; }
.article-page[data-cat="ai"]    .article-cta { border-color: #86efac; background: #f0fdf4; }
.article-page[data-cat="ai"]    .article-cta .btn-primary { background: #16a34a; }
.article-page[data-cat="ai"]    .article-cta .btn-secondary { color: #166534; border-color: #16a34a; }
.article-page[data-cat="email"] .article-cta { border-color: #fca5a5; background: #fef2f2; }
.article-page[data-cat="email"] .article-cta .btn-primary { background: #b91c1c; }
.article-page[data-cat="email"] .article-cta .btn-secondary { color: #7f1d1d; border-color: #b91c1c; }
.article-page[data-cat="guide"] .article-cta { border-color: #fdba74; background: #fff7ed; }
.article-page[data-cat="guide"] .article-cta .btn-primary { background: #c2410c; }
.article-page[data-cat="guide"] .article-cta .btn-secondary { color: #7c2d12; border-color: #c2410c; }

/* === Service CTA (実装支援パッケージ誘導) === */
.article-service-cta { margin: 2em 0; padding: 22px 26px;
  border-radius: 12px; border: 1px solid #e2e8f0; }
.article-service-cta[data-svc="dmarc"] { border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg,#fefce8 0%,#fef3c7 100%); }
.article-service-cta[data-svc="llmo"]  { border-left: 4px solid #8b5cf6;
  background: linear-gradient(135deg,#faf5ff 0%,#f3e8ff 100%); }
.article-service-cta[data-svc="dns"]   { border-left: 4px solid #0d9488;
  background: linear-gradient(135deg,#f0fdfa 0%,#ccfbf1 100%); }
.article-service-cta h3 { font-size: 1.02em; color: #0f1b2d;
  margin-bottom: 0.35em; font-weight: 700; }
.article-service-cta p { font-size: 0.9em; color: #475569;
  margin-bottom: 1em; line-height: 1.7; }
.article-service-cta .btn-primary,
.article-service-cta .btn-secondary { display: inline-block;
  padding: 10px 20px; border-radius: 8px; font-weight: 700;
  font-size: 0.88em; text-decoration: none;
  margin: 0 6px 4px 0; }
.article-service-cta .btn-secondary { background: transparent;
  border: 1.5px solid; font-weight: 600; }
.article-service-cta[data-svc="dmarc"] .btn-primary   { background: #f59e0b; color: #0f1b2d; }
.article-service-cta[data-svc="dmarc"] .btn-secondary { color: #b45309; border-color: #f59e0b; }
.article-service-cta[data-svc="llmo"]  .btn-primary   { background: #8b5cf6; color: #fff; }
.article-service-cta[data-svc="llmo"]  .btn-secondary { color: #6d28d9; border-color: #8b5cf6; }
.article-service-cta[data-svc="dns"]   .btn-primary   { background: #0d9488; color: #fff; }
.article-service-cta[data-svc="dns"]   .btn-secondary { color: #0f766e; border-color: #0d9488; }

/* === Author Box === */
.article-author { display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 18px 22px; margin: 2em 0; }
.article-author img { width: 48px; height: 48px;
  border-radius: 8px; flex-shrink: 0; }
.article-author .name { font-weight: 700; font-size: 0.95em; }
.article-author .name a { color: #0f1b2d; text-decoration: none; }
.article-author .name a:hover { text-decoration: underline; }
.article-author .bio { font-size: 0.84em; color: #6b7280; margin-top: 2px; }

/* === Related === */
.article-related { margin: 2.2em 0 1em; }
.article-related h2 { font-size: 1.08em; font-weight: 700;
  color: #1e3a5f; padding-left: 12px;
  border-left: 4px solid #1e3a5f; margin: 1.4em 0 0.7em;
  scroll-margin-top: 80px; }
.article-related .related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.article-related .related-grid a { background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 9px 16px; font-weight: 600; font-size: 0.86em;
  color: #1e3a5f; text-decoration: none;
  transition: border-color 0.15s, color 0.15s; }
.article-related .related-grid a:hover { border-color: #1e3a5f;
  text-decoration: none; }

/* === Methodology / Footnote === */
.article-methodology { background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 22px 26px; margin: 2em 0;
  font-size: 0.9em; }
.article-methodology h3 { font-size: 1em; margin: 0 0 0.5em;
  color: #1e3a5f; }
.article-methodology ul { color: #475569; padding-left: 1.4em; margin: 0; }
.article-methodology li { margin-bottom: 0.35em; }

/* === Floating "Top" link === */
.article-back-top { position: fixed; right: 18px; bottom: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: #1e3a5f; color: #fff; display: none;
  align-items: center; justify-content: center;
  text-decoration: none; font-size: 1.2em; line-height: 1;
  box-shadow: 0 4px 12px rgba(15,27,45,0.25); z-index: 100; }
.article-back-top.is-visible { display: flex; }
.article-back-top:hover { background: #0f1b2d; text-decoration: none; }

/* === Mobile === */
@media (max-width: 640px) {
  .article-hero { padding: 2.3em 0 1.7em; }
  .article-hero h1 { font-size: 1.45em; }
  .article-hero .lead { font-size: 0.95em; }
  .article-body h2 { font-size: 1.2em; }
  .article-stat-grid { grid-template-columns: 1fr 1fr; }
  .article-big-stat .num { font-size: 2.4em; }
  .article-table { font-size: 0.82em; }
  .article-table th, .article-table td { padding: 8px 8px; }
  .article-step { flex-direction: row; padding: 14px 16px; }
  .article-author { padding: 14px 18px; }
  .article-cta { padding: 22px 20px; }
  .article-back-top { right: 12px; bottom: 16px; width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .article-stat-grid { grid-template-columns: 1fr; }
}