/* OwnerFixR3 FinalOwnerFix2 (2026-10-13): TOP only, loaded after every other TOP stylesheet (hal-bg-scroll, hal-interaction, adopted).
   Sections: §4 OFFICE (OFFICE1: photo panel, white information block; station cards) · §5 pricing button (FlowButton motion) · §9 mobile legal counsel ·
   §10 mobile final message. Each rule is scoped to its section; nothing else on the page is changed. */

/* ---------------------------------------------------------------- §4-A OFFICE photo panel (OFFICE1, 2026-10-13) ---------------------
   Owner 14:32 / 14:41: the OFFICE opening has the same specification as the 「その違和感から、すべては始まっている。」 photo panel
   (.hal-band__single in hal-bg-scroll.css - not changed): the existing consultation-room photo (photos/office_01.webp, the file is not
   edited) is the panel's cover background under the same dark overlay, and only the label, the two-level heading and the one paragraph
   (copy from inc/hal-hub-copy-data.php) are shown on it, light, centred. Same height and spacing (min-height 70svh, padding
   clamp(88px, 9vw, 150px) and the page side padding; 16px sides on phones), the same background behaviour: PC (1024px and up) a cover
   background fixed to the viewport; 1023.98px and below the photo is a viewport-fixed layer clipped to the panel (.hal-mobile-bg-clip /
   .hal-mobile-bg-fixed, the shared rules of hal-bg-scroll.css - no touch handling, the page scrolls normally); with reduced motion or
   without clip-path the photo is a normal scrolling cover background, as in the reference. The separate 2:3 picture frame of
   FinalOwnerFix2 and its extra 35% scroll run are removed. Only #hal-office is targeted. */
.hal-lp.hal-bg-scroll #hal-office.hal-editorial--office { padding-top: 0; }
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  min-height: 70svh;
  padding: clamp(88px, 9vw, 150px) var(--hal-pad);
  box-sizing: border-box;
  /* the same file as --hal-preview-c (hal-bg-scroll.css); written as a path from this stylesheet, because a relative url() kept in a
     custom property is resolved against the stylesheet that uses it (assets/adopted/css/ here) */
  background-image: url('../../../photos/office_01.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(16, 19, 17, .72);
}
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero__head,
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body {
  width: min(100%, 960px);
  max-width: none;
  margin-inline: auto;
  padding: 24px;
  background: transparent;
  box-sizing: border-box;
}
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body { margin-top: 34px; margin-bottom: 0; }
/* PC: the heading stays on one line as before (its two parts are inline on PC); a slightly wider text column than the reference's 960px
   keeps 34px type on one line at 1440px and up. The column is transparent, so only the line breaking differs. */
@media (min-width: 768px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero__head { width: min(100%, 1040px); }
}
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-label,
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-h2,
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-design-heading__line,
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-p { color: #f8f8f5; background: transparent; }
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-design-heading__eyebrow { color: #e3d3b0; }
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body,
.hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body .hal-p { text-align: center; }
@media (max-width: 1023.98px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero { background-attachment: scroll; }
}
@supports (clip-path: inset(0)) {
  @media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    /* the fixed layer's rule in hal-bg-scroll.css uses this variable there, so the shared --hal-preview-c (declared there) resolves */
    .hal-lp.hal-bg-scroll #hal-office .hal-office-hero { --hal-mobile-bg-image: var(--hal-preview-c); background-image: none; }
  }
}
@media (max-width: 767.98px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero { gap: 0; padding-inline: 16px; }
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero__head { padding: 0; margin-block: 0; }
  /* label -> heading spacing as in the reference panel (its heading has no top margin; the label keeps its 18px) */
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-design-heading { margin-top: 0; }
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body { width: 100%; padding: 0; margin: 24px auto 0; }
}
/* under 360px (e.g. 320px) the OFFICE paragraph at 16px / line-height 2 made the panel 12px taller than the reference's 70svh; slightly
   tighter spacing keeps the same height without cutting any text (the copy stays complete; with larger text the panel grows) */
@media (max-width: 359.98px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-design-heading__eyebrow { margin-bottom: 10px; }
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body { margin-top: 20px; }
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero__body .hal-p { font-size: 15px; line-height: 1.8; }
}
/* page zoom / large text on a phone (a CSS width under 300px): the two heading lines may wrap, so no text is cut (the panel grows) */
@media (max-width: 299.98px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-hero .hal-design-heading__line { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- §4-B OFFICE information block -------------------------------------
   Owner 14:41: from the office information (facts list) to the access cards and their note, including the Google map and the space
   after the access, one opaque white (#fff, the 「調査の流れ」 white) full-width block, so the picture (OFFICE photo above, the same
   picture behind the final message below) is interrupted once. The section's own top padding moves below the photo panel. */
.hal-lp.hal-bg-scroll #hal-office.hal-editorial--office,
.hal-lp.hal-bg-scroll #hal-office .hal-office-info,
.hal-lp.hal-bg-scroll #hal-office .hal-officelist,
.hal-lp.hal-bg-scroll #hal-office .hal-access { background: #fff; }
.hal-lp.hal-bg-scroll #hal-office .hal-office-info { position: relative; padding-top: 96px; }
@media (max-width: 1023px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-info { padding-top: 72px; }
}
@media (max-width: 767px) {
  .hal-lp.hal-bg-scroll #hal-office .hal-office-info { padding-top: 56px; }
}

/* ---------------------------------------------------------------- §4-C OFFICE station cards ------------------------------------------
   White card, a clear near-black outline and rounded corners (the look of the Owner's reference 6.45.39; none of its text, price, badge
   or checklist). Content and order unchanged; the 「駅からの詳細案内を見る」 button is the shared ArrowFillButton (arrow-fill.css), at the
   bottom of each card, so the three buttons line up on PC. Mobile: one column, the button as wide as the card. */
.hal-lp.hal-bg-scroll #hal-office .hal-access__list--f2 { align-items: stretch; }
.hal-lp.hal-bg-scroll #hal-office .hal-access__list--f2 .hal-access__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px 16px 16px;
  border: 2px solid #1b1813;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.hal-lp.hal-bg-scroll #hal-office .hal-access__list--f2 .hal-access__cardbody {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.hal-lp.hal-bg-scroll #hal-office .hal-access__list--f2 .hal-access__card > .hal-access__cardbtn { margin-top: auto; }
.hal-lp.hal-bg-scroll #hal-office .hal-access__list--f2 .hal-access__card.is-pending .hal-access__cardcta { margin-top: auto; }

/* ---------------------------------------------------------------- §5 pricing button: FlowButton motion ------------------------------
   Kain Xu's FlowButton (21st.dev @xubohuah/flow-button, MIT; the author's component as published in its preview bundle is kept in the
   delivery's reference folder). Only its motion is used: on hover the arrow on the right leaves to the right, an arrow comes in on the left
   (800ms, cubic-bezier(.34,1.56,.64,1)), the label shifts right by the arrow + gap (800ms ease-out) and a circle grows from the centre over
   the button (800ms, cubic-bezier(.19,1,.22,1)); leaving the button reverses it. Colour, gradient, border, size, corner radius, text,
   underline / brightness on hover and the link stay as they are: the circle uses this button's own border colour rgb(175,64,43); the
   arrows are the button's existing 「↗」 (20px), now the row's ::before (in) and ::after (out) instead of the link's ::after, at the same
   place and gap (the link text stays 「料金モデルと見積条件を見る」). Not used: FlowButton's
   colours, its corner change (100px -> 12px) and its press scale (0.95), so the button's size never changes. Keyboard focus-visible shows
   the same motion; touch shows it while the finger is down (flow-button.js, data-pressed). Decorations ignore the pointer. */
#hal-wp-pricing a.hal-related__major.hal-flowbtn {
  --fb-gap: 12px;
  --fb-arrow: 20px;
  --fb-shift: calc(var(--fb-arrow) + var(--fb-gap));
  --fb-move: 800ms;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#hal-wp-pricing a.hal-related__major.hal-flowbtn::after { content: none; display: none; }
#hal-wp-pricing .hal-flowbtn .hal-flowbtn__circle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 16px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgb(175, 64, 43);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width var(--fb-move) cubic-bezier(.19, 1, .22, 1), opacity var(--fb-move) cubic-bezier(.19, 1, .22, 1);
}
#hal-wp-pricing .hal-flowbtn .hal-flowbtn__row {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--fb-gap);
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
}
#hal-wp-pricing .hal-flowbtn .hal-related__major-key {
  display: inline-block;
  min-width: 0;
  transform: translateX(0);
  transition: transform var(--fb-move) ease-out;
}
#hal-wp-pricing .hal-flowbtn .hal-flowbtn__row::before,
#hal-wp-pricing .hal-flowbtn .hal-flowbtn__row::after {
  content: '\2197';
  display: block;
  flex: 0 0 var(--fb-arrow);
  width: var(--fb-arrow);
  font-size: 20px;
  line-height: 32px;
  text-align: center;
  color: inherit;
  text-decoration: none;
  transition: transform var(--fb-move) cubic-bezier(.34, 1.56, .64, 1);
}
#hal-wp-pricing .hal-flowbtn .hal-flowbtn__row::before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(calc(-1 * var(--fb-shift) - 8px), -50%);
}
#hal-wp-pricing .hal-flowbtn .hal-flowbtn__row::after { transform: translateX(0); }
#hal-wp-pricing a.hal-related__major.hal-flowbtn:focus-visible .hal-flowbtn__circle,
#hal-wp-pricing a.hal-related__major.hal-flowbtn[data-pressed="true"] .hal-flowbtn__circle { width: 120%; opacity: 1; }
#hal-wp-pricing a.hal-related__major.hal-flowbtn:focus-visible .hal-related__major-key,
#hal-wp-pricing a.hal-related__major.hal-flowbtn[data-pressed="true"] .hal-related__major-key { transform: translateX(var(--fb-shift)); }
#hal-wp-pricing a.hal-related__major.hal-flowbtn:focus-visible .hal-flowbtn__row::before,
#hal-wp-pricing a.hal-related__major.hal-flowbtn[data-pressed="true"] .hal-flowbtn__row::before { transform: translate(0, -50%); }
#hal-wp-pricing a.hal-related__major.hal-flowbtn:focus-visible .hal-flowbtn__row::after,
#hal-wp-pricing a.hal-related__major.hal-flowbtn[data-pressed="true"] .hal-flowbtn__row::after { transform: translateX(calc(var(--fb-shift) + 8px)); }
@media (hover: hover) {
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:hover .hal-flowbtn__circle { width: 120%; opacity: 1; }
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:hover .hal-related__major-key { transform: translateX(var(--fb-shift)); }
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:hover .hal-flowbtn__row::before { transform: translate(0, -50%); }
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:hover .hal-flowbtn__row::after { transform: translateX(calc(var(--fb-shift) + 8px)); }
}
@media (max-width: 767px) {
  #hal-wp-pricing a.hal-related__major.hal-flowbtn { --fb-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  /* the link works as before; the movement is left out (the circle appears without growing, label and arrows stay) */
  #hal-wp-pricing .hal-flowbtn .hal-flowbtn__circle,
  #hal-wp-pricing .hal-flowbtn .hal-related__major-key,
  #hal-wp-pricing .hal-flowbtn .hal-flowbtn__row::before,
  #hal-wp-pricing .hal-flowbtn .hal-flowbtn__row::after { transition: none; }
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:is(:hover, :focus-visible, [data-pressed="true"]) .hal-related__major-key,
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:is(:hover, :focus-visible, [data-pressed="true"]) .hal-flowbtn__row::after { transform: none; }
  #hal-wp-pricing a.hal-related__major.hal-flowbtn:is(:hover, :focus-visible, [data-pressed="true"]) .hal-flowbtn__row::before { transform: translate(calc(-1 * var(--fb-shift) - 8px), -50%); }
}

/* ---------------------------------------------------------------- §9 mobile legal counsel (TOP) -------------------------------------
   Heading: the existing two lines 「確かな事実を、探偵が。／最善の決着を、弁護士が。」 (one span per line, wording and line break
   unchanged), weight 600 -> 700 (Zen Old Mincho Bold, loaded). Body: 16px -> 14px (about 90%, the 14px mobile body size the site already
   uses, e.g. the Minato text), line height ratio 2 kept, and centred: both the block and the paragraph lines (until now the block was
   centred but its lines were left-aligned by hal-bg-scroll.css / hal-interaction.css, which these rules override). PC is unchanged. */
@media (max-width: 767.98px) {
  .hal-lp.hal-bg-scroll #hal-legal-counsel.lc-top .lc-title { font-weight: 700; }
  .hal-lp.hal-bg-scroll #hal-legal-counsel.lc-top .lc-prose-block { width: 100%; max-width: 100%; margin-inline: auto; text-align: center; }
  .hal-lp.hal-bg-scroll #hal-legal-counsel.lc-top .lc-prose-block .lc-p { font-size: 14px; line-height: 2; text-align: center; }
}

/* ---------------------------------------------------------------- §10 mobile final message -----------------------------------------
   「ここを訪れたことは、…ここに置きにいらしてください。」: weight 500 -> 700 (Zen Old Mincho Bold, the same font), including the
   emphasised words. Size, centring, approved line breaks, photo and order unchanged; no text stroke. PC unchanged. */
@media (max-width: 767.98px) {
  .hal-lp.hal-bg-scroll .hal-final .hal-final__title,
  .hal-lp.hal-bg-scroll .hal-final .hal-final__title .hal-final__title-em { font-weight: 700; }
}

/* ---------------------------------------------------------------- §6 TOP after the form moved -----------------------------------------
   The final message stays on the TOP in its section (it inherits the section's type as before). Without the form above it, the section's
   top padding / divider and the message's top margin would leave an empty band, so they are removed for this section only. */
.hal-lp .hal-form-section.hal-form-section--final-only { padding-top: 0; border-top: 0; }
.hal-lp .hal-form-section.hal-form-section--final-only > .hal-final { margin-top: 0; }