/* Typography and panels scale with the miniature sheet, whose dimensions and
   live-film crop remain owned by the existing hero animation. */
body.service-website-page #website-hero-design-showcase .website-hero-editorial {
  position: absolute;
  inset: calc(100% * 711 / 1503) 0 0;
  display: grid;
  grid-template-rows: 20cqw 37cqw minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  color: #173951;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5cqw;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: left;
  pointer-events: none;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial :where(div, p, span, img) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__label {
  font-size: 1.08cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .19em;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.9cqw;
  padding: 2cqw 6cqw;
  text-align: center;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__headline {
  font-family: "Shippori Mincho B1", serif;
  font-size: 3.7cqw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .13em;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__intro-line {
  font-size: 1.35cqw;
  letter-spacing: .09em;
  color: #5b7383;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__feature {
  display: grid;
  grid-template-columns: 61% 39%;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 57%;
  border: 0;
  border-radius: 0;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 4cqw 4.5cqw;
  background: var(--hero-card-blue);
  color: #fff;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__feature-title {
  margin-top: 2.7cqw;
  font-family: "Times New Roman", serif;
  font-size: 5.5cqw;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.04em;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__feature-ja {
  margin-top: 2.5cqw;
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.8cqw;
  line-height: 1.8;
  letter-spacing: .09em;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__more {
  display: inline-block;
  margin-top: 3cqw;
  padding-bottom: .7cqw;
  border-bottom: .08cqw solid currentColor;
  font-size: 1.03cqw;
  line-height: 1.4;
  letter-spacing: .12em;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__note {
  display: grid;
  grid-template-columns: 18cqw 1fr auto;
  align-items: center;
  gap: 3.6cqw;
  padding: 3cqw 6cqw;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__note img {
  height: 12cqw;
  object-position: center 44%;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__note-title {
  margin-top: 1.2cqw;
  font-family: "Shippori Mincho B1", serif;
  font-size: 2.2cqw;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .07em;
}

body.service-website-page #website-hero-design-showcase .website-hero-editorial__note .website-hero-editorial__more {
  margin-top: 0;
}