@charset "UTF-8";
/* =============================================
   FOUNDATION — Reset & Base
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Contain the off-canvas mobile drawer (parked off the right edge with
     transform) so it can't create horizontal scroll on small screens.
     `clip` (not `hidden`) avoids turning the root into a scroll container,
     so it can't force overflow-y:auto or break the sticky header. */
  overflow-x: clip;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.7;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* Only apply hover on real pointer devices — on touch, :hover sticks after a
   tap and leaves the element in its hover state (e.g. the floating CTA staying
   semi-transparent after you tap it). */
@media (hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  /* kill the blue tap-highlight flash on touch devices (e.g. FAQ accordions) */
  -webkit-tap-highlight-color: transparent;
}

/* =============================================
   FOUNDATION — Base
   ============================================= */
.img-fade img {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.img-fade img.is-loaded {
  opacity: 1;
}

.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-reveal);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.js-reveal[data-delay="1"] {
  transition-delay: 0.07s;
}
.js-reveal[data-delay="2"] {
  transition-delay: 0.14s;
}
.js-reveal[data-delay="3"] {
  transition-delay: 0.21s;
}
.js-reveal[data-delay="4"] {
  transition-delay: 0.28s;
}
.js-reveal[data-delay="5"] {
  transition-delay: 0.35s;
}
.js-reveal[data-delay="6"] {
  transition-delay: 0.42s;
}
.js-reveal[data-delay="7"] {
  transition-delay: 0.49s;
}
.js-reveal[data-delay="8"] {
  transition-delay: 0.56s;
}
.js-reveal--ltr {
  transform: scale(0.96);
  transition: opacity 0.38s cubic-bezier(0, 0, 0.2, 1), transform 0.38s cubic-bezier(0, 0, 0.2, 1);
}
.js-reveal--ltr.is-visible {
  transform: scale(1);
}
.js-reveal--ltr[data-delay="1"] {
  transition-delay: 0.15s;
}
.js-reveal--ltr[data-delay="2"] {
  transition-delay: 0.3s;
}
.js-reveal--ltr[data-delay="3"] {
  transition-delay: 0.45s;
}
.js-reveal--ltr[data-delay="4"] {
  transition-delay: 0.6s;
}
.js-reveal--ltr[data-delay="5"] {
  transition-delay: 0.75s;
}
.js-reveal--ltr[data-delay="6"] {
  transition-delay: 0.9s;
}
.js-reveal--ltr[data-delay="7"] {
  transition-delay: 1.05s;
}
.js-reveal--ltr[data-delay="8"] {
  transition-delay: 1.2s;
}

/* =============================================
   UTILITIES (u-)
   ============================================= */
.u-line-clamp-1 {
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-line-clamp-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-line-clamp-3 {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-pc-only {
  display: block;
}

.u-sp-only {
  display: none;
}

/* Line breaks that only render at one size: .sp = phone, .pc = desktop */
br.sp {
  display: none;
}

@media (max-width: 768px) {
  .u-pc-only {
    display: none;
  }
  .u-sp-only {
    display: block;
  }
  br.sp {
    display: inline;
  }
  br.pc {
    display: none;
  }
}
/* =============================================
   LAYOUT (l-)
   ============================================= */
/* Wrapper */
.l-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Containers */
.l-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--space-inline-pc);
}

.l-main {
  flex: 1;
}

/* =============================================
   WAVE BACKGROUND WRAPPER (l-wave-bg)
   ============================================= */
.l-wave-bg {
  background-image: url("../images/wave-bg.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: var(--color-white);
  overflow-x: hidden;
  max-width: 1980px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .l-container {
    padding-inline: var(--space-inline-sp);
  }
  /* Pulled up to sit under the green search-bg;
     padding-top cancels the shift so content stays in place */
  .l-wave-bg {
    margin-top: -615px;
    padding-top: 555px;
    background-size: 950% auto;
  }
}
/* ---- Header (v3) ---- */
.l-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.l-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.l-header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 84px;
  padding-inline-start: var(--space-inline-pc);
  padding-inline-end: max(20px, (100vw - 1400px) / 2);
}

.l-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.l-header__logo img {
  height: 48px;
  width: auto;
}

/* Sriracha branch label beside the logo (design: 「シラチャ支店 / Sriracha branch」) */
.l-header__branch {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--color-primary);
  line-height: 1.3;
  white-space: nowrap;
}

.l-header__branch-ja {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.l-header__branch-en {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

@media (max-width: 1260px) {
  .l-header__branch-en {
    display: none;
  }
}
@media (max-width: 768px) {
  .l-header__branch {
    display: none;
  }
}
/* ---- Nav ---- */
.l-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.l-header__nav-group {
  position: relative;
}

.l-header__nav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.l-header__nav-item:hover,
.l-header__nav-item.is-active {
  color: var(--color-primary);
  background: rgba(6, 51, 28, 0.06);
}

.l-header__caret {
  color: currentColor;
  transition: transform 0.2s ease;
}

.l-header__nav-group:hover .l-header__caret {
  transform: rotate(180deg);
}

/* ---- Dropdown ---- */
.l-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1100;
}

.l-header__nav-group:hover .l-header__dropdown,
.l-header__nav-group:focus-within .l-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

.l-header__dropdown::before {
  /* hover bridge so the menu doesn't close in the gap */
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
}

.l-header__dropdown-item {
  display: block;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.l-header__dropdown-item:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- Actions (phone + buttons) ---- */
.l-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.l-header__phone-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.l-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
}

.l-header__phone svg {
  stroke: var(--color-primary);
}

.l-header__phone-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.l-header__phone-note {
  font-size: 11.5px;
  color: var(--color-text);
  margin-top: 2px;
  font-weight: 500;
}

.l-header__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  color: var(--color-white);
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.l-header__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.l-header__btn--line {
  background: var(--color-white);
  border: 2px solid var(--color-line);
  color: var(--color-line); /* tints the LINE icon (currentColor) + label */
  padding: 5px 10px;
  gap: 8px;
}

/* two-line label: LINE からの / お問い合わせ — black text, icon stays green */
.l-header__btn-multiline {
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  color: var(--color-text);
}

.l-header__btn--contact {
  background: var(--color-primary);
}

/* SP contact icon buttons (mobile only) */
.l-header__sp-actions {
  display: none;
}

.l-header__sp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ≥44px tap target (Apple/Google guidance) */
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--color-white);
  flex-shrink: 0;
  transition: filter 0.2s ease;
}
.l-header__sp-btn:hover {
  filter: brightness(1.1);
}

.l-header__sp-btn--phone {
  background: var(--color-primary);
}

.l-header__sp-btn--line {
  background: var(--color-primary);
}

.l-header__sp-btn--mail {
  background: var(--color-accent);
}

/* Hamburger — 34×20 bars inside a ≥44px padded tap target (content-box) */
.l-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: content-box;
  flex-shrink: 0; /* never let the hamburger be squeezed/pushed off-screen */
  width: 34px;
  height: 20px;
  padding: 12px 2px;
}

.l-header__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.l-header__hamburger.is-active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.l-header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.l-header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ---- Mobile Drawer ---- */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
  width: min(320px, 85vw);
  height: 100dvh;
  background: var(--color-white);
  /* The panel always sits INSIDE the viewport and is revealed with clip-path.
     Parking it off-screen with translateX(100%) let phones pan the page
     sideways (a fixed element past the right edge widens the scrollable area
     even when visibility:hidden, and overflow-x:clip doesn't contain it). */
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
  overflow-y: auto;
}

.l-drawer.is-open {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.l-drawer__inner {
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.l-drawer__close {
  display: flex;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  position: relative;
}

.l-drawer__close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.l-drawer__close span:nth-child(1) {
  transform: rotate(45deg);
}

.l-drawer__close span:nth-child(2) {
  transform: rotate(-45deg);
}

.l-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.l-drawer__nav-item {
  display: block;
  padding: 16px 4px;
  font-size: var(--fs-md);
  font-weight: 500;
  border-bottom: 1px solid #eee;
  color: var(--color-text);
}

.l-drawer__actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.l-drawer__logo {
  display: block;
}
.l-drawer__logo img {
  width: 100%;
  height: auto;
}

/* Overlay */
.l-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.l-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ---- Responsive ---- */
/* 1025–1260px: the full text actions don't fit, so keep the whole phone number
   (desktop style) but turn LINE + contact into compact square icon buttons —
   same look as the mobile sp-action icons (LINE = green, contact = gold). The
   nav stays visible, just slightly tightened. */
@media (min-width: 1024.02px) and (max-width: 1260px) {
  .l-header__nav-item {
    padding: 10px 10px;
    font-size: 16px;
  }
  .l-header__btn span {
    display: none;
  }
  .l-header__btn {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 8px;
    justify-content: center;
  }
  .l-header__btn--line {
    background: var(--color-primary);
    border: none;
    color: var(--color-white); /* white LINE icon (currentColor) */
  }
  .l-header__btn--contact {
    background: var(--color-accent);
  }
  .l-header__btn--line svg,
  .l-header__btn--contact svg {
    width: 22px;
    height: 22px;
  }
}
/* ≤1024px: the dense JP nav crowds, so the hamburger drawer takes over the
   whole tablet band (it already holds the full menu). */
@media (max-width: 1024px) {
  .l-header__inner {
    min-height: 64px;
    padding-inline-start: var(--space-inline-sp);
    padding-inline-end: var(--space-inline-sp);
    justify-content: space-between;
    gap: 4px;
  }
  .l-header__nav {
    display: none;
  }
  .l-header__actions {
    display: none;
  }
  .l-header__sp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 6px;
  }
  .l-header__hamburger {
    display: flex;
  }
  .l-header__logo img {
    height: 36px;
  }
}
/* The mobile row is a chain of fixed widths — logo 155 + 3×44px buttons + gaps +
   38px hamburger + 2×16px padding needs 383px. On a 375 or 360px phone the
   hamburger was therefore sliced off the right edge, and since the root is
   `overflow-x: clip` (_reset.scss) that overflow can't even be scrolled to: it
   sets a hard 371px floor on the document, so EVERY full-width element below the
   header renders wider than the screen with its right edge permanently cut off.
   These two tiers are what the 'xs'/'xxs' breakpoints were defined for.
   Tap targets stay ≥44px — the logo and the gaps give way instead. */
@media (max-width: 400px) {
  .l-header__logo img {
    height: 28px;
  }
  .l-header__sp-actions {
    gap: 5px;
    margin-right: 0;
  }
}
/* ≤340px even that doesn't fit, so drop the mail shortcut — お問い合わせ is in
   the drawer, whereas phone and LINE have no other entry point on this screen. */
@media (max-width: 340px) {
  .l-header__sp-btn--mail {
    display: none;
  }
}
/* ---- Footer (v3) ---- */
.l-footer {
  background: var(--color-primary); /* "green" #06331c */
  color: var(--color-white);
}

/* CTA row */
.l-footer__cta {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-inline: var(--space-inline-pc);
}

.l-footer__cta-inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.l-footer__cta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 20px;
  color: var(--color-white);
  position: relative;
  transition: background 0.2s ease;
}

.l-footer__cta-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.l-footer__cta-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.l-footer__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}

.l-footer__cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.l-footer__cta-label {
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.l-footer__cta-main {
  font-size: 16px;
  font-weight: 700;
}

.l-footer__cta-sub {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Body */
.l-footer__body {
  padding: 44px var(--space-inline-pc);
}

.l-footer__body-inner {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.l-footer__logo img {
  width: 290px;
  height: auto;
  /* logo art is dark-on-light; lift it onto the dark footer */
  background: var(--color-white);
  border-radius: 8px;
}

.l-footer__address {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.85;
}

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 40px;
}

.l-footer__nav-item {
  font-size: 14px;
  color: var(--color-white);
  opacity: 0.9;
  position: relative;
  transition: opacity 0.2s ease;
}

.l-footer__nav-item::before {
  content: "›";
  margin-right: 8px;
  color: var(--color-accent);
}

.l-footer__nav-item:hover {
  opacity: 1;
  color: var(--color-accent);
}

/* Bottom */
.l-footer__bottom {
  background: var(--color-dark-green); /* "dark green" #042614 */
  padding: 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.l-footer__policy {
  font-size: 12px;
  color: var(--color-white);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.l-footer__policy:hover {
  opacity: 1;
  color: var(--color-accent);
}

.l-footer__copyright {
  font-size: 12px;
  opacity: 0.75;
}

/* Keep all 5 CTAs on one row down to `tab`: stack icon over text so each
   narrower column still fits its label without wrapping */
@media (max-width: 1260px) {
  .l-footer__cta-item {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 24px 10px;
    text-align: center;
  }
}
@media (max-width: 1024px) {
  .l-footer__cta-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-footer__cta-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 30px 20px;
    text-align: left;
  }
  .l-footer__cta-item:nth-child(odd)::before {
    display: none;
  }
  .l-footer__cta-item:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
@media (max-width: 768px) {
  .l-footer__body-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }
  /* logo img is display:block (reset) — center it instead of leaving right-side space */
  .l-footer__logo {
    display: block;
  }
  .l-footer__logo img {
    margin-inline: auto;
  }
  .l-footer__nav {
    grid-template-columns: repeat(2, auto);
    gap: 12px 32px;
    text-align: left;
    justify-content: center;
  }
  /* On pages that render the fixed mobile search button (.p-floating-cta is
     output right after .l-wrapper), reserve space under the copyright so the
     fixed bar doesn't cover it. Pages without the button get no extra space. */
  .l-wrapper:has(+ .p-floating-cta) .l-footer__bottom {
    padding-bottom: calc(var(--header-height) + 28px);
  }
}
@media (max-width: 600px) {
  .l-footer__cta-inner {
    grid-template-columns: 1fr;
  }
  .l-footer__cta-item::before {
    display: none !important;
  }
  .l-footer__cta-item:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}
/* =============================================
   COMPONENTS (c-)
   ============================================= */
/* CTA Button */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 68px 14px;
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 0;
  transition: box-shadow 0.25s ease, transform 0.15s ease, background 0.2s ease;
  text-align: center;
}

.c-btn:hover {
  background: linear-gradient(135deg, var(--color-green-dark) 0%, #0d8a22 100%);
  box-shadow: var(--shadow-glow-green);
  opacity: 1;
  transform: translateY(-2px);
}

/* Card base (leaf border) */
.c-card {
  border-radius: var(--radius-leaf);
  border: 3px solid var(--color-green);
  overflow: hidden;
  background: var(--color-white);
  transition: box-shadow 0.25s ease;
}

.c-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* =============================================
   SUPPORT CTA (c-support-cta)
   Reusable サポート CTA — cityscape photo under a light dark scrim.
   Based on the /public_transportation treatment; shared by the
   お役立ち情報 guide pages via template-parts/support-cta.php.
   ============================================= */
.c-support-cta {
  position: relative;
  padding: 64px var(--space-inline-pc);
  /* dark fallback matching the scrim so any subpixel gap at the cover-sized
     background's edge stays dark, not the page's white */
  background-color: #2a3330;
  /* the photo reads through — just enough darkening to keep the white copy
     and the buttons legible */
  background-image: linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), var(--support-cta-bg);
  background-size: cover;
  background-position: center;
}

.c-support-cta__inner {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  color: var(--color-white);
}

/* the scrim is light, so the copy carries its own contrast (same treatment as
   the page heroes) rather than leaning on a heavier overlay */
.c-support-cta__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.c-support-cta__sub {
  margin: 0 0 32px;
  font-size: 16px;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.c-support-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.c-support-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.c-support-cta__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.c-support-cta__btn-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.c-support-cta__btn-icon svg {
  width: 100%;
  height: 100%;
}

.c-support-cta__btn--search {
  background: var(--color-accent);
}

.c-support-cta__btn--line {
  background: var(--color-line);
}

.c-support-cta__btn--form {
  background: #2f3a33;
  border-color: var(--color-white);
}

@media (max-width: 768px) {
  .c-support-cta__sub {
    font-size: 16px;
  }
  .c-support-cta__btn {
    width: 100%;
    min-width: 0;
  }
}
/* =============================================
   BLOG BUTTON (c-blog-btn) — the blog theme's c-btn, renamed so main's c-btn is untouched
   ============================================= */
.c-blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 44px;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c-blog-btn--outline {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.c-blog-btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.c-blog-btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
}
.c-blog-btn--primary:hover {
  background: var(--color-primary-light);
}

@media (max-width: 768px) {
  .c-blog-btn {
    padding: 15px 28px;
    font-size: var(--fs-sm);
  }
}
/* =============================================
   POST CARD (c-post-card)
   ============================================= */
.c-post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.c-post-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 16/10;
  background: var(--color-bg-light);
}
.c-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-post-card__media {
  /* Hover veil — white at low opacity, so the photo lifts rather than dims.
     Faded in rather than toggled so the card settles back quietly. */
}
.c-post-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.c-post-card__link:hover .c-post-card__media::after,
.c-post-card__link:focus-visible .c-post-card__media::after {
  opacity: 0.25;
}

.c-post-card__body {
  padding-top: 16px;
}

.c-post-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.c-post-card__date {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}

.c-post-card__cat {
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  white-space: nowrap;
}

.c-post-card__title {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-primary);
  transition: color 0.2s ease;
  /* Long titles stop at 5 lines with an ellipsis. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.c-post-card__link:hover .c-post-card__title {
  color: var(--color-text-light);
}

/* =============================================
   SEARCH FORM (c-search-form)
   ============================================= */
.c-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.c-search-form__input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-md);
}
.c-search-form__input:focus {
  outline: none;
}
.c-search-form__input::placeholder {
  color: var(--color-text-light);
}

.c-search-form__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-primary);
}

/* =============================================
   PAGINATION (c-pagination) — wraps paginate_links() output
   ============================================= */
/* paginate_links( 'type' => 'list' ) owns the markup: ul.page-numbers > li >
   a|span.page-numbers. The list itself carries `page-numbers` too, so the box
   styling below is scoped to the items inside an <li>. */
.c-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-pagination li .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-white);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c-pagination li a.page-numbers:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-primary);
}

.c-pagination li .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
}

.c-pagination li .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

@media (max-width: 768px) {
  .c-pagination li .page-numbers {
    min-width: 38px;
    height: 38px;
    padding-inline: 8px;
  }
}
/* =====================================================================
   v3 Top Page  (.p-top-*)
   ===================================================================== */
/* ---------------------------------------------------------------------
   Preloader (global) — green spinner over a white screen until the page's
   hero/banner image is ready. Markup + reveal logic live in header.php.
   (Defined here but compiled into the global main.css.)
   --------------------------------------------------------------------- */
.p-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.p-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.p-preloader__spinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(6, 51, 28, 0.16);
  border-top-color: var(--color-primary);
  animation: p-preloader-spin 0.8s linear infinite;
}

@keyframes p-preloader-spin {
  to {
    transform: rotate(360deg);
  }
}
.p-top-section-title {
  font-size: clamp(22px, 15.143px + 0.893vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
  padding-left: 16px;
  margin-bottom: 24px;
}

.p-top-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 3px;
  background: var(--color-accent);
}

.p-top-section-title--center {
  text-align: center;
  padding-left: 0;
}

.p-top-section-title--center::before {
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: -12px;
  width: 48px;
  height: 4px;
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.p-top-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
}

.p-top-hero__overlay {
  display: none;
}

.p-top-hero__inner {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  padding: 64px var(--space-inline-sp) 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.p-top-hero__content {
  flex: 1;
  padding-top: 12px;
}

.p-top-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.429px + 2.679vw, 42px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transform: scaleY(1.12);
  transform-origin: left top;
  display: inline-block;
  margin-bottom: 8px;
}

.p-top-hero__sub {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* Badges */
.p-top-hero__badges {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}

.p-top-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-top-badge__img {
  width: 250px;
  height: auto;
}

/* Search card */
.p-top-search {
  width: 360px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  padding: 22px;
  color: var(--color-text);
}

.p-top-search__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}

.p-top-search__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-top-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--color-white);
}

.p-top-search__field-icon {
  display: flex;
  color: var(--color-primary);
  flex-shrink: 0;
}

.p-top-search__field .s-search__singleselect,
.p-top-search__field .s-search__multiselect {
  flex: 1;
  position: relative;
}

.p-top-search__field .s-search__ms-trigger {
  width: 100%;
  border: none;
  background: none;
  padding: 13px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.p-top-search__field .s-search__ms-arrow {
  color: var(--color-text-light);
}

/* Active state covers the whole field (icon + select) when the dropdown is open */
.p-top-search__field:has(.s-search__ms-trigger[aria-expanded=true]) {
  background: #f0fbf2;
  border-color: var(--color-primary);
}

/* Kill the trigger's own partial green (background + focus ring) so only the
   full-field cover shows */
.p-top-search__field .s-search__ms-trigger,
.p-top-search__field .s-search__ms-trigger:focus,
.p-top-search__field .s-search__ms-trigger[aria-expanded=true] {
  background: transparent;
  box-shadow: none;
}

.p-top-search__field .s-search__ms-trigger[aria-expanded=true] .s-search__ms-arrow {
  color: var(--color-primary);
}

/* Dropdown panel + options — dark-green theme (scoped to the hero) */
.p-top-search .s-search__ms-panel {
  border-color: var(--color-primary);
  scrollbar-color: var(--color-primary) #f0f0f0;
}

.p-top-search .s-search__ms-panel::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}

/* Show the full エリア list at once — no inner scroll. Scoped to the multiselect
   so the budget single-select keeps its scroll. */
.p-top-search .s-search__multiselect .s-search__ms-panel {
  max-height: none;
  overflow-y: visible;
}

.p-top-search .s-search__ss-option:hover {
  background: rgba(6, 51, 28, 0.08);
}

.p-top-search .s-search__ss-option.is-selected {
  color: var(--color-primary);
  background: rgba(6, 51, 28, 0.1);
}

.p-top-search .s-search__ss-option.is-selected::after {
  color: var(--color-primary);
}

.p-top-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  transition: filter 0.2s ease;
}

.p-top-search__btn:hover {
  filter: brightness(1.12);
}

.p-top-search__detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: underline;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------
   FEATURES (4-up)
   --------------------------------------------------------------------- */
.p-top-features {
  max-width: 1320px;
  margin-inline: auto;
  padding: 40px var(--space-inline-sp) 0;
}

.p-top-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-bottom: 36px;
  border-bottom: 1px solid #e0e0e0;
}

.p-top-feature {
  text-align: center;
  padding: 12px 24px;
  position: relative;
}

.p-top-feature:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background: #e0e0e0;
}

.p-top-feature__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.p-top-feature__icon svg {
  width: 100%;
  height: 100%;
}

.p-top-feature__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.p-top-feature__desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* ---------------------------------------------------------------------
   PROPERTIES (carousel)
   --------------------------------------------------------------------- */
.p-top-props {
  max-width: 1320px;
  margin-inline: auto;
  padding: 36px var(--space-inline-sp) 36px;
}

.p-top-props__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}

.p-top-props__head .p-top-section-title {
  margin-bottom: 0;
  padding-left: 0;
  font-family: var(--font-heading);
  font-weight: 900;
}

.p-top-props__head .p-top-section-title::before {
  display: none;
}

.p-top-props__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
}

.p-top-props__all:hover {
  color: var(--color-accent);
}

.p-top-props__carousel {
  position: relative;
}

.p-top-props__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to compute to auto, clipping the
     card hover lift + shadow. Pad the scroll viewport and cancel the
     padding with a negative margin so spacing/arrow alignment is unchanged. */
  padding-block: 8px 24px;
  margin-block: -8px -24px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}

.p-top-props__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.p-top-props__track::-webkit-scrollbar {
  display: none;
}

.p-top-props__item {
  flex: 0 0 256px;
  width: 256px;
  min-width: 0;
  scroll-snap-align: start;
}

.p-top-props__arrow {
  position: absolute;
  top: 150px; /* nudged below the card-image center */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
}

.p-top-props__arrow--prev {
  left: -22px;
}

.p-top-props__arrow--next {
  right: -22px;
}

.p-top-props__arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------
   Shared property card (.c-prop-card)
   --------------------------------------------------------------------- */
.c-prop-card {
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  /* Fixed height so every card is identical. Tall enough to fit a 2-line name
     plus 2 rows of facility pills above the price; station/size are single-line
     and the pills are capped to 2 rows (below) so content can never exceed this
     and clip the price. */
  height: 440px;
  width: 100%;
  display: flex;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.c-prop-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.c-prop-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.c-prop-card__img-wrap {
  position: relative;
  height: 188px;
  flex-shrink: 0;
  overflow: hidden;
  background: #eee;
}

.c-prop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-prop-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--color-bg-light);
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.c-prop-card__type {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-white);
  border-radius: 4px;
  background: rgba(6, 51, 28, 0.83);
}

.c-prop-card__body {
  padding: 14px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.c-prop-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Station & size: single line each (ellipsis) so every card's content height
   is constant — that's what lets the fixed card height fit without clipping. */
.c-prop-card__station {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-prop-card__size {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom group: facility pills sit in the empty space directly above the price.
   A search filtered by 間取り prints one price row per matching room type, so the
   foot is a flex column in which only the pills may shrink — extra price rows eat
   into the pill rows instead of overflowing the card's fixed height. */
.c-prop-card__foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.c-prop-card__facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  /* Cap at 2 rows so the card height stays deterministic */
  max-height: 58px;
  overflow: hidden;
  /* …and give those rows up first when the price list needs the room */
  flex: 0 1 auto;
  min-height: 0;
}

.c-prop-card__facility {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-primary);
  background: var(--color-bg-light);
  white-space: nowrap;
  /* Facility this property does NOT have — grayed out */
}
.c-prop-card__facility--off {
  color: #b6b6b6;
  font-weight: 400;
  background: var(--color-bg-light);
  border: 1px solid rgba(6, 51, 28, 0.28);
}

/* Price line. A 間取り search prints one entry per matching room type, laid out
   inline and wrapping only when the card is too narrow to hold them side by side.
   Never shrinks — the pills above give up their rows instead. */
.c-prop-card__price {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  /* center, not baseline: the badge's own text baseline sits lower than the much
     larger price number's, which left it looking dropped against the figure */
  align-items: center;
  gap: 2px 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
  /* Badged per-room-type quotes: one size down, however many share the line, so a
     single 3 Bed result reads the same as a 2 Bed / 3 Bed pair. Searches with no
     間取り show the plain building minimum and keep the large size above. */
}
.c-prop-card__price--by-layout {
  font-size: 14px;
}

.c-prop-card__price-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* never split a room type from its rent */
  /* Separator sits with the entry it follows, so a wrap reads "… THB /" + newline */
}
.c-prop-card__price-item:not(:last-child)::after {
  content: "/";
  font-weight: 400;
  color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* Room-type badge shown only on search results, where each price is the rent of a
   間取り the visitor searched for rather than the building minimum (see
   template-parts/prop-card.php). */
.c-prop-card__price-layout {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Symmetric block padding + a unitless line-height keeps the label optically
     centred in the pill, so the pill centres cleanly against the price. */
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--color-primary);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   BLOG / りぶナビ
   --------------------------------------------------------------------- */
.p-top-blog {
  max-width: 1320px;
  margin-inline: auto;
  padding: 36px var(--space-inline-sp);
}

.p-top-blog__inner {
  margin-inline: auto;
  background: var(--color-bg-light);
  border-radius: 16px;
  padding: 30px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: stretch;
}

.p-top-blog__panel {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-top-blog__panel-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 14.571px + 1.488vw, 36px); /* 「シラチャブログ」 is longer than the main site's 「りぶナビ」 */
  white-space: nowrap;
  font-weight: 900;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 18px;
}

.p-top-blog__panel-tag {
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 3px 8px;
  border-radius: 4px;
}

.p-top-blog__panel-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 16px 0 24px;
  font-weight: 550;
}

.p-top-blog__panel-btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 24px;
  border-radius: 6px;
  transition: filter 0.2s ease;
}

.p-top-blog__panel-btn:hover {
  filter: brightness(1.2);
}

.p-top-blog__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.p-top-blog__card {
  background: var(--color-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.p-top-blog__card:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.p-top-blog__card-img-wrap {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #eee;
}

.p-top-blog__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-blog__card-link {
  display: block;
}

.p-top-blog__card-date {
  display: block;
  padding: 0 14px 14px;
  margin-top: -8px;
  font-size: 13px;
  color: var(--color-text-light, #888);
}

.p-top-blog__card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  /* NOTE: no padding-bottom — with -webkit-line-clamp, `overflow: hidden`
     clips at the PADDING edge, so any bottom padding lets the next line
     bleed through after the ellipsis. Use margin for the bottom gap. */
  padding: 12px 14px 0;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* narrow 3-col cards: break long unbroken tokens so text can't overflow */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------------------
   CHOSEN  ([title] | item | item | item | item)
   --------------------------------------------------------------------- */
.p-top-chosen__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 0 var(--space-inline-sp);
}

.p-top-chosen__row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #e0e0e0;
  padding: 36px 0;
}

.p-top-chosen__heading {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-heading);
  font-size: clamp(24px, 14.857px + 1.19vw, 32px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-primary);
  padding-right: 28px;
}

.p-top-chosen__item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 20px;
  position: relative;
}

.p-top-chosen__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 52px;
  background: #e0e0e0;
}

.p-top-chosen__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-top: 16px;
  border-radius: 50%;
  background: rgba(6, 51, 28, 0.06);
  color: var(--color-primary);
}

.p-top-chosen__icon svg {
  width: 24px;
  height: 24px;
}

.p-top-chosen__text {
  min-width: 0;
}

.p-top-chosen__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
}

.p-top-chosen__sub {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   ACCESS (two cards)
   --------------------------------------------------------------------- */
.p-top-access {
  background: none;
}

.p-top-access__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 28px var(--space-inline-sp) 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Sriracha branch — full banner image only, shown uncropped.
   Its natural height (image at full card width) drives the row; the map
   card stretches to match via the grid's align-items: stretch. */
.p-top-access__banner {
  display: block;
  overflow: hidden; /* clip the image to the rounded corners */
  background: var(--color-white);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.p-top-access__banner:hover {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.p-top-access__banner img {
  display: block;
  width: 100%;
  height: auto; /* natural height of the Sriracha image drives the row;
   the map / promo cards stretch to match it */
}

.p-top-access__banner--honten img {
  /* same proportions as the main site's Sriracha banner (765×240), so the
     access row — and the map / promo cards stretched to it — keep main's size.
     The artwork is 712×240; crop only the skyline side, never the title. */
  aspect-ratio: 765/240;
  height: auto;
  object-fit: cover;
  object-position: left center;
}

/* Map-search card — horizontal: image left, title + text right */
.p-top-access__card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  padding: 10px;
  background: var(--color-white);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.p-top-access__card:hover {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.p-top-access__img {
  flex: none;
  width: 34%;
  max-width: 150px;
  align-self: stretch; /* fill the card height (matched to the banner) */
  min-height: 0;
  object-fit: cover;
  border-radius: 8px;
}

.p-top-access__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 4px;
}

.p-top-access__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-top-access__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-top-access__sub {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
  font-weight: 500;
}

.p-top-access__chevron {
  color: var(--color-accent);
  flex-shrink: 0;
  align-self: center;
}

/* Promotion card — same white surface + border as the other access cards. */
/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .p-top-hero__inner {
    flex-direction: column;
  }
  .p-top-search {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  .p-top-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-top-features__grid {
    row-gap: 28px;
  }
  .p-top-feature:not(:last-child)::after {
    display: none;
  }
  .p-top-blog__inner {
    grid-template-columns: 1fr;
  }
  .p-top-blog__cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-top-access__inner {
    grid-template-columns: 1fr;
  }
  /* Chosen: stack heading above a 2-col grid of items */
  .p-top-chosen__row {
    flex-wrap: wrap;
  }
  .p-top-chosen__heading {
    flex: 0 0 100%;
    padding-right: 0;
    margin-bottom: 20px;
    text-align: center;
  }
  .p-top-chosen__item {
    flex: 0 0 50%;
  }
  .p-top-chosen__item::before {
    display: none;
  }
}
@media (max-width: 600px) {
  .p-top-feature__title {
    font-size: 16px;
  }
  .p-top-feature__desc {
    font-size: 14px;
  }
  /* Tighter vertical rhythm between sections on phone */
  .p-top-hero__inner {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .p-top-features {
    padding-top: 18px;
  }
  .p-top-features__grid {
    padding-bottom: 20px;
  }
  .p-top-props {
    padding-block: 12px;
  }
  .p-top-blog {
    padding-block: 18px;
  }
  .p-top-chosen__row {
    padding: 20px 0;
  }
  .p-top-access__inner {
    padding-bottom: 28px;
  }
  /* Badges: first badge centered on its own row, the other two side by side;
     a fixed img width keeps all three the same size */
  .p-top-hero__badges {
    flex-wrap: wrap;
    gap: 32px 16px;
    justify-content: center;
    margin-top: 48px;
    margin-bottom: 20px;
  }
  .p-top-badge {
    flex: 0 0 calc(50% - 8px);
  }
  .p-top-badge:first-child {
    flex-basis: 100%;
  }
  .p-top-badge__img {
    width: 150px;
    max-width: 100%;
  }
  /* Features: 2 per row on phone */
  .p-top-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-top-feature {
    padding: 12px 6px;
  }
  /* Props head: drop the title onto the same baseline as the "見る" link */
  .p-top-props__head {
    align-items: baseline;
  }
  /* Blog: full-bleed section; the inline padding moves onto the inner panel */
  .p-top-blog {
    padding-inline: 0;
    padding-bottom: 30px;
  }
  .p-top-blog__inner {
    padding-inline: var(--space-inline-sp);
  }
  .p-top-blog__panel-btn {
    width: auto;
  }
  .p-top-blog__panel-desc {
    margin-top: 4px;
    margin-bottom: 32px;
  }
  /* Chosen: drop the separator line above the section on phone */
  .p-top-chosen__row {
    border-top: none;
    padding-top: 0;
  }
  /* Chosen: 2 per row on phone, stacked icon → title → sub, centered */
  .p-top-chosen__item {
    flex: 0 0 50%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 18px;
  }
  .p-top-chosen__icon {
    margin-top: 0;
  }
  /* Property carousel: middle cards stop centered so both neighbours peek,
     but the first card rests flush-left (and the last flush-right) — no
     forced centering on the ends, which would leave a big empty side gap */
  .p-top-props__arrow {
    display: none;
  }
  .p-top-props__track {
    scroll-snap-type: x mandatory;
  }
  .p-top-props__item {
    scroll-snap-align: center;
  }
  /* りぶナビ blog cards: horizontal slide with the same stop behaviour */
  .p-top-blog__cards {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .p-top-blog__cards::-webkit-scrollbar {
    display: none;
  }
  .p-top-blog__card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
  .p-top-access__inner {
    padding-top: 12px;
    gap: 14px;
    margin-top: -10px;
  }
  .p-top-access__title {
    font-size: 16px;
  }
  .p-top-access__sub {
    font-size: 14px;
  }
  .p-top-access__body {
    padding: 6px 8px 6px 2px;
  }
  .p-top-access__img {
    width: 38%;
  }
  .p-top-access__card {
    padding: 8px;
  }
  .p-top-access__body {
    gap: 2px;
  }
}
/* =====================================================================
   v3 Detailed Search Page (.p-search-page / .p-search-form / .p-search-promo)
   ===================================================================== */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Breadcrumb */
.p-search-page__breadcrumb {
  border-bottom: 1px solid #eee;
  background: var(--color-white);
}

.p-search-page__breadcrumb-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 14px var(--space-inline-sp);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}

.p-search-page__breadcrumb-inner a:hover {
  color: var(--color-primary);
}

.p-search-page__breadcrumb-inner .is-current {
  color: var(--color-text);
}

.p-search-page__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 20px var(--space-inline-sp) 56px;
}

.p-search-page__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 22px;
}

.p-search-page__heading-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Form sits below the result list (results view) → separate it from the grid. */
.p-search-page__filter--below {
  margin-top: 56px;
}

/* ---------------------------------------------------------------------
   Filter form
   --------------------------------------------------------------------- */
.p-search-form {
  background: var(--color-bg-light);
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 28px;
}

.p-search-form__cols {
  display: grid;
  /* minmax(0,…) so the columns can't be floored at their content's min-width and
     push the whole form wider than its container — see __checks--cols2 below */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

.p-search-form__field {
  margin-bottom: 22px;
}

.p-search-form__field:last-child {
  margin-bottom: 0;
}

.p-search-form__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}

/* singleselect trigger inside the form */
.p-search-form .s-search__singleselect {
  position: relative;
}

.p-search-form .s-search__ms-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 14px;
  background: var(--color-white);
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}

.p-search-form .s-search__ms-arrow {
  color: var(--color-text-light);
}

/* Show the full エリア list at once — no inner scroll (overrides the shared
   240px cap from _search.scss). Scoped to the multiselect so the budget
   single-select (~20 options) keeps its scroll. */
.p-search-form .s-search__multiselect .s-search__ms-panel {
  max-height: none;
  overflow-y: visible;
}

.p-search-form__budget {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* flex:1 alone still floors each select at min-content — the widest option label
   (〜100,000 THB / 200,000 THB以上) — so the pair burst out of the form on a small
   phone. min-width:0 lets them shrink; the value inside already ellipsises. */
.p-search-form__budget .s-search__singleselect {
  flex: 1;
  min-width: 0;
}

.p-search-form .s-search__ms-value {
  min-width: 0;
}

.p-search-form__budget-sep {
  color: var(--color-text-light);
}

.p-search-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.p-search-form__checks--cols2 {
  display: grid;
  /* minmax(0,…) not 1fr: a bare 1fr floors each track at its content's min-width,
     so a long label like シャトルサービス pushed the grid wider than the form on a
     narrow phone. Let the tracks share the width and the label wrap instead. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.p-search-form__check {
  min-width: 0; /* allow the label to wrap rather than force the track open */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.p-search-form__check input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.p-search-form__keyword {
  position: relative;
}

.p-search-form__keyword-input {
  width: 100%;
  padding: 13px 42px 13px 14px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  font-size: 14px;
  background: var(--color-white);
}

.p-search-form__keyword svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
}

.p-search-form__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.p-search-form__clear,
.p-search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  padding: 14px 28px;
}

.p-search-form__clear {
  background: var(--color-white);
  border: 1px solid #cfcfcf;
  color: var(--color-text);
}

.p-search-form__clear:hover {
  background: #f0f0f0;
}

.p-search-form__submit {
  background: var(--color-primary);
  color: var(--color-white);
  min-width: 240px;
  transition: filter 0.2s ease;
}

.p-search-form__submit:hover {
  filter: brightness(1.12);
}

/* ---------------------------------------------------------------------
   Results
   --------------------------------------------------------------------- */
.p-search-page__results {
  margin-top: 40px;
}

.p-search-page__results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 検索結果 + the sort select total ~276px, so they must be allowed to stack
     rather than squeeze on a small phone */
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.p-search-page__results-head .p-top-section-title {
  margin-bottom: 0;
}

.p-search-page__sort-select {
  padding: 8px 34px 8px 12px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2306331c'/%3E%3C/svg%3E") right 12px center/10px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.p-search-page__sort-select:focus {
  box-shadow: 0 0 0 3px rgba(6, 51, 28, 0.18);
}

.p-search-page__count {
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

.p-search-page__count strong {
  font-size: 18px;
  color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Results carousel (5-card sets, side arrows, numeric pagination)
   --------------------------------------------------------------------- */
.p-search-carousel {
  position: relative;
}

/* The viewport clips the sliding strip horizontally (so the swipe never adds a
   page scrollbar) while keeping vertical visible for card hover shadows. The
   side arrows live outside this viewport, so they are never clipped. */
.p-search-carousel__viewport {
  overflow-x: clip;
  overflow-y: visible;
}

/* The strip holds the current set — and, mid-swipe, the incoming set beside it.
   Sliding the strip by one viewport width is what produces the swipe. */
.p-search-carousel__strip {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.p-search-carousel__strip.is-animating {
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Every direct child (skeleton / a set / empty message) fills the viewport. */
.p-search-carousel__strip > * {
  flex: 0 0 100%;
  min-width: 0;
}

.p-search-carousel__track {
  display: flex;
  gap: 12px;
}

.p-search-carousel__item {
  flex: 0 0 calc((100% - 48px) / 5); /* exactly 5 per set on desktop (4 × 12px gaps) */
  min-width: 0;
}

.p-search-carousel__arrow {
  position: absolute;
  top: 150px; /* aligned to the card-image center, like the top page */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.p-search-carousel__arrow--prev {
  left: -22px;
}

.p-search-carousel__arrow--next {
  right: -22px;
}

.p-search-carousel__arrow:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.p-search-carousel__arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.p-search-carousel__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 36px;
}

.p-search-carousel__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  font-size: 16px;
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.p-search-carousel__page:hover {
  background: #edf7ef;
}

.p-search-carousel__page.is-current {
  background: #d9f0de;
  font-weight: 600;
}

.p-search-carousel__page--dots {
  cursor: default;
  letter-spacing: 0.05em;
}

.p-search-carousel__page--dots:hover {
  background: none;
}

/* ---------------------------------------------------------------------
   おすすめコンテンツ
   --------------------------------------------------------------------- */
.p-search-promo {
  background: var(--color-bg-light);
}

.p-search-promo__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 48px var(--space-inline-sp);
}

.p-search-promo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-search-promo__card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-white);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.p-search-promo__card:hover {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.p-search-promo__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(6, 51, 28, 0.06);
  color: var(--color-primary);
}

.p-search-promo__icon svg {
  width: 24px;
  height: 24px;
}

.p-search-promo__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-search-promo__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-search-promo__sub {
  font-size: 12px;
  color: var(--color-text-light);
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .p-search-form__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .p-search-promo__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Carousel → horizontal swipe row; hide the side arrows, keep numeric pagination */
  .p-search-carousel__arrow {
    display: none;
  }
  .p-search-carousel__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .p-search-carousel__track::-webkit-scrollbar {
    display: none;
  }
  .p-search-carousel__item {
    flex: 0 0 60%;
    scroll-snap-align: center;
  }
  .p-search-page__results {
    margin-top: 60px;
  }
}
@media (max-width: 768px) {
  /* No hero on phone — go straight to the breadcrumb + form/results. */
  .p-search-page .p-prop-list-hero {
    display: none;
  }
  /* Recommend-property carousel: swipe only on phone — drop the numeric pagination. */
  .p-search-carousel__pagination {
    display: none;
  }
  .p-search-page__results-head {
    margin-bottom: 24px;
  }
}
@media (max-width: 600px) {
  .p-search-form {
    padding: 18px;
  }
  /* 物件タイプ / 間取り: align the right column to a consistent start point,
     matching the 設備・条件 grid. */
  .p-search-form__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .p-search-form__checks--cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-search-form__actions {
    flex-direction: column-reverse;
  }
  .p-search-form__clear,
  .p-search-form__submit {
    width: 100%;
    min-width: 0; /* the 240px desktop floor would overflow a ≤310px phone */
  }
  .p-search-promo__grid {
    grid-template-columns: 1fr;
  }
  .p-search-carousel__item {
    flex-basis: 75%;
  }
}
/* Small phones: two budget selects side by side would only fit by truncating
   their labels, so stack them full-width. The 〜 separator reads as a dangling
   character once they're stacked — the 下限なし/〜◯◯ labels carry the meaning. */
@media (max-width: 400px) {
  .p-search-form__budget {
    flex-direction: column;
    align-items: stretch;
  }
  .p-search-form__budget-sep {
    display: none;
  }
}
/* =====================================================================
   v3 Property Archive (/property)  (.p-prop-archive*)
   Split out from the /search page so the two no longer share the
   "search"-named classes. Card / pagination / skeleton styling stays
   shared via the (non-search) .p-prop-list-* and .c-prop-card classes.
   ===================================================================== */
.p-prop-archive__filter {
  margin-top: 40px;
  scroll-margin-top: 90px; /* clear the fixed header when the 条件検索 button anchors here */
}

/* Breadcrumb */
.p-prop-archive__breadcrumb {
  border-bottom: 1px solid #eee;
  background: var(--color-white);
}

.p-prop-archive__breadcrumb-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 14px var(--space-inline-sp);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}

.p-prop-archive__breadcrumb-inner a:hover {
  color: var(--color-primary);
}

.p-prop-archive__breadcrumb-inner .is-current {
  color: var(--color-text);
}

.p-prop-archive__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 20px var(--space-inline-sp) 56px;
}

/* Filter-form heading (below the results) */
.p-prop-archive__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 22px;
}

.p-prop-archive__heading-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Results */
.p-prop-archive__results-head {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* sort only → sits on the right */
  margin-bottom: 16px;
}

.p-prop-archive__results-head .p-top-section-title {
  margin-bottom: 0;
}

.p-prop-archive__sort-select {
  padding: 8px 34px 8px 12px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2306331c'/%3E%3C/svg%3E") right 12px center/10px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.p-prop-archive__sort-select:focus {
  box-shadow: 0 0 0 3px rgba(6, 51, 28, 0.18);
}

/* Card grid (3-up) */
.p-prop-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 24px;
}

/* These cards are wide enough that the facility pills sit on a single row, so
   they don't need the full carousel/homepage card height — trim it a little. */
.p-prop-archive__grid .c-prop-card,
.p-prop-archive__grid .c-prop-card-skeleton {
  height: 405px;
}

/* Desktop: slightly larger facility pills here (mobile keeps the base size). */
@media (min-width: 768.02px) {
  .p-prop-archive__grid .c-prop-card__facility {
    font-size: 13px;
    padding: 2px 10px;
  }
}
/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .p-prop-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 2-up cards are narrower, so the facility pills wrap to more rows — drop the
     fixed desktop height so they're not clipped at the bottom. */
  .p-prop-archive__grid .c-prop-card,
  .p-prop-archive__grid .c-prop-card-skeleton {
    height: auto;
  }
}
@media (max-width: 768px) {
  /* No hero on phone — go straight to the breadcrumb + results. */
  .p-prop-archive .p-prop-list-hero {
    display: none;
  }
  /* Tighten the gap above the facility pills on phones: the fixed card height
     + margin-top:auto pushes the foot to the bottom, leaving a big gap above
     the pills. Drop the auto-push and let the card size to its content. */
  .p-prop-archive__grid .c-prop-card,
  .p-prop-archive__grid .c-prop-card-skeleton {
    height: auto;
  }
  .p-prop-archive__grid .c-prop-card__foot {
    margin-top: 8px;
    padding-top: 0;
  }
}
@media (max-width: 600px) {
  .p-prop-archive__grid {
    grid-template-columns: 1fr;
  }
}
/* =============================================
   SECTION: Search (s-search)
   ============================================= */
/* Section = the grid — 3:2 split (60/40). Max-width stops the green bg expanding on ultra-wide screens; centered with margin:auto. */
.s-search {
  display: grid;
  grid-template-columns: 5fr 3fr;
  align-items: stretch;
  max-width: 1980px;
  margin-inline: auto;
}

/* BG cell 1 (5fr): green illustrated background, stretches with row */
.s-search__left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 60px;
  background-color: #c8e8ce;
  background-image: url("../images/search-bg.png");
  background-size: cover;
  background-position: center center;
}
.s-search__left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.07;
  pointer-events: none;
}

.s-search__left-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.s-search__illust {
  width: 257px;
  height: 128px;
  object-fit: contain;
  display: block;
}

.s-search__tagline {
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
  text-align: center;
}

/* BG cell 2 (3fr): beige background */
.s-search__right {
  background: #FBFDFA;
  position: relative; /* establishes stacking context so panel paints above left cell */
  z-index: 1;
}

/*
 * Panel: normal-flow child of right cell.
 * Pulled LEFT by 1/3 of right-cell width = 1/8 of total section (= the 12.5% overlap).
 * Width = 133.333% of right cell - 48px  (= 50% of total section - 48px).
 * Margin top/bottom: 37px. Inner padding: 30px.
 * Section height expands freely with content; left bg stretches via align-items: stretch.
 */
.s-search__panel {
  margin-left: -33.3333333333%;
  width: calc(133.334% - 48px);
  margin-top: 37px;
  margin-bottom: 37px;
  padding: 30px;
  background: var(--color-white);
  box-shadow: var(--shadow-elevated);
}

/* Form: label + input rows */
.s-search__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s-search__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px;
}

/* Budget row spans full */
.s-search__row--budget {
  grid-template-columns: 100px 1fr;
}

.s-search__row--other {
  grid-template-columns: 100px 1fr;
  align-items: flex-start;
}

.s-search__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

/* All text inputs — green border */
.s-search__input {
  width: 100%;
  padding: 4px 10px;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  border: 2px solid #13BC32;
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  transition: box-shadow 0.2s ease;
}

.s-search__input:focus {
  box-shadow: 0 0 0 2px rgba(19, 188, 50, 0.2);
}

.s-search__input::placeholder {
  color: #bbb;
}

/* Budget: two selects + dash */
.s-search__budget-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.s-search__budget-wrap span {
  font-size: var(--fs-sm);
  color: var(--color-text);
  flex-shrink: 0;
}

.s-search__select {
  flex: 1;
  padding: 5px 28px 5px 10px;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  border: 2px solid #13BC32;
  border-radius: 0;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E") right 10px center/10px no-repeat;
  appearance: none;
  color: var(--color-text);
  outline: none;
  cursor: pointer;
}

.s-search__select:focus {
  box-shadow: 0 0 0 2px rgba(19, 188, 50, 0.2);
}

/* Checkboxes: 2×2 grid */
.s-search__checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}

.s-search__checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.s-search__checkbox-label:hover input[type=checkbox] {
  background: rgba(19, 188, 50, 0.25);
}

.s-search__checkbox-label input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: #13BC32;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #13BC32;
  background: var(--color-white);
  position: relative;
  border-radius: 3px;
}

.s-search__checkbox-label input[type=checkbox]:checked {
  background: #13BC32;
}

.s-search__checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 5px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* 物件種別 inline checkboxes */
.s-search__type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  align-items: center;
}

/* ---- Custom multi-select dropdown ---- */
.s-search__multiselect {
  position: relative;
}

.s-search__ms-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.s-search__ms-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 51, 28, 0.18);
}
.s-search__ms-trigger[aria-expanded=true] {
  background: rgba(6, 51, 28, 0.06);
  box-shadow: 0 0 0 3px rgba(6, 51, 28, 0.18);
}
.s-search__ms-trigger[aria-expanded=true] .s-search__ms-arrow {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.s-search__ms-value {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.s-search__ms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  border-radius: 100px;
  line-height: 1;
}

.s-search__ms-arrow {
  flex-shrink: 0;
  color: #999;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Hidden by default; shown via .is-open */
.s-search__ms-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 0 0 4px 4px;
  padding: 6px 4px;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
}
.s-search__ms-panel.is-open {
  display: block;
}
.s-search__ms-panel--cols2.is-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4px;
}
.s-search__ms-panel {
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f0f0f0;
}
.s-search__ms-panel::-webkit-scrollbar {
  width: 4px;
}
.s-search__ms-panel::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.s-search__ms-panel::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 2px;
}

.s-search__ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s ease;
  user-select: none;
}
.s-search__ms-option:hover {
  background: rgba(6, 51, 28, 0.08);
}
.s-search__ms-option:has(input:checked) {
  background: rgba(6, 51, 28, 0.1);
  color: var(--color-primary);
  font-weight: 500;
}
.s-search__ms-option input[type=checkbox] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #aaa;
  background: var(--color-white);
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.s-search__ms-option input[type=checkbox]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.s-search__ms-option input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: translateX(-50%) translateY(-60%) rotate(45deg);
}

/* Single-select dropdown (ご予算) */
.s-search__singleselect {
  position: relative;
  flex: 1;
}

.s-search__ss-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 8px;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.s-search__ss-option:hover {
  background: rgba(6, 51, 28, 0.08);
}
.s-search__ss-option.is-selected {
  color: var(--color-primary);
  font-weight: 500;
  background: rgba(6, 51, 28, 0.1);
}
.s-search__ss-option.is-selected::after {
  content: "✓";
  font-size: 11px;
  color: var(--color-primary);
  margin-left: 8px;
}

.s-search__budget-sep {
  font-size: var(--fs-sm);
  color: var(--color-text);
  flex-shrink: 0;
}

/* Search button */
.s-search__submit-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.s-search__btn {
  padding: 9px 48px;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.s-search__btn:hover {
  background: var(--color-green-dark);
}

@media (min-width: 1440.02px) {
  .s-search {
    padding-inline: 0;
  }
}
@media (max-width: 768px) {
  .s-search {
    grid-template-columns: 1fr;
  }
  /* ::before renders the image as real content so it drives the container height.
     overflow-x: hidden clips anything that extends past the right screen edge. */
  .s-search__left {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-image: url("../images/search-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -12px -12px;
    min-height: 650px;
  }
  /* Content overlays the image */
  .s-search__left-content {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    gap: 12px;
    padding-inline: var(--space-inline-sp);
  }
  .s-search__illust {
    width: 160px;
    height: auto;
  }
  .s-search__tagline {
    font-size: var(--fs-xl);
    margin-bottom: 50px;
  }
  /* Pull the right cell up so the panel floats over the green bg.
     Transparent bg lets the green bg show through the side gaps. */
  .s-search__right {
    background: transparent;
    margin-top: -385px;
    position: relative;
    z-index: 2;
  }
  /* Panel has side margins — those gaps reveal green (top) then white (bottom). */
  .s-search__panel {
    margin-inline: var(--space-inline-sp);
    width: auto;
    margin-top: 0;
    margin-bottom: 70px;
    box-shadow: none;
    padding: 24px var(--space-inline-sp);
    background: var(--color-white);
  }
  .s-search__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }
  .s-search__label {
    display: block;
    font-size: 18px;
    font-weight: 400;
  }
  .s-search__budget-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .s-search__checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  .s-search__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
  }
}
/* =============================================
   SECTION: Reasons (s-reasons)
   ============================================= */
.s-reasons {
  padding: 0 max(20px, (100% - 1320px) / 2);
  margin-top: 96px;
}

.s-reasons__box {
  background: linear-gradient(160deg, #f4fcf6 0%, var(--color-white) 55%);
  padding: 18px 16px 76px;
}

.s-reasons__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 48px;
}

.s-reasons__title {
  font-size: clamp(22px, 12.857px + 1.19vw, 30px);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}
.s-reasons__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  margin: 10px auto 0;
  border-radius: 2px;
}

.s-reasons__heading-icon--right {
  transform: scaleX(-1);
}

.s-reasons__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 48px;
  row-gap: 40px;
}

.s-reasons__cta {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.s-reasons__item {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.s-reasons__number {
  /* Gradient text */
  font-size: clamp(38px, -10px + 6.25vw, 80px);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.55;
  background: linear-gradient(to bottom right, var(--color-green), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s-reasons__content {
  flex: 1;
  padding-top: 8px;
}

.s-reasons__item-title {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: none;
  background-image: radial-gradient(circle, var(--color-gold) 2.5px, transparent 2.5px);
  background-size: 7px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
  display: inline-block;
}

.s-reasons__item-text {
  font-size: var(--fs-md);
  color: var(--color-text-light);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .s-reasons {
    padding: 0 var(--space-inline-sp);
  }
  .s-reasons__box {
    padding-bottom: 20px;
  }
  .s-reasons__heading-icon {
    width: 15px;
    height: 14px;
    margin-top: 5px;
  }
  .s-reasons__heading {
    gap: 8px;
    margin-bottom: 30px;
  }
  .s-reasons__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 26px;
  }
  .s-reasons__number {
    grid-column: 1;
    grid-row: 1;
  }
  .s-reasons__item-title {
    font-size: 18px;
    grid-column: 2;
    grid-row: 1;
    display: inline-block;
    justify-self: start;
    width: fit-content;
  }
  .s-reasons__item-text {
    font-size: 16px;
    margin-top: 5px;
    padding-bottom: 5px;
    grid-column: 1/-1;
    grid-row: 2;
  }
  .s-reasons__content {
    margin-bottom: 0px;
    display: contents;
  }
  .s-reasons__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 6px;
  }
  .s-reasons__cta {
    margin-top: 32px;
  }
}
/* =============================================
   SECTION: Ad Banner (s-ad-banner)
   ============================================= */
.s-ad-banner {
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 40px;
  padding-inline: var(--space-inline-pc);
}

.s-ad-banner__inner {
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
}

.s-ad-banner__placeholder {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-primary);
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--fs-sm);
}

.s-ad-banner__placeholder a {
  display: block;
  width: 100%;
  min-width: 0;
}

.s-ad-banner__placeholder img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .s-ad-banner {
    padding-top: 0px;
    padding-bottom: 28px;
    padding-inline: var(--space-inline-sp);
  }
  .s-ad-banner__inner {
    max-width: 100%;
  }
  .s-ad-banner__placeholder {
    width: 100%;
    height: auto;
  }
  .s-ad-banner__placeholder img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: unset;
  }
  .s-ad-banner__placeholder {
    border: 1px solid var(--color-primary);
  }
}
/* =============================================
   SECTION: Properties (s-properties)
   ============================================= */
.s-properties {
  padding: 80px var(--space-inline-pc) 40px;
}

.s-properties__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.s-properties__heading-icon--right {
  transform: scaleX(-1);
}

.s-properties__title {
  font-size: clamp(22px, 12.857px + 1.19vw, 30px);
  font-weight: 500;
  color: var(--color-text);
}
.s-properties__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  margin: 10px auto 0;
  border-radius: 2px;
}

.s-properties__layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.s-properties__main {
  flex: 1;
  min-width: 0;
}

.s-properties__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 30px;
}

.s-properties__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-white);
  border-radius: var(--radius-leaf);
  box-shadow: 0 0 0 2px var(--color-green), 0 4px 14px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.s-properties__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-leaf);
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.s-properties__card:hover {
  box-shadow: 0 0 0 2px var(--color-green), var(--shadow-elevated);
  transform: translateY(-5px);
}

.s-properties__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Property-type tag — overlaps the image, top-left */
.s-properties__card-tag {
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 2;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 14px;
  border-radius: 0 4px 4px 0;
}

.s-properties__card-link:hover {
  opacity: 1;
}

/* Image */
.s-properties__card-img-wrap {
  padding: 12px 12px 0;
  overflow: hidden;
  flex-shrink: 0;
  height: 224px;
}

.s-properties__card-img {
  width: 100%;
  height: 212px;
  object-fit: cover;
  display: block;
}

.s-properties__card-img--placeholder {
  width: 100%;
  height: 212px;
  background: #e8f5ea;
}

.s-properties__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* Name — bold green text (matches property list page) */
.s-properties__card-name-wrap {
  padding: 4px 14px 0;
  width: 100%;
  overflow: hidden;
}

.s-properties__card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-green);
  display: block;
  overflow-wrap: break-word;
}

/* Info: price + compact 2-col values */
.s-properties__card-info {
  padding: 10px 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.s-properties__card-price {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
}

.s-properties__card-dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s-properties__card-dl-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.s-properties__card-dl-item dt {
  flex-shrink: 0;
  width: 5em;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted, #888);
}

.s-properties__card-dl-item dd {
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  overflow-wrap: break-word;
}

/* CTA */
.s-properties__cta {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

/* Sidebar */
.s-properties__sidebar {
  flex-shrink: 0;
  width: 220px;
}

.s-properties__sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-properties__sidebar-heading {
  font-size: var(--fs-md);
  font-weight: 550;
  text-align: center;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 4px;
}

.s-properties__sidebar-list {
  display: flex;
  flex-direction: column;
}

.s-properties__sidebar-item {
  border-bottom: 1px solid #e0e0e0;
}

.s-properties__sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.2s ease;
}

.s-properties__sidebar-link:hover {
  color: var(--color-green);
  opacity: 1;
}

.s-properties__sidebar-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--color-green);
  stroke: var(--color-green);
}

.s-properties__sidebar-icon svg {
  width: 100%;
  height: 100%;
}

/* Nudge the mask-rendered icon glyphs down for vertical alignment */
.s-properties__sidebar-icon > span {
  transform: translateY(4px);
}

.s-properties__sidebar-label {
  font-size: var(--fs-md);
}

.s-properties__sidebar-arrow {
  display: none;
}

.s-properties__empty {
  text-align: center;
  color: var(--color-text);
  padding: 40px 0;
}

@media (min-width: 768.02px) and (max-width: 1024px) {
  .s-properties__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .s-properties {
    padding: 0px var(--space-inline-sp);
    margin-top: 100px;
  }
  .s-properties__heading {
    gap: 8px;
    margin-bottom: 32px;
  }
  .s-properties__heading-icon {
    width: 15px;
    height: 14px;
    margin-top: 5px;
  }
  .s-properties__layout {
    flex-direction: column;
    gap: 40px;
  }
  .s-properties__grid {
    grid-template-columns: 1fr;
    padding-inline: 15px;
  }
  .s-properties__card:nth-child(n+4) {
    display: none;
  }
  /* Move sidebar above the property grid */
  .s-properties__sidebar {
    width: 100%;
    order: -1;
  }
  .s-properties__sidebar-heading {
    font-size: 16px;
    padding: 20px;
  }
  .s-properties__sidebar-heading br {
    display: none;
  }
  /* No icon nudge on phone */
  .s-properties__sidebar-icon > span {
    transform: none;
  }
  .s-properties__sidebar-inner {
    gap: 16px;
  }
  /* Scroll wrap: flex row — arrows sit outside the list */
  .s-properties__sidebar-scroll-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .s-properties__sidebar-arrow {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 56px;
    background: var(--color-white);
    border: none;
    border-radius: 4px;
    font-size: 18px;
    color: var(--color-green);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .s-properties__sidebar-arrow:hover {
    background: var(--color-green);
    color: var(--color-white);
  }
  /* Horizontal scroll-snap strip */
  .s-properties__sidebar-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .s-properties__sidebar-list::-webkit-scrollbar {
    display: none;
  }
  /* Each item: fixed width, centered column layout */
  .s-properties__sidebar-item {
    flex: 0 0 90px;
    scroll-snap-align: start;
    border-bottom: none;
    display: flex;
    justify-content: center;
  }
  .s-properties__sidebar-link {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-align: center;
  }
  /* Circular green-tinted background for icon */
  .s-properties__sidebar-icon {
    width: 64px;
    height: 64px;
    background: rgba(19, 188, 50, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .s-properties__sidebar-label {
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
  }
}
/* =============================================
   SECTION: Services (s-services)
   ============================================= */
.s-services {
  margin-top: 0;
  padding-top: 48px;
  padding-bottom: 80px;
  background: #f9faf7;
}

.s-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 240px);
  gap: 24px;
  justify-content: center;
}

.s-services__card {
  width: 240px;
  height: 208px;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 28px;
  gap: 12px;
  border-radius: 0;
  transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}

.s-services__card:hover {
  border-radius: var(--radius-leaf);
  box-shadow: var(--shadow-elevated);
}

.s-services__card:hover .s-services__card-title {
  color: var(--color-green);
}

.s-services__card:hover .s-services__card-icon {
  color: var(--color-green);
}

.s-services__card-icon {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  transition: color 0.25s ease;
}

.s-services__card-icon svg {
  width: var(--icon-size, 80px);
  height: var(--icon-size, 80px);
}

.s-services__card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  text-align: center;
  transition: color 0.25s ease;
}

a.s-services__card {
  text-decoration: none;
  color: inherit;
}
a.s-services__card:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .s-services {
    margin-top: 60px;
    padding-top: 52px;
    padding-bottom: 100px;
  }
  .s-services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .s-services__card {
    width: 100%;
    height: auto;
    padding: 20px 12px;
  }
  .s-services__card-icon {
    height: 50px;
  }
  .s-services__card-icon svg {
    width: calc(var(--icon-size, 80px) * 0.6);
    height: calc(var(--icon-size, 80px) * 0.6);
  }
  .s-services__card-title {
    font-size: 16px;
  }
}
/* =============================================
   PROPERTY DETAIL PAGE (p-property-detail, p-property-sidebar, p-property-contact)
   ============================================= */
/* ---- Gallery lightbox ---- */
.p-property-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.p-property-lightbox[hidden] {
  display: none;
}

.p-property-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Image stage — fills everything above the thumb strip */
.p-property-lightbox__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Arrows float over the image so it can use nearly the full width */
  padding: 48px 12px 8px;
}

.p-property-lightbox__img {
  /* Fill the stage even when the original photo is small — upscale rather
     than showing it at its (often tiny) natural size */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-property-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  transition: background 0.2s ease;
}
.p-property-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.p-property-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35); /* legible even when floating over bright photos */
  color: var(--color-white);
  transition: background 0.2s ease;
}
.p-property-lightbox__arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}
.p-property-lightbox__arrow--prev {
  left: 16px;
}
.p-property-lightbox__arrow--next {
  right: 16px;
  transform: translateY(-50%) scaleX(-1);
}

.p-property-lightbox__counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--color-white);
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* Bottom preview selector — drag/swipe scrollable like the page gallery strip */
.p-property-lightbox__thumbs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  /* Center when few thumbs, scroll when many */
  justify-content: safe center;
}
.p-property-lightbox__thumbs::-webkit-scrollbar {
  display: none;
}
.p-property-lightbox__thumbs.is-dragging {
  cursor: grabbing;
}

.p-property-lightbox__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  overflow: hidden;
  opacity: 0.45;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.p-property-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.p-property-lightbox__thumb:hover {
  opacity: 0.8;
}
.p-property-lightbox__thumb.is-active {
  opacity: 1;
  border-color: var(--color-green);
}

.p-property-lightbox--floorplan .p-property-lightbox__thumb {
  background: var(--color-white);
}
.p-property-lightbox--floorplan .p-property-lightbox__thumb img {
  object-fit: contain;
}

@media (max-width: 768px) {
  .p-property-lightbox__stage {
    padding: 56px 8px 8px;
  }
  .p-property-lightbox__arrow {
    width: 44px;
    height: 44px;
    background: transparent;
  }
  .p-property-lightbox__arrow::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
  }
  .p-property-lightbox__arrow svg {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
  }
  .p-property-lightbox__arrow--prev {
    left: 8px;
  }
  .p-property-lightbox__arrow--next {
    right: 8px;
  }
  .p-property-lightbox__thumb {
    width: 56px;
    height: 42px;
  }
}
/* ---- Two-column layout ---- */
.p-property-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: clamp(40px, 11.1vw, 100px); /* 160px at 1440px, scales down with viewport */
  row-gap: 72px; /* space between the main content and the banner beneath it */
  align-items: start;
  padding-top: 50px;
  padding-bottom: 60px;
  padding-inline: max(20px, (100% - 1320px) / 2);
}

.p-property-detail__main {
  min-width: 0;
}

/* Tablet (769–1024): the fluid gap (~85px at 769) + 360px sidebar would
   crush the main column to ~290px — tighten both so it stays usable. */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-property-detail {
    grid-template-columns: 1fr 300px;
    gap: 32px;
  }
}
/* ---- Header (title + subtitle) ---- */
.p-property-detail__header {
  margin-bottom: 24px;
}

.p-property-detail__title {
  font-size: clamp(20px, 6.286px + 1.786vw, 32px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 4px;
}

.p-property-detail__title-en {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.p-property-detail__subtitle {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ---- Gallery ---- */
.p-property-detail__gallery {
  width: 100%;
  margin-bottom: 20px;
}

/* Main display: full width, 3:2 ratio */
.p-property-detail__gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #e8e8e8;
  margin-bottom: 20px;
}

.p-property-detail__gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
  display: block;
}

/* No-image placeholder for main display */
.p-property-detail__gallery-placeholder-main {
  width: 100%;
  height: 100%;
  background: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  font-size: 14px;
  font-weight: 500;
}

/* Thumbnail strip */
.p-property-detail__gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.p-property-detail__gallery-thumbs::-webkit-scrollbar {
  display: none;
}
.p-property-detail__gallery-thumbs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Individual thumbnail — fixed 150×150px; strip scrolls when there are more than 4 */
.p-property-detail__gallery-thumb {
  flex: 0 0 150px;
  width: 140px;
  height: 140px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  display: block;
  transition: border-color 0.2s ease;
}

.p-property-detail__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* prevent native image drag from blocking scroll */
  user-select: none;
  -webkit-user-drag: none;
}

.p-property-detail__gallery-thumb.is-active,
.p-property-detail__gallery-thumb:hover {
  border-color: var(--color-primary);
}

/* Gray placeholder slot */
.p-property-detail__gallery-thumb--empty {
  background: var(--color-bg-light);
  cursor: default;
  border-color: transparent;
}

.p-property-detail__gallery-thumb--empty:hover {
  border-color: transparent;
}

/* Navigation arrows — circular, centered overlay on the main image */
.p-property-detail__gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.p-property-detail__gallery-arrow svg {
  flex-shrink: 0;
}

.p-property-detail__gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.68);
  transform: translateY(-50%) scale(1.08);
}

.p-property-detail__gallery-arrow:disabled {
  opacity: 0.25;
  cursor: default;
  transform: translateY(-50%) scale(1);
}

.p-property-detail__gallery-arrow--prev {
  left: 14px;
}

.p-property-detail__gallery-arrow--next {
  right: 14px;
}

/* Image counter badge — bottom-right of main image */
.p-property-detail__gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Facility pills (設備 row inside the info box) ---- */
.p-property-detail__tags-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

.p-property-detail__tags-label {
  flex-shrink: 0;
  min-width: 7.5em; /* fits インターネット so pills/text align with the info-grid values */
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  padding-top: 5px;
}

/* 設備 row rendered as plain text (the recommended pills sit in the row above) */
.p-property-detail__tags-row--text {
  align-items: baseline;
  border-top: 1px solid #ededed;
}
.p-property-detail__tags-row--text .p-property-detail__tags-label {
  padding-top: 0;
}

.p-property-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-property-detail__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 14px;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-bg-light);
  background: var(--color-white);
  white-space: nowrap;
}
.p-property-detail__tag--inactive {
  border: 1px solid rgba(6, 51, 28, 0.28);
  font-weight: 400;
  color: #b6b6b6;
  background: var(--color-bg-light);
}

/* ---- Property info box (table style) ---- */
.p-property-detail__section-title--info {
  margin-top: 44px;
}

.p-property-detail__info-box {
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
}

/* 2-column grid of inline label-value pairs, separated like table rows.
   Grid stretches both cells of a row to equal height so the row separators line up. */
.p-property-detail__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.p-property-detail__info-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #ededed;
}

.p-property-detail__info-row--full {
  grid-column: 1/-1;
}

.p-property-detail__info-label {
  font-size: 16px;
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  /* Wide enough for the longest label (インターネット) so every value column
     starts at the same x — aligns the body across all rows. */
  min-width: 7.5em;
}

.p-property-detail__info-value {
  font-size: 16px;
  color: var(--color-text-light);
}

/* a property with nothing entered for this field shows a dash; dim it so it
   reads as "no data" rather than as a real value */
.p-property-detail__info-value--empty {
  color: #a8b0ac;
}

/* ---- Content sections (location, room, facility, comment) ---- */
.p-property-detail__section {
  margin-top: 50px;
  margin-bottom: 20px;
  padding-bottom: 28px;
}

/* Text sections (ロケーション / お部屋について / 共用施設 / 西村不動産コメント)
   sit closer together — the price-table section keeps its own spacing. */
.p-property-detail__section:has(.p-property-detail__section-text) {
  margin-top: 36px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.p-property-detail__section:last-child {
  border-bottom: none;
}

.p-property-detail__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.p-property-detail__section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: translateY(2px);
}

.p-property-detail__section--with-bg {
  background: var(--color-bg-light);
  padding: 30px;
  border-radius: var(--radius-leaf);
  border-bottom: none;
  margin-top: 30px;
  margin-bottom: 0px;
}

.p-property-detail__section-text {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.9;
}

/* ---- Room types table ---- */
.p-property-detail__room-table-wrap {
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* Exchange-rate note under the price table */
.p-property-detail__rate-note {
  margin-top: 8px;
  text-align: right;
  font-size: 14px;
  color: var(--color-text-light);
}

.p-property-detail__room-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}

.p-property-detail__room-table th {
  padding: 20px 30px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  /* Darker than the body rows so the header reads as a header */
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-light));
  border: none;
}

.p-property-detail__room-table td {
  padding: 18px 30px;
  font-size: 16px;
  text-align: left;
  background: var(--color-bg-light);
  border: none;
  border-top: 3px solid #fff; /* white gap between rows */
}

/* ---- Optional floor-plan gallery below the room table ---- */
.p-property-detail__floorplans {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e4e4e4;
}

.p-property-detail__floorplans-title {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-property-detail__floorplans-slider {
  position: relative;
  padding-inline: 0;
}

.p-property-detail__floorplans-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.p-property-detail__floorplans-track::-webkit-scrollbar {
  display: none;
}
.p-property-detail__floorplans-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.p-property-detail__floorplans-track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.p-property-detail__floorplan {
  flex: 0 0 clamp(140px, 27%, 176px);
  aspect-ratio: 4/3;
  padding: 7px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--color-white);
  border: 1px solid #dfe4df;
  border-radius: 0;
  cursor: zoom-in;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.p-property-detail__floorplan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.p-property-detail__floorplan:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .p-property-detail__floorplan:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 18px rgba(6, 51, 28, 0.12);
  }
}
.p-property-detail__floorplans-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(6, 51, 28, 0.1);
  transform: translateY(-50%);
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.p-property-detail__floorplans-arrow--prev {
  left: 0;
}
.p-property-detail__floorplans-arrow--next {
  right: 0;
}
.p-property-detail__floorplans-arrow:disabled {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.p-property-detail__floorplans-arrow:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .p-property-detail__floorplans-arrow:not(:disabled):hover {
    background: var(--color-primary);
    color: var(--color-white);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-property-detail__floorplans-track {
    scroll-behavior: auto;
  }
  .p-property-detail__floorplan,
  .p-property-detail__floorplans-arrow {
    transition: none;
  }
}
/* ---- Google Map ---- */
.p-property-detail__map {
  margin-top: 60px;
}

.p-property-detail__map iframe {
  width: 100%;
  height: 340px;
  display: block;
  border: 0;
}

/* =============================================
   DETAIL SIDEBAR ASIDE (contact + map + recommended)
   ============================================= */
.p-property-aside {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Contact CTA card */
.p-property-aside__contact {
  background: var(--color-primary);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Hidden on phones — the bottom contact banner covers this on mobile */
}
@media (max-width: 768px) {
  .p-property-aside__contact {
    display: none;
  }
}

.p-property-aside__contact-title {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.p-property-aside__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 8px;
  padding: 12px 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.p-property-aside__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.p-property-aside__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-white);
}

.p-property-aside__cta--line .p-property-aside__cta-icon {
  background: #06C755;
}

.p-property-aside__cta--tel .p-property-aside__cta-icon {
  background: var(--color-primary);
}

.p-property-aside__cta--form .p-property-aside__cta-icon {
  background: var(--color-accent);
}

.p-property-aside__cta-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.p-property-aside__cta-main {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.p-property-aside__cta--tel .p-property-aside__cta-main {
  font-size: 18px;
  letter-spacing: 0.02em;
}

.p-property-aside__cta-sub {
  font-size: 11px;
  color: var(--color-text-light);
}

.p-property-aside__cta-arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  display: flex;
}

/* Blocks (周辺環境 / おすすめ類似物件) */
.p-property-aside__block {
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  padding: 18px;
}

.p-property-aside__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  padding-left: 12px;
  border-left: 4px solid var(--color-accent);
  margin-bottom: 16px;
}

.p-property-aside__map iframe {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 8px;
  display: block;
}

/* Placeholder shown when a property has no lat/lng */
.p-property-aside__map--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  border-radius: 8px;
  background: var(--color-bg-light);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  font-size: 14px;
  text-align: center;
}

/* Recommended list */
.p-property-aside__rec-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-property-aside__rec-link {
  display: flex;
  gap: 12px;
  align-items: center;
}

.p-property-aside__rec-link:hover .p-property-aside__rec-name {
  color: var(--color-primary);
}

.p-property-aside__rec-thumb {
  flex-shrink: 0;
  width: 84px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
  display: block;
}

.p-property-aside__rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-property-aside__rec-thumb--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #eee, #eee 8px, #e4e4e4 8px, #e4e4e4 16px);
}

.p-property-aside__rec-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-property-aside__rec-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.p-property-aside__rec-layout {
  font-size: 12px;
  color: var(--color-text-light);
}

.p-property-aside__rec-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-property-aside__rec-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding: 11px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.p-property-aside__rec-all:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* =============================================
   SIDEBAR SEARCH WIDGET
   ============================================= */
.p-property-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  background: transparent;
  border: none;
}

.p-property-sidebar__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg-light);
  padding: 20px;
  padding-bottom: 50px;
}

.p-property-sidebar__section {
  padding: 0;
  border-bottom: none;
  margin-bottom: 30px;
}
.p-property-sidebar__section:last-child {
  margin-bottom: 0;
}

.p-property-sidebar__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 10px;
}

.p-property-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-green);
  background-color: none;
  border: none;
}

.p-property-sidebar__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-property-sidebar__checkboxes--cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.p-property-sidebar__checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.4;
}

.p-property-sidebar__checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #2C3E2B;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #2C3E2B;
  border-radius: 2px;
  background: var(--color-white);
  position: relative;
  cursor: pointer;
}

.p-property-sidebar__checkbox-label input[type=checkbox]:checked {
  background: var(--color-green);
  border-color: var(--color-green);
  border-width: 2px;
}

.p-property-sidebar__checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.p-property-sidebar__budget {
  display: flex;
  flex-direction: column;
  width: 60%;
  gap: 0;
}
.p-property-sidebar__budget .s-search__singleselect:first-of-type {
  order: 0;
}
.p-property-sidebar__budget .s-search__singleselect:last-of-type {
  order: 2;
}
.p-property-sidebar__budget .s-search__ms-trigger {
  padding: 5px 8px;
  font-size: 14px;
  border: 2px solid #2C3E2B;
  border-radius: 3px;
}
.p-property-sidebar__budget {
  /* Black divider line between the two selects */
}
.p-property-sidebar__budget::after {
  content: "";
  display: block;
  order: 1;
  width: 1px;
  height: 14px;
  background: #333;
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
}

.p-property-sidebar__select {
  width: 100%;
  padding: 5px 24px 5px 8px;
  font-family: var(--font-base);
  font-size: 14px;
  border: 2px solid #2C3E2B;
  border-radius: 3px;
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E") right 8px center/8px no-repeat;
  appearance: none;
  color: var(--color-text);
  outline: none;
}

.p-property-sidebar__input {
  width: 100%;
  padding: 5px 8px;
  font-family: var(--font-base);
  font-size: 12px;
  border: 2px solid #2C3E2B;
  border-radius: 3px;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
}

.p-property-sidebar__submit-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.p-property-sidebar__btn {
  width: 50%;
  padding: 10px;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.p-property-sidebar__btn:hover {
  background: var(--color-green-dark);
}

/* Quick filter buttons */
.p-property-sidebar__quick-section {
  margin-top: 60px;
}

/* =============================================
   CONTACT FORM SECTION
   ============================================= */
.p-property-contact {
  padding-top: 60px;
  padding-bottom: 100px;
}

.p-property-contact__card {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--color-bg-light);
  border-radius: var(--radius-leaf);
  padding: 50px 50px 56px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.p-property-contact__header {
  text-align: center;
  margin-bottom: 28px;
}

.p-property-contact__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(22px, 12.857px + 1.19vw, 30px);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 14px;
}

.p-property-contact__title-icon--right {
  transform: scaleX(-1);
}

.p-property-contact__subtitle {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.9;
}

/* Form groups */
.p-property-contact__group {
  margin-bottom: 32px;
  margin-top: 50px;
}

.p-property-contact__group-title {
  position: relative;
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  padding: 4px 0 10px 12px;
  margin-bottom: 20px;
  background-image: radial-gradient(circle, #B38E5C 1.5px, transparent 1.5px);
  background-size: 4px 3px;
  background-position: 0 100%;
  background-repeat: repeat-x;
}
.p-property-contact__group-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 8px;
  width: 4px;
  background: var(--color-green);
}

.p-property-contact__row {
  margin-bottom: 16px;
}

.p-property-contact__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 8.33vw, 100px);
}

.p-property-contact__inline-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 16px;
}

.p-property-contact__row--inline {
  display: contents;
}

.p-property-contact__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.p-property-contact__label {
  font-size: 18px;
  font-weight: 300;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-property-contact__label--inline {
  flex-shrink: 0;
  white-space: nowrap;
  padding-top: 8px;
}

.p-property-contact__req {
  display: inline-block;
  padding: 1px 6px;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 400;
  border-radius: 2px;
}

.p-property-contact__input-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

.p-property-contact__input {
  padding: 8px 10px;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  border: 2px solid var(--color-green);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.p-property-contact__input::placeholder {
  color: #bbb;
}

.p-property-contact__input:focus {
  border-color: var(--color-green);
  opacity: 1;
}

.p-property-contact__input--full {
  width: 100%;
}

.p-property-contact__form .s-search__ms-trigger {
  padding: 8px 10px;
  border-color: var(--color-green);
}

.p-property-contact__budget-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-property-contact__budget-sep {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  flex-shrink: 0;
}

.p-property-contact__input--budget {
  flex: 1;
  width: 0;
}

.p-property-contact__textarea {
  width: 100%;
  flex: 1;
  padding: 10px;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  border: 2px solid var(--color-green);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s ease;
}

.p-property-contact__textarea:focus {
  border-color: var(--color-green);
}

/* 3-column checkbox row */
.p-property-contact__check-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  margin-top: 50px;
}

.p-property-contact__check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-property-contact__check-title {
  position: relative;
  font-size: 18px;
  font-weight: 300;
  color: var(--color-text);
  padding: 2px 0 8px 10px;
  margin-bottom: 4px;
  background-image: radial-gradient(circle, #B38E5C 1.5px, transparent 1.5px);
  background-size: 4px 3px;
  background-position: 0 100%;
  background-repeat: repeat-x;
}
.p-property-contact__check-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 8px;
  width: 4px;
  background: var(--color-green);
}

.p-property-contact__checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--color-text);
  cursor: pointer;
}

.p-property-contact__checkbox-label input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-green);
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--color-green);
  border-radius: 2px;
  background: var(--color-white);
  position: relative;
  cursor: pointer;
}

.p-property-contact__checkbox-label input[type=checkbox]:checked {
  background: var(--color-green);
}

.p-property-contact__checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: 2.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.p-property-contact__submit-wrap {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.p-property-contact__submit {
  min-width: 200px;
  font-size: var(--fs-md);
  padding: 14px 48px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  /* ---- Page layout ---- */
  .p-property-detail {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 30px;
    padding-bottom: 32px;
    overflow-x: hidden;
  }
  /* Sidebar now carries contact + map + recommended — keep it, stacked below the main column */
  .p-property-detail__sidebar {
    margin-top: 40px;
  }
  .p-property-aside {
    position: static;
  }
  /* ---- Gallery ---- */
  .p-property-detail__gallery-main {
    aspect-ratio: 4/3;
  }
  .p-property-detail__gallery-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
  }
  .p-property-detail__gallery-arrow {
    width: 36px;
    height: 36px;
  }
  /* ---- Info box ---- */
  .p-property-detail__info-box {
    padding: 16px;
    margin-top: 32px;
  }
  .p-property-detail__info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .p-property-detail__info-label {
    font-size: 16px;
    /* Narrower value column on mobile: short labels still align at a shared
       start point, just closer to the label. インターネット is longer than this,
       so its value follows naturally and its gap stays as-is. */
    min-width: 5.5em;
  }
  .p-property-detail__info-value {
    font-size: 16px;
  }
  /* ---- Facility pills: smaller on mobile ---- */
  /* The pill/text count is irregular, so stack the label (head) above the
     content (body) instead of placing them side by side. */
  .p-property-detail__tags-row {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 18px;
    gap: 8px;
  }
  .p-property-detail__tags-label {
    font-size: 16px;
    padding-top: 0;
  }
  .p-property-detail__tags {
    gap: 6px;
  }
  .p-property-detail__tag {
    padding: 3px 10px;
    font-size: 12px;
    border-width: 1px;
  }
  /* ---- Content sections ---- */
  .p-property-detail__section {
    margin-top: 40px;
  }
  .p-property-detail__section--with-bg {
    padding-inline: 12px;
    padding-top: 16px;
    margin-top: 32px;
  }
  .p-property-detail__section-title {
    font-size: 16px;
  }
  /* ---- Room table: horizontal scroll on mobile ---- */
  .p-property-detail__room-table-wrap {
    overflow-x: auto;
  }
  .p-property-detail__room-table th,
  .p-property-detail__room-table td {
    padding: 12px 16px;
    white-space: nowrap;
  }
  .p-property-detail__floorplans {
    margin-top: 24px;
    padding-top: 20px;
  }
  .p-property-detail__floorplans-slider {
    padding-inline: 0;
  }
  .p-property-detail__floorplans:not(.is-single) .p-property-detail__floorplans-slider::before, .p-property-detail__floorplans:not(.is-single) .p-property-detail__floorplans-slider::after {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 9px;
    height: 9px;
    border: solid color-mix(in srgb, var(--color-primary) 72%, transparent);
    border-width: 0 1.25px 1.25px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .p-property-detail__floorplans:not(.is-single) .p-property-detail__floorplans-slider::before {
    content: "";
    left: 9px;
    transform: translateY(-50%) rotate(135deg);
  }
  .p-property-detail__floorplans:not(.is-single) .p-property-detail__floorplans-slider::after {
    content: "";
    right: 9px;
    transform: translateY(-50%) rotate(-45deg);
  }
  .p-property-detail__floorplans.can-scroll-prev:not(.is-scrolling) .p-property-detail__floorplans-slider::before,
  .p-property-detail__floorplans.can-scroll-next:not(.is-scrolling) .p-property-detail__floorplans-slider::after {
    opacity: 1;
  }
  .p-property-detail__floorplans-arrow {
    display: none;
  }
  .p-property-detail__floorplan {
    flex-basis: 112px;
  }
  /* ---- Header ---- */
  .p-property-detail__header {
    margin-bottom: 32px;
  }
  /* ---- Map ---- */
  .p-property-detail__map iframe {
    height: 240px;
  }
  /* ---- Section title indent (room table) ---- */
  .p-property-detail__section-title--with-table {
    margin-left: 12px;
  }
  /* ---- Sidebar form ---- */
  .p-property-sidebar__checkboxes--cols2 {
    grid-template-columns: 1fr 1fr;
  }
  .p-property-sidebar__quick-section {
    margin-top: 32px;
  }
  /* ---- Contact form title ---- */
  .p-property-contact__title {
    font-size: var(--fs-xl);
    gap: 8px;
  }
  .p-property-contact__title-icon {
    width: 22px;
    height: 20px;
  }
  /* ---- Contact form ---- */
  .p-property-contact {
    padding: 40px 0;
  }
  .p-property-contact__card {
    padding: 28px 20px 36px;
    border-radius: 0;
  }
  .p-property-contact__row--split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-property-contact__inline-rows {
    grid-template-columns: 1fr;
  }
  .p-property-contact__label--inline {
    padding-top: 0;
  }
  .p-property-contact__check-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-property-contact__input-group {
    grid-template-columns: 1fr 1fr;
  }
  .p-property-detail__info-row {
    gap: 12px;
  }
}
/* =============================================
   CONTACT BANNER (bottom of the content section → /inquiry)
   Full-width below both columns, aligned with the page content.
   ============================================= */
/* Contact banner — grid child of .p-property-detail. On desktop it auto-places in
   row 2 of column 1, spanning the full width of the main column; the grid row-gap
   provides the space above it. On mobile the grid collapses to one column and the
   banner falls to the very bottom, above the footer. */
.p-property-banner {
  grid-column: 1/2;
  display: block;
  width: 100%;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-property-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
@media (hover: hover) {
  .p-property-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 768px) {
  .p-property-banner {
    grid-column: auto;
    margin-top: 40px;
  }
}
/* =============================================
   PAGE HERO (p-prop-list-hero)
   Reusable hero for interior pages.
   Background image is set via inline style per page.
   ============================================= */
.p-prop-list-hero {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 360px;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
}

.p-prop-list-hero__left {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 36px 0 var(--space-inline-pc);
}

.p-prop-list-hero__card {
  background: #ffffff;
  border-radius: var(--radius-leaf);
  padding: 40px 30px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: none;
}

.p-prop-list-hero__eyebrow {
  font-size: clamp(16px, 13.714px + 0.298vw, 18px);
  border-left: 4px solid var(--color-green);
  padding-left: 10px;
}

.p-prop-list-hero__title {
  /* Single hero-title size shared by every page (except the homepage top hero).
     Per-page partials must NOT re-declare font-size — keep this the one source
     of truth. Mobile override is in the MOBILE block below. */
  font-size: clamp(32px, 13.714px + 2.381vw, 48px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap; /* keep the title on one line — the fit-content card grows to cover it */
}

.p-prop-list-hero__desc {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.8;
  white-space: nowrap;
  margin-top: 8px;
  padding-bottom: 10px;
}

/* Optional CTA button rendered below the desc (e.g. /area hero) */
.p-prop-list-hero__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 30px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .p-prop-list-hero__btn:hover {
    background: #0a512e;
    transform: translateY(-2px);
  }
}

.p-prop-list-hero__btn-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.p-prop-list-hero__btn-icon svg {
  width: 100%;
  height: 100%;
}

.p-prop-list-hero__shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + 400px);
  height: 110%;
  background-image: url("../images/hero.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left 58%;
  z-index: 1;
}

.p-prop-list-hero__right {
  position: relative;
  z-index: 1;
}

.p-prop-list-hero__mobile-icon {
  display: none;
}

/* =============================================
   PROPERTY ARCHIVE VARIANT (--property)
   Full-bleed top-page image, black gradient overlay,
   no white card — just heading-font title + normal desc.
   ============================================= */
.p-prop-list-hero--property {
  display: flex;
  align-items: center;
  min-height: 360px;
}

.p-prop-list-hero--property::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.24) 55%, rgba(0, 0, 0, 0.08) 100%);
  z-index: 1;
}

.p-prop-list-hero--property .p-prop-list-hero__left {
  width: 100%;
  padding: 0 var(--space-inline-pc);
}

.p-prop-list-hero--property .p-prop-list-hero__card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-left: 0;
  width: 100%;
  color: var(--color-white);
}

.p-prop-list-hero--property .p-prop-list-hero__title {
  font-family: var(--font-heading);
  color: var(--color-white);
  white-space: normal;
  /* carries the contrast the lighter scrim no longer provides. Pages that
     repaint this copy dark for a white-panel hero must also reset the shadow
     (see _guide.scss and the per-page partials). */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.p-prop-list-hero--property .p-prop-list-hero__desc {
  color: var(--color-white);
  white-space: normal;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.p-prop-list-hero--property .p-prop-list-hero__shape,
.p-prop-list-hero--property .p-prop-list-hero__right {
  display: none;
}

/* =============================================
   MOBILE
   ============================================= */
@media (max-width: 768px) {
  .p-prop-list-hero {
    grid-template-columns: 1fr;
    min-height: 496px;
    background-image: var(--hero-mobile-bg) !important;
    background-size: cover;
    background-position: center top;
    margin-bottom: 10px;
  }
  .p-prop-list-hero__left {
    background: transparent;
    padding: 0 var(--space-inline-sp);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .p-prop-list-hero__card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    align-items: center;
    text-align: center;
    width: auto;
  }
  .p-prop-list-hero__title {
    font-size: 22px; /* shared mobile hero-title size (see base rule above) */
    font-weight: 500;
    white-space: normal;
  }
  .p-prop-list-hero__desc {
    padding-top: 20px;
    padding-bottom: 40px;
    white-space: normal;
    font-size: 16px;
  }
  .p-prop-list-hero__desc br {
    display: none;
  }
  .p-prop-list-hero__btn {
    margin-top: 10px;
    padding: 11px 20px;
    font-size: 14px;
    gap: 7px;
  }
  .p-prop-list-hero__btn-icon {
    width: 15px;
    height: 15px;
  }
  .p-prop-list-hero__mobile-icon {
    display: block;
    max-width: 180px;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 40px;
    flex-shrink: 0;
  }
  .p-prop-list-hero__shape,
  .p-prop-list-hero__right {
    display: none;
  }
}
/* =============================================
   PROPERTY LIST / SEARCH RESULTS (p-prop-list-)
   ============================================= */
/* ---- Loading skeleton — mirrors the vertical .c-prop-card ---- */
@keyframes prop-shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}
.c-prop-card-skeleton__img,
.c-prop-card-skeleton__line {
  /* low-opacity --color-primary-light, with a brighter sweep band for the shimmer */
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-light) 10%, transparent) 25%, color-mix(in srgb, var(--color-primary-light) 22%, transparent) 50%, color-mix(in srgb, var(--color-primary-light) 10%, transparent) 75%);
  background-size: 600px 100%;
  animation: prop-shimmer 1.4s infinite linear;
}

.c-prop-card-skeleton {
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  height: 430px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.c-prop-card-skeleton__img {
  height: 188px;
  flex-shrink: 0;
}

.c-prop-card-skeleton__body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.c-prop-card-skeleton__line {
  border-radius: 4px;
  height: 14px;
}
.c-prop-card-skeleton__line--name {
  height: 18px;
  width: 82%;
  margin-bottom: 12px;
}
.c-prop-card-skeleton__line--station {
  height: 13px;
  width: 66%;
  margin-bottom: 8px;
}
.c-prop-card-skeleton__line--size {
  height: 13px;
  width: 54%;
}
.c-prop-card-skeleton__line--price {
  height: 20px;
  width: 44%;
  margin-top: auto;
}

/* ---- Two-column layout ---- */
.p-prop-list-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  padding-top: 60px;
  padding-bottom: 80px;
  padding-inline: max(20px, (100% - 1320px) / 2);
}

.p-prop-list-main {
  min-width: 0;
}

/* ---- Count heading ---- */
.p-prop-list-count {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-light);
  margin-bottom: 24px;
}
.p-prop-list-count strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin-right: 4px;
}
.p-prop-list-count__range {
  padding-left: 2px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-light);
  white-space: nowrap;
}
.p-prop-list-count img {
  flex-shrink: 0;
}

/* ---- Card list ---- */
.p-prop-list-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Single horizontal card ---- */
.p-prop-list-card {
  --prop-card-image-width: 280px;
  position: relative; /* anchor for the floating type tag */
  border: 3px solid var(--color-green);
}

.p-prop-list-card__link {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0px;
  /* Uniform 250px card; grows only when clamped text needs the room (narrow screens) */
  min-height: 250px;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.p-prop-list-card__link:hover {
  opacity: 1;
}
.p-prop-list-card__link:hover .p-prop-list-card__title {
  color: var(--color-green);
}

/* Image */
.p-prop-list-card__img-wrap {
  position: relative;
  flex-shrink: 0;
  width: var(--prop-card-image-width);
  height: auto;
  align-self: stretch;
  overflow: hidden;
  margin: 0;
}

/* Absolutely positioned so the photo's own aspect ratio never affects the
   card height — only the text column (and min-height) sizes the card */
.p-prop-list-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.p-prop-list-card__link:hover .p-prop-list-card__img {
  transform: scale(1.04);
}

.p-prop-list-card__img--placeholder {
  width: 100%;
  height: 100%;
  background: #e8f5ea;
}

/* Body */
.p-prop-list-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
}

/* Property type — top-left of the card, covering the left border line */
.p-prop-list-card__type {
  position: absolute;
  top: 12px;
  left: -2px; /* extend over the card's 3px left border */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-gold);
  /* Color-coded by property type */
}
.p-prop-list-card__type--apartment {
  background: #45B62E;
}
.p-prop-list-card__type { /* slightly warmer than --color-green */ }
.p-prop-list-card__type--serviced_apartment {
  background: var(--color-gold);
}
.p-prop-list-card__type--condominium {
  background: #557EB5;
}
.p-prop-list-card__type--other {
  background: #8A8A8A;
}

.p-prop-list-card__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  transition: color 0.2s ease;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-prop-list-card__desc {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta list */
.p-prop-list-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

.p-prop-list-card__meta-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}
.p-prop-list-card__meta-item > span:not(.p-prop-list-card__meta-text),
.p-prop-list-card__meta-item > img,
.p-prop-list-card__meta-item > svg {
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* The area pin SVG has whitespace on its left side — nudge it back into line */
.p-prop-list-card__meta-icon--area {
  margin-left: -1px;
}

.p-prop-list-card__meta-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Facility pills — pinned to the bottom of the card body */
.p-prop-list-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}

.p-prop-list-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border: 1.5px solid var(--color-green);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-green);
  white-space: nowrap;
}
.p-prop-list-card__tag--inactive {
  border-color: #d0d0d0;
  color: #b0b0b0;
  background: var(--color-bg-light);
}

/* Empty state */
.p-prop-list-empty {
  padding: 60px 0;
  font-size: var(--fs-md);
  color: var(--color-text-light);
  line-height: 1.9;
}

/* ---- Pagination ---- */
.p-prop-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-block: 48px;
}
.p-prop-list-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  font-size: 16px;
  color: var(--color-text);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s;
}
.p-prop-list-pagination .page-numbers.current {
  background: #d9f0de;
  font-weight: 600;
}
.p-prop-list-pagination .page-numbers:not(.current):not(.dots):hover {
  background: #edf7ef;
}
.p-prop-list-pagination .page-numbers.prev, .p-prop-list-pagination .page-numbers.next {
  background: #d9f0de;
  width: 40px;
}
.p-prop-list-pagination .page-numbers.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.p-prop-list-pagination .page-numbers.dots {
  background: none;
  cursor: default;
  letter-spacing: 0.05em;
}

.p-prop-list-pagination__chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}
.p-prop-list-pagination__chevron--prev {
  transform: rotate(-135deg) translate(-1px, 1px);
}
.p-prop-list-pagination__chevron--next {
  transform: rotate(45deg) translate(-1px, 1px);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-prop-list-card {
    --prop-card-image-width: 220px;
  }
  .p-prop-list-layout {
    grid-template-columns: 1fr 300px;
    gap: 32px;
  }
  .p-prop-list-card__img-wrap {
    height: auto;
    align-self: stretch;
  }
}
@media (max-width: 768px) {
  .post-type-archive-property .p-prop-list-hero {
    display: none;
  }
  /* Layout */
  .p-prop-list-layout {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 48px;
    gap: 40px;
  }
  .p-prop-list-sidebar {
    display: none;
  }
  /* Count */
  .p-prop-list-count {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .p-prop-list-count strong {
    font-size: 18px;
  }
  .p-prop-list-count {
    /* The range is nowrap and ~150px wide, so the line always breaks on a phone.
       Give it its own line (and drop the now-dangling separator) instead of
       letting it wrap onto a second line led by a stray "|". It also kept the
       16px desktop size while its siblings dropped to 14px. */
  }
  .p-prop-list-count__range {
    display: block;
    padding-left: 0;
    font-size: 14px;
  }
  .p-prop-list-count__sep {
    display: none;
  }
  /* Card: stack image above body on mobile */
  .p-prop-list-card__link {
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: auto;
  }
  .p-prop-list-card__img-wrap {
    width: 100%;
    height: 200px;
    margin-right: 0;
    margin-bottom: 0;
  }
  .p-prop-list-card__title {
    font-size: 18px;
    font-weight: 700;
    white-space: normal;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* Small phones: 7 pagination chips at 40px + gaps need 316px, so below ~360 the
   row broke onto two lines. Trim the chips to keep it on one. */
@media (max-width: 400px) {
  .p-prop-list-pagination {
    gap: 4px;
    margin-block: 32px;
  }
  .p-prop-list-pagination .page-numbers {
    min-width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .p-prop-list-pagination .page-numbers.prev, .p-prop-list-pagination .page-numbers.next {
    width: 34px;
  }
}
/* =============================================
   GUIDE PAGE (p-guide-)
   お部屋探しガイド (slug: guide)
   ============================================= */
/* =============================================
   HERO — promotion-style desktop treatment.
   White panel fades over the cityscape image that
   sits in the right ~60%. Dark green title + body.
   Shared by /guide (.p-guide), /product_guide (.p-pg),
   /public_services (.p-ps), /public_transportation (.p-pt)
   AND /faq (.p-faq), /privacy (.p-privacy) via :is() so the
   heroes match — keep them in sync here.
   ============================================= */
@media (min-width: 768.02px) {
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  /* image — right 60% of the hero, zoom-filled (matches /promotion) */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  /* white panel on the left ~40%, fading over the image's left edge (matches /promotion) */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 16px;
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
  }
  /* dark copy on the white panel — no scrim to compensate for, so no shadow */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-area, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    line-height: 2;
    text-shadow: none;
  }
}
/* /guide hero is shorter than the shared default on mobile (desktop matches the
   site-wide 360px set in the shared :is() block above) */
@media (max-width: 768px) {
  .p-guide .p-prop-list-hero--property {
    min-height: 210px;
  }
}
/* ---- HERO mobile: same split layout as desktop, reduced.
   Image fills the right 50%, text stays on the left.
   .p-flow, .p-bk, .p-about and .p-promo are included on mobile only — their
   desktop hero keeps its own treatment, but on SP they match /guide. ---- */
@media (max-width: 768px) {
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property {
    min-height: 240px;
    background-image: none !important; /* image painted by ::after in the right 50% */
    background-color: var(--color-white);
  }
  /* image — right 60% of the hero */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  /* white panel on the left, fading later so text can sit over the image */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 45%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 85%);
    z-index: 1;
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 62%;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
    font-size: 12px;
  }
  /* dark copy on the white panel — no scrim to compensate for, so no shadow */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.8;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 0;
    /* base mobile hero hides all <br>; re-enable the phone-only break */
  }
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__desc br.sp {
    display: inline;
  }
  /* the centered mobile illustration isn't used in this split layout */
  :is(.p-guide, .p-pg, .p-ps, .p-pt, .p-thaigo, .p-faq, .p-flow, .p-area, .p-bk, .p-about, .p-promo, .p-privacy) .p-prop-list-hero--property .p-prop-list-hero__mobile-icon {
    display: none;
  }
}
/* =============================================
   INTRO
   ============================================= */
.p-guide-intro {
  padding-block: 64px 48px;
  padding-inline: var(--space-inline-pc);
}

.p-guide-intro__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-guide-intro__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.55;
  margin: 0 0 28px;
  padding-bottom: 22px;
  position: relative;
}

.p-guide-intro__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--color-accent);
}

.p-guide-intro__lead {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 2;
  margin-bottom: 24px;
  text-align: left;
}
.p-guide-intro__lead:last-child {
  margin-bottom: 0;
}
.p-guide-intro__lead a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
  font-weight: 500;
}
.p-guide-intro__lead a:hover {
  color: var(--color-accent);
}

/* =============================================
   GUIDE MENU CARDS
   ============================================= */
.p-guide-cards {
  background: var(--color-bg-light);
  padding-block: 60px 90px;
  padding-inline: var(--space-inline-pc);
}

.p-guide-cards__inner {
  max-width: 1320px;
  margin-inline: auto;
}

/* centered heading flanked by short rules */
.p-guide-cards__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 40px;
}
.p-guide-cards__heading::before, .p-guide-cards__heading::after {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--color-primary);
}

.p-guide-cards__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---- Single card ---- */
.p-guide-card {
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.p-guide-card:hover {
  box-shadow: 0 6px 18px rgba(6, 51, 28, 0.12);
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.p-guide-card__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 24px 24px;
  color: var(--color-text);
  text-decoration: none;
  height: 100%;
}

.p-guide-card__icon {
  grid-row: 1/3;
  grid-column: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}
.p-guide-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-guide-card__title {
  grid-row: 1;
  grid-column: 2;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0;
}

.p-guide-card__desc {
  grid-row: 2;
  grid-column: 2;
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.8;
  margin: 12px 0 0;
}

.p-guide-card__arrow {
  grid-row: 1/3;
  grid-column: 3;
  align-self: center;
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}
.p-guide-card__arrow svg {
  width: 100%;
  height: 100%;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-guide-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .p-guide-intro {
    padding-block: 24px 28px;
  }
  .p-guide-intro__title {
    line-height: 1.5;
    font-size: 18px;
    margin-bottom: 22px;
  }
  .p-guide-intro__lead {
    line-height: 1.9;
    margin-bottom: 18px;
    font-size: 14px;
  }
  .p-guide-cards {
    padding-block: 44px 56px;
  }
  .p-guide-cards__heading {
    margin-bottom: 28px;
  }
  .p-guide-cards__heading::before, .p-guide-cards__heading::after {
    width: 28px;
  }
  .p-guide-cards__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-guide-card__link {
    padding: 20px;
  }
  .p-guide-card__desc {
    font-size: 14px;
    margin-top: 8px;
  }
}
/* =============================================
   FLOW PAGE (p-flow-)
   ご契約の流れ (slug: flow)
   Property-style hero → 7 step cards → contact CTA.
   ============================================= */
/* ---- Breadcrumb (below hero, same as property page) ---- */
.p-flow-breadcrumb {
  border-bottom: 1px solid #eee;
  background: var(--color-white);
}

.p-flow-breadcrumb__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 14px var(--space-inline-sp);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}
.p-flow-breadcrumb__inner a {
  text-decoration: none;
  color: var(--color-text-light);
}
.p-flow-breadcrumb__inner a:hover {
  color: var(--color-primary);
}
.p-flow-breadcrumb__inner .is-current {
  color: var(--color-text);
}

/* ---- Steps section ---- */
.p-flow-steps {
  padding-block: 70px 90px;
  padding-inline: var(--space-inline-pc);
  background: var(--color-white);
}

.p-flow-steps__inner {
  max-width: 940px;
  margin-inline: auto;
}

.p-flow-steps__heading {
  margin-bottom: 24px;
}

/* intro lead under the section title (design: ご契約の流れ2.png) */
.p-flow-steps__lead {
  margin: 0 auto 48px;
  max-width: 760px;
  text-align: center;
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
}

.p-flow-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Single step row ---- */
.p-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 110px 110px 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  background: var(--color-bg-light);
  border-radius: 12px;
}

/* downward connector between rows */
.p-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 10px solid #d8d6cf;
  z-index: 1;
}

/* ---- STEP badge (green circle) ---- */
.p-flow-step__badge {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  /* right divider */
}
.p-flow-step__badge::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64px;
  background: #d8d6cf;
}

.p-flow-step__badge-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}

.p-flow-step__badge-num {
  font-family: var(--font-heading);
  font-size: clamp(24px, 17.143px + 0.893vw, 30px);
  font-weight: 700;
}

/* ---- Icon ---- */
.p-flow-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* inline SVG icon (e.g. step 2, same as homepage feature) */
.p-flow-step__svg {
  display: inline-flex;
  color: var(--color-primary);
}
.p-flow-step__svg svg {
  width: 54px;
  height: 54px;
}

/* ---- Body ---- */
.p-flow-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px;
  line-height: 1.4;
}

.p-flow-step__desc {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.8;
  margin: 0;
}

/* ---- Contact CTA ---- */
.p-flow-contact {
  padding-block: 64px;
  padding-inline: var(--space-inline-pc);
  background: var(--color-bg-light);
}

.p-flow-contact__inner {
  max-width: 1040px;
  margin-inline: auto;
}

.p-flow-contact__heading {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 40px;
}

.p-flow-contact__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-flow-contact__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--color-white);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-flow-contact__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.p-flow-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-white);
}

.p-flow-contact__card--line .p-flow-contact__icon {
  background: var(--color-line);
}

.p-flow-contact__card--tel .p-flow-contact__icon {
  background: var(--color-primary);
}

.p-flow-contact__card--form .p-flow-contact__icon {
  background: var(--color-accent);
}

.p-flow-contact__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.p-flow-contact__main {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.p-flow-contact__main--tel {
  font-size: 22px;
  letter-spacing: 0.01em;
}

.p-flow-contact__sub {
  font-size: 14px;
  color: var(--color-text-light);
}

.p-flow-contact__arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-light);
  flex-shrink: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .p-flow-steps {
    padding-block: 44px 56px;
  }
  .p-flow-steps__heading {
    margin-bottom: 18px;
  }
  .p-flow-steps__lead {
    margin-bottom: 32px;
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
  }
  .p-flow-step {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "badge body" "icon  body";
    gap: 6px 16px;
    padding: 20px;
    align-items: center;
  }
  .p-flow-step__badge {
    grid-area: badge;
    width: 64px;
    height: 64px;
  }
  .p-flow-step__badge::after {
    display: none;
  }
  .p-flow-step__icon {
    grid-area: icon;
  }
  .p-flow-step__icon span,
  .p-flow-step__icon img {
    width: 30px !important;
    height: 30px !important;
  }
  .p-flow-step__icon .p-flow-step__svg {
    width: auto !important;
    height: auto !important;
  }
  .p-flow-step__icon .p-flow-step__svg svg {
    width: 40px;
    height: 40px;
  }
  .p-flow-step__body {
    grid-area: body;
  }
  .p-flow-step__title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .p-flow-step__desc {
    font-size: 14px;
    line-height: 1.7;
  }
  .p-flow-contact {
    display: none;
  }
}
/* =============================================
   BANGKOK PAGE (p-bk-)
   バンコクの物件を知る (slug: bangkok)
   ============================================= */
/* ---- Sections wrapper ---- */
.p-bk-sections {
  padding-block: 56px 80px;
  padding-inline: var(--space-inline-pc);
}

.p-bk-sections__inner {
  max-width: 1320px; /* match hero / top-page content width */
  margin-inline: auto;
}

/* ---- Section heading (triangle bullet) ---- */
.p-bk-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.p-bk-heading__icon {
  display: inline-flex;
  align-items: center;
}

/* ---- List ---- */
.p-bk-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---- Single item: card with the title on top, then desc (left) + fixed image (right) ---- */
.p-bk-item {
  padding: 28px;
  background: var(--color-bg-light);
  border: 1px solid #ececec;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* desc + image row — image top-aligns with the desc (below the title);
   card height grows with the taller of the two */
.p-bk-item__content {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

.p-bk-item__media {
  width: 280px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
}
.p-bk-item__media > img,
.p-bk-item__media > .p-bk-item__media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-bk-item__media-placeholder {
  background: linear-gradient(135deg, #e8f5ea 0%, #cfe9d4 100%);
}

.p-bk-item__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}

.p-bk-item__num {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.p-bk-item__desc {
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.95;
  margin: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-bk-item {
    padding: 24px;
  }
  .p-bk-item__content {
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .p-bk-sections {
    padding-block: 36px 64px;
  }
  .p-bk-heading {
    margin-bottom: 22px;
  }
  .p-bk-item {
    padding: 18px;
  }
  .p-bk-item__content {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .p-bk-item__media {
    order: -1; /* image above the text on mobile */
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
  }
  .p-bk-item__title {
    font-size: 18px;
    gap: 12px;
    margin-bottom: 14px;
  }
  .p-bk-item__num {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .p-bk-item__desc {
    line-height: 1.85;
  }
  .p-bk-list {
    gap: 56px;
  }
}
/* =============================================
   PROPERTY TYPES PAGE (p-tp-)
   バンコク賃貸物件の種別 (slug: type_property)

   Hero = guide-style split.
   Body layout + sidebar = reused from /promotion
   (.p-promo__breadcrumb / .p-promo__inner / .p-promo__main /
    .p-promo__aside + the promotion-aside partial).
   ============================================= */
/* =============================================
   HERO — guide-style split: white panel fades over
   the interior image in the right ~60%.
   ============================================= */
@media (min-width: 768.02px) {
  .p-tp .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-tp .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-tp .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 16px;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 2;
  }
}
/* ---- HERO mobile: same split layout, reduced. Image right 60%, text left. ---- */
@media (max-width: 768px) {
  .p-tp .p-prop-list-hero--property {
    min-height: 240px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-tp .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-tp .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 45%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 85%);
    z-index: 1;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 62%;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.8;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 0;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__desc br.sp {
    display: inline;
  }
  .p-tp .p-prop-list-hero--property .p-prop-list-hero__mobile-icon {
    display: none;
  }
}
/* sidebar is shared with /promotion — hide its banners on this page only */
.p-tp .p-promo-aside__banner {
  display: none;
}

/* =============================================
   TYPE SECTIONS (inside .p-promo__main)
   ============================================= */
.p-tp-type {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas: "title   title" "lead    lead" "content media";
  column-gap: 36px;
  align-items: start;
}
.p-tp-type + .p-tp-type {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #eaecea;
}

/* heading with a green left bar */
.p-tp-type__title {
  grid-area: title;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 4px solid var(--color-primary);
}

.p-tp-type__lead {
  grid-area: lead;
  margin-bottom: 26px;
}
.p-tp-type__lead p {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.95;
  margin: 0 0 6px;
}
.p-tp-type__lead p:last-child {
  margin-bottom: 0;
}

.p-tp-type__content {
  grid-area: content;
  min-width: 0;
}

.p-tp-type__points {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.p-tp-type__points li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 12px;
}
.p-tp-type__points li:last-child {
  margin-bottom: 0;
}
.p-tp-type__points li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.p-tp-type__cta {
  margin-top: 22px;
  /* primary-colour, pill-shaped button (override the default c-btn) */
}
.p-tp-type__cta .c-btn {
  padding: 13px 36px; /* symmetric so the label sits centred; narrower */
  background: var(--color-primary);
  border-radius: 999px;
  font-weight: 600;
}
.p-tp-type__cta .c-btn:hover {
  background: #0a4a29;
  box-shadow: 0 6px 16px rgba(6, 51, 28, 0.22);
}

.p-tp-type__media {
  grid-area: media;
  display: block;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
}
.p-tp-type__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-tp-type {
    grid-template-columns: 1fr 260px;
    column-gap: 24px;
  }
}
@media (max-width: 768px) {
  /* single column: title → image → lead → bullets + button */
  .p-tp-type__lead p {
    font-size: 16px;
  }
  .p-tp-type__points li {
    font-size: 16px;
  }
  .p-tp-type__cta .c-btn {
    font-size: 16px;
    font-weight: 500;
  }
  .p-tp-type {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "lead" "content";
    row-gap: 20px;
  }
  .p-tp-type + .p-tp-type {
    margin-top: 36px;
    padding-top: 36px;
  }
  .p-tp-type__title {
    font-size: var(--fs-xl);
    margin: 0; /* gaps handled by row-gap */
  }
  /* single-column: the 4:3 image spans full width and gets too big — cap it
     and centre it */
  .p-tp-type__media {
    max-width: 360px;
    margin-inline: auto;
    width: 100%;
  }
  .p-tp-type__lead {
    margin-bottom: 0;
  }
  /* centre the button on phones */
  .p-tp-type__cta {
    text-align: center;
  }
  /* divider line below the last type section, before the stacked aside */
  .p-tp .p-promo__aside {
    border-top: 1px solid #eaecea;
    padding-top: 36px;
  }
}
/* =============================================
   PRODUCT (EQUIPMENT) GUIDE PAGE (p-pg-)
   設備品ガイド (slug: product_guide)

   Layout reuses the promotion shell:
   .p-promo__breadcrumb / .p-promo__inner / .p-promo__main / .p-promo__aside
   (defined in _promotion.scss). This file styles the page-specific pieces:
   the numbered equipment list, the aside heading + company box, and the
   bottom 関連コンテンツ cards.
   ============================================= */
/* ---------------------------------------------
   NUMBERED EQUIPMENT LIST (main column)
   --------------------------------------------- */
.p-pg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.p-pg-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: var(--color-white);
  padding: 26px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.p-pg-item .p-pg-item__text {
  order: 1;
}
.p-pg-item .p-pg-item__media {
  order: 2;
}
.p-pg-item--media-left {
  grid-template-columns: 260px minmax(0, 1fr);
}
.p-pg-item--media-left .p-pg-item__media {
  order: 1;
}
.p-pg-item--media-left .p-pg-item__text {
  order: 2;
}

.p-pg-item__text {
  min-width: 0;
}

.p-pg-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.p-pg-item__num {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-heading);
}

.p-pg-item__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-pg-item__desc {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.95;
  margin: 0 0 12px;
}
.p-pg-item__desc:last-child {
  margin-bottom: 0;
}

.p-pg-item__media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
}
.p-pg-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* item 10 — ご入居前に確認しておきたいポイント checklist (design: 設備品ガイド2.png) */
.p-pg-check {
  margin-top: 6px;
}

.p-pg-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-pg-check__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

.p-pg-check__box {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-primary);
}
.p-pg-check__box svg {
  width: 12px;
  height: 12px;
}

/* item 10 — red voltage warning box (sits in the media slot) */
.p-pg-warning {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 18px;
  border: 1px solid #f1c9c9;
  border-radius: 8px;
  background: #fcf2f2;
}

.p-pg-warning__icon {
  width: 30px;
  height: 30px;
  color: #d24a4a;
}
.p-pg-warning__icon svg {
  width: 100%;
  height: 100%;
}

.p-pg-warning__title {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #c0392b;
}

.p-pg-warning__note {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #c0392b;
  line-height: 1.6;
}

/* ---------------------------------------------
   ASIDE — heading + 西村不動産 company box
   (cards/links inherit .p-promo-aside-* from _promotion.scss)
   --------------------------------------------- */
.p-pg-aside-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-pg-aside-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-pg-company {
  border: 1px solid #e6e1d6;
  border-radius: 10px;
  overflow: hidden;
}

.p-pg-company__title {
  margin: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  padding: 18px 24px;
}

.p-pg-company__body {
  background: var(--color-bg-footer-top); /* warm light surface */
  padding: 22px 24px;
}

.p-pg-company__stats {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.p-pg-company__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.p-pg-company__stat-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--color-accent);
}

.p-pg-company__btn {
  display: block;
  padding: 13px;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  transition: filter 0.2s ease, transform 0.2s ease;
  text-align: center;
}
.p-pg-company__btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

/* ---------------------------------------------
   関連コンテンツ — bottom cards (full width)
   --------------------------------------------- */
.p-pg-related {
  background: var(--color-bg-light);
  padding: 34px var(--space-inline-pc);
}

.p-pg-related__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-pg-related__heading {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 36px;
}

.p-pg-related__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-pg-related-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.p-pg-related-card__link:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-3px);
}

.p-pg-related-card__media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.p-pg-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-pg-related-card__body {
  display: block;
  padding: 16px 18px 18px;
  flex: 1;
}

.p-pg-related-card__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.p-pg-related-card__desc {
  display: block;
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.7;
}

.p-pg-related-card__arrow {
  align-self: flex-end;
  width: 22px;
  height: 22px;
  margin: 0 16px 16px;
  color: var(--color-accent);
}
.p-pg-related-card__arrow svg {
  width: 100%;
  height: 100%;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .p-pg-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  /* company CTA box is desktop-only */
  .p-pg-company {
    display: none;
  }
  .p-pg-check__item {
    font-size: 13px;
  }
  .p-pg-item,
  .p-pg-item--media-left {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    /* number+title+desc above the image on mobile */
  }
  .p-pg-item .p-pg-item__text,
  .p-pg-item--media-left .p-pg-item__text {
    order: 0;
  }
  .p-pg-item .p-pg-item__media,
  .p-pg-item--media-left .p-pg-item__media {
    order: 1;
  }
  .p-pg-item__media {
    aspect-ratio: 16/9;
  }
  .p-pg-item__title {
    font-size: 18px;
  }
  .p-pg-related {
    padding-block: 48px;
  }
  .p-pg-related__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* =============================================
   AREA GUIDE PAGE (p-area-)
   エリアから探す (slug: area)
   8 station-based area cards + map / points + CTA
   ============================================= */
/* ---- List wrapper ---- */
.p-area-list {
  padding-block: 64px 80px;
  padding-inline: var(--space-inline-pc);
}

.p-area-list__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/* centered heading with a short gold underline */
.p-area-list__heading {
  text-align: center;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 48px;
  padding-bottom: 18px;
  position: relative;
}

.p-area-list__heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--color-accent);
}

/* rows separated by thin dividers (no outer card border) */
.p-area-cards {
  display: flex;
  flex-direction: column;
}

/* =============================================
   SINGLE AREA CARD (row)
   media | body | features
   ============================================= */
.p-area-card {
  display: grid;
  grid-template-columns: 200px 1fr 320px;
  /* row1 = image height (auto), row2 absorbs the rest — so the button can sit
     directly under the image in column 1 while body/features span both rows */
  grid-template-rows: auto 1fr;
  column-gap: 36px;
  row-gap: 16px;
  align-items: start;
  padding-block: 36px;
  border-top: 1px solid #e4e6e3;
}
.p-area-card:first-child {
  border-top: 0;
}

.p-area-card__media {
  grid-column: 1;
  grid-row: 1;
}

.p-area-card__body {
  grid-column: 2;
  grid-row: 1/3;
}

.p-area-card__features {
  grid-column: 3;
  grid-row: 1/3;
}

.p-area-card__map-btn {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
} /* under the image */
/* ---- Media (number badge over the thumbnail) ---- */
.p-area-card__media {
  position: relative;
}

.p-area-card__img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
}

.p-area-card__num {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  line-height: 1;
}

/* ---- Body ---- */
.p-area-card__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2px 0 12px;
  line-height: 1.3;
}

.p-area-card__name-en {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-light);
}

.p-area-card__desc {
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.9;
  margin: 0 0 16px;
}

/* recommended-for chip + text */
.p-area-card__rec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

/* sub-label, not a button: no fill/pill — a bold green caption with a leading bar */
.p-area-card__rec-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  padding-left: 10px;
  border-left: 3px solid var(--color-accent);
}

.p-area-card__rec-text {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* map/search button — placed under the image (PC) / under features (SP) via grid */
.p-area-card__map-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .p-area-card__map-btn:hover {
    background: #0a512e;
    transform: translateY(-2px);
  }
}

/* ---- Features (right column) ---- */
.p-area-card__features {
  list-style: none;
  margin: 0;
  padding: 0 0 0 32px;
  border-left: 1px solid #e4e6e3;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.p-area-feature {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 14px;
  align-items: start;
}

.p-area-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.p-area-feature__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-area-feature__sub {
  display: block;
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-top: 3px;
}

/* =============================================
   EXTRA — area map + selection points
   ============================================= */
.p-area-extra {
  padding-block: 0 64px;
  padding-inline: var(--space-inline-pc);
}

.p-area-extra__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-top: 60px;
  border-top: 1px solid #e4e6e3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

.p-area-panel {
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 12px;
  padding: 30px 32px;
}

.p-area-panel__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 24px;
}

/* ---- Map panel ---- */
.p-area-map {
  display: flex;
  flex-direction: column;
}

.p-area-map__hint {
  font-size: 12px;
  color: var(--color-text-light);
  margin: -14px 0 16px;
  line-height: 1.5;
}

/* ---- interactive SVG map ---- */
.p-area-map__route {
  position: relative;
  flex: 1;
  background: var(--color-bg-light);
  border: 1px solid #e4e6e3;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}

.p-area-map__svg {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
  touch-action: pan-y; /* desktop wheel/drag zoom; keep vertical page scroll on touch */
  user-select: none; /* don't text-select the SVG labels while drag-panning */
  -webkit-user-select: none;
}

.js-area-map.is-grabbing .p-area-map__svg {
  cursor: grabbing;
}

/* decorative base layers */
.p-area-map__road {
  stroke: #e7e9e4;
  stroke-width: 13;
  stroke-linecap: round;
  fill: none;
}

.p-area-map__roadlbl {
  font-size: 22px;
  fill: #b3b8af;
  font-weight: 600;
}

.p-area-map__spine {
  stroke: #5db84e;
  stroke-width: 8;
  stroke-linecap: round;
  fill: none;
}

.p-area-map__silomline {
  stroke: #0e7d40;
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
}

.p-area-map__mrt {
  stroke: #1f63b0;
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
}

.p-area-map__sea {
  fill: #dbeaf5;
}

.p-area-map__sealbl {
  font-size: 30px;
  fill: #8fb3cf;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-anchor: middle;
}

.p-area-map__port circle {
  fill: var(--color-primary);
}

.p-area-map__port text {
  font-size: 24px;
  fill: var(--color-text);
  font-weight: 700;
}

.p-area-map__lntag text {
  font-size: 22px;
  fill: #fff;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* clickable area polygons */
.p-area-map__area {
  cursor: pointer;
  outline: none;
}

.p-area-map__card {
  fill: var(--color-white);
  stroke: #d6ddd4;
  stroke-width: 1.6;
  filter: drop-shadow(0 3px 7px rgba(35, 50, 40, 0.1));
  transition: fill 0.15s ease, stroke 0.15s ease, filter 0.15s ease;
}

/* JS toggles .is-hot on both the card anchor and its label (cross-highlight) */
.p-area-map__area.is-hot .p-area-map__card,
.p-area-map__area:focus-visible .p-area-map__card {
  fill: var(--color-primary);
  stroke: var(--color-primary);
  filter: drop-shadow(0 9px 16px rgba(6, 51, 28, 0.26));
}

@media (hover: hover) {
  .p-area-map__area:hover .p-area-map__card {
    fill: var(--color-primary);
    stroke: var(--color-primary);
    filter: drop-shadow(0 9px 16px rgba(6, 51, 28, 0.26));
  }
  /* hovering the label chip alone (no JS) still recolours its own text */
  .p-area-map__lbl:hover .p-area-map__jp {
    fill: var(--color-white);
  }
  .p-area-map__lbl:hover .p-area-map__en {
    fill: rgba(255, 255, 255, 0.82);
  }
}
/* floating area labels — drawn in their own <g> so they stack above every
   card, but they belong to the card underneath: the two highlight as one
   button (JS mirrors .is-hot onto both halves via their shared data-k). */
.p-area-map__lbl {
  cursor: pointer;
}

.p-area-map__lbl text {
  pointer-events: none;
}

/* invisible: every label sits inside its own card, so a filled chip here just
   draws a second rounded box inside the first. The rect stays in the markup as
   the label's hit area (pointer-events: all keeps a transparent fill hoverable). */
.p-area-map__lblbg {
  fill: transparent;
  pointer-events: all;
}

.p-area-map__jp {
  font-weight: 700;
  font-size: 30px;
  fill: var(--color-text);
  text-anchor: middle;
  transition: fill 0.15s ease;
}

.p-area-map__en {
  font-size: 18px;
  fill: #6f7b73;
  text-anchor: middle;
  letter-spacing: 0.04em;
  transition: fill 0.15s ease;
}

/* active: the label text flips to white so it reads as part of the now-green
   card rather than a separate white chip sitting on top of it */
.p-area-map__lbl.is-hot .p-area-map__jp {
  fill: var(--color-white);
}

.p-area-map__lbl.is-hot .p-area-map__en {
  fill: rgba(255, 255, 255, 0.82);
}

.p-area-map__tag {
  font-size: 13px;
  fill: var(--color-text-light);
  text-anchor: middle;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .p-area-map__card,
  .p-area-map__jp,
  .p-area-map__en {
    transition: none;
  }
}
.p-area-map__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid var(--color-primary);
  border-radius: 8px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.p-area-map__btn svg {
  width: 15px;
  height: 15px;
}
@media (hover: hover) {
  .p-area-map__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
  }
}

/* ---- Points panel ---- */
.p-area-points__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-area-points__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 14px;
  align-items: start;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.6;
}

.p-area-points__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  margin-top: 1px;
}
.p-area-points__check svg {
  width: 13px;
  height: 13px;
}

.p-area-points__note {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid #e4e6e3;
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.8;
}

/* =============================================
   CONSULT CTA
   ============================================= */
.p-area-cta {
  padding-inline: var(--space-inline-pc);
  padding-block: 50px 50px;
}

.p-area-cta__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: stretch;
  background: var(--color-primary);
  border-radius: 14px;
  overflow: hidden;
}

.p-area-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-area-cta__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 40px;
}

.p-area-cta__heading {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 10px;
  line-height: 1.4;
}

.p-area-cta__lead {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
}

.p-area-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.p-area-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 230px;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) {
  .p-area-cta__btn:hover {
    transform: translateY(-2px);
    opacity: 0.92;
  }
}

.p-area-cta__btn-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
}

.p-area-cta__btn--line {
  background: #06c755;
  color: var(--color-white);
}

.p-area-cta__btn--form {
  background: var(--color-accent);
  color: var(--color-white);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-area-card {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 16px;
  }
  /* image (row1) + button (row2) in column 1; body spans both; features below */
  .p-area-card__media {
    grid-column: 1;
    grid-row: 1;
  }
  .p-area-card__map-btn {
    grid-column: 1;
    grid-row: 2;
  }
  .p-area-card__body {
    grid-column: 2;
    grid-row: 1/3;
  }
  .p-area-card__features {
    grid-column: 1/-1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    padding-top: 22px;
    border-left: 0;
    border-top: 1px solid #e4e6e3;
    gap: 18px 28px;
  }
  .p-area-feature {
    flex: 1 1 240px;
  }
}
@media (max-width: 768px) {
  .p-area-list {
    padding-block: 40px 52px;
    padding-inline: var(--space-inline-sp); /* was the wide desktop gutter on phones */
  }
  .p-area-list__heading {
    margin-bottom: 32px;
    font-size: 22px;
  }
  /* clearer card boundaries on phones: each card is its own bordered box,
     separated by a gap, instead of a single thin top divider */
  .p-area-cards {
    gap: 20px;
    padding: 0 0 8px; /* list already provides the side gutter — no extra inset */
  }
  /* card becomes a stacked block: image + name on top row */
  .p-area-card {
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto; /* drop the desktop 2-row template; items stack */
    gap: 14px 16px;
    padding: 18px 16px;
    border: 1px solid #cfd6cf;
    border-radius: 12px;
    background: var(--color-white);
    box-shadow: 0 1px 4px rgba(6, 51, 28, 0.05);
  }
  /* media stays top-left; everything else stacks full width in DOM order */
  .p-area-card__media {
    grid-column: 1;
    grid-row: 1;
  }
  /* base sets border-top:0 on the first card — restore the full box border */
  .p-area-card:first-child {
    border: 1px solid #cfd6cf;
  }
  .p-area-card__img {
    height: 90px;
  }
  .p-area-card__num {
    min-width: 30px;
    height: 24px;
    font-size: 14px;
    top: 7px;
    left: 7px;
  }
  .p-area-card__name {
    font-size: 18px;
    margin: 0;
    align-self: center;
  }
  .p-area-card__name-en {
    font-size: 14px;
    display: block;
    margin-top: 2px;
  }
  /* desc + rec span full width below the image/name row */
  .p-area-card__body {
    display: contents;
  }
  .p-area-card__desc,
  .p-area-card__rec {
    grid-column: 1/-1;
  }
  .p-area-card__desc {
    font-size: 14px;
    margin: 4px 0 14px;
  }
  .p-area-card__features {
    grid-column: 1/-1;
    grid-row: auto;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid #e4e6e3;
    gap: 16px;
    margin-top: 4px;
  }
  /* full-width tap target, last in the stack (under the features) */
  .p-area-card__map-btn {
    grid-column: 1/-1;
    grid-row: auto;
    width: 100%;
    justify-content: center;
    padding-block: 12px;
    margin-top: 4px;
  }
  /* ---- extra ---- */
  .p-area-extra {
    padding-block: 0 44px;
  }
  .p-area-extra__inner {
    padding-top: 40px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .p-area-panel {
    padding: 24px 22px;
  }
  .p-area-panel__title {
    font-size: 18px;
    margin-bottom: 18px;
  }
  /* interactive map: tighter padding, the SVG scales to width */
  .p-area-map__route {
    padding: 8px;
  }
  .p-area-map__hint {
    margin: -10px 0 14px;
  }
  /* ---- CTA ---- */
  .p-area-cta {
    padding-block: 0 56px;
  }
  .p-area-cta__inner {
    grid-template-columns: 1fr;
  }
  .p-area-cta__media {
    height: 160px;
  }
  .p-area-cta__body {
    padding: 26px 22px;
    gap: 20px;
  }
  .p-area-cta__btns {
    width: 100%;
  }
  .p-area-cta__btn {
    width: 100%;
    min-width: 0;
  }
}
/* =============================================
   THAI GO PAGE (p-thaigo-)
   指差しタイ語 (slug: thaigo)
   v3 redesign — guide-style split hero (like /maid) + intro lead +
   promotion-style two-column body (scene phrase tables + shared aside).
   The two-column shell (.p-promo__inner / __main / __aside / __breadcrumb)
   and the aside (.p-promo-aside* / .p-pg-*) are reused from
   _promotion.scss / _product-guide.scss.
   ============================================= */
/* =============================================
   HERO — uses the shared /guide split treatment (white panel fades over
   the photo in the right 60%); .p-thaigo is opted into the :is() list in
   _guide.scss. Only the gold catch line is page-specific.
   ============================================= */
/* match the standard guide hero desc (dark body text) instead of a gold catch */
.p-thaigo-hero-catch {
  display: block;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.7;
}

/* smaller supporting paragraph under the catch (design: タイ語2.png) */
.p-thaigo-hero-note {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
}

/* =============================================
   INTRO LEAD — centered serif copy flanked by short gold rules
   ============================================= */
.p-thaigo-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 56px var(--space-inline-pc) 4px;
}

.p-thaigo-intro::before,
.p-thaigo-intro::after {
  content: "";
  flex: none;
  width: 56px;
  height: 2px;
  background: var(--color-accent);
}

.p-thaigo-intro__lead {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.9;
  color: var(--color-text);
}

/* =============================================
   PHRASE BLOCKS — icon heading + 3-column table (text only)
   ============================================= */
.p-thaigo-block {
  margin-bottom: 44px;
}
.p-thaigo-block:last-of-type {
  margin-bottom: 0;
}

.p-thaigo-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--color-primary);
  border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.p-thaigo-block__icon {
  flex: none;
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}
.p-thaigo-block__icon svg {
  width: 100%;
  height: 100%;
}

/* 4 columns: 日本語 / タイ語 / 読み方 / シラチャでのポイント.
   The table is one grid; the rows wrapper and each row inherit its tracks via
   subgrid so the head row and the body cells stay aligned, while the ポイント
   note spans the block in the 4th column. */
.p-thaigo-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  overflow: hidden;
}

.p-thaigo-table__rows {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: min-content;
}

.p-thaigo-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
}
.p-thaigo-row:not(:last-child) {
  border-bottom: 1px solid #ececec;
}
.p-thaigo-row:nth-child(even) {
  background: var(--color-bg-light);
}
.p-thaigo-row--head {
  grid-column: 1/-1;
  background: var(--color-white);
  border-bottom: 1px solid #ececec;
}
.p-thaigo-row--head .p-thaigo-cell {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-thaigo-cell {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
}
.p-thaigo-cell + .p-thaigo-cell {
  border-left: 1px solid #ececec;
}

.p-thaigo-cell--jp {
  font-weight: 600;
}

.p-thaigo-cell--kana {
  color: var(--color-text-light);
}

/* シラチャでのポイント — one note per block, vertically centred */
.p-thaigo-point {
  grid-column: 4;
  grid-row: 2;
  margin: 0;
  padding: 14px;
  border-left: 1px solid #ececec;
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-light);
}

.p-thaigo-note {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
}

/* =============================================
   画面を見せるだけ！ シラチャ生活のひとことタイ語 (design: タイ語2.png)
   ============================================= */
.p-thaigo-oneliner {
  margin-top: 64px;
  padding: 52px var(--space-inline-pc) 60px;
  background-color: #cfe4f2;
  background-size: cover;
  background-position: center;
}

.p-thaigo-oneliner__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.p-thaigo-oneliner__eyebrow {
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}
.p-thaigo-oneliner__eyebrow::before {
  content: "＼ ";
}
.p-thaigo-oneliner__eyebrow::after {
  content: " ／";
}

.p-thaigo-oneliner__heading {
  margin: 8px 0 28px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-thaigo-oneliner__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.p-thaigo-oneliner__card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 20px;
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.p-thaigo-oneliner__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}
.p-thaigo-oneliner__icon svg {
  width: 100%;
  height: 100%;
}

.p-thaigo-oneliner__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-thaigo-oneliner__to {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-thaigo-oneliner__jp {
  font-size: 14px;
  color: var(--color-text);
}

.p-thaigo-oneliner__th {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .p-thaigo-intro {
    gap: 14px;
    padding-top: 40px;
  }
  .p-thaigo-intro::before,
  .p-thaigo-intro::after {
    width: 24px;
  }
  .p-thaigo-intro__lead {
    font-size: 16px;
    line-height: 1.85;
  }
  .p-thaigo-block {
    margin-bottom: 32px;
  }
  /* table → stack each phrase: 日本語 (bold) / タイ語 / 読み方,
     and drop the ポイント column below the rows */
  .p-thaigo-table {
    display: block;
  }
  .p-thaigo-table__rows {
    display: block;
  }
  .p-thaigo-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .p-thaigo-row--head {
    display: none;
  }
  .p-thaigo-point {
    border-left: 0;
    border-top: 1px solid #ececec;
    padding: 14px;
    font-size: 13px;
    background: var(--color-bg-light);
  }
  .p-thaigo-oneliner {
    margin-top: 40px;
    padding: 36px var(--space-inline-sp) 40px;
  }
  .p-thaigo-oneliner__heading {
    margin-bottom: 20px;
  }
  .p-thaigo-oneliner__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* stacked rows: drop the alternating row colour — JP cell tinted, TH/kana white */
  .p-thaigo-row,
  .p-thaigo-row:nth-child(even) {
    background: var(--color-white);
  }
  .p-thaigo-cell {
    padding: 10px 14px;
    background: var(--color-white);
  }
  .p-thaigo-cell + .p-thaigo-cell {
    border-left: 0;
    border-top: 1px dashed #e8e8e8;
  }
  .p-thaigo-cell--jp {
    font-weight: 700;
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-white));
  }
}
/* =============================================
   FAQ PAGE (p-faq-)
   よくあるご質問 (slug: faq) — v3 redesign
   Hero is shared with /guide via the :is() block in _guide.scss
   (wrapper class .p-faq added to those lists).
   ============================================= */
.p-faq {
  background: #fff;
}

/* =============================================
   CATEGORY ICON GRID
   ============================================= */
.p-faq-quick {
  padding: 40px var(--space-inline-pc) 0;
}

.p-faq-quick__grid {
  max-width: 1320px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border: 1px solid #e2e5e0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* vertical dividers between cells (one connected strip, like the design) */
.p-faq-quick__item + .p-faq-quick__item {
  border-left: 1px solid #e2e5e0;
}

.p-faq-quick__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 24px 8px;
  background: #fff;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .p-faq-quick__link:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
  }
}
.p-faq-quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.p-faq-quick__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* =============================================
   FAQ 一覧
   ============================================= */
.p-faq-list {
  padding: 56px var(--space-inline-pc) 80px;
}

.p-faq-list__heading {
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 36px;
}

.p-faq-list__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 32px;
  align-items: start;
}

/* ---- Category nav ---- */
.p-faq-nav {
  position: static;
}

.p-faq-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-faq-nav__btn {
  width: 100%;
  display: block;
  padding: 16px 18px;
  border: 0;
  background: var(--color-bg-light);
  cursor: pointer;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.p-faq-nav__btn.is-active {
  background: var(--color-primary);
  color: #fff;
}

@media (hover: hover) {
  .p-faq-nav__btn:not(.is-active):hover {
    background: #e6efe9;
    color: var(--color-primary);
  }
}
/* ---- Accordion panels ---- */
.p-faq-panels {
  min-width: 0;
}

.p-faq-panel {
  display: none;
}

.p-faq-panel.is-active {
  display: block;
  border: 1px solid #e2e5e0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.p-faq-empty {
  margin: 0;
  padding: 48px 22px;
  text-align: center;
  color: var(--color-text-sub, #6b7269);
  font-size: var(--fs-md);
}

.p-faq-acc {
  background: #fff;
}
.p-faq-acc + .p-faq-acc {
  border-top: 1px solid #e2e5e0;
}
.p-faq-acc.is-open {
  background: var(--color-bg-light);
}

.p-faq-acc__q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
}

.p-faq-acc__mark {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.p-faq-acc__mark--a {
  color: var(--color-accent);
}

.p-faq-acc__qtext {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.6;
}

.p-faq-acc__chev {
  flex-shrink: 0;
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: #9aa39c;
  transition: transform 0.3s ease;
}
.p-faq-acc__chev svg {
  width: 100%;
  height: 100%;
}

.p-faq-acc.is-open .p-faq-acc__chev {
  transform: rotate(180deg);
}

.p-faq-acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-faq-acc.is-open .p-faq-acc__a {
  grid-template-rows: 1fr;
}

.p-faq-acc__a-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  /* fade + slight slide so the answer drifts down as the panel opens */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-faq-acc.is-open .p-faq-acc__a-inner {
  opacity: 1;
  transform: translateY(0);
}

.p-faq-acc__atext {
  font-size: var(--fs-md);
  line-height: 1.9;
  margin: 0;
  padding: 0 22px 22px 0;
}

/* pad the answer block to line up under the question text */
.p-faq-acc__a-inner {
  padding-left: 22px;
}

.p-faq-acc__a-inner .p-faq-acc__mark {
  padding-top: 2px;
}

/* Contact CTA reuses the .p-flow-contact component (see _flow.scss).
   Only addition on this page: flanking lines on the heading. */
.p-faq .p-flow-contact__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.p-faq .p-flow-contact__heading::before, .p-faq .p-flow-contact__heading::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--color-primary);
}

/* =============================================
   PROPERTY PROMO BANNER
   ============================================= */
.p-faq-promo {
  background-size: cover;
  background-position: center;
}

.p-faq-promo__overlay {
  background: linear-gradient(rgba(6, 30, 18, 0.78), rgba(6, 30, 18, 0.78));
  padding: 70px var(--space-inline-pc);
}

.p-faq-promo__inner {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.p-faq-promo__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.p-faq-promo__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-md);
  margin: 0 0 32px;
}

.p-faq-promo__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.p-faq-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 240px;
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--fs-md);
  color: #fff;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.p-faq-promo__btn svg {
  width: 16px;
  height: 16px;
}

.p-faq-promo__btn--search {
  background: var(--color-accent);
}

.p-faq-promo__btn--line {
  background: var(--color-green);
}

.p-faq-promo__btn--form {
  background: var(--color-primary-light, #0c4a2a);
  border: 1px solid #fff;
}

@media (hover: hover) {
  .p-faq-promo__btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
  }
}
/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-faq-list__inner {
    grid-template-columns: 190px 1fr;
    gap: 24px;
  }
}
@media (max-width: 768px) {
  /* ---- icon grid ---- */
  .p-faq-quick {
    display: none;
  }
  /* ---- FAQ list ---- */
  .p-faq-list {
    padding: 36px var(--space-inline-sp) 48px;
  }
  .p-faq-list__heading {
    font-size: var(--fs-xl);
    margin-bottom: 22px;
  }
  .p-faq-list__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* nav becomes a 2-col pill grid above the panels */
  .p-faq-nav {
    position: static;
  }
  .p-faq-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .p-faq-nav__btn {
    padding: 10px 12px;
    font-size: 14px;
    text-align: center;
  }
  /* ---- accordion → separated rounded cards (matches the /maid FAQ look) ---- */
  .p-faq-panel.is-active {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .p-faq-acc {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    /* each card carries its own full border now — drop the inherited divider */
  }
  .p-faq-acc + .p-faq-acc {
    border-top: 1px solid #e7e7e7;
  }
  .p-faq-empty {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background: #fff;
    padding: 32px 18px;
  }
  .p-faq-acc__q {
    padding: 15px 14px;
    gap: 10px;
  }
  .p-faq-acc__mark {
    font-size: var(--fs-md);
  }
  .p-faq-acc__qtext {
    font-size: var(--fs-sm);
  }
  .p-faq-acc__chev {
    width: 20px;
    height: 20px;
    color: #6b7269;
  }
  .p-faq-acc__a-inner {
    padding-left: 16px;
    gap: 10px;
  }
  .p-faq-acc__atext {
    font-size: var(--fs-sm);
    line-height: 1.85;
    padding: 0 16px 18px 0;
  }
  /* ---- contact heading (flanking lines: shorten so the title fits) ---- */
  .p-faq .p-flow-contact__heading {
    gap: 14px;
  }
  .p-faq .p-flow-contact__heading::before, .p-faq .p-flow-contact__heading::after {
    max-width: 40px;
  }
  /* ---- promo ---- */
  .p-faq-promo__overlay {
    padding: 48px var(--space-inline-sp);
  }
  .p-faq-promo__heading {
    font-size: var(--fs-xl);
    line-height: 1.5;
  }
  .p-faq-promo__lead {
    font-size: var(--fs-sm);
  }
  .p-faq-promo__btns {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .p-faq-promo__btn {
    min-width: 0;
    width: 100%;
  }
}
/* =============================================
   INQUIRY PAGE (p-inquiry-)  — お問い合わせ (slug: inquiry)
   Hero (property variant) → breadcrumb → form + sidebar → trust strip
   ============================================= */
.p-inquiry {
  background: var(--color-white);
}

/* ---- Breadcrumb ---- */
.p-inquiry__breadcrumb {
  padding: 16px var(--space-inline-pc);
  background: var(--color-white);
  border-bottom: 1px solid #ececec;
}

.p-inquiry__breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}
.p-inquiry__breadcrumb-inner a {
  color: var(--color-text-light);
}
.p-inquiry__breadcrumb-inner a:hover {
  color: var(--color-primary);
}
.p-inquiry__breadcrumb-inner .is-current {
  color: var(--color-text);
}

/* ---- Two-column body — same scale as the property detail page ---- */
.p-inquiry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
  padding-top: 48px;
  padding-bottom: 64px;
  padding-inline: max(20px, (100% - 1320px) / 2);
}

/* =============================================
   FORM
   ============================================= */
.p-inquiry-form {
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.p-inquiry-form__header {
  margin-bottom: 28px;
}

.p-inquiry-form__title {
  font-family: var(--font-heading);
  font-size: clamp(21px, 15.286px + 0.744vw, 26px);
  font-weight: 900;
  color: var(--color-primary);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-primary);
}

.p-inquiry-form__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-light);
}

/* ---- Rows: label left / control right ---- */
.p-inquiry-form__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
.p-inquiry-form__row--top {
  align-items: start;
}

.p-inquiry-form__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.p-inquiry-form__badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
  background: #e0e0e0;
  color: #777;
}
.p-inquiry-form__badge--req {
  background: #d65a4f;
  color: var(--color-white);
}

.p-inquiry-form__label-note {
  font-size: 12px;
  font-weight: 500;
  color: #999;
}

.p-inquiry-form__control {
  min-width: 0;
}

/* ---- Inputs ---- */
.p-inquiry-form__input,
.p-inquiry-form__textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.p-inquiry-form__input::placeholder,
.p-inquiry-form__textarea::placeholder {
  color: #aaa;
}
.p-inquiry-form__input:focus,
.p-inquiry-form__textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.p-inquiry-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}

/* ---- Radio / checkbox choices ---- */
.p-inquiry-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.p-inquiry-form__choices--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.p-inquiry-form__radio,
.p-inquiry-form__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}
.p-inquiry-form__radio input,
.p-inquiry-form__check input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ---- Budget select row ---- */
.p-inquiry-form__budget {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.p-inquiry-form__budget .s-search__singleselect {
  flex: 1;
  min-width: 120px;
}
.p-inquiry-form__budget .s-search__ms-trigger {
  padding: 10px 12px;
  background: var(--color-bg-light);
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}

.p-inquiry-form__budget-sep {
  color: var(--color-text-light);
}

.p-inquiry-form__budget-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* ---- Privacy + submit ---- */
.p-inquiry-form__privacy {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-light);
  text-align: center;
}
.p-inquiry-form__privacy a {
  color: var(--color-primary);
  text-decoration: underline;
}

.p-inquiry-form__submit-wrap {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.p-inquiry-form__submit {
  gap: 10px;
  min-width: 320px;
  max-width: 100%;
  padding: 16px 40px;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  font-size: 16px;
  border-radius: 6px;
}
.p-inquiry-form__submit:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 4px 20px rgba(6, 51, 28, 0.3);
}

/* ---- Validation errors ---- */
.p-inquiry-form__errors {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: #fdf2f1;
  border: 1px solid #e8b6b1;
  border-radius: 6px;
  color: #b23b30;
}
.p-inquiry-form__errors ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.p-inquiry-form__errors li {
  font-size: 14px;
  line-height: 1.8;
}

.p-inquiry-form__errors-title {
  font-size: 14px;
  font-weight: 700;
}

/* =============================================
   CONTACT FORM 7 INTEGRATION
   The inquiry form is rendered by CF7 but reuses the .p-inquiry-form__* markup
   and classes. CF7 wraps every field in its own <span> elements, so these rules
   neutralize those wrappers to preserve the themed label-left / control-right
   layout. Paste the matching markup into CF7's "Form" tab.
   ============================================= */
.p-inquiry-form {
  /* CF7's <div class="wpcf7"> / <form> shouldn't add their own spacing */
}
.p-inquiry-form .wpcf7 {
  margin: 0;
}
.p-inquiry-form .wpcf7-form {
  margin: 0;
}
.p-inquiry-form {
  /* text / email / tel / textarea: the wrapper is inline by default, which
     collapses the width:100% inputs — make it block so they fill the column. */
}
.p-inquiry-form .p-inquiry-form__control > .wpcf7-form-control-wrap {
  display: block;
}
.p-inquiry-form {
  /* Radio / checkbox groups + budget selects: unwrap CF7's <span> layers
     (display:contents) so the real controls become direct children of the
     themed flex / --grid / budget containers and inherit their layout. */
}
.p-inquiry-form .p-inquiry-form__choices .wpcf7-form-control-wrap,
.p-inquiry-form .p-inquiry-form__choices .wpcf7-radio,
.p-inquiry-form .p-inquiry-form__choices .wpcf7-checkbox,
.p-inquiry-form .p-inquiry-form__budget .wpcf7-form-control-wrap {
  display: contents;
}
.p-inquiry-form {
  /* Each CF7 list item = one themed radio / checkbox pill */
}
.p-inquiry-form .p-inquiry-form__choices .wpcf7-list-item {
  margin: 0;
}
.p-inquiry-form .p-inquiry-form__choices .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}
.p-inquiry-form .p-inquiry-form__choices .wpcf7-list-item input[type=radio],
.p-inquiry-form .p-inquiry-form__choices .wpcf7-list-item input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.p-inquiry-form .p-inquiry-form__choices .wpcf7-list-item .wpcf7-list-item-label {
  line-height: 1.5;
}
.p-inquiry-form {
  /* Budget: native <select> dropdowns styled like the themed text inputs */
}
.p-inquiry-form .p-inquiry-form__budget select {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.p-inquiry-form .p-inquiry-form__budget select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
}
.p-inquiry-form {
  /* Submit: CF7 renders an <input>, which can't hold the inline chevron SVG the
     old <button> carried — paint it as a right-aligned background layer instead. */
}
.p-inquiry-form input.wpcf7-submit {
  padding-right: 54px;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat right 26px center/15px 15px, linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}
.p-inquiry-form input.wpcf7-submit:hover {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat right 26px center/15px 15px, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 4px 20px rgba(6, 51, 28, 0.3);
}
.p-inquiry-form {
  /* Spinner + validation/response message under the button */
}
.p-inquiry-form .wpcf7-spinner {
  margin: 0 0 0 12px;
}
.p-inquiry-form .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  border-radius: 6px;
}
.p-inquiry-form .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #b23b30;
}

/* =============================================
   CONFIRMATION SCREEN
   ============================================= */
.p-inquiry-confirm {
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.p-inquiry-confirm__list {
  margin: 0;
}

.p-inquiry-confirm__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

.p-inquiry-confirm__dt {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.p-inquiry-confirm__dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  word-break: break-word;
}

.p-inquiry-confirm__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.p-inquiry-confirm__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.p-inquiry-confirm__back:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.p-inquiry-confirm__send {
  gap: 10px;
  min-width: 240px;
  padding: 16px 40px;
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  font-size: 16px;
  border-radius: 6px;
}
.p-inquiry-confirm__send:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 4px 20px rgba(6, 51, 28, 0.3);
}

/* =============================================
   THANK YOU SCREEN (p-thanks)
   completion hero → 今後の流れ → よくご覧いただくページ
   ============================================= */
.p-thanks {
  background: var(--color-white);
}

/* ---- Completion hero (faded interior bg) ---- */
.p-thanks__hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 80px var(--space-inline-pc) 64px;
  text-align: center;
}
.p-thanks__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* whiter previous overlay, fading the image out toward the bottom */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.95) 40%, rgb(255, 255, 255) 65%);
  z-index: 0;
}

.p-thanks__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.p-thanks__icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.p-thanks__icon svg {
  width: 48px;
  height: 48px;
}

.p-thanks__title {
  position: relative;
  margin-top: 24px;
  padding-bottom: 18px;
  font-family: var(--font-heading);
  font-size: clamp(23px, 12.714px + 1.339vw, 32px);
  font-weight: 700;
  color: var(--color-primary);
}
.p-thanks__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--color-accent);
}

.p-thanks__lead {
  margin-top: 22px;
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  font-weight: 500;
}

.p-thanks__notice {
  display: inline-flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 34px;
  padding: 24px 32px;
  text-align: left;
  background: color-mix(in srgb, var(--color-bg-light) 92%, transparent);
  border-radius: 8px;
}

.p-thanks__notice-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 10px;
}
.p-thanks__notice-icon svg {
  width: 70px;
  height: 70px;
}

.p-thanks__notice-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-light);
}
.p-thanks__notice-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
  color: var(--color-primary);
}

/* ---- 今後の流れ ---- */
.p-thanks__flow {
  padding: 64px var(--space-inline-pc);
  padding-top: 20px;
  background: var(--color-white);
}

.p-thanks__flow-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.p-thanks__flow-card {
  position: relative;
  padding: 48px 50px 40px;
  background: var(--color-white);
  border: 1px solid #dddcd6;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* heading straddles the card's top border line (fieldset-legend style) */
.p-thanks__heading {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: var(--color-white);
  font-size: 26px;
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-primary);
  white-space: nowrap;
}
.p-thanks__heading::before, .p-thanks__heading::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}

/* two columns split by a vertical separator line */
.p-thanks__flow-grid {
  display: grid;
  grid-template-columns: 1fr 1px 360px;
  gap: 40px;
  align-items: stretch;
}

.p-thanks__flow-sep {
  width: 1px;
  background: #e6e5e0;
}

.p-thanks__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: center;
}

.p-thanks__step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.p-thanks__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-primary);
}
.p-thanks__step-icon svg {
  width: 24px;
  height: 24px;
}

.p-thanks__step-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.p-thanks__step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-thanks__step-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
  font-weight: 500;
}

/* ---- お急ぎの方はこちら (two stacked beige boxes) ---- */
.p-thanks__urgent {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-thanks__urgent-box {
  background: var(--color-bg-light);
  border-radius: 10px;
  padding: 26px 24px;
  text-align: center;
}
.p-thanks__urgent-box--line {
  padding: 18px;
  padding-left: 28px;
}

.p-thanks__urgent-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
.p-thanks__urgent-head-icon {
  display: inline-flex;
}
.p-thanks__urgent-head-icon svg {
  width: 20px;
  height: 20px;
}

.p-thanks__urgent-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--color-primary);
  text-decoration: none;
}
.p-thanks__urgent-tel-icon {
  display: inline-flex;
}
.p-thanks__urgent-tel-icon svg {
  width: 26px;
  height: 26px;
}
.p-thanks__urgent-tel-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.p-thanks__urgent-hours {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.p-thanks__urgent-note {
  margin-top: 2px;
  font-size: 14px;
  color: var(--color-text-light);
}

.p-thanks__urgent-line {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.p-thanks__urgent-line:hover {
  opacity: 0.75;
}
.p-thanks__urgent-line-icon {
  display: inline-flex;
  color: var(--color-line);
}
.p-thanks__urgent-line-icon svg {
  width: 44px;
  height: 44px;
}
.p-thanks__urgent-line-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  text-align: left;
}
.p-thanks__urgent-line-main {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
.p-thanks__urgent-line-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}
.p-thanks__urgent-line-arrow {
  display: inline-flex;
  color: var(--color-text-light);
}
.p-thanks__urgent-line-arrow svg {
  width: 14px;
  height: 14px;
}

/* ---- よくご覧いただくページ ---- */
.p-thanks__pages {
  padding: 8px var(--space-inline-pc) 72px;
  background: var(--color-white);
}

.p-thanks__pages-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.p-thanks__pages-heading {
  position: relative;
  text-align: center;
  font-size: 26px;
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-primary);
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.p-thanks__pages-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  background: var(--color-accent);
}

.p-thanks__pages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.p-thanks__page-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid #ececec;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-thanks__page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

.p-thanks__page-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
}
.p-thanks__page-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.p-thanks__page-icon {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.p-thanks__page-icon svg {
  width: 28px;
  height: 28px;
}

.p-thanks__page-body {
  padding: 30px 18px 22px;
  text-align: center;
}

.p-thanks__page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.p-thanks__page-desc {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
}

.p-thanks__page-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-light);
}
.p-thanks__page-arrow svg {
  width: 13px;
  height: 13px;
}

/* =============================================
   SIDEBAR
   ============================================= */
.p-inquiry-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-inquiry-aside__card {
  background: var(--color-bg-light);
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Card header — heading font, no bar / no separator */
.p-inquiry-aside__card-head {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary-light);
}

/* ---- Phone ---- */
.p-inquiry-aside__card--phone .p-inquiry-aside__card-head {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 6px;
}

.p-inquiry-aside__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-primary);
}
.p-inquiry-aside__phone-icon {
  display: inline-flex;
}
.p-inquiry-aside__phone-num {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-inquiry-aside__phone-hours {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}

.p-inquiry-aside__phone-note {
  margin-top: 4px;
  font-size: 14px;
  color: var(--color-text-light);
  text-align: center;
}

/* ---- LINE ---- */
.p-inquiry-aside__line-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-inquiry-aside__line-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-line);
}

.p-inquiry-aside__line-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-inquiry-aside__line-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-inquiry-aside__line-badge {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-inquiry-aside__line-text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
}

.p-inquiry-aside__line-btn {
  display: block;
  margin-top: 16px;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-light);
  background: var(--color-white);
  border: 1px solid var(--color-primary-light);
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.p-inquiry-aside__line-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-white);
}

/* ---- FAQ ---- */
.p-inquiry-aside__faq-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.p-inquiry-aside__faq-list li + li {
  border-top: 1px dashed #e4e4e4;
}
.p-inquiry-aside__faq-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
}
.p-inquiry-aside__faq-list a:hover {
  color: var(--color-primary);
}

.p-inquiry-aside__faq-mark {
  color: var(--color-accent);
  font-weight: 700;
}

.p-inquiry-aside__faq-btn {
  display: block;
  padding: 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-light);
  background: var(--color-white);
  border: 1px solid var(--color-primary-light);
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.p-inquiry-aside__faq-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-white);
}

/* ---- Support ---- */
.p-inquiry-aside__support-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary-light);
  text-align: center;
  margin-bottom: 14px;
}

.p-inquiry-aside__support-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.p-inquiry-aside__support-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

.p-inquiry-aside__support-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-light);
}

/* =============================================
   TRUST STRIP
   ============================================= */
.p-inquiry-trust {
  padding: 0 max(20px, (100% - 1320px) / 2) 20px;
}

.p-inquiry-trust__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  /* separator line above the row, inset from the screen border */
  border-top: 1px solid #e0e0e0;
  padding-top: 44px;
}

.p-inquiry-trust__item {
  position: relative;
  text-align: center;
  padding: 16px 18px;
}

/* vertical divider between items (top-page features style) */
.p-inquiry-trust__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 84px;
  background: #e0e0e0;
}

.p-inquiry-trust__icon {
  display: inline-flex;
  color: var(--color-primary);
}

.p-inquiry-trust__title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-inquiry-trust__sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .p-inquiry__inner {
    grid-template-columns: 1fr;
  }
  .p-inquiry-trust__inner {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
  .p-inquiry-trust__item:not(:last-child)::after {
    display: none;
  }
  .p-thanks__flow-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-thanks__flow-sep {
    display: none;
  }
  .p-thanks__pages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  /* No hero on phones */
  .p-inquiry .p-prop-list-hero {
    display: none;
  }
  .p-inquiry__inner {
    padding: 28px var(--space-inline-sp) 40px;
    gap: 24px;
  }
  .p-inquiry-form {
    padding: 24px 18px;
  }
  .p-inquiry-form__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0;
  }
  .p-inquiry-form__choices--grid {
    grid-template-columns: 1fr;
  }
  .p-inquiry-form__submit {
    min-width: 0;
    width: 100%;
  }
  /* Confirmation screen */
  .p-inquiry-confirm {
    padding: 24px 18px;
  }
  .p-inquiry-confirm__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .p-inquiry-confirm__actions {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .p-inquiry-confirm__back,
  .p-inquiry-confirm__send {
    width: 100%;
    justify-content: center;
  }
  /* Trust badges strip is hidden on phones */
  .p-inquiry-trust {
    display: none;
  }
  /* Thank-you page */
  /* phone: white hero with the bg image on ::before, faded down via a MASK so the
     image's own opacity dissolves to nothing (no hard white stop / edge line). */
  .p-thanks__hero {
    padding: 48px var(--space-inline-sp) 44px;
    background-image: none !important;
  }
  .p-thanks__hero::before {
    background: none;
    background-image: url("../images/inquiry_bg.webp");
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 72%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 72%);
  }
  .p-thanks__icon {
    width: 80px;
    height: 80px;
  }
  .p-thanks__icon svg {
    width: 40px;
    height: 40px;
  }
  .p-thanks__lead {
    font-size: 14px;
  }
  .p-thanks__notice {
    padding: 18px 18px;
    gap: 18px;
  }
  .p-thanks__notice-text {
    font-size: 14px;
  }
  .p-thanks__notice-icon svg {
    width: 60px;
    height: 60px;
    margin-top: 10px;
  }
  .p-thanks__flow {
    padding: 60px var(--space-inline-sp) 44px;
  }
  .p-thanks__flow-card {
    padding: 40px 20px 28px;
  }
  .p-thanks__heading {
    font-size: 22px;
    gap: 10px;
    padding: 0 16px;
  }
  .p-thanks__heading::before, .p-thanks__heading::after {
    width: 22px;
  }
  .p-thanks__pages {
    padding: 40px var(--space-inline-sp) 52px;
  }
  .p-thanks__pages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-thanks__page-thumb {
    aspect-ratio: 16/9;
  }
}
/* =============================================
   SENT / COMPLETION PAGE (p-sent-) — お問い合わせ完了 (slug: thanks)
   Breadcrumb → 受付完了カード → お問い合わせ内容 → 電話/LINE → 締めの一文
   Reached only by the post-submit redirect from /inquiry/ (page-thanks.php).

   Prefix is `p-sent-`, NOT `p-thanks-`: _inquiry.scss still carries a large
   .p-thanks__* block from the retired 3-step flow (template-parts/inquiry-thanks.php,
   no longer referenced by any template). Reusing that prefix let its decorations
   leak in — e.g. a centred 56x3 gold ::after bar under .p-thanks__title.
   ============================================= */
.p-sent {
  background: var(--color-white);
}

/* ---- Breadcrumb (same treatment as the inquiry page) ---- */
.p-sent__breadcrumb {
  padding: 16px var(--space-inline-pc);
  background: var(--color-white);
  border-bottom: 1px solid #ececec;
}

.p-sent__breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}
.p-sent__breadcrumb-inner a {
  color: var(--color-text-light);
}
.p-sent__breadcrumb-inner .is-current {
  color: var(--color-text);
}
@media (hover: hover) {
  .p-sent__breadcrumb-inner a:hover {
    color: var(--color-primary);
  }
}

.p-sent__inner {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-inline-sp);
  padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px);
}

/* =============================================
   受付完了カード
   ============================================= */
.p-sent__card {
  background: var(--color-white);
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 44px) clamp(28px, 4vw, 40px);
  text-align: center;
}

.p-sent__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .p-sent__check {
    width: 72px;
    height: 72px;
  }
}

.p-sent__title {
  font-family: var(--font-heading);
  font-size: clamp(21px, 8.429px + 1.637vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
  padding-bottom: clamp(14px, 2.4vw, 20px);
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.p-sent__lead {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .p-sent__lead {
    text-align: left;
  }
}
.p-sent__lead strong {
  font-weight: 700;
  color: var(--color-primary);
}

/* ---- 自動返信メールの案内 ---- */
.p-sent__notice {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 22px);
  margin-top: clamp(24px, 4vw, 34px);
  padding: clamp(16px, 3vw, 24px);
  text-align: left;
  background: var(--color-bg-light);
  border: 1px solid #e3e7e0;
  border-radius: 8px;
}

.p-sent__notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .p-sent__notice-icon {
    width: 46px;
    height: 46px;
  }
  .p-sent__notice-icon svg {
    width: 22px;
    height: 22px;
  }
}

.p-sent__notice-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.p-sent__notice-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
}

/* =============================================
   お問い合わせ内容
   ============================================= */
.p-sent__section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(40px, 6vw, 60px);
  margin-bottom: clamp(16px, 2.5vw, 22px);
  font-family: var(--font-heading);
  font-size: clamp(18px, 13.429px + 0.595vw, 22px);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.p-sent__section-title::before, .p-sent__section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8d8d2;
}

.p-sent__summary {
  background: var(--color-bg-light);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 4px clamp(16px, 3vw, 28px);
}

.p-sent__summary-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
  padding: 18px 0;
}
.p-sent__summary-row + .p-sent__summary-row {
  border-top: 1px solid #e3e3df;
}
@media (max-width: 768px) {
  .p-sent__summary-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 14px 0;
  }
}

.p-sent__summary-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.p-sent__summary-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

.p-sent__summary-value {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-light);
  word-break: break-word;
}
@media (max-width: 768px) {
  .p-sent__summary-value {
    padding-left: 30px;
  }
}

/* =============================================
   電話 / LINE
   ============================================= */
.p-sent__contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(28px, 4vw, 40px);
}
@media (max-width: 600px) {
  .p-sent__contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-sent__contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(18px, 3vw, 26px) clamp(14px, 2.5vw, 22px);
  text-align: center;
  background: var(--color-bg-light);
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}

.p-sent__contact-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.p-sent__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  text-decoration: none;
}

.p-sent__phone-icon {
  display: inline-flex;
}

.p-sent__phone-num {
  font-size: clamp(24px, 17.143px + 0.893vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.p-sent__phone-hours {
  font-size: 13px;
  color: var(--color-text-light);
}

.p-sent__line-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-sent__line-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #06c755;
}

.p-sent__line-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.p-sent__line-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.p-sent__line-badge {
  font-size: 13px;
  color: var(--color-text-light);
}

.p-sent__line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #06c755;
  background: var(--color-white);
  border: 1px solid #06c755;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.p-sent__line-btn svg {
  flex-shrink: 0;
}
@media (hover: hover) {
  .p-sent__line-btn:hover {
    color: var(--color-white);
    background: #06c755;
  }
}

/* =============================================
   締めの一文 / トップへ戻る
   ============================================= */
.p-sent__outro {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 15px;
  line-height: 2;
  text-align: center;
  color: var(--color-text-light);
}

.p-sent__actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3.5vw, 32px);
}

.p-sent__home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .p-sent__home-btn:hover {
    opacity: 0.85;
  }
}

/* =============================================
   FILTER PAGE (p-filter-)
   Mobile search filter page + archive FAB
   ============================================= */
/* Floating action button on archive page — mobile only */
.p-filter-fab-wrap {
  display: none;
}

.p-filter-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  padding: 10px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.p-filter-fab:hover {
  opacity: 1;
  background: var(--color-green-dark);
}

/* ---- Filter page bar (back + title) ---- */
.p-filter__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e4e4e4;
  background: var(--color-white);
  position: sticky;
  top: var(--header-height);
  z-index: 50;
}

.p-filter__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px 7px 10px;
  background: rgba(19, 188, 50, 0.1);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-green);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.p-filter__back:hover {
  opacity: 1;
  background: rgba(19, 188, 50, 0.2);
}

.p-filter__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.p-filter__heading-icon {
  flex-shrink: 0;
}
.p-filter__heading-icon--right {
  transform: scaleX(-1);
}

.p-filter__bar-spacer {
  min-width: 60px;
}

/* ---- Filter page body: override sidebar defaults ---- */
.p-filter__body {
  padding-top: 16px;
}
.p-filter__body .p-property-sidebar {
  position: static;
}
.p-filter__body .p-property-sidebar__form {
  padding-bottom: 100px;
}
.p-filter__body .p-property-sidebar__submit-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  padding: 16px 20px;
  background: var(--color-white);
  border-top: 1px solid #e4e4e4;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 50;
}
.p-filter__body .p-property-sidebar__btn {
  width: 100%;
}

/* =============================================
   MOBILE
   ============================================= */
@media (max-width: 768px) {
  .p-filter-fab-wrap {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 20px;
    background: var(--color-white);
    border-top: 1px solid #e4e4e4;
  }
  .p-filter__body .p-property-sidebar__section-title {
    font-size: 18px;
  }
  .p-filter__body .p-property-sidebar__budget {
    width: 100%;
  }
}
/* =============================================
   DESKTOP — constrain to readable width
   ============================================= */
@media (min-width: 768.02px) {
  .p-filter__bar,
  .p-filter__body {
    max-width: 720px;
    margin-inline: auto;
  }
  .p-filter__body .p-property-sidebar__form {
    padding-bottom: 20px;
  }
  .p-filter__body .p-property-sidebar__submit-wrap {
    position: static;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    justify-content: flex-start;
  }
  .p-filter__body .p-property-sidebar__btn {
    width: auto;
    min-width: 200px;
  }
}
/* =============================================
   USEFUL INFO HUB PAGE (p-useful-)
   お役立ち情報 (slug: useful)
   ============================================= */
/* =============================================
   HERO — guide-style split: white panel fades over
   the cityscape image in the right ~60%.
   ============================================= */
@media (min-width: 768.02px) {
  .p-useful .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-useful .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-useful .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 16px;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 2;
  }
}
/* ---- HERO mobile: same split layout, reduced. Image right 60%, text left. ---- */
@media (max-width: 768px) {
  .p-useful .p-prop-list-hero--property {
    min-height: 240px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-useful .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-useful .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 45%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 85%);
    z-index: 1;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 62%;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
    font-size: 12px;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.8;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 0;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__desc br.sp {
    display: inline;
  }
  .p-useful .p-prop-list-hero--property .p-prop-list-hero__mobile-icon {
    display: none;
  }
}
/* =============================================
   MENU CARDS
   ============================================= */
.p-useful-cards {
  background: var(--color-white);
  padding-block: 64px 80px;
  padding-inline: var(--space-inline-pc);
}

.p-useful-cards__inner {
  max-width: 1320px;
  margin-inline: auto;
}

/* centered heading flanked by short gold rules */
.p-useful-cards__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.p-useful-cards__heading::before, .p-useful-cards__heading::after {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}

.p-useful-cards__lead {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--fs-md);
  margin: 0 0 40px;
}

.p-useful-cards__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---- Single card ---- */
.p-useful-card {
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.p-useful-card:hover {
  box-shadow: 0 8px 22px rgba(6, 51, 28, 0.12);
  transform: translateY(-3px);
  border-color: var(--color-accent);
}

.p-useful-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  height: 100%;
}

.p-useful-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
}

.p-useful-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* circular icon badge overlapping the bottom edge of the image */
.p-useful-card__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(6, 51, 28, 0.15);
}

.p-useful-card__body {
  display: block;
  text-align: center;
  padding: 40px 24px 26px; /* top room for the overlapping badge */
}

.p-useful-card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0 0 10px;
}

.p-useful-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.8;
  margin: 0 0 10px;
  text-align: center;
}

.p-useful-card__arrow {
  display: inline-flex;
  color: var(--color-text-light);
  transition: color 0.2s ease, transform 0.2s ease;
}

.p-useful-card:hover .p-useful-card__arrow {
  color: var(--color-accent);
  transform: translateX(3px);
}

/* =============================================
   LINE CTA BANNER
   ============================================= */
.p-useful-line {
  padding-block: 0 80px;
  padding-inline: var(--space-inline-pc);
  background: var(--color-white);
}

.p-useful-line__inner {
  max-width: 1040px; /* narrower → larger left/right margin, smaller center gap */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 56px;
  background: #eef1ee;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}

/* SP-only chevron on the right (replaces the button on phones) */
.p-useful-line__chev {
  display: none;
  flex-shrink: 0;
  color: var(--color-primary);
}

.p-useful-line__text {
  display: flex;
  align-items: center;
  gap: 22px;
}

.p-useful-line__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #06c755; /* LINE brand green */
  color: var(--color-white);
}
.p-useful-line__mark svg {
  width: 40px;
  height: 40px;
}

.p-useful-line__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-useful-line__head {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.35;
}

.p-useful-line__sub {
  font-size: var(--fs-md);
  color: var(--color-text-light);
}

.p-useful-line__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  min-width: 280px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 10px;
  text-decoration: none;
  font-size: var(--fs-lg);
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.p-useful-line__btn:hover {
  background: #0a4a29;
  transform: translateY(-2px);
}

.p-useful-line__btn-icon {
  display: inline-flex;
}

.p-useful-line__btn-label {
  flex: 1;
}

.p-useful-line__btn-arrow {
  display: inline-flex;
  color: var(--color-white);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-useful-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .p-useful-cards {
    padding-block: 24px 16px;
  }
  .p-useful-cards__heading {
    margin-bottom: 12px;
  }
  .p-useful-cards__heading::before, .p-useful-cards__heading::after {
    width: 28px;
  }
  .p-useful-cards__lead {
    display: none;
  }
  .p-useful-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
  }
  /* badge moves to the bottom-left of the image */
  .p-useful-card__badge {
    left: 16px;
    bottom: 0;
    transform: translate(0, 50%);
    width: 50px;
    height: 50px;
  }
  /* left-aligned text with a chevron centered on the right */
  .p-useful-card__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
    text-align: left;
    padding: 34px 14px 16px 16px;
  }
  .p-useful-card__title {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    margin: 0 0 6px;
  }
  .p-useful-card__desc {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    font-size: 14px;
    margin: 0;
  }
  .p-useful-card__arrow {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
  }
  .p-useful-card__arrow svg {
    width: 16px;
    height: 16px;
  }
  /* LINE banner: keep the PC-style horizontal row, drop the button,
     show a chevron on the right instead */
  .p-useful-line {
    padding-bottom: 34px;
  }
  .p-useful-line__inner {
    gap: 14px;
    padding: 20px 18px;
  }
  .p-useful-line__text {
    gap: 12px;
  }
  .p-useful-line__mark {
    width: 54px;
    height: 54px;
  }
  .p-useful-line__mark svg {
    width: 30px;
    height: 30px;
  }
  .p-useful-line__head {
    font-size: 16px;
  }
  .p-useful-line__sub {
    font-size: 12px;
  }
  .p-useful-line__btn {
    display: none;
  }
  .p-useful-line__chev {
    display: inline-flex;
  }
}
/* =============================================
   PUBLIC TRANSPORTATION PAGE (p-pt-)
   公共の乗り物 (slug: public_transportation)
   ============================================= */
/* ---- Intro ---- */
.p-pt-intro {
  padding-block: 60px 30px;
  padding-inline: var(--space-inline-pc);
}

.p-pt-intro__inner {
  max-width: 1100px;
  margin-inline: auto;
}

.p-pt-intro__lead {
  font-size: 18px;
  color: var(--color-text);
  line-height: 2;
  margin: 0;
  text-align: left;
}

/* ---- Sections wrapper ---- */
.p-pt-sections {
  padding-block: 60px 100px;
  padding-inline: var(--space-inline-pc);
}

.p-pt-sections__inner {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

/* ---- Single transport row ----
   Default (odd index) : body | image
   --image-left (even index): image | body
*/
.p-pt-section {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 90px;
  align-items: center;
}
.p-pt-section .p-pt-section__body {
  order: 1;
}
.p-pt-section .p-pt-section__media {
  order: 2;
}
.p-pt-section--image-left {
  grid-template-columns: 360px 1fr;
}
.p-pt-section--image-left .p-pt-section__media {
  order: 1;
}
.p-pt-section--image-left .p-pt-section__body {
  order: 2;
}

/* ---- Media ---- */
.p-pt-section__media {
  position: relative;
  aspect-ratio: 1/1;
}
.p-pt-section__media::before {
  content: "";
  position: absolute;
  inset: -14px -14px auto auto;
  width: 100%;
  height: 100%;
  background: rgba(19, 188, 50, 0.22);
  border-radius: var(--radius-leaf);
  z-index: 0;
}
.p-pt-section__media > img,
.p-pt-section__media > .p-pt-section__media-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-leaf);
  display: block;
}

.p-pt-section--image-left .p-pt-section__media::before {
  inset: -14px auto auto -14px;
  background: rgba(179, 142, 92, 0.28);
}

.p-pt-section__media-placeholder {
  background: linear-gradient(135deg, #e8f5ea 0%, #cfe9d4 100%);
}

.p-pt-section--image-left .p-pt-section__media-placeholder {
  background: linear-gradient(135deg, #f5ece0 0%, #e6d6bf 100%);
}

/* ---- Two stacked images (long sections) ---- */
.p-pt-section__media--stack {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.p-pt-section__media--stack::before {
  display: none; /* each item carries its own accent */
}

.p-pt-section__media-item {
  position: relative;
  aspect-ratio: 1/1;
}
.p-pt-section__media-item::before {
  content: "";
  position: absolute;
  inset: -14px -14px auto auto;
  width: 100%;
  height: 100%;
  background: rgba(19, 188, 50, 0.22);
  border-radius: var(--radius-leaf);
  z-index: 0;
}
.p-pt-section__media-item > img,
.p-pt-section__media-item > .p-pt-section__media-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-leaf);
  display: block;
}

.p-pt-section--image-left .p-pt-section__media-item::before {
  inset: -14px auto auto -14px;
  background: rgba(179, 142, 92, 0.28);
}

/* ---- Body ---- */
.p-pt-section__body {
  min-width: 0;
}

.p-pt-section__eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-green);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.p-pt-section__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--color-green);
}

.p-pt-section__desc {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.95;
  margin: 0 0 14px;
}
.p-pt-section__desc:last-child {
  margin-bottom: 0;
}

.p-pt-section__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-pt-section__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding-block: 4px;
  line-height: 1.6;
}
.p-pt-section__list-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  /* Keep the image column at 300px on both variants — body first on the
     default (image-right) layout, media first on --image-left */
  .p-pt-section {
    grid-template-columns: 1fr 300px;
    gap: 56px;
  }
  .p-pt-section--image-left {
    grid-template-columns: 300px 1fr;
  }
}
@media (max-width: 768px) {
  .p-pt-sections {
    padding-block: 36px 60px;
  }
  .p-pt-sections__inner {
    gap: 50px;
  }
  .p-pt-section,
  .p-pt-section--image-left {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .p-pt-section__body,
  .p-pt-section--image-left .p-pt-section__body {
    order: 0;
  }
  .p-pt-section__media,
  .p-pt-section--image-left .p-pt-section__media {
    margin-top: 16px;
    order: 1;
    aspect-ratio: 4/3;
  }
  .p-pt-section__media--stack {
    aspect-ratio: auto;
    gap: 32px;
  }
  .p-pt-section__media-item {
    aspect-ratio: 4/3;
  }
  /* Accent keeps its desktop side: image-right sections → right, image-left → left */
  .p-pt-section__media::before,
  .p-pt-section__media-item::before {
    inset: -10px -10px auto auto;
  }
  .p-pt-section--image-left .p-pt-section__media::before,
  .p-pt-section--image-left .p-pt-section__media-item::before {
    inset: -10px auto auto -10px;
  }
  .p-pt-section__eyebrow {
    font-size: 12px;
  }
  .p-pt-section__title {
    font-size: var(--fs-lg);
  }
  .p-pt-section__desc {
    line-height: 1.85;
  }
}
/* =============================================================
   ============  v3 REDESIGN (guide hero + cards)  =============
   New classes for the redesigned /public_transportation page.
   The .p-pt-section* / .p-pt-intro styles above are kept because
   page-why.php still reuses them.
   ============================================================= */
/* hero: gold catch line above the desc body + primary-green title */
.p-pt .p-prop-list-hero--property .p-prop-list-hero__title {
  color: var(--color-primary);
  text-shadow: none;
}

.p-pt-hero-catch {
  display: none;
}

/* shared section title with flanking short rules */
.p-pt-secttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 32px;
}
.p-pt-secttl::before, .p-pt-secttl::after {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}
.p-pt-secttl--plain::before, .p-pt-secttl--plain::after {
  display: none;
}

/* image placeholder (used where a real photo isn't supplied yet) */
.p-pt-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-white)), color-mix(in srgb, var(--color-accent) 12%, var(--color-white)));
  color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.p-pt-ph svg {
  width: 30%;
  height: 30%;
  max-width: 64px;
  max-height: 64px;
}

/* ---------------------------------------------
   主な交通手段 — card grid
   --------------------------------------------- */
.p-pt-modes {
  padding: 56px var(--space-inline-pc) 24px;
}

.p-pt-modes__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-pt-modes__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-pt-mode {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-pt-mode__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.p-pt-mode__icon {
  flex: none;
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.p-pt-mode__icon svg {
  width: 100%;
  height: 100%;
}

.p-pt-mode__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.p-pt-mode__media {
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.p-pt-mode__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-pt-mode__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}

/* ---------------------------------------------
   比較表
   --------------------------------------------- */
.p-pt-compare {
  padding: 48px var(--space-inline-pc);
}

.p-pt-compare__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-pt-table-wrap {
  overflow-x: auto;
}

.p-pt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 720px;
}
.p-pt-table th, .p-pt-table td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid #ececec;
  white-space: nowrap; /* keep each cell on one line — the wrap scrolls horizontally */
}
.p-pt-table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  border-bottom: 0;
  white-space: nowrap;
}
.p-pt-table thead th:first-child {
  border-top-left-radius: 10px;
}
.p-pt-table thead th:last-child {
  border-top-right-radius: 10px;
}
.p-pt-table tbody tr:nth-child(even) {
  background: var(--color-bg-light);
}

.p-pt-table__mode {
  text-align: left !important;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.p-pt-table__icon {
  display: inline-flex;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: var(--color-primary);
}
.p-pt-table__icon svg {
  width: 100%;
  height: 100%;
}

.p-pt-table__use {
  text-align: left !important;
  color: var(--color-text);
}

.p-pt-stars {
  display: inline-flex;
  gap: 1px;
  letter-spacing: 1px;
}

.p-pt-star {
  color: #d9d9d9;
  font-size: 16px;
  line-height: 1;
}
.p-pt-star.is-on {
  color: var(--color-accent);
}

/* ---------------------------------------------
   使い方ポイント
   --------------------------------------------- */
.p-pt-tips {
  padding: 24px var(--space-inline-pc) 56px;
}

.p-pt-tips__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-pt-tips__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-pt-tip {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-pt-tip__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.p-pt-tip__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-primary);
}
.p-pt-tip__icon svg {
  width: 20px;
  height: 20px;
}

.p-pt-tip__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.p-pt-tip__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}

.p-pt-tip__media {
  margin-top: auto;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  /* crop toward the top so the upper part of the photo isn't hidden */
}
.p-pt-tip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* ---------------------------------------------
   FAQ + 相談 (two-column)
   --------------------------------------------- */
.p-pt-help {
  padding: 8px var(--space-inline-pc) 50px;
}

.p-pt-help__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
  align-items: start;
}

.p-pt-faq__title,
.p-pt-aside__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 20px;
}

.p-pt-faq__item {
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--color-white);
}

.p-pt-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  cursor: pointer;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-weight: 600;
  color: var(--color-text);
}

.p-pt-faq__badge {
  flex: none;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 19px;
}

.p-pt-faq__q-text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
}

.p-pt-faq__chevron {
  flex: none;
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  transition: transform 0.25s ease;
}
.p-pt-faq__chevron svg {
  width: 100%;
  height: 100%;
}

.p-pt-faq__item.is-open .p-pt-faq__chevron {
  transform: rotate(180deg);
}

/* answer panel: background/height ease open via grid-rows 0fr→1fr,
   text drifts down with a slight fade */
.p-pt-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-pt-faq__item.is-open .p-pt-faq__a {
  grid-template-rows: 1fr;
}

.p-pt-faq__a-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-pt-faq__item.is-open .p-pt-faq__a-inner {
  opacity: 1;
  transform: translateY(0);
}

/* padding on the text (inside the clipped wrapper) so the panel collapses fully */
.p-pt-faq__a-text {
  margin: 0;
  padding: 0 18px 18px 44px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

/* contact cards (stacked) */
.p-pt-ccard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.p-pt-ccard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.p-pt-ccard__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-white);
}
.p-pt-ccard__icon svg {
  width: 24px;
  height: 24px;
}

.p-pt-ccard--line .p-pt-ccard__icon {
  background: var(--color-line);
}

.p-pt-ccard--tel .p-pt-ccard__icon {
  background: var(--color-primary);
}

.p-pt-ccard--form .p-pt-ccard__icon {
  background: var(--color-accent);
}

.p-pt-ccard__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.p-pt-ccard__label {
  font-size: 14px;
  color: var(--color-text-light);
}

.p-pt-ccard__main {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.p-pt-ccard__main--tel {
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.p-pt-ccard__sub {
  font-size: 14px;
  color: var(--color-text-light);
}

.p-pt-ccard__arrow {
  flex: none;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--color-text-light);
}
.p-pt-ccard__arrow svg {
  width: 100%;
  height: 100%;
}

/* サポート CTA moved to the shared component template-parts/support-cta.php
   (styles in _support-cta.scss, prefix c-support-cta). */
/* =============================================
   REDESIGN RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .p-pt-modes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-pt-tips__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-pt-help__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 768px) {
  /* hero: show only the final sentence */
  .p-pt-hero-catch,
  .p-pt-hero-extra {
    display: none;
  }
  /* section titles smaller, shorter flanking rules */
  .p-pt-secttl {
    gap: 12px;
    margin-bottom: 24px;
  }
  .p-pt-secttl::before, .p-pt-secttl::after {
    width: 24px;
  }
  /* body copy → 14px, matching the other redesigned pages */
  .p-pt-mode__desc,
  .p-pt-tip__text,
  .p-pt-faq__q-text,
  .p-pt-faq__a,
  .p-pt-table {
    font-size: 16px;
  }
  /* transport cards: 1 per row */
  .p-pt-modes {
    padding-top: 40px;
  }
  .p-pt-modes__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-pt-mode__media {
    aspect-ratio: 16/9;
  }
  /* usage tips: 1 per row */
  .p-pt-tips__grid {
    grid-template-columns: 1fr;
  }
  .p-pt-mode__title {
    font-size: 16px;
  }
  .p-pt-faq__q {
    padding: 16px 12px;
    gap: 8px;
  }
  .p-pt-aside {
    display: none;
  }
  .p-pt-help {
    padding: 8px var(--space-inline-pc) 40px;
  }
}
/* =============================================
   MAID SERVICE PAGE (p-maid-)
   メイド・家事サポート情報 (slug: maid)
   v3 redesign — guide-style split hero + content sections.
   Shares the public_transportation hero + CTA treatment.
   ============================================= */
/* =============================================
   HERO — guide-style split (like /useful): white panel
   fades over the photo in the right ~60%, green serif
   title + gold catch line.
   ============================================= */
@media (min-width: 768.02px) {
  .p-maid .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-maid .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: 72% center; /* nudge toward the right to reveal more of that side */
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-maid .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 14px;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.3;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.9;
  }
}
/* ---- hero mobile: same split — photo right 58%, text left ---- */
@media (max-width: 768px) {
  .p-maid .p-prop-list-hero--property {
    min-height: 260px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-maid .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-maid .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 45%, rgba(255, 255, 255, 0.85) 62%, rgba(255, 255, 255, 0) 88%);
    z-index: 1;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 64%;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.35;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.8;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 0;
  }
  .p-maid .p-prop-list-hero--property .p-prop-list-hero__desc br.sp {
    display: inline;
  }
}
/* hero catch / extra copy inside the desc */
.p-maid-hero-extra {
  display: block;
}

/* ---- shared section title with flanking gold rules ---- */
.p-maid-secttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 36px;
}
.p-maid-secttl::before, .p-maid-secttl::after {
  content: "";
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}

/* ---- image placeholder (used until real photos are supplied) ---- */
.p-maid-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-white)), color-mix(in srgb, var(--color-accent) 12%, var(--color-white)));
  color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.p-maid-ph svg {
  width: 26%;
  height: 26%;
  max-width: 56px;
  max-height: 56px;
}

/* =============================================
   メイドを利用するメリット — 5-card row
   ============================================= */
.p-maid-merit {
  padding: 64px var(--space-inline-pc) 32px;
}

.p-maid-merit__inner {
  max-width: 1200px;
  margin-inline: auto;
}

.p-maid-merit__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.p-maid-merit__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 28px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-maid-merit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-primary);
}
.p-maid-merit__icon svg {
  width: 28px;
  height: 28px;
}

.p-maid-merit__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-maid-merit__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  text-align: left;
}

/* pagination dots — mobile carousel only */
.p-maid-merit__dots {
  display: none;
}

/* =============================================
   バンコクのメイド事情 — text on light surface
   ============================================= */
.p-maid-about {
  padding: 32px var(--space-inline-pc);
}

.p-maid-about__inner {
  max-width: 1200px;
  margin-inline: auto;
  background: var(--color-bg-light);
  border-radius: 16px;
  padding: 44px 48px;
}

.p-maid-about__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 15.143px + 0.893vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-maid-about__text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}
.p-maid-about__text:last-child {
  margin-bottom: 0;
}

/* =============================================
   メイドの種類 — 3 image cards
   ============================================= */
.p-maid-types {
  padding: 56px var(--space-inline-pc);
}

.p-maid-types__inner {
  max-width: 1200px;
  margin-inline: auto;
}

.p-maid-types__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.p-maid-type {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-maid-type__media {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.p-maid-type__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-maid-type__title {
  margin: 0;
  padding: 18px 22px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-maid-type__text {
  margin: 12px 0 0;
  padding: 0 22px 24px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}

/* =============================================
   メイド採用時の注意点 — icon | label | text rows
   ============================================= */
.p-maid-notes {
  padding: 56px var(--space-inline-pc);
  background: var(--color-bg-light);
}

.p-maid-notes__inner {
  max-width: 1200px;
  margin-inline: auto;
}

.p-maid-notes__lead {
  margin: -16px 0 32px;
  text-align: center;
  font-size: 16px;
  color: var(--color-text);
}

.p-maid-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-maid-note {
  display: grid;
  grid-template-columns: 56px 180px 1fr;
  align-items: center;
  gap: 20px;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: 22px 26px;
}

.p-maid-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-primary);
}
.p-maid-note__icon svg {
  width: 26px;
  height: 26px;
}

.p-maid-note__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-maid-note__text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}

/* =============================================
   よくあるご質問 — accordion
   ============================================= */
.p-maid-faq {
  padding: 56px var(--space-inline-pc);
}

.p-maid-faq__inner {
  max-width: 1200px;
  margin-inline: auto;
}

.p-maid-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-maid-faq__item {
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
}

.p-maid-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  cursor: pointer;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-weight: 600;
  color: var(--color-text);
}

.p-maid-faq__badge {
  flex: none;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 19px;
}

.p-maid-faq__q-text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
}

.p-maid-faq__chevron {
  flex: none;
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  transition: transform 0.25s ease;
}
.p-maid-faq__chevron svg {
  width: 100%;
  height: 100%;
}

.p-maid-faq__item.is-open .p-maid-faq__chevron {
  transform: rotate(180deg);
}

/* answer panel: its background/height ease open via the grid-rows 0fr→1fr trick,
   and the text drifts down with a slight fade */
.p-maid-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-maid-faq__item.is-open .p-maid-faq__a {
  grid-template-rows: 1fr;
}

.p-maid-faq__a-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-maid-faq__item.is-open .p-maid-faq__a-inner {
  opacity: 1;
  transform: translateY(0);
}

/* padding lives on the text (inside the clipped wrapper) so it collapses fully */
.p-maid-faq__a-text {
  margin: 0;
  padding: 0 20px 20px 46px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

/* =============================================
   西村不動産からのアドバイス — text + image
   ============================================= */
.p-maid-advice {
  padding: 24px var(--space-inline-pc) 72px;
}

.p-maid-advice__inner {
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
  min-height: 240px;
  background: var(--color-bg-light);
  border-radius: 16px;
  overflow: hidden;
}

.p-maid-advice__body {
  position: relative;
  z-index: 2;
  /* text stays left of the photo, but long lines spill over its faded edge
     instead of wrapping early */
  padding: 36px 16% 36px 48px;
}

.p-maid-advice__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(24px, 19.429px + 0.595vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-maid-advice__text {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}
.p-maid-advice__text:last-child {
  margin-bottom: 0;
}

.p-maid-advice__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  z-index: 0;
  /* fade the light content bg into the image on its left edge (like p-promo-cta) */
}
.p-maid-advice__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--color-bg-light) 0%, rgba(247, 248, 246, 0) 70%);
}
.p-maid-advice__media img,
.p-maid-advice__media .p-maid-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サポート CTA moved to the shared component template-parts/support-cta.php
   (styles in _support-cta.scss, prefix c-support-cta). */
/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .p-maid-merit__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-maid-types__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
  /* stack: text on top, image below in normal flow */
  .p-maid-advice__inner {
    min-height: 0;
  }
  .p-maid-advice__body {
    position: static;
    padding: 40px;
  }
  .p-maid-advice__media {
    position: relative;
    width: 100%;
    height: 240px;
  }
  /* image now sits below the text → fade from the top instead */
  .p-maid-advice__media::before {
    background: linear-gradient(to bottom, var(--color-bg-light) 0%, rgba(247, 248, 246, 0) 45%);
  }
}
@media (max-width: 768px) {
  /* hero: show only the catch sentence, as plain 12px body text */
  .p-maid-secttl {
    gap: 12px;
    margin-bottom: 28px;
  }
  .p-maid-secttl::before, .p-maid-secttl::after {
    width: 24px;
  }
  /* body copy → 14px to match the other redesigned pages */
  .p-maid-merit__text,
  .p-maid-about__text,
  .p-maid-type__text,
  .p-maid-note__text,
  .p-maid-notes__lead,
  .p-maid-faq__q-text,
  .p-maid-faq__a,
  .p-maid-advice__text {
    font-size: 16px;
  }
  .p-maid-about__text, .p-maid-advice__text {
    margin-bottom: 22px;
  }
  .p-maid-type__title {
    font-size: 16px;
  }
  .p-maid-advice__title {
    margin-bottom: 14px;
  }
  .p-maid-types {
    padding-top: 12px;
  }
  .p-maid-merit {
    padding-top: 44px;
  }
  /* merit cards → native scroll-snap carousel (same movement as the top-page
     property carousel): swipe, each card snaps to the centre. The side padding
     lets the first/last card reach the centre too. */
  .p-maid-merit__grid {
    grid-template-columns: none;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 16px;
    scroll-padding-inline: 16%;
    margin-inline: calc(var(--space-inline-sp) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p-maid-merit__grid::-webkit-scrollbar {
    display: none;
  }
  .p-maid-merit__item {
    flex: 0 0 68%;
    scroll-snap-align: center;
    box-sizing: border-box;
    padding: 22px 14px;
  }
  /* pagination dots under the cards */
  .p-maid-merit__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }
  .p-maid-merit__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: #cfd3ce;
    border-radius: 50%;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .p-maid-merit__dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--color-accent);
  }
  .p-maid-about__inner {
    padding: 28px 22px;
  }
  .p-maid-notes__lead {
    margin-top: -8px;
  }
  .p-maid-note {
    grid-template-columns: 44px 1fr;
    grid-template-areas: "icon label" "text text";
    gap: 6px 14px;
    padding: 18px 18px;
  }
  .p-maid-note__icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
  }
  .p-maid-note__icon svg {
    width: 22px;
    height: 22px;
  }
  .p-maid-note__label {
    grid-area: label;
    align-self: center;
    font-size: 16px;
  }
  .p-maid-note__text {
    grid-area: text;
    margin-top: 6px;
  }
  .p-maid-faq__q {
    padding: 16px 14px;
    gap: 8px;
  }
  .p-maid-faq__a-text {
    padding: 0 14px 16px 40px;
  }
  .p-maid-advice__body {
    padding: 28px 22px;
  }
  .p-maid-advice__media {
    height: 200px;
  }
}
/* =============================================
   PUBLIC SERVICES PAGE (p-ps-)
   公共サービス情報 (slug: public_services)

   Hero is the shared guide split hero (see _guide.scss, .p-ps in the
   :is() list). Bottom CTA reuses .p-flow-contact (see _flow.scss).
   ============================================= */
/* ---------------------------------------------
   HERO — same split as /guide, but primary-green title
   (overrides the shared #000 title from _guide.scss)
   --------------------------------------------- */
.p-ps .p-prop-list-hero--property .p-prop-list-hero__title {
  color: var(--color-primary);
  text-shadow: none;
}

/* ---------------------------------------------
   INTRO (section heading + lead)
   --------------------------------------------- */
.p-ps-intro {
  padding: 64px var(--space-inline-pc) 12px;
}

.p-ps-intro__inner {
  max-width: 1320px;
  margin-inline: auto;
  text-align: center;
}

.p-ps-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 22px;
}

.p-ps-heading__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.p-ps-heading__icon svg {
  width: 100%;
  height: 100%;
}

.p-ps-intro__lead {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}

/* ---------------------------------------------
   UTILITY CARDS (電気 / 水道 / ガス / インターネット)
   --------------------------------------------- */
.p-ps-cards {
  padding: 28px var(--space-inline-pc) 64px;
}

.p-ps-cards__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-ps-cards__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.p-ps-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 22px 22px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-ps-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.p-ps-card__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-primary);
}
.p-ps-card__icon svg {
  width: 22px;
  height: 22px;
}

.p-ps-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.p-ps-card__media {
  aspect-ratio: 16/11;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.p-ps-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-ps-card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}

/* ---------------------------------------------
   日本との主な違い・注意点 (checklist + image)
   --------------------------------------------- */
.p-ps-diff {
  padding-inline: var(--space-inline-pc);
}

.p-ps-diff__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: center;
  background: var(--color-bg-light);
  border-radius: 14px;
  padding: 40px 44px;
}

.p-ps-diff__title {
  margin: 0 0 24px;
  font-size: clamp(20px, 2.3vw, 24px);
  font-weight: 700;
  color: var(--color-primary);
  position: relative;
  padding-left: 16px;
}
.p-ps-diff__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--color-accent);
}

.p-ps-diff__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-ps-diff__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

.p-ps-diff__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 1px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.p-ps-diff__check svg {
  width: 14px;
  height: 14px;
}

.p-ps-diff__media {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
}
.p-ps-diff__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------
   西村不動産からのアドバイス (text + image)
   --------------------------------------------- */
.p-ps-advice {
  padding: 48px var(--space-inline-pc) 72px;
}

.p-ps-advice__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: center;
  background: var(--color-bg-light);
  border-radius: 14px;
  padding: 40px 44px;
}

.p-ps-advice__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: clamp(20px, 2.3vw, 24px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-ps-advice__icon {
  flex: none;
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.p-ps-advice__icon svg {
  width: 100%;
  height: 100%;
}

.p-ps-advice__text {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}

.p-ps-advice__media {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
}
.p-ps-advice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom CTA uses the shared component template-parts/support-cta.php (_support-cta.scss). */
/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .p-ps-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .p-ps-heading {
    gap: 5px;
  }
  .p-ps-intro__lead, .p-ps-card__desc, .p-ps-diff__item, .p-ps-advice__text {
    font-size: 16px;
    text-align: left;
  }
  /* hero desc: show only the first sentence on mobile */
  .p-ps .p-prop-list-hero__desc .p-ps-hero-extra {
    display: none;
  }
  .p-ps-intro {
    padding-top: 44px;
  }
  .p-ps-intro__lead br.pc {
    display: none;
  }
  .p-ps-cards {
    padding-bottom: 48px;
  }
  .p-ps-cards__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-ps-diff__inner,
  .p-ps-advice__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px;
  }
  /* image stays below the text content on mobile (natural source order) */
  .p-ps-advice {
    padding-block: 36px 56px;
  }
}
/* =============================================
   SHOPPING PAGE (p-shopping-)
   ショッピング (slug: shopping)
   v3 redesign — guide-style split hero (green serif title + beige note box)
   → バンコクのショッピング事情 intro → 3 category panels of venue cards
   → ショッピングのポイント box → green サポート CTA.
   Reuses the /hospital hero + CTA treatment.
   ============================================= */
/* =============================================
   HERO — guide-style split: white panel fades over
   the photo in the right ~60%, green serif title.
   ============================================= */
@media (min-width: 768.02px) {
  .p-shopping .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-shopping .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-shopping .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 42%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 18px;
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.3;
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.9;
  }
}
/* ---- hero mobile: photo right 58%, text left ---- */
@media (max-width: 768px) {
  .p-shopping .p-prop-list-hero--property {
    min-height: 260px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-shopping .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 56%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-shopping .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 46%, rgba(255, 255, 255, 0.85) 64%, rgba(255, 255, 255, 0) 90%);
    z-index: 1;
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 66%;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.35;
  }
  .p-shopping .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    font-size: 12px;
    line-height: 1.8;
    padding-top: 4px;
    padding-bottom: 0;
  }
}
/* hero lead copy inside the desc */
.p-shopping-hero__lead {
  display: block;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.9;
}

:root {
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E");
}

/* =============================================
   INTRO — バンコクのショッピング事情
   ============================================= */
.p-shopping-intro {
  padding: 60px var(--space-inline-pc) 20px;
}

.p-shopping-intro__inner {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}

.p-shopping-intro__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-shopping-intro__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--color-accent);
}
.p-shopping-intro__icon svg {
  width: 100%;
  height: 100%;
}

.p-shopping-intro__lead {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
  text-align: center;
}

/* disclaimer note below the lead — plain small text (matches /kindergarten) */
.p-shopping-intro__note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-light);
}

/* =============================================
   CATEGORY PANEL — bordered light surface holding
   a heading row + the card grid
   ============================================= */
.p-shopping-cat {
  padding: 24px var(--space-inline-pc);
}

.p-shopping-cat__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 36px 36px 40px;
  border: 1px solid #e7e7e3;
  border-radius: 16px;
}

.p-shopping-cat__head {
  margin-bottom: 28px;
}

.p-shopping-cat__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-shopping-cat__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}
.p-shopping-cat__icon svg {
  width: 100%;
  height: 100%;
}

.p-shopping-cat__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
}

/* =============================================
   CARD GRID
   ============================================= */
.p-shopping-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* pagination dots — mobile carousel only (hidden on the desktop grid) */
.p-shopping-cards__dots {
  display: none;
}

.p-shopping-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e7e7e3;
  border-radius: 12px;
  overflow: hidden;
}

/* ---- card photo ---- */
.p-shopping-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.p-shopping-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-shopping-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-white)), color-mix(in srgb, var(--color-accent) 14%, var(--color-white)));
  color: color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.p-shopping-card__ph svg {
  width: 48px;
  height: 48px;
}

/* ---- logo banner (supermarket cards) ----
   The banner owns the aspect ratio so a logo image and a text banner are always
   the same height; the image is contained (never cropped) inside it. */
.p-shopping-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16/7;
  background: var(--color-white);
}

.p-shopping-card__logo-img {
  width: 100%;
  height: 100%;
  display: block;
  padding: 14px;
  object-fit: contain;
}

.p-shopping-card__logo-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ---- card body ---- */
.p-shopping-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 18px;
}

.p-shopping-card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
}

.p-shopping-card__name-ja {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
}

.p-shopping-card__desc {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  /* clamped to a fixed line count on PC (see below) so every card's meta starts
     on the same line without a big gap under the shorter descriptions */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- meta rows (エリア / BTS / MRT / OPEN) ---- */
.p-shopping-card__meta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #e0e0db;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-shopping-card__meta-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: baseline;
}

.p-shopping-card__meta-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

.p-shopping-card__meta-val {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

/* PC: reserve a uniform description height so the エリア/BTS meta block starts on
   the same line on every card in a row. Shorter descriptions just leave a larger
   gap before the meta — the start line stays consistent. (Line count differs by
   how many columns fit, so it's tuned per breakpoint.) */
@media (min-width: 1100.02px) {
  .p-shopping-card__desc { /* 5-col: clamp + reserve exactly 4 lines */
    -webkit-line-clamp: 4;
    min-height: 7.2em;
  }
}
@media (min-width: 768.02px) and (max-width: 1100px) {
  .p-shopping-card__desc { /* 3-col: clamp + reserve exactly 3 lines */
    -webkit-line-clamp: 3;
    min-height: 5.4em;
  }
}
/* ---- supermarket 店舗 list ---- */
.p-shopping-card__list {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed #e0e0db;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.p-shopping-card__list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}
.p-shopping-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* =============================================
   ショッピングのポイント
   ============================================= */
.p-shopping-tips {
  width: 100%;
  padding: 40px var(--space-inline-pc) 64px;
}

.p-shopping-tips__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center;
  padding: 40px 44px;
  background: var(--color-bg-light);
  border-radius: 16px;
}

.p-shopping-tips__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-shopping-tips__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}
.p-shopping-tips__icon svg {
  width: 100%;
  height: 100%;
}

.p-shopping-tips__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-shopping-tips__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}

.p-shopping-tips__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
}
.p-shopping-tips__check svg {
  width: 14px;
  height: 14px;
}

.p-shopping-tips__media {
  aspect-ratio: 1/1;
  border-radius: 14px;
  overflow: hidden;
}
.p-shopping-tips__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サポート CTA moved to the shared component template-parts/support-cta.php
   (styles in _support-cta.scss, prefix c-support-cta). */
/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .p-shopping-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* A section with fewer cards than the default column count would otherwise
   leave empty tracks, so the row is sized to how many cards it actually has
   and the cards share the full width. Doubled class = wins over the
   breakpoint rules above regardless of source order. Carousel widths (sp)
   are set further down and stay untouched. */
@media (min-width: 768.02px) {
  .p-shopping-cards.p-shopping-cards--count-1 {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-shopping-cards.p-shopping-cards--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-shopping-cards.p-shopping-cards--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .p-shopping-cards.p-shopping-cards--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* wider cards fit the copy in fewer lines, so reserve fewer */
  .p-shopping-cards--count-1 .p-shopping-card__desc,
  .p-shopping-cards--count-2 .p-shopping-card__desc,
  .p-shopping-cards--count-3 .p-shopping-card__desc {
    -webkit-line-clamp: 3;
    min-height: 5.4em;
  }
}
@media (max-width: 900px) {
  .p-shopping-tips__inner {
    grid-template-columns: 1fr;
  }
  .p-shopping-tips__media {
    display: none;
  }
}
@media (max-width: 768px) {
  .p-shopping-intro {
    padding: 40px var(--space-inline-sp) 12px;
  }
  .p-shopping-intro__lead {
    font-size: 16px;
    line-height: 1.9;
    text-align: left;
  }
  .p-shopping-intro__note {
    text-align: left;
  }
  .p-shopping-cat {
    padding: 16px var(--space-inline-sp);
  }
  .p-shopping-cat__inner {
    padding: 24px 18px 28px;
    border-radius: 14px;
  }
  .p-shopping-cat__head {
    margin-bottom: 20px;
  }
  .p-shopping-cat__sub {
    font-size: 16px;
  }
  /* cards → horizontal scroll-snap carousel (same movement as the /maid merit
     slider): swipe left/right, each card snaps to centre. Negative margin +
     padding lets the row bleed to the panel edges with the first/last card
     still able to centre. */
  .p-shopping-cards {
    grid-template-columns: none;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: 18px;
    scroll-padding-inline: 14%;
    margin-inline: -18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p-shopping-cards::-webkit-scrollbar {
    display: none;
  }
  .p-shopping-card {
    flex: 0 0 89%;
    scroll-snap-align: center;
    scroll-snap-stop: always; /* one card per swipe — can't fly past several */
  }
  /* skip the scroll-reveal fade on the carousel: off-screen cards to the right
     never intersect, so they'd stay blank and look like the list has ended. */
  .p-shopping-card.js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .p-shopping-card__body {
    padding: 14px 13px 16px;
  }
  /* pagination dots under each carousel */
  .p-shopping-cards__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }
  .p-shopping-cards__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: #cfd3ce;
    border-radius: 50%;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .p-shopping-cards__dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--color-accent);
  }
  .p-shopping-tips {
    padding: 28px var(--space-inline-sp) 44px;
  }
  .p-shopping-tips__inner {
    padding: 28px 22px;
  }
  .p-shopping-tips__title {
    font-size: 18px;
  }
  .p-shopping-tips__item {
    font-size: 14px;
  }
}
/* Larger phones / small tablets: a full-width carousel card makes the 4:3 image
   huge — show narrower cards so two peek and the image stays reasonable. */
@media (min-width: 600.02px) and (max-width: 768px) {
  .p-shopping-card {
    flex-basis: 58%;
  }
}
/* =============================================
   HOSPITAL PAGE (p-hospital-)
   病院 (slug: hospital)
   v3 redesign — guide-style split hero (like /maid) + 病院 card list
   + green サポート CTA.
   ============================================= */
/* =============================================
   HERO — guide-style split (same treatment as /maid):
   white panel fades over the photo in the right ~60%,
   green serif title + gold catch line.
   ============================================= */
@media (min-width: 768.02px) {
  .p-hospital .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-hospital .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: 60% center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-hospital .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 14px;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.3;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.9;
  }
  .p-hospital-hero-catch-sp {
    display: none;
  }
}
/* ---- hero mobile: same split — photo right 58%, text left ---- */
@media (max-width: 768px) {
  .p-hospital .p-prop-list-hero--property {
    min-height: 260px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-hospital .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-hospital .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 45%, rgba(255, 255, 255, 0.85) 62%, rgba(255, 255, 255, 0) 88%);
    z-index: 1;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 64%;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.35;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.8;
    font-size: 12px;
    padding-top: 6px;
    padding-bottom: 0;
  }
  .p-hospital .p-prop-list-hero--property .p-prop-list-hero__desc br.sp {
    display: inline;
  }
}
/* hero catch / extra copy inside the desc */
.p-hospital-hero-catch-sp {
  display: none;
}

.p-hospital-hero-extra {
  display: block;
}

/* mobile: show only the short catch sentence, hide the long paragraph so the
   hero stays the same height as the other guide heroes */
@media (max-width: 768px) {
  .p-hospital-hero-catch-sp {
    display: block;
  }
  .p-hospital-hero-extra {
    display: none;
  }
}
/* =============================================
   バンコクの主な病院 — section head
   ============================================= */
.p-hospital-list {
  padding: 64px var(--space-inline-pc);
}

.p-hospital-list__inner {
  max-width: 1320px; /* match header / footer content width */
  margin-inline: auto;
}

.p-hospital-head {
  text-align: center;
  margin-bottom: 40px;
}

.p-hospital-secttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-hospital-secttl__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--color-accent);
}
.p-hospital-secttl__icon svg {
  width: 100%;
  height: 100%;
}

.p-hospital-head__sub {
  margin: 0;
  font-size: 16px;
  color: var(--color-text);
}

/* =============================================
   病院カード — photo | name+desc | info table
   ============================================= */
.p-hospital-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-hospital-card {
  display: grid;
  grid-template-columns: 240px 1fr 360px;
  align-items: stretch;
  gap: 44px;
  background: var(--color-white);
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-hospital-card__media {
  border-radius: 10px;
  overflow: hidden;
}
.p-hospital-card__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
}

/* fallback when a building photo hasn't been supplied yet */
.p-hospital-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-white)), color-mix(in srgb, var(--color-accent) 12%, var(--color-white)));
  color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.p-hospital-card__ph svg {
  width: 64px;
  height: 64px;
}

.p-hospital-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.p-hospital-card__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.35;
}

.p-hospital-card__name-ja {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-light);
}

.p-hospital-card__desc {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

.p-hospital-card__link {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-hospital-card__link:hover {
  color: var(--color-accent);
}

/* ---- info table ---- */
.p-hospital-card__info {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-self: start; /* top-align with the photo + name, not vertically centered */
}

.p-hospital-card__info-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  /* center, not baseline: the label is a flex box whose icon shifts its
     baseline below the text, which drops the value (e.g. あり) lower than
     its label. Centering keeps label + value on the same level. */
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ececec;
}
.p-hospital-card__info-row:first-child {
  padding-top: 0;
}
.p-hospital-card__info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.p-hospital-card__info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.p-hospital-card__info-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}
.p-hospital-card__info-icon svg {
  width: 100%;
  height: 100%;
}

.p-hospital-card__info-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}
.p-hospital-card__info-value a {
  color: var(--color-text);
}
.p-hospital-card__info-value a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* サポート CTA moved to the shared component template-parts/support-cta.php
   (styles in _support-cta.scss, prefix c-support-cta). */
/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  /* drop the info table to a full-width row under the photo+body */
  .p-hospital-card {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
  .p-hospital-card__info {
    grid-column: 1/-1;
    border-top: 1px solid #ececec;
    padding-top: 4px;
  }
  .p-hospital-card__info-row {
    grid-template-columns: 120px 1fr;
  }
}
@media (max-width: 768px) {
  .p-hospital-list {
    padding: 44px var(--space-inline-sp);
  }
  .p-hospital-head {
    margin-bottom: 28px;
  }
  .p-hospital-head__sub {
    font-size: 14px;
  }
  /* stack everything */
  .p-hospital-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
    border-radius: 12px;
  }
  .p-hospital-card__media img {
    min-height: 180px;
    aspect-ratio: 16/10;
  }
  .p-hospital-card__name {
    font-size: 18px;
  }
  .p-hospital-card__desc {
    font-size: 14px;
    margin-top: 12px;
  }
  .p-hospital-card__link {
    padding-top: 14px;
  }
  .p-hospital-card__info {
    grid-column: auto;
    border-top: 1px solid #ececec;
    /* match the ~11px each row sits below its divider, so エリア isn't cramped
       against the top line */
    padding-top: 12px;
  }
  .p-hospital-card__info-row {
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 11px 0;
  }
  .p-hospital-card__info-label {
    font-size: 14px;
  }
  .p-hospital-card__info-value {
    font-size: 14px;
  }
}
/* =============================================
   KINDERGARTEN PAGE (p-kg-)
   幼稚園 (slug: kindergarten)
   v3 redesign — guide-style split hero → 幼稚園選びのポイント (icon cards)
   → バンコクの主な幼稚園 card list (photo + names + desc + pill meta)
   → よくあるご質問 quick links → green サポート CTA.
   Reuses the /hospital hero + CTA treatment.
   ============================================= */
/* =============================================
   HERO — guide-style split: white panel fades over
   the photo in the right ~60%, green serif title.
   ============================================= */
@media (min-width: 768.02px) {
  .p-kg .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-kg .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-kg .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 42%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 14px;
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.3;
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.9;
  }
}
/* ---- hero mobile: photo right 56%, text left ---- */
@media (max-width: 768px) {
  .p-kg .p-prop-list-hero--property {
    min-height: 260px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-kg .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 54%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-kg .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 46%, rgba(255, 255, 255, 0.85) 64%, rgba(255, 255, 255, 0) 90%);
    z-index: 1;
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 66%;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
    line-height: 1.35;
  }
  .p-kg .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    font-size: 12px;
    line-height: 1.8;
    padding-top: 4px;
    padding-bottom: 0;
  }
}
/* hero catch / extra copy inside the desc */
.p-kg-hero__extra {
  display: block;
}

/* mobile: hide the intro line so the hero desc stays short */
@media (max-width: 768px) {
  .p-kg-hero__extra {
    display: none;
  }
}
/* =============================================
   Shared centered section title (with side rules)
   ============================================= */
.p-kg-rule-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 40px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}
.p-kg-rule-title::before, .p-kg-rule-title::after {
  content: "";
  width: clamp(40px, 12vw, 120px);
  height: 1px;
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.p-kg-secttl {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}

/* =============================================
   幼稚園選びのポイント — 5 icon cards
   ============================================= */
.p-kg-points {
  padding: 64px var(--space-inline-pc) 32px;
}

.p-kg-points__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-kg-points__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.p-kg-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
  background: var(--color-white);
  border: 1px solid #e7e7e3;
  border-radius: 14px;
}

.p-kg-point__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: var(--color-accent);
}
.p-kg-point__icon svg {
  width: 100%;
  height: 100%;
}

.p-kg-point__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
}

.p-kg-point__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  text-align: left;
}

/* =============================================
   バンコクの主な幼稚園 — card list
   ============================================= */
.p-kg-list {
  padding: 40px var(--space-inline-pc) 64px;
}

.p-kg-list__inner {
  max-width: 1320px;
  margin-inline: auto;
}

.p-kg-list__head {
  text-align: center;
  margin-bottom: 36px;
}

.p-kg-list__lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

.p-kg-list__note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-text-light);
}

.p-kg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-kg-card {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  align-items: stretch;
  gap: 32px;
  background: var(--color-white);
  border: 1px solid #e7e7e3;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.p-kg-card__media {
  width: 220px;
  height: 160px;
  align-self: center;
  border-radius: 10px;
  overflow: hidden;
}
.p-kg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-kg-card__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-white)), color-mix(in srgb, var(--color-accent) 14%, var(--color-white)));
  color: color-mix(in srgb, var(--color-primary) 38%, transparent);
}
.p-kg-card__ph svg {
  width: 56px;
  height: 56px;
}

.p-kg-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: center;
}

.p-kg-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
}

.p-kg-card__name-ja {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-light);
}

.p-kg-card__desc {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}

/* ---- official site link (matches .p-hospital-card__link) ---- */
.p-kg-card__link {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.p-kg-card__link:hover {
  color: var(--color-accent);
}

/* ---- pill meta table ---- */
.p-kg-card__meta {
  margin: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-kg-card__meta-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
}

.p-kg-card__meta-label {
  margin: 0;
  padding: 5px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-bg-footer-top);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-bg-footer-top));
  border-radius: 6px;
}

.p-kg-card__meta-val {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

/* サポート CTA moved to the shared component template-parts/support-cta.php
   (styles in _support-cta.scss, prefix c-support-cta). */
/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .p-kg-points__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* card: drop meta to a full-width row under photo+body */
  .p-kg-card {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
  .p-kg-card__media {
    width: 200px;
  }
  .p-kg-card__meta {
    grid-column: 1/-1;
    border-top: 1px solid #ececec;
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
  }
}
@media (max-width: 768px) {
  .p-kg-points {
    padding: 44px var(--space-inline-sp) 24px;
  }
  .p-kg-rule-title {
    gap: 12px;
    margin-bottom: 28px;
  }
  .p-kg-rule-title::before,
  .p-kg-rule-title::after {
    width: 24px;
  }
  .p-kg-points__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .p-kg-point {
    padding: 22px 14px;
  }
  .p-kg-point__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
  }
  .p-kg-point__title {
    font-size: 14px;
  }
  .p-kg-point__desc {
    font-size: 12px;
  }
  /* the odd 5th card would be orphaned — let it span the full row */
  .p-kg-point:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  .p-kg-list {
    padding: 24px var(--space-inline-sp) 48px;
  }
  .p-kg-list__head {
    margin-bottom: 24px;
  }
  /* lead + disclaimer left-aligned on phones */
  .p-kg-list__lead,
  .p-kg-list__note {
    text-align: left;
  }
  /* card: stack everything */
  .p-kg-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .p-kg-card__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
  }
  .p-kg-card__name {
    font-size: 16px;
  }
  .p-kg-card__name-ja {
    font-size: 12px;
  }
  .p-kg-card__desc {
    font-size: 14px;
    margin-top: 12px;
  }
  .p-kg-card__link {
    font-size: 13px;
    margin-top: 10px;
  }
  .p-kg-card__meta {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 8px;
    border-top: 1px solid #ececec;
    padding-top: 14px;
  }
  .p-kg-card__meta-row {
    grid-template-columns: 92px 1fr;
    gap: 10px;
    align-items: center;
  }
  .p-kg-card__meta-label {
    padding: 4px 4px;
  }
}
/* ---- small phones ---- */
@media (max-width: 600px) {
  .p-kg-points__grid {
    grid-template-columns: 1fr;
  }
  .p-kg-point {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px;
  }
  .p-kg-point__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
  }
  .p-kg-point__body {
    min-width: 0;
  }
}
/* =============================================
   THAI PAGE (p-thai-)
   タイについて (slug: thai)
   useful-style split hero + full-width (1320px) content
   ============================================= */
/* ---------------------------------------------
   HERO — split: white panel left, image right ~60%
   (mirrors the /useful treatment, THAILAND eyebrow
    above the green title)
   --------------------------------------------- */
@media (min-width: 768.02px) {
  .p-thai .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% */
    background-color: var(--color-white);
  }
  .p-thai .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-thai .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__card {
    gap: 14px;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
    letter-spacing: 0.12em;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 2;
  }
}
@media (max-width: 768px) {
  .p-thai .p-prop-list-hero--property {
    min-height: 230px;
    background-image: none !important;
    background-color: var(--color-white);
  }
  .p-thai .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .p-thai .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 44%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 86%);
    z-index: 1;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__left {
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--space-inline-sp);
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__card {
    width: 64%;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
    font-size: 12px;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.8;
    font-size: 12px;
    padding-top: 4px;
    padding-bottom: 0;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__desc br {
    display: none;
  }
  .p-thai .p-prop-list-hero--property .p-prop-list-hero__mobile-icon {
    display: none;
  }
}
/* ---------------------------------------------
   SHARED SECTION SHELL
   --------------------------------------------- */
.p-thai-sec {
  padding-block: 56px;
  padding-inline: var(--space-inline-pc);
}

/* alternating bands (explicit so the CTA <section> can't shift the count) */
.p-thai-life,
.p-thai-points-sec {
  background: var(--color-bg-light);
}

/* full-width container matching header/footer content */
.p-thai-wrap {
  max-width: 1320px;
  margin-inline: auto;
}

/* section heading: green vertical bar + bold title */
.p-thai-sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 32px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}
.p-thai-sec-head::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 1.2em;
  border-radius: 2px;
  background: var(--color-primary);
}

/* ---------------------------------------------
   基本情報 — icon / label / value cards
   --------------------------------------------- */
.p-thai-info__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-thai-info-card {
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 12px;
  padding: 24px 24px 22px;
}

.p-thai-info-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.p-thai-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}
.p-thai-info-card__icon svg {
  width: 22px;
  height: 22px;
}

.p-thai-info-card__label {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-thai-info-card__value {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.7;
  margin: 0;
}
.p-thai-info-card__value.is-lead {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

/* ---------------------------------------------
   生活情報 — image cards
   --------------------------------------------- */
.p-thai-life__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.p-thai-life-card {
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 12px;
  overflow: hidden;
}

.p-thai-life-card__media {
  display: block;
  aspect-ratio: 5/3;
}
.p-thai-life-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-thai-life-card__body {
  padding: 18px 18px 22px;
}

.p-thai-life-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px;
}

.p-thai-life-card__desc {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.8;
  margin: 0;
}

/* ---------------------------------------------
   文化・習慣 — image left + checklist right
   --------------------------------------------- */
.p-thai-culture {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: stretch;
}

.p-thai-culture__media {
  display: flex;
  align-items: center; /* center the 90%-tall image within the full-height cell */
}
.p-thai-culture__media img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.p-thai-culture__list {
  list-style: none;
  margin: 0;
  padding: 28px 32px;
  background: var(--color-bg-light);
  border-radius: 12px;
}

.p-thai-culture-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
}
.p-thai-culture-row:not(:last-child) {
  border-bottom: 1px dashed #d4d8d2;
}

.p-thai-culture-row__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.p-thai-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
}
.p-thai-check svg {
  width: 15px;
  height: 15px;
}

.p-thai-culture-row__desc {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ---------------------------------------------
   生活のポイント — icon cards
   --------------------------------------------- */
.p-thai-points__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.p-thai-point-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px 26px;
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 12px;
}

.p-thai-point-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  margin-bottom: 16px;
}
.p-thai-point-card__icon svg {
  width: 28px;
  height: 28px;
}

.p-thai-point-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px;
}

.p-thai-point-card__desc {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

/* pagination dots — mobile carousel only (hidden on the desktop grid) */
.p-thai-points__dots {
  display: none;
}

/* ---------------------------------------------
   よくあるご質問 — accordion + image
   --------------------------------------------- */
.p-thai-faq {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 44px;
  align-items: start;
}

.p-thai-faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.p-thai-acc {
  background: var(--color-white);
  border: 1px solid #e4e6e3;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.p-thai-acc.is-open {
  box-shadow: 0 6px 18px rgba(6, 51, 28, 0.08);
}

.p-thai-acc__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  user-select: none;
  /* now a <button> — strip default button chrome */
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
}
.p-thai-acc__summary::-webkit-details-marker {
  display: none;
}

.p-thai-acc__q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
}

.p-thai-acc__question {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.p-thai-acc__chevron {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-right: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

.p-thai-acc.is-open .p-thai-acc__chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* answer panel: height eases open via the grid-rows 0fr→1fr trick,
   and the content drifts down with a slight fade (same as /maid) */
.p-thai-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-thai-acc.is-open .p-thai-acc__panel {
  grid-template-rows: 1fr;
}

.p-thai-acc__panel-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-thai-acc.is-open .p-thai-acc__panel-inner {
  opacity: 1;
  transform: translateY(0);
}

/* padding lives inside the clipped wrapper so it collapses fully */
.p-thai-acc__body {
  padding: 0 22px 20px 66px;
}

.p-thai-acc__answer {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.9;
  margin: 0;
}

.p-thai-faq__media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-leaf);
  display: block;
}

/* tighten the gap between the FAQ section and the message card
   (each .p-thai-sec adds 56px, so 112px stacked otherwise) */
.p-thai-faq-sec {
  padding-bottom: 24px;
}

.p-thai-msg-sec {
  padding-top: 24px;
}

/* ---------------------------------------------
   西村不動産からのメッセージ
   (light rounded box: text on the left, photo on the right)
   --------------------------------------------- */
.p-thai-msg {
  display: flex;
  align-items: center;
  gap: 44px;
  background: var(--color-bg-light);
  border-radius: 16px;
  padding: 44px 48px;
}

.p-thai-msg__text {
  flex: 1;
  min-width: 0;
  padding: 0;
}

.p-thai-msg__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 15.143px + 0.893vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
}

.p-thai-msg__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  flex-shrink: 0;
}
.p-thai-msg__icon svg {
  width: 24px;
  height: 24px;
}

.p-thai-msg__lead {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}
.p-thai-msg__lead:last-child {
  margin-bottom: 0;
}

.p-thai-msg__media {
  flex: 0 0 340px; /* photo sits to the right of the text */
}
.p-thai-msg__media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 768.02px) and (max-width: 1024px) {
  .p-thai-info__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-thai-life__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-thai-points__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-thai-culture {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-thai-faq {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-thai-faq__media {
    max-width: 480px;
  }
}
@media (max-width: 768px) {
  .p-thai-sec {
    padding-block: 22px;
  }
  .p-thai-sec-head {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .p-thai-info__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .p-thai-info-card {
    padding: 18px 16px 16px;
  }
  .p-thai-info-card__head {
    gap: 10px;
    margin-bottom: 10px;
  }
  .p-thai-info-card__icon {
    width: 36px;
    height: 36px;
  }
  .p-thai-info-card__icon svg {
    width: 19px;
    height: 19px;
  }
  .p-thai-info-card__label {
    font-size: 16px;
  }
  /* 2-up keeps the cards (and their 4:3 images) from getting too big when
     stacked full-width */
  .p-thai-life__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .p-thai-culture {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-thai-culture__list {
    padding: 20px 18px;
  }
  .p-thai-culture-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0;
  }
  .p-thai-culture-row__desc {
    padding-left: 38px;
  }
  /* 生活のポイント → native scroll-snap carousel (same movement as /maid merit):
     swipe, each card snaps to the centre; the side padding lets the first/last
     card reach the centre too. */
  .p-thai-points__grid {
    grid-template-columns: none;
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    /* lock gestures to horizontal panning so the strip can't be dragged up/down */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-inline: 16px;
    scroll-padding-inline: 16%;
    margin-inline: calc(var(--space-inline-sp) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .p-thai-points__grid::-webkit-scrollbar {
    display: none;
  }
  .p-thai-point-card {
    flex: 0 0 68%;
    scroll-snap-align: center;
    box-sizing: border-box;
    padding: 28px 18px 24px;
  }
  /* pagination dots under the cards */
  .p-thai-points__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }
  .p-thai-points__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: #cfd3ce;
    border-radius: 50%;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .p-thai-points__dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--color-accent);
  }
  .p-thai-faq {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-thai-faq__media {
    order: -1;
  }
  .p-thai-acc__summary {
    padding: 14px 16px;
    gap: 10px;
  }
  .p-thai-acc__question {
    font-size: 16px;
  }
  .p-thai-acc__body {
    padding: 0 16px 18px 16px;
  }
  .p-thai-msg {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 28px 22px;
  }
  .p-thai-msg__title {
    margin-bottom: 14px;
  }
  .p-thai-msg__lead {
    font-size: 14px;
  }
  .p-thai-msg__media {
    order: 0; /* back to source order: text on top, photo below */
    flex: none;
  }
  .p-thai-info-card__value.is-lead {
    font-size: 14px;
  }
  .p-thai-info-card__value,
  .p-thai-life-card__desc,
  .p-thai-culture-row__desc,
  .p-thai-point-card__desc,
  .p-thai-acc__answer {
    font-size: 14px;
  }
  .p-thai-msg__icon {
    display: none;
  }
  p-thai-point-card__title {
    font-size: 16px;
  }
}
/* Small phones: the 2-up life cards get too cramped — go back to one column. */
@media (max-width: 400px) {
  .p-thai-life__grid {
    grid-template-columns: 1fr;
  }
}
/* =============================================
   ABOUT / COMPANY PROFILE PAGE (p-about-)
   会社概要 (slug: company) — v3 redesign
   Property-style hero → breadcrumb → stats → 選ばれる理由
   → 会社概要 + アクセス → contact CTA (shared .p-flow-contact).
   ============================================= */
/* ---- Breadcrumb (below hero, same as property/flow pages) ---- */
.p-about-breadcrumb {
  border-bottom: 1px solid #eee;
  background: var(--color-white);
}

.p-about-breadcrumb__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 14px var(--space-inline-sp);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}
.p-about-breadcrumb__inner a {
  text-decoration: none;
  color: var(--color-text-light);
}
.p-about-breadcrumb__inner a:hover {
  color: var(--color-primary);
}
.p-about-breadcrumb__inner .is-current {
  color: var(--color-text);
}

/* ---- Stats band ---- */
.p-about-stats {
  padding-block: 56px;
  padding-inline: var(--space-inline-pc);
}

.p-about-stats__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.p-about-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 16px;
  /* vertical dividers between stats */
}
.p-about-stat:not(:last-child) {
  border-right: 1px solid #e4ede6;
}

/* wings flank each stat; the right wing is a horizontal mirror of the left */
.p-about-stat__wing {
  display: inline-flex;
  flex-shrink: 0;
}
.p-about-stat__wing img {
  width: auto;
  height: 96px;
}

.p-about-stat__wing--right img {
  transform: scaleX(-1);
}

.p-about-stat__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p-about-stat__num {
  font-family: var(--font-heading);
  font-size: clamp(17.5px, 5.5px + 1.563vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.p-about-stat__label {
  font-size: clamp(16px, 6.857px + 1.19vw, 24px);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* ---- 選ばれる理由 (own feature cards — independent of homepage) ---- */
.p-about-reasons {
  padding-top: 24px;
}

/* max-width 1360 + 20px side padding nets 1320px of content,
   aligning the cards with the stats/profile sections above/below */
.p-about-reasons__list {
  max-width: 1360px;
  margin-inline: auto;
  padding: 44px var(--space-inline-sp);
}

.p-about-reasons__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-bottom: 44px;
  border-bottom: 1px solid #e0e0e0;
}

.p-about-reason {
  text-align: center;
  padding: 12px 24px;
  position: relative;
}
.p-about-reason:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 72px;
  background: #e0e0e0;
}

.p-about-reason__icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.p-about-reason__icon svg {
  width: 100%;
  height: 100%;
}

.p-about-reason__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.p-about-reason__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-light);
  text-align: left;
}

.p-about-reasons__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: clamp(18px, 11.143px + 0.893vw, 24px);
  font-weight: 900;
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 0;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-inline-sp);
  /* separator lines flanking the text — match the feature grid's bottom line */
}
.p-about-reasons__heading::before, .p-about-reasons__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

/* green short underline under the heading text */
.p-about-reasons__heading-text {
  position: relative;
  padding-bottom: 14px;
}
.p-about-reasons__heading-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ---- 会社概要 + アクセス ---- */
.p-about-profile {
  padding-block: 40px 64px;
  padding-inline: var(--space-inline-pc);
  background: var(--color-white);
}

.p-about-profile__inner {
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}

.p-about-profile__heading {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 0 0 20px;
}

/* ---- 会社概要 card (border wraps the heading + table; ---- */
/*      no inline padding so the th cells meet the border)   */
.p-about-card {
  background: var(--color-white);
  border: 1px solid #d8e0da;
  border-radius: 8px;
  overflow: hidden;
}
.p-about-card .p-about-profile__heading {
  margin: 0;
  padding: 18px 18px 14px;
}

/* ---- Info table ---- */
.p-about-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #e4ede6;
}
.p-about-table th,
.p-about-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #e4ede6;
  font-size: var(--fs-md);
  line-height: 1.8;
  vertical-align: top;
  text-align: left;
}
.p-about-table tr:last-child th,
.p-about-table tr:last-child td {
  border-bottom: none;
}
.p-about-table th {
  width: 130px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  background: var(--color-bg-light);
}
.p-about-table td {
  color: var(--color-text);
}
.p-about-table td a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Map ---- */
.p-about-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
  border-radius: 8px;
}

/* ---- Access (station walk times) ---- */
.p-about-access {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
}

.p-about-access__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
}

.p-about-access__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 4px;
}

.p-about-access__station {
  font-weight: 700;
}

.p-about-access__walk {
  color: var(--color-text-light);
  font-size: 14px;
}

/* ---- 主要取引先 ---- */
.p-about-clients-block {
  max-width: 1320px;
  margin: 64px auto 0;
}

.p-about-clients-block__heading {
  font-size: 24px;
  font-weight: 900;
  color: var(--color-primary);
  font-family: var(--font-heading);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary);
}

.p-about-clients {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 24px;
  padding: 0;
  margin: 0;
}
.p-about-clients li {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  padding: 4px 0;
  border-bottom: 1px dotted #d8e8db;
}

/* =============================================
   INQUIRY CONTACT INFO (.p-inquiry-contact)
   Rendered by template-parts/contact-info.php.
   ============================================= */
.p-inquiry-contacts {
  padding-bottom: 0;
}

.p-inquiry-contact {
  padding-block: 60px 48px;
  padding-inline: var(--space-inline-pc);
}

.p-inquiry-contact__inner {
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.p-inquiry-contact__card {
  display: flex;
  flex-direction: column;
}

.p-inquiry-contact__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 18px;
}

.p-inquiry-contact__title-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-green);
}
.p-inquiry-contact__title-icon svg {
  width: 100%;
  height: 100%;
}

.p-inquiry-contact__numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
.p-inquiry-contact__numbers--secondary {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #d8e8db;
}

.p-inquiry-contact__group-label {
  display: block;
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.p-inquiry-contact__tel {
  display: block;
  width: fit-content;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1.5;
  transition: color 0.2s ease;
}
.p-inquiry-contact__tel:hover {
  color: var(--color-green);
  opacity: 1;
}

.p-inquiry-contact__hours {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  margin-top: 18px;
  background: #f4fcf6;
  border-radius: 8px;
}

.p-inquiry-contact__hours-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--color-green);
}
.p-inquiry-contact__hours-icon svg {
  width: 100%;
  height: 100%;
}

.p-inquiry-contact__hours-text {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
}
.p-inquiry-contact__hours-text strong {
  display: block;
  font-weight: 700;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .p-about-stats {
    padding-block: 36px;
  }
  .p-about-stats__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 15px;
  }
  .p-about-stat {
    /* keep the wings hugging the centered title instead of pushed to the edges */
    justify-content: center;
    gap: 8px;
    padding-inline: 0px;
    /* no dividers on phone — the grid gap separates the stats */
  }
  .p-about-stat:not(:last-child) {
    border-right: none;
  }
  .p-about-stat__wing img {
    height: 80px;
  }
  .p-about-reasons__heading {
    gap: 14px;
  }
  .p-about-reasons__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .p-about-reason {
    padding: 12px 0;
  }
  .p-about-reason:not(:last-child)::after {
    display: none;
  }
  .p-about-reason__title {
    font-size: 16px;
  }
  .p-about-profile {
    padding-block: 10px;
  }
  .p-about-profile__inner {
    /* minmax(0,…) lets the column shrink below its content's min width
       so nothing forces it wider than the screen */
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  /* stations stack instead of forcing one wide line */
  .p-about-access {
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  .p-about-table th,
  .p-about-table td {
    display: block;
    width: 100%;
    padding: 10px 14px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .p-about-table th {
    border-bottom: none;
    padding-bottom: 6px;
  }
  .p-about-table td {
    padding-top: 6px;
  }
  .p-about-table tr {
    border-bottom: 1px solid #e4ede6;
    display: block;
  }
  .p-about-table tr:last-child {
    border-bottom: none;
  }
  .p-about-map iframe {
    height: 280px;
  }
  .p-about-clients {
    grid-template-columns: 1fr;
  }
  .p-inquiry-contact {
    padding-block: 40px 0;
    padding-inline: var(--space-inline-sp);
  }
  .p-inquiry-contact__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-inquiry-contact__numbers {
    grid-template-columns: 1fr;
  }
}
/* =============================================
   MAPS PAGE (p-maps)
   ============================================= */
.p-maps {
  position: relative;
  display: flex;
  flex-direction: column;
}

.p-maps__map {
  width: 100%;
  /* Header is 84px on desktop / 64px on mobile (see _header.scss); subtract the
     matching value so map + sticky header == one viewport (no extra scroll). */
  height: calc(100vh - 84px);
  min-height: 500px;
  z-index: 0;
}

/* ---- Type markers (AdvancedMarkerElement content) ----
   16px at the default zoom, matching the badge size on the old site — ~650
   properties sit in the Sukhumvit corridor, so anything larger merges the
   dense stretches into a solid block.
   `--marker-scale` is set on the map element by maps-page.js on every zoom
   change: this size is a ceiling (zooming in never enlarges it) and the badges
   shrink from here as the user zooms out.
   transform-origin is the bottom edge because that is where the Advanced
   Marker anchors its content to the coordinate — scaling from the centre would
   drift each badge off its building. */
.p-maps__marker {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-base);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transform: scale(var(--marker-scale, 1));
  transform-origin: bottom center;
  /* No transition: ~1,000 markers animating at once on every zoom step makes
     the map stutter, and Google already animates the zoom itself. */
}

/* ---- Legend overlay ---- */
.p-maps__legend {
  position: absolute;
  bottom: 60px;
  left: 10px;
  z-index: 400;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.p-maps__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-maps__legend-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Same per-type colors as the property list card tags */
.p-maps__legend-marker--condominium {
  background: #557EB5;
}

.p-maps__legend-marker--apartment {
  background: #45B62E;
}

.p-maps__legend-marker--serviced {
  background: #B38E5C;
}

.p-maps__legend-marker--townhouse {
  background: #C0714F;
}

.p-maps__legend-marker--house {
  background: #7A5C99;
}

.p-maps__legend-label {
  font-size: 12px;
  color: var(--color-text);
  white-space: nowrap;
}

/* ---- Google InfoWindow overrides ---- */
/* Strip the default InfoWindow chrome so the card sits edge-to-edge. */
.gm-style .gm-style-iw-c {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  max-width: none !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  max-width: none !important;
}

/* Kill the blue focus border the browser draws around the map when it (or a
   child) receives focus. */
.gm-style iframe + div {
  border: none !important;
}

/* Collapse the InfoWindow header row so it doesn't add empty height above the
   card; the close button is absolutely positioned so it stays visible. */
.gm-style .gm-style-iw-chr {
  height: 0;
  min-height: 0;
  overflow: visible;
}

.gm-style .gm-style-iw-c p {
  margin: 0.4em 0;
}

/* Nudge the default close button clear of the card image */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
  top: 2px !important;
  right: 2px !important;
}

/* ---- Popup card ---- */
.p-maps__popup {
  width: 220px;
  overflow: hidden;
}

.p-maps__popup-img-wrap {
  display: block;
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.p-maps__popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.p-maps__popup-img:hover {
  opacity: 0.88;
}

.p-maps__popup-img-placeholder {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

.p-maps__popup-body {
  padding: 10px 12px 12px;
}

.p-maps__popup-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-white);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.p-maps__popup-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
  /* Only transition color — the global `a` opacity fade promotes the text to a
     GPU layer that renders blurry inside Google's transformed InfoWindow. */
  transition: color 0.2s ease;
}
.p-maps__popup-name:hover {
  color: var(--color-green);
  opacity: 1; /* cancel the global a:hover opacity fade */
}

.p-maps__popup-location {
  font-size: 11px;
  color: var(--color-text-light);
  line-height: 1.4;
  margin-bottom: 5px;
}

.p-maps__popup-price {
  font-size: 14px;
  font-weight: 510;
  color: var(--color-green-dark);
}

.p-maps__popup-price-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-light);
  margin-right: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .p-maps__map {
    height: calc(100vh - var(--header-height)); /* mobile header = 64px */
  }
  .p-maps__legend {
    top: auto;
    bottom: 20px; /* anchor to the bottom-left on mobile */
    left: 10px;
    padding: 8px 12px;
    gap: 6px;
  }
  .p-maps__legend-marker {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  .p-maps__legend-label {
    font-size: 11px;
  }
}
/* =============================================
   PROMOTION PAGE (p-promo-)
   お得なプロモーション (slug: promotion)
   ============================================= */
/* =============================================
   HERO — desktop-only custom treatment
   Left ~40% white panel fading over the image, which
   sits in the right ~60%. Green title, black desc.
   (Mobile keeps the default --property hero behavior.)
   ============================================= */
@media (min-width: 768.02px) {
  .p-promo .p-prop-list-hero--property {
    min-height: 360px;
    background-image: none !important; /* image painted by ::after in the right 60% instead */
    background-color: var(--color-white);
  }
  /* image — right 60% of the hero, zoom-filled */
  .p-promo .p-prop-list-hero--property::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--hero-mobile-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }
  /* white panel on the left ~40%, fading over the image's left edge */
  .p-promo .p-prop-list-hero--property::before {
    background: linear-gradient(to right, var(--color-white) 0%, var(--color-white) 40%, rgba(255, 255, 255, 0) 68%);
    z-index: 1;
  }
  .p-promo .p-prop-list-hero--property .p-prop-list-hero__title {
    color: var(--color-primary);
    text-shadow: none;
  }
  .p-promo .p-prop-list-hero--property .p-prop-list-hero__desc {
    color: var(--color-text);
    text-shadow: none;
  }
  .p-promo .p-prop-list-hero--property .p-promo-hero__brand {
    color: var(--color-accent);
    font-size: 26px;
    font-weight: 900;
  }
  .p-promo .p-prop-list-hero--property .p-promo-hero__catch {
    color: var(--color-text);
    font-size: 26px;
    font-weight: 900;
  }
}
/* heading font for the two desc phrases (all breakpoints) */
.p-promo-hero__brand,
.p-promo-hero__catch {
  font-family: var(--font-heading);
}

/* Mobile hero uses the shared split treatment (white panel + image on the right)
   from _guide.scss — .p-promo is added to that mobile-only :is() list. */
/* ---- Breadcrumb ---- */
.p-promo__breadcrumb {
  border-bottom: 1px solid #eee;
  background: var(--color-white);
}

.p-promo__breadcrumb-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 14px var(--space-inline-sp);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-light);
}

.p-promo__breadcrumb-inner a:hover {
  color: var(--color-primary);
}

.p-promo__breadcrumb-inner .is-current {
  color: var(--color-text);
}

/* ---- Two-column body ---- */
.p-promo__inner {
  /* padding-inline (space-inline-pc) already centers content to the 1320px
     wrap — no max-width here or the gutters double up. */
  margin-inline: auto;
  padding: 56px var(--space-inline-pc) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

.p-promo__main {
  min-width: 0;
}

.p-promo__aside {
  min-width: 0;
}

/* =============================================
   SECTION HEAD (特典) — bracketed serif title + badges
   ============================================= */
.p-promo-section-head {
  text-align: center;
  margin-bottom: 26px;
}

.p-promo-section-head__title {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(26px, 10px + 2.083vw, 40px);
  font-weight: 700;
  color: var(--color-primary);
  padding-inline: 1.1em;
  position: relative;
}

/* wing icon flanking the title (right wing is a horizontal mirror) */
.p-promo-section-head__title::before,
.p-promo-section-head__title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.82em;
  height: 2em;
  background: url("../images/icons/wing.svg") no-repeat center/contain;
}

.p-promo-section-head__title::before {
  left: 0;
  transform: translateY(-50%);
}

.p-promo-section-head__title::after {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}

.p-promo-section-head__badges {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 30px;
}

.p-promo-section-head__badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
}

.p-promo-section-head__badge-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  color: var(--color-accent);
}
.p-promo-section-head__badge-icon svg {
  width: 100%;
  height: 100%;
}

/* =============================================
   BENEFIT CARDS
   ============================================= */
.p-promo-benefits__lead {
  text-align: center;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 60px;
  font-weight: 500;
}

.p-promo-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.p-promo-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 24px 6px 6px;
}

.p-promo-benefit__num {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.p-promo-benefit__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-primary);
  font-family: var(--font-heading);
  line-height: 1.45;
  margin: 0 0 10px;
}

/* Reserve a uniform 2-line title height on multi-column layouts so the
   description starts on the same line whether the title wraps to 1 or 2 lines
   (same technique as the /shopping cards). Single-column mobile is exempt. */
@media (min-width: 768.02px) {
  .p-promo-benefit__title {
    min-height: 2.9em;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.p-promo-benefit__desc {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.8;
  margin: 0 0 28px;
  text-align: left;
  /* dashed separator between the title and the description (same style as the
     /shopping cards). With the title's reserved 2-line height, this line starts
     on the same level across all cards in a row. */
  width: 100%;
  padding-top: 14px;
  border-top: 1px dashed #e0e0db;
}

.p-promo-benefit__media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  margin-top: auto;
}
.p-promo-benefit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-promo-benefits__notes {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.85;
}

/* =============================================
   SHARED CENTERED HEADING (流れ / 声)
   ============================================= */
.p-promo-heading {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 32px;
}

/* strip variant — text flanked by separator lines + short underline */
.p-promo-heading--strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--color-primary);
  font-weight: 900;
}
.p-promo-heading--strip::before, .p-promo-heading--strip::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}

.p-promo-flow,
.p-promo-voices {
  margin-top: 64px;
}

/* =============================================
   FLOW (5 steps)
   ============================================= */
.p-promo-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.p-promo-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 22px 16px;
}

.p-promo-flow__step:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}

.p-promo-flow__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.p-promo-flow__icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  margin-bottom: 20px;
}
.p-promo-flow__icon svg {
  width: 100%;
  height: 100%;
}

.p-promo-flow__step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.p-promo-flow__step-desc {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.7;
  font-weight: 500;
  text-align: left;
}

/* =============================================
   VOICES (testimonials)
   ============================================= */
.p-promo-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-promo-voice {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--color-bg-light);
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 32px 16px 20px;
}

.p-promo-voice__avatar {
  flex: none;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-promo-voice__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.p-promo-voice__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.p-promo-voice__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.85;
  margin: 0 0 10px;
}

.p-promo-voice__name {
  margin: auto 0 0;
  text-align: left;
  font-size: 14px;
  color: var(--color-text-light);
  font-weight: 600;
}

/* =============================================
   ASIDE
   ============================================= */
.p-promo-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.p-promo-aside__card {
  background: var(--color-white);
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.p-promo-aside__card-head {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary-light);
}

/* phone */
.p-promo-aside__card--phone .p-promo-aside__card-head {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 6px;
}

.p-promo-aside__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-primary);
}

.p-promo-aside__phone-icon {
  display: inline-flex;
}
.p-promo-aside__phone-icon svg {
  width: 26px;
  height: 26px;
}

.p-promo-aside__phone-num {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.p-promo-aside__phone-hours {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}

.p-promo-aside__phone-note {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-text-light);
  text-align: center;
}

/* LINE */
.p-promo-aside__line-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-promo-aside__line-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-line);
}

.p-promo-aside__line-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-promo-aside__line-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-promo-aside__line-badge {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-promo-aside__line-text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light);
}

.p-promo-aside__line-btn {
  display: block;
  margin-top: 16px;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-light);
  background: var(--color-white);
  border: 1px solid var(--color-primary-light);
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
.p-promo-aside__line-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-white);
}

.p-promo-aside__arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-text-light);
}

/* quick links */
.p-promo-aside__links {
  background: var(--color-white);
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.p-promo-aside__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #eee;
  transition: background 0.18s ease;
}
.p-promo-aside__link:last-child {
  border-bottom: 0;
}
.p-promo-aside__link:hover {
  background: var(--color-bg-light);
}

.p-promo-aside__link-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}
.p-promo-aside__link-icon svg {
  width: 100%;
  height: 100%;
}

.p-promo-aside__link-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.p-promo-aside__link-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.p-promo-aside__link-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-light);
}

/* banners — single full-width image */
.p-promo-aside__banner {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.p-promo-aside__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================
   BOTTOM CTA
   ============================================= */
.p-promo-cta {
  margin-top: 64px;
}

.p-promo-cta__inner {
  background: var(--color-primary);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: stretch;
}

.p-promo-cta__body {
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.p-promo-cta__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  text-align: center;
}

.p-promo-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.p-promo-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 8px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.p-promo-cta__btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.p-promo-cta__btn--line {
  background: var(--color-accent);
}

.p-promo-cta__btn-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.p-promo-cta__btn-icon svg {
  width: 100%;
  height: 100%;
}

.p-promo-cta__media {
  position: relative;
}

.p-promo-cta__media::before {
  /* green fade blending the image into the green body on its left edge */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-primary) 0%, rgba(6, 51, 28, 0) 55%);
  z-index: 1;
}

.p-promo-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .p-promo__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .p-promo__aside {
    position: static;
  }
}
@media (max-width: 900px) {
  .p-promo-flow__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .p-promo-flow__step:not(:last-child)::after {
    display: none;
  }
  .p-promo-cta__inner {
    grid-template-columns: 1fr;
  }
  .p-promo-cta__media {
    display: none;
  }
}
@media (max-width: 768px) {
  .p-promo__inner {
    padding: 36px var(--space-inline-sp) 56px;
    gap: 40px;
  }
  /* num + title on one row; desc + media span full width below */
  .p-promo-benefit {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    text-align: left;
    padding: 24px 16px 16px;
  }
  .p-promo-benefit__num {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .p-promo-benefit__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .p-promo-benefit__desc,
  .p-promo-benefit__media {
    grid-column: 1/-1;
  }
  .p-promo-benefit__desc {
    margin-top: 16px;
    margin-bottom: 20px;
  }
  .p-promo-benefits__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 28px 16px;
  }
  .p-promo-voices__grid {
    grid-template-columns: 1fr;
  }
  .p-promo-flow,
  .p-promo-voices {
    margin-top: 60px;
  }
  .p-promo-cta {
    padding-inline: var(--space-inline-sp);
  }
  .p-promo-cta__body {
    padding: 28px 10px;
  }
  /* Hide the CTA block and aside banners on phones */
  .p-promo-cta,
  .p-promo-aside__banner {
    display: none;
  }
  .p-promo-section-head__title {
    padding-inline: 1.1em;
  }
  .p-promo-section-head__badges {
    margin-top: 24px;
  }
  .p-promo-section-head__badges li {
    font-size: 18px;
    font-weight: 600;
  }
  .p-promo-benefit__media {
    aspect-ratio: 6/3;
  }
  /* flow card → horizontal: icon on the left, then [num + title] / desc on the
     right (same composition as the /guide cards). DOM order is num→title→
     icon→desc, so each cell is placed explicitly. */
  .p-promo-flow__step {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 8px; /* keeps the number↔title gap tight */
    text-align: left;
    padding: 18px 22px;
  }
  .p-promo-flow__icon {
    grid-column: 1;
    grid-row: 1/3;
    align-self: center;
    margin: 0 16px 0 0; /* extra gap only between the icon and the right items */
  }
  .p-promo-flow__num {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    margin: 0;
  }
  .p-promo-flow__step-title {
    grid-column: 3;
    grid-row: 1;
    margin: 0 0 4px;
  }
  .p-promo-flow__step-desc {
    grid-column: 2/-1; /* start under the number, aligned with the num's left edge */
    grid-row: 2;
    margin-top: 8px;
    text-align: left;
  }
}
@media (max-width: 600px) {
  .p-promo-flow__list {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-promo-flow__step:not(:last-child)::after {
    display: block;
    content: "›";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -24px;
    transform: translateX(-50%) rotate(90deg);
  }
}
/* =============================================
   PRIVACY POLICY PAGE (p-privacy-)
   Hero is the shared guide-style split hero (see _guide.scss
   :is() list) → intro → numbered policy card → contact box.
   ============================================= */
/* ----- Hero eyebrow: English name as a gold accent at every width
   (overrides the shared mobile block, which tints it primary green) ----- */
.p-privacy .p-prop-list-hero--property .p-prop-list-hero__eyebrow {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* ----- Body wrapper ----- */
.p-privacy__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-inline-pc) clamp(48px, 7vw, 96px);
}
@media (max-width: 768px) {
  .p-privacy__inner {
    padding-inline: var(--space-inline-sp);
  }
}

.p-privacy__lead {
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
  margin: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px);
}
@media (max-width: 768px) {
  .p-privacy__lead {
    text-align: left;
  }
}

/* ----- Policy card (bordered container) ----- */
.p-privacy-card {
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 44px);
  background: var(--color-white);
}

.p-privacy-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-privacy-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: start;
  padding: clamp(22px, 3vw, 34px) 0;
}
.p-privacy-item + .p-privacy-item {
  border-top: 1px solid var(--color-bg-light);
}
@media (max-width: 768px) {
  .p-privacy-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.p-privacy-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-primary);
  flex-shrink: 0;
}
.p-privacy-item__icon svg {
  width: 42px;
  height: 42px;
}
@media (max-width: 768px) {
  .p-privacy-item__icon {
    width: 64px;
    height: 64px;
    justify-self: center;
  }
  .p-privacy-item__icon svg {
    width: 32px;
    height: 32px;
  }
}

.p-privacy-item__body {
  padding-top: 4px;
}

.p-privacy-item__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-privacy-item__num {
  font-family: var(--font-heading);
  font-size: 1.25em;
  color: var(--color-primary);
}

.p-privacy-item__desc {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

.p-privacy-item__points {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 28px;
}
.p-privacy-item__points li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}
.p-privacy-item__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
@media (max-width: 768px) {
  .p-privacy-item__points {
    grid-template-columns: 1fr;
  }
}

/* ----- Contact item (item 7) — flow-contact style cards (icon + label + arrow) ----- */
.p-privacy-contact__card {
  max-width: 480px;
  margin: 18px 0 0;
  padding: clamp(10px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: 12px;
  background: var(--color-bg-light);
  text-align: left;
}
@media (max-width: 768px) {
  .p-privacy-contact__card {
    text-align: center;
  }
}

.p-privacy-contact__company {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .p-privacy-contact__company {
    font-size: 16px;
  }
}

.p-privacy-contact__cards {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.p-privacy-contact__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--color-white);
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}
@media (hover: hover) {
  .p-privacy-contact__cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  }
}

.p-privacy-contact__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--color-white);
}
.p-privacy-contact__cta-icon svg {
  width: 24px;
  height: 24px;
}

.p-privacy-contact__cta--line .p-privacy-contact__cta-icon {
  background: var(--color-line, var(--color-green));
}

.p-privacy-contact__cta--form .p-privacy-contact__cta-icon {
  background: var(--color-accent);
}

.p-privacy-contact__cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.p-privacy-contact__cta-main {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.p-privacy-contact__cta-sub {
  font-size: 13px;
  color: var(--color-text-light);
}

.p-privacy-contact__cta-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-light);
}
.p-privacy-contact__cta-arrow svg {
  width: 18px;
  height: 18px;
}

.p-floating-cta {
  display: none;
}
@media (max-width: 768px) {
  .p-floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 12px 6px;
    transform: translateY(0);
    transition: transform 0.25s ease;
    /* hidden while the in-page search form is on screen (JS toggles .is-hidden).
       Slide fully off-screen rather than fading — an interrupted opacity
       transition could otherwise leave the button semi-transparent. */
  }
  .p-floating-cta.is-hidden {
    transform: translateY(150%);
    pointer-events: none;
  }
}

.p-floating-cta__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 14px;
  border-radius: 14px;
  /* match the mobile header height (the only place the CTA shows) */
}
@media (max-width: 768px) {
  .p-floating-cta__btn {
    height: var(--header-height);
  }
}
.p-floating-cta__btn {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  text-decoration: none;
  transition: filter 0.2s ease;
}
@media (hover: hover) {
  .p-floating-cta__btn:hover {
    filter: brightness(1.06);
  }
}
.p-floating-cta__btn:active {
  filter: brightness(0.94);
}
.p-floating-cta__btn--search {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  background: var(--color-primary);
  color: var(--color-white);
}
.p-floating-cta__btn--search .p-floating-cta__icon {
  background: transparent;
  border-radius: 0;
  justify-self: end;
  margin-right: 6px;
}
.p-floating-cta__btn--search .p-floating-cta__text {
  flex: none;
}
.p-floating-cta__btn--search .p-floating-cta__arrow {
  justify-self: end;
}

.p-floating-cta__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

.p-floating-cta__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.p-floating-cta__main {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.p-floating-cta__sub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.8;
  line-height: 1.3;
}

.p-floating-cta__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  opacity: 0.6;
}

/* =============================================
   BLOG TOKENS (p-blog)
   The blog templates (home / single / archive / search) wrap their <main> in
   .p-blog. The blog uses the main site's palette (--color-primary etc. from
   style.css); these are only the surface tokens the blog styles need that the
   main site does not define. Values from the standalone sriracha-blog-v1 theme.
   ============================================= */
.p-blog {
  --color-bg-hover: #eef0ee;
  --color-border: #e5e7eb;
  --color-bg-badge: #e8eaef;
  --hero-height: 520px;
  --radius-card: 8px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
  --color-overlay: rgba(0, 0, 0, 0.45);
}

/* =============================================
   HERO — heights inherited from nishimura-v3, raised a step
   520px desktop / 540px at ≤768px
   ============================================= */
.p-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.p-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--space-inline-pc);
  /* Lifts the block off the optical centre — the mock sits it slightly high. */
  padding-bottom: 140px;
}

/* Title and lede copy the Sriracha main site's hero text
   (.p-top-hero__heading / .p-top-hero__sub in the nishimura-sriracha theme):
   white over the photo with a soft dark shadow. */
.p-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.429px + 2.679vw, 42px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-white);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transform: scaleY(1.12);
  transform-origin: left top;
  display: inline-block;
  margin-bottom: 8px;
}

.p-hero__lede {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--color-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .p-hero {
    min-height: 540px;
    background-position: center top;
  }
  .p-hero__inner {
    padding-inline: var(--space-inline-sp);
    padding-bottom: 130px;
  }
}
/* =============================================
   HOME — split ratio inherited from /flow/
   (.p-promo__inner in nishimura-v3's _promotion.scss)
   ============================================= */
.p-home__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 70px;
  align-items: start;
  margin-inline: auto;
  padding: var(--space-section) var(--space-inline-pc);
}

.p-home__main {
  min-width: 0;
}

/* Hairline down the middle of the 70px gutter, as the mock draws it. Painted
   as a pseudo-element rather than a border so the grid stays exactly
   `minmax(0, 1fr) 340px` — a border plus padding would eat into the 340px
   column. It is removed when the split collapses to one column at `tab`. */
.p-home__aside {
  position: relative;
  min-width: 0;
  /* Stretch to the full row height so the rule does not stop at whichever
     column happens to be shorter. */
  align-self: stretch;
}
.p-home__aside::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 0;
  /* Carries on into the section's bottom padding, reaching down towards the
     CTA banner without touching it. */
  bottom: calc(var(--space-section) * -0.6);
  width: 1px;
  background: var(--color-border);
}

/* The accent rule is a short stub under the text, not a full-width border —
   the mock draws it ~56px wide regardless of how long the heading is. */
.p-home__section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}
.p-home__section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  background: var(--color-accent);
}

.p-home__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}

.p-home__more {
  display: flex;
  justify-content: center;
  margin-top: 88px;
}

/* ---- Collapse at 1024px, matching /flow/ ---- */
@media (max-width: 1024px) {
  .p-home__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .p-home__aside::before {
    display: none;
  }
  .p-home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .p-home__inner {
    gap: 88px;
    padding-inline: var(--space-inline-sp);
  }
  .p-home__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-home__more {
    margin-top: 55px;
  }
}
/* =============================================
   SIDEBAR (p-sidebar) — 340px column
   ============================================= */
.p-sidebar {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Short gold stub tight under the text — no full-width hairline beneath it, so
   the list starts clean (the first category has no rule above it either). */
.p-sidebar__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.p-sidebar__heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 10px;
  background: var(--color-accent);
}

/* ---- Categories ---- */
.p-sidebar__cat-item {
  border-bottom: 1px solid var(--color-border);
}

.p-sidebar__cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 4px;
  font-size: var(--fs-md);
  color: var(--color-primary);
  transition: color 0.2s ease;
}
.p-sidebar__cat-link:hover {
  color: var(--color-text-light);
}
.p-sidebar__cat-link svg {
  flex-shrink: 0;
  color: var(--color-text-light);
}

/* ---- Ranking ---- */
.p-sidebar__rank-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}

.p-sidebar__rank-link {
  display: grid;
  /* First track is wider than the 32px badge so the number sits further
     from the thumbnail than the 12px gap alone would put it. */
  grid-template-columns: 44px 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.p-sidebar__rank-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-bg-badge);
  border-radius: 4px;
  text-align: center;
}

.p-sidebar__rank-thumb {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1/1;
  background: var(--color-bg-light);
}
.p-sidebar__rank-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-sidebar__rank-title {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-primary);
  transition: color 0.2s ease;
  /* Long titles stop at 4 lines with an ellipsis. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.p-sidebar__rank-link:hover .p-sidebar__rank-title {
  color: var(--color-text-light);
}

@media (max-width: 1024px) {
  .p-sidebar {
    gap: 40px;
  }
  /* The main site's drawer has no search box, so the sidebar search stays
     visible here (the standalone blog hid it in favour of its drawer search). */
}
/* =============================================
   CTA BANNER (p-cta)
   ============================================= */
.p-cta {
  padding-inline: var(--space-inline-pc);
  padding-bottom: var(--space-section);
}

/* Extra air above the banner on the side-by-side layout only — stacked, the
   section padding above it is already enough. */
@media (min-width: 900.02px) {
  .p-cta {
    margin-top: 48px;
  }
}
.p-cta__inner {
  display: grid;
  grid-template-columns: 44fr 56fr;
  align-items: center;
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Fixed on PC — the copy sits inside it rather than setting it. The row is
     pinned to that height as well: left to `auto`, it would size itself to the
     photo's intrinsic 1920×845 ratio (~305px here) and spill past the box. */
  height: 240px;
  grid-template-rows: minmax(0, 1fr);
}

.p-cta__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Column flex would stretch the button across the panel otherwise. */
  align-items: flex-start;
  height: 100%;
  padding: 20px 48px;
}

.p-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 8.857px + 1.19vw, 26px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-primary);
  letter-spacing: 0.03em;
}

/* Its own padding, a step down from the default .c-blog-btn, so the copy column —
   which is what actually sets the banner's height — stays short. */
.p-cta__btn {
  margin-top: 18px;
  padding: 14px 36px;
}

.p-cta__media {
  position: relative;
  height: 100%;
  /* Feathers the photo into the copy panel so the split reads as one surface.
     The stops are --color-bg-light (#f7f8f6) written out, because fading to
     `transparent` would fade through black in some engines. */
}
.p-cta__media::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 26%;
  pointer-events: none;
  background: linear-gradient(to right, rgb(247, 248, 246) 0%, rgba(247, 248, 246, 0.85) 30%, rgba(247, 248, 246, 0) 100%);
}
.p-cta__media {
  /* The photo scales with the banner rather than setting its height: `cover`
     on a shorter box shows a wider band of the same image. */
}
.p-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media (min-width: 900.02px) and (max-width: 1100px) {
  .p-cta__inner {
    height: auto;
    min-height: 240px;
    grid-template-rows: auto;
  }
}
@media (max-width: 900px) {
  .p-cta__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .p-cta__body {
    padding: 32px 24px;
    order: 2;
    text-align: center;
    align-items: center;
  }
  .p-cta__media {
    order: 1;
    aspect-ratio: 16/9;
  }
  .p-cta__media::after {
    display: none;
  }
}
@media (max-width: 768px) {
  .p-cta {
    padding-inline: var(--space-inline-sp);
  }
  .p-cta__btn {
    margin-top: 24px;
  }
}
/* =============================================
   SINGLE POST (p-single)
   ============================================= */
.p-single__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 70px;
  align-items: start;
  padding: var(--space-section) var(--space-inline-pc);
}

.p-single__main {
  min-width: 0;
}

/* Same hairline the home split draws down the middle of its gutter — see
   `.p-home__aside`. Dropped with the split at `tab`. */
.p-single__aside {
  position: relative;
  min-width: 0;
  /* Stretch to the full row height so the rule does not stop at whichever
     column happens to be shorter. */
  align-self: stretch;
}
.p-single__aside::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 0;
  /* Carries on into the section's bottom padding, reaching down towards the
     CTA banner without touching it. */
  bottom: calc(var(--space-section) * -0.6);
  width: 1px;
  background: var(--color-border);
}

.p-single__header {
  margin-bottom: 28px;
}

.p-single__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.p-single__date {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.p-single__cat {
  padding: 4px 14px;
  font-size: 12px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}
.p-single__cat:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.p-single__title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 10.571px + 1.488vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.p-single__thumb {
  margin-bottom: 36px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.p-single__thumb img {
  width: 100%;
  height: auto;
}

/* =============================================
   POST BODY — defensive styling for legacy content.
   The 318 existing posts are twentyeleven-era HTML: bare <img> without
   dimensions, inline styles, old galleries and wide tables. Nothing here
   modifies content; it only keeps it inside the column.
   ============================================= */
.p-single__body {
  font-size: var(--fs-md);
  line-height: 2;
  color: var(--color-text);
}
.p-single__body img,
.p-single__body iframe,
.p-single__body video,
.p-single__body embed,
.p-single__body object {
  max-width: 100%;
  height: auto;
}
.p-single__body iframe {
  aspect-ratio: 16/9;
  width: 100%;
}
.p-single__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.p-single__body table th, .p-single__body table td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.p-single__body p {
  margin-bottom: 1.8em;
}
.p-single__body h2, .p-single__body h3, .p-single__body h4, .p-single__body h5 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.5;
  margin: 2em 0 0.8em;
}
.p-single__body h2 {
  font-size: var(--fs-2xl);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-accent);
}
.p-single__body h3 {
  font-size: var(--fs-xl);
}
.p-single__body h4 {
  font-size: var(--fs-lg);
}
.p-single__body ul, .p-single__body ol {
  margin: 0 0 1.8em 1.4em;
}
.p-single__body ul {
  list-style: disc;
}
.p-single__body ol {
  list-style: decimal;
}
.p-single__body li {
  margin-bottom: 0.5em;
}
.p-single__body a {
  color: var(--color-accent);
  text-decoration: underline;
  word-break: break-word;
}
.p-single__body blockquote {
  margin: 0 0 1.8em;
  padding: 18px 24px;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-accent);
}
.p-single__body .wp-caption {
  max-width: 100% !important;
}
.p-single__body .wp-caption-text {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  text-align: center;
}
.p-single__body .gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 1.8em;
}
.p-single__body .gallery-item {
  width: auto !important;
  margin: 0 !important;
}

/* ---- Prev / next ---- */
.p-single__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.p-single__nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
  transition: background 0.2s ease;
}
.p-single__nav-link:hover {
  background: var(--color-bg-hover);
}

.p-single__nav-link--next {
  text-align: right;
}

.p-single__nav-label {
  font-size: 12px;
  color: var(--color-text-light);
}

.p-single__nav-title {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-primary);
}

/* ---- Related ---- */
.p-single__related {
  margin-top: 64px;
}

.p-single__related-title {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 28px;
  /* Short accent stub, matching .p-home__section-title. */
}
.p-single__related-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  background: var(--color-accent);
}

.p-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

@media (max-width: 1024px) {
  .p-single__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .p-single__aside::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .p-single__inner {
    padding-inline: var(--space-inline-sp);
  }
  .p-single__body .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-single__nav {
    grid-template-columns: 1fr;
  }
  .p-single__nav-link--next {
    text-align: left;
  }
  .p-single__related-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* =============================================
   ARCHIVE / SEARCH RESULTS (p-archive)
   Same split, gutter and hairline as the home page — see `_home.scss`.
   ============================================= */
.p-archive__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 70px;
  align-items: start;
  margin-inline: auto;
  padding: var(--space-section) var(--space-inline-pc);
}

.p-archive__main {
  min-width: 0;
}

.p-archive__aside {
  position: relative;
  min-width: 0;
  align-self: stretch;
}
.p-archive__aside::before {
  content: "";
  position: absolute;
  left: -35px;
  top: 0;
  /* Runs on past the column into the section padding so it reaches down
     towards the CTA, stopping short of it rather than touching. */
  bottom: calc(var(--space-section) * -0.6);
  width: 1px;
  background: var(--color-border);
}

.p-archive__header {
  margin-bottom: 36px;
}

.p-archive__title {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  word-break: break-word;
}
.p-archive__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  background: var(--color-accent);
}

.p-archive__count {
  margin-top: 16px;
  font-size: var(--fs-md);
  color: var(--color-text-light);
}
.p-archive__count strong {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.p-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}

.p-archive__empty {
  padding: 40px 32px;
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
}

.p-archive__empty-text {
  font-size: var(--fs-md);
  line-height: 2;
  color: var(--color-text);
}

.p-archive__empty-form {
  margin-top: 24px;
  max-width: 420px;
}

.p-archive__pager {
  margin-top: 56px;
}

@media (max-width: 1024px) {
  .p-archive__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .p-archive__aside::before {
    display: none;
  }
  .p-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .p-archive__inner {
    padding-inline: var(--space-inline-sp);
  }
  .p-archive__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-archive__pager {
    margin-top: 36px;
  }
}
/* =============================================
   RESPONSIVE
   Global font scaling now lives in style.css :root:
   body (--fs-md) and subtext (--fs-sm) are FIXED at 16/14;
   the larger title tokens (--fs-lg/xl/2xl/3xl) are fluid clamp()s.
   Per-section responsive rules live in each partial via the
   breakpoint mixins in abstracts/_breakpoints.scss.

   (Intentionally left without the old 3-tier font step-downs —
   they are superseded by the fluid tokens.)
   ============================================= */