/* 呼びかけの囲み（content/shared-blocks/pause-cta.md など）。記事テンプレートと /agi-intro が共通で読む */
.article-body .article-callout {
  display: grid; grid-template-columns: 1fr; margin: 3rem 0 2.4rem; padding: 0;
  background: #0b1f4d; color: #f3f6fb; border-radius: 6px; overflow: hidden;
}
.article-body .article-callout.has-art { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
.article-body .article-callout-art { background: #f7f5ef; }
.article-body .article-callout-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; margin: 0; border: 0; border-radius: 0; }
.article-body .article-callout-body { padding: 1.7rem 1.8rem 1.8rem; }
.article-body .article-callout-kicker {
  display: inline-block; margin: 0 0 .7rem; padding: .18rem .7rem; border-radius: 999px;
  background: #ffd60a; color: #0b1f4d !important; font-size: .78rem; font-weight: 800; letter-spacing: .04em;
}
.article-body .article-callout-title { margin: 0 0 1rem; font-size: 1.45rem; line-height: 1.45; font-weight: 900; color: #fff !important; }
.article-body .article-callout p { color: #e3e9f4; }
.article-body .article-callout-body > p:not(.article-cta-kicker):not(.article-cta-title) { margin: .6rem 0; line-height: 1.85; }
.article-emphasis .article-body .article-callout strong,
html[data-color-mode="dark"] .article-emphasis .article-body .article-callout strong {
  color: #fff; background: linear-gradient(transparent 64%, rgba(255, 214, 10, 0.5) 64%);
}
.article-body .article-callout-sample {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem;
  padding: .8rem 1rem; border-radius: 6px; background: rgba(255, 255, 255, .08);
}
.article-body .article-callout-name {
  padding: .35rem .8rem; border-radius: 999px; background: #fff; color: #0b1f4d;
  font-weight: 800; font-size: .92rem; white-space: nowrap;
}
.article-body .article-callout-name:not(.is-after) { opacity: .6; }
.article-body .article-callout-name.is-after { box-shadow: 0 0 0 3px #ffd60a; }
.article-body .article-callout-arrow { color: #ffd60a; font-weight: 900; font-size: 1.2rem; }
.article-body a.article-callout-button {
  display: inline-block; margin-top: 1.1rem; padding: .75rem 1.4rem; border-radius: 999px;
  background: #ffd60a; color: #0b1f4d; font-weight: 900; text-decoration: none; border: 0;
}
.article-body a.article-callout-button:hover { background: #fff; }
html[data-color-mode="dark"] .article-body .article-callout { background: #13295c; box-shadow: 0 0 0 1px #2f4a86; }
@media (max-width: 640px) {
  .article-body .article-callout.has-art { grid-template-columns: 1fr; }
  .article-body .article-callout-art img { height: 200px; }
  .article-body .article-callout-body { padding: 1.3rem 1.2rem 1.4rem; }
  .article-body .article-callout-title { font-size: 1.22rem; }
}