@import url("/assets/group-lp/css/group-lp.css?v=20261030-card-shadow");
/* /group/ is the live bub-resort.com/group/ landing page (assets/group-lp/). It brings its own
 * header and floating contact, so the renewal header steps aside on this page; the renewal
 * footer and the phone tab bar stay (owner, 2026-09-30), with the floating contact above the bar. */
.bub-site-page:has(main.glp-live) > :is(#header, #mnav, .mobile-nav) { display:none !important; }
.bub-site-page:has(main.glp-live) { padding-top:0 !important; padding-bottom:0 !important; }
@media (max-width:1023px) {
  /* The tab bar (bub-ui.css .mobile-action-bar, 64px) shows below 1024px: the page keeps room for it,
   * and the contact button floats 12px above it; its open form still fits under the top edge. */
  .bub-site-page:has(main.glp-live) { padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important; }
  :root .bub-site-page main.glp-live .group-contact-drawer { bottom:calc(76px + env(safe-area-inset-bottom)); }
  :root .bub-site-page main.glp-live .group-contact-drawer__panel { max-height:calc(100dvh - 188px - env(safe-area-inset-bottom)); }
}
@media (max-width:767px) {
  :root .bub-site-page main.glp-live .group-contact-drawer__panel { max-height:calc(100dvh - 160px - env(safe-area-inset-bottom)); }
}
.bub-site-page main.glp-live { display:block; width:auto; max-width:none; margin:0; padding:0; }
/* The LP header carries the renewal's current wordmark, at the renewal header's logo size. */
.bub-site-page main.glp-live .group-header__logo { display:flex; align-items:center; width:auto; line-height:1; }
.bub-site-page main.glp-live .group-header__logo a { display:flex; align-items:center; height:100%; }
.bub-site-page main.glp-live .group-header__logo img { display:block; width:128.25px; height:28px; object-fit:contain; }
@media (max-width:767px) {
  .bub-site-page main.glp-live .group-header__logo img { width:110px; height:24px; }
}

/* The contact drawer's own form (group/index.html, sent by main.js to /api/contact/). Fields keep the
 * live LP's WordPress form classes and look; 姓 and 名 sit side by side as on the live drawer. */
:root .bub-site-page main.glp-live .group-contact-drawer__native-form { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:12px; row-gap:14px; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form[hidden] { display:none; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form > * { grid-column:1 / -1; margin:0; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form > .group-contact-drawer__half { grid-column:auto; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-content__title { display:block; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form :is(.form-content__input, .form-content__select, .form-content__textarea) { width:100%; }
/* The LP's drawn checkbox, over a real (visually hidden, still focusable) input so the required
 * consent can take focus and report its error. */
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-check label { position:relative; display:block; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-check input { display:block; position:absolute; z-index:1; top:4px; left:0; width:16px; height:16px; margin:0; opacity:0; cursor:pointer; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-check input:focus-visible + .mwform-checkbox-field-text::before { outline:2px solid #288088; outline-offset:2px; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-submit button { width:100%; border:0; cursor:pointer; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-submit button:disabled { opacity:.45; cursor:default; }
:root .bub-site-page main.glp-live :is(.group-contact-drawer__availability, .group-contact-drawer__reply, .group-contact-drawer__submit-status, .group-contact-drawer__consent-error) { margin:0 0 12px; font-size:0.82rem; line-height:1.7; color:#174f51; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form :is(.group-contact-drawer__submit-status, .group-contact-drawer__consent-error) { margin:0; }
:root .bub-site-page main.glp-live :is(.group-contact-drawer__submit-status.is-error, .group-contact-drawer__consent-error) { color:#C1272D; }
:root .bub-site-page main.glp-live .group-contact-drawer__reply { margin:12px 0 0; }
:root .bub-site-page main.glp-live .group-contact-drawer__phone { margin:16px 0 0; padding-top:12px; border-top:0; font-size:0.82rem; line-height:1.7; color:#174f51; }
:root .bub-site-page main.glp-live .group-contact-drawer__phone a { color:#288088; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* One height and baseline for text fields and the select (the LP's 60px line-height clipped the select). */
:root .bub-site-page main.glp-live .group-contact-drawer__native-form :is(.form-content__input, .form-content__select) { display:block; box-sizing:border-box; height:48px; padding:0 12px; line-height:normal; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-content__textarea { display:block; box-sizing:border-box; height:96px; margin:0; padding:10px 12px; line-height:1.6; }
@media (max-width:767px) {
  :root .bub-site-page main.glp-live .group-contact-drawer__native-form { row-gap:12px; }
  :root .bub-site-page main.glp-live .group-contact-drawer__native-form :is(.form-content__input, .form-content__select) { height:44px; }
  :root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-content__textarea { height:80px; }
}
:root .bub-site-page main.glp-live .group-contact-drawer__hours { white-space:nowrap; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form > [hidden] { display:none; }

/* Both 「資料付き お問い合わせ」 buttons move alike (owner, 2026-09-30): the floating one's gradient
 * slide, lift and orange shadow, which the header one now shares instead of fading to 70%. The
 * floating one also keeps its orange on hover over chosei-detail-tone.css's grey summary:hover. */
:root .bub-site-page main.glp-live .group-header__button-list-link--contact { background:linear-gradient(135deg, #f29500, #f27800) 0 0 / 160% 100%; transition:background-position .35s ease, box-shadow .3s ease, transform .3s ease; }
:root .bub-site-page main.glp-live .group-contact-drawer > summary:hover { background:linear-gradient(135deg, #f29500, #f27800) 0 0 / 160% 100%; }
@media (hover:hover) and (pointer:fine) {
  :root .bub-site-page main.glp-live :is(.group-header__button-list-link--contact, .group-contact-drawer > summary):hover { opacity:1; background-position:100% 0; box-shadow:0 13px 28px rgba(242, 120, 0, .34); transform:translateY(-3px); }
}
/* Inline links in the drawer keep their look but get a 44px tap area. */
:root .bub-site-page main.glp-live .group-contact-drawer :is(.group-contact-drawer__phone a, .form-check a) { display:inline-block; padding-block:12px; margin-block:-12px; }
:root .bub-site-page main.glp-live .group-contact-drawer__privacy > summary { display:flex; align-items:center; min-height:44px; }
:root .bub-site-page main.glp-live .group-contact-drawer__privacy a { display:inline-block; padding-block:12px; margin-block:-12px; }
/* Wide screens zoom the page (bub-ui.css: html zoom 1.12–1.6), but dvh still counts unzoomed pixels, so the
   open contact panel grew past the top of the window and hid its close button (Codex, 1710×895, 2026-10-27). */
@media (min-width:1600px) { :root { --glp-page-zoom:1.12; } }
@media (min-width:1800px) { :root { --glp-page-zoom:1.24; } }
@media (min-width:2100px) { :root { --glp-page-zoom:1.4; } }
@media (min-width:2500px) { :root { --glp-page-zoom:1.6; } }
@media (min-width:1600px) {
  :root .bub-site-page main.glp-live .group-contact-drawer[open] .group-contact-drawer__panel { max-height:calc(100dvh / var(--glp-page-zoom) - 48px); }
}

/* Match the compact local enquiry form; keep scrolling available for small viewports and errors. */
:root .bub-site-page main.glp-live .group-contact-drawer[open] .group-contact-drawer__panel {
  max-height: calc(100dvh / var(--glp-page-zoom, 1) - 32px);
  padding: 16px 22px;
}
:root .bub-site-page main.glp-live .group-contact-drawer__header {
  margin: -16px -22px 8px;
  padding: 12px 22px 8px;
  top: -16px;
}
:root .bub-site-page main.glp-live .group-contact-drawer__native-form { row-gap: 8px; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form > .form-content { margin: 0; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-content__title {
  font-size: 12px; line-height: 1.4; margin-bottom: 3px;
}
:root .bub-site-page main.glp-live .group-contact-drawer__native-form :is(.form-content__input, .form-content__select) { height: 44px; }
:root .bub-site-page main.glp-live .group-contact-drawer__native-form .form-content__textarea { height: 68px; }
:root .bub-site-page main.glp-live .group-contact-drawer__phone { margin-top: 8px; padding-top: 8px; }
:root .bub-site-page main.glp-live .group-contact-drawer__privacy { margin-top: 8px; }
@media (max-width:767px) {
  :root .bub-site-page main.glp-live .group-contact-drawer[open] .group-contact-drawer__panel {
    inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; margin: 0;
    border-radius: 0; padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  }
  :root .bub-site-page main.glp-live .group-contact-drawer__header { margin: -12px -16px 8px; padding: 12px 16px 8px; top: -12px; }
  :root .bub-site-page main.glp-live .group-contact-drawer__native-form :is(input, select, textarea) { font-size: 16px; }
}