/* FalcoOne BLOG shared baseline. Article-specific styles may extend this file. */
:root {
  --blog-ink: #111827;
  --blog-muted: #6b7280;
  --blog-line: #e5e7eb;
  --blog-blue: #2563eb;
  --blog-blue-dark: #1d4ed8;
  --blog-panel: #eff6ff;
}

/* Shared box model used by every article. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.article-header,
.article-body {
  color: var(--blog-ink);
}

.article-body .cta,
.cta {
  border-radius: 18px;
  background: var(--blog-panel);
}

.cta a {
  background: var(--blog-blue);
  color: #fff;
}

.cta a:hover {
  background: var(--blog-blue-dark);
}

.eyebrow {
  color: var(--blog-blue);
}

/* Canonical article template: it-advisor-small-business.html */
.article-v1 {
  background: #f9fafb;
  color: var(--blog-ink);
}

.article-v1 .blog-article__content {
  width: 100%;
}

/* Shared article foundation. Article-specific rules remain in each page. */
.blog-article {
  margin: 0;
  color: var(--blog-ink);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.9;
}

.blog-article .article-header,
.blog-article .article-body {
  color: var(--blog-ink);
}

.blog-article .article-body {
  margin-left: auto;
  margin-right: auto;
}

.blog-article h1,
.blog-article h2 {
  line-height: 1.55;
}

.blog-article .meta {
  color: var(--blog-muted);
}

.blog-article .key-answer {
  margin: 28px 0 34px;
  padding: 18px 20px;
  border-left: 4px solid var(--blog-blue);
  border-radius: 0 10px 10px 0;
  background: var(--blog-panel);
}

@media (max-width: 640px) {
  .blog-article {
    line-height: 1.85;
  }

  .blog-article .key-answer {
    margin-top: 24px;
    padding: 16px;
  }

  .article-body .cta,
  .cta {
    border-radius: 14px;
  }

  .cta a {
    width: 100%;
  }
}