/* =========================
   ブログ記事
   ========================= */
.blog-breadcrumb {
  max-width: 800px;
  margin: 0 auto 12px;
}

.blog-header {
  max-width: 800px;
  margin: 0 auto 16px;
}

.blog-meta {
  display: block;
  width: 100%;
  text-align: right;
  font-size: var(--font-size-md);
  color: var(--sub-text);
  margin: 8px 0 16px;
  text-decoration: underline;
}

.blog-article {
  max-width: 800px;
  margin: 0 auto;
}

.blog-article h2 {
  margin: 32px 0 12px;
  padding-bottom: 6px;
  font-size: var(--font-size-4xl);
  line-height: var(--line-normal);
  border-bottom: 1px solid var(--border);
}

.blog-article h3 {
  margin: 24px 0 10px;
  font-size: var(--font-size-2xl);
  line-height: var(--line-normal);
}

.blog-article p {
  margin: 12px 0;
  line-height: var(--line-blog);
}

.blog-article ul {
  margin: 12px 0;
  padding-left: 20px;
}

.blog-article li + li {
  margin-top: 6px;
}

.blog-article strong {
  font-weight: var(--font-weight-bold);
}

.blog-article a {
  color: var(--link);
  text-decoration: underline;
}

.blog-article hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.blog-lead {
  margin: 0 0 20px;
  font-size: var(--font-size-lg);
  line-height: var(--line-blog);
  color: var(--sub-text);
}

.blog-note {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-md);
  color: var(--notice-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-loose);
  width: fit-content;
}

.blog-footer {
  max-width: 800px;
  margin: 24px auto 0;
}

/* =========================
   ブログ（PC）
   ========================= */
@media (min-width: 768px) {
  .blog-article h2 {
    font-size: var(--font-size-5xl);
  }

  .blog-article h3 {
    font-size: var(--font-size-3xl);
  }

  .blog-lead {
    font-size: var(--font-size-xl);
  }
}