@charset "UTF-8";

/*
 * Pro Water genre FV v5.3
 * Visual authority: owner-supplied Adobe Illustrator source (2026-08-26).
 * The artwork is split into independently replaceable layers; no original
 * design elements, effects or layout are introduced here. On mobile, the
 * complete 390 x 523 source canvas is scaled as one composited unit so the
 * source layers are never stretched or repositioned independently.
 */

.top_image[data-fv-status="AI_SOURCE_FV_V53_FULL_SOURCE_PARTS_FLOW_RANGE_LOCAL"] {
  background: #fff !important;
}

.top_image[data-fv-status="AI_SOURCE_FV_V53_FULL_SOURCE_PARTS_FLOW_RANGE_LOCAL"] > h4 {
  margin: 0;
}

.genre-fv50 {
  position: relative;
  width: 950px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 950 / 367;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.genre-fv50__layer {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
  border: 0;
}

.genre-fv50__headline { left: 0; top: 0; width: 54.736843%; z-index: 3; }
.genre-fv50__person { left: 54.736842%; top: 0; width: 45.263158%; z-index: 2; }
.genre-fv50__van { left: 0; top: 29.972752%; width: 33.789474%; z-index: 4; }
.genre-fv50__issues { left: 33.684211%; top: 29.972752%; width: 21.157895%; z-index: 4; }
.genre-fv50__speed { left: 0; top: 50.408719%; width: 54.842106%; z-index: 5; }
.genre-fv50__trust-fast { left: 0; top: 69.482289%; width: 18.526316%; z-index: 6; }
.genre-fv50__trust-low { left: 18.421053%; top: 69.482289%; width: 18.526316%; z-index: 6; }
.genre-fv50__trust-licensed { left: 36.842105%; top: 69.482289%; width: 18%; z-index: 6; }

.genre-fv50__area {
  position: absolute;
  left: 17.894737%;
  top: 31.880109%;
  z-index: 10;
  display: flex;
  align-items: stretch;
  width: 29.263158%;
  min-height: 7.356949%;
  overflow: hidden;
  font-family: "Noto Sans JP Local", "Noto Sans JP", sans-serif;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .08));
}

.genre-fv50__area-label,
.genre-fv50__area-name {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
}

.genre-fv50__area-label {
  flex: 0 0 43%;
  padding: 0 1.2%;
  color: #f7751e;
  background: #fff;
  font-size: clamp(10px, 1.25vw, 18px);
  letter-spacing: -.045em;
}

.genre-fv50__area-name {
  flex: 1 1 auto;
  padding: 0 2%;
  color: #fff;
  background: #f7751e;
  font-size: clamp(11px, 1.45vw, 21px);
  letter-spacing: -.05em;
}

.genre-fv50--sp {
  display: none;
}

.genre-fv50-sp-shell {
  display: none;
}

@media (max-width: 767px) {
  .genre-fv50--pc {
    display: none;
  }

  .genre-fv50-sp-shell {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 390 / 523;
    margin: 0;
    overflow: hidden;
    background: #fff;
    contain: layout paint;
  }

  .genre-fv50--sp {
    display: block;
    width: 390px;
    max-width: none;
    height: 523px;
    aspect-ratio: auto;
    margin: 0;
    transform: scale(var(--genre-fv50-sp-scale, 1));
    transform-origin: 0 0;
  }

  /* REARCS_PROPRO_VISUAL_BOUNDARY_FLOW_ARROW_V1: full 390x523 Illustrator substrate plus source-identical component layers. */
  .genre-fv50--sp .genre-fv50__base { left: 0; top: 0; width: 100%; z-index: 1; }
  .genre-fv50--sp .genre-fv50__headline {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 94%, transparent 100%);
  }
  .genre-fv50--sp .genre-fv50__speed { left: 0; top: 61.185468%; width: 100%; z-index: 5; }
  .genre-fv50--sp .genre-fv50__issues { left: 0; top: 74.569790%; width: 38.461538%; z-index: 6; }
  .genre-fv50--sp .genre-fv50__price { left: 38.461538%; top: 74.569790%; width: 61.538462%; z-index: 6; }
  .genre-fv50--sp .genre-fv50__trust { left: 0; top: 86.998088%; width: 100%; z-index: 7; }

  /* The original-source base remains visible at every component boundary during scaled rendering. */
  .genre-fv50--sp .genre-fv50__speed,
  .genre-fv50--sp .genre-fv50__issues,
  .genre-fv50--sp .genre-fv50__price {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  }
  .genre-fv50--sp .genre-fv50__trust {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8px);
  }

  .genre-fv50--sp .genre-fv50__area {
    left: 6.410256%;
    top: 22.179732%;
    width: 38.461538%;
    min-height: 13.384321%;
    flex-direction: column;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .1));
  }

  .genre-fv50--sp .genre-fv50__area-label,
  .genre-fv50--sp .genre-fv50__area-name {
    flex: 1 1 50%;
    width: 100%;
    padding: 0 2%;
  }

  .genre-fv50--sp .genre-fv50__area-label {
    color: #f7751e;
    background: #fff;
    font-size: clamp(11px, 3.7vw, 15px);
    letter-spacing: -.04em;
  }

  .genre-fv50--sp .genre-fv50__area-name {
    color: #fff;
    background: #f7751e;
    font-size: clamp(12px, 4.1vw, 17px);
    letter-spacing: -.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .genre-fv50,
  .genre-fv50 * {
    animation: none !important;
    transition: none !important;
  }
}