/* ============================================================
   pricequery page — top matches Wix reference (w1)
   All rules are scoped under .pricequery-page so other pages
   are not affected.
   ============================================================ */

/* Header: match w1 — logo/nav zone on top, navy strip below it,
   white bar at the bottom. w1 header is 151px split as
   light zone 76px + navy strip 24px + white bar 51px. */
.pricequery-page .site-header {
  display: flex;
  flex-direction: column;
  height: var(--header-height);
}
.pricequery-page .header-main {
  order: 1;
  width: 100%;
  max-width: 1440px;
}
.pricequery-page .header-strip {
  order: 2;
  width: 100%;
}

@media (min-width: 901px) {
  .pricequery-page .header-main { height: 76px; }
  .pricequery-page .header-strip { height: 24px; }
}

/* Hero title: navy box with white "無料相談", placed left-of-center
   and ~39% down the hero per w1 (box top y391/487 in w1 render). */
.pricequery-page .page-hero h1 {
  position: absolute;
  top: 39%;
  left: 24.2%;
  display: inline-block;
  background: var(--c-topbar);
  color: #fff;
  padding: 0 10px;
  border-radius: 2px;
  text-align: center;
  white-space: nowrap;
}

/* ---------- Responsive: center the title box and shrink text ---------- */
@media (max-width: 768px) {
  .pricequery-page .page-hero h1 {
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .pricequery-page .page-hero h1 {
    top: 38%;
    font-size: 34px;
  }
}