/* PEACH CONNECT v0.5.14 — audited FV/mobile presentation.
   Fix: v0.5.13 adjusted hero height, but several competing template rules
   still applied top alignment. Center the CONTENT group itself, not only the
   outside section. Keep natural growth for user-edited longer text.
   This stylesheet is enqueued after all v0.5.13 styles. */
@media (max-width: 760px) {
  /* 1. TOP /: center the entire kicker-title-copy-actions-checklist group.
     The main page previously inherited align-items:start from site.css. */
  body.home #hero.hero {
    display:flex!important;
    align-items:stretch!important;
    height:auto!important;
    min-height:max(620px,calc(100svh - var(--header-height,62px)))!important;
    overflow:hidden;
  }
  body.home #hero .hero-inner {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:calc(100% - 38px)!important;
    max-width:none!important;
    min-height:max(620px,calc(100svh - var(--header-height,62px)))!important;
    height:auto!important;
    padding:clamp(37px,6svh,65px) 0!important;
    margin-inline:auto!important;
  }
  body.home #hero :is(.hero-kicker,h1,.hero-subhead,.hero-body,.button-row,.hero-points) {
    flex-shrink:0;
  }
  /* 2. /service/: flex-direction is column; justify-content (not align-items)
     controls the vertical position. Override all old mobile breakpoints. */
  .pc-service #service-hero.sv-top-hero,
  .pc-service .sv-top-hero {
    display:flex!important;
    align-items:stretch!important;
    height:auto!important;
    min-height:max(650px,calc(100svh - var(--header-height,62px)))!important;
    overflow:hidden!important;
  }
  .pc-service #service-hero .hero-inner,
  .pc-service .sv-top-hero .hero-inner {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    align-content:normal!important;
    min-height:max(650px,calc(100svh - var(--header-height,62px)))!important;
    height:auto!important;
    width:calc(100% - 40px)!important;
    max-width:none!important;
    padding:clamp(38px,5.5svh,62px) 0!important;
    margin-inline:auto!important;
  }
  .pc-service #service-hero .sv-top-hero-copy,
  .pc-service .sv-top-hero .sv-top-hero-copy {
    flex:0 0 auto!important;
    align-self:flex-start!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    transform:none!important;
  }
  /* 3. Shared /service/* and general subpage FV: copy sits halfway down
     the useful hero area. The old .peach-fv-inner retained justify:flex-start. */
  .hero.peach-shared-fv,
  .pcnx-root .hero.peach-shared-fv {
    display:flex!important;
    align-items:stretch!important;
    height:auto!important;
    min-height:max(620px,calc(100svh - var(--header-height,62px)))!important;
    overflow:hidden!important;
  }
  .hero.peach-shared-fv .peach-fv-inner,
  .pcnx-root .hero.peach-shared-fv .peach-fv-inner {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    align-content:normal!important;
    flex-wrap:nowrap!important;
    min-height:max(620px,calc(100svh - var(--header-height,62px)))!important;
    height:auto!important;
    width:calc(100% - 40px)!important;
    max-width:none!important;
    padding:clamp(38px,5.5svh,62px) 0!important;
    margin-inline:auto!important;
  }
  .hero.peach-shared-fv .peach-fv-copy,
  .pcnx-root .hero.peach-shared-fv .peach-fv-copy {
    flex:0 0 auto!important;
    align-self:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
  }
  /* 4. FVs with longer editable copy must expand rather than crop content.
     Never set a fixed height or translateY to simulate a centered design. */
  body.home #hero :is(h1,p),
  .pc-service #service-hero :is(h1,p),
  .hero.peach-shared-fv :is(h1,p) {
    min-width:0;
    max-width:100%;
    line-break:strict;
    overflow-wrap:break-word;
    hyphens:none;
  }
  .pc-service #service-hero .sv-top-hero-points,
  body.home #hero .hero-points {
    width:100%;
    gap:9px 14px;
  }
  /* Consistent CTA color, including hover/focus/visited and inner spans. */
  .pc-service #service-hero a.sv-top-hero-cta--line,
  .hero.peach-shared-fv a.peach-fv-button--line:not(.peach-fv-button--pending),
  .pcnx-root .hero.peach-shared-fv a.peach-fv-button--line:not(.peach-fv-button--pending) {
    background:#06C755!important;
    border-color:#06C755!important;
    color:#fff!important;
  }
  .pc-service #service-hero a.sv-top-hero-cta--line :is(span,svg),
  .hero.peach-shared-fv a.peach-fv-button--line :is(span,svg) {
    color:#fff!important;
    stroke:currentColor;
  }
  /* Disabled LINE buttons still use the fixed LINE color for consistency.
     aria-disabled and the visible 準備中 label remain unchanged until a LINE URL is set. */
  .pc-service #service-hero .sv-top-hero-cta--pending,
  .hero.peach-shared-fv .peach-fv-button--pending,
  .pcnx-root .hero.peach-shared-fv .peach-fv-button--pending {
    background:#06C755!important;
    background-image:none!important;
    border-color:#06C755!important;
    color:#fff!important;
    opacity:1!important;
    cursor:not-allowed!important;
  }
  .hero.peach-shared-fv .peach-fv-button--pending :is(span,svg) {color:#fff!important;}
  /* Keep brand name together; only phrase-based wrapping is allowed. */
  .peach-brand-keep { white-space:nowrap!important;overflow-wrap:normal!important;word-break:keep-all!important; }
}
/* Avoid huge unused whitespace above short FVs when the mobile device is rotated. */
@media (max-width:760px) and (orientation:landscape) and (max-height:500px) {
  body.home #hero.hero,
  .pc-service #service-hero.sv-top-hero,
  .hero.peach-shared-fv,.pcnx-root .hero.peach-shared-fv { min-height:0!important; }
  body.home #hero .hero-inner,
  .pc-service #service-hero .hero-inner,
  .hero.peach-shared-fv .peach-fv-inner,
  .pcnx-root .hero.peach-shared-fv .peach-fv-inner { min-height:0!important;padding-block:35px!important; }
}