/* Prof3 (2026-10-20, Owner): the mobile FV is the approved PC FV, whole, scaled down — photo, logo, copy, layout and line breaks together.
   PC reference drawing (recorded on the isolated WordPress, PC 1440 x 900, no admin bar): stage 1440 x 900, the fixed site header covers the
   top 77px, so the part seen on PC is 1440 x 823 (y 77-900). Logo left 43.2px / top 100.4px / 320 x 85.5px; copy ① eyebrow 16px, title 60px;
   copy ② 28px; copy ③ kicker 18px, mark 89.28px (margin-bottom 108px); SCROLL 12px at 36px from the bottom; copy area from y 185.87px.
   Fix12 (2026-10-21, Owner: iPhone "A problem repeatedly occurred" while scrolling the FV): the drawing is no longer kept at 1440 x 900 and shrunk
   from outside with transform: scale(). WebKit paints every composited layer at its own CSS size x the device pixel ratio, ignoring an ancestor's
   scale (measured with the macOS WebKit at DPR 3: the photo layers 4849 x 2707 px = 50 MB each, the shade / veil 44.5 MB each, the copy 35 MB,
   about 0.4 GB for the FV of a 390px screen, all painted again on every viewport height change). Now every PC reference value is converted to the
   screen (--hal-fv-s = screen width / 1440) and the FV is laid out and painted at the size it is shown: the box, positions, font sizes, spacing,
   text shadows, the logo, SCROLL and the progress line. fv-pc.js converts the photo layers' PC geometry (positions, sizes, transform origins,
   translations) the same way. The picture, the composition, the motion and the copy stages are the PC ones; nothing is enlarged or cropped.
   Mobile (767.98px and below, html.hal-fv-mscale set before the first paint by the inline script of fv-pc.php): the stage stays the screen
   (sticky, 100dvh, the FV background colour); the canvas shows the PC part (y 77-900) centred between the mobile header and the fixed CTA bar,
   by CSS from the stage height (an address-bar height change moves it without any script). The bands above and below are the FV background.
   The scroll section is the PC one (60svh, the same rule as PC). Only #hal-wp-fv is affected; the page is not fixed to the PC width.
   PC (768px and wider): .hero__canvas is the stage's own box (inset 0), so the PC drawing is unchanged. */
#hal-wp-fv .hero__canvas { position: absolute; inset: 0; }

@media (max-width: 767.98px) {
  /* integration.css hides the PC FV at 767px and below and shows the earlier mobile FV; with the scaled FV the earlier one is kept only for
     screen readers and search (its H1), exactly as on PC */
  html.hal-fv-mscale #hal-wp-fv,
  html.hal-fv-mscale #hal-wp-after-fv { display: block; }
  html.hal-fv-mscale .hal-theme-fv-mobile {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  html.hal-fv-mscale #hal-wp-fv .hero__stage { background: var(--ink); }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas {
    --s: var(--hal-fv-s, 0.27);
    /* the mobile header above and the fixed CTA bar below (fv-pc.js measures them; the fallbacks are the theme's values) */
    --fv-hdr: var(--hal-fv-hdr, 61px);
    --fv-bar: var(--hal-fv-bar, 0px);
    inset: auto;
    left: 0;
    /* the PC part (823 x s tall, from 77 x s) in the middle of the free space between the header and the CTA bar */
    top: calc(var(--fv-hdr) + max(0px, (100% - var(--fv-hdr) - var(--fv-bar) - 823px * var(--s)) / 2) - 77px * var(--s));
    width: calc(1440px * var(--s));
    height: calc(900px * var(--s));
    clip-path: inset(calc(77px * var(--s)) 0 0 0);   /* the strip under the PC header is not part of what PC shows */
    /* the PC reference values (the FV's own rules use the screen's vw / vh and a 640px breakpoint), converted to the screen */
    --hdr-h: calc(77px * var(--s));
    --logo-w: calc(320px * var(--s));
    --brand-x: calc(43.2px * var(--s));
    --brand-y: calc(100.4px * var(--s));
    --brand-bottom: calc((100.4px + 320px * 0.2671) * var(--s));
    --hal-pad: calc(28px * var(--s));
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__copy { padding: calc(24px * var(--s)) 6% calc(var(--brand-bottom) * 0.6); }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__eyebrow {
    font-size: calc(16px * var(--s));
    text-shadow: 0 calc(1px * var(--s)) calc(14px * var(--s)) rgba(0,0,0,0.65);
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__title {
    font-size: calc(60px * var(--s));
    text-shadow: 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0,0,0,0.5), 0 calc(2px * var(--s)) calc(28px * var(--s)) rgba(0,0,0,0.7);
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__lead {
    font-size: calc(28px * var(--s));
    text-shadow: 0 calc(1px * var(--s)) calc(4px * var(--s)) rgba(0,0,0,0.8), 0 calc(1px * var(--s)) calc(18px * var(--s)) rgba(0,0,0,0.85);
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__brand-mark {
    font-size: calc(89.28px * var(--s)); line-height: 1.08; margin-bottom: calc(108px * var(--s));
    text-shadow: 0 calc(2px * var(--s)) calc(6px * var(--s)) rgba(0,0,0,0.55), 0 calc(4px * var(--s)) calc(36px * var(--s)) rgba(0,0,0,0.7);
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__brand-kicker { font-size: calc(18px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__brand-line { display: block; }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__logo-fallback {
    font-size: calc(18px * var(--s));
    text-shadow: 0 calc(1px * var(--s)) calc(10px * var(--s)) rgba(0,0,0,0.6);
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__hint { bottom: calc(36px * var(--s)); font-size: calc(12px * var(--s)); gap: calc(8px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__hint svg { width: calc(14px * var(--s)); height: calc(18px * var(--s)); animation-name: hero-bounce-m; }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__progress { height: calc(2px * var(--s)); }
  /* the static display (no motion / an image failed): the PC values at 1440 x 900 as well, converted */
  html.hal-fv-mscale #hal-wp-fv .hero:not(.is-scrub) .hero__canvas .hero__copy--1 { padding-top: calc(54px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero:not(.is-scrub) .hero__canvas .hero__title { font-size: calc(48px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero:not(.is-scrub) .hero__canvas .hero__copy--2 { padding-top: calc(243px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero:not(.is-scrub) .hero__canvas .hero__lead { font-size: calc(22px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero:not(.is-scrub) .hero__canvas .hero__copy--3 { padding: calc(369px * var(--s)) 5% calc(36px * var(--s)); }
  html.hal-fv-mscale #hal-wp-fv .hero:not(.is-scrub) .hero__canvas .hero__brand-mark { font-size: calc(63px * var(--s)); margin-bottom: 0; }

  /* Fix12: the photo layers are composited (will-change) only while they are drawn: a layer covered by the opening photo, faded out, or with the
     FV scrolled off the screen gets data-fv-off from fv-pc.js (not drawn, not updated, its layer released). PC keeps fv-pc.css as it is. */
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__view[data-fv-off],
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__room[data-fv-off],
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__room-full[data-fv-off] { will-change: auto; visibility: hidden; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  html.hal-fv-mscale #hal-wp-fv .hero__canvas .hero__hint svg { animation: none; }
}
/* SCROLL's bounce at the screen's size (PC: 5px in fv-pc.css; 5px of a 12px label = 0.41667em) */
@keyframes hero-bounce-m {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(0.41667em); opacity: 1; }
}

/* Fix13 (2026-10-21, Owner-approved): the mobile FV copy, the black bands, and the FV held together with what follows it.
   Copy: 「港区赤坂の探偵・浮気調査」「探偵依頼の痕跡を、日常に残さない。」「完全予約制、完全個室、探偵感を消した相談室。」 each stay on one line
   (white-space: nowrap; no line break, no ellipsis, no word removed, no horizontal squeeze, the letter spacing unchanged). Their font sizes no
   longer follow the photo's scale: the Owner's targets at 390px (14px / 20px / 16px) follow the screen width, each capped by the width its line
   needs (the ems of the line: 12 characters x 1.3em + .3em, 17 x 1.06em, 22 x 1.1em) within the copy width (the canvas less 4% on each side);
   fv-pc.js measures the drawn line and lowers a size further only if the line still does not fit. The shadows follow the font size (em).
   Bands: above and below the picture, 1/3 of Fix12's (Fix12: (the stage height, at least 560px, less the header, the fixed CTA bar and the picture) / 2;
   now that / 3 = / 6), from the small viewport height (svh) so the toolbar of the browser does not change it. The stage is header + band + picture +
   band tall (no fixed height, no min-height), the picture's size unchanged.
   Holding: while the FV plays (the same 60svh as before), the FV and the section after it (.hal-fvpin__sticky: 違和感 and the achievements) are held
   together (position: sticky) and only the FV moves; after it the page scrolls on. The wrapper is display: contents everywhere else (PC unchanged). */
.hal-fvpin, .hal-fvpin__sticky { display: contents; }
.hal-fvpin__hold { display: none; }
@media (max-width: 767.98px) {
  html.hal-fv-mscale #hal-wp-fv .hero__stage {
    --s: var(--hal-fv-s, 0.27);
    --fv-hdr: var(--hal-fv-hdr, 61px);
    --fv-bar: var(--hal-fv-bar, 0px);
    --fv-band: max(0px, calc((max(100vh, 560px) - var(--fv-hdr) - var(--fv-bar) - 823px * var(--s)) / 6));
    height: calc(var(--fv-hdr) + 2 * var(--fv-band) + 823px * var(--s));
    min-height: 0;
  }
  html.hal-fv-mscale #hal-wp-fv .hero__canvas { top: calc(var(--fv-hdr) + var(--fv-band) - 77px * var(--s)); }
  html.hal-fv-mscale .hal-fvpin.is-pinned { display: block; position: relative; }
  html.hal-fv-mscale .hal-fvpin.is-pinned > .hal-fvpin__sticky { display: block; position: -webkit-sticky; position: sticky; top: 0; }
  html.hal-fv-mscale body.admin-bar .hal-fvpin.is-pinned > .hal-fvpin__sticky { top: 46px; }
  html.hal-fv-mscale .hal-fvpin.is-pinned > .hal-fvpin__hold { display: block; height: 60vh; }
  html.hal-fv-mscale .hal-fvpin.is-pinned #hal-wp-fv .hero.is-scrub { height: auto; }
  html.hal-fv-mscale .hal-fvpin.is-pinned #hal-wp-fv .hero.is-scrub .hero__stage { position: relative; top: auto; }

  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__canvas {
    --u: calc(1440px * var(--s) / 390);          /* 1px of a 390px screen */
    --cw: calc(1440px * var(--s) * 0.92);        /* the copy width: the canvas less 4% on each side */
  }
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__canvas .hero__copy { padding-left: 4%; padding-right: 4%; }
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__canvas .hero__eyebrow {
    font-size: min(calc(14 * var(--u)), calc(var(--cw) / 15.9)); white-space: nowrap;
    text-shadow: 0 .0625em .875em rgba(0,0,0,0.65);
  }
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__canvas .hero__title {
    font-size: min(calc(20 * var(--u)), calc(var(--cw) / 18.02)); white-space: nowrap;
    text-shadow: 0 .0333em .1em rgba(0,0,0,0.5), 0 .0333em .4667em rgba(0,0,0,0.7);
  }
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__canvas .hero__lead {
    font-size: min(calc(16 * var(--u)), calc(var(--cw) / 24.2));
    text-shadow: 0 .0357em .1429em rgba(0,0,0,0.8), 0 .0357em .6429em rgba(0,0,0,0.85);
  }
  html.hal-fv-mscale #hal-wp-fv .hero.is-scrub .hero__canvas .hero__lead p { white-space: nowrap; }
}
@supports (height: 100svh) {
  @media (max-width: 767.98px) {
    html.hal-fv-mscale #hal-wp-fv .hero__stage { --fv-band: max(0px, calc((max(100svh, 560px) - var(--fv-hdr) - var(--fv-bar) - 823px * var(--s)) / 6)); }
    html.hal-fv-mscale .hal-fvpin.is-pinned > .hal-fvpin__hold { height: 60svh; }
  }
}