/* /parking-management/ page — page-specific styles (main content background).
   Figma reference (fileKey lYUiG06Jv6OyZPMK4X1GFm):
     PC: node 509:526 "PC｜駐車場管理" / SP: node 509:1466 "SP｜駐車場管理"
   Uses the breakpoint tokens declared in styles.css (:root) and the
   shared side navigation styles in side-navi.css. The two-column
   .pm-page/.l-side-navi/.pm-main PC layout (fluid, --pc-scaled) is
   declared once, shared with /top/, in side-navi.css — see its
   "PC — .l-side-navi only" media query; not redeclared here. */

.pm-page {
  overflow-x: clip;
}

.pm-main {
  position: relative;
  background: #e5f2ff;
  /* No overflow property here (previously "overflow: hidden", clipping
     the decorative illustrations below from causing a horizontal
     scrollbar) — that clipping is already handled by the outer .pm-page's
     "overflow-x: clip" above, and per the CSS Overflow spec, setting only
     overflow-x on an element silently forces its own overflow-y's used
     value from "visible" to "auto" (the two axes can't independently be
     visible/non-visible). That "auto" made .pm-main a scroll container,
     which broke position:sticky for any descendant (e.g.
     .pm-benefit__sticky) by pinning it to .pm-main's own box instead of
     the viewport, so overflow is intentionally left unset here. */
}

/* Decorative corner illustration — Figma node 10:2003 (PC) / 4:284 (SP).
   Dedicated kanri assets: stall lines #257CCA and yellow cars on #005BAC.
   Top page keeps the light-bg variants (white lines, blue cars). */
.pm-main__illust-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 22%;
  aspect-ratio: 264 / 280;
  background-image: url("../images/illust_parking_pc_kanri.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

/* Title/breadcrumb section — Figma "ttl" PC node 756:1742 / SP node 756:1840.
   Decorative illustration (node 756:1777, "イラスト") reuses the existing
   img_display.svg asset already used by /top/'s .top-search-area__display
   (figma.com asset export is blocked by the org egress allowlist); positioned
   absolute, right-aligned, bleeding below the section's bottom edge. Offsets
   computed from each breakpoint's local Figma frame coordinates vs. the "ttl"
   container size:
     PC: image (x832,y218,w198,h134) in a 1200x294 frame -> right:170, bottom:-58
     SP: image (x240,y193,w105,h74) in a 375x237 frame -> right:30, bottom:-30
   both cross-checked against get_design_context's raw right-[...]/top-[calc(50%+...)]
   values. SP brand reuses /top/'s .l-page-head (same card through
   .l-side-navi__intro); only the #005bac section background differs. */
.pm-ttl {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background: #005bac;
  padding: calc(64 * var(--pc)) 0;
}
.pm-ttl .l-page-head,
.pm-ttl__inner {
  position: relative;
  z-index: 1;
}
.pm-ttl .pm-main__illust-top {
  z-index: 0;
}
.pm-ttl__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--pc));
  width: calc(960 * var(--pc));
}
.pm-ttl__breadcrumb {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pc));
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(12 * var(--pc));
  line-height: 1.5;
  white-space: nowrap;
}
.pm-ttl__breadcrumb a {
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  transition: color 0.2s ease;
}
.pm-ttl__breadcrumb a:hover {
  color: #a6c6e8;
}
.pm-ttl__breadcrumb-arrow {
  flex-shrink: 0;
  width: calc(14 * var(--pc));
  height: calc(14 * var(--pc));
}
.pm-ttl__heading {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(48 * var(--pc));
  line-height: 1.3;
}
.pm-ttl__illust {
  position: absolute;
  right: calc(170 * var(--pc));
  bottom: calc(-58 * var(--pc));
  width: calc(198 * var(--pc));
  height: calc(134 * var(--pc));
  pointer-events: none;
}


/* "Point" section — Figma PC node 509:965 / SP node 627:1185. Heading
   reuses .c-heading-lv2__title (same 36px/24px PC/SP sizing already
   defined for /top/'s section headings) applied directly to each of the
   4 forced line-break <p>s — this instance has no eyebrow/subtitle, so
   .c-heading-lv2__group's role (stack + align the lines) is played
   directly by .pm-point__heading instead. The 3 point cards reuse the
   shared .c-block-point component (see components.css). One shared
   .pm-point__row markup serves both breakpoints: PC lays heading+intro
   out side by side (flex row), SP stacks them (flex column) — mirroring
   how the actual Figma SP frame has them as separate stacked children.
   The section itself is a 960px-reference column (same as .pm-ttl__inner)
   centered inside .pm-main's 1200px content width via margin:auto — not
   full width, unlike .pm-ttl. */
.pm-point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(960 * var(--pc));
  margin: 0 auto;
  padding-bottom: calc(100 * var(--pc));
}
.pm-point__row {
  display: flex;
  align-items: flex-start;
  gap: calc(40 * var(--pc));
  width: 100%;
}
.pm-point__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  padding: calc(100 * var(--pc)) 0 calc(64 * var(--pc));
}
.pm-point__intro {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding-top: calc(100 * var(--pc));
}
.pm-point__intro-text {
  width: 100%;
}
.pm-point__intro-text p {
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}
.pm-point__cards {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--pc));
  width: 100%;
  padding-top: calc(14 * var(--pc));
}

/* Copyright — Figma node 597:1268 (PC). Same .top-copyright pattern as
   /top/: right-aligned on PC, centered on SP, 960px-reference centering
   like the other sections. */
.pm-copyright {
  max-width: calc(960 * var(--pc));
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: calc(16 * var(--pc)) 0 calc(40 * var(--pc));
}

.pm-copyright__text {
  margin: 0;
  color: #222;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--pc));
  line-height: 1.5;
  white-space: nowrap;
}

/* Footer illustration strip — Figma node 597:1270 (PC) / 509:2016 (SP),
   same 1200x268 box as /top/'s .top-main__illust-bottom (Figma node
   422:3951). aspect-ratio + height:auto instead of a fixed 268px height,
   so it scales with .pm-main's actual width like the corner illustration
   above does. */
.pm-main__illust-bottom {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 268;
  background-image: url("../images/illust_parking_footer.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* "to top" control — to_top.svg (189x120) is the dog mascot + TOP
   circle as one asset. The footer artwork no longer bakes that in.
   The circle inside the SVG is 60px at (cx 63.8, cy 54.3); right/bottom
   are chosen so that circle lands where the old 60px CSS button sat
   (right:135 / bottom:35 in the 1200x268 footer). */
.pm-main__to-top {
  position: absolute;
  bottom: 0;
  right: calc(40 * var(--pc));
  z-index: 2;
  display: block;
  width: calc(189 * var(--pc));
  height: calc(120 * var(--pc));
}

.pm-main__to-top img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Viewport-fixed "今すぐ相談する" CTA (Figma file zkSekUuQO9tCc2gIyivmvB,
   node 1:893 "追従ボタン"). Literal px rather than --pc/--sp: a floating
   control should keep a 100px footprint and the 20px / 10px right inset
   at every viewport width. z-index sits under .c-sp-menu's 200 so the
   SP menu overlay covers it. Spec: 100px circle, 1.5px #005bac ring,
   hard 0 2px 0 #005bac shadow, 6px gap, 4px top padding, 16px / 0.8px
   tracking bold label. The arrow is the exported 8x6 #005bac polygon
   (icon_polygon_blue.svg), rotated 180deg to point down as in the
   design. Annotation on the node: click scrolls to the page-bottom
   contact area (#pm-contact). */
.pm-float-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100px;
  height: 100px;
  padding-top: 4px;
  border: 1.5px solid #005bac;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 2px 0 #005bac;
  color: #005bac;
  font-family: "Noto Sans JP", "Kanit", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.8px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.pm-float-contact.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .pm-float-contact,
  .pm-float-contact.is-hidden {
    transition: none;
  }
}

.pm-float-contact__arrow {
  display: block;
  width: 8px;
  height: 6px;
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  /* Fluid scale for SP, same convention as /top/ (top-page.css): the
     design is authored at a 375px reference width, so every SP px value
     below scales as N * (100vw / 375) instead of staying pinned at a
     fixed pixel size across all phone widths. */
  .pm-main {
    --sp: calc(100vw / 375);
  }

  .pm-main__illust-top {
    top: 0;
    left: 0;
    right: auto;
    width: calc(126 * var(--sp));
    height: calc(127 * var(--sp));
    background-image: url("../images/illust_parking_header_sp_kanri.svg");
    background-position: top left;
    background-size: 100% 100%;
    z-index: 0;
  }

  .pm-copyright {
    max-width: none;
    justify-content: center;
    padding: calc(16 * var(--sp)) calc(20 * var(--sp));
  }

  .pm-copyright__text {
    font-size: calc(12 * var(--sp));
  }

  .pm-main__illust-bottom {
    height: calc(121 * var(--sp));
    background-image: url("../images/illust_parking_footer_sp.svg");
    background-position: left bottom;
    background-size: 100% 100%;
  }

  /* Scale to_top.svg so its 60px circle becomes the previous 48px SP
     button (0.8). Anchored to the footer bottom-right so the circle
     stays near the old right:72 / bottom:27 spot. */
  .pm-main__to-top {
    top: auto;
    bottom: 0;
    right: 0;
    width: calc(151 * var(--sp));
    height: calc(96 * var(--sp));
  }

  /* SP circle (Figma node 4:1009): 70px, 12px / 0.6px tracking.
     Border, shadow, gap, padding and 8x6 arrow stay the same as PC. */
  .pm-float-contact {
    right: 10px;
    width: 70px;
    height: 70px;
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  /* .pm-ttl — SP (Figma node 4:283). .l-page-head is the same block as
     /top/; transparent so this section's #005bac shows behind it. */
  .pm-ttl {
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--sp));
    padding: 0 calc(20 * var(--sp)) calc(32 * var(--sp));
  }
  .pm-ttl .l-page-head {
    width: 100%;
    margin-top: 0;
    padding: calc(24 * var(--sp)) 0 0;
    background: transparent;
    z-index: 1;
  }
  .pm-ttl__inner {
    gap: calc(16 * var(--sp));
    width: 100%;
  }
  .pm-ttl__breadcrumb {
    justify-content: flex-start;
    gap: calc(4 * var(--sp));
    font-size: calc(10 * var(--sp));
  }
  .pm-ttl__breadcrumb-arrow {
    width: calc(12 * var(--sp));
    height: calc(12 * var(--sp));
  }
  .pm-ttl__heading {
    font-size: calc(30 * var(--sp));
  }
  .pm-ttl__illust {
    right: calc(30 * var(--sp));
    bottom: calc(-30 * var(--sp));
    width: calc(105 * var(--sp));
    height: calc(74 * var(--sp));
  }

  /* .pm-point — SP (Figma node 627:1185): full width instead of the
     960px-reference PC column, heading+intro stack instead of sitting
     side by side, and the heading text/lines center instead of
     left-aligning (font-size itself already switches to 24px via the
     shared .c-heading-lv2__title SP rule). */
  .pm-point {
    width: 100%;
    margin: 0;
    padding: calc(16 * var(--sp)) calc(20 * var(--sp)) calc(56 * var(--sp));
  }
  .pm-point__row {
    flex-direction: column;
    gap: 0;
  }
  .pm-point__heading {
    align-items: center;
    align-self: auto;
    width: 100%;
    padding: calc(32 * var(--sp)) 0 calc(24 * var(--sp));
  }
  /* The 4 lines are now one <h2> with forced <br>s (not separate flex
     items), so its box auto-sizes to the widest line and align-items:center
     above only centers that whole box — text-align centers each shorter
     line within it too. */
  .pm-point__heading .c-heading-lv2__title {
    text-align: center;
  }
  .pm-point__intro {
    padding-top: 0;
  }
  .pm-point__intro-text p {
    font-size: calc(14 * var(--sp));
  }
  .pm-point__cards {
    flex-direction: column;
    gap: calc(8 * var(--sp));
    /* 24px left inset so the 48px badge (left: -24) sits on the
       section's 20px gutter instead of clipping. Figma 4:630. */
    padding: calc(34 * var(--sp)) 0 0 calc(24 * var(--sp));
  }
}

/* "Problem" section — Figma PC node 509:2751 / SP node 627:1044. Full-width
   light-blue section (like .pm-ttl), 120px/20px side padding creating the
   same 960px/335px reference content column used elsewhere, so children
   don't need their own explicit width. The 4 pain-point cards reuse the
   shared .c-block-problem component (see components.css); the 3 pill+body
   items inside the blue CTA banner reuse .c-block-feature. Two dog-mascot
   illustrations (icon_nissho_3.svg / icon_nissho_4.svg, supplied by the
   user) are absolutely positioned flanking the banner, per Figma's own
   pixel coordinates relative to this section. */
.pm-problem {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #c8e1fb;
  padding: 0 calc(120 * var(--pc)) calc(100 * var(--pc));
}

/* Reuses the shared .c-heading-lv2 wrapper (same pt-100/pb-40 padding
   numbers as its own base rule) — only the alignment (centered here vs.
   left-aligned on /top/) and the title color (#222 instead of the shared
   class's own #005bac) differ, so both are scoped overrides rather than
   changes to the shared class itself. */
.pm-problem__heading {
  /* .c-heading-lv2 defaults to flex-direction:row, so centering its single
     child horizontally needs justify-content (the row's main axis) —
     align-items only controls the cross axis (vertical) here and was the
     wrong property, which is why this heading rendered left-aligned. */
  justify-content: center;
}
.pm-problem__heading .c-heading-lv2__title {
  color: #222;
  text-align: center;
  /* Figma's own style for this heading (and the other bold display
     headings below) carries fontFeatureSettings "halt" 1 — Japanese
     "alternate half-width" glyph metrics, which noticeably tightens
     punctuation/character spacing versus the browser default. */
  font-feature-settings: "halt" 1;
}
.pm-problem__heading-break {
  display: none;
}

.pm-problem__cards {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--pc));
  width: 100%;
}

.pm-problem__solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: calc(80 * var(--pc)) 0 calc(40 * var(--pc));
}
.pm-problem__solution-heading {
  margin: 0;
  color: #005bac;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(48 * var(--pc));
  line-height: 1.3;
  font-feature-settings: "halt" 1;
}
.pm-problem__solution-break {
  display: none;
}

.pm-problem__intro {
  margin: 0;
  width: 100%;
  padding-bottom: calc(40 * var(--pc));
  color: #222;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}
.pm-problem__intro-highlight {
  font-weight: 700;
  text-decoration: underline dotted;
  text-decoration-color: #fff;
  text-decoration-thickness: calc(2 * var(--pc));
  text-underline-offset: 3px;
}
.pm-problem__intro-break {
  display: none;
}

.pm-problem__banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(32 * var(--pc));
  width: 100%;
  background: #005bac;
  border-radius: calc(20 * var(--pc));
  padding: calc(64 * var(--pc));
}
.pm-problem__banner-col {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--pc));
}
.pm-problem__banner-col--right {
  align-self: stretch;
  align-items: flex-start;
  gap: calc(36 * var(--pc));
}
.pm-problem__banner-heading {
  margin: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(20 * var(--pc));
  line-height: 1.5;
}
.pm-problem__feature-list {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--pc));
  width: 100%;
}

/* Connector between the two banner columns (Figma "Line 1"/"Line 2" +
   the user-supplied icon_plus.svg) — vertical at PC, horizontal at SP,
   same "divider-as-CSS-border" technique as .c-block-contact-cta__divider,
   just solid grey instead of dashed white. */
.pm-problem__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: calc(24 * var(--pc));
  width: 0;
}
.pm-problem__divider-line {
  flex: 1;
  width: 0;
  border-left: 1px dotted #ccc;
}
.pm-problem__divider-icon {
  flex-shrink: 0;
  /* The divider's own width:0 (it's just a flex column of two rule-lines +
     this icon) means the global `img { max-width:100% }` reset resolves
     against a 0 containing-block width and silently clamps this icon to
     0 too, unless overridden — same fix used throughout top-page.css for
     icons inside zero/min-width flex containers. */
  max-width: none;
  width: calc(24 * var(--pc));
  height: calc(24 * var(--pc));
}

.pm-problem__trouble-card {
  position: relative;
  overflow: hidden;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  background: #fff;
  border-radius: calc(10 * var(--pc));
  padding: calc(40 * var(--pc));
}
.pm-problem__trouble-text {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}
.pm-problem__trouble-text .pm-problem__intro-highlight {
  color: #005bac;
  text-decoration: none;
}
.pm-problem__trouble-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(304 * var(--pc));
  height: auto;
  pointer-events: none;
}

.pm-problem__banner-dot {
  position: absolute;
  width: calc(12 * var(--pc));
  height: calc(12 * var(--pc));
  border-radius: 100%;
  background: #a6c6e8;
}
.pm-problem__banner-dot.-tl { top: calc(20 * var(--pc)); left: calc(20 * var(--pc)); }
.pm-problem__banner-dot.-tr { top: calc(20 * var(--pc)); right: calc(20 * var(--pc)); }
.pm-problem__banner-dot.-bl { bottom: calc(20 * var(--pc)); left: calc(20 * var(--pc)); }
.pm-problem__banner-dot.-br { bottom: calc(20 * var(--pc)); right: calc(20 * var(--pc)); }

/* Dog-mascot illustrations flanking the banner — pixel coordinates taken
   directly from Figma metadata relative to this section (both at
   top:566px/PC, both bleeding slightly past the section's own edges at
   SP per the design). */
.pm-problem__illust {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
}
.pm-problem__illust--left {
  top: calc(566 * var(--pc));
  left: calc(140 * var(--pc));
  width: calc(119.68 * var(--pc));
}
.pm-problem__illust--right {
  top: calc(566 * var(--pc));
  right: calc(140 * var(--pc));
  width: calc(123.07 * var(--pc));
}

@media (max-width: 767px) {
  .pm-problem {
    padding: 0 calc(20 * var(--sp)) calc(56 * var(--sp));
  }
  .pm-problem__heading-break {
    display: block;
  }
  .pm-problem__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* row-gap 16 / column-gap 8, per Figma's SP metadata (16px between
       the two stacked rows, 8px between the two cards within a row). */
    gap: calc(16 * var(--sp)) calc(8 * var(--sp));
  }
  /* Figma swaps which of the middle two cards gets which tail direction
     between the PC row (4-across) and the SP grid (2x2) — see the
     .c-block-problem__tail comment in components.css. */
  .pm-problem__cards > :nth-child(2) .c-block-problem__tail {
    transform: translateX(-50%) scaleX(-1);
  }
  .pm-problem__cards > :nth-child(3) .c-block-problem__tail {
    transform: translateX(-50%);
  }
  .pm-problem__solution {
    padding: calc(48 * var(--sp)) 0 calc(24 * var(--sp));
  }
  .pm-problem__solution-heading {
    font-size: calc(30 * var(--sp));
  }
  .pm-problem__solution-break {
    display: block;
  }
  .pm-problem__intro {
    padding-bottom: calc(32 * var(--sp));
    font-size: calc(14 * var(--sp));
  }
  .pm-problem__intro-highlight {
    text-decoration-thickness: calc(2 * var(--sp));
  }
  .pm-problem__intro-break {
    display: block;
  }
  .pm-problem__banner {
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--sp));
    border-radius: calc(20 * var(--sp));
    padding: calc(40 * var(--sp)) calc(20 * var(--sp));
  }
  .pm-problem__banner-col {
    flex: none;
    width: 100%;
    gap: calc(24 * var(--sp));
  }
  .pm-problem__banner-col--right {
    align-self: auto;
    gap: calc(16 * var(--sp));
  }
  .pm-problem__banner-heading {
    font-size: calc(16 * var(--sp));
  }
  .pm-problem__feature-list {
    gap: calc(16 * var(--sp));
  }
  .pm-problem__divider {
    flex-direction: row;
    align-self: auto;
    gap: 0;
    width: 100%;
    height: calc(24 * var(--sp));
  }
  .pm-problem__divider-line {
    width: auto;
    height: 0;
    border-left: 0;
    border-top: 1px dotted #ccc;
  }
  .pm-problem__divider-icon {
    width: calc(24 * var(--sp));
    height: calc(24 * var(--sp));
  }
  .pm-problem__trouble-card {
    /* Figma's SP card has no flex-grow (just "shrink-0"), unlike the PC
       version which stretches to match the divider/left-column height —
       flex:1 0 0 with min-height:0 here would collapse the card toward 0
       in an auto-height column parent instead of sizing to its content. */
    flex: none;
    width: 100%;
    border-radius: calc(10 * var(--sp));
    padding: calc(24 * var(--sp)) calc(24 * var(--sp)) calc(40 * var(--sp));
  }
  .pm-problem__trouble-text {
    font-size: calc(14 * var(--sp));
  }
  .pm-problem__trouble-bg {
    width: calc(243 * var(--sp));
  }
  .pm-problem__banner-dot {
    width: calc(8 * var(--sp));
    height: calc(8 * var(--sp));
  }
  .pm-problem__banner-dot.-tl { top: calc(20 * var(--sp)); left: calc(20 * var(--sp)); }
  .pm-problem__banner-dot.-tr { top: calc(20 * var(--sp)); right: calc(20 * var(--sp)); }
  .pm-problem__banner-dot.-bl { bottom: calc(20 * var(--sp)); left: calc(20 * var(--sp)); }
  .pm-problem__banner-dot.-br { bottom: calc(20 * var(--sp)); right: calc(20 * var(--sp)); }
  .pm-problem__illust--left {
    top: calc(684 * var(--sp));
    left: calc(-5 * var(--sp));
    width: calc(84.67 * var(--sp));
  }
  .pm-problem__illust--right {
    top: calc(684 * var(--sp));
    right: calc(-6.07 * var(--sp));
    width: calc(87.07 * var(--sp));
  }
}

/* ---- pm-benefit : "ニッショーガレッパが選ばれる理由" (BENEFIT / reasons
   chosen) section — Figma "section" PC node 509:2753 / SP node 509:2760.
   PC is a two-column layout: a sticky left column (heading + a bookmark
   nav that scroll-spies the 4 .c-block-reason cards, see components.js)
   and a scrolling right column of the 4 cards themselves. SP drops the
   sticky column and the bookmark nav entirely (not present in the SP
   Figma frame) and stacks heading + illustration + cards. ---- */
.pm-benefit {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(120 * var(--pc));
  width: 100%;
  background: #005bac;
  padding: 0 calc(120 * var(--pc));
}

/* Reuses .c-heading-lv2, scoped to white (the shared component's default
   color is #005bac, meant for the light-blue page background elsewhere). */
.pm-benefit__heading .c-heading-lv2__group,
.pm-benefit__heading .c-heading-lv2__title,
.pm-benefit__heading .c-heading-lv2__subtitle {
  color: #fff;
}

.pm-benefit__heading .c-heading-lv2__title {
  font-feature-settings: "halt" 1;
}

.pm-benefit__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: calc(80 * var(--pc));
  width: calc(360 * var(--pc));
  padding-bottom: calc(100 * var(--pc));
}

.pm-benefit__bookmarks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--pc));
  width: 100%;
}

.pm-benefit__bookmark {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--pc));
  width: 100%;
  padding-top: calc(24 * var(--pc));
  border-top: 2px dashed #fff;
  text-decoration: none;
}

.pm-benefit__bookmark:last-child {
  padding-bottom: calc(24 * var(--pc));
  border-bottom: 2px dashed #fff;
}

.pm-benefit__bookmark-meta {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pc));
}

/* Not rendered at all for an inactive item (matches Figma: the inactive
   "BENEFIT N" variants, e.g. node 563:1736, have no dot markup and no
   reserved space for one — the label sits flush against the row's left
   edge). Only the active variant (node 563:1735) includes it, so it's
   toggled to a real flex item (not just an opacity fade) to avoid
   permanently reserving its width — that reserved space was previously
   pushing every row's label/title inward regardless of active state. */
.pm-benefit__bookmark-dot {
  display: none;
  width: calc(8 * var(--pc));
  height: calc(8 * var(--pc));
  border-radius: 50%;
  background: #fff;
}

.pm-benefit__bookmark-label {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: calc(14 * var(--pc));
  line-height: 1;
  letter-spacing: calc(0.7 * var(--pc));
  white-space: nowrap;
  color: #a6c6e8;
  transition: color 0.2s ease;
}

.pm-benefit__bookmark-title {
  flex: 1 0 0;
  min-width: 0;
  color: #a6c6e8;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--pc));
  line-height: 1.5;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Base text color here is #a6c6e8, but unlike the other text-link
   components this one doesn't follow the shared #005bac<->#a6c6e8 hover
   convention: per client feedback (Figma node 563:1736), hovering an
   inactive bookmark previews the active look, so it goes straight to
   #fff -- same color the active item already sits at (see
   .pm-benefit__bookmark.is-active below) -- instead of #005bac. */
.pm-benefit__bookmark:not(.is-active):hover .pm-benefit__bookmark-label,
.pm-benefit__bookmark:not(.is-active):hover .pm-benefit__bookmark-title {
  color: #fff;
}

.pm-benefit__bookmark.is-active .pm-benefit__bookmark-dot {
  display: block;
}

.pm-benefit__bookmark.is-active .pm-benefit__bookmark-label,
.pm-benefit__bookmark.is-active .pm-benefit__bookmark-title {
  color: #fff;
}

/* The active bookmark's base is #fff on the section's #005bac background;
   hovering it to #a6c6e8 read as too close to the background and made the
   text hard to see, so the active item stays #fff on hover (no color
   change) per client feedback (Figma node 563:1735). */
.pm-benefit__bookmark.is-active:hover .pm-benefit__bookmark-label,
.pm-benefit__bookmark.is-active:hover .pm-benefit__bookmark-title {
  color: #fff;
}

.pm-benefit__illust {
  position: absolute;
  top: calc(531 * var(--pc));
  left: calc(290 * var(--pc));
  width: calc(121 * var(--pc));
  height: calc(169 * var(--pc));
  max-width: none;
  pointer-events: none;
}

.pm-benefit__cards {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 0;
  gap: calc(40 * var(--pc));
  padding: calc(100 * var(--pc)) 0;
}

@media (max-width: 767px) {
  .pm-benefit {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 calc(20 * var(--sp)) calc(56 * var(--sp));
  }
  .pm-benefit__sticky {
    display: contents;
  }
  /* .c-heading-lv2__title has no text-align of its own (its PC usage here
     relies on the shared component's left-aligned block); at SP the box
     shrinks to its widest line ("ニッショーガレッパが"), so without an
     explicit center the shorter second line ("選ばれる理由") was sitting
     flush left under it instead of centered. */
  .pm-benefit__heading .c-heading-lv2__title {
    text-align: center;
  }
  .pm-benefit__bookmarks {
    display: none;
  }
  .pm-benefit__illust {
    top: calc(99 * var(--sp));
    left: calc(50% + calc(131.5 * var(--sp)));
    width: calc(90 * var(--sp));
    height: calc(126 * var(--sp));
    transform: translateX(-50%);
  }
  .pm-benefit__cards {
    width: 100%;
    gap: calc(16 * var(--sp));
    padding: 0;
  }
}

/* ---- pm-flow : "管理開始までの流れ" (FLOW) section — Figma PC node
   509:2759 / SP node 627:1278 (combined with FAQ below in one SP frame).
   Reuses .c-heading-lv2 for the heading and .c-block-flow (already built
   for /top/'s .top-flow__steps) for each numbered step, unchanged.
   This section sits inside the "main" frame (PC node 509:837, 1200px)
   at x:120/width:960 — i.e. it isn't its own full-bleed background like
   .pm-problem/.pm-benefit (which carry their own 120px side padding),
   it just needs centering to that 960px content width, same as
   .pm-point and /top/'s .top-flow. ---- */
.pm-flow {
  max-width: calc(960 * var(--pc));
  margin: 0 auto;
}

.pm-flow .c-heading-lv2__title {
  font-feature-settings: "halt" 1;
}

/* Step titles are longer than the shared .c-block-flow__title nowrap
   assumes (e.g. STEP3 / STEP5), so allow wrapping inside this section. */
.pm-flow .c-block-flow__title {
  white-space: normal;
}

.pm-flow__steps {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---- pm-faq : "よくあるご質問" (FAQ) section — Figma PC node 509:972 /
   SP node 627:1278 (combined with FLOW above). Reuses .c-heading-lv2 for
   the heading and .c-faq (already built for /top/'s .top-faq__list,
   native <details>/<summary>, animated by the shared Accordion class in
   components.js) for each question. Figma only shows the closed/question
   state here (no answer content), so — same as /top/'s .top-faq — each
   answer gets the "回答は準備中です。" placeholder until real copy exists. ---- */
.pm-faq {
  max-width: calc(960 * var(--pc));
  margin: 0 auto;
  padding-bottom: calc(100 * var(--pc));
}

.pm-faq .c-heading-lv2__title {
  font-feature-settings: "halt" 1;
}

.pm-faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pc));
  width: 100%;
}

@media (max-width: 767px) {
  /* Figma's SP frame (627:1278) wraps FLOW+FAQ together with one shared
     px-[20px] / pb-[56px] — split across our two separate <section>s,
     that's the same 20px side padding on each, with the 56px bottom
     padding on .pm-faq only (it's the one that's actually last). */
  .pm-flow {
    max-width: none;
    padding: 0 calc(20 * var(--sp));
  }
  .pm-faq {
    max-width: none;
    padding: 0 calc(20 * var(--sp)) calc(56 * var(--sp));
  }
  .pm-faq__list {
    gap: calc(8 * var(--sp));
  }
}