/* ==========================================================================
   Article pages (/introduction/{id}) - design system and components

   Loaded only by resources/views/introduction/detail.blade.php, with a
   filemtime() query string because nginx caches /assets for 30 days. Plain
   CSS on purpose: nothing may need building on the live box (see the
   September 2026 outage), so no Sass, no PostCSS.

   Scope: the page chrome lives under .a-article (header, cover, table of
   contents, closing CTA); everything an article body can use lives under
   .a-body (the element that is also .box-content). Nothing leaks into the
   rest of the site. Brand colours match the theme and /industries:
   navy #1a2a6c / #0f1b4d, blue #11a5de -> cyan #5cf4ff.

   --------------------------------------------------------------------------
   COMPONENT CONTRACT - the article HTML (post.content_*) may use these.
   Class names are a contract shared with the content migrations: never
   rename them. Additions are marked (+).
   --------------------------------------------------------------------------

   Plain HTML is styled too: h2, h3, h4, p, ul, ol, table, blockquote, code,
   pre, a, strong, img, figure, iframe. Use H2 for sections (they feed the
   table of contents, which appears from 3 H2s), H3 below them. Do not put
   an H1 in a body: the page header has the only one.

   .a-summary            Key takeaways, at the top of the article.
     <div class="a-summary">
       <p class="a-summary__title">この記事のポイント</p>
       <ul><li>…</li></ul>
     </div>

   .a-callout            Note box. Modifiers: --info, --tip, --warn, --danger.
     <div class="a-callout a-callout--warn">
       <p class="a-callout__title">注意</p>
       <p>…</p>
     </div>

   .a-table-wrap > table.a-table
                         Scrolls sideways on phones; zebra rows, navy head.
     .a-table--compare     Highlights a recommended column: put .is-recommended
                           on its th and on each of its td.
     (+) .a-table--center  Centres every cell after the first column.
     <div class="a-table-wrap"><table class="a-table">…</table></div>

   ol.a-steps            Numbered vertical steps joined by a line.
     <ol class="a-steps">
       <li><strong class="a-steps__title">…</strong><p>…</p></li>
     </ol>

   ul.a-timeline         Dated events.
     <ul class="a-timeline">
       <li><time datetime="2026-10-21">10月21日</time><div>…</div></li>
     </ul>
     (+) li.is-accent      Marks the key event (red dot).
     (+) ul.a-timeline--compact  Narrower date column for short labels
                           (month-day or year-month: 10月21日, 2026年10月,
                           21 October). Leave it off for full dates.

   ul.a-checklist        Check-mark list. ul.a-checklist--ng: cross marks.

   .a-stats              Big numbers.
     <div class="a-stats">
       <div class="a-stat"><p class="a-stat__value">9.2</p><p class="a-stat__label">…</p></div>
     </div>

   span.a-badge          Small label. Modifiers: --high, --medium, --low,
                         --eol, --ok.

   .a-flow               Horizontal process diagram with arrows; stacks
                         vertically with down arrows on phones.
     <div class="a-flow">
       <div class="a-flow__item"><strong>…</strong><small>…</small></div>
       <div class="a-flow__item a-flow__item--accent">…</div>
     </div>
     (+) <span class="a-flow__label">STEP 1</span> as the first child: a
         small label above the item's text.

   .a-cards              Card grid.
     <div class="a-cards">
       <div class="a-card"><p class="a-card__title">…</p><p>…</p></div>
       <div class="a-card a-card--accent">…</div>
     </div>
     (+) <span class="a-card__icon"><i class="fa fa-shield"></i></span> as
         the first child: an icon ABOVE the title (Font Awesome 4.7 is
         loaded site-wide).

   .a-compare            Two-column comparison (NG/OK, before/after).
     <div class="a-compare">
       <div class="a-compare__col a-compare__col--bad">
         <p class="a-compare__title">放置した場合</p><ul>…</ul>
       </div>
       <div class="a-compare__col a-compare__col--good">…</div>
     </div>
     (+) .a-compare__title  The column heading (gets an NG/OK icon).

   figure.a-figure       A diagram: an HTML diagram (.a-flow, .a-cards…) or an
                         inline <svg role="img"><title>…</title>…</svg>,
                         then <figcaption>. Prefer HTML diagrams: their text
                         stays translatable and readable at 375px. Keep SVG
                         text >= 14px at phone width.

   .a-cta                Call to action band.
     <div class="a-cta">
       <p class="a-cta__title">…</p>
       <p class="a-cta__text">…</p>
       <a class="a-cta__button" href="/system-takeover">…</a>
       <a class="a-cta__button a-cta__button--ghost" href="/contact">…</a>
     </div>
     (+) .a-cta__eyebrow (small label above the title) and .a-cta__actions
         (a wrapper for the buttons) are optional.
     A body that contains an .a-cta gets no generic closing CTA from the
     page; one without gets a generic one that links to /contact.

   .a-faq                FAQ accordion.
     <div class="a-faq">
       <details><summary>質問</summary><div><p>答え</p></div></details>
     </div>

   .a-sources            Small "参考・出典" list.
     <div class="a-sources"><p class="a-sources__title">参考・出典</p><ul>…</ul></div>
     (+) .a-sources__title

   (+) .a-lead           A larger opening paragraph: <p class="a-lead">.
   (+) .a-marker         Highlighter on a phrase: <span class="a-marker">.

   --------------------------------------------------------------------------
   LAYOUT RULES (site-wide rule from the owner)
   --------------------------------------------------------------------------
   1. Text breaks naturally. Japanese uses word-break: auto-phrase and
      text-wrap: pretty (balance on headings and component titles), so a
      line never ends on a lone 「い。」. Icons sit above or inline with a
      title, never as a side column that squeezes the text.
   2. Grids are balanced - no orphan on the last row.
      .a-cards: use 2, 3, 4 or 6 cards (3 or 6 -> 3 columns, 2 or 4 -> 2
                columns; one column on phones). Avoid 5, 7 or 8.
      .a-stats: use 2, 3, 4 or 6 stats (same columns; 2 per row on phones,
                3 stack).
      .a-flow:  2 to 5 items; keep each item's text to a few words.
      .a-compare: exactly 2 columns.
   ========================================================================== */

.a-article {
  --a-navy: #1a2a6c;
  --a-navy-2: #0f1b4d;
  --a-blue: #11a5de;
  --a-blue-ink: #0a6f9e;
  --a-cyan: #5cf4ff;
  --a-ink: #1f2937;
  --a-muted: #5b6472;
  --a-line: #e3e9ef;
  --a-bg: #f4f8fb;
  --a-soft: #e9f6fc;
  --a-info: #0a6f9e;
  --a-info-bg: #ebf6fc;
  --a-tip: #0b7a62;
  --a-tip-bg: #e8f6f1;
  --a-warn: #9a5800;
  --a-warn-line: #f0a020;
  --a-warn-bg: #fff6e5;
  --a-danger: #b42318;
  --a-danger-line: #e5483a;
  --a-danger-bg: #fdf0ee;
  --a-radius: 14px;
  --a-sticky-top: 100px;
  --a-measure: 760px;
  color: var(--a-ink);
  background: #fff;
}

.a-article *, .a-article *::before, .a-article *::after { box-sizing: border-box; }

/* --- Japanese text: natural line breaks ---------------------------------- */
.a-article:lang(ja) {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  line-break: strict;
}
/* Not thead th: text-wrap is a shorthand that also resets white-space, and
   table heads stay on one line from 576px up. */
.a-article:lang(ja) :is(p, li, dd, td, tbody th, figcaption, summary, blockquote, .a-flow__item) {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.a-article :is(h1, h2, h3, h4, .a-summary__title, .a-callout__title, .a-card__title, .a-compare__title,
  .a-steps__title, .a-cta__title, .a-stat__label) {
  text-wrap: balance;
}
.a-article:lang(ja) :is(h1, h2, h3, h4, .a-summary__title, .a-callout__title, .a-card__title, .a-compare__title,
  .a-steps__title, .a-cta__title, .a-stat__label, .a-toc__list a, .a-flow__item strong) {
  word-break: auto-phrase;
  font-feature-settings: "palt";
  letter-spacing: .02em;
}

/* --- Breadcrumb, merged into the header band ----------------------------- */
.page-introduction-detail .breadcrumb-common {
  margin: 0;
  padding: 14px 0 0;
  background: var(--a-navy-2, #0f1b4d);
}
.page-introduction-detail .breadcrumb-common .breadcrumb {
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 1200px) {
  .page-introduction-detail:has(.a-article--has-toc) .breadcrumb-common .breadcrumb { max-width: 1076px; }
}
.page-introduction-detail .breadcrumb-common .breadcrumb-item {
  flex-shrink: 0;
  font-size: .82rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
}
.page-introduction-detail .breadcrumb-common .breadcrumb-item a,
.page-introduction-detail .breadcrumb-common .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .72); }
.page-introduction-detail .breadcrumb-common .breadcrumb-item a:hover { color: #fff; }
.page-introduction-detail .breadcrumb-common .breadcrumb-item.active {
  flex-shrink: 1;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* --- Header -------------------------------------------------------------- */
.a-header {
  position: relative;
  color: #fff;
  padding: 26px 0 56px;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(92, 244, 255, .2), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(17, 165, 222, .22), transparent 60%),
    linear-gradient(135deg, var(--a-navy-2) 0%, var(--a-navy) 58%, #123d8a 100%);
}
.a-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.a-header > .container-xl { position: relative; z-index: 1; }
.a-article:not(:has(.a-layout--cover)) .a-header { padding-bottom: 40px; }
.a-header__inner { max-width: var(--a-measure); margin: 0 auto; }
.a-header__title {
  margin: 0 0 18px;
  font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.35rem);
  font-weight: 800;
  line-height: 1.45;
  color: #fff;
}
.a-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
}
.a-header__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}
.a-header__meta .fa { color: var(--a-cyan); }
.a-header__label { color: rgba(255, 255, 255, .7); }

/* --- Layout: body column + table of contents ------------------------------ */
.a-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--a-measure);
  margin: 0 auto;
  padding: 40px 0 72px;
  position: relative;
  z-index: 2;
}
/* With a cover, the cover overlaps the bottom of the header band. Without
   one (none set, or the file is missing or not an image), the body starts
   on white below the band. */
.a-layout--cover { margin-top: -32px; padding-top: 0; }
.a-layout > * { min-width: 0; }

.a-cover {
  margin: 0 0 32px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--a-bg);
  box-shadow: 0 18px 40px rgba(15, 27, 77, .16);
}
/* Covers come in any shape (the older ones are photos or square graphics
   with text): keep their own ratio, and only trim very tall ones. */
.a-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 560px);
  object-fit: cover;
  object-position: center top;
}

/* Table of contents */
.a-toc {
  margin: 0 0 32px;
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  background: var(--a-bg);
}
.a-toc__title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 800;
  color: var(--a-navy);
  cursor: pointer;
  list-style: none;
}
.a-toc__title::-webkit-details-marker { display: none; }
.a-toc__title .fa { color: var(--a-blue); }
.a-toc__count {
  margin-left: 2px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--a-blue-ink);
  background: #fff;
  border: 1px solid var(--a-line);
}
.a-toc__title::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--a-navy);
  border-bottom: 2px solid var(--a-navy);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.a-toc[open] > .a-toc__title::after { transform: translateY(2px) rotate(-135deg); }
.a-toc__list {
  margin: 0;
  padding: 0 18px 16px;
  list-style: none;
  counter-reset: a-toc;
}
.a-toc__list li { counter-increment: a-toc; border-top: 1px dashed #d5dee7; }
.a-toc__list a {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  padding: 9px 4px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--a-ink);
  text-decoration: none;
}
.a-toc__list a::before {
  content: counter(a-toc, decimal-leading-zero);
  font-weight: 800;
  font-size: .8rem;
  line-height: 1.9;
  color: var(--a-blue);
  font-feature-settings: "tnum";
}
.a-toc__list a:hover { color: var(--a-blue-ink); }
.a-toc__list a.is-active { color: var(--a-navy); font-weight: 700; }

@media (min-width: 1200px) {
  .a-article--has-toc .a-layout {
    max-width: calc(var(--a-measure) + 316px);
    grid-template-columns: minmax(0, var(--a-measure)) 280px;
    column-gap: 36px;
    align-items: start;
  }
  .a-article--has-toc .a-header__inner { max-width: calc(var(--a-measure) + 316px); }
  .a-article--has-toc .a-layout > :not(.a-toc) { grid-column: 1; }
  .a-article--has-toc .a-toc {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    top: var(--a-sticky-top);
    max-height: calc(100vh - var(--a-sticky-top) - 20px);
    overflow: auto;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 27, 77, .07);
  }
  .a-article--has-toc .a-layout--cover .a-toc { margin-top: 32px; }
  .a-article--has-toc .a-toc__title { cursor: default; }
  .a-article--has-toc .a-toc__title::after { display: none; }
  .a-article--has-toc .a-toc__list a.is-active { color: var(--a-blue-ink); }
  .a-article--has-toc .a-toc__list a.is-active::before { color: var(--a-navy); }
}

/* --- Body: base typography ------------------------------------------------ */
.a-body {
  font-size: 17px;
  line-height: 1.85;
  color: var(--a-ink);
  text-align: left;
  overflow-wrap: break-word;
}
.a-body:lang(ja) { line-height: 1.95; letter-spacing: .02em; }
.a-body > :first-child { margin-top: 0; }
.a-body p { margin: 0 0 1.3em; }
.a-body .a-lead { font-size: 1.08em; color: #283447; }

.a-body h2 {
  position: relative;
  margin: 2.6em 0 1.1em;
  padding: .6em .8em .6em 1.05em;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--a-navy);
  background: linear-gradient(90deg, var(--a-soft) 0%, rgba(233, 246, 252, 0) 85%);
  border-radius: 0 10px 10px 0;
  scroll-margin-top: var(--a-sticky-top);
}
.a-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--a-navy) 0%, var(--a-blue) 100%);
}
.a-body h3 {
  position: relative;
  margin: 2em 0 1em;
  padding: 0 0 .5em;
  font-size: clamp(1.12rem, 1rem + .4vw, 1.28rem);
  font-weight: 800;
  line-height: 1.55;
  color: var(--a-navy);
  border-bottom: 2px solid var(--a-line);
  scroll-margin-top: var(--a-sticky-top);
}
.a-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--a-blue);
}
.a-body h4 {
  margin: 1.8em 0 .7em;
  padding-left: .9em;
  position: relative;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--a-navy);
}
.a-body h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .45em;
  height: .45em;
  border-radius: 2px;
  background: var(--a-blue);
}
.a-body :is(h2, h3, h4) + :is(h3, h4) { margin-top: 1em; }

.a-body a {
  color: var(--a-blue-ink);
  text-decoration: underline;
  text-decoration-color: rgba(10, 111, 158, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.a-body a:hover { color: var(--a-navy); text-decoration-color: currentColor; }
.a-body a[target="_blank"]::after {
  content: "\f08e";
  font-family: FontAwesome;
  font-size: .72em;
  margin-left: .3em;
  vertical-align: .1em;
  text-decoration: none;
  display: inline-block;
}
.a-body strong, .a-body b { font-weight: 700; color: #111827; }
.a-body p > strong, .a-body li > strong:only-child, .a-body .a-marker {
  background: linear-gradient(transparent 62%, rgba(255, 214, 10, .38) 62%);
}
.a-body small { font-size: .85em; }

.a-body ul, .a-body ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.a-body li { margin: .45em 0; padding-left: .2em; }
.a-body li > ul, .a-body li > ol { margin: .4em 0 .2em; }
.a-body ul > li::marker { color: var(--a-blue); }
.a-body ol > li::marker { color: var(--a-navy); font-weight: 800; }

.a-body blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 1.1em 1.3em 1.1em 3.2em;
  color: #374151;
  background: var(--a-bg);
  border-left: 4px solid var(--a-line);
  border-radius: 0 12px 12px 0;
}
.a-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: .45em;
  top: .1em;
  font: 800 2.6em/1 Georgia, serif;
  color: var(--a-blue);
  opacity: .55;
}
.a-body blockquote > :last-child { margin-bottom: 0; }

.a-body code {
  padding: .12em .45em;
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .86em;
  color: var(--a-navy-2);
  background: #eef3f8;
  border: 1px solid #dfe7ef;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.a-body pre {
  margin: 1.6em 0;
  padding: 1.1em 1.3em;
  overflow-x: auto;
  font-size: .88em;
  line-height: 1.7;
  color: #e6f0ff;
  background: var(--a-navy-2);
  border-radius: 12px;
}
.a-body pre code { padding: 0; color: inherit; background: none; border: 0; word-break: normal; }
.a-body hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--a-line); opacity: 1; }

/* Images and embeds (the older articles put bare <img> and YouTube iframes
   straight into the body). */
.a-body img { max-width: 100%; height: auto; border-radius: 10px; }
.a-body p > img { display: block; margin: 1.2em auto; }
.a-body figure { margin: 1.8em 0; }
.a-body figure.image img { display: block; margin: 0 auto; }
.a-body figure > figcaption, .a-body .a-figure figcaption {
  margin-top: .8em;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--a-muted);
  text-align: center;
}
.a-body iframe { max-width: 100%; border: 0; border-radius: 12px; }
.a-body iframe[src*="youtube"], .a-body iframe[src*="vimeo"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1.6em 0;
}
.a-body [style*="margin-left"] { margin-left: 0 !important; }

/* Default tables: every table in a body, the Bootstrap .table ones included. */
.a-body table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .93em;
  line-height: 1.7;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}
.a-body table > :not(caption) > * > * { border: 0; box-shadow: none; }
.a-body table th,
.a-body table td {
  padding: .8em 1em;
  vertical-align: top;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--a-line);
  background: transparent;
}
.a-body table thead th {
  color: #fff;
  font-weight: 700;
  background: var(--a-navy);
  border-bottom: 0;
  white-space: nowrap;
}
.a-body table thead th + th { border-left: 1px solid rgba(255, 255, 255, .14); }
.a-body table tbody tr:nth-child(even) > * { background: var(--a-bg); }
.a-body table tbody tr:last-child > * { border-bottom: 0; }
.a-body table tbody th { font-weight: 700; color: var(--a-navy); background: #f7fafc; }
.a-body table td + td, .a-body table th + td { border-left: 1px solid var(--a-line); }
.a-body table caption {
  caption-side: top;
  padding: 0 0 .6em;
  font-size: .9em;
  font-weight: 700;
  color: var(--a-navy);
}

.a-body .a-table-wrap {
  margin: 1.6em 0;
  overflow-x: auto;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 6px 20px rgba(15, 27, 77, .05);
}
.a-body .a-table-wrap > table { margin: 0; border: 0; border-radius: 0; overflow: visible; }
.a-body .a-table th, .a-body .a-table td { min-width: 7.5em; }
@media (min-width: 768px) {
  /* The first column usually names the row: give it room for a short phrase. */
  .a-body .a-table tbody > tr > :first-child { min-width: 9.5em; }
}
.a-body .a-table--center td:not(:first-child),
.a-body .a-table--center thead th:not(:first-child) { text-align: center; }

.a-body .a-table--compare th.is-recommended {
  position: relative;
  background: linear-gradient(135deg, var(--a-blue) 0%, #0b8cc4 100%);
}
.a-body .a-table--compare th.is-recommended::before {
  content: "\f005";
  font-family: FontAwesome;
  margin-right: .4em;
  color: #fff6c2;
}
.a-body .a-table--compare td.is-recommended {
  font-weight: 700;
  color: var(--a-navy-2);
  background: #e9f7fd !important;
  border-left: 2px solid var(--a-blue);
  border-right: 2px solid var(--a-blue);
}
.a-body .a-table--compare tbody tr:last-child td.is-recommended { border-bottom: 2px solid var(--a-blue); }

/* --- .a-summary ------------------------------------------------------------ */
.a-body .a-summary {
  position: relative;
  margin: 0 0 2.2em;
  padding: 1.5em 1.6em 1.2em;
  border: 1px solid #cfe9f6;
  border-radius: var(--a-radius);
  background: linear-gradient(160deg, #f1fafe 0%, #fff 70%);
  box-shadow: 0 8px 26px rgba(17, 165, 222, .08);
}
.a-body .a-summary__title {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .8em;
  padding: .3em 1em;
  font-size: .92em;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  background: linear-gradient(90deg, var(--a-navy) 0%, #1f4aa8 100%);
  border-radius: 999px;
}
.a-body .a-summary__title::before { content: "\f00c"; font-family: FontAwesome; color: var(--a-cyan); }
.a-body .a-summary ul { margin: 0; padding: 0; list-style: none; }
.a-body .a-summary li {
  position: relative;
  margin: 0;
  padding: .55em 0 .55em 1.9em;
  border-top: 1px dashed #d5e6ef;
}
.a-body .a-summary li:first-child { border-top: 0; }
.a-body .a-summary li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 1.05em;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--a-blue);
  box-shadow: 0 0 0 4px rgba(17, 165, 222, .16);
}
.a-body .a-summary li > strong { background: none; }
.a-body .a-summary > :last-child { margin-bottom: 0; }

/* --- .a-callout ------------------------------------------------------------ */
.a-body .a-callout {
  --a-c: var(--a-info);
  --a-c-line: var(--a-blue);
  --a-c-bg: var(--a-info-bg);
  --a-c-icon: "\f05a";
  margin: 1.8em 0;
  padding: 1.1em 1.35em;
  background: var(--a-c-bg);
  border: 1px solid color-mix(in srgb, var(--a-c-line) 28%, transparent);
  border-left: 5px solid var(--a-c-line);
  border-radius: 6px 12px 12px 6px;
}
.a-body .a-callout--info { --a-c: var(--a-info); --a-c-line: var(--a-blue); --a-c-bg: var(--a-info-bg); --a-c-icon: "\f05a"; }
.a-body .a-callout--tip { --a-c: var(--a-tip); --a-c-line: #12a383; --a-c-bg: var(--a-tip-bg); --a-c-icon: "\f0eb"; }
.a-body .a-callout--warn { --a-c: var(--a-warn); --a-c-line: var(--a-warn-line); --a-c-bg: var(--a-warn-bg); --a-c-icon: "\f071"; }
.a-body .a-callout--danger { --a-c: var(--a-danger); --a-c-line: var(--a-danger-line); --a-c-bg: var(--a-danger-bg); --a-c-icon: "\f06a"; }
.a-body .a-callout__title {
  margin: 0 0 .45em;
  font-weight: 800;
  line-height: 1.55;
  color: var(--a-c);
}
.a-body .a-callout__title::before {
  content: var(--a-c-icon);
  font-family: FontAwesome;
  font-weight: normal;
  margin-right: .5em;
}
.a-body .a-callout > :last-child { margin-bottom: 0; }
.a-body .a-callout ul, .a-body .a-callout ol { margin-bottom: .6em; }
.a-body .a-callout p > strong { background: none; color: var(--a-c); }

/* --- .a-steps -------------------------------------------------------------- */
.a-body ol.a-steps {
  margin: 1.8em 0 2em;
  padding: 0;
  list-style: none;
  counter-reset: a-step;
}
.a-body ol.a-steps > li {
  position: relative;
  margin: 0 0 14px 3.3em;
  padding: 1em 1.25em;
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  counter-increment: a-step;
  box-shadow: 0 4px 14px rgba(15, 27, 77, .04);
}
.a-body ol.a-steps > li::before {
  content: counter(a-step);
  position: absolute;
  left: -3.3em;
  top: .75em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1em;
  color: #fff;
  background: linear-gradient(135deg, var(--a-navy) 0%, var(--a-blue) 100%);
  box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(17, 165, 222, .3);
  font-feature-settings: "tnum";
}
.a-body ol.a-steps > li::after {
  content: "";
  position: absolute;
  left: calc(-3.3em + 1.15em - 1px);
  top: 3.3em;
  bottom: calc(-14px - .75em);
  width: 2px;
  background: linear-gradient(180deg, var(--a-blue), rgba(17, 165, 222, .25));
}
.a-body ol.a-steps > li:last-child::after { display: none; }
.a-body ol.a-steps > li::marker { content: none; }
.a-body .a-steps__title {
  display: block;
  margin: 0 0 .25em;
  font-size: 1.04em;
  line-height: 1.6;
  color: var(--a-navy);
  background: none !important;
}
.a-body ol.a-steps > li > p { margin: 0; color: #374151; font-size: .96em; }
.a-body ol.a-steps > li > p + p { margin-top: .5em; }

/* --- .a-timeline ----------------------------------------------------------- */
.a-body ul.a-timeline {
  margin: 1.8em 0 2em;
  padding: 0;
  list-style: none;
}
.a-body ul.a-timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 1.4em 2.1em;
}
.a-body ul.a-timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--a-blue);
  z-index: 1;
}
.a-body ul.a-timeline > li::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: .4em;
  bottom: -.4em;
  width: 2px;
  background: var(--a-line);
}
.a-body ul.a-timeline > li:last-child { padding-bottom: 0; }
.a-body ul.a-timeline > li:last-child::after { display: none; }
.a-body ul.a-timeline > li.is-accent::before { background: var(--a-danger-line); border-color: var(--a-danger-line); box-shadow: 0 0 0 4px rgba(229, 72, 58, .18); }
.a-body ul.a-timeline > li::marker { content: none; }
.a-body ul.a-timeline time {
  display: inline-block;
  margin-bottom: .3em;
  padding: .05em .6em;
  font-size: .86em;
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--a-blue-ink);
  background: var(--a-soft);
  border-radius: 999px;
  font-feature-settings: "tnum";
}
.a-body ul.a-timeline > li.is-accent time { color: var(--a-danger); background: var(--a-danger-bg); }
.a-body ul.a-timeline > li > div > :last-child { margin-bottom: 0; }
.a-body ul.a-timeline > li > div > p { margin-bottom: .4em; }
.a-body ul.a-timeline strong { background: none; color: var(--a-navy); }

/* From 768px the dates sit in a right-aligned column left of the line. The
   column fits a full date ("2026年11月10日", "20 October 2026");
   .a-timeline--compact narrows it for month-day or year-month labels
   ("10月21日", "2026年10月", "21 October"). */
@media (min-width: 768px) {
  .a-body ul.a-timeline { --a-tl-col: 11.8em; }
  .a-body ul.a-timeline.a-timeline--compact { --a-tl-col: 9.2em; }
  .a-body ul.a-timeline > li {
    display: grid;
    grid-template-columns: var(--a-tl-col) minmax(0, 1fr);
    gap: 1em;
    padding-left: 0;
  }
  .a-body ul.a-timeline > li::before { left: calc(var(--a-tl-col) + .5em - 7.5px); }
  .a-body ul.a-timeline > li::after { left: calc(var(--a-tl-col) + .5em - 1px); }
  .a-body ul.a-timeline time { justify-self: end; align-self: start; margin: .15em .9em 0 0; }
  .a-body ul.a-timeline > li > div { padding-left: 1.1em; }
}

/* --- .a-checklist ---------------------------------------------------------- */
.a-body ul.a-checklist {
  margin: 1.6em 0 1.8em;
  padding: .5em 1.3em;
  list-style: none;
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
}
.a-body ul.a-checklist > li {
  position: relative;
  margin: 0;
  padding: .7em 0 .7em 2.1em;
  border-top: 1px dashed #dbe3ea;
}
.a-body ul.a-checklist > li:first-child { border-top: 0; }
.a-body ul.a-checklist > li::marker { content: none; }
.a-body ul.a-checklist > li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: .95em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  font-family: FontAwesome;
  font-size: .9em;
  line-height: 1;
  color: #fff;
  background: #12a383;
}
.a-body ul.a-checklist--ng > li::before { content: "\f00d"; background: var(--a-danger-line); }
.a-body ul.a-checklist > li > strong { background: none; }

/* --- .a-stats -------------------------------------------------------------- */
.a-body .a-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 1.8em 0 2em;
}
.a-body .a-stats:has(> :last-child:nth-child(2)),
.a-body .a-stats:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-body .a-stats:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.a-body .a-stat {
  position: relative;
  padding: 1.3em 1em 1.1em;
  text-align: center;
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  overflow: hidden;
}
.a-body .a-stat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--a-navy), var(--a-blue), var(--a-cyan));
}
.a-body .a-stat__value {
  margin: 0;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--a-navy);
  font-feature-settings: "tnum";
}
.a-body .a-stat__value small { font-size: .5em; font-weight: 700; margin-left: .15em; color: var(--a-muted); }
.a-body .a-stat__label { margin: .5em 0 0; font-size: .86em; line-height: 1.6; color: var(--a-muted); }

/* --- .a-badge -------------------------------------------------------------- */
.a-body .a-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .1em .7em;
  font-size: .78em;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: .08em;
  color: var(--a-navy);
  background: #eef2f7;
  border: 1px solid #d9e1ea;
  border-radius: 999px;
}
.a-body .a-badge--high { color: var(--a-danger); background: var(--a-danger-bg); border-color: #f4c3bd; }
.a-body .a-badge--medium { color: var(--a-warn); background: var(--a-warn-bg); border-color: #f5d39a; }
.a-body .a-badge--low { color: var(--a-info); background: var(--a-info-bg); border-color: #bfe2f3; }
.a-body .a-badge--eol { color: #fff; background: #4b5563; border-color: #4b5563; }
.a-body .a-badge--ok { color: var(--a-tip); background: var(--a-tip-bg); border-color: #b9e3d5; }

/* --- .a-flow --------------------------------------------------------------- */
.a-body .a-flow {
  display: flex;
  align-items: stretch;
  gap: 30px;
  margin: 1.8em 0 2em;
}
.a-body .a-figure .a-flow { margin: 0; }
.a-body .a-flow__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em .9em;
  text-align: center;
  font-size: .92em;
  line-height: 1.6;
  background: #fff;
  border: 1px solid #cfe3ee;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 27, 77, .05);
}
.a-body .a-flow__item::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  border-left: 12px solid var(--a-blue);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateY(-50%);
}
.a-body .a-flow__item:last-child::after { display: none; }
.a-body .a-flow__item strong { display: block; color: var(--a-navy); background: none; font-size: 1.04em; }
.a-body .a-flow__item small { display: block; margin-top: .3em; font-size: .86em; color: var(--a-muted); }
.a-body .a-flow__item p { margin: 0; }
.a-body .a-flow__label {
  display: block;
  align-self: center;
  min-width: 2.1em;
  margin: 0 0 .5em;
  padding: .1em .7em;
  font-size: .72em;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--a-blue-ink);
  background: var(--a-soft);
  border-radius: 999px;
}
.a-body .a-flow__item--accent {
  color: #fff;
  background: linear-gradient(135deg, var(--a-navy) 0%, #1f4aa8 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(26, 42, 108, .25);
}
.a-body .a-flow__item--accent strong { color: #fff; }
.a-body .a-flow__item--accent small { color: rgba(255, 255, 255, .8); }
.a-body .a-flow__item--accent .a-flow__label { color: #fff; background: rgba(255, 255, 255, .16); }

/* --- .a-cards -------------------------------------------------------------- */
.a-body .a-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 1.8em 0 2em;
}
.a-body .a-cards:has(> :last-child:nth-child(2)),
.a-body .a-cards:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-body .a-cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.a-body .a-card {
  position: relative;
  padding: 1.2em 1.1em 1.05em;
  background: #fff;
  border: 1px solid var(--a-line);
  border-top: 3px solid var(--a-blue);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 27, 77, .05);
}
.a-body .a-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  margin-bottom: .7em;
  border-radius: 10px;
  font-size: 1.05em;
  color: var(--a-blue-ink);
  background: var(--a-soft);
}
.a-body .a-card__title {
  margin: 0 0 .45em;
  font-size: 1.03em;
  font-weight: 800;
  line-height: 1.55;
  color: var(--a-navy);
}
.a-body .a-card p:not(.a-card__title) { margin: 0 0 .6em; font-size: .92em; line-height: 1.8; color: #3d4756; }
.a-body .a-card > :last-child { margin-bottom: 0; }
.a-body .a-card ul { margin: .3em 0 0; padding-left: 1.2em; font-size: .92em; }
.a-body .a-card--accent {
  color: #fff;
  background: linear-gradient(150deg, var(--a-navy-2) 0%, var(--a-navy) 55%, #1f4aa8 100%);
  border-color: transparent;
  border-top-color: var(--a-cyan);
}
.a-body .a-card--accent .a-card__title { color: #fff; }
.a-body .a-card--accent p:not(.a-card__title), .a-body .a-card--accent li { color: rgba(255, 255, 255, .86); }
.a-body .a-card--accent .a-card__icon { color: var(--a-cyan); background: rgba(255, 255, 255, .1); }
.a-body .a-card--accent a { color: #fff; }

/* --- .a-compare ------------------------------------------------------------ */
.a-body .a-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 1.8em 0 2em;
}
.a-body .a-compare__col {
  padding: 1.2em 1.3em 1em;
  background: var(--a-bg);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
}
.a-body .a-compare__col--bad { background: var(--a-danger-bg); border-color: #f3cdc8; }
.a-body .a-compare__col--good { background: var(--a-tip-bg); border-color: #bfe3d6; }
.a-body .a-compare__title {
  margin: 0 0 .7em;
  padding-bottom: .55em;
  font-size: 1.04em;
  font-weight: 800;
  line-height: 1.5;
  color: var(--a-navy);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.a-body .a-compare__col--bad .a-compare__title { color: var(--a-danger); }
.a-body .a-compare__col--good .a-compare__title { color: var(--a-tip); }
.a-body .a-compare__col--bad .a-compare__title::before,
.a-body .a-compare__col--good .a-compare__title::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  margin-right: .5em;
  border-radius: 50%;
  font-family: FontAwesome;
  font-size: .85em;
  font-weight: normal;
  line-height: 1;
  color: #fff;
  vertical-align: .12em;
}
.a-body .a-compare__col--bad .a-compare__title::before { content: "\f00d"; background: var(--a-danger-line); }
.a-body .a-compare__col--good .a-compare__title::before { content: "\f00c"; background: #12a383; }
.a-body .a-compare__col ul { margin: 0; padding: 0; list-style: none; }
.a-body .a-compare__col li { position: relative; margin: .5em 0; padding-left: 1.4em; font-size: .95em; line-height: 1.75; }
.a-body .a-compare__col li::before {
  position: absolute;
  left: 0;
  top: .05em;
  font-family: FontAwesome;
  font-size: .9em;
  color: var(--a-muted);
  content: "\f105";
}
.a-body .a-compare__col--bad li::before { content: "\f00d"; color: var(--a-danger-line); }
.a-body .a-compare__col--good li::before { content: "\f00c"; color: #12a383; }
.a-body .a-compare__col > :last-child { margin-bottom: 0; }
.a-body .a-compare__col p:not(.a-compare__title) { font-size: .95em; margin-bottom: .6em; }

/* --- figure.a-figure ------------------------------------------------------- */
.a-body figure.a-figure {
  margin: 2em 0;
  padding: 1.5em 1.4em 1.1em;
  background: var(--a-bg);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
}
.a-body figure.a-figure > svg { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.a-body figure.a-figure > figcaption {
  margin-top: 1em;
  font-size: .85rem;
  color: var(--a-muted);
  text-align: center;
}
.a-body figure.a-figure .a-cards,
.a-body figure.a-figure .a-compare,
.a-body figure.a-figure .a-stats,
.a-body figure.a-figure ul.a-timeline { margin: 0; }

/* --- .a-cta ---------------------------------------------------------------- */
.a-article .a-cta {
  position: relative;
  margin: 2.6em 0 2em;
  padding: 2.1em 2em;
  overflow: hidden;
  color: #fff;
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(92, 244, 255, .25), transparent 60%),
    radial-gradient(420px 240px at 0% 100%, rgba(17, 165, 222, .22), transparent 60%),
    linear-gradient(135deg, var(--a-navy-2), var(--a-navy) 60%, #164a9c);
  box-shadow: 0 18px 40px rgba(15, 27, 77, .2);
}
.a-article .a-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.a-article .a-cta > * { position: relative; z-index: 1; }
.a-article .a-cta__eyebrow {
  display: inline-block;
  margin: 0 0 .8em;
  padding: .2em .9em;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--a-cyan);
  border: 1px solid rgba(92, 244, 255, .4);
  border-radius: 999px;
}
.a-article .a-cta__title {
  margin: 0 0 .6em;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.5rem);
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
}
.a-article .a-cta__text {
  max-width: 36em;
  margin: 0 auto 1.4em;
  font-size: .95rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .86);
}
.a-article .a-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.a-article .a-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 50px;
  margin: 6px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, var(--a-blue) 0%, #2fc6ef 100%);
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(17, 165, 222, .35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.a-article .a-cta__actions .a-cta__button { margin: 0; }
.a-article .a-cta__button::after { content: "\f105"; font-family: FontAwesome; font-size: 1.1em; }
.a-article .a-cta__button:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(17, 165, 222, .5); }
.a-article .a-cta__button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.a-article .a-cta__button--ghost:hover { color: var(--a-navy); background: #fff; border-color: #fff; box-shadow: none; }
.a-article .a-cta a[target="_blank"]::after { content: none; }
.a-end-cta .a-cta { margin-top: 3em; }

/* --- .a-faq ---------------------------------------------------------------- */
.a-body .a-faq { margin: 1.6em 0 2em; }
.a-body .a-faq details {
  margin: 0 0 10px;
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.a-body .a-faq details[open] { border-color: #bfe0f0; box-shadow: 0 8px 22px rgba(15, 27, 77, .06); }
.a-body .a-faq summary {
  position: relative;
  padding: 1em 3em 1em 3.4em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--a-navy);
  cursor: pointer;
  list-style: none;
}
.a-body .a-faq summary::-webkit-details-marker { display: none; }
.a-body .a-faq summary::before,
.a-body .a-faq details > div::before {
  position: absolute;
  left: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  font-family: Roboto, Arial, sans-serif;
  font-size: .9em;
  font-weight: 800;
  line-height: 1;
}
.a-body .a-faq summary::before { content: "Q"; top: 1.05em; color: #fff; background: var(--a-navy); }
.a-body .a-faq summary::after {
  content: "";
  position: absolute;
  right: 1.3em;
  top: 1.45em;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--a-blue);
  border-bottom: 2px solid var(--a-blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.a-body .a-faq details[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.a-body .a-faq summary:hover { color: var(--a-blue-ink); }
.a-body .a-faq details > div {
  position: relative;
  padding: 0 1.3em 1.1em 3.4em;
  color: #374151;
}
.a-body .a-faq details > div::before { content: "A"; top: .1em; color: var(--a-blue-ink); background: var(--a-soft); }
.a-body .a-faq details > div > :last-child { margin-bottom: 0; }

/* --- .a-sources ------------------------------------------------------------ */
.a-body .a-sources {
  margin: 2.6em 0 0;
  padding: 1.1em 1.3em;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--a-muted);
  background: var(--a-bg);
  border-radius: 12px;
}
.a-body .a-sources__title { margin: 0 0 .4em; font-weight: 800; color: #374151; }
.a-body .a-sources ul { margin: 0; padding-left: 1.2em; }
.a-body .a-sources li { margin: .25em 0; }
.a-body .a-sources a { color: var(--a-muted); overflow-wrap: anywhere; }
.a-body .a-sources a:hover { color: var(--a-navy); }
.a-body .a-sources > p:not(.a-sources__title) { margin: .6em 0 0; }

/* --- Related posts below the article -------------------------------------- */
.page-introduction-detail .c-introduction-related-post { padding-top: 56px; background: var(--a-bg, #f4f8fb); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .a-header { padding-bottom: 50px; }
}
@media (max-width: 767.98px) {
  .a-body .a-cards,
  .a-body .a-cards:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-body .a-cards:has(> :last-child:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .a-body .a-stats:has(> :last-child:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  .a-body .a-flow { flex-direction: column; gap: 26px; }
  .a-body .a-flow__item { padding: .85em 1em; }
  .a-body .a-flow__item::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -20px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 11px solid var(--a-blue);
    border-bottom: 0;
    transform: translateX(-50%);
  }
}
@media (max-width: 575.98px) {
  .a-header { padding: 20px 0 46px; }
  .a-header__title { margin-bottom: 14px; }
  .a-header__meta { font-size: .8rem; gap: 6px; }
  .a-header__meta li { padding: 4px 11px; }
  .a-layout { padding: 28px 0 48px; }
  .a-layout--cover { margin-top: -28px; padding-top: 0; }
  .a-cover { margin-bottom: 24px; border-radius: 12px; }
  .a-toc { margin-bottom: 26px; }

  .a-body { font-size: 16px; }
  .a-body:lang(ja) { line-height: 1.9; letter-spacing: .01em; }
  .a-body h2 { margin-top: 2.2em; padding: .55em .6em .55em .95em; }
  .a-body .a-summary { padding: 1.2em 1.1em 1em; }
  .a-body .a-callout { padding: 1em 1.05em; }
  .a-body ol.a-steps > li { margin-left: 2.9em; padding: .9em 1em; }
  .a-body ol.a-steps > li::before { left: -2.9em; width: 2.1em; height: 2.1em; font-size: .95em; }
  .a-body ol.a-steps > li::after { left: calc(-2.9em + 1em - 1px); top: 3.1em; }
  .a-body .a-cards,
  .a-body .a-cards:has(> :last-child:nth-child(2)),
  .a-body .a-cards:has(> :last-child:nth-child(4)) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* One card per row: the icon sits on the title's line, the text below
     spans the full card width. */
  .a-body .a-card:has(> .a-card__icon:first-child) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75em;
    align-items: center;
  }
  .a-body .a-card:has(> .a-card__icon:first-child) > * { grid-column: 1 / -1; }
  .a-body .a-card:has(> .a-card__icon:first-child) > .a-card__icon { grid-column: 1; margin: 0; width: 2.3em; height: 2.3em; }
  .a-body .a-card:has(> .a-card__icon:first-child) > .a-card__icon + .a-card__title { grid-column: 2; margin: 0; }
  .a-body .a-card:has(> .a-card__icon:first-child) > .a-card__title + * { margin-top: .6em; }
  .a-body .a-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .a-body .a-stats:has(> :last-child:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .a-body .a-stats:has(> :last-child:nth-child(3)) .a-stat {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    align-items: center;
    gap: .8em;
    padding: 1em 1.1em;
    text-align: left;
  }
  .a-body .a-stats:has(> :last-child:nth-child(3)) .a-stat__label { margin: 0; }
  .a-body .a-stat { padding: 1.1em .7em .9em; }
  .a-body .a-compare { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .a-body figure.a-figure { padding: 1.1em .9em .9em; }
  .a-body .a-faq summary { padding: .9em 2.6em .9em 3em; }
  .a-body .a-faq summary::before, .a-body .a-faq details > div::before { left: .8em; }
  .a-body .a-faq details > div { padding: 0 1em 1em 3em; }
  .a-body table { display: block; overflow-x: auto; }
  .a-body .a-table-wrap > table { display: table; }
  .a-body .a-table th, .a-body .a-table td { min-width: 6.5em; padding: .7em .8em; }
  .a-body table thead th { white-space: normal; }
  .a-article .a-cta { padding: 1.8em 1.2em; border-radius: 14px; }
  .a-article .a-cta__button { width: 100%; }
}

/* --- Print: articles get shared as PDFs and printouts ---------------------- */
@media print {
  @page { margin: 14mm 12mm; }
  .site-header, .main-footer, .scroltop, .loading-area, .breadcrumb-common, .a-toc, .a-end-cta,
  .c-introduction-related-post, .a-cta__actions, .a-cta__button, iframe { display: none !important; }
  .a-article { color: #000; }
  .a-header { padding: 0 0 10pt; background: none !important; color: #000; }
  .a-header::after, .a-cta::after { display: none; }
  .a-header__title { color: #000; font-size: 18pt; }
  .a-header__meta li { color: #333; background: none; border-color: #bbb; }
  .a-header__meta .fa, .a-header__label { color: #333; }
  .a-layout { margin: 0; max-width: none; padding: 0; display: block; }
  .a-cover { box-shadow: none; max-width: 60%; }
  .a-body { font-size: 10.5pt; line-height: 1.75; }
  .a-body h2 { break-after: avoid; background: none; }
  .a-body h3, .a-body h4 { break-after: avoid; }
  .a-body :is(.a-summary, .a-callout, .a-card, .a-stat, .a-compare__col, .a-flow, .a-figure, table, ol.a-steps > li, .a-timeline > li, .a-faq details) {
    break-inside: avoid;
    box-shadow: none !important;
  }
  .a-body .a-table-wrap { overflow: visible; box-shadow: none; }
  .a-body .a-faq details > div { display: block; }
  .a-article .a-cta { background: none !important; color: #000; border: 1px solid #bbb; box-shadow: none; }
  .a-article .a-cta__title, .a-article .a-cta__text, .a-article .a-cta__eyebrow { color: #000; }
  .a-body .a-sources a::after { content: " (" attr(href) ")"; font-size: .9em; }
  .a-article * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}