@charset "UTF-8";

@font-face {
  font-family: "Noto Sans JP Local";
  src: url("../fonts/noto-sans-jp-vf-subset-perf-v1.woff2?v=20260828-perf1") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/*
 * Existing Pro Water design system, decomposed into implementation layers.
 * The original section order, wrappers, CTA positions, palette and card frames
 * remain authoritative. Only the genre-variable artwork is rendered as
 * photo + text + decoration layers instead of flattened page-size SVGs.
 */

:root {
  --pro-blue: #255bb9;
  --pro-blue-bright: #3da2f6;
  --pro-blue-deep: #0566a8;
  --pro-orange: #f7751e;
  --pro-yellow: #ffe556;
  --pro-ink: #222;
  --pro-white: #fff;
}

.top_image {
  background: #eef8ff url("../parts/hero/water-background.webp") center / cover no-repeat !important;
}

.municipality-heading__ending {
  white-space: nowrap;
}

.genre-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1900 / 734;
  overflow: hidden;
  background: var(--pro-white);
  isolation: isolate;
}

.genre-hero__background,
.genre-hero__photo-mask,
.genre-hero__van,
.genre-hero__copy,
.genre-hero__availability,
.genre-hero__issues,
.genre-hero__price,
.genre-hero__speed,
.genre-hero__trust {
  box-sizing: border-box;
}

.genre-hero__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 48%, rgba(255,255,255,.22) 72%, rgba(255,255,255,0) 100%),
    url("../parts/hero/water-background.webp") center bottom / cover no-repeat;
}

.genre-hero__photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.genre-hero__photo-mask {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 54%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 18%, #000 34%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 18%, #000 34%, #000 100%);
  background: var(--pro-white);
}

.genre-hero__photo {
  object-position: 68% center;
}

.genre-hero__van {
  position: absolute;
  z-index: 3;
  top: 32%;
  left: 2.4%;
  width: 15.3%;
  overflow: hidden;
}

.genre-hero__van img {
  display: block;
  width: 100%;
  height: auto;
}

.genre-hero__copy {
  position: absolute;
  z-index: 2;
  top: 2.5%;
  left: 5.2%;
  width: 48.5%;
  padding: .8% 1.4% 1%;
  background: rgba(255,255,255,.94);
  text-align: left;
}

.genre-hero__lead {
  display: block;
  color: var(--pro-blue-bright);
  font-size: clamp(15px, 1.62vw, 25px);
  line-height: 1.35;
  font-weight: 800;
  white-space: nowrap;
}

.genre-hero__title {
  display: flex;
  margin-top: -.08em;
  align-items: baseline;
  justify-content: flex-start;
  color: var(--pro-white);
  -webkit-text-stroke: .032em #245cb8;
  paint-order: stroke fill;
  font-family: "Noto Sans JP Local", "Noto Sans JP", sans-serif;
  font-size: clamp(42px, 4.45vw, 68px);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 900;
  font-synthesis: none;
  isolation: isolate;
  white-space: nowrap;
}

.genre-hero__title-main,
.genre-hero__title-small {
  display: block;
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
}

.genre-hero__title-main::before,
.genre-hero__title-small::before {
  content: attr(data-text);
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  color: var(--pro-white);
  -webkit-text-stroke: .14em #245cb8;
  paint-order: stroke fill;
  pointer-events: none;
}

.genre-hero__title-main::after,
.genre-hero__title-small::after {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  color: var(--pro-white);
  -webkit-text-stroke: .085em var(--pro-white);
  paint-order: stroke fill;
  pointer-events: none;
}

.genre-hero__title-small {
  margin: 0 .02em;
  font-size: 68%;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-.03em);
}

.genre-hero__availability {
  display: flex;
  position: absolute;
  z-index: 3;
  top: 32%;
  left: 18%;
  width: 29%;
  overflow: hidden;
  border: 2px solid var(--pro-orange);
  background: var(--pro-white);
  color: var(--pro-blue);
  font-size: clamp(13px, 1.24vw, 19px);
  line-height: 1.22;
  text-align: center;
}

.genre-hero__availability strong,
.genre-hero__availability span {
  display: block;
  flex: 1 1 auto;
  padding: .34em .45em;
  font-weight: 900;
  white-space: nowrap;
}

.genre-hero__availability strong {
  background: var(--pro-white);
  color: var(--pro-orange);
}

.genre-hero__availability span {
  color: var(--pro-orange);
}

.genre-hero__issues {
  display: grid;
  position: absolute;
  z-index: 3;
  top: 42.5%;
  left: 17.5%;
  width: 22.5%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.genre-hero__issues li {
  padding: .32em .15em;
  border-radius: 999px;
  background: var(--pro-blue);
  color: var(--pro-white);
  font-size: clamp(12px, 1.1vw, 17px);
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.genre-hero__price {
  display: flex;
  position: absolute;
  z-index: 3;
  top: 39.5%;
  left: 40%;
  width: 17%;
  align-items: flex-end;
  color: var(--pro-orange);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.genre-hero__price-label {
  display: none;
}

.genre-hero__price strong {
  font-size: clamp(23px, 2vw, 31px);
  font-weight: 900;
}

.genre-hero__price strong > span {
  font-size: 1.72em;
  letter-spacing: -.04em;
}

.genre-hero__price small {
  margin: 0 0 .35em .3em;
  color: var(--pro-ink);
  font-size: clamp(9px, .75vw, 12px);
  font-weight: 800;
}

.genre-hero__speed {
  display: flex;
  position: absolute;
  z-index: 4;
  top: 52%;
  bottom: auto;
  left: 2.8%;
  width: 52.3%;
  height: 18.5%;
  align-items: center;
  justify-content: center;
  border-top: 0;
  background: var(--pro-blue);
  color: var(--pro-white);
  clip-path: polygon(3% 0, 100% 0, 96% 100%, 0 100%);
  transform: translateZ(0);
}

.genre-hero__speed strong {
  display: flex;
  align-items: baseline;
  color: var(--pro-white);
  font-size: clamp(24px, 3vw, 46px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.genre-hero__speed-prefix {
  margin-right: .12em;
  color: var(--pro-white);
  font-size: 1.08em;
}

.genre-hero__speed em {
  color: #fff600;
  font-size: 1.72em;
  font-style: italic;
  line-height: .75;
}

.genre-hero__speed-unit {
  margin-right: .12em;
  color: #fff600;
  font-size: 1.1em;
}

.genre-hero__trust {
  display: grid;
  position: absolute;
  z-index: 4;
  right: auto;
  bottom: 1.8%;
  left: 4.4%;
  width: 43.2%;
  height: 25.8%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6%;
  margin: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  list-style: none;
}

.genre-hero__trust li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37,91,185,.08);
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 8px rgba(5,102,168,.09);
  text-align: center;
}

.genre-hero__trust b {
  color: var(--pro-orange);
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1.05;
  font-weight: 900;
}

.genre-hero__trust span {
  color: var(--pro-blue);
  font-size: clamp(9px, .76vw, 12px);
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

/* Exact current-production PC CTA geometry: the 855x198 artwork is followed
 * by the 855x99 live telephone-number bar.  This remains in document flow and
 * therefore preserves every repeated CTA's baseline height and position. */
.section_cta_tel .section_inr > .pc_img {
  position: static;
}

.section_cta_tel .section_inr > .pc_img > .btn_tel_pc {
  display: block;
  position: static;
  width: 90%;
  height: 99px;
  margin: 0 auto;
  border-radius: 0;
  background: var(--pro-orange);
}

.section_cta_tel .section_inr > .pc_img > .btn_tel_pc a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--pro-white);
  font-size: 55px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.genre-sameday {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-rows: auto auto;
  align-items: center;
  overflow: hidden;
  color: #fff;
  font-weight: 900;
  line-height: 1.2;
}

.genre-sameday__area,
.genre-sameday__genre {
  display: block;
  grid-column: 1;
  padding-left: .1em;
  font-size: clamp(18px, 2vw, 37px);
}

.genre-sameday__area { color: #ffe556; }

.genre-sameday__badge {
  display: flex;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding: .16em .35em;
  transform: skewX(-13deg);
  background: #ffe556;
  color: #255bb9;
  font-size: clamp(27px, 3vw, 54px);
  font-style: italic;
}

.genre-sameday__badge > span { transform: skewX(13deg); }

.genre-symptom-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.genre-symptom-card {
  min-width: 0;
  text-align: center;
}

.genre-symptom-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

.genre-symptom-card span {
  display: block;
  position: relative;
  margin: -8px -3px 0;
  padding: .38em .25em;
  border-radius: 999px;
  background: #255bb9;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.genre-case-media {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.genre-case-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1.22;
  object-fit: cover;
}

.genre-case-media figcaption {
  padding: .8em .35em .9em;
  color: #255bb9;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 900;
}

.genre-case-media figcaption small {
  display: block;
  margin-top: .35em;
  color: #f7751e;
  font-size: .62em;
}

.waterworks-panel {
  position: relative;
  min-height: 356px;
  overflow: hidden;
  padding: 28px 26% 24px 30px;
  border: 1px solid rgba(37,91,185,.15);
  background: #fff;
  box-sizing: border-box;
}

.waterworks-panel__brand {
  color: #0566a8;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 900;
}

.waterworks-panel__brand small {
  color: #333;
  font-size: .55em;
}

.waterworks-panel__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .24em;
  margin: 22px 0 0;
  padding: 14px 18px;
  background: #2b61bd;
  color: #ffde3c;
  font-size: 38px;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
}

.waterworks-panel__jurisdiction,
.waterworks-panel__designation {
  display: inline-block;
  white-space: nowrap;
}

.waterworks-panel__body {
  margin: 0 !important;
  padding: 18px 20px 0 !important;
  color: #333;
  font-size: 20px;
  line-height: 1.75 !important;
  font-weight: 400;
}

.waterworks-panel__person {
  position: absolute;
  z-index: 2;
  right: -1.5%;
  bottom: 0;
  width: 28%;
  height: 98%;
  object-fit: contain;
  object-position: bottom right;
}

.genre-maker-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.genre-maker-list li {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid #d9ebfb;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

.genre-maker-list img {
  display: block;
  width: 100%;
  max-height: 62px;
  object-fit: contain;
}

.genre-flow {
  display: grid;
  position: relative;
  gap: 24px;
  margin: 0;
  padding: 0 70px 0 0;
  list-style: none;
}

/* REARCS_PROPRO_VISUAL_BOUNDARY_FLOW_ARROW_V1: arrow endpoint is synchronized to STEP.03 bottom. */
.genre-flow::after {
  content: "ここまで完全無料";
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: var(--flow-free-range-height, 60%);
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  clip-path: polygon(50% 0,100% 11%,78% 11%,78% 89%,100% 89%,50% 100%,0 89%,22% 89%,22% 11%,0 11%);
  background: #ffe556;
  color: #f7751e;
  font-size: 19px;
  line-height: 1.05;
  font-weight: 900;
  text-align: center;
  writing-mode: vertical-rl;
  box-sizing: border-box;
}

.genre-flow__step {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  grid-template-areas: "media content";
  align-items: center;
  min-width: 0;
}

.genre-flow__media {
  grid-area: media;
  position: relative;
  z-index: 2;
  text-align: center;
}

.genre-flow__number {
  display: block;
  margin-bottom: 2px;
  color: #0566a8;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.genre-flow__media img {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.genre-flow__content {
  grid-area: content;
  position: relative;
  min-height: 118px;
  margin-left: 16px;
  padding: 20px 28px;
  background: #0869a7;
  color: #fff;
  box-sizing: border-box;
}

.genre-flow__content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #0869a7;
  transform: translateY(-50%);
}

.genre-flow__content h4 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 900;
}

.genre-flow__content p {
  color: #fff;
  font-size: 15px;
  line-height: 1.65 !important;
}

.box_voice.voice-card {
  display: grid;
  position: relative;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: start;
  padding: 3.6em 1.25em 1.5em;
  border: 3px solid #255bb9;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(37,91,185,.12);
  box-sizing: border-box;
}

.voice-card .voice-num {
  display: flex;
  position: absolute;
  top: 12px;
  left: 14px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f7751e;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.voice-card .voice-photo {
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 3px solid #d9ebfb;
  border-radius: 50%;
  background: #eef6fd;
}

.voice-card .voice-photo img {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-card h4 {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #255bb9;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 800;
  text-align: left;
  letter-spacing: normal;
}

.voice-card .persona-tag {
  display: block;
  width: fit-content;
  margin: 0 0 7px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #daedfd;
  color: #222;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
}

.voice-card .voice-body { grid-column: 1 / -1; }

.voice-card .voice-body p {
  margin: .8em 0 0 !important;
  color: #222;
  font-size: 15px;
  line-height: 1.9 !important;
  text-align: left;
}

.voice-carousel__controls {
  display: none;
}

.voice-carousel__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pc_btn_last_tel {
  color: #fff;
  font-size: 25px;
  font-weight: 700;
}

@media only screen and (max-width: 768px) {
  html {
    scroll-padding-block-end: calc(137px + env(safe-area-inset-bottom, 0px));
  }

  .genre-hero { aspect-ratio: 950 / 1274; }

  .genre-hero__background {
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 28%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.96) 76%, rgba(255,255,255,1) 100%),
      url("../parts/hero/water-background.webp") center bottom / auto 100% no-repeat;
  }

  .genre-hero__photo-mask {
    top: 17%;
    width: 64%;
    height: 38%;
    clip-path: polygon(4% 0,100% 0,100% 100%,0 100%);
    -webkit-mask-image: linear-gradient(96deg, transparent 0%, transparent 18%, #000 36%, #000 100%);
    mask-image: linear-gradient(96deg, transparent 0%, transparent 18%, #000 36%, #000 100%);
  }

  .genre-hero__photo {
    object-position: 67% center;
  }

  .genre-hero__copy {
    top: 2.6%;
    left: 4.7%;
    width: 90.6%;
    padding: 1.6% 2% 1.8%;
    text-align: center;
  }

  .genre-hero__lead { font-size: clamp(12px, 3.3vw, 15px); }

  .genre-hero__title {
    justify-content: center;
    font-size: clamp(34px, 9.8vw, 42px);
    -webkit-text-stroke: .032em #245cb8;
  }

  .genre-hero__availability {
    display: block;
    top: 22.1%;
    left: 6.3%;
    width: 38.4%;
    font-size: clamp(12px, 3.7vw, 16px);
  }

  .genre-hero__availability strong,
  .genre-hero__availability span {
    padding: .38em .25em;
  }

  .genre-hero__availability strong {
    background: var(--pro-white);
    color: var(--pro-orange);
  }

  .genre-hero__availability span {
    background: var(--pro-orange);
    color: var(--pro-white);
  }

  .genre-hero__van {
    top: 35.5%;
    left: 0;
    width: 38.2%;
    clip-path: inset(0 1px 0 0);
  }

  .genre-hero__issues {
    top: 66.7%;
    left: 2.1%;
    width: 33.5%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 3px;
  }

  .genre-hero__issues li {
    padding: .35em .08em;
    font-size: clamp(10px, 2.9vw, 12px);
  }

  .genre-hero__price {
    top: 65.1%;
    left: 36.5%;
    width: 62%;
  }

  .genre-hero__price-label {
    display: none;
  }

  .genre-hero__price strong {
    font-size: clamp(24px, 8vw, 34px);
  }

  .genre-hero__price small {
    font-size: 9px;
  }

  .genre-hero__speed {
    top: 53.5%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 10%;
    border-top-width: 0;
    clip-path: polygon(3% 0, 100% 0, 96% 100%, 0 100%);
  }

  .genre-hero__speed strong {
    font-size: clamp(22px, 7vw, 29px);
  }

  .genre-hero__trust {
    right: auto;
    bottom: 2.8%;
    left: .6%;
    width: 98.8%;
    height: 14%;
    gap: 1.8%;
    border-top-width: 0;
  }

  .genre-hero__trust b {
    font-size: clamp(15px, 4.6vw, 19px);
  }

  .genre-hero__trust span {
    font-size: clamp(9px, 2.65vw, 11px);
  }

  .genre-sameday { grid-template-columns: 1.2fr 1fr; }
  .genre-sameday__area,
  .genre-sameday__genre { font-size: clamp(14px, 4.2vw, 24px); }
  .genre-sameday__badge { font-size: clamp(22px, 7vw, 40px); }

  .genre-symptom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .genre-symptom-card span {
    margin-top: -8px;
    font-size: clamp(12px, 3.45vw, 16px);
  }

  .genre-case-media figcaption { font-size: 20px; }

  .waterworks-panel {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 104px;
    grid-template-areas:
      "brand brand"
      "title title"
      "body person";
    align-items: end;
    padding: 20px 12px 0;
  }

  .waterworks-panel__brand {
    grid-area: brand;
    font-size: clamp(19px, 5.75vw, 23px);
    text-align: center;
  }
  .waterworks-panel__title {
    display: grid;
    grid-area: title;
    gap: 0;
    margin-top: 14px;
    padding: 9px 6px 10px;
    font-size: clamp(20px, 5.8vw, 23px);
    line-height: 1.2;
  }
  .waterworks-panel__body {
    grid-area: body;
    align-self: start;
    margin: 0 !important;
    padding: 13px 8px 18px 4px !important;
    font-size: clamp(13px, 3.55vw, 15px);
    line-height: 1.62 !important;
  }
  .waterworks-panel__person {
    position: static;
    grid-area: person;
    width: 112px;
    max-width: 100%;
    height: auto;
    max-height: 215px;
    align-self: end;
    justify-self: end;
    object-fit: contain;
    object-position: bottom right;
  }

  .genre-maker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .genre-maker-list li { min-height: 64px; }
  .genre-maker-list img { max-height: 48px; }

  .genre-flow {
    gap: 18px;
    padding-right: 28px;
  }

  .genre-flow::after {
    width: 28px;
    height: var(--flow-free-range-height, 60%);
    padding: 12px 0;
    font-size: 12px;
  }

  .genre-flow__step { grid-template-columns: 88px minmax(0,1fr); }
  .genre-flow__number { font-size: 18px; }
  .genre-flow__media img { width: 78px; height: 78px; }
  .genre-flow__content {
    min-height: 100px;
    margin-left: 9px;
    padding: 14px 12px;
  }
  .genre-flow__content::before {
    left: -11px;
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-right-width: 12px;
  }
  .genre-flow__content h4 { font-size: clamp(17px, 4.8vw, 23px); }
  .genre-flow__content p { font-size: clamp(12px, 3.55vw, 16px); }

  .box_voice.voice-card {
    flex: 0 0 100%;
    width: 100%;
    grid-template-columns: 76px 1fr;
    gap: 11px;
    margin: 1em 0 .5em;
    padding: 3.3em 1em 1.35em;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .voice-card .voice-photo { width: 76px; height: 76px; }
  .voice-card h4 { font-size: 18px; }
  .voice-card .persona-tag { font-size: 11px; }
  .voice-card .voice-body p { font-size: 16px; line-height: 1.85 !important; }

  .section_08 .ctn_voice {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6%;
    padding: 0 6% .5em;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .section_08,
  .section_08 .section_inr,
  .section_08 .ctn_voice {
    scroll-margin-block-end: calc(137px + env(safe-area-inset-bottom, 0px));
  }

  .section_08 .ctn_voice::-webkit-scrollbar {
    display: none;
  }

  .voice-carousel__controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 12px;
    width: 88%;
    align-items: center;
    margin: .5em auto 0;
    scroll-margin-block-end: calc(137px + env(safe-area-inset-bottom, 0px));
  }

  .voice-carousel__arrow,
  .voice-carousel__dot {
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pro-blue);
    cursor: pointer;
    scroll-margin-block-end: calc(137px + env(safe-area-inset-bottom, 0px));
  }

  .voice-carousel__arrow {
    border: 2px solid var(--pro-blue);
    border-radius: 50%;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
  }

  .voice-carousel__arrow:disabled {
    border-color: #aebfd5;
    color: #aebfd5;
    cursor: default;
  }

  .voice-carousel__dots {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .voice-carousel__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 2px solid var(--pro-blue);
    border-radius: 50%;
    background: var(--pro-white);
    box-sizing: border-box;
  }

  .voice-carousel__dot[aria-current="true"]::before {
    background: var(--pro-blue);
  }

  .voice-carousel__arrow:focus-visible,
  .voice-carousel__dot:focus-visible,
  .section_08 .ctn_voice:focus-visible {
    outline: 3px solid var(--pro-orange);
    outline-offset: 2px;
  }
}

/*
 * FV v4.9 — original production artwork geometry.
 * Each visible block is an independent Figma-exported layer. The original
 * 950 x 367 (PC) and 390 x 523 (SP) coordinates are preserved verbatim;
 * only the genre headline and route-specific prefecture label are changed.
 */
.genre-fv49 {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.genre-fv49--pc { aspect-ratio: 950 / 367; }
.genre-fv49--sp { aspect-ratio: 390 / 523; }

.genre-fv49__part {
  display: block;
  position: absolute;
  max-width: none;
  margin: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* PC: exact source coordinates (950 x 367). */
.genre-fv49 .genre-fv49__pc-headline { left: 0; top: 0; width: 58.947368%; height: 34.332425%; }
.genre-fv49 .genre-fv49__pc-person { left: 54.736842%; top: 0; width: 45.263158%; height: 100%; }
.genre-fv49 .genre-fv49__pc-van-availability { left: 0; top: 29.972752%; width: 38.947368%; height: 32.697548%; }
.genre-fv49 .genre-fv49__pc-issues-price { left: 33.684211%; top: 29.972752%; width: 28.421053%; height: 32.697548%; }
.genre-fv49 .genre-fv49__pc-speed { left: 0; top: 50.408719%; width: 58.947368%; height: 22.343324%; }
.genre-fv49 .genre-fv49__pc-trust-fast { left: 0; top: 69.482289%; width: 20%; height: 30.517711%; }
.genre-fv49 .genre-fv49__pc-trust-low { left: 18.421053%; top: 69.482289%; width: 20%; height: 30.517711%; }
.genre-fv49 .genre-fv49__pc-trust-licensed { left: 36.842105%; top: 69.482289%; width: 25.263158%; height: 30.517711%; }

/* SP: exact source coordinates (390 x 523). */
.genre-fv49 .genre-fv49__sp-headline { left: 0; top: 0; width: 100%; height: 40.152964%; }
.genre-fv49 .genre-fv49__sp-person { left: 34.615385%; top: 21.988528%; width: 65.384615%; height: 47.801147%; }
.genre-fv49 .genre-fv49__sp-availability { left: 0; top: 30.592734%; width: 47.435897%; height: 24.856597%; }
.genre-fv49 .genre-fv49__sp-van { left: 0; top: 47.801147%; width: 44.871795%; height: 26.768642%; }
.genre-fv49 .genre-fv49__sp-speed { left: 0; top: 61.185468%; width: 100%; height: 15.296367%; }
.genre-fv49 .genre-fv49__sp-issues { left: 0; top: 74.569790%; width: 38.461538%; height: 14.340344%; }
.genre-fv49 .genre-fv49__sp-price { left: 34.615385%; top: 74.569790%; width: 65.384615%; height: 14.340344%; }
.genre-fv49 .genre-fv49__sp-trust { left: 0; top: 86.998088%; width: 100%; height: 13.001912%; }

/* The source artwork contains the Osaka label. Mask that exact rectangle and
 * render the route's prefecture without altering any surrounding artwork. */
.genre-fv49__area {
  position: absolute;
  z-index: 20;
  box-sizing: border-box;
  font-family: "Noto Sans JP Local", "Noto Sans JP", sans-serif;
  font-weight: 900;
  white-space: nowrap;
}

.genre-fv49__area--pc {
  left: 17.894737%;
  top: 32.152589%;
  width: 29.263158%;
  height: 6.811989%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ff7a21;
  background: #fff;
  color: #f36d21;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.02em;
}

.genre-fv49__area--sp {
  left: 6.410256%;
  top: 22.179732%;
  width: 38.461538%;
  height: 12.428298%;
  display: grid;
  grid-template-rows: 31fr 34fr;
  border: 1px solid #ff7a21;
  background: #fff;
  color: #f36d21;
  line-height: 1;
  text-align: center;
}

.genre-fv49__area--sp strong,
.genre-fv49__area--sp span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.genre-fv49__area--sp strong {
  background: #fff;
  color: #f36d21;
  font-size: clamp(18px, 5.65vw, 22px);
  letter-spacing: -.03em;
}

.genre-fv49__area--sp span {
  background: #f36d21;
  color: #fff;
  font-size: clamp(13px, 4.35vw, 17px);
  letter-spacing: -.04em;
}

@media (prefers-reduced-motion: reduce) {
  .section_08 .ctn_voice {
    scroll-behavior: auto;
  }
}


/* REARCS_PROPRO_FIVE_GENRE_BODY_MASTERS_V1: source-aspect-safe 5x2 sprite crop inside the existing responsive frames. */
.genre-sprite-photo{display:block;position:relative;overflow:hidden;isolation:isolate;background:none;}
.genre-sprite-photo::before{content:"";position:absolute;z-index:0;top:50%;left:50%;width:500%;height:auto;aspect-ratio:var(--genre-sprite-width)/var(--genre-sprite-height);background-image:var(--genre-sprite);background-repeat:no-repeat;background-position:center;background-size:100% 100%;transform:translate(var(--genre-sprite-x),var(--genre-sprite-y));transform-origin:center;}
.genre-sprite-photo--1{--genre-sprite-x:-10%;--genre-sprite-y:-25%;}
.genre-sprite-photo--2{--genre-sprite-x:-30%;--genre-sprite-y:-25%;}
.genre-sprite-photo--3{--genre-sprite-x:-50%;--genre-sprite-y:-25%;}
.genre-sprite-photo--4{--genre-sprite-x:-70%;--genre-sprite-y:-25%;}
.genre-sprite-photo--5{--genre-sprite-x:-90%;--genre-sprite-y:-25%;}
.genre-sprite-photo--6{--genre-sprite-x:-10%;--genre-sprite-y:-75%;}
.genre-sprite-photo--7{--genre-sprite-x:-30%;--genre-sprite-y:-75%;}
.genre-sprite-photo--8{--genre-sprite-x:-50%;--genre-sprite-y:-75%;}
.genre-sprite-photo--9{--genre-sprite-x:-70%;--genre-sprite-y:-75%;}
.genre-sprite-photo--10{--genre-sprite-x:-90%;--genre-sprite-y:-75%;}
html[data-genre="kitchen"]{--genre-sprite:url("../genre-sprites/kitchen-perf-v1.webp");--genre-sprite-width:1717;--genre-sprite-height:916;}
html[data-genre="washbasin"]{--genre-sprite:url("../genre-sprites/washbasin-perf-v1.webp");--genre-sprite-width:1774;--genre-sprite-height:887;}
html[data-genre="bathroom"]{--genre-sprite:url("../genre-sprites/bathroom-perf-v1.webp");--genre-sprite-width:1774;--genre-sprite-height:887;}
html[data-genre="leak-detection"]{--genre-sprite:url("../genre-sprites/leak-detection-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="water-heater"]{--genre-sprite:url("../genre-sprites/water-heater-perf-v1.webp");--genre-sprite-width:1774;--genre-sprite-height:887;}
.genre-symptom-card__photo{width:100%;aspect-ratio:1;border:4px solid #fff;border-radius:50%;box-sizing:border-box;}
.genre-case-media__photo{width:100%;aspect-ratio:1.22;}
.genre-flow__photo{width:132px;height:132px;margin:0 auto;border-radius:50%;}
.genre-flow__photo-img{display:block;object-fit:cover;}
@media only screen and (max-width:768px){.genre-flow__photo{width:78px;height:78px;}}
.box_maker_inr img{display:block;width:100%;height:auto;}
.top_image[data-fv-status="PSD_PENDING_CURRENT_GENERIC_UNCHANGED"] h4{margin:0;}

html[data-genre="water-pipe"]{--genre-sprite:url("../genre-sprites/water-pipe-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="faucet"]{--genre-sprite:url("../genre-sprites/faucet-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="washlet"]{--genre-sprite:url("../genre-sprites/washlet-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="drain-pipe"]{--genre-sprite:url("../genre-sprites/drain-pipe-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="disposer"]{--genre-sprite:url("../genre-sprites/disposer-perf-v1.webp");--genre-sprite-width:1774;--genre-sprite-height:887;}
html[data-genre="toilet-replacement"]{--genre-sprite:url("../genre-sprites/toilet-replacement-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="washing-machine-water"]{--genre-sprite:url("../genre-sprites/washing-machine-water-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="water-pump"]{--genre-sprite:url("../genre-sprites/water-pump-perf-v1.webp");--genre-sprite-width:1983;--genre-sprite-height:793;}
html[data-genre="outdoor-faucet"]{--genre-sprite:url("../genre-sprites/outdoor-faucet-perf-v1.webp");--genre-sprite-width:1959;--genre-sprite-height:803;}


/* REARCS_PROPRO_ALL_GENRE_GEO_EXPANSION_V1: hub-only regional internal links; municipal pages keep one parent link. */
.genre-area-nav {
  box-sizing: border-box;
  width: min(100% - 32px, 1000px);
  margin: 0 auto 20px;
  padding: 20px;
  color: var(--pro-ink, #222);
  text-align: left;
  background: var(--pro-white, #fff);
  border: 2px solid var(--pro-blue, #255bb9);
}

.genre-area-nav h2 {
  margin: 0 0 14px;
  color: var(--pro-blue-deep, #0566a8);
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}

.genre-area-nav__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.genre-area-nav__list a,
.municipality-parent-link a {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--pro-blue-deep, #0566a8);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.municipality-parent-link {
  box-sizing: border-box;
  width: min(100% - 32px, 1000px);
  margin: 0 auto 16px;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .genre-area-nav {
    width: calc(100% - 24px);
    padding: 16px 12px;
  }

  .genre-area-nav h2 {
    font-size: 18px;
  }

  .genre-area-nav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
  }

  .municipality-parent-link {
    width: calc(100% - 24px);
  }
}

/* REARCS_PROPRO_ALL_GENRE_SCROLL_PERF_HOTFIX_V1: subset WOFF2 and lossless WebP sprite references. */