/* Stage02 v06: retain the approved mobile logo/photo fade. */
@media (max-width: 768px) {
  html body section.fv4ref.fv4ref--scene07 .fv07-mobile-photo picture > img,
  html body section.fv4ref.fv4ref--scene07 .fv07-exact-mobile-canvas {
    top: calc(var(--fv07-mobile-photo-top, 0px) + 12px);
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-row {
    isolation: isolate;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -10px;
    left: 50%;
    width: 100vw;
    height: calc(100% + 45px);
    transform: translateX(-50%);
    background: linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(100% - 40px),
      rgba(255, 255, 255, .88) calc(100% - 30px),
      rgba(255, 255, 255, .42) calc(100% - 13px),
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
  }
}

/* Hide the opaque white edge of the official logo against a pure-white centre. */
@media (min-width: 769px) {
  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-row {
    isolation: isolate;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    right: -55px;
    bottom: -30px;
    left: -55px;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #fff 8%,
      #fff 92%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 5%,
      #000 80%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 9%,
      #000 80%,
      transparent 100%
    );
    pointer-events: none;
  }
}

/* Centre the numeral itself on each proof circle's vertical and horizontal axes.
   Place 年 / 店 alongside it without including the unit in the centring width. */
html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) {
  display: block !important;
}

html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) > .t1 {
  position: absolute !important;
  top: clamp(14px, 2vw, 32px) !important;
  right: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) > .t2 {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* Align both numerals with the coloured emblem inside the subsidy image.
   The image also contains a caption, so its box centre is not the emblem centre. */
@media (min-width: 769px) {
  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) > .t2 {
    top: calc(50% + clamp(8px, .8vw, 12px)) !important;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge.is-subsidy > img {
    transform: translateY(calc(clamp(8px, .8vw, 12px) - 4px)) !important;
  }
}

html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) > .t2 small {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 4px !important;
  left: calc(100% + 3px) !important;
  margin: 0 !important;
}

/* Keep 1500 centred; place the two real text nodes 店 and 以上 below it. */
html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:nth-child(2) > .t2 small {
  top: auto !important;
  bottom: -23px !important;
  left: calc(50% - 24px) !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:nth-child(2) > .t3 {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(50% - 54px) !important;
  left: calc(50% - 6px) !important;
  margin: 0 !important;
  transform: none !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (min-width: 769px) {
  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:nth-child(2) > .t3 {
    bottom: calc(50% - 54px - clamp(8px, .8vw, 12px)) !important;
  }
}

@media (max-width: 768px) {
  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) > .t1 {
    top: 13% !important;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:not(.is-subsidy) > .t2 {
    top: calc(50% + 2px) !important;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:nth-child(2) > .t2 {
    font-size: clamp(30px, 8vw, 37px) !important;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:nth-child(2) > .t2 small {
    bottom: -27px !important;
    left: calc(50% - 17px) !important;
    font-size: clamp(9px, 2.8vw, 12px) !important;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-badge:nth-child(2) > .t3 {
    bottom: calc(50% - 29px - clamp(15px, 4vw, 18.5px)) !important;
    left: calc(50% - 2px) !important;
    font-size: clamp(9px, 2.8vw, 12px) !important;
  }
}