/*!
 * TOP first-screen frame — shared structure (SSOT: sites/shared/top-frame/)
 * Edit the shared copy and run tools/sync_top_frame.py. Do not edit theme copies.
 *
 * Owns: #mv hero, .mv_* components, .payment, #sp-fixed-menu, .pagetop,
 *       body top offset, header fold geometry tokens.
 * Site CSS must not target these selectors.
 *
 * Anchors (width is the only layout input; owner doctrine 20260711):
 *   A1 phone  <=639  own stacked composition; hamburger + bottom fixed CTA
 *   desktop   >=640  the landscape 1440x901 composition, scaled purely by
 *                    --hd; portrait screens show it smaller + the next
 *                    page(s) below. No other layout mode exists.
 * The ONLY layout boundary is 639/640. Inside the desktop range everything
 * is calc(var(--hd)*N) — clamp floors/caps are banned (fixed-font adaptive
 * reflow is the outlawed failure mode).
 *
 * Invariant: the photo's left edge derives from the panel width token, so
 * text/badges/banners cannot cross into the photo. Intended overlaps are
 * expressed as explicit tokens, not free-floating absolutes.
 */

:root {
  --tf-navy: #061549;
  --tf-blue: #0078d4;
  --tf-ink: #15345f;
  --tf-line-soft: #d7e9f8;
  --tf-green: #06c755;
  --tf-tel-soft: #edebf7;
  --tf-orange-grad: linear-gradient(135deg, #ff8a3d 0%, #f0743a 46%, #d85820 100%);
  --tf-text-shadow: 1px 2px 0 #10337d, 0 0 30px rgba(0, 120, 212, 0.85), 0 0 30px rgba(0, 120, 212, 0.85);
  --tf-header-h: 78px; /* folded/mobile header height (A1 only) */
  --tf-cta-h: 56px;    /* bottom fixed CTA row height (A1 only) */
  --hd: min(1.334px, calc(100vw / 1440)); /* proportional cap raised to 1920 (2K/4K legibility, 20260711) */ /* 1 header-design-px; 1440 = reference width */
}
@media (min-width: 640px) {
  :root {
    --tf-header-h: calc(var(--hd) * 90); /* scaled fixed header height (>=640, design value 90px@1440) */
  }
}

/* ==========================================================================
   Hero shell — all anchors
   ========================================================================== */
#mv {
  position: relative;
  width: 100%;
  background: var(--tf-navy);
  overflow: hidden;
}
#mv .mv_bg {
  background: var(--tf-navy);
}
#mv .mv_lcp_img {
  display: block;
  object-fit: cover;
  object-position: center;
}
/* Slides: slide01 stays transparent (the real <img> is the base layer);
   slide02/03 get lazy backgrounds from data-mv-src and crossfade on top.
   Slide entrance zoom: 1.06 -> 1 over 18s so the photo gently settles.
   slide01 gets transition:none — it's the LCP base; never animate on load. */
#mv .mv_slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.06);
  transition: opacity 2.5s ease, transform 18s ease;
}
#mv .mv_slide.is_active {
  opacity: 1;
  transform: scale(1);
}
#mv .mv_slide.slide01 {
  background: none !important; /* base layer is the LCP <img>; never paint slide01 */
  transition: none; /* LCP base layer — never animate scale on load */
}
.mv_content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mv_content > * {
  min-width: 0;
}

/* Hero typography shared skeleton */
.mv_h1, .mv_catch, .mv_h2, .mv_sub_station {
  color: #fff;
  text-shadow: var(--tf-text-shadow);
}
.mv_seo_text {
  color: rgba(255, 255, 255, 0.7);
}
.mv_h1 { font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; }
/* long clinic names break after the area segment at every anchor (sep hidden) */
.mv_h1 .mv_h1_sep { display: none; }
.mv_h1 .mv_h1_name { display: block; }
.mv_sub_station {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em; /* tighter station-fact spacing (owner 20260711: the line read too airy/wide) */
  row-gap: 0.1em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.mv_catch { font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; }
.mv_h2 { font-weight: 600; line-height: 1.4; } /* weight follows handa (user 20260710) */
.mv_h2_sub { display: block; font-weight: 600; }
.mv_seo_text { font-weight: 400; letter-spacing: 0.02em; line-height: 1.8; }
.mv_seo_text span { display: block; }

/* mv_photo — static clip container at >=640; transparent passthrough at A1.
   Defect-1 fix: clip-path lives here, not on the animated slide/img children. */
#mv .mv_photo {
  display: contents; /* passthrough at A1: children layout as direct .mv_bg children */
}

/* Badges — geometry shared, size per anchor */
.mv_badge_list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
}
.mv_badge {
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 246, 255, 0.96) 100%);
  border: 1px solid var(--tf-line-soft);
  box-shadow: 0 8px 20px rgba(6, 21, 73, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
}
.mv_badge a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Defect-4 fix: was flex-start; center aligns icon+text stack */
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--tf-ink);
}
.mv_badge_icon { color: var(--tf-blue); }
.mv_badge_icon svg { display: block; width: 100%; height: 100%; }
.mv_badge_main { font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; color: var(--tf-ink); text-align: center; }
/* #005fa3 not var(--tf-blue): on the white badge #0078d4 is CR 4.34:1 (AA needs 4.5) — audit V-S1 */
.mv_badge_em { font-size: calc(1em + 3px); font-weight: 800; color: #005fa3; line-height: 0.95; }
.mv_badge_num { font-family: var(--font-latin, inherit); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: #005fa3; }
.mv_badge_num small { font-weight: 600; }
.mv_badge_sub { font-weight: 600; line-height: 1.2; }

/* Campaign banners — 3:1 information graphics. Assets MUST be exact 3:1
   (720x240); the slot never crops meaningfully because ratios match. */
.mv_campaign {
  overflow: hidden;
}
.mv_campaign_track {
  display: flex;
  gap: 20px;
  width: max-content;
}
.mv_campaign_track a {
  display: block;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  flex-shrink: 0;
}
.mv_campaign_track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* asset ratio == slot ratio, so no visible crop */
}

/* Payment strip — visual replica of the takada88 implementation (client standard):
   flat white box, brand-blue stacked label, ONE composite svg (581x92). */
body:is(.home,.front-page) .payment {
  display: flex;
  align-items: stretch;
  background: #fff;
}
body:is(.home,.front-page) .payment h4 {
  background: var(--tf-blue);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body:is(.home,.front-page) .payment h4 span { font-weight: 500; }
body:is(.home,.front-page) .payment img {
  display: block;
  aspect-ratio: 581 / 92;
  object-fit: contain;
  background: #fff;
  min-width: 0;
  padding: 4px 8px 3px;
  box-sizing: border-box;
}
body:is(.home,.front-page) .payment h4 .payment_br { display: block; }

/* ==========================================================================
   Desktop composition (>=640) — THE landscape 1440x901 "photo", scaled
   purely by width (--hd). Owner doctrine (20260711): the composition anchor
   is the laptop/iPad-LANDSCAPE ratio; a portrait screen simply shows this
   composition smaller plus the next page(s) below it — NEVER a stretched
   hero filling the portrait viewport (the old A2 stacked layer was exactly
   that forbidden algorithm and was removed). Viewport height is NOT an
   input; the fold may cut the canvas; no readability floors — below-phone
   widths do not exist, phones (<=639) have their own composition.
   ========================================================================== */
@media (min-width: 640px) {
  body.home { padding-top: var(--tf-header-h); }

  #mv {
    /* hero canvas = 1440x901 design scaled by --hd. The old max(100vh, 901px)
       let 16:9 screens stretch the canvas, drifting the photo window
       (ratio 1.21 -> 1.35) and every y-based curve bound with it. */
    min-height: calc(var(--hd) * 901);
    --mv-pad: calc(var(--hd) * 52.6);             /* panel left indent (3.65vw at 1440) */
    /* Single navy boundary token: curve inner edge at its waist (y=50%,
       polygon x=7.89% of the 76%-wide photo -> 24vw + 5.996vw, rounded down).
       Content bounded by it can never cross the curve at ANY y. */
    --tf-navy-safe: 29.9vw;
  }
  #mv .mv_bg {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  #mv .mv_lcp_picture { display: contents; }
  /* mv_photo: static clip container — never transforms; slides/img inside animate freely.
     Defect-1 fix: scale() on child elements no longer scales the clip edge because the
     clip-path lives on this wrapper, which has overflow:hidden as a belt.
     Bézier-approximate polygon: M100,0 Q0,500 100,1000 in viewBox 100×1000,
     placed at viewport 21–39%. Photo element starts at (100–76%)=24% of viewport;
     x% values are element-relative (% of 76% width).
     Panel-content bounds derive from --tf-navy-safe (the polygon's waist),
     never from per-element y assumptions. */
  #mv .mv_photo {
    display: block; /* override display:contents passthrough */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 76%;
    overflow: hidden; /* belt: no sub-pixel paint outside clip boundary */
    clip-path: polygon(
      19.74% 0%, 17.49% 5%, 15.47% 10%, 13.70% 15%, 12.16% 20%, 10.86% 25%,
      9.79% 30%, 8.96% 35%, 8.37% 40%, 8.01% 45%, 7.89% 50%,
      8.01% 55%, 8.37% 60%, 8.96% 65%, 9.79% 70%, 10.86% 75%,
      12.16% 80%, 13.70% 85%, 15.47% 90%, 17.49% 95%,
      19.74% 100%, 100% 100%, 100% 0%
    );
  }
  /* slides fill the static wrapper — no clip-path, no viewport-relative sizing */
  #mv .mv_slide {
    left: 0; /* was left:auto; now relative to mv_photo (inset:0 from base rule) */
    right: 0;
    width: 100%; /* was 76% of viewport — now 100% of mv_photo */
  }
  /* LCP img: fills mv_photo entirely; clip removed (lives on wrapper) */
  #mv .mv_lcp_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #mv[data-hero-fit="cover-top"] .mv_lcp_img {
    /* window-ratio (1.19) hero photo: fill the window, crop only from the
       bottom (pavement) when >1920 widens the window — never the signboard.
       contain retired 20260712: the owner-supplied 1368x1149 photo matches
       the window, so the old letterbox gap is structurally gone. */
    object-fit: cover;
    object-position: center top;
  }
  .mv_content {
    min-height: calc(var(--hd) * 901);
    width: 39%;
    max-width: none;
    padding: calc(var(--hd) * 76) 0 calc(var(--hd) * 24); /* top gap header->glyph = hd*81 (owner 20260711: was 113, minus 2/7); vh removed (height is not an input) */
    box-sizing: border-box;
    justify-content: flex-start;
    /* contain:paint removed 20260711: the payment strip legitimately extends
       past the panel column (TB scale, may cross the curve — owner ruling).
       Banner containment is owned by .mv_campaign's own overflow:hidden +
       the navy-waist width bound + matrix assertions. */
  }
  /* Panel typography: PURE --hd (values = 1440 design px). clamp floors/caps
     are banned in this block — a floor is fixed-font adaptive reflow, the
     exact failure mode the owner outlawed: at 1024 the seo 10px floor pushed
     text onto the photo; at 2K the 580px column cap orphaned "で" (20260711). */
  .mv_text { width: calc(var(--hd) * 547.2); }
  /* Sentence groups (owner 20260711): G1 = h1 pair / G2 = station facts /
     G3 = catch + h2. Inter-group gaps are EQUAL and clearly larger than any
     intra-group gap so the grouping reads at a glance; G2 keeps a slightly
     smaller informational size than the G1 statement. */
  .mv_h1 { font-size: calc(var(--hd) * 21.6); padding-left: var(--mv-pad); padding-bottom: calc(var(--hd) * 10); margin-bottom: calc(var(--hd) * 24); }
  .mv_sub_station { font-size: calc(var(--hd) * 18); padding-left: var(--mv-pad); margin-bottom: calc(var(--hd) * 24); }
  .mv_catch { font-size: calc(var(--hd) * 21); padding-left: var(--mv-pad); margin-bottom: calc(var(--hd) * 10.5); }
  .mv_h2 { font-size: calc(var(--hd) * 43.5); padding-left: var(--mv-pad); margin-bottom: calc(var(--hd) * 30); }
  .mv_h2 span { font-size: calc(var(--hd) * 35.3); }
  .mv_h2_sub { font-size: calc(var(--hd) * 21.6); margin-bottom: calc(var(--hd) * 4.3); }
  /* seo text stays on navy (white on bright photo washes out). The max-width
     belt makes any overflow WRAP inside the navy zone, pushing the badges
     down in flow, instead of bleeding onto the photo. */
  .mv_seo_text { font-size: calc(var(--hd) * 10.1); padding-left: var(--mv-pad); margin-bottom: calc(var(--hd) * 21); max-width: calc(var(--tf-navy-safe) - var(--mv-pad) - 8px); word-break: keep-all; overflow-wrap: anywhere; }
  /* Defect-3: badges proportional to --hd and bounded by the navy safe zone.
     N values measured at 1440px (var(--hd)=1px, clamp mid-point):
       badge 120px, gap 12px, padding-top 21px, icon 21px, mb 4px,
       main 14px, num 32px, num-small 12px, sub 14px.
     Safe row = curve inner x at badge y≈40% (polygon x=8.37%):
       (0.24 + 0.0837×0.76)×vw = 30.36%vw; badge row must stay left of it -16px. */
  .mv_badge_list {
    --_tf-badge-safe-row: calc(var(--tf-navy-safe) - var(--mv-pad) - 16px);
    --_tf-badge-gap: calc(var(--hd) * 12);
    --_tf-badge-sz: min(calc(var(--hd) * 120), calc((var(--_tf-badge-safe-row) - 2 * var(--_tf-badge-gap)) / 3));
    gap: var(--_tf-badge-gap);
    margin-left: var(--mv-pad);
  }
  .mv_badge { width: var(--_tf-badge-sz); height: var(--_tf-badge-sz); }
  /* Defect-4: padding-top removed; centering via justify-content:center (base rule) */
  .mv_badge_icon { width: calc(var(--hd) * 21); height: calc(var(--hd) * 21); margin-bottom: calc(var(--hd) * 4); }
  .mv_badge_main { font-size: calc(var(--hd) * 14); }
  .mv_badge_num { font-size: calc(var(--hd) * 32); }
  .mv_badge_num small { font-size: calc(var(--hd) * 12); }
  .mv_badge_sub { font-size: calc(var(--hd) * 14); }
  /* Banner: proportional design size — items 300 design-px (was 360; client
     20260711 "小两圈"), container capped at 440 design-px and bounded by the
     navy WAIST token. The old y≈75% edge formula broke whenever the banner's
     y drifted (100vh canvas, content above it changing height). */
  .mv_campaign {
    width: min(calc(var(--tf-navy-safe) - var(--mv-pad) - 12px), calc(var(--hd) * 440));
    margin-left: var(--mv-pad);
    margin-top: calc(var(--hd) * 30);
  }
  .mv_campaign_track { gap: calc(var(--hd) * 20); }
  .mv_campaign_track a { width: calc(var(--hd) * 300); }
  /* TB live replica (measured 20260711 at 1440: strip 741x120, label 144
     wide / 16px font, SAME 581x92 payment.svg rendered in a 597px slot).
     Owner ruling: the strip MAY cross the navy curve onto the photo — do
     not constrain it into the navy zone; the cramped 300px-slot versions
     were the defect. Stacked box label, logo art ~2x previous size. */
  body:is(.home,.front-page) .payment {
    /* owner 20260712: the strip sits flush against the screen's left edge
       (full-bleed treatment, like the phone variant). Width unchanged. */
    margin-left: 0;
    margin-top: calc(var(--hd) * 30);
    width: calc(var(--hd) * 741);
    max-width: none;
  }
  body:is(.home,.front-page) .payment h4 { flex: 0 0 calc(var(--hd) * 144); align-items: center; justify-content: center; text-align: center; padding: calc(var(--hd) * 8) calc(var(--hd) * 10); font-size: calc(var(--hd) * 16); line-height: 1.5; }
  body:is(.home,.front-page) .payment h4 .payment_br { display: block; }
  body:is(.home,.front-page) .payment h4 span { font-size: calc(var(--hd) * 11); margin-top: calc(var(--hd) * 2); }
  body:is(.home,.front-page) .payment img { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; align-self: center; padding: calc(var(--hd) * 8) calc(var(--hd) * 8) calc(var(--hd) * 5); box-sizing: border-box; }
  #sp-fixed-menu { display: none; }
}


/* ==========================================================================
   A1 — phone stacked (<=639). Reproduces the approved mobile look; badges
   moved from absolute positioning to in-flow pull-up (same visual).
   ========================================================================== */
@media (max-width: 639px) {
  body {
    padding-top: var(--tf-header-h);
  }

  #mv { display: flex; flex-direction: column; }
  #mv .mv_bg {
    position: relative;
    height: clamp(266px, 83vw, 390px);
    overflow: hidden;
  }
  #mv .mv_lcp_picture { display: contents; }
  #mv .mv_lcp_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: center top;
  }
  .mv_content {
    display: flex;
    padding: 0 20px 20px;
    margin-top: -92px;
  }
  .mv_content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tf-navy);
    clip-path: polygon(0.0% 0.0px, 2.5% 4.5px, 5.0% 9.0px, 7.5% 13.3px, 10.0% 17.5px, 12.5% 21.6px, 15.0% 25.5px, 17.5% 29.4px, 20.0% 33.1px, 22.5% 36.7px, 25.0% 40.3px, 27.5% 43.6px, 30.0% 46.9px, 32.5% 50.1px, 35.0% 53.1px, 37.5% 56.1px, 40.0% 58.9px, 42.5% 61.6px, 45.0% 64.2px, 47.5% 66.6px, 50.0% 69.0px, 52.5% 71.2px, 55.0% 73.4px, 57.5% 75.4px, 60.0% 77.3px, 62.5% 79.1px, 65.0% 80.7px, 67.5% 82.3px, 70.0% 83.7px, 72.5% 85.0px, 75.0% 86.3px, 77.5% 87.3px, 80.0% 88.3px, 82.5% 89.2px, 85.0% 89.9px, 87.5% 90.6px, 90.0% 91.1px, 92.5% 91.5px, 95.0% 91.8px, 97.5% 91.9px, 100.0% 92.0px, 100% 100%, 0% 100%);
  }
  .mv_text { display: flex; flex-direction: column; width: 100%; padding-top: 60px; margin-top: -5px; }
  /* Badges ride the wave DELIBERATELY (owner 20260711: straddle with intent
     or leave — random half-overlap looked broken on real phones): smaller
     circles, right-aligned, each stepped down to follow the wave's slope so
     the row reads as beads on the curve. Text stays centered. */
  .mv_badge_list {
    order: -1;
    align-self: flex-end;
    justify-content: flex-end;
    gap: 7px;
    margin-top: -96px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
  }
  .mv_badge {
    width: 88px;
    height: 88px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(26, 58, 106, 0.18);
    box-shadow: 0 14px 32px rgba(26, 58, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(26, 58, 106, 0.08);
  }
  /* flat horizontal row (owner 20260711: 横着摆放好看些 — stepped variant rejected) */
  /* Defect-4: padding-top removed; centering via justify-content:center (base rule) */
  .mv_badge_icon { width: 16px; height: 16px; margin-bottom: 3px; color: #2f73d9; }
  .mv_badge_main { font-size: 10.5px; line-height: 1.25; color: #222; text-align: center; }
  .mv_badge_em { color: #1a3a6a; }
  /* system numerals on the phone circles: Lato arrives via deferred JS ~8s
     after load and its swap made 1分/3分 visibly jitter (owner 20260711) */
  .mv_badge_num { font-size: 20px; color: #1a3a6a; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
  .mv_badge_num small { font-size: 10px; color: #1a3a6a; }
  .mv_badge_sub { font-size: 10px; color: #222; }
  .mv_badge:nth-child(3) .mv_badge_main { font-size: 9.5px; white-space: nowrap; }
  .mv_badge:nth-child(3) .mv_badge_em { font-size: 12px; }
  .mv_h1 { font-size: clamp(18px, 5.1vw, 20px); line-height: 1.45; letter-spacing: 0.02em; margin-top: 28px; margin-bottom: 10px; }
  .mv_sub_station { font-size: 16px; margin-bottom: 6px; }
  .mv_catch { font-size: 18px; margin-bottom: 4px; }
  .mv_h2 { font-size: 28px; margin-top: 0.1em; margin-bottom: 12px; }
  .mv_h2 span { font-size: 24px; }
  .mv_h2_sub { font-size: clamp(14px, 4vw, 18px); }
  .mv_seo_text { font-size: 12px; line-height: 1.7; }
  .mv_campaign {
    width: min(calc(100vw - 40px), clamp(280px, 82vw, 360px));
    margin: 16px auto 0;
  }
  .mv_campaign_track a { width: min(calc(100vw - 40px), clamp(280px, 82vw, 360px)); }
  body:is(.home,.front-page) .payment {
    flex-direction: column;
    width: 100vw;
    max-width: none;
    margin: 16px 0 0 -20px;
  }
  body:is(.home,.front-page) .payment h4 { width: 100%; padding: 8px 12px; font-size: 14px; line-height: 1.35; text-align: center; }
  body:is(.home,.front-page) .payment h4 .payment_br { display: none; } /* horizontal bar on phone: single-line label */
  body:is(.home,.front-page) .payment img { width: 100%; max-width: 100%; height: auto; max-height: none; box-sizing: border-box; padding: 8px; flex: none; }

  /* Bottom fixed CTA — phone anchor only */
  #sp-fixed-menu {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10002;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  #sp-fixed-menu.show { opacity: 1; pointer-events: auto; visibility: visible; }
  #sp-fixed-menu.hide,
  body.no-scroll #sp-fixed-menu { opacity: 0; pointer-events: none; visibility: hidden; }
  #sp-fixed-menu ul { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
  #sp-fixed-menu ul li { width: 33.333%; height: var(--tf-cta-h); }
  #sp-fixed-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
  }
  #sp-fixed-menu ul li a img { height: 20px; width: auto; }
  #sp-fixed-menu ul li a span { font-size: 12px; font-weight: 600; line-height: 1.2; }
  #sp-fixed-menu .sp_fixed_tel { background: var(--tf-tel-soft); }
  #sp-fixed-menu .sp_fixed_tel a span { color: var(--tf-blue); font-weight: 500; }
  #sp-fixed-menu .sp_fixed_web { background: var(--tf-orange-grad); }
  #sp-fixed-menu .sp_fixed_web a img { height: 14px; margin-bottom: 2px; }
  #sp-fixed-menu .sp_fixed_line { background: var(--tf-green); }
}

/* ==========================================================================
   Back-to-top button — frame-owned so its offset tracks the CTA bar
   ========================================================================== */
.pagetop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 10003;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tf-blue);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.pagetop svg { width: 22px; height: 22px; }
/* interaction states (moved from handa common.css 20260711 — frame owns .pagetop) */
.pagetop:focus-visible { outline: 2px solid rgba(6, 21, 73, 0.25); outline-offset: 3px; }
.pagetop:active { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .pagetop:hover { background: #163f79; }
}
@media (max-width: 1023px) {
  .pagetop { right: 16px; width: 50px; height: 50px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .pagetop svg { width: 21px; height: 21px; }
}
@media (max-width: 639px) {
  .pagetop { bottom: calc(var(--tf-cta-h) + 20px + env(safe-area-inset-bottom)); }
}