/* ===== product/home.html — matches Figma node 589:7066 "仕様・オプション" (PC) =====
   Built PC-first per instruction. Reuses shared components from main.css
   (page-why alternating rows, info-card, work-card, photo-strip, pill-btn,
   tag-pill, link-arrow, crop-window, site-subheader, site-footer). */

/* ---- Header variant: promoted to main.css as `.audience-header` once
   about.html needed the identical dual-audience-entry shape (originally
   built here as `.product-header` for product pages; renamed on promotion
   since it's no longer product-specific). See main.css's own
   "Dual-audience subheader" block. */

/* ---- Hero, In-page tab nav, HOME/PRO notice banner ----
   .product-hero*, .product-tabs*, .product-notice* promoted to main.css
   once product/pro.html needed the identical components. */

/* ---- Feature rows (こだわり) ----
   Reuses .page-why* from main.css; only the desktop content width differs
   from individual.html's 374px. */

@media (min-width: 992px) {
  .product-features{
    padding-block: 0 88px;
  }

  .product-features .container {
    padding-inline: 144px;
  }

  .product-features .page-why__content {
    width: 420px;
  }
}

/* ---- Specifications ----
   .product-specs__intro/__block/__note, .product-table*, .product-grid-table*,
   .product-feature-card* promoted to main.css once product/pro.html became a
   second consumer of the identical component family — see main.css's own
   "---- Product spec tables ----" block. */

/* サイズ block (Figma 2121:15775): larger title, 10% gold head row, and a
   body-size note under the table — this page only, so it stays here. */
.product-specs__block--size .product-specs__block-title {
  font-weight: 600;
  line-height: 1;
}

.product-specs__block--size .product-table__row--head .product-table__cell {
  background: rgba(151, 134, 92, 0.1);
}

.product-specs__size-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .product-specs__block--size .product-specs__block-title {
    font-size: 22px;
  }

  .product-specs__block--size .product-table__row--head .product-table__cell,
  .product-specs__size-note {
    font-size: 15px;
  }
}

@media (min-width: 992px) {
  .product-specs__block--size .product-table,
  .product-specs__size-note {
    margin-top: 24px;
  }
}

/* ---- Layout, Option, Works, How to Choose ----
   .product-layout*, .product-option*, .product-choose* promoted to main.css
   once product/pro.html needed the identical components (PRO's own layout
   grid uses the new .product-layout__types--3col modifier added there for
   its 6-type/3-column arrangement vs. this page's 4-across one). */

/* ---- Guide ----
   Reuses .info-card from main.css with this page's own 65px gutter
   (vs individual.html's 40px) and 4-column grid wrapper. */

.product-guide__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-guide__desc {
  font-size: 14px;
  line-height: 1.9;
}

.product-guide__cards {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.product-guide__note {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-guide__note .link-arrow {
  align-self: flex-end;
}

.product-guide__note-text {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-gray-400);
}

@media (min-width: 992px) {
  .product-guide__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .product-guide__desc {
    font-size: 15px;
  }

  .product-guide__cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  .product-guide__cards .info-card {
    padding-inline: 65px;
  }

  .product-guide__note {
    margin-top: 48px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .product-guide__note .link-arrow {
    align-self: auto;
  }
}