/* 記事ページ（build/articles.js が生成）用の追加スタイル：公開日・タグ・関連記事 */
.article { max-width: 820px; margin: 0 auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 28px; color: var(--c-text-light); font-size: 13px; }
.article-meta time { color: var(--c-text-sub); font-variant-numeric: tabular-nums; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.article-tags li { padding: 4px 12px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-bg-soft); color: var(--c-text-sub); font-size: 12.5px; line-height: 1.6; }
.article-tags li::before { content: "#"; margin-right: 2px; color: var(--c-accent); }

/* 前後の記事（記事本文のすぐ下） */
.article-pager { display: flex; gap: 16px; max-width: 820px; margin: 40px auto 0; }
.article-pager__link { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--c-border); border-radius: 10px; background: #fff; color: var(--c-text); transition: border-color .2s, box-shadow .2s; }
.article-pager__link:hover { opacity: 1; border-color: var(--c-navy); box-shadow: 0 6px 18px rgba(4, 64, 114, .08); }
.article-pager__link--empty { border-style: dashed; background: transparent; }
.article-pager__link--next { text-align: right; align-items: flex-end; }
.article-pager__label { color: var(--c-accent-hover); font-size: 12px; font-weight: 700; }
.article-pager__title { color: var(--c-navy); font-size: 14.5px; font-weight: 700; line-height: 1.5; }
@media (max-width: 600px) {
  .article-pager { flex-direction: column; }
  .article-pager__link--next { text-align: left; align-items: flex-start; }
}

.related-articles { max-width: 960px; margin: 64px auto 0; }
.related-articles h2 { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--c-navy); color: var(--c-navy); font-size: 22px; }
.related-articles ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.related-articles li a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border: 1px solid var(--c-border); border-radius: 10px; background: #fff; color: var(--c-text); transition: border-color .2s, box-shadow .2s; }
.related-articles li a:hover { opacity: 1; border-color: var(--c-navy); box-shadow: 0 6px 18px rgba(4, 64, 114, .08); }
.related-articles__cat { color: var(--c-accent-hover); font-size: 12px; font-weight: 700; }
.related-articles__title { color: var(--c-navy); font-size: 16px; font-weight: 700; line-height: 1.5; }
.related-articles__sub { color: var(--c-text-sub); font-size: 13px; line-height: 1.7; }
.related-articles__more { margin: 16px 0 0; text-align: right; font-size: 14px; }

@media (max-width: 768px) {
  .related-articles ul { grid-template-columns: 1fr; }
}

/* 子ページの一覧（成功事例：業種ページに並ぶ解決事例） */
.child-list { margin: 48px 0 0; }
.child-list h2 { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--c-navy); color: var(--c-navy); font-size: 22px; }
.child-list ol { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.child-list li a { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 20px 22px; border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: 10px; background: #fff; color: var(--c-text); transition: border-color .2s, box-shadow .2s; }
.child-list li a:hover { opacity: 1; border-color: var(--c-navy); box-shadow: 0 6px 18px rgba(4, 64, 114, .08); }
.child-list__no { grid-row: span 3; align-self: start; padding: 4px 10px; border-radius: 999px; background: var(--c-bg-navy); color: var(--c-navy); font-size: 12px; font-weight: 700; white-space: nowrap; }
.child-list__title { color: var(--c-navy); font-size: 17px; font-weight: 700; line-height: 1.55; }
.child-list__sub { color: var(--c-text-sub); font-size: 13.5px; line-height: 1.75; }
.child-list__more { color: var(--c-link); font-size: 13px; font-weight: 700; }
@media (max-width: 600px) { .child-list li a { grid-template-columns: 1fr; } .child-list__no { grid-row: auto; justify-self: start; } }

/* 事例のプロフィール表 */
.prose .case-profile { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: 15px; }
.prose .case-profile th, .prose .case-profile td { padding: 12px 16px; border: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.prose .case-profile th { width: 28%; background: var(--c-bg-navy); color: var(--c-navy); font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .prose .case-profile th { white-space: normal; } }
.prose .case-note { color: var(--c-text-sub); font-size: 13.5px; }

/* 記事内の画像（記事エディタの「画像」ブロック） */
.prose .article-figure { margin: 28px 0; }
.prose .article-figure img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--c-border); }
.prose .article-figure figcaption { margin-top: 8px; color: var(--c-text-sub); font-size: 13px; text-align: center; line-height: 1.7; }

/* ---- コラム本文の見出し（以前は各記事の inline style で指定していた見た目） ---- */
.prose--column h2 { font-size: 1.6em; font-weight: 700; color: #1a2740; line-height: 1.6; margin: 8px 0 28px; padding: 16px 20px; background: #f0f3f8; border-left: 6px solid #1f3a5f; border-bottom: 0; border-radius: 0; }
.prose--column h3 { font-size: 1.4em; font-weight: 700; color: #1a2740; line-height: 1.5; margin: 48px 0 20px; padding: 0 0 12px; border-bottom: 1px solid #d7dde6; background: linear-gradient(#1f3a5f, #1f3a5f) no-repeat left bottom / 100px 3px; }
.prose--column h4 { font-size: 1.15em; font-weight: 700; color: #1a2740; line-height: 1.5; margin: 32px 0 14px; padding: 4px 0 4px 14px; border-left: 4px solid #1f3a5f; }

/* ---- 監修者ボックス（本文の <div class="author-box">） ---- */
.prose .author-box { max-width: 720px; margin: 32px auto; padding: 28px; background: #f8fafc; border-top: 4px solid #2563eb; border-radius: 0 0 12px 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, .08); }
.prose .author-box__head { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #e5e7eb; }
.prose .author-box__img { flex-shrink: 0; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.prose .author-box__meta { flex: 1; min-width: 220px; }
.prose .author-box__label { display: block; margin-bottom: 8px; color: #2563eb; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.prose .author-box__name { display: block; margin-bottom: 8px; color: #111827; font-size: 30px; font-weight: 800; line-height: 1.3; }
.prose .author-box__role { display: block; color: #374151; font-size: 17px; font-weight: 700; }
.prose .author-box__bio { margin: 24px 0 0; color: #1f2937; font-size: 16px; line-height: 1.9; text-align: justify; }

/* ---- 記事末尾のご相談CTA（本文の <div class="cta-box">） ---- */
.prose .cta-box { max-width: 720px; margin: 48px auto; padding: 40px 32px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, .06); text-align: center; }
.prose .cta-box__title { margin: 0 0 16px; color: #111827; font-size: 24px; font-weight: 700; line-height: 1.45; }
.prose .cta-box__text { margin: 0 0 28px; color: #374151; font-size: 16px; line-height: 1.8; }
.prose .cta-box__btn { display: inline-block; padding: 16px 40px; background: #2563eb; color: #fff; border-radius: 9999px; font-size: 18px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(37, 99, 235, .4); }
.prose .cta-box__btn:hover { opacity: .9; }
.prose .cta-box__note { margin: 20px 0 0; color: #6b7280; font-size: 13px; }
@media (max-width: 600px) {
  .prose .author-box { padding: 20px; }
  .prose .author-box__name { font-size: 24px; }
  .prose .cta-box { padding: 28px 18px; }
}