/* =============================================================================
   Affiliate Advertising Management — page-specific stylesheet
   =============================================================================
   Enqueued conditionally by functions/enqueue-affiliate-advertising-management-style.php
   (is_page('affiliate_advertising_management') only). Not part of the real
   main.css SCSS build (no src/ pipeline exists on the server — see
   reference/site-conventions.md "Per-page CSS/JS"), so this is hand-written
   plain CSS. Only covers the page-specific `amo-` classes below — every
   `c-*` class used in the templates (c-underContents, c-underTitle,
   c-underNav, c-breadcrumbs, c-button, c-underHead, c-underbody, ...) is
   already styled by the real theme's main.css and is NOT redeclared here.
   ============================================================================= */

:root {
  --black: #44413E;
  --white: #fff;
  --gold: #917A5A;
  --gold-light: #A38C6B;
  --gold-dark: #816D50;
  --theme: #EFEDEA;
  --card-bg: #E3DFD9;
  --border-soft: #CDC9C6;

  --font-jp: "dnp-shuei-gothic-gin-std", "Meiryo", sans-serif;
  --font-latin: "neue-haas-unica", sans-serif;
  --font-accent: "garamond-premier-pro", serif;
}

/* Fluid rem scaling — confirmed convention, matches base/_base.scss exactly. */
html { font-size: min(0.78125vw, 13.125px); }
@media screen and (max-width: 767px) {
  html { font-size: 2.6666666667vw; }
}

/* Page background override — main.css's own `html`/`main` rules set the
   site-wide #EFEDEA background; this page wants a slightly lighter/warmer
   #FBFAF5 instead. Scoped to this page's body[data-page-type] (set in
   functions/page-type.php) rather than a bare html/main selector, since
   that's this file's own enqueue condition anyway — matches the same
   body[data-page-type=...] scoping convention main.css itself already
   uses for other pages' overrides. html:has(...) covers the rubber-band
   overscroll edge; main covers the actual visible content area. */
html:has(body[data-page-type="affiliate_advertising_management"]) { background: #FBFAF5; }
body[data-page-type="affiliate_advertising_management"] main { background-color: #FBFAF5; }

/* c-underContents padding override for this page — main.css's default is
   13.6rem 0 14.4rem, plus various other pages already override it scoped
   to their own section class (e.g. .rc-business .c-underContents); this
   does the same but scoped to the whole page via body[data-page-type],
   since every section here (.amo-overview, .amo-services, ...) reuses
   the same shared c-underContents wrapper and all of them want this. */
body[data-page-type="affiliate_advertising_management"] .c-underContents { padding: 10.4rem 0 10.8rem; }
@media screen and (max-width: 767px) {
  body[data-page-type="affiliate_advertising_management"] .c-underContents { padding: 5.6rem 0 5.6rem; }
}

/* ---- c-underNav override for this page (amo-underNav) ----
   The real component is `position: fixed; bottom: 4.8rem; left: 3.2rem;`
   (components/_under-nav.scss) — fine for the 4-6 item lists it was built
   for, but this page has 14 items: fixed positioning neither reserves
   layout space nor respects its container's bounds, so the tall list
   overflows past the viewport/body, especially on smaller screens.

   Fix: .amo-underNavCol (wrapping just the nav include, in the page
   template) is a flex sibling of .c-underContentsWrap, stretched
   (align-items: stretch, the flex default) to match the content column's
   full height. That gives the sticky nav a tall containing block to
   travel within. The <aside> itself stays its natural short height and
   position: sticky inside that tall column — same visual bottom-left
   resting spot as before, but now bounded to the real content area
   (stops sticking once you scroll past the last section, into the
   footer) instead of floating indefinitely regardless of content length.

   A bare position:fixed -> sticky swap on .c-underNav alone is NOT
   enough: sticky still participates in normal flow, so without this
   wrapper the nav's own ~440px list height pushes .c-underContentsWrap
   down by that much before any of it "sticks". Verified live.

   IMPORTANT — sticky's `bottom` offset is NOT "rest near the bottom of
   the viewport": it only engages for an element that would scroll off
   the BOTTOM of the viewport while scrolling UP, which never happens on
   a normal top-to-bottom page scroll. Verified against an isolated
   control page with zero theme CSS/JS involved (not a Lenis conflict,
   contrary to initial suspicion — Lenis was a red herring). To actually
   stick while scrolling DOWN, the offset has to be `top`. To *approximate*
   the original bottom-left resting spot anyway (rather than sticking near
   the top, under the header), `top` is computed as
   `100vh - <nav's own rendered height> - 4.8rem` — i.e. "however far down
   the viewport puts 4.8rem of clearance above the bottom edge, given this
   list's height." The nav's rendered height is ~44.1rem for this page's
   14 items (measured live at desktop scale) — hardcoded here since it's
   specific to this fixed 14-item list, not a general-purpose value.
   Wrapped in max() so short viewports clamp to a safe top position
   (clearing the fixed ~8rem header) instead of the calc going negative
   and pushing the nav off-screen — directly fixes the original "overflows
   on smaller screens" complaint as a side effect. */
/* Gated to min-width:768px (this file's pc breakpoint, matching the sp
   cutoff at max-width:767px used elsewhere in this file) instead of the
   previous unconditional-then-undo-on-mobile pattern: margin-right
   (-14.1875rem) and the max-height/overflow-y scroll clamp below were
   previously leaking onto mobile too (only `position` was ever reset in
   the old @media (max-width:767px) block), risking horizontal overflow
   on small screens. The real c-underNav component already goes
   position:static + horizontal-scroll row on mobile on its own (@include
   sp) — this whole block is desktop-only, so gating it here means mobile
   no longer needs an explicit reset at all. */
@media screen and (min-width: 768px) {
  .amo-underbodyInner {
    display: flex;
    align-items: stretch;
  }
  .amo-underbodyInner .c-underContentsWrap {
    flex: 1;
    min-width: 0;
  }
  .amo-underNavCol {
    flex: none;
    position: relative;
    /* 3.2rem from the actual screen edge, matching the real component's
       original `left: 3.2rem` (fixed-relative-to-viewport) inset. Applied
       as margin, not `left` on the sticky element itself — `left`/`right`
       on a sticky element with no horizontal scroll context to make it
       "stick" horizontally is a known no-op in practice: computed style
       reports it as applied, but it doesn't actually shift the rendered
       box (verified live — getBoundingClientRect().x stayed 0 despite
       computed left:32px). margin-left is unambiguous regardless of
       position value. */
    margin-left: 3.2rem;
    /* Cancel this column's own width contribution to the flex row, so
       .c-underContentsWrap (flex:1) isn't pushed right by a full nav-column
       width and stays at its originally-centered position — the nav then
       visually overlaps the start of the content area instead of sitting
       in its own dedicated column, matching how the original `position:
       fixed` nav floated over content rather than reserving space for
       itself.

       BUG (found live 2026-09-16): this was previously done with
       `margin-right: -14.1875rem` (the nav's own measured rendered width).
       That does NOT read as "zero width" to the flex algorithm — a
       `flex: 1` sibling's available space is computed from this item's
       full margin box, negative margins included, so the negative value
       gets ADDED to .c-underContentsWrap's width instead of subtracted.
       Measured live: with a 1440px container this pushed
       .c-underContentsWrap to 1563.6px wide starting at left:-123.6px
       (off-screen left), which then centered .c-underContents ~62px
       further left than intended — .c-underContents__inner ended up only
       ~5px clear of the fixed/sticky nav's right edge (vs. ~56px+ of
       clearance intended), reading as text crowding the nav on the left.

       `width: 0; overflow: visible;` avoids this entirely: the column's
       margin box is just its margin-left (36px), so the flex sibling's
       available space comes out correct with no magic nav-width number to
       keep in sync with the 14-item label set. */
    width: 0;
    overflow: visible;
  }
  .c-underNav.amo-underNav {
    position: sticky;
    top: max(10rem, calc(100vh - 44.1rem - 4.8rem));
    /* Safety net for viewports shorter than ~54rem (10rem clamp floor + 44.1rem
       list): even clamped to the floor, the full 14-item list can still run
       past the bottom edge on very short windows. Cap it and let the list
       scroll internally rather than silently clipping the last item(s). */
    max-height: calc(100vh - 10rem - 2rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .c-underNav.amo-underNav::-webkit-scrollbar {
    display: none;
  }
}

/* ---- Hero ----
   Spec from Figma node 352:1063 ("01_Hero / FV", file xanNYISir0dh11diG2EoGX),
   px→rem at /10. Page-specific, NOT the shared c-underKvBg component —
   that expects a real background photo
   (assets/images/affiliate_advertising_management/bg-kv[-sp].jpg) that
   still hasn't been exported (Figma's own hero has no photo either — just
   this solid #333 background, confirmed via the design pull, not a
   placeholder gap on our end). #333 is a distinct literal shade from our
   confirmed $black (#44413E), kept literal per this file's own convention.
   Same for the "A" gold (#B49A72) vs our $gold-light (#A38C6B) token.
   flex+gap (not title margin / subtitle margin-top) matches how Figma
   itself spaces title from subtitle. No SP frame exists in Figma for this
   node (confirmed in figma-notes.md) — mobile values below are a
   proportional judgment call, same ratio as before this fix. */
.amo-hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 8rem;
  background: #333;
  max-width: 103rem;
  margin: 0 auto;
}
.amo-hero__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 1.3;
  color: var(--white);
}
.amo-hero__subtitle {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.6;
  letter-spacing: 0.03rem;
  color: #B49A72;
}
@media screen and (max-width: 767px) {
  .amo-hero { padding: 4rem 1.9rem; }
  .amo-hero__title { font-size: 3.1rem; }
  .amo-hero__subtitle { font-size: 1.3rem; }
}

/* ---- Overview: process diagram + step strip ---- */
.amo-overview__heading,
.amo-services__heading,
.amo-problems__heading,
.amo-benefit__heading,
.amo-considerations__heading,
.amo-selection__heading,
.amo-strengths__heading,
.amo-cases__heading,
.amo-industries__heading,
.amo-media__heading,
.amo-comparison__heading,
.amo-price__heading,
.amo-flow__heading,
.amo-faq__heading {
  margin-bottom: 4rem;
}

/* ---- Section heading (STitle) restyle — Figma node 559:3064 ----
   Every section heading above renders via the shared parts-title.php
   partial, which emits the real .c-underTitle/._en/._ja markup (same
   classes, same c-slantingRevealText js-revealText reveal animation — not
   touched here, only overridden with new rules). But main.css's own
   .c-underTitle is built for a different usage elsewhere on the site: a
   row layout with a large EN label (4.6rem) and a tiny JA caption (1rem).
   Figma's STitle for this page wants the opposite emphasis — a small gold
   EN eyebrow above a large bold black JA headline, stacked vertically —
   so every property below is a deliberate override, not an addition.
   [class^="amo-"][class$="__heading"] matches all 14 wrapper divs above
   without repeating that same 14-item selector list two more times; each
   wrapper carries that single class with nothing else (verified against
   every amo-*'s components file), so this is exactly as scoped as spelling
   them all out. px→rem at /10; the wrapper's own margin-bottom:4rem
   above already equals Figma's internal pb-40 on STitle itself, so no
   extra bottom spacing is added here. */
[class^="amo-"][class$="__heading"] .c-underTitle {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  margin-top: 0;
}
[class^="amo-"][class$="__heading"] .c-underTitle ._en {
  /* Explicit order (not just relying on DOM position + flex-direction)
     so the EN eyebrow renders above the JA headline unambiguously —
     matches parts-title.php's own _en-before-_ja markup order too. */
  order: 1;
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0.03rem;
  color: #B49A72;
}
[class^="amo-"][class$="__heading"] .c-underTitle ._ja {
  order: 2;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--black);
}
@media screen and (max-width: 767px) {
  [class^="amo-"][class$="__heading"] .c-underTitle ._ja { font-size: 2.2rem; }
}

/* ---- Overview: diagram + process strip ----
   The branching flow (広告主様 → SQOOPY hub → splits into "ASP経由"/"直接発注"
   paths → converges on ユーザー) is now a single pre-rendered SVG export
   per breakpoint (overview_diagram_PC.svg / _SP.svg, own artwork per
   breakpoint rather than one asset scaled) instead of a hand-built
   flexbox/CSS reconstruction — u-pc/u-sp (main.css) swaps between them.
   Only sizing lives here now; everything else is baked into the SVGs. */
.amo-overview__diagram { display: block; width: 100%; height: auto; margin: 4rem 0 2.4rem; }
/* Figma shows a soft warm glow sitting behind this caption, fading down
   into the process-strip box below it (node 352:1090) — dropped when the
   diagram was rebuilt as static SVG exports, since the glow lives outside
   the diagram artwork itself. Real exported asset (overview_glow.svg,
   748×49) — a gradient-filled triangle, apex up — restores it; relative
   path matches this file's own location (assets/styles/), same convention
   main.css itself uses for its own background-image refs. */
.amo-overview__diagramCaption { position: relative; text-align: center; font-size: 1.4rem; color: var(--gold-dark); margin: 1.6rem 0 3.2rem; }
.amo-overview__diagramCaption::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.2rem;
  transform: translateX(-50%);
  width: min(100%, 78rem);
  aspect-ratio: 748 / 49;
  background: url(../images/affiliate-advertising/overview_glow.svg) no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: -1;
}

/* One continuous gold-bordered strip with divider lines between items
   (Figma's "Frame627679"), not separate gapped cards — icon + title sit
   side by side on one row, with the description below that row.
   overflow-x:auto is the fallback for the case all 7 items' real content
   widths sum to more than the strip's width — same pattern already used
   for .amo-comparison__tableWrap. */
.amo-overview__process {
  display: flex; list-style: none; margin: 0; padding: 2.4rem 1.2rem;
  background: var(--white); border: 0.1rem solid #B49A72; border-radius: 1.2rem;
  overflow-x: auto;
}
/* min-width was explicitly 0 here, which is what let flex:1 shrink an item
   below its own (nowrap) title/desc width whenever the 7 items' combined
   natural widths exceeded the strip — the shorter items (e.g. 戦略設計)
   would get compressed to make room, and their text would overflow past
   the item's own edge into its neighbor instead of wrapping (nowrap) or
   shrinking (font stayed fixed size). Dropping the override restores
   flexbox's real default: an auto min-width floors each item at its
   content's own natural (min-content, which for nowrap text equals
   max-content) width, so flex:1 can still grow items evenly to fill any
   leftover space, but never shrinks one narrower than its own text. */
.amo-overview__processItem {
  flex: 1 1 auto; min-width: max-content; padding: 0 0.8rem; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.amo-overview__processItem:not(:last-child)::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 0.1rem; background: #B49A72;
}
.amo-overview__processItem ._head { display: flex; align-items: center; gap: 0.4rem; }
.amo-overview__processItem ._icon {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  border: 0.1rem solid var(--gold); display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.2rem;
}
/* Steps with a real exported icon (see overview.php's icon_file) drop the
   circle/border treatment meant for the single-kanji fallback — the icon
   art itself is the visual, not a glyph that needs a frame around it. */
.amo-overview__processItem ._icon--image { border: none; }
.amo-overview__processItem ._icon--image img { width: 2.4rem; height: 2.4rem; }
.amo-overview__processItem ._title { font-size: 1.2rem; font-weight: 700; color: #2F2C29; white-space: nowrap; }
.amo-overview__processItem ._desc { font-size: 1.1rem; color: #625D57; white-space: nowrap; text-align: center; line-height: 140%; }
@media screen and (max-width: 767px) {
  /* A horizontally-scrolling single row (the desktop layout, just relying
     on overflow-x:auto) isn't the wanted mobile treatment — this switches
     to an actual 2-column box instead, wrapping the 7 items into 4 rows
     (last row a lone 7th item) so nothing needs to scroll sideways at
     all. Text still never wraps mid-word/mid-value: each ・-joined desc
     already forces its own 2-line break via <br class="u-sp"> (see
     overview.php), so a half-width ~16rem column is plenty for it. */
  /* padding-bottom only — the base rule's 2.4rem bottom padding plus the
     last item's own 1.6rem bottom padding stacked into a noticeably taller
     gap below "レポーティング" than above "戦略設計" (which only has the
     container's top padding to contend with, no per-item one on top of
     it in the same way visually). */
  .amo-overview__process { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; padding-bottom: 1.2rem; }
  .amo-overview__processItem { padding: 1.6rem 0.8rem; }
  /* 7 is odd, so the last item is alone in its row with no column-2
     neighbor — spanning both columns lets it center across the full box
     width (via the item's own existing align-items:center) instead of
     sitting stuck in the left half. */
  .amo-overview__processItem:last-child { grid-column: 1 / -1; }
  /* Swap the desktop single-row divider (a full-height ::after line,
     right-of-every-item-but-the-last) for row/column dividers that match
     a 2-column grid — a full-width (edge-to-edge) line between rows, plus
     a short column divider between the 2 items in a row. The column
     divider is inset from the item's own top/bottom (rather than running
     the full item height like the desktop version) so it doesn't touch
     the row dividers above/below it.
     The cancelling selector has to repeat :not(:last-child) — a bare
     .amo-overview__processItem::after has LOWER specificity than the
     desktop rule it's meant to override (which includes :not(:last-child)
     in its selector), so it was losing the cascade despite coming later. */
  .amo-overview__processItem:not(:last-child)::after { content: none; }
  .amo-overview__processItem:nth-child(odd):not(:last-child)::after {
    content: ""; position: absolute; top: 1rem; bottom: 1rem; right: 0; width: 0.1rem; background: #B49A72;
  }
  .amo-overview__processItem:nth-child(-n+6)::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.1rem; background: #B49A72;
  }
}

/* ---- Services: card grid ---- */
.amo-services__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
/* Card spec from Figma node 537:1611 ("業務1/修正"), px→rem at /10.
   #F2EFE9 matches the Common Problems card bg (537:1624) exactly.
   Two judgment calls worth flagging:
   - Figma specifies "Noto Sans JP" for _title/_eyebrow — not part of the
     real site's loaded Typekit stack (dnp-shuei-gothic-gin-std /
     neue-haas-unica / garamond-premier-pro only), so it would just fall
     back to a generic system sans in production. Mapped _title to
     --font-jp (Japanese content, real loaded JP font) and _eyebrow to
     --font-latin (English content "Management" etc. — matches the site's
     own real convention of using neue-haas-unica for latin micro-labels
     everywhere else, e.g. nav/breadcrumbs/buttons), rather than literally
     using one undifferentiated font for both.
   - Figma's title color is literal #333, not exactly our confirmed
     $black (#44413E) — very close but not identical. Used var(--black)
     for consistency with the rest of the page; switch to a literal #333
     if pixel-exact match to this specific card matters more than
     consistency with the rest of the site's "black" token. */
.amo-services__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
  padding: 3.2rem 2.4rem;
  background: #F2EFE9;
  border-radius: 1.6rem;
  overflow: hidden;
}
/* Figma node 559:2766 ("BR1"): the image sits inset at its own native
   aspect ratio within a fixed-ratio slot (460.5×220px), not stretched to
   fill it — object-fit:contain + a matching aspect-ratio instead of a
   flat height, so the image is never cropped at other container widths. */
.amo-services__item ._image {
  display: block;
  width: 100%;
  aspect-ratio: 460.5 / 220;
  background: #FAF8F0;
  object-fit: contain;
}
.amo-services__item ._body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  width: 100%;
}
.amo-services__item ._heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
}
.amo-services__item ._title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
  width: 100%;
}
.amo-services__item ._eyebrow {
  font-family: var(--font-latin);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  color: #B49A72;
}
.amo-services__item ._desc {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.75;
  color: var(--black);
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .amo-services__list { grid-template-columns: 1fr; }
}

/* ---- Common Problems: numbered card grid (mirrors ac-problems__list) ---- */
.amo-problems__list { display: flex; flex-flow: wrap; justify-content: center; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
/* Card spec from Figma node 537:1624 ("Container/修正") — colors/fonts mapped
   to our real tokens rather than Figma's literal values: #A38C6B/#44413E are
   exactly $gold-light/$black; Figma's "EB Garamond" stand-in maps to the
   real site's actual garamond-premier-pro (--font-accent); Figma's Shuei
   Gothic maps to --font-jp. Width kept at the prior 30.1rem/16.4rem —
   the Figma node itself is `size-full` (fills whatever grid/flex cell its
   parent gives it), so it doesn't dictate a width at this level; existing
   wrapping-flex list arrangement kept as-is. */
.amo-problems__listItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 2.4rem;
  width: 30.1rem;
  background: #F2EFE9;
  border-radius: 1.6rem;
}
.amo-problems__listItem ._label { display: flex; align-items: center; }
.amo-problems__listItem ._num {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.7128rem;
  color: var(--gold-light);
  text-transform: uppercase;
}
.amo-problems__listItem ._description {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 3.024rem;
  color: var(--black);
  width: 100%;
}
@media screen and (max-width: 767px) {
  .amo-problems__listItem { padding: 1.8rem 1.2rem 1rem; width: 100%; }
}

/* ---- Benefit: alternating rows ----
   Spec from Figma node 537:1632 ("ZZ01"), px→rem at /10. Row is "Text" column
   (flex-col, gap 16px) + illustration placeholder (453×289px, radius 16px),
   gap 48px between them, align-items:center — grid-template-columns kept as
   1fr/1fr (not the literal 440.5px/453px) since that's an ~49/51 split
   anyway and a flexible grid is far more robust across our actual container
   width than two hardcoded absolute widths would be.
   #B49A72 is the same literal gold used in the Strengths card (537:1669) —
   not one of our named $gold/$gold-light/$gold-dark tokens, kept literal.

   Bug fix while here: .is-reverse previously set ._visual to `order: 2`,
   which does NOT swap anything — with ._text at the default order:0, a
   *higher* order still sorts ._visual after it, same as no reverse at all
   (verified: grid auto-placement follows `order` the same way flexbox
   does). Needs `order: -1` (lower than ._text's default 0) to actually
   place the image first. This means "every other row switches sides" was
   never actually working before this fix. */
.amo-benefit__list { display: flex; flex-direction: column; gap: 5.6rem; }
.amo-benefit__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; align-items: center; }
.amo-benefit__row.is-reverse ._visual { order: -1; }
.amo-benefit__row ._text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
/* Figma node 559:2789 ("Frame33"/IlluPH): unlike Services, each image here
   (406×406, 340×340, 296×296, 386×386 — larger than their 453×289 slot)
   is clipped to fill the slot completely via overflow-clip, not inset —
   object-fit:cover was already correct; only the ratio itself was off
   (16/10 = 1.6 vs Figma's actual 453/289 ≈ 1.567). */
.amo-benefit__row ._visual { display: block; width: 100%; aspect-ratio: 453 / 289; border-radius: 1.6rem; object-fit: contain; }
.amo-benefit__row ._num {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  color: #B49A72;
}
.amo-benefit__row ._title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.65;
  color: var(--black);
  margin: 0;
}
.amo-benefit__row ._desc {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--black);
  margin: 0;
}
@media screen and (max-width: 767px) {
  /* Single-column now, so this same `gap` becomes the vertical spacing
     between the stacked _visual/_text pair — i.e. the actual row gap at
     this breakpoint, distinct from the 4.8rem column-gap on desktop. */
  .amo-benefit__row, .amo-benefit__row.is-reverse { grid-template-columns: 1fr; gap: 2.4rem; }
  .amo-benefit__row ._visual { order: -1; }
  .amo-benefit__row ._title { font-size: 1.7rem; }
}

/* ---- Considerations: left-border list ---- */
.amo-considerations__list { display: flex; flex-direction: column; gap: 4.3rem; }
.amo-considerations__item { border-left: 0.3rem solid var(--gold); padding-left: 2rem; border-radius: .8rem; }
.amo-considerations__item ._title { font-size: 1.7rem; margin: 0 0 .8rem; font-weight: 700; }
.amo-considerations__item ._desc { margin: 0; font-size: 1.3rem; color: var(--black); opacity: .75; line-height: 180%; }

/* ---- Selection Criteria: numbered card grid ---- */
/* Card spec from Figma node 537:1661 ("FlowRow"), px→rem at /10. Replaces
   the earlier filled-card guess with the real outlined-card treatment:
   4 equal-width (flex:1) cards in one row, thin gold border, a bordered
   number header divided from centered body text by a bottom rule.
   0.5px border kept literal as 0.05rem (exact at 1rem=10px) rather than
   rounded to 0.1rem, since Figma explicitly specifies a hairline weight
   distinct from the 1px divider below the number. */
.amo-selection__list { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.amo-selection__listItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  gap: 1.6rem;
  padding: 1.6rem;
  border: 0.05rem solid #B49A72;
  border-radius: 1.6rem;
  overflow: hidden;
}
.amo-selection__listItem ._numBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8.6rem;
  padding: 0 2.4rem 0.8rem;
  border-bottom: 0.1rem solid #B49A72;
}
.amo-selection__listItem ._num {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: #B49A72;
  white-space: nowrap;
}
.amo-selection__listItem ._description {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--black);
  text-align: center;
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 767px) {
  /* Row of 4 equal flex:1 cards would squeeze unreadably narrow on mobile —
     not specified by this Figma node (desktop-only frame), so stacking
     them full-width is a judgment call, consistent with how every other
     card grid in this page collapses to a single column on mobile. */
  .amo-selection__list { flex-direction: column; }
  /* flex:1 0 0 from the desktop row layout doesn't get reset here — in a
     column-direction container, flex-basis:0 applies to height (the main
     axis), not width, collapsing every item to zero height with nothing
     to grow into (.amo-selection__list itself has no fixed height to
     distribute). flex:none lets each stacked card size to its own content
     instead. */
  .amo-selection__listItem { flex: none; width: 100%; }
}

/* ---- Strengths ----
   Card spec from Figma node 537:1669 ("Card_SQOOPYの特徴・強み/修正"), all px
   translated to rem at /10 (the confirmed fluid-rem convention: figma_px/10
   = rem). Replaces the earlier border-top-divider guess with the real
   two-column card layout: fixed-width label column (num + "." + label, in
   EB Garamond/Shuei Gothic mixed inline, baseline-aligned) + heading, next
   to a flexible description column.
   #B49A72 is a literal color, not one of our confirmed $gold/$gold-light/
   $gold-dark tokens — Figma's own callout names it "gold" explicitly, so
   it's a genuinely distinct shade for this component, kept as a literal
   hex rather than force-mapped to an existing variable.
   No background/border was present on this Figma node (only radius +
   overflow:hidden) — kept literal; currently a no-op without a fill, but
   left in place in case a parent-level card background applies here that
   this isolated node fetch didn't capture. */
.amo-strengths__list { display: flex; flex-direction: column; gap: 5.6rem; }
.amo-strengths__item {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
  padding: 0;
  overflow: hidden;
}
.amo-strengths__item ._head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  width: 28rem;
  flex: none;
}
.amo-strengths__item ._label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  color: #B49A72;
  white-space: nowrap;
}
.amo-strengths__item ._num,
.amo-strengths__item ._dot {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 1.5rem;
}
.amo-strengths__item ._labelText {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1.4rem;
}
.amo-strengths__item ._title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}
.amo-strengths__item ._desc {
  flex: 1;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--black);
  margin: 0;
}
@media screen and (max-width: 767px) {
  .amo-strengths__item { flex-direction: column; gap: 1.6rem; }
  .amo-strengths__item ._head { width: 100%; }
}

/* ---- Case Studies ----
   Rebuilt from Figma node 748:4155 ("08_運用実績事例", file
   EMrTGtcKdv6vwusofrMzwP "CL共有"), px→rem at /10. Replaces the prior
   generic before→after arrow-row layout (node 537:1677/1678, file
   xanNYISir0dh11diG2EoGX) — that node's copy was explicitly flagged
   placeholder (＜ダミー＞); this one carries real per-case copy.
   The chart itself now ships as a pre-exported Figma asset per case
   (assets/images/affiliate-advertising/graph_00{1,2,3}.svg — see
   case-studies.php) rather than being hand-built from CSS bars/pills — an
   earlier pass of this section did draw the 3 chart variants (12-month
   bar chart / before-after bar chart / CPO price comparison) in pure CSS
   to match the Figma screenshot; that's been dropped in favor of the real
   exported images, which already bake in their own #F2EFE9 card
   background, so ._chart no longer needs one.
   #D9D9D9 (body table/desc divider) is a literal Figma color, distinct
   from --border-soft (#CDC9C6) despite both reading as "divider gray" —
   kept as-is rather than unified. #B49A72 (gold) is likewise used literal
   for the tag pill rather than mapped to the site's --gold token
   (#917A5A), matching how the Flow section already treats this exact hex. */
.amo-cases__list { display: flex; flex-direction: column; gap: 6.4rem; }
.amo-cases__item { display: flex; align-items: flex-start; gap: 4rem; }

/* Chart card — the exported SVGs are all 420×299 (42rem × 29.9rem)
   regardless of case, so the card's size comes from the image itself;
   width:100% + height:auto keeps it scaling proportionally rather than
   stretching to fill any fixed box. */
.amo-cases__item ._chart { flex: none; width: 42rem; border-radius: 1.6rem; overflow: hidden; }
.amo-cases__item ._chart img { display: block; width: 100%; height: auto; }

/* Body column: tag pill, headline, indicator table, divider, description. */
.amo-cases__item ._body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.amo-cases__item ._meta { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; }
.amo-cases__item ._tags { display: inline-flex; align-items: center; align-self: flex-start; gap: 2rem; background: #F2EFE9; border: 0.1rem solid var(--border-soft); border-radius: 9999px; padding: 0.5rem 2rem; }
.amo-cases__item ._tag { font-family: var(--font-jp); font-weight: 700; font-size: 1.4rem; color: #B49A72; white-space: nowrap; }
.amo-cases__item ._tag:not(:last-child) { padding-right: 1.6rem; border-right: 0.1rem solid var(--border-soft); }
.amo-cases__item ._headline { font-family: var(--font-jp); font-weight: 700; font-size: 1.8rem; line-height: 1.5; color: var(--black); margin: 0; width: 100%; }
/* Grid lives on ._table itself (not per-row) with ._row as display:contents,
   so all rows' cells share ONE set of column tracks — label/value1 sized to
   max-content (each column exactly as wide as its widest cell, e.g.
   "117,740円"), rather than a shared fixed rem guess that was narrower than
   some real values and forced them to wrap ("41,473\n円"). Per-row grids
   can't share column widths with each other at all, so this also fixes
   columns not lining up from row to row within a card. */
.amo-cases__item ._table { display: grid; grid-template-columns: max-content max-content 1fr; column-gap: 1.6rem; row-gap: 0.8rem; width: 100%; }
.amo-cases__item ._row { display: contents; }
.amo-cases__item ._cell { font-family: var(--font-jp); font-size: 1.6rem; line-height: 1; color: var(--black); white-space: nowrap; }
.amo-cases__item ._cellLabel { font-weight: 700; }
.amo-cases__item ._cellValue { font-weight: 500; text-align: right; padding-right: 10rem; }
/* Middle column (the first value column, e.g. "開始時"/"移管前") widened
   ~10% beyond its max-content track — :nth-child(2) counts each cell's
   position within its own ._row (still the real DOM parent even though
   ._row itself renders as display:contents), so this hits every row's
   2nd cell across the whole table, not just one row. */
.amo-cases__item ._row ._cell:nth-child(2) { padding-right: 0; padding-left: 4.8rem; }
.amo-cases__item ._divider { width: 100%; height: 0.1rem; background: #D9D9D9; }
.amo-cases__item ._desc p { font-family: var(--font-jp); font-weight: 300; font-size: 1.4rem; line-height: 1.8; color: var(--black); margin: 0; }

@media screen and (max-width: 767px) {
  .amo-cases__list { gap: 4rem; }
  .amo-cases__item { flex-direction: column; align-items: stretch; gap: 2.4rem; }
  .amo-cases__item ._chart { width: 100%; }
  .amo-cases__item ._table { column-gap: 0.8rem; }
  .amo-cases__item ._cell { font-size: 1.4rem; }
  .amo-cases__item ._row ._cell:nth-child(2) { padding-left: 2.7rem; }
}

/* ---- Industries: icon grid ---- */
/* Card spec from Figma node 559:2901 ("IndustryRow"), px→rem at /10.
   #F2EFE9 matches the Common Problems / Services card bg exactly.
   Figma's icon slot (78×56px) now holds the real exported line-art SVGs
   (heart, box, yen, house, pencil, person, pylon, globe). The 金融・保険
   (yen) icon is the one exception: Figma draws a circle border around
   just that icon (not the others), so it gets a ._icon--circle modifier
   rather than baking the border into the SVG itself. */
.amo-industries__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.amo-industries__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2.4rem 1.6rem;
  background: #F2EFE9;
  border-radius: 1.6rem;
  overflow: hidden;
}
.amo-industries__item ._icon {
  width: 7.8rem;
  aspect-ratio: 78 / 56;
  /* Flex items default to min-height:auto (content-based) even with
     aspect-ratio set — the img's height:100% doesn't resolve against an
     aspect-ratio-derived (rather than explicitly declared) parent height,
     so it falls back to the icon's own intrinsic ratio, which then grows
     this flex item's content-based minimum past the intended ratio.
     min-height:0 (+ overflow:hidden as a backstop) forces aspect-ratio to
     actually win. */
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--black);
}
/* width/height:100% + object-fit:contain (not max-width/max-height on an
   intrinsically-sized img) so each icon fills the fixed-ratio slot
   consistently and stays undistorted — every exported icon SVG has
   preserveAspectRatio="none" baked in, which would otherwise stretch it
   to whatever box it's given; object-fit on the <img> overrides that. */
.amo-industries__item ._icon img { width: 100%; height: 100%; object-fit: contain; }
.amo-industries__item ._icon--circle img {
  width: 5.6rem; height: 5.6rem; border-radius: 50%; border: 0.1rem solid var(--black); padding: 1.2rem;
  box-sizing: border-box;
}
.amo-industries__item ._label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--black);
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .amo-industries__list { grid-template-columns: repeat(2, 1fr); }
  .amo-industries__item ._label { white-space: normal; }
}

/* ---- Media Example ---- */
/* Spec from Figma node 559:2997 ("Frame627713"), px→rem at /10. #CDC9C6
   divider matches our confirmed $border-soft exactly. All 6 icons are now
   real exported SVGs that already carry their own bordered rounded-square
   frame — no CSS border needed. ._icon--text (bordered box for a bare
   text glyph) is unused now but left in as a defensive fallback if
   icon_file is ever unset again. */
/* Row-gap is 4.8rem (not 2.4rem) so the horizontal divider below, placed
   at bottom:-2.4rem, sits exactly 2.4rem (24px) from the row above AND
   2.4rem from the row below (symmetric — half the total gap each side).
   Column divider (border-right) relies on Grid's default align-items:
   stretch: items have no fixed height, so each one stretches to match
   the tallest item in its row automatically, meaning the border-right
   naturally spans "the height of the contents of the row" rather than
   just its own item's content height. */
.amo-media__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.8rem 3.2rem; }
.amo-media__item { display: flex; align-items: center; gap: 2.4rem; padding: 2.4rem; position: relative; }
.amo-media__item:nth-child(odd) { border-right: 0.1rem solid var(--border-soft); }
.amo-media__item:not(:nth-last-child(-n+2))::after {
  content: "";
  position: absolute;
  bottom: -2.4rem;
  height: 0.1rem;
  background: var(--border-soft);
}
/* Extend each column's line the full 3.2rem column-gap into the middle
   toward the other column, so the two segments connect into one
   continuous line across the row instead of stopping at each cell's own
   edge (leaving a gap-shaped break where the columns meet). */
.amo-media__item:not(:nth-last-child(-n+2)):nth-child(odd)::after { left: 0; right: -3.2rem; }
.amo-media__item:not(:nth-last-child(-n+2)):nth-child(even)::after { left: -3.2rem; right: 0; }
.amo-media__item ._icon {
  flex: none; width: 6.3rem; height: 6.3rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--black);
}
.amo-media__item ._icon img { width: 100%; height: 100%; object-fit: contain; }
.amo-media__item ._icon--text { border-radius: 0.8rem; border: 0.1rem solid var(--black); }
.amo-media__item ._body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.amo-media__item ._title { font-family: var(--font-jp); font-weight: 700; font-size: 1.7rem; line-height: 1.6; color: var(--black); margin: 0; }
.amo-media__item ._desc { font-family: var(--font-jp); font-weight: 500; font-size: 1.6rem; line-height: 1.6; color: var(--black); margin: 0; }
@media screen and (max-width: 767px) {
  .amo-media__list { grid-template-columns: 1fr; }
  .amo-media__item:nth-child(odd) { border-right: none; }
  .amo-media__item:not(:nth-last-child(-n+2))::after { display: none; }
}

/* ---- Comparison table ----
   Spec from Figma node 559:3036 ("11_他社比較｜ASP・総合代理店との比較"),
   px→rem at /10. #504D49 is a distinct dark charcoal used for the label
   column and the SQOOPY column's outline/header — not our confirmed
   $black (#44413E), kept literal. #E0E0E0 (plain header cells) is also
   literal/distinct from our $border-soft (#CDC9C6).
   Real ○/×/△ are now exported SVGs (symbol-circle/cross/triangle.svg),
   each already colored per Figma (○ gold, ×/△ dark charcoal) — comparison.php
   picks the right file per cell via $amo_symbol_file(). */
/* table-layout:fixed + <colgroup> (in the PHP) rather than table-layout:
   auto: the label column gets an explicit width (24rem — generous enough
   for "LTV最適化（CRO含む）" on one line at this font/weight, since fixed
   layout does NOT let content overflow-expand a column the way auto
   layout does), and the other three <col> elements are left unstyled —
   per the CSS2.1 fixed-table-layout spec, columns with no explicit width
   share the table's remaining width EQUALLY. That's a spec guarantee,
   not a heuristic, so it's more reliable than giving three auto-layout
   columns matching width hints and hoping differing header text lengths
   ("ASP" vs "総合代理店" vs "SQOOPY") don't nudge them apart. */
.amo-comparison__table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1.5rem; }
.amo-comparison__table th,
.amo-comparison__table td { padding: 1.2rem 2.4rem; text-align: center; }
.amo-comparison__table th:first-child,
.amo-comparison__table td:first-child { text-align: left; }
.amo-comparison__table col._labelCol { width: 24rem; }
.amo-comparison__table tbody th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amo-comparison__table thead th {
  background: #E0E0E0;
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.6;
  color: var(--black);
}
.amo-comparison__table thead th:first-child { background: transparent; }
.amo-comparison__table thead th.is-highlight { background: #504D49; color: var(--white); border: 0.1rem solid #504D49; }
.amo-comparison__table tbody tr:nth-child(odd) { background: #F2EFE9; }
.amo-comparison__table tbody tr:nth-child(even) { background: var(--white); }
.amo-comparison__table tbody th {
  background: #504D49;
  color: var(--white);
  font-family: var(--font-jp);
  font-weight: 500;
  line-height: 1.6;
}
.amo-comparison__table tbody td.is-highlight { border-left: 0.1rem solid #504D49; border-right: 0.1rem solid #504D49; }
.amo-comparison__table tbody tr:last-child td.is-highlight { border-bottom: 0.1rem solid #504D49; }
/* Real ○/×/△ SVGs (each already colored correctly from the design — ○
   gold, ×/△ dark charcoal) replace the old Unicode characters, so no
   color mapping is needed here anymore, just vertical alignment/sizing. */
.amo-comparison__table ._symbol { display: inline-block; width: 1.5rem; height: 1.5rem; vertical-align: middle; }
@media screen and (max-width: 767px) {
  .amo-comparison__tableWrap { overflow-x: auto; }
  .amo-comparison__table { min-width: 55rem; }
  .amo-comparison__table col._labelCol { width: 14rem; }
  .amo-comparison__table th:first-child,
  .amo-comparison__table td:first-child { padding: 1.2rem 0.2rem; }
  .amo-comparison__table tbody th {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    font-size: 1.3rem;
  }
  /* Sticky first column while horizontally scrolling. Every "first
     column" cell in this table is actually a <th> (both the empty thead
     corner cell and the tbody row labels) — td:first-child kept anyway
     for the same defensive reason the base rule above does. The corner
     cell's background was transparent (fine on desktop, where nothing
     scrolls under it) — needs an opaque one now so scrolled columns
     don't show through the sticky cell on top of them. */
  .amo-comparison__table th:first-child,
  .amo-comparison__table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .amo-comparison__table thead th:first-child { background: #E0E0E0; }
  /* Uniform row height + centered content — the base th:first-child/
     td:first-child rule left-aligns the label column specifically
     (needs its own selector, not a plain th/td rule, to actually win:
     :first-child gives it higher specificity than a bare th/td
     selector would, regardless of source order). Explicit tr height
     covers the case where the label column's longest entry
     (「LTV最適化（CRO含む）」) wraps to 2 lines while every other cell in
     that row is 1 line — without it, that one row would be taller than
     the rest now that labels wrap instead of ellipsis-truncating. */
  .amo-comparison__table th,
  .amo-comparison__table td { vertical-align: middle; }
  .amo-comparison__table th:first-child,
  .amo-comparison__table td:first-child { text-align: center; }
  .amo-comparison__table tbody tr { height: 6.6rem; }
}

/* ---- Price ----
   Spec from Figma node 559:3050 ("Frame627702"), px→rem at /10. Label
   column width 29.6rem (296px, was an approximated 20rem); description
   is 3 explicit lines (<br> between them) matching Figma's own 3-paragraph
   break, not left to wrap naturally at whatever width the container is. */
.amo-price__body { display: grid; grid-template-columns: 29.6rem 1fr; gap: 0 4rem; align-items: start; }
.amo-price__body ._label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.5;
  color: var(--black);
  text-align: center;
  margin: 0;
}
.amo-price__body ._desc {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--black);
  margin: 0;
}
@media screen and (max-width: 767px) {
  .amo-price__body { grid-template-columns: 1fr; gap: 1.6rem; }
  .amo-price__body ._label { text-align: left; font-size: 2rem; }
}

/* ---- Flow: vertical numbered steps ----
   Spec from Figma node 559:3055 ("13_ご利用の流れ"), px→rem at /10.
   Replaces the single continuous ::before line spanning the whole list
   with real per-item line segments (Figma's own structure: badge column
   = badge + a connecting line that's a flex:1 child filling the gap down
   to the next badge, present on every item except the last). #B49A72 gold
   used for both the badge border/number and the connecting line. */
.amo-flow__list { list-style: none; margin: 0; padding: 0; }
.amo-flow__item { display: flex; align-items: stretch; gap: 1.6rem; }
.amo-flow__item ._badgeCol { display: flex; flex-direction: column; align-items: center; flex: none; }
.amo-flow__item ._num {
  flex: none; width: 5.8rem; height: 5.8rem; border-radius: 50%; border: 0.1rem solid #B49A72;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-accent);
  font-weight: 500; font-size: 1.6rem; color: #B49A72;
}
.amo-flow__item ._line { flex: 1; min-height: 0; width: 0.1rem; background: #B49A72; }
.amo-flow__item ._body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.4rem 0 4.8rem; }
.amo-flow__item ._title { font-family: var(--font-jp); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--black); margin: 0; }
.amo-flow__item ._desc { font-family: var(--font-jp); font-weight: 300; font-size: 1.6rem; line-height: 1.8; color: var(--black); margin: 0; }

/* ---- FAQ accordion ----
   The detail list itself (components/affiliate_advertising_management/faq.php)
   now reuses the real ac-faq__detailLists/detailList/details/summary/
   description/icon/faqNav markup and classes as-is (see components/affiliate/faq.php
   for the sibling usage) instead of a forked amo-faq__ equivalent, so those
   are already styled by the shared main.css bundle — no rules needed here.
   Only .amo-faq__heading (the section title, shared with the other amo-*
   sections above) stays page-specific. */

/* ---- Contact (page-specific card, rendered inside the shared footer's
   own c-siteFooter__contact slot — see contact.php's header comment) ----
   Spec from Figma node 352:1588 ("ContactCard", file
   xanNYISir0dh11diG2EoGX), px→rem at /10. c-siteFooterrContact__contents
   (main.css) is a flex column with align-items:center, so unlike a plain
   block parent it won't stretch a width:auto child to full width on its
   own — .amo-contact needs an explicit width here for that. */

/* This page only: the shared component's dark (#504d49) fill behind the
   contact block doesn't match this design — swap it for the light
   background this page's card sits on top of. */
body[data-page-type="affiliate_advertising_management"] .c-siteFooterrContact__inner { background: #FBFAF5; }

.amo-contact { width: 100%; }

.amo-contact__card {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 6.4rem;
  background: var(--black);
  border-radius: 1.6rem;
}
.amo-contact__heading { display: flex; align-items: baseline; gap: 1.6rem; flex-wrap: wrap; }
.amo-contact__heading ._en {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 6.4rem;
  line-height: 1;
  color: var(--white);
}
.amo-contact__heading ._ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0.03rem;
  color: #B49A72;
}
.amo-contact__row { display: flex; align-items: center; justify-content: space-between; gap: 3.2rem; flex-wrap: wrap; }
.amo-contact__copy { display: flex; flex-direction: column; gap: 0.8rem; }
.amo-contact__copy ._title { font-family: var(--font-jp); font-weight: 700; font-size: 2rem; line-height: 1.5; color: var(--white); margin: 0; }
.amo-contact__copy ._desc { font-family: var(--font-jp); font-weight: 400; font-size: 1.4rem; line-height: 1.85; color: #D1CCC4; margin: 0; }
.amo-contact__button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 4rem;
  background: #B49A72;
  border-radius: 2.5rem;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 1.5rem;
  color: #FBFAF5;
  white-space: nowrap;
  text-decoration: none;
}
.is-sp{ display: none; }
@media screen and (max-width: 767px) {
  .amo-contact__card { padding: 3.2rem 2.4rem; gap: 2.4rem; }
  .amo-contact__heading ._en { font-size: 4rem; }
  .amo-contact__row { flex-direction: column; align-items: flex-start; gap: 2.4rem; }
  .amo-contact__button { width: 100%; padding: 1.6rem; }
  .amo-services__item ._title{ font-size: 1.7rem; }
  .is-sp{ display: block; }
}
.c-siteFooter{
  border-top: none!important;
}