/* ============================================================
   Shared components (reused across pages)
   Naming: BEM with a "c-" prefix, matching the Figma component
   names so each block below can be traced back to its node.
   ============================================================ */

/* ---- c-character : character_face.svg + character_hand.svg overlay frame ----
   Both SVGs share the same 250x92 viewBox and are drawn to overlay
   pixel-perfectly, so they must always render at an identical box size
   inside one shared frame rather than being sized independently per
   usage (a size mismatch between the two is what let them drift apart).
   Usage:
     <div class="c-character <context-width-modifier>">
       <img class="c-character__face" ...>
       <img class="c-character__hand" ...>
     </div>
   A context modifier sets only the frame's width (e.g.
   .l-side-navi__character-frame); height follows automatically via
   aspect-ratio, and the hand image is layered above the face image. */
.c-character {
  position: relative;
  aspect-ratio: 250 / 92;
}
.c-character__face,
.c-character__hand {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.c-character__face {
  z-index: 1;
}
.c-character__hand {
  z-index: 2;
}

/* ---- c-link-navigation : nav link item (Figma component "PC/LinkNavigation", node 303:2065) ----
   Single reusable link style; used inside any nav list (e.g. .c-sp-menu__links). */
.c-link-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Mplus 1p", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
/* text-decoration-color is not set explicitly, so the underline follows
   currentColor — changing just the text color also recolors the
   underline, matching the other text-link hover treatments site-wide. */
.c-link-navigation:hover {
  color: #005bac;
  text-decoration: underline;
}

/* ---- c-menu-trigger : hamburger button (Figma node 359:7867) ---- */
.c-menu-trigger {
  display: none;
}

@media (max-width: 767px) {
  .c-menu-trigger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: 24px;
    right: 20px;
    width: 40px;
    /* Figma node 359:7867: 40x58 box, the 3 bars (18px tall) sit 24px from
       the top and 16px from the bottom — asymmetric, not centered. */
    padding: 0 0 16px;
    background: none;
    border: 0;
    cursor: pointer;
    /* Always paint above whatever container it sits in (header cards,
       decorative illustrations, etc.) regardless of DOM position, since
       some pages place this as a sibling of other positioned/z-indexed
       elements rather than as their last child. */
    z-index: 10;
    transition: opacity 0.2s ease;
  }
  .c-menu-trigger:hover {
    opacity: 0.6;
  }
  .c-menu-trigger span[aria-hidden] {
    display: block;
    width: 40px;
    height: 2px;
    border-radius: 4px;
    background: #222;
  }
  /* the open panel has its own close (X) button (Figma node 353:7679),
     so the hamburger just disappears behind the overlay while it is open
     — this also avoids the ghost outline that shows through the
     semi-transparent rgba(0,0,0,0.8) overlay background otherwise. */
  .c-menu-trigger[aria-expanded="true"] {
    visibility: hidden;
  }
}

/* ---- c-sp-menu : full-screen slide-in menu (Figma node 353:7673) ----
   Any element with [data-menu-target="<id>"] automatically controls the
   element with that id via assets/js/components.js — wire a new trigger
   by reusing the same data attribute, no extra JS needed. */
.c-sp-menu {
  display: none;
}

@media (max-width: 767px) {
  .c-sp-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.8);
    padding: 76px 20px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .c-sp-menu.is-open {
    transform: translateX(0);
  }

  .c-sp-menu__close {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-bottom: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .c-sp-menu__close:hover {
    opacity: 0.6;
  }
  /* Figma node 353:7679 "close": two 40x2px bars rotated +-30deg (not a
     symmetric 45deg X) crossing at the button's center. */
  .c-sp-menu__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 2px;
    background: #fff;
    border-radius: 4px;
  }
  .c-sp-menu__close span:first-child {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  .c-sp-menu__close span:last-child {
    transform: translate(-50%, -50%) rotate(-30deg);
  }

  .c-sp-menu__panel {
    position: relative;
    width: 100%;
    background: #fff;
    border: 2px solid #222;
    border-radius: 20px;
    padding: 56px 32px 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .c-sp-menu__dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #e6e6e6;
  }
  .c-sp-menu__dot.-tl { top: 18px; left: 18px; }
  .c-sp-menu__dot.-tr { top: 18px; right: 18px; }
  .c-sp-menu__dot.-bl { bottom: 18px; left: 18px; }
  .c-sp-menu__dot.-br { bottom: 18px; right: 18px; }

  .c-sp-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: 100%;
  }

  .c-sp-menu__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
  }

  .c-sp-menu__links {
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .c-sp-menu__links .c-link-navigation {
    justify-content: flex-start;
  }

  .c-sp-menu__owner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .c-sp-menu__owner-btn {
    background: #005bac;
    color: #fff;
    font-family: "Mplus 1p", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    width: 100%;
    padding: 16px 24px;
    position: relative;
    z-index: 1;
  }

  .c-sp-menu__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .c-sp-menu__logo {
    height: 17px;
    width: auto;
  }
  /* frame width for the c-character face+hand overlay used in the SP menu brand block;
     pulled below the panel's bottom edge so the character overlaps it */
  .c-sp-menu__character-frame {
    width: 180px;
    margin-bottom: -13px;
  }
}

/* ---- utility ---- */
.u-scroll-lock {
  overflow: hidden;
}
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* placeholder "coming soon" note used on pages still under construction —
   avoids inline styles for W3C/SEO best-practice (no-inline-style). */
.u-placeholder-note {
  padding: 120px 40px;
  text-align: center;
  color: #999;
}

/* ---- c-btn : shared CTA button component (Figma "PC/Button", node 327:5014 /
   "SP/Button/primary", node 431:4677). Reused wherever a primary blue CTA with
   a leading icon + trailing external-link icon is needed (currently:
   top-page.css's .top-search__cta). Scales via the same --pc/--sp custom
   properties as the rest of the fluid layout (inherited from .pm-page/.top-page
   and .top-main respectively) — no need to redeclare them here. ---- */
.c-btn {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: calc(10 * var(--pc));
  padding: calc(24 * var(--pc));
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(20 * var(--pc));
  text-decoration: none;
}

.c-btn--primary {
  background: #005bac;
  color: #fff;
}
.c-btn--primary:hover {
  background: #004aa1;
}

/* White-on-blue variant (Figma "PC/Button" node 571:826 "バリアント5" /
   "SP/Button" node 597:1247) — used on the .c-block-contact blue
   background, so the button itself stays white with blue label/icon. */
.c-btn--white {
  justify-content: center;
  background: #fff;
  color: #005bac;
}
.c-btn--white:hover {
  background: #e5f2ff;
}

.c-btn__main {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pc));
  min-width: 0;
  padding-left: calc(16 * var(--pc));
}

/* Modifier for a .c-btn__main with no trailing .c-btn__external icon (e.g.
   the phone-CTA button in .c-block-contact-cta) — .c-btn__main's own
   padding-left:16px exists only to visually rebalance the icon+label
   against that trailing icon, so a button without one needs it removed
   to stay centered. SP already has padding-left:0 on the base rule, so
   nothing to override there. */
.c-btn__main--center {
  padding-left: 0;
}

.c-btn__icon {
  width: calc(24 * var(--pc));
  height: calc(24 * var(--pc));
  flex-shrink: 0;
}

.c-btn__label {
  white-space: nowrap;
}

.c-btn__external {
  width: calc(16 * var(--pc));
  height: calc(16 * var(--pc));
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .c-btn {
    justify-content: space-between;
    border-radius: calc(10 * var(--sp));
    padding: calc(16 * var(--sp));
    font-size: calc(14 * var(--sp));
  }
  .c-btn__main {
    flex: 1 0 0;
    gap: calc(4 * var(--sp));
    padding-left: 0;
  }
  .c-btn__icon {
    width: calc(16 * var(--sp));
    height: calc(16 * var(--sp));
  }
  .c-btn__external {
    width: calc(14 * var(--sp));
    height: calc(14 * var(--sp));
  }
}

/* ---- c-block-contact : blue CTA/contact block (Figma "PC/BlockContact",
   node 304:2573 / "SC/BlockContact", node 316:3953). Reused for the /top/
   page's contact section (.top-contact); the CTA button reuses .c-btn
   (.c-btn--white). The quote/heading lines are each split into two <p>s
   and laid out as a row (PC, so they read as one continuous line exactly
   like the Figma source text) or a column (SP, so each <p> is its own
   line) — this keeps a single shared markup for both breakpoints instead
   of needing different text per breakpoint. ---- */
.c-block-contact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--pc));
  width: 100%;
  background: #005bac;
  border-radius: calc(20 * var(--pc));
  padding: calc(64 * var(--pc)) calc(80 * var(--pc));
}

.c-block-contact__badge {
  position: absolute;
  top: calc(-22 * var(--pc));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--pc));
  background: #e5f2ff;
  border: calc(3 * var(--pc)) solid #005bac;
  border-radius: calc(100 * var(--pc));
  padding: calc(8 * var(--pc)) calc(40 * var(--pc));
}

.c-block-contact__badge-text {
  color: #005bac;
  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;
}

/* Speech-bubble tail: two stacked CSS triangles (a slightly larger one in
   the border color behind, offset down by the border width, so it peeks
   out and reads as an outline around the smaller fill-color triangle in
   front) since the design has no flat edge to build a border-trick
   triangle from directly. */
.c-block-contact__badge-tail {
  position: absolute;
  bottom: calc(-9 * var(--pc));
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: calc(9 * var(--pc)) solid transparent;
  border-right: calc(9 * var(--pc)) solid transparent;
  border-top: calc(9 * var(--pc)) solid #005bac;
}

.c-block-contact__badge-tail::after {
  content: "";
  position: absolute;
  top: calc(-11.5 * var(--pc));
  left: calc(-6 * var(--pc));
  width: 0;
  height: 0;
  border-left: calc(6 * var(--pc)) solid transparent;
  border-right: calc(6 * var(--pc)) solid transparent;
  border-top: calc(6 * var(--pc)) solid #e5f2ff;
}

.c-block-contact__quotes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--pc));
  width: 100%;
}

.c-block-contact__quote {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.c-block-contact__quote,
.c-block-contact__quote p {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}

.c-block-contact__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.c-block-contact__heading,
.c-block-contact__heading p {
  margin: 0;
  color: #fff;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(36 * var(--pc));
  line-height: 1.5;
}

.c-block-contact__text {
  width: 100%;
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}
/* Figma "PC/BlockContact" (304:2582) breaks this text into two forced lines
   ("...定期巡回まで、" / "オーナー様に代わって..."); "SC/BlockContact"
   (316:3966) keeps it as one paragraph that wraps naturally instead. Rather
   than duplicate the sentence per breakpoint, a single <br> in the markup
   carries the PC break and is hidden at SP so the SP paragraph flows freely. */
.c-block-contact__text-break {
  display: block;
}

.c-block-contact__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--pc));
}

.c-block-contact__tel-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pc));
  margin: 0;
}

.c-block-contact__tel-icon {
  width: calc(32 * var(--pc));
  height: calc(32 * var(--pc));
  flex-shrink: 0;
  color: #fff;
}

.c-block-contact__tel-number {
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: calc(32 * var(--pc));
  line-height: 1;
  text-decoration: underline dotted;
  text-underline-position: from-font;
  transition: color 0.2s ease;
}

.c-block-contact__tel-number:hover {
  color: #a6c6e8;
}

.c-block-contact__tel-note {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(14 * var(--pc));
  line-height: 1.5;
  white-space: nowrap;
}
/* SP ("SC/BlockContact" 316:3973) splits this note into two forced lines
   ("受付時間：AM10:00〜PM6:00" / "（毎週水曜定休、夏季・冬季休暇期間中を除く）");
   PC (304:2582 -> 316:3581) keeps it as one whitespace-nowrap line. Same
   single-<br>-hidden-at-PC technique as .c-block-contact__text-break. */
.c-block-contact__tel-note-break {
  display: none;
}

@media (max-width: 767px) {
  .c-block-contact {
    gap: calc(24 * var(--sp));
    border-radius: calc(20 * var(--sp));
    padding: calc(40 * var(--sp)) calc(20 * var(--sp));
  }

  .c-block-contact__badge {
    top: calc(-16.75 * var(--sp));
    gap: calc(10 * var(--sp));
    border: calc(2 * var(--sp)) solid #005bac;
    border-radius: calc(100 * var(--sp));
    padding: calc(4 * var(--sp)) calc(24 * var(--sp));
  }

  .c-block-contact__badge-text {
    font-size: calc(14 * var(--sp));
  }

  .c-block-contact__badge-tail {
    bottom: calc(-8.25 * var(--sp));
    border-left: calc(8 * var(--sp)) solid transparent;
    border-right: calc(8 * var(--sp)) solid transparent;
    border-top: calc(8 * var(--sp)) solid #005bac;
  }

  .c-block-contact__badge-tail::after {
    top: calc(-10 * var(--sp));
    left: calc(-5 * var(--sp));
    border-left: calc(5 * var(--sp)) solid transparent;
    border-right: calc(5 * var(--sp)) solid transparent;
    border-top: calc(5 * var(--sp)) solid #e5f2ff;
  }

  .c-block-contact__quotes {
    gap: calc(8 * var(--sp));
  }

  .c-block-contact__text {
    font-size: calc(14 * var(--sp));
  }

  .c-block-contact__text-break {
    display: none;
  }

  .c-block-contact__quote {
    flex-direction: column;
    white-space: normal;
  }

  .c-block-contact__quote,
  .c-block-contact__quote p {
    font-size: calc(14 * var(--sp));
  }

  .c-block-contact__heading {
    flex-direction: column;
    white-space: normal;
  }

  .c-block-contact__heading,
  .c-block-contact__heading p {
    font-size: calc(24 * var(--sp));
  }

  .c-block-contact__tel {
    gap: calc(8 * var(--sp));
  }

  .c-block-contact__tel-row {
    gap: calc(4 * var(--sp));
  }

  .c-block-contact__tel-icon {
    width: calc(24 * var(--sp));
    height: calc(24 * var(--sp));
  }

  .c-block-contact__tel-number {
    font-size: calc(24 * var(--sp));
  }

  .c-block-contact__tel-note {
    font-size: calc(12 * var(--sp));
  }

  .c-block-contact__tel-note-break {
    display: block;
  }
}

/* ---- c-block-contact-cta : full-bleed photo CTA/contact block (Figma
   "PC/BlockContact", node 593:1154 / "SP/BlockContact", node 627:1043).
   Named with a "-cta" suffix to distinguish it from the earlier, visually
   different .c-block-contact component (badge + quote + phone-only, solid
   blue background) that already exists — both share the "BlockContact"
   name in Figma but are unrelated designs. Reused for parking-management's
   contact section. Reuses .c-heading-lv2__title for the heading and .c-btn
   (.c-btn--white / .c-btn--primary) for the two CTA buttons; only the
   background photo + dark overlay + panel/column layout are new. ---- */
.c-block-contact-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(32 * var(--pc));
  width: 100%;
  padding: calc(64 * var(--pc)) calc(120 * var(--pc)) calc(48 * var(--pc));
}

.c-block-contact-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-block-contact-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--pc));
  width: 100%;
}

/* This instance of .c-heading-lv2__title is white/centered, unlike the
   shared class's own #005bac/left-aligned default — scoped here rather
   than changed globally, same technique as .pm-point__heading. */
.c-block-contact-cta__inner .c-heading-lv2__title {
  color: #fff;
  text-align: center;
}

/* The PC break between "は" and "ニッショー..." is fixed (always breaks);
   the second break, between "に" and "お気軽..." (merged into the same
   line at PC, its own line at SP), is the single-hidden-<br> technique
   used throughout this codebase (see .c-block-contact__text-break). */
.c-block-contact-cta__heading-break {
  display: none;
}

.c-block-contact-cta__intro {
  width: 100%;
}

.c-block-contact-cta__intro p {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}

/* PC forces a break here (splitting one sentence in two); SP merges them
   into one naturally-wrapping paragraph — same technique as
   .c-block-contact__text-break, just the reverse default/SP states. */
.c-block-contact-cta__intro-break {
  display: block;
}

.c-block-contact-cta__panel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(40 * var(--pc));
  width: 100%;
  background: #232e3f;
  border-radius: calc(10 * var(--pc));
  padding: calc(40 * var(--pc));
}

.c-block-contact-cta__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--pc));
  min-width: 0;
}

.c-block-contact-cta__col-label {
  margin: 0;
  color: #fff;
  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;
}

/* Dashed divider between the two columns (Figma "Line 1") — vertical at
   PC, horizontal at SP; same dashed-rule idea as .l-side-navi__intro's
   border-bottom, just a standalone element instead of a border. */
.c-block-contact-cta__divider {
  align-self: stretch;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.3);
}

.c-block-contact-cta__note {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(14 * var(--pc));
  line-height: 1.5;
}

.c-block-contact-cta__tel-number {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: calc(30 * var(--pc));
  line-height: 1;
}

@media (max-width: 767px) {
  .c-block-contact-cta {
    align-items: center;
    gap: calc(32 * var(--sp));
    padding: calc(56 * var(--sp)) calc(20 * var(--sp)) calc(40 * var(--sp));
  }
  .c-block-contact-cta__bg {
    object-position: bottom;
  }
  .c-block-contact-cta__heading-break {
    display: block;
  }
  .c-block-contact-cta__inner {
    /* --pc is only declared on .pm-page at >=768px, so an SP-only element
       reading var(--pc) with no override here gets an invalid value and
       the gap silently collapses to its "normal" default — this is what
       made the heading-to-intro spacing look far too tight at SP. */
    gap: calc(24 * var(--sp));
  }
  .c-block-contact-cta__intro p {
    font-size: calc(14 * var(--sp));
    text-align: left;
  }
  .c-block-contact-cta__intro-break {
    display: none;
  }
  .c-block-contact-cta__panel {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 calc(20 * var(--sp));
    border-radius: calc(10 * var(--sp));
  }
  .c-block-contact-cta__col {
    flex: none;
    width: 100%;
    gap: calc(16 * var(--sp));
    padding: calc(24 * var(--sp)) 0;
  }
  .c-block-contact-cta__col-label {
    font-size: calc(14 * var(--sp));
  }
  .c-block-contact-cta__divider {
    align-self: auto;
    width: 100%;
    height: 0;
    border-left: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
  }
  .c-block-contact-cta__note {
    font-size: calc(12 * var(--sp));
  }
  .c-block-contact-cta__tel-number {
    font-size: calc(20 * var(--sp));
  }
}

/* ---- c-block-problem : white rounded "pain point" card with a small
   triangular tail (Figma "PC/BlockProblem", node 509:2893 / "SP/BlockProblem",
   node 714:1042). Reused 4x for parking-management's "problem" section (see
   .pm-problem__cards) — this is the one component explicitly called out as
   shared. The tail reuses the user-supplied icon_polygon.svg (a single flat
   white triangle); its facing direction is set per-instance via the
   --tail-a/--tail-b modifiers below, and the 2nd/3rd card's direction is
   swapped again at SP (see .pm-problem__cards media query) since Figma's PC
   row (4-across) and SP grid (2x2) don't assign the two tail directions to
   the same cards. ---- */
.c-block-problem {
  position: relative;
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--pc));
  height: calc(132 * var(--pc));
  background: #fff;
  border-radius: calc(10 * var(--pc));
  padding: calc(24 * var(--pc));
}

.c-block-problem__title {
  margin: 0;
  color: #222;
  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;
  font-feature-settings: "halt" 1;
}

.c-block-problem__highlight {
  color: #005bac;
}

.c-block-problem__tail {
  position: absolute;
  left: 50%;
  bottom: calc(-16 * var(--pc) + 1px);
  width: calc(24 * var(--pc));
  height: calc(16 * var(--pc));
}
.c-block-problem__tail img {
  display: block;
  width: 100%;
  height: 100%;
}

.c-block-problem__tail--a {
  transform: translateX(-50%);
}

.c-block-problem__tail--b {
  transform: translateX(-50%) scaleX(-1);
}

@media (max-width: 767px) {
  .c-block-problem {
    height: calc(95 * var(--sp));
    padding: calc(16 * var(--sp)) 0;
    /* border-radius (like other --pc-only values) is invalid at SP with
       no override here, since --pc is only declared at >=768px — it was
       silently collapsing to square corners. */
    border-radius: calc(10 * var(--sp));
  }
  .c-block-problem__title {
    font-size: calc(14 * var(--sp));
  }
  .c-block-problem__tail {
    /* More overlap than PC: the full 16px hang read a bit long on the
       shorter SP cards. */
    bottom: calc(-16 * var(--sp) + 5px);
    width: calc(24 * var(--sp));
    height: calc(16 * var(--sp));
  }
}

/* ---- c-block-feature : rounded pill label + white body text card (Figma
   "Frame 10702", node 509:3101 / node 627:1059 etc.). Reused 3x inside the
   parking-management "problem" section's blue CTA banner (see
   .pm-problem__feature-list). Not called out by name in Figma, but repeats
   3x with identical structure, same rationale as .c-block-point. ---- */
.c-block-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.c-block-feature__label {
  margin: 0 0 calc(-16 * var(--pc));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(16 * var(--pc));
  background: #c8e1fb;
  border-radius: 100px;
  color: #005bac;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
  white-space: nowrap;
}

.c-block-feature__body {
  z-index: 1;
  width: 100%;
  background: #fff;
  border-radius: calc(10 * var(--pc));
  padding: calc(24 * var(--pc)) calc(24 * var(--pc)) calc(16 * var(--pc));
}

.c-block-feature__body p {
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(14 * var(--pc));
  line-height: 1.8;
}

@media (max-width: 767px) {
  .c-block-feature__label {
    margin-bottom: calc(-16 * var(--sp));
    padding: 0 calc(16 * var(--sp));
    font-size: calc(14 * var(--sp));
  }
  .c-block-feature__body {
    border-radius: calc(10 * var(--sp));
    padding: calc(24 * var(--sp)) calc(24 * var(--sp)) calc(16 * var(--sp));
  }
  .c-block-feature__body p {
    font-size: calc(12 * var(--sp));
  }
}

/* ---- c-initial-badge : circular kana-initial badge (Figma "PC/TextInitials",
   node 327:5713). Reused wherever a single kana letter needs the round
   #f6f6f6 chip treatment (currently: c-accordion__initials in the region
   search block list). ---- */
.c-initial-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(30 * var(--pc));
  height: calc(30 * var(--pc));
  border-radius: 100%;
  background: #f6f6f6;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.5;
}

@media (max-width: 767px) {
  .c-initial-badge {
    width: calc(24 * var(--sp));
    height: calc(24 * var(--sp));
    font-size: calc(14 * var(--sp));
  }
}

/* ---- c-link-text : underlined text link + trailing external-link icon
   (Figma "PC/LinkText", node 304:2211). Reused wherever a plain #005bac
   link needs the icon treatment (currently: c-accordion__links in the
   region search block list — all external links to nissho-apn.co.jp /
   park-direct.jp). Icon is the shared external-link.svg asset rather than
   an inline SVG repeated per link. ---- */
.c-link-text {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pc));
  color: #005bac;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.c-link-text:hover {
  color: #a6c6e8;
}

.c-link-text::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(16 * var(--pc));
  height: calc(16 * var(--pc));
  background-image: url("../images/external-link.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .c-link-text {
    gap: calc(4 * var(--sp));
    font-size: calc(14 * var(--sp));
  }
  .c-link-text::after {
    width: calc(14 * var(--sp));
    height: calc(14 * var(--sp));
  }
}

/* ---- c-heading-lv2 : section heading, title + English eyebrow label
   (Figma "PC/HeadingLv2", node 304:2200 / "SP/HeadingLv2", node 353:6979).
   Reused as the lead-in heading for each 960px-reference top-page section
   (currently: .top-flow). PC is left-aligned; SP re-centers both the
   heading block and its text (see the media query below). ---- */
.c-heading-lv2 {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: calc(100 * var(--pc)) 0 calc(40 * var(--pc));
}

.c-heading-lv2__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * var(--pc));
  color: #005bac;
}

.c-heading-lv2__title {
  margin: 0;
  color: #005bac;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(36 * var(--pc));
  line-height: 1.5;
  white-space: nowrap;
}

.c-heading-lv2__subtitle {
  margin: 0;
  color: #005bac;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: calc(20 * var(--pc));
  line-height: 1;
  letter-spacing: calc(1 * var(--pc));
  white-space: nowrap;
}

@media (max-width: 767px) {
  .c-heading-lv2 {
    justify-content: center;
    padding: calc(56 * var(--sp)) 0 calc(24 * var(--sp));
  }
  .c-heading-lv2__group {
    align-items: center;
    gap: calc(4 * var(--sp));
  }
  .c-heading-lv2__title {
    font-size: calc(24 * var(--sp));
  }
  .c-heading-lv2__subtitle {
    font-size: calc(16 * var(--sp));
    letter-spacing: calc(0.8 * var(--sp));
  }
}

/* ---- c-block-point : hanging POINT badge + icon + title (Figma
   "PC/BlockPoint" 10:1448 / "SP/BlockPoint" 4:631). Reused 3x in
   .pm-point__cards. PC is a centered column with a pill badge sitting
   14px above the card; SP is a row with a 48px circular badge hanging
   24px off the left. ---- */
.c-block-point {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--pc));
  min-width: 0;
  background: #fff;
  border-radius: calc(10 * var(--pc));
  padding: calc(40 * var(--pc)) calc(24 * var(--pc)) calc(24 * var(--pc));
}

.c-block-point__badge {
  position: absolute;
  top: calc(-14 * var(--pc));
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--pc));
  padding: calc(4 * var(--pc)) calc(16 * var(--pc));
  border-radius: 100px;
  background: #005bac;
  transform: translateX(-50%);
}

.c-block-point__badge-text,
.c-block-point__badge-num {
  color: #fff;
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.c-block-point__badge-text {
  font-size: calc(14 * var(--pc));
  letter-spacing: calc(0.7 * var(--pc));
}

.c-block-point__badge-num {
  font-size: calc(20 * var(--pc));
  letter-spacing: calc(1 * var(--pc));
}

.c-block-point__badge-tail {
  position: absolute;
  left: 50%;
  bottom: calc(-7 * var(--pc));
  display: block;
  width: calc(10 * var(--pc));
  height: calc(8 * var(--pc));
  transform: translateX(-50%) rotate(180deg);
}

.c-block-point__icon {
  display: block;
  flex-shrink: 0;
  width: calc(40 * var(--pc));
  height: calc(40 * var(--pc));
}

.c-block-point__title {
  margin: 0;
  width: 100%;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(20 * var(--pc));
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 767px) {
  .c-block-point {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: calc(16 * var(--sp));
    width: 100%;
    border-radius: calc(10 * var(--sp));
    padding: calc(20 * var(--sp)) calc(20 * var(--sp)) calc(20 * var(--sp)) calc(40 * var(--sp));
  }
  .c-block-point__badge {
    top: 50%;
    left: calc(-24 * var(--sp));
    flex-direction: column;
    gap: 0;
    width: calc(48 * var(--sp));
    height: calc(48 * var(--sp));
    padding: calc(8 * var(--sp)) calc(16 * var(--sp));
    transform: translateY(-50%);
  }
  .c-block-point__badge-text {
    font-size: calc(10 * var(--sp));
    letter-spacing: calc(0.5 * var(--sp));
  }
  .c-block-point__badge-num {
    font-size: calc(16 * var(--sp));
    letter-spacing: calc(0.8 * var(--sp));
  }
  .c-block-point__badge-tail {
    top: 50%;
    right: calc(-6 * var(--sp));
    bottom: auto;
    left: auto;
    transform: translateY(-50%) rotate(90deg);
    width: calc(10 * var(--sp));
    height: calc(8 * var(--sp));
  }
  .c-block-point__icon {
    width: calc(40 * var(--sp));
    height: calc(40 * var(--sp));
  }
  .c-block-point__title {
    flex: 1 0 0;
    min-width: 0;
    width: auto;
    font-size: calc(16 * var(--sp));
    text-align: left;
  }
}

/* ---- c-block-flow : numbered step block (Figma "PC/BlockFlow", node
   327:5816 / "SP/BlockFlow", node 345:6767). Reused for each step in the
   "ご利用の流れ" list (currently: .top-flow__steps). Steps stack with a
   bottom-padding-per-item spacer (not a parent gap) so the last step can
   drop it — matches how Figma built it, and lets the dashed connector
   line (.top-flow__line) run independently behind the step circles. ---- */
.c-block-flow {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--pc));
  width: 100%;
}
.c-block-flow:not(:last-child) {
  padding-bottom: calc(40 * var(--pc));
}
/* Dashed connector, drawn per-row instead of as one long fixed-height line:
   each non-last row draws its own segment from its own step circle's
   vertical center down to the row's own bottom edge (which, thanks to
   padding-bottom above, lands exactly at the top of the next row's
   circle) — so it never depends on guessing the total stack height, and
   it naturally stops after the last row since :not(:last-child) excludes
   it. Sits behind .c-block-flow__step (z-index below) so the circle
   paints over the segment inside its own footprint. */
.c-block-flow:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(34 * var(--pc));
  top: calc(34 * var(--pc));
  bottom: 0;
  z-index: 0;
  border-left: calc(2 * var(--pc)) dashed #ccc;
  pointer-events: none;
}

.c-block-flow__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(68 * var(--pc));
  height: calc(68 * var(--pc));
  padding: calc(2 * var(--pc));
  border-radius: 100%;
  background: #005bac;
}

.c-block-flow__step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--pc));
  height: calc(64 * var(--pc));
  border: calc(2 * var(--pc)) solid #fff;
  border-radius: 100%;
  background: #005bac;
  color: #fff;
  line-height: 1;
}

.c-block-flow__step-label {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
  font-size: calc(12 * var(--pc));
  letter-spacing: calc(0.6 * var(--pc));
}

.c-block-flow__step-num {
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: calc(24 * var(--pc));
  letter-spacing: calc(1.2 * var(--pc));
}

.c-block-flow__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: center;
  gap: calc(16 * var(--pc));
  min-width: 0;
  padding-top: calc(16 * var(--pc));
}

.c-block-flow__title {
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(24 * var(--pc));
  line-height: 1.5;
  white-space: nowrap;
}

.c-block-flow__text,
.c-block-flow__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;
}
.c-block-flow__text p.c-block-flow__text-note {
  font-size: calc(14 * var(--pc));
}

.c-block-flow__note {
  width: 100%;
  border-radius: calc(10 * var(--pc));
  background: #c8e1fb;
  padding: calc(16 * var(--pc)) calc(24 * var(--pc));
}
.c-block-flow__note,
.c-block-flow__note p {
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}

.c-block-flow__note-link {
  color: #005bac;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  transition: color 0.2s ease;
}

.c-block-flow__note-link:hover {
  color: #a6c6e8;
}

/* Uses the shared external-link.svg asset (fixed #a6c6e8 fill), same as
   .c-link-text's ::after icon, rather than an inline SVG — so unlike
   before, this icon no longer tracks .c-block-flow__note-link's text
   color through the hover transition (#005bac <-> #a6c6e8); it matches
   exactly while hovered and is close-but-fixed otherwise. */
.c-block-flow__note-link-icon {
  display: inline-block;
  width: calc(16 * var(--pc));
  height: calc(16 * var(--pc));
  margin-left: calc(4 * var(--pc));
  vertical-align: -3px;
}

@media (max-width: 767px) {
  .c-block-flow {
    gap: calc(16 * var(--sp));
  }
  .c-block-flow:not(:last-child) {
    padding-bottom: calc(16 * var(--sp));
  }
  .c-block-flow:not(:last-child)::before {
    left: calc(25 * var(--sp));
    top: calc(25 * var(--sp));
    border-left: calc(2 * var(--sp)) dashed #ccc;
  }
  .c-block-flow__step {
    width: calc(50 * var(--sp));
    height: calc(50 * var(--sp));
    padding: calc(2 * var(--sp));
  }
  .c-block-flow__step-inner {
    width: calc(48 * var(--sp));
    height: calc(48 * var(--sp));
    border-width: calc(2 * var(--sp));
  }
  .c-block-flow__step-label {
    font-size: calc(10 * var(--sp));
    letter-spacing: calc(0.5 * var(--sp));
  }
  .c-block-flow__step-num {
    font-size: calc(20 * var(--sp));
    letter-spacing: calc(1 * var(--sp));
  }
  .c-block-flow__body {
    gap: calc(8 * var(--sp));
    padding-top: calc(8 * var(--sp));
  }
  .c-block-flow__title {
    font-size: calc(18 * var(--sp));
  }
  .c-block-flow__text,
  .c-block-flow__text p {
    font-size: calc(14 * var(--sp));
  }
  .c-block-flow__text p.c-block-flow__text-note {
    font-size: calc(12 * var(--sp));
  }
  .c-block-flow__note {
    border-radius: calc(10 * var(--sp));
    padding: calc(12 * var(--sp)) calc(16 * var(--sp));
  }
  .c-block-flow__note,
  .c-block-flow__note p {
    font-size: calc(14 * var(--sp));
  }
  .c-block-flow__note-link-icon {
    width: calc(14 * var(--sp));
    height: calc(14 * var(--sp));
    margin-left: calc(4 * var(--sp));
  }
}

/* ---- c-faq : Q&A accordion row (Figma "PC/BlockFaq", node 304:2686 —
   "close"/"hovered"/"opan" variants — / "SP/BlockFaq", node 353:7345,
   close only; the open/hovered look isn't in the SP file, so its sizes
   below are extrapolated from the same PC->SP ratios as the given SP
   close variant). Native <details>/<summary>, animated by the same
   Accordion class as .c-accordion (components.js finds the panel as
   "whatever follows <summary>", not by a hardcoded class name, so this
   works without its own JS). The icon reuses the exact plus/minus
   2-span-rotation technique from .c-accordion__icon. ---- */
.c-faq {
  display: block;
  width: 100%;
}

.c-faq__q {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pc));
  padding: calc(24 * var(--pc));
  border-radius: calc(10 * var(--pc));
  background: #fff;
  cursor: pointer;
  list-style: none;
}
.c-faq__q::-webkit-details-marker {
  display: none;
}
.c-faq__q:hover {
  background: #c8e1fb;
}
.c-faq[open] > .c-faq__q {
  border-radius: calc(10 * var(--pc)) calc(10 * var(--pc)) 0 0;
  background: #c8e1fb;
}

.c-faq__q-label {
  flex-shrink: 0;
  color: #005bac;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: calc(24 * var(--pc));
  line-height: 1;
  letter-spacing: calc(1.2 * var(--pc));
}

.c-faq__q-text {
  flex: 1 0 0;
  min-width: 0;
  text-align: left;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--pc));
  line-height: 1.5;
}

.c-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: calc(26 * var(--pc));
  height: calc(26 * var(--pc));
  border-radius: 100%;
  background: #fff;
}
.c-faq__icon-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(12 * var(--pc));
  height: calc(2 * var(--pc));
  margin-top: calc(-1 * var(--pc));
  margin-left: calc(-6 * var(--pc));
  background: #005bac;
  transition: transform 0.2s ease;
}
.c-faq__icon-bar.-b {
  transform: rotate(90deg);
}
.c-faq[open] .c-faq__icon-bar.-b {
  transform: rotate(0deg);
}

.c-faq__answer {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--pc));
  width: 100%;
  border: calc(4 * var(--pc)) solid #c8e1fb;
  /* Bottom corners only — it sits flush against the open .c-faq__q above
     (which itself squares off its own bottom corners when open, see
     ".c-faq[open] > .c-faq__q"), so rounding the answer's top corners
     too would leave a visible gap/notch where the two panels meet. */
  border-radius: 0 0 calc(10 * var(--pc)) calc(10 * var(--pc));
  background: #fff;
  padding: calc(24 * var(--pc)) calc(40 * var(--pc)) calc(24 * var(--pc)) calc(20 * var(--pc));
}

.c-faq__a-label {
  flex-shrink: 0;
  color: #005bac;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: calc(24 * var(--pc));
  line-height: 1;
  letter-spacing: calc(1.2 * var(--pc));
}

.c-faq__a-text {
  flex: 1 0 0;
  min-width: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}
.c-faq__a-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;
}
.c-faq__a-text a {
  color: #005bac;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  transition: color 0.2s ease;
}

.c-faq__a-text a:hover {
  color: #a6c6e8;
}

@media (max-width: 767px) {
  .c-faq__q {
    gap: calc(16 * var(--sp));
    padding: calc(16 * var(--sp));
    border-radius: calc(10 * var(--sp));
  }
  .c-faq[open] > .c-faq__q {
    border-radius: calc(10 * var(--sp)) calc(10 * var(--sp)) 0 0;
  }
  .c-faq__q-label {
    font-size: calc(20 * var(--sp));
    letter-spacing: calc(1 * var(--sp));
  }
  .c-faq__q-text {
    font-size: calc(16 * var(--sp));
  }
  .c-faq__icon {
    width: calc(20 * var(--sp));
    height: calc(20 * var(--sp));
  }
  .c-faq__icon-bar {
    width: calc(12 * var(--sp));
    height: calc(2 * var(--sp));
    margin-top: calc(-1 * var(--sp));
    margin-left: calc(-6 * var(--sp));
  }
  .c-faq__answer {
    gap: calc(12 * var(--sp));
    border-width: calc(4 * var(--sp));
    border-radius: 0 0 calc(10 * var(--sp)) calc(10 * var(--sp));
    padding: calc(16 * var(--sp)) calc(24 * var(--sp)) calc(16 * var(--sp)) calc(16 * var(--sp));
  }
  .c-faq__a-label {
    font-size: calc(20 * var(--sp));
    letter-spacing: calc(1 * var(--sp));
  }
  .c-faq__a-text,
  .c-faq__a-text p {
    font-size: calc(14 * var(--sp));
  }
}

/* ---- c-accordion : animated details/summary accordion (Figma "PC/BlockArea"
   / "SP/BlockArea" component, node 316:3230). Reused wherever a collapsible
   region/ward list is needed (currently: top-page.css's search-area block
   list). The open/close slide is driven by components.js (WAAPI height
   animation) — see the comment there. Scales via --pc/--sp like the rest of
   the fluid layout. ---- */
.c-accordion {
  display: block;
  width: 100%;
}

.c-accordion__summary {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pc));
  padding: calc(24 * var(--pc));
  border-radius: calc(10 * var(--pc));
  background: #e5f2ff;
  cursor: pointer;
  list-style: none;
}
.c-accordion__summary::-webkit-details-marker {
  display: none;
}
.c-accordion__summary:hover {
  background: #c8e1fb;
}
.c-accordion[open] > .c-accordion__summary {
  border-radius: calc(10 * var(--pc)) calc(10 * var(--pc)) 0 0;
  background: #c8e1fb;
}

.c-accordion__title {
  flex: 1 0 0;
  min-width: 0;
  text-align: left;
  color: #005bac;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(18 * var(--pc));
}

.c-accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: calc(26 * var(--pc));
  height: calc(26 * var(--pc));
  border-radius: 100%;
  background: #fff;
}
.c-accordion__icon-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(12 * var(--pc));
  height: calc(2 * var(--pc));
  margin-top: calc(-1 * var(--pc));
  margin-left: calc(-6 * var(--pc));
  background: #005bac;
  transition: transform 0.2s ease;
}
/* Closed = plus (bar -b rotated 90deg across bar -a) ; open = minus
   (both bars overlaid at 0deg) — the rotation transition is what makes
   the icon visually morph between the two on toggle. */
.c-accordion__icon-bar.-b {
  transform: rotate(90deg);
}
.c-accordion[open] .c-accordion__icon-bar.-b {
  transform: rotate(0deg);
}

/* Outer panel: fully filled with the "open" accent color, radius only on
   the bottom two corners (it sits directly under the summary's own
   top-rounded / no-radius-bottom shape); the white content card lives in
   .c-accordion__panel-inner, inset by a flat 4px on every side. */
.c-accordion__panel {
  background: #c8e1fb;
  border-radius: 0 0 calc(10 * var(--pc)) calc(10 * var(--pc));
  padding: calc(4 * var(--pc));
}

.c-accordion__panel-inner {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--pc));
  background: #fff;
  border-radius: calc(10 * var(--pc));
  padding: calc(24 * var(--pc)) calc(20 * var(--pc));
}

.c-accordion__note {
  margin: 0;
  color: #999;
}

.c-accordion__row {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--pc));
  width: 100%;
}
.c-accordion__row:not(:last-child) {
  padding-bottom: calc(20 * var(--pc));
  border-bottom: calc(2 * var(--pc)) dashed #ccc;
}

.c-accordion__initials {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: calc(4 * var(--pc));
  width: calc(160 * var(--pc));
}

.c-accordion__links {
  display: flex;
  flex: 1 0 0;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 calc(24 * var(--pc));
  min-width: 0;
}

@media (max-width: 767px) {
  .c-accordion__summary {
    gap: calc(16 * var(--sp));
    padding: calc(16 * var(--sp));
    border-radius: calc(10 * var(--sp));
  }
  .c-accordion[open] > .c-accordion__summary {
    border-radius: calc(10 * var(--sp)) calc(10 * var(--sp)) 0 0;
  }
  .c-accordion__title {
    font-size: calc(16 * var(--sp));
  }
  .c-accordion__icon {
    width: calc(20 * var(--sp));
    height: calc(20 * var(--sp));
  }
  .c-accordion__icon-bar {
    width: calc(12 * var(--sp));
    height: calc(2 * var(--sp));
    margin-top: calc(-1 * var(--sp));
    margin-left: calc(-6 * var(--sp));
  }
  .c-accordion__panel {
    border-radius: 0 0 calc(10 * var(--sp)) calc(10 * var(--sp));
    padding: calc(4 * var(--sp));
  }
  .c-accordion__panel-inner {
    gap: calc(16 * var(--sp));
    border-radius: calc(10 * var(--sp));
    padding: calc(16 * var(--sp)) calc(12 * var(--sp));
  }
  .c-accordion__row {
    flex-direction: column;
    gap: calc(4 * var(--sp));
  }
  .c-accordion__row:not(:last-child) {
    padding-bottom: calc(16 * var(--sp));
    border-bottom-width: calc(2 * var(--sp));
  }
  .c-accordion__initials {
    width: auto;
    gap: calc(4 * var(--sp));
  }
  .c-accordion__links {
    gap: 0 calc(16 * var(--sp));
  }
}

/* ---- c-block-reason : image + text card (Figma "PC/BlockReason", node
   509:2791 / "SP/BlockReason", node 627:1218). Reused 4x for parking-
   management's "BENEFIT" (reasons chosen) section, see .pm-benefit__cards.
   Top corners round only on the image half, bottom corners round only on
   the white body half — the two halves share one outer silhouette. ---- */
.c-block-reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.c-block-reason__image {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  height: calc(320 * var(--pc));
  border-radius: calc(10 * var(--pc)) calc(10 * var(--pc)) 0 0;
}

.c-block-reason__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.c-block-reason__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--pc));
  width: 100%;
  background: #fff;
  border-radius: 0 0 calc(10 * var(--pc)) calc(10 * var(--pc));
  padding: calc(40 * var(--pc));
}

.c-block-reason__label {
  margin: 0;
  color: #005bac;
  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;
}

.c-block-reason__title {
  margin: 0;
  color: #222;
  text-align: center;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 700;
  font-size: calc(24 * var(--pc));
  line-height: 1.5;
  font-feature-settings: "halt" 1;
}

.c-block-reason__text {
  margin: 0;
  color: #222;
  font-family: "Noto Sans JP", "Mplus 1p", sans-serif;
  font-weight: 400;
  font-size: calc(16 * var(--pc));
  line-height: 1.8;
}

@media (max-width: 767px) {
  .c-block-reason__image {
    height: calc(223 * var(--sp));
    border-radius: calc(10 * var(--sp)) calc(10 * var(--sp)) 0 0;
  }
  .c-block-reason__body {
    gap: calc(8 * var(--sp));
    border-radius: 0 0 calc(10 * var(--sp)) calc(10 * var(--sp));
    padding: calc(24 * var(--sp));
  }
  .c-block-reason__label {
    font-size: calc(12 * var(--sp));
    letter-spacing: calc(0.6 * var(--sp));
  }
  .c-block-reason__title {
    font-size: calc(18 * var(--sp));
  }
  .c-block-reason__text {
    font-size: calc(14 * var(--sp));
  }
}