/* Both lining numerals have the same ink top, baseline, and advance width. */
@font-face {
  font-family: Marker Aligned Figures;
  src: url(marker-review/fonts/aligned-figures.woff) format('woff');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0031, U+0034;
  size-adjust: 114%;
}
@font-face {
  font-family: Marker Service Mincho;
  src: url(marker-review/fonts/service-mincho.woff) format('woff');
  font-weight: 500;
  font-display: swap;
}
.hero-service > span,
.hero-service > strong {
  font-family: "Marker Service Mincho", var(--serif);
  font-weight: 500;
}
:root { --marker-color: #fff474; }
.hero-service > strong,
.hero-quarter {
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.hero-service > strong::before,
.hero-quarter::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.12em;
  right: -.09em;
  bottom: .06em;
  height: .47em;
  background: var(--marker-color);
  clip-path: polygon(1.5% 11%, 38% 6%, 70% 11%, 100% 0, 99.2% 91%, 64% 96%, 32% 91%, 0 100%);
  transform: rotate(-.6deg);
}
.hero-quarter {
  display: block;
  font-family: "Marker Aligned Figures", var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "palt" 1, "lnum" 1, "tnum" 1;
}
.hero-quarter::before {
  left: -.02em;
  right: .02em;
  bottom: .04em;
  height: .39em;
  transform: rotate(-.35deg);
}