@import url("/assets/shared/base-33.css");
@import url("/assets/shared/surface-leaf-gradient.css");
@import url("/assets/css/b001-cost.css");
@import url("/assets/shared/feature-surface.css");
@import url("/assets/shared/explanation-block.css");
@import url("/assets/shared/surface-gray.css");

.product-hero__notice { display: grid; gap: 0; }
.product-hero__notice > p { margin: 0; }
.product-hero__notice > p.annotation-note { padding-inline-start: 0; }
.product-hero__notice > p.annotation-note::before { content: none; }
.g002-page .product-hero__notice > p,
.g002-page .product-hero__quote .product-quote__note { font-size: var(--font-size-small); }
.product-hero__notice .product-status { border: 0; border-radius: 0; padding: 0; background: transparent; }

.g002-page { background: var(--color-surface-base); }

.g002-page #product { padding-block-end: 0; }
.g002-page #product .product-image { border: 0; border-radius: 0; }
.g002-page #product .product-image > img { border-radius: 0; }
.g002-page #product .product-image figcaption { border-block-start: 0; padding-inline: 0; text-align: left; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.6; }
.g002-page .product-installation__cards { display: grid; gap: var(--space-xl); padding: 32px; }
@media (max-width: 767px) { .g002-page .product-installation__cards { padding: 20px; gap: 20px; } }
.g002-page #replace .info-card-state__action { display: flex; justify-content: center; }
.g002-page #replace .card-note { border-top: 0; padding-block-start: 0; font-size: var(--font-size-small); line-height: 1.6; }
.g002-page .product-section__stack > .section-heading { margin-block-end: 0; }
.g002-page #comparison { width: 100vw; margin-inline: calc(50% - 50vw); }
.g002-page .page-with-navigation__body > #comparison > .container { width: min(var(--container-default-max), calc(100% - var(--page-gutter) * 2)); }
.g002-page #features.surface--gradient, .g002-page #overview.surface--gradient { border-image: linear-gradient(to bottom, var(--color-surface-base), var(--color-surface-soft)) fill 0 / 0 / 0 100vmax; }
.g002-page #warranty, .g002-page #faq { box-shadow: 0 0 0 100vmax var(--color-surface-light-gray); clip-path: inset(0 -100vmax); background: var(--color-surface-light-gray); }
.g002-page #install h3 .heading-icon { font-size: 1.25em; width: 1em; height: 1em; color: var(--color-brand-green-darker); }
.g002-page #comparison caption.content-heading { display: table-caption; width: auto; text-align: start; margin-bottom: 24px; font-size: 22px; line-height: 1.6; }
.g002-page #install caption.content-heading { display: table-caption; width: auto; white-space: nowrap; }
@media (max-width: 767px) { .g002-page #install caption.content-heading { font-size: 14px !important; } }
.product-hero__title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-bottom: 1px solid var(--color-border-default); padding-bottom: 16px; }
.product-hero__title-row > .page-heading { margin: 0; padding-bottom: 0; border-bottom: 0; }
.product-hero__title-row > p { margin: 0; margin-left: auto; font-size: 14px; }
.g002-page .repair-consultation { width: 100vw; margin-inline: calc(50% - 50vw); }
.g002-skip { position: fixed; z-index: 100; inset: .5rem auto auto .5rem; padding: .65rem 1rem; background: var(--color-text-primary); color: #fff; text-decoration: none; transform: translateY(-160%); }
.g002-skip:focus { transform: translateY(0); }
.g002-page .page-with-navigation__body > .section > .container { width: 100%; padding-inline: 0; }
.g002-page .product-hero__image { width: min(100%, 34rem); justify-self: center; }
.g002-page .product-hero__image .product-image > img { box-sizing: border-box; padding: 0; }
.g002-section-lead { max-width: 55rem; margin-block-end: 2rem; font-size: 1.05rem; line-height: 1.9; }
.g002-warranty { background: var(--color-surface-soft); }
.g002-warranty .g002-section-lead { max-width: 65rem; }
.g002-faq { background: var(--color-surface-light-gray); }
.g002-faq-list { display: grid; gap: .75rem; }

/* 価格欄だけを枠で囲み、説明文と相談ボタンは枠の下へ配置する。 */

/* FV見出しはP001-02と同じ短い下線の形にする。 */
.g002-page #product .product-hero__title-row {
  border-bottom: 0;
  padding-bottom: 0;
  margin-block-end: var(--space-md);
}
.g002-page #product #product-title {
  display: block;
}

.g002-page .product-hero__spec-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.g002-page .product-hero__manufacturer { margin-inline-start: auto; font-size: 14px; font-weight: 400; }

/* Match the comparison table card layout through tablet widths. */
@media (max-width: 959px) {
  .g002-page #comparison caption.content-heading { display: block; width: 100%; }
}

/* Product-only mobile layout. Shared desktop presentation is retained. */
@media (max-width: 767px) {



  .g002-page #comparison caption.content-heading { display: block; width: 100%; font-size: 20px; }
  .g002-page #comparison .ui-table--listing tbody td { grid-template-columns: max-content minmax(0,1fr); }
  .g002-page .product-installation__cards { padding: 12px; gap: 16px; }
  .g002-page #install .product-section__grid { gap: 16px; }
  .g002-page #install .surface-card { padding: 16px; }
  .g002-page .g002-contact-title-end { display: block; }
}



@media (max-width: 767px) {
  .g002-page #product { padding-block-start: var(--space-lg); }
  .g002-page .product-hero__manufacturer { margin-inline-start: 0; width: 100%; text-align: left; }
  .g002-page #product .product-image figcaption { text-align: left; padding-inline: 0; margin-inline: 0; }
}

/* Keep the guarantee heading inside narrow phone cards. */

/* Keep footer links above the full shared fixed CTA at every viewport width. */
body.g002-page:has(#legacy-fixed-cta) { padding-bottom: var(--fixed-cta-height, 18rem); }

/* Manufacturer label above the model, aligned to its left edge. */
.g002-page .product-hero__title-row--stacked { flex-direction: column; align-items: flex-start; gap: 8px; }
.g002-page .product-hero__title-row--stacked > .product-hero__manufacturer { margin-inline-start: 0; }

/* Keep the two hero consultation actions on one row. */
.g002-page .product-hero__quote .product-quote__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g002-page .product-hero__quote .product-quote__actions > .button { min-width: 0; }

/* G002: omit supplementary repair copy on narrow layouts. */
@media (max-width: 959px) {
  .g002-page #error .section-heading__support { display: none; }
  .g002-page #comparison .ui-table--listing tbody tr { background: var(--color-surface-base); }
  .g002-page #comparison .ui-table--listing tbody td { grid-template-columns: max-content minmax(0,1fr); }
  .g002-page #comparison .ui-table--listing tbody td::before { white-space: nowrap; }
}

/* G002: simplify installation headings and comparison cards on phones. */
@media (max-width: 767px) {
  .g002-page #install .section-heading__support { display: none; }
}

/* G002's cases action uses the existing circular arrow pointing down. */
.g002-page #product-cases .section-action .button__icon { transform: rotate(90deg); }

/* Space the inline menu between the product and repair sections. */
.g002-page #product { padding-block-start: var(--space-lg); }
@media (min-width: 1200px) {
  .g002-page .page-with-navigation__body > #product { width: 100%; }
  .g002-page #product .product-hero__grid { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--space-xl); }
  .g002-page #product .product-hero__copy { grid-column: 1 / -1; }
  .g002-page .page-with-navigation__body > #product .product-hero__quote { grid-column: 1; grid-row: 2; }
  .g002-page #product .page-with-navigation__rail { position: static; width: auto; grid-column: 2; grid-row: 2; align-self: start; }
}
@media (max-width: 1199px) {
  .g002-page .page-with-navigation__body > .page-with-navigation__rail { margin-block: var(--space-2xl) 0; }
}

/* Open follow-menu links point to their destination, using the existing right arrow. */
.g002-page .product-follow-navigation.is-compact .page-navigation__arrow { transform: none; }

/* Keep phone breadcrumbs on one horizontally scrollable line. */
@media (max-width: 767px) {
  .g002-page .company-breadcrumb ol { flex-wrap: nowrap; overflow-x: auto; }
  .g002-page .company-breadcrumb li { flex: 0 0 auto; white-space: nowrap; }
}