/* ===== product/pro.html — matches Figma node 589:7406 "SAUNAGE PRO｜製品" (PC) =====
   Built PC-first per instruction. Reuses shared components from main.css,
   including the whole product-spec-page component family promoted there
   when this page confirmed product/home.html's shapes repeat exactly:
   .site-subheader, .site-footer, .product-hero*, .product-tabs*,
   .product-notice*, .page-why* (feature rows), .product-specs__*,
   .product-table*, .product-grid-table*, .product-feature-card*,
   .product-works*, .work-card*, .tag-pill, .product-layout*,
   .product-option*, .product-choose*, .photo-strip*, .pill-btn, .link-arrow,
   .crop-window. */

/* ---- Notice banner (SAUNAGE PRO向けのご案内) ----
   Overrides main.css's shared .product-notice__inner (gold on both product
   pages by default) to the dark-blue brand color — PRO-only, product/home.html
   keeps the shared gold. */
.product-notice__inner {
  background: var(--color-dkblue);
}

/* ---- Feature rows (こだわり) ----
   Reuses .page-why* from main.css; same 144px/420px desktop proportions as
   product/home.html's own override. */

@media (min-width: 992px) {
  .product-features .container {
    padding-inline: 144px;
  }

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

/* Row 03 "Practical Services" photo carries a small "フリー素材" (stock
   photo) credit badge in Figma — a one-off addition to .page-why__media,
   not worth a shared component for a single occurrence. */
.product-features__credit {
  position: absolute;
  left: 15px;
  bottom: 15px;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  font-size: 13px;
}

@media (min-width: 992px) {
  .product-features__credit {
    font-size: 15px;
  }
}

/* ---- Layout: PRO's 6-type/3-column grid ----
   .product-layout__types--3col's grid shape lives in main.css; the dark
   navy icon-box color is PRO-only (product/home.html's icons are gold), and
   PRO's 6 icons have varied native proportions, so they're kept at their
   natural aspect ratio instead of the shared component's fixed 60x65 box. */

.product-layout__types--3col .product-layout-type__icon {
  background: var(--color-dkblue);
}

.product-layout__types--3col .product-layout-type__icon img {
  width: auto;
  height: auto;
  max-width: 54%;
  max-height: 60%;
}

.product-layout-type__icon--mirrored img {
  transform: scaleX(-1);
}

@media (min-width: 992px) {
  .product-layout__types--3col .product-layout-type__icon img {
    max-width: 58%;
    max-height: 62%;
  }
}

/* ---- Option card 05 "温度計" ----
   Figma composites two transparent product cutouts (hourglass timer +
   round dial) on a flat gray card instead of a single photo. */

.product-option-card__media--thermo {
  background: #D8D9DB;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.product-option-card__media--thermo img {
  position: absolute;
  object-fit: contain;
}

.product-option-card__media--thermo .product-option-card__thermo-tube {
  left: 11.4%;
  top: 1.6%;
  width: 24.1%;
  height: 96.4%;
}

.product-option-card__media--thermo .product-option-card__thermo-dial {
  left: 43.7%;
  top: 8.6%;
  width: 48.7%;
  height: 82.1%;
}

/* ---- Effect (導入効果と投資判断) ----
   New section unique to PRO: a sidebar intro beside a 3-column bordered
   icon/title/subtitle row, plus a "導入効果を見る" link to corporate/guide.html. */

.product-effect {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

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

.product-effect__cards {
  display: grid;
  grid-template-columns: 1fr;
}

.product-effect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding-block: 24px;
  border-top: 1px solid var(--color-gray-300);
}

.product-effect-card:first-child {
  border-top: none;
}

.product-effect-card__icon {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-effect-card__icon img {
  height: 100%;
  width: auto;
}

.product-effect-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
}

.product-effect-card__subtitle {
  font-size: 13px;
}

.product-effect__more {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .section-effect{
    padding-block: 40px 80px;
  }

  .product-effect {
    flex-direction: row;
    gap: 104px;
  }

  .product-effect__intro {
    flex: 0 0 180px;
  }

  .product-effect__desc {
    font-size: 15px;
    width: 194px;
  }

  .product-effect__cards-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-end;
  }

  .product-effect__cards {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  .product-effect-card {
    padding-block: 0;
    padding-inline: 24px;
    border-top: none;
    border-left: 1px solid var(--color-gray-300);
  }

  .product-effect-card:first-child {
    border-left: none;
  }

  .product-effect-card__icon {
    height: 52px;
  }

  .product-effect-card__title {
    font-size: 20px;
  }

  .product-effect-card__subtitle {
    font-size: 14px;
  }
}