/* ツール下部の解説・FAQ（SEO用の常時表示ブロック）。フラット・不透明・1px境界・角丸6px */
.seo-guide {
  --sg-accent: var(--pt-accent, var(--blue, #5b21b6));
  --sg-text: var(--text, #1e293b);
  --sg-sub: var(--text-sub, #64748b);
  --sg-surface: var(--surface, #ffffff);
  --sg-border: var(--border, #e2ddd8);
  --sg-radius: var(--pt-r, var(--radius, 6px));
  margin: 40px 0 0;
  padding: 24px 24px 20px;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  color: var(--sg-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
  font-size: 0.95rem;
  text-align: left;
}
html[data-theme="dark"] .seo-guide {
  --sg-accent: var(--pt-accent, #a78bfa);
  --sg-text: var(--text, #e5e7eb);
  --sg-sub: var(--text-sub, #9ca3af);
  --sg-surface: var(--surface, #1f2430);
  --sg-border: var(--border, #3a4050);
}
.seo-guide *, .seo-guide *::before, .seo-guide *::after { box-sizing: border-box; }
.seo-guide h2 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sg-text);
}
.seo-guide h3 {
  margin: 24px 0 10px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--sg-border);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sg-text);
}
.seo-guide p { margin: 0; color: var(--sg-sub); }
.seo-guide ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sg;
}
.seo-guide ol li {
  counter-increment: sg;
  position: relative;
  padding: 0 0 10px 34px;
  margin: 0;
}
.seo-guide ol li:last-child { padding-bottom: 0; }
.seo-guide ol li::before {
  content: counter(sg);
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sg-accent);
  border: 1px solid var(--sg-accent);
  border-radius: var(--sg-radius);
}
.seo-guide dl.seo-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 0;
}
.seo-guide dl.seo-points > div { margin: 0; }
.seo-guide dl.seo-points dt { font-weight: 700; margin: 0 0 2px; }
.seo-guide dl.seo-points dd { margin: 0; color: var(--sg-sub); font-size: 0.9rem; }
.seo-guide .seo-faq details { border-top: 1px solid var(--sg-border); }
.seo-guide .seo-faq details:first-child { border-top: 0; }
.seo-guide .seo-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 28px 11px 0;
  position: relative;
  font-weight: 700;
  line-height: 1.6;
}
.seo-guide .seo-faq summary::-webkit-details-marker { display: none; }
.seo-guide .seo-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 9px;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--sg-sub);
}
.seo-guide .seo-faq details[open] > summary::after { content: "\2212"; }
.seo-guide .seo-faq summary:hover { color: var(--sg-accent); }
.seo-guide .seo-faq summary:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
.seo-guide .seo-a { margin: 0 0 14px; color: var(--sg-sub); font-size: 0.92rem; }
@media (max-width: 640px) {
  .seo-guide { margin-top: 28px; padding: 18px 16px 14px; font-size: 0.92rem; }
  .seo-guide dl.seo-points { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media print { .seo-guide { display: none; } }