/* ==========================================================================
   Utopia — Site type: Sales LP (lp-sales)
   Every rule is scoped to body.utopia-site-lp-sales. Loaded on the Sales LP
   front page only. Colors: #000000 / #FFFFFF / #072842 (+ their alpha).
   ========================================================================== */

body.utopia-site-lp-sales {
  --utopia-lp-black: #000000;
  --utopia-lp-white: #ffffff;
  --utopia-lp-navy: #072842; /* base color (overridden inline from the Customizer) */
  --utopia-lp-navy-rgb: 7, 40, 66;
  --utopia-lp-on-navy: #ffffff; /* text on the base color (auto white / black) */
  --utopia-lp-on-navy-rgb: 255, 255, 255;
  --utopia-lp-navy-ink: #072842; /* base color as readable text */
  --utopia-lp-g-navy: #072842;
  --utopia-lp-g-navy-rgb: 7, 40, 66;
  --utopia-lp-g-on-navy: #ffffff;
  --utopia-lp-g-on-navy-rgb: 255, 255, 255;
  --utopia-lp-g-navy-ink: #072842;
  --utopia-lp-ink: rgba(0, 0, 0, 0.86);
  --utopia-lp-ink-soft: rgba(0, 0, 0, 0.62);
  --utopia-lp-rule: rgba(0, 0, 0, 0.12);
  --utopia-lp-rule-light: rgba(255, 255, 255, 0.22);
  --utopia-lp-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --utopia-lp-mincho: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --utopia-lp-heading-font: var(--utopia-lp-mincho); /* H2 (content) and inner-page H1 share this font */
  --utopia-lp-sans: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --utopia-lp-pad: clamp(80px, 9vw, 136px);
  --utopia-lp-gap: clamp(24px, 3vw, 40px);
  --utopia-lp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  margin: 0;
  padding: 0;
  background: var(--utopia-lp-white);
}

body.utopia-site-lp-sales .utopia-lp-sales {
  position: relative;
  overflow-x: clip;
  color: var(--utopia-lp-ink);
  background: var(--utopia-lp-white);
  font-family: var(--utopia-lp-sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.utopia-site-lp-sales :where(.utopia-lp-sales) *,
body.utopia-site-lp-sales :where(.utopia-lp-sales) *::before,
body.utopia-site-lp-sales :where(.utopia-lp-sales) *::after {
  box-sizing: border-box;
  border-radius: 0;
}

body.utopia-site-lp-sales :where(.utopia-lp-sales) img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.utopia-site-lp-sales :where(.utopia-lp-sales) a {
  color: inherit;
  text-decoration: none;
}

body.utopia-site-lp-sales :where(.utopia-lp-sales) :where(ul, ol, dl, dd) {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.utopia-site-lp-sales .utopia-lp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--utopia-lp-white);
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-skip:focus {
  left: 12px;
  top: 12px;
}

body.utopia-site-lp-sales .utopia-lp-sales :focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* ── Layout ─────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-wrap {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
}

body.utopia-site-lp-sales .utopia-lp-sec {
  position: relative;
  width: 100%;
  padding: var(--utopia-lp-pad) 0;
  background: var(--utopia-lp-white);
}

body.utopia-site-lp-sales .utopia-lp-sec--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1200px, calc(100% - 80px));
  height: 1px;
  background: var(--utopia-lp-rule);
  transform: translateX(-50%);
}

body.utopia-site-lp-sales .utopia-lp-sec--navy {
  background: var(--utopia-lp-navy);
  color: var(--utopia-lp-sec-fg, var(--utopia-lp-on-navy));
}

body.utopia-site-lp-sales .utopia-lp-grid {
  display: grid;
  grid-template-columns: repeat(var(--utopia-lp-cols, 3), minmax(0, 1fr));
  gap: var(--utopia-lp-gap);
}

/* ── Section head ───────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-head {
  max-width: 760px;
  margin: 0 0 clamp(48px, 6vw, 88px);
}
body.utopia-site-lp-sales .utopia-lp-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body.utopia-site-lp-sales .utopia-lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  font-family: var(--utopia-lp-serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
}
body.utopia-site-lp-sales .utopia-lp-head--center .utopia-lp-eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
}

body.utopia-site-lp-sales .utopia-lp-title {
  margin: 0;
  font-family: var(--utopia-lp-mincho);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--utopia-lp-black);
  word-break: auto-phrase;
  text-wrap: balance;
}

body.utopia-site-lp-sales .utopia-lp-lead {
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 2.1;
  color: var(--utopia-lp-ink-soft);
}

body.utopia-site-lp-sales .utopia-lp-sec--navy .utopia-lp-eyebrow,
body.utopia-site-lp-sales .utopia-lp-sec--navy .utopia-lp-title {
  color: var(--utopia-lp-sec-fg, var(--utopia-lp-on-navy));
}
body.utopia-site-lp-sales .utopia-lp-sec--navy .utopia-lp-lead {
  color: rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.78);
}

body.utopia-site-lp-sales .utopia-lp-note {
  margin: 40px 0 0;
  font-size: 12px;
  color: var(--utopia-lp-ink-soft);
}

/* ── Buttons / links ────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 60px;
  padding: 0 36px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.35s var(--utopia-lp-ease), color 0.35s var(--utopia-lp-ease), border-color 0.35s var(--utopia-lp-ease);
}

body.utopia-site-lp-sales .utopia-lp-btn__arrow {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}
body.utopia-site-lp-sales .utopia-lp-btn:hover .utopia-lp-btn__arrow,
body.utopia-site-lp-sales .utopia-lp-link:hover .utopia-lp-btn__arrow {
  width: 40px;
}

body.utopia-site-lp-sales .utopia-lp-btn--navy {
  background: var(--utopia-lp-navy);
  border-color: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
}
body.utopia-site-lp-sales .utopia-lp-btn--navy:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

body.utopia-site-lp-sales .utopia-lp-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--utopia-lp-g-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-btn--light:hover {
  background: transparent;
  color: var(--utopia-lp-on-navy);
}

body.utopia-site-lp-sales .utopia-lp-btn--outline {
  background: transparent;
  border-color: var(--utopia-lp-navy-ink);
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-btn--outline:hover {
  background: var(--utopia-lp-navy);
  border-color: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
}

body.utopia-site-lp-sales .utopia-lp-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 6px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--utopia-lp-navy-ink);
}

/* ── Header ─────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  color: var(--utopia-lp-g-on-navy);
  background: transparent;
  transition: background-color 0.4s var(--utopia-lp-ease), box-shadow 0.4s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales.admin-bar .utopia-lp-nav {
  top: 32px;
}
body.utopia-site-lp-sales .utopia-lp-nav.is-scrolled {
  background: var(--utopia-lp-g-navy);
  box-shadow: 0 1px 0 rgba(var(--utopia-lp-g-on-navy-rgb), 0.22);
}

body.utopia-site-lp-sales .utopia-lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(1360px, calc(100% - 80px));
  height: 96px;
  margin: 0 auto;
  transition: height 0.4s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-nav.is-scrolled .utopia-lp-nav__inner {
  height: 72px;
}

/* Section anchors: keep the target below the fixed header.
   --utopia-lp-anchor-offset is the real bottom edge of the header in its final (scrolled) state,
   measured by site-type-lp-sales.js (includes admin bar). Fallback = 72px bar (+32px admin bar). */
body.utopia-site-lp-sales .utopia-lp-page section[id],
body.utopia-site-lp-sales .utopia-lp-page :target {
  scroll-margin-top: var(--utopia-lp-anchor-offset, 72px);
}
body.utopia-site-lp-sales.admin-bar .utopia-lp-page section[id],
body.utopia-site-lp-sales.admin-bar .utopia-lp-page :target {
  scroll-margin-top: var(--utopia-lp-anchor-offset, 104px);
}

body.utopia-site-lp-sales .utopia-lp-nav__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
body.utopia-site-lp-sales .utopia-lp-nav__logo {
  width: auto;
  max-width: 200px;
  max-height: 40px;
}
body.utopia-site-lp-sales .utopia-lp-nav__logo-text {
  font-family: var(--utopia-lp-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
}

body.utopia-site-lp-sales .utopia-lp-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}
body.utopia-site-lp-sales .utopia-lp-nav__list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 13px;
  letter-spacing: 0.14em;
}
body.utopia-site-lp-sales .utopia-lp-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-nav__list a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

body.utopia-site-lp-sales .utopia-lp-nav__toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin: 0 -10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
body.utopia-site-lp-sales .utopia-lp-nav__toggle-line {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s var(--utopia-lp-ease), top 0.35s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-nav__toggle-line:nth-child(1) { top: 20px; }
body.utopia-site-lp-sales .utopia-lp-nav__toggle-line:nth-child(2) { top: 28px; }
body.utopia-site-lp-sales .utopia-lp-nav__toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.utopia-site-lp-sales .utopia-lp-nav.is-open .utopia-lp-nav__toggle-line:nth-child(1) {
  top: 24px;
  transform: rotate(45deg);
}
body.utopia-site-lp-sales .utopia-lp-nav.is-open .utopia-lp-nav__toggle-line:nth-child(2) {
  top: 24px;
  transform: rotate(-45deg);
}

/* ── Hero (main visual) ─────────────────────────────────
   LP only. PC: 50:50 grid (left = label / copy / description / button,
   right = hero image with PNG alpha kept). One shared triangle layer sits
   behind both columns. Every rule is scoped to the LP hero. */

body.utopia-site-lp-sales .utopia-lp-hero {
  --utopia-site-color: var(--utopia-lp-navy, #072842); /* LP site color */
  --utopia-lp-hero-nav-h: 96px; /* fixed LP header height */

  position: relative;
  width: 100%;
  height: 676px;
  min-height: 676px;
  overflow: hidden;
  background: #ffffff;
  color: var(--utopia-lp-ink);
  font-family: var(--utopia-lp-hero-font, var(--utopia-lp-sans));
}
/* Unify the typeface (font-family only) of every hero text with the main button. */
body.utopia-site-lp-sales .utopia-lp-hero :is(.utopia-lp-hero__en, .utopia-lp-hero__title, .utopia-lp-hero__sub, .utopia-lp-hero__desc, .utopia-lp-hero__actions, .utopia-lp-btn, .utopia-lp-hero__scroll) {
  font-family: var(--utopia-lp-hero-font, var(--utopia-lp-sans));
}

/* Shared triangle background layer */
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-triangles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-triangle {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-left: 135px solid transparent;
  border-right: 135px solid transparent;
  border-bottom: 235px solid var(--utopia-site-color);
  opacity: 0.2;
  pointer-events: none;
  transform-origin: center center;
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-01 {
  top: -11%;
  left: -4%;
  border-left-width: 148px;
  border-right-width: 148px;
  border-bottom-width: 330px;
  transform: rotate(-21deg) scale(1.04);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-02 {
  top: 4%;
  left: 23%;
  border-left-width: 68px;
  border-right-width: 68px;
  border-bottom-width: 182px;
  transform: rotate(29deg) scale(0.88);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-03 {
  bottom: -2%;
  left: -5%;
  border-left-width: 192px;
  border-right-width: 192px;
  border-bottom-width: 270px;
  transform: rotate(11deg) scale(1.02);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-04 {
  bottom: -10%;
  left: 27%;
  border-left-width: 76px;
  border-right-width: 76px;
  border-bottom-width: 255px;
  transform: rotate(-33deg) scale(0.82);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-05 {
  top: -14%;
  left: 44%;
  border-left-width: 152px;
  border-right-width: 152px;
  border-bottom-width: 290px;
  transform: rotate(22deg) scale(1.01);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-06 {
  top: 20%;
  right: -8%;
  border-left-width: 165px;
  border-right-width: 165px;
  border-bottom-width: 365px;
  transform: rotate(-27deg) scale(1.01);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-07 {
  bottom: -12%;
  right: -2%;
  border-left-width: 182px;
  border-right-width: 182px;
  border-bottom-width: 270px;
  transform: rotate(35deg) scale(0.89);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-08 {
  top: 2%;
  right: 19%;
  border-left-width: 59px;
  border-right-width: 59px;
  border-bottom-width: 205px;
  transform: rotate(-19deg) scale(0.79);
}
/* triangle-09: small one near the column boundary (lower area, away from the text center). */
body.utopia-site-lp-sales .utopia-lp-hero .triangle-09 {
  bottom: 6%;
  left: 47%;
  border-left-width: 52px;
  border-right-width: 52px;
  border-bottom-width: 150px;
  transform: rotate(17deg) scale(0.86);
}
body.utopia-site-lp-sales .utopia-lp-hero .triangle-10 {
  display: none;
}

/* Two columns */
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding-top: var(--utopia-lp-hero-nav-h); /* keep content clear of the fixed LP header */
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  padding: 60px 7% 60px 8%;
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero__body {
  width: 100%;
  min-width: 0;
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 6%;
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image-png {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  max-height: min(620px, 100%);
  object-fit: contain;
  background: transparent;
  opacity: 1;
  animation: utopiaLpRise 1.2s var(--utopia-lp-ease) 0.3s both;
}

/* Text (colors for the white background; sizes / weights unchanged) */
body.utopia-site-lp-sales .utopia-lp-hero__en {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.6vw, 22px);
  font-style: italic;
  letter-spacing: 0.24em;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-hero__title {
  max-width: 14em;
  margin: 0;
  font-size: clamp(34px, 3.8vw, 60px); /* sized for the 50% text column */
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.06em;
  color: var(--utopia-lp-black);
  word-break: auto-phrase;
}
body.utopia-site-lp-sales .utopia-lp-hero__sub {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-hero__desc {
  max-width: 600px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 2;
  color: var(--utopia-lp-ink-soft);
}
body.utopia-site-lp-sales .utopia-lp-hero__actions {
  margin: 32px 0 0;
}
/* Main button: same design, colored for the white background. */
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-btn--light {
  background: var(--utopia-lp-navy);
  border-color: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-btn--light:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
body.utopia-site-lp-sales .utopia-lp-hero__en,
body.utopia-site-lp-sales .utopia-lp-hero__title,
body.utopia-site-lp-sales .utopia-lp-hero__sub,
body.utopia-site-lp-sales .utopia-lp-hero__desc,
body.utopia-site-lp-sales .utopia-lp-hero__actions {
  animation: utopiaLpRise 1.2s var(--utopia-lp-ease) both;
}
body.utopia-site-lp-sales .utopia-lp-hero__title { animation-delay: 0.12s; }
body.utopia-site-lp-sales .utopia-lp-hero__sub { animation-delay: 0.28s; }
body.utopia-site-lp-sales .utopia-lp-hero__desc { animation-delay: 0.4s; }
body.utopia-site-lp-sales .utopia-lp-hero__actions { animation-delay: 0.52s; }

body.utopia-site-lp-sales .utopia-lp-hero__scroll {
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.24em;
  color: var(--utopia-lp-navy-ink);
  writing-mode: vertical-rl;
}
body.utopia-site-lp-sales .utopia-lp-hero__scroll::after {
  content: "";
  width: 1px;
  height: 88px;
  background: linear-gradient(180deg, rgba(var(--utopia-lp-navy-rgb), 0.9), rgba(var(--utopia-lp-navy-rgb), 0));
  animation: utopiaLpScroll 2.4s var(--utopia-lp-ease) infinite;
  transform-origin: top;
}

/* PC (1081px+):
   - Triangle background (header + main visual) is shorter by the header bar
     height: 676px - header height. Triangle shapes / positions are unchanged.
   - Image fills the right column from just below the header to the bottom
     edge and out to the right edge of the screen (object-fit: cover). */
@media (min-width: 1081px) {
  body.utopia-site-lp-sales .utopia-lp-hero {
    height: calc(676px - var(--utopia-lp-hero-nav-h));
    min-height: calc(676px - var(--utopia-lp-hero-nav-h));
  }
  /* Let the image column position against the whole hero (screen width). */
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-inner {
    position: static;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image {
    position: absolute;
    z-index: 2;
    top: var(--utopia-lp-hero-nav-h);
    right: 0;
    bottom: 0;
    left: 50%;
    width: auto;
    height: auto;
    padding: 0;
    overflow: hidden;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image-png {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
  }
  /* Scroll indicator stays above the image. */
  body.utopia-site-lp-sales .utopia-lp-hero__scroll {
    z-index: 4;
  }
}

/* Tablet: keep 2 columns; let the hero grow when the copy needs more room. */
@media (max-width: 1080px) {
  body.utopia-site-lp-sales .utopia-lp-hero {
    height: auto;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-inner {
    min-height: 676px;
  }
}

/* Fixed LP header over the white hero: dark text until it turns navy on scroll. */
body.utopia-site-lp-sales:has(.utopia-lp-hero) .utopia-lp-nav:not(.is-scrolled):not(.is-open) {
  color: var(--utopia-lp-nav-top, var(--utopia-lp-g-navy-ink));
}
/* 2026-10 r31: while the header is transparent (before scrolling, menu closed) the menu bar text is always
   #222222, whatever the 一括カラーテーマ / base colour. Scrolled / coloured header and the open menu are unchanged. */
body.utopia-site-lp-sales .utopia-lp-nav:not(.is-scrolled):not(.is-open),
body.utopia-site-lp-sales:has(.utopia-lp-hero) .utopia-lp-nav:not(.is-scrolled):not(.is-open) {
  color: #222222 !important;
}

@keyframes utopiaLpRise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes utopiaLpScroll {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── Problem ────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-problem__grid {
  row-gap: clamp(56px, 6vw, 72px);
  padding-top: 24px;
}
body.utopia-site-lp-sales .utopia-lp-problem__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--utopia-lp-white);
  border: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-problem__num {
  position: absolute;
  top: -0.72em; /* raised further above the card */
  right: -0.08em;
  z-index: 2;
  /* Same number design as SOLUTION (.utopia-lp-solution__num):
     serif / italic / weight 400 / inherited letter-spacing / no transform.
     Slightly larger than before; white with a soft shadow. */
  font-family: var(--utopia-lp-serif);
  font-size: clamp(72px, 6.8vw, 104px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: inherit;
  color: #fff;
  -webkit-text-stroke: 0;
  transform: none;
  border: none;
  box-shadow: none;
  background: none;
  text-shadow:
    0 -4px 10px rgba(0, 0, 0, 0.25),
    0 0 2px rgba(0, 0, 0, 0.30);
  pointer-events: none;
}
body.utopia-site-lp-sales .utopia-lp-problem__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--utopia-lp-navy);
}
body.utopia-site-lp-sales .utopia-lp-problem__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25);
  transition: transform 1.2s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-problem__card:hover .utopia-lp-problem__media img {
  transform: scale(1.04);
}
body.utopia-site-lp-sales .utopia-lp-problem__body {
  padding: 32px 32px 40px;
}
body.utopia-site-lp-sales .utopia-lp-problem__title {
  margin: 0 0 16px;
  font-family: var(--utopia-lp-mincho);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-problem__desc {
  font-size: 14px;
  line-height: 2;
  color: var(--utopia-lp-ink-soft);
}

/* ── Solution (navy) ────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-solution__grid {
  gap: 0;
  border-top: 1px solid rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.22);
  border-left: 1px solid rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.22);
}
body.utopia-site-lp-sales .utopia-lp-solution__item {
  padding: clamp(36px, 4vw, 52px) clamp(28px, 3vw, 44px) clamp(40px, 4vw, 56px);
  border-right: 1px solid rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.22);
  border-bottom: 1px solid rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.22);
  transition: background-color 0.4s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-solution__item:hover {
  background: rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.04);
}
body.utopia-site-lp-sales .utopia-lp-solution__num {
  margin: 0 0 28px;
  font-family: var(--utopia-lp-serif);
  font-size: 56px;
  font-style: italic;
  line-height: 1;
  color: var(--utopia-lp-sec-fg, var(--utopia-lp-on-navy));
}
body.utopia-site-lp-sales .utopia-lp-solution__title {
  margin: 0 0 14px;
  font-family: var(--utopia-lp-mincho);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--utopia-lp-sec-fg, var(--utopia-lp-on-navy));
}
body.utopia-site-lp-sales .utopia-lp-solution__desc {
  font-size: 14px;
  line-height: 2;
  color: rgba(var(--utopia-lp-sec-fg-rgb, var(--utopia-lp-on-navy-rgb)), 0.74);
}

/* ── Voice ──────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-voice__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--utopia-lp-gap);
}
body.utopia-site-lp-sales .utopia-lp-voice__card {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 36px;
  background: var(--utopia-lp-white);
  box-shadow: 0 24px 48px -28px rgba(var(--utopia-lp-navy-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.04);
}
body.utopia-site-lp-sales .utopia-lp-voice__media {
  flex: 0 0 180px;
  width: 180px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--utopia-lp-navy);
}
body.utopia-site-lp-sales .utopia-lp-voice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.utopia-site-lp-sales .utopia-lp-voice__body {
  flex: 1 1 auto;
  min-width: 0;
}
body.utopia-site-lp-sales .utopia-lp-voice__mark {
  height: 36px;
  font-family: var(--utopia-lp-serif);
  font-size: 72px;
  line-height: 1;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-voice__title {
  margin: 0 0 14px;
  font-family: var(--utopia-lp-mincho);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-voice__desc {
  font-size: 14px;
  line-height: 2;
  color: var(--utopia-lp-ink-soft);
}
body.utopia-site-lp-sales .utopia-lp-voice__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-voice__name::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* ── Demo ───────────────────────────────────────────────
   Card: name band (base color, centered) → image, no gap, no rule line.
   Image layers: img → black shade (normal) → base-color tint (hover) → text. */

body.utopia-site-lp-sales .utopia-lp-demo__card {
  display: flex;
  flex-direction: column;
}
body.utopia-site-lp-sales .utopia-lp-demo__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
body.utopia-site-lp-sales .utopia-lp-demo__title {
  margin: 0;
  padding: 14px 16px;
  background: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
  font-family: var(--utopia-lp-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: center;
}
body.utopia-site-lp-sales .utopia-lp-demo__media {
  position: relative;
  aspect-ratio: 16 / 11;
  margin: 0;
  overflow: hidden;
  background: var(--utopia-lp-navy);
}
body.utopia-site-lp-sales .utopia-lp-demo__media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.2s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-demo__shade,
body.utopia-site-lp-sales .utopia-lp-demo__tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-demo__shade {
  z-index: 1;
  background: #000;
  opacity: var(--utopia-lp-demo-shade, 0.1);
}
body.utopia-site-lp-sales .utopia-lp-demo__tint {
  z-index: 2;
  background: rgba(var(--utopia-lp-navy-rgb), 0.2);
  opacity: 0;
}
body.utopia-site-lp-sales .utopia-lp-demo__hover {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--utopia-lp-on-navy);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 10px rgba(var(--utopia-lp-navy-rgb), 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--utopia-lp-ease);
}
/* Hover (mouse) + keyboard focus. Touch devices keep the normal state and open the link on tap. */
@media (hover: hover) and (pointer: fine) {
  body.utopia-site-lp-sales a.utopia-lp-demo__link:hover .utopia-lp-demo__media img {
    transform: scale(1.04);
  }
  body.utopia-site-lp-sales a.utopia-lp-demo__link:hover .utopia-lp-demo__shade {
    opacity: 0;
  }
  body.utopia-site-lp-sales a.utopia-lp-demo__link:hover .utopia-lp-demo__tint,
  body.utopia-site-lp-sales a.utopia-lp-demo__link:hover .utopia-lp-demo__hover {
    opacity: 1;
  }
}
body.utopia-site-lp-sales a.utopia-lp-demo__link:focus-visible .utopia-lp-demo__shade {
  opacity: 0;
}
body.utopia-site-lp-sales a.utopia-lp-demo__link:focus-visible .utopia-lp-demo__tint,
body.utopia-site-lp-sales a.utopia-lp-demo__link:focus-visible .utopia-lp-demo__hover {
  opacity: 1;
}
body.utopia-site-lp-sales .utopia-lp-demo__body {
  padding: 20px 0 0;
}
body.utopia-site-lp-sales .utopia-lp-demo__desc {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--utopia-lp-ink-soft);
}

/* ── Price (.utp-pricing) ──────────────────────────────
   Cards: inc/lp-sales-render.php utopia_nlp_render_pricing_cards().
   Colors come from inline custom properties per card (--utp-bg / --utp-fg / --utp-strong / --utp-tag-*),
   so the cards keep their own colors inside a colored section too. */

body.utopia-site-lp-sales .utp-pricing {
  --utp-cols: 4;
  --utp-gap: clamp(16px, 1.8vw, 28px);
  max-width: none;
  margin: 0 auto;
}
body.utopia-site-lp-sales .utp-pricing[data-cols="1"] { max-width: 560px; }
body.utopia-site-lp-sales .utp-pricing[data-cols="2"] { max-width: 1120px; }
body.utopia-site-lp-sales .utp-pricing__grid {
  display: grid;
  grid-template-columns: repeat(var(--utp-cols), minmax(0, 1fr));
  gap: var(--utp-gap);
  align-items: stretch;
}
body.utopia-site-lp-sales .utp-pricing__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 2.6vw, 40px) clamp(22px, 2.2vw, 32px) clamp(26px, 2.4vw, 34px);
  background: var(--utp-bg, #fff);
  color: var(--utp-fg, #000);
  border: 1px solid var(--utp-line, rgba(0, 0, 0, 0.14));
  overflow-wrap: anywhere;
  word-break: normal;
  transition: translate 0.35s var(--utopia-lp-ease, ease), box-shadow 0.35s var(--utopia-lp-ease, ease);
}
body.utopia-site-lp-sales .utp-pricing__card.is-dark {
  border-color: var(--utp-bg);
}
/* Align the parts of neighbouring cards on the same lines (price, rows, button). */
@supports (grid-template-rows: subgrid) {
  body.utopia-site-lp-sales .utp-pricing__card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
body.utopia-site-lp-sales .utp-pricing__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
body.utopia-site-lp-sales .utp-pricing__kind {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  opacity: 0.78;
}
body.utopia-site-lp-sales .utp-pricing__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--utp-tag-bg);
  color: var(--utp-tag-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: nowrap;
}
body.utopia-site-lp-sales .utp-pricing__name {
  margin: 14px 0 0;
  font-family: var(--utopia-lp-serif);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
body.utopia-site-lp-sales .utp-pricing__target {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.78;
}
body.utopia-site-lp-sales .utp-pricing__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--utp-line);
}
body.utopia-site-lp-sales .utp-pricing__value {
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
body.utopia-site-lp-sales .utp-pricing__unit {
  font-size: 13px;
  opacity: 0.74;
}
body.utopia-site-lp-sales .utp-pricing__sites {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
body.utopia-site-lp-sales .utp-pricing__sites:empty {
  margin: 0;
}
body.utopia-site-lp-sales .utp-pricing__rows {
  flex: 1 1 auto;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--utp-line);
}
body.utopia-site-lp-sales .utp-pricing__rows:empty {
  border-top: 0;
}
body.utopia-site-lp-sales .utp-pricing__row {
  padding: 13px 0;
  border-bottom: 1px solid var(--utp-line);
}
body.utopia-site-lp-sales .utp-pricing__row dt {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
body.utopia-site-lp-sales .utp-pricing__row dd {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.82;
}
body.utopia-site-lp-sales .utp-pricing__common {
  margin: 20px 0 0;
}
body.utopia-site-lp-sales .utp-pricing__common:empty {
  margin: 0;
}
body.utopia-site-lp-sales .utp-pricing__common-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
body.utopia-site-lp-sales .utp-pricing__common-text {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.8;
  opacity: 0.74;
}
body.utopia-site-lp-sales .utp-pricing__action {
  margin: 26px 0 0;
  align-self: end;
}
body.utopia-site-lp-sales .utp-pricing__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 20px;
  background: var(--utp-strong);
  border: 1px solid var(--utp-strong);
  color: var(--utp-strong-fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.35s var(--utopia-lp-ease, ease), color 0.35s var(--utopia-lp-ease, ease);
}
body.utopia-site-lp-sales .utp-pricing__btn:hover,
body.utopia-site-lp-sales .utp-pricing__btn:focus-visible {
  background: transparent;
  color: var(--utp-fg);
  border-color: var(--utp-fg);
}
body.utopia-site-lp-sales .utp-pricing__arrow {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--utopia-lp-ease, ease);
}
body.utopia-site-lp-sales .utp-pricing__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
body.utopia-site-lp-sales .utp-pricing__btn:hover .utp-pricing__arrow {
  width: 34px;
}
@media (hover: hover) and (pointer: fine) {
  body.utopia-site-lp-sales .utp-pricing__card:hover {
    translate: 0 -4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.utopia-site-lp-sales .utp-pricing__card,
  body.utopia-site-lp-sales .utp-pricing__btn,
  body.utopia-site-lp-sales .utp-pricing__arrow {
    transition: none;
  }
}
/* Tablet: at most 2 columns.  Phone: 1 column. */
@media (max-width: 1080px) {
  body.utopia-site-lp-sales .utp-pricing:is([data-cols="3"], [data-cols="4"]) {
    --utp-cols: 2 !important;
    max-width: 1120px;
  }
}
@media (max-width: 700px) {
  body.utopia-site-lp-sales .utp-pricing[data-cols] {
    --utp-cols: 1 !important;
    max-width: 560px;
  }
  body.utopia-site-lp-sales .utp-pricing__card {
    padding: 30px 22px 26px;
  }
}

/* ── Split (FAQ / News) ─────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
body.utopia-site-lp-sales .utopia-lp-split__aside {
  position: sticky;
  top: 120px;
}
body.utopia-site-lp-sales .utopia-lp-split__aside .utopia-lp-head {
  margin-bottom: 36px;
}

/* ── FAQ ────────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-qa__list {
  border-top: 1px solid var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-qa__item {
  border-bottom: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-qa__q {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--utopia-lp-mincho);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-qa__q::-webkit-details-marker {
  display: none;
}
body.utopia-site-lp-sales .utopia-lp-qa__q::marker {
  content: "";
}
body.utopia-site-lp-sales .utopia-lp-qa__mark {
  flex: 0 0 auto;
  width: 24px;
  font-family: var(--utopia-lp-serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1.05;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-qa__text {
  flex: 1 1 auto;
  min-width: 0;
}
body.utopia-site-lp-sales .utopia-lp-qa__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 6px;
}
body.utopia-site-lp-sales .utopia-lp-qa__icon::before,
body.utopia-site-lp-sales .utopia-lp-qa__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--utopia-lp-navy);
  transition: transform 0.35s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-qa__icon::after {
  transform: rotate(90deg);
}
body.utopia-site-lp-sales .utopia-lp-qa__item[open] .utopia-lp-qa__icon::after {
  transform: rotate(0deg);
}
body.utopia-site-lp-sales .utopia-lp-qa__a {
  display: flex;
  gap: 20px;
  padding: 0 44px 32px 4px;
  font-size: 14px;
  line-height: 2;
  color: var(--utopia-lp-ink-soft);
}
body.utopia-site-lp-sales .utopia-lp-qa__item[open] .utopia-lp-qa__a {
  animation: utopiaLpFade 0.45s var(--utopia-lp-ease) both;
}
@keyframes utopiaLpFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ── Flow ───────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-flow__list {
  counter-reset: none;
}
body.utopia-site-lp-sales .utopia-lp-flow__list--row {
  display: grid;
  grid-template-columns: repeat(var(--utopia-lp-cols, 4), minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-flow__list--row .utopia-lp-flow__step {
  position: relative;
  padding: 36px 32px 8px 0;
}
body.utopia-site-lp-sales .utopia-lp-flow__list--row .utopia-lp-flow__step::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--utopia-lp-navy);
}
body.utopia-site-lp-sales .utopia-lp-flow__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--utopia-lp-serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.24em;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-flow__num {
  font-size: 48px;
  letter-spacing: 0;
  line-height: 1;
}
body.utopia-site-lp-sales .utopia-lp-flow__title {
  margin: 0 0 12px;
  font-family: var(--utopia-lp-mincho);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-flow__desc {
  font-size: 14px;
  line-height: 2;
  color: var(--utopia-lp-ink-soft);
}
body.utopia-site-lp-sales .utopia-lp-flow__list--column {
  max-width: 880px;
  border-top: 1px solid var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-flow__list--column .utopia-lp-flow__step {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-flow__list--column .utopia-lp-flow__label {
  margin: 0;
}

/* ── Company ────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-company__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
body.utopia-site-lp-sales .utopia-lp-company__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--utopia-lp-navy);
}
body.utopia-site-lp-sales .utopia-lp-company__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.utopia-site-lp-sales .utopia-lp-company__body .utopia-lp-head {
  margin-bottom: 36px;
}
body.utopia-site-lp-sales .utopia-lp-company__text {
  margin: 0 0 1.4em;
  font-size: 14px;
  line-height: 2.1;
  color: var(--utopia-lp-ink-soft);
}
body.utopia-site-lp-sales .utopia-lp-company__info {
  margin: 40px 0 0;
  border-top: 1px solid var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-company__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--utopia-lp-rule);
  font-size: 14px;
  line-height: 1.7;
}
body.utopia-site-lp-sales .utopia-lp-company__row dt {
  font-weight: 500;
  color: var(--utopia-lp-navy-ink);
}

/* ── Banded (CTA / Contact) ─────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-banded {
  background-color: var(--utopia-lp-sec-bg, var(--utopia-lp-navy));
}
body.utopia-site-lp-sales .utopia-lp-banded.has-image {
  background-image: linear-gradient(rgba(var(--utopia-lp-navy-rgb), 0.55), rgba(var(--utopia-lp-navy-rgb), 0.55)), var(--utopia-lp-sec-img, none);
  background-size: cover;
  background-position: center;
}
body.utopia-site-lp-sales .utopia-lp-box {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 96px);
  background: var(--utopia-lp-white);
  text-align: center;
}
body.utopia-site-lp-sales .utopia-lp-banded[style*="#ffffff"] .utopia-lp-box {
  border: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 44px 0 0;
}
body.utopia-site-lp-sales .utopia-lp-cta__actions .utopia-lp-btn {
  min-width: 260px;
}

/* ── News ───────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-news__list {
  border-top: 1px solid var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-news__item {
  border-bottom: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-news__link {
  display: grid;
  grid-template-columns: 110px 104px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  padding: 26px 4px;
  transition: padding 0.35s var(--utopia-lp-ease), color 0.35s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-news__link:hover {
  padding-left: 14px;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-news__date {
  font-family: var(--utopia-lp-serif);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-news__cat {
  padding: 3px 10px;
  border: 1px solid var(--utopia-lp-navy-ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--utopia-lp-navy-ink);
  white-space: nowrap;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.utopia-site-lp-sales .utopia-lp-news__title {
  font-size: 15px;
  line-height: 1.8;
}
body.utopia-site-lp-sales .utopia-lp-news__empty {
  padding: 32px 0;
  border-top: 1px solid var(--utopia-lp-black);
  font-size: 14px;
  color: var(--utopia-lp-ink-soft);
}

/* ── Contact form (theme form, restyled inside LP only) ─ */

body.utopia-site-lp-sales .utopia-lp-contact__box {
  text-align: left;
}
body.utopia-site-lp-sales .utopia-lp-contact__form {
  max-width: 640px;
  margin: 0 auto;
}
body.utopia-site-lp-sales .utopia-lp-contact__form .utopia-contact-form,
body.utopia-site-lp-sales .utopia-lp-contact__form .utopia-contact-form__form {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.utopia-site-lp-sales .utopia-lp-contact__form .utopia-contact-form__field {
  margin: 0 0 24px;
}
body.utopia-site-lp-sales .utopia-lp-contact__form .utopia-contact-form__field--hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
body.utopia-site-lp-sales .utopia-lp-contact__form label {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-contact__form .required {
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-contact__form input[type="text"],
body.utopia-site-lp-sales .utopia-lp-contact__form input[type="email"],
body.utopia-site-lp-sales .utopia-lp-contact__form input[type="tel"],
body.utopia-site-lp-sales .utopia-lp-contact__form input[type="url"],
body.utopia-site-lp-sales .utopia-lp-contact__form select,
body.utopia-site-lp-sales .utopia-lp-contact__form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 0;
  background: var(--utopia-lp-white);
  color: var(--utopia-lp-black);
  font: inherit;
  font-size: 15px;
  box-shadow: none;
  transition: border-color 0.3s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-contact__form textarea {
  min-height: 180px;
  resize: vertical;
}
body.utopia-site-lp-sales .utopia-lp-contact__form input:focus,
body.utopia-site-lp-sales .utopia-lp-contact__form select:focus,
body.utopia-site-lp-sales .utopia-lp-contact__form textarea:focus {
  outline: none;
  border-color: var(--utopia-lp-navy-ink);
  box-shadow: inset 0 0 0 1px var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-contact__form button,
body.utopia-site-lp-sales .utopia-lp-contact__form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  margin: 8px 0 0;
  padding: 0 32px;
  border: 1px solid var(--utopia-lp-navy);
  border-radius: 0;
  background: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.16em;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.35s var(--utopia-lp-ease), border-color 0.35s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-contact__form button:hover,
body.utopia-site-lp-sales .utopia-lp-contact__form input[type="submit"]:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
body.utopia-site-lp-sales .utopia-lp-contact__form .utopia-contact-form__message {
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--utopia-lp-navy-ink);
  border-radius: 0;
  background: var(--utopia-lp-white);
  color: var(--utopia-lp-navy-ink);
  font-size: 14px;
}

/* ── Footer ─────────────────────────────────────────── */

body.utopia-site-lp-sales .utopia-lp-foot {
  padding: 80px 0 48px;
  background: var(--utopia-lp-foot-bg, #000);
  color: rgb(var(--utopia-lp-foot-fg-rgb, 255, 255, 255));
}
body.utopia-site-lp-sales .utopia-lp-foot__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 32px 48px;
}
body.utopia-site-lp-sales .utopia-lp-foot__logo {
  width: auto;
  max-width: 200px;
  max-height: 40px;
}
body.utopia-site-lp-sales .utopia-lp-foot__logo-text {
  font-family: var(--utopia-lp-serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
}
body.utopia-site-lp-sales .utopia-lp-foot__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 36px;
}
body.utopia-site-lp-sales .utopia-lp-foot__list a {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.78);
  transition: color 0.3s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-foot__list a:hover {
  color: rgb(var(--utopia-lp-foot-fg-rgb, 255, 255, 255));
}
body.utopia-site-lp-sales .utopia-lp-foot__copy {
  grid-column: 1 / -1;
  padding: 32px 0 0;
  border-top: 1px solid rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.22);
  font-family: var(--utopia-lp-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.6);
}

/* ── LP footer = Corporate footer layout ────────────────────────────────
   Markup (inc/lp-sales-render.php) and layout come from the shared .site-footer rules
   (components.css), exactly as on Corporate. Only COLOURS and FONTS are the LP's own:
   background = LP "footer background", text = auto black/white from it, font = LP fonts. */
body.utopia-site-lp-sales .site-footer.utopia-lp-footer-corp {
  --utopia-footer-bg: var(--utopia-lp-foot-bg, #000);
  --utopia-lp-footer-fg: rgb(var(--utopia-lp-foot-fg-rgb, 255, 255, 255));
  --utopia-lp-footer-fg-soft: rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.78);
  --utopia-lp-footer-line: rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.22);
  color: var(--utopia-lp-footer-fg);
  font-family: inherit;
}
body.utopia-site-lp-sales .utopia-lp-footer-corp :is(.widget, .widget p, .widget li, .widget-title, .site-footer__widgets .widget a, .utopia-footer-cta__heading, .utopia-footer-cta__sub, .utopia-footer-cta__html) {
  color: var(--utopia-lp-footer-fg) !important;
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__widgets .widget a,
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__widgets .widget li,
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__widgets .widget p {
  color: var(--utopia-lp-footer-fg-soft) !important;
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__widgets .widget a:hover {
  color: var(--utopia-lp-footer-fg) !important;
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__widgets .widget-title {
  color: var(--utopia-lp-footer-fg) !important;
  border-bottom-color: var(--utopia-lp-footer-line);
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__bottom {
  border-top-color: var(--utopia-lp-footer-line);
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__copyright {
  color: rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.6);
  font-family: var(--utopia-lp-serif);
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .utopia-footer-menu li a {
  color: var(--utopia-lp-footer-fg-soft);
  border-right-color: var(--utopia-lp-footer-line);
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .utopia-footer-menu li a:hover,
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__sns-link:hover {
  color: var(--utopia-lp-footer-fg);
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .site-footer__sns-link {
  color: var(--utopia-lp-footer-fg-soft);
  background: rgba(var(--utopia-lp-foot-fg-rgb, 255, 255, 255), 0.1);
}
body.utopia-site-lp-sales .utopia-lp-footer-corp .utopia-footer-cta-button {
  color: var(--utopia-lp-foot-bg, #000);
  background: var(--utopia-lp-footer-fg);
}

/* ── Reveal on scroll (JS adds .is-reveal / .is-in) ─── */

body.utopia-site-lp-sales .utopia-lp-sales.is-reveal-ready [data-utopia-lp-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--utopia-lp-ease), transform 1s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-sales.is-reveal-ready [data-utopia-lp-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.utopia-site-lp-sales .utopia-lp-sales *,
  body.utopia-site-lp-sales .utopia-lp-sales *::before,
  body.utopia-site-lp-sales .utopia-lp-sales *::after {
    animation: none !important;
    transition: none !important;
  }
  body.utopia-site-lp-sales .utopia-lp-sales.is-reveal-ready [data-utopia-lp-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1080px) {
  body.utopia-site-lp-sales .utopia-lp-problem__grid,
  body.utopia-site-lp-sales .utopia-lp-solution__grid,
  body.utopia-site-lp-sales .utopia-lp-demo__grid {
    --utopia-lp-cols: 2 !important;
  }
  body.utopia-site-lp-sales .utopia-lp-voice__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  body.utopia-site-lp-sales .utopia-lp-nav__toggle {
    display: block;
  }
  body.utopia-site-lp-sales .utopia-lp-nav__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 32px 48px;
    background: var(--utopia-lp-g-navy);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--utopia-lp-ease), visibility 0.4s var(--utopia-lp-ease);
    overflow-y: auto;
  }
  body.utopia-site-lp-sales .utopia-lp-nav.is-open .utopia-lp-nav__menu {
    opacity: 1;
    visibility: visible;
  }
  body.utopia-site-lp-sales .utopia-lp-nav__list {
    flex-direction: column;
    gap: 28px;
    text-align: center;
  }
  body.utopia-site-lp-sales .utopia-lp-nav__list a {
    font-family: var(--utopia-lp-mincho);
    font-size: 20px;
    letter-spacing: 0.12em;
  }
  body.utopia-site-lp-sales .utopia-lp-nav__brand {
    position: relative;
    z-index: 2;
  }

  body.utopia-site-lp-sales .utopia-lp-split {
    grid-template-columns: minmax(0, 1fr);
  }
  body.utopia-site-lp-sales .utopia-lp-split__aside {
    position: static;
  }
  body.utopia-site-lp-sales .utopia-lp-company__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  body.utopia-site-lp-sales .utopia-lp-company__media {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 782px) {
  body.utopia-site-lp-sales.admin-bar .utopia-lp-nav {
    top: 46px;
  }
}
@media (max-width: 600px) {
  body.utopia-site-lp-sales.admin-bar .utopia-lp-nav {
    top: 0;
  }
  body.utopia-site-lp-sales.admin-bar .utopia-lp-nav.is-scrolled,
  body.utopia-site-lp-sales.admin-bar .utopia-lp-nav.is-open {
    top: 0;
  }
}

/* ==========================================================================
   Smartphone — single column, nothing overflows
   ========================================================================== */

@media (max-width: 767px) {
  body.utopia-site-lp-sales .utopia-lp-sales {
    font-size: 14px;
  }
  body.utopia-site-lp-sales .utopia-lp-wrap,
  body.utopia-site-lp-sales .utopia-lp-sec--rule::before {
    width: calc(100% - 40px);
  }
  body.utopia-site-lp-sales .utopia-lp-nav__inner {
    width: calc(100% - 40px);
    height: 72px;
  }
  body.utopia-site-lp-sales .utopia-lp-nav.is-scrolled .utopia-lp-nav__inner {
    height: 64px;
  }
  body.utopia-site-lp-sales .utopia-lp-nav__logo-text {
    font-size: 24px;
  }
  body.utopia-site-lp-sales .utopia-lp-nav__logo {
    max-width: 150px;
    max-height: 32px;
  }

  body.utopia-site-lp-sales .utopia-lp-hero {
    --utopia-lp-hero-nav-h: 72px;
  }
  body.utopia-site-lp-sales .utopia-lp-hero__title {
    font-size: clamp(34px, 10vw, 46px);
  }
  body.utopia-site-lp-sales .utopia-lp-hero__desc br {
    display: none;
  }
  body.utopia-site-lp-sales .utopia-lp-hero__actions .utopia-lp-btn {
    width: 100%;
  }
  body.utopia-site-lp-sales .utopia-lp-hero__scroll {
    right: 20px;
  }

  body.utopia-site-lp-sales .utopia-lp-title {
    font-size: clamp(23px, 6.6vw, 28px);
  }
  body.utopia-site-lp-sales .utopia-lp-lead br {
    display: none;
  }

  body.utopia-site-lp-sales .utopia-lp-grid,
  body.utopia-site-lp-sales .utopia-lp-problem__grid,
  body.utopia-site-lp-sales .utopia-lp-solution__grid,
  body.utopia-site-lp-sales .utopia-lp-demo__grid {
    --utopia-lp-cols: 1 !important;
    grid-template-columns: minmax(0, 1fr);
  }

  body.utopia-site-lp-sales .utopia-lp-problem__num {
    right: 4px;
    font-size: 72px;
  }
  body.utopia-site-lp-sales .utopia-lp-problem__body {
    padding: 24px 22px 30px;
  }

  body.utopia-site-lp-sales .utopia-lp-solution__item {
    padding: 32px 24px 36px;
  }
  body.utopia-site-lp-sales .utopia-lp-solution__num {
    margin-bottom: 18px;
    font-size: 44px;
  }

  body.utopia-site-lp-sales .utopia-lp-voice__card {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
  }
  body.utopia-site-lp-sales .utopia-lp-voice__media {
    flex-basis: auto;
    width: 120px;
  }

  body.utopia-site-lp-sales .utopia-lp-qa__q {
    gap: 14px;
    padding: 22px 0;
    font-size: 15px;
  }
  body.utopia-site-lp-sales .utopia-lp-qa__a {
    gap: 14px;
    padding: 0 0 24px;
  }

  body.utopia-site-lp-sales .utopia-lp-flow__list--column .utopia-lp-flow__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.utopia-site-lp-sales .utopia-lp-company__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  body.utopia-site-lp-sales .utopia-lp-box {
    padding: 48px 22px;
  }
  body.utopia-site-lp-sales .utopia-lp-cta__actions .utopia-lp-btn {
    width: 100%;
    min-width: 0;
  }

  body.utopia-site-lp-sales .utopia-lp-news__link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    padding: 20px 0;
  }
  body.utopia-site-lp-sales .utopia-lp-news__cat {
    justify-self: start;
  }
  body.utopia-site-lp-sales .utopia-lp-news__title {
    grid-column: 1 / -1;
  }
  body.utopia-site-lp-sales .utopia-lp-news__link:hover {
    padding-left: 0;
  }

  body.utopia-site-lp-sales .utopia-lp-foot {
    padding: 56px 0 36px;
  }
  body.utopia-site-lp-sales .utopia-lp-foot__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  body.utopia-site-lp-sales .utopia-lp-foot__list {
    justify-content: flex-start;
    gap: 12px 24px;
  }
}

/* Natural Japanese line breaks for headings */
body.utopia-site-lp-sales :is(.utopia-lp-hero__sub, .utopia-lp-problem__title, .utopia-lp-solution__title, .utopia-lp-voice__title, .utopia-lp-flow__title, .utopia-lp-qa__q, .utopia-lp-news__title) {
  word-break: auto-phrase;
}

/* ==========================================================================
   LP hero (main visual) — smartphone (700px and below)
   Order: text → button → image. Triangles: 01 / 03 / 05 / 06 / 07 only,
   kept on the edges (not on the text center).
   ========================================================================== */

@media (max-width: 700px) {
  body.utopia-site-lp-sales .utopia-lp-hero {
    height: auto;
    min-height: 0;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-inner {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-content {
    height: auto;
    padding: 44px 20px 0;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image {
    height: auto;
    padding: 32px 20px 88px;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image-png {
    max-height: 420px;
  }
  body.utopia-site-lp-sales .utopia-lp-hero--no-image .utopia-lp-hero-content {
    padding-bottom: 96px;
  }

  body.utopia-site-lp-sales .utopia-lp-hero .triangle-02,
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-04,
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-08,
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-09,
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-10 {
    display: none;
  }
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-01 {
    top: -3%;
    left: -16%;
    right: auto;
    bottom: auto;
    border-left-width: 74px;
    border-right-width: 74px;
    border-bottom-width: 170px;
    transform: rotate(-21deg) scale(1.04);
  }
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-05 {
    top: -4%;
    left: auto;
    right: 4%;
    bottom: auto;
    border-left-width: 70px;
    border-right-width: 70px;
    border-bottom-width: 140px;
    transform: rotate(22deg) scale(1.01);
  }
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-06 {
    top: 40%;
    left: auto;
    right: -18%;
    bottom: auto;
    border-left-width: 80px;
    border-right-width: 80px;
    border-bottom-width: 180px;
    transform: rotate(-27deg) scale(1.01);
  }
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-03 {
    top: auto;
    left: -14%;
    right: auto;
    bottom: -2%;
    border-left-width: 96px;
    border-right-width: 96px;
    border-bottom-width: 136px;
    transform: rotate(11deg) scale(1.02);
  }
  body.utopia-site-lp-sales .utopia-lp-hero .triangle-07 {
    top: auto;
    left: auto;
    right: -6%;
    bottom: -4%;
    border-left-width: 90px;
    border-right-width: 90px;
    border-bottom-width: 134px;
    transform: rotate(35deg) scale(0.89);
  }
}

/* ==========================================================================
   PROBLEM / SOLUTION — title & description use the full section width
   ========================================================================== */

body.utopia-site-lp-sales :is(.utopia-lp-problem, .utopia-lp-solution, .utopia-lp-voice, .utopia-lp-demo) .utopia-lp-head {
  max-width: none; /* centered like PRICE, using the full section width */
}

/* ==========================================================================
   FLOW — never fewer columns than selected
   The selected column count (data-cols) is kept while every column can be at
   least 190px wide; below that the list becomes a vertical timeline
   (line + square points). Uses the section width (container query).
   ========================================================================== */

body.utopia-site-lp-sales .utopia-lp-flow > .utopia-lp-wrap {
  container-type: inline-size;
  container-name: utopia-lp-flow;
}

/* Vertical timeline below the threshold of the selected column count. */
@container utopia-lp-flow (max-width: 379px) {
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="2"] { display: block; border-top: 0; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="2"] .utopia-lp-flow__step { padding: 0 0 44px 40px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="2"] .utopia-lp-flow__step::before { top: 20px; width: 9px; height: 9px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="2"] .utopia-lp-flow__step:not(:last-child)::after { content: ""; }
}
@container utopia-lp-flow (max-width: 569px) {
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="3"] { display: block; border-top: 0; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="3"] .utopia-lp-flow__step { padding: 0 0 44px 40px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="3"] .utopia-lp-flow__step::before { top: 20px; width: 9px; height: 9px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="3"] .utopia-lp-flow__step:not(:last-child)::after { content: ""; }
}
@container utopia-lp-flow (max-width: 759px) {
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="4"] { display: block; border-top: 0; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="4"] .utopia-lp-flow__step { padding: 0 0 44px 40px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="4"] .utopia-lp-flow__step::before { top: 20px; width: 9px; height: 9px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="4"] .utopia-lp-flow__step:not(:last-child)::after { content: ""; }
}
@container utopia-lp-flow (max-width: 949px) {
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="5"] { display: block; border-top: 0; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="5"] .utopia-lp-flow__step { padding: 0 0 44px 40px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="5"] .utopia-lp-flow__step::before { top: 20px; width: 9px; height: 9px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="5"] .utopia-lp-flow__step:not(:last-child)::after { content: ""; }
}
@container utopia-lp-flow (max-width: 1139px) {
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="6"] { display: block; border-top: 0; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="6"] .utopia-lp-flow__step { padding: 0 0 44px 40px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="6"] .utopia-lp-flow__step::before { top: 20px; width: 9px; height: 9px; }
  body.utopia-site-lp-sales .utopia-lp-flow__list--row[data-cols="6"] .utopia-lp-flow__step:not(:last-child)::after { content: ""; }
}
/* Timeline line: from just below a square to just above the next square. */
body.utopia-site-lp-sales .utopia-lp-flow__list--row .utopia-lp-flow__step::after {
  position: absolute;
  left: 4px;
  top: 35px;
  bottom: -14px;
  width: 1px;
  background: var(--utopia-lp-navy);
}
body.utopia-site-lp-sales .utopia-lp-flow__list--row .utopia-lp-flow__step:last-child {
  padding-bottom: 8px;
}

/* ==========================================================================
   Front page body (固定ページ本文)
   ========================================================================== */

body.utopia-site-lp-sales .utopia-lp-content__body {
  max-width: 880px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2;
  color: var(--utopia-lp-ink);
  overflow-wrap: anywhere;
}
body.utopia-site-lp-sales .utopia-lp-content__body > :first-child {
  margin-top: 0;
}
body.utopia-site-lp-sales .utopia-lp-content__body > :last-child {
  margin-bottom: 0;
}
body.utopia-site-lp-sales .utopia-lp-content__body :is(p, ul, ol, figure, blockquote, table) {
  margin: 0 0 1.4em;
}
body.utopia-site-lp-sales .utopia-lp-content__body :is(ul, ol) {
  padding-left: 1.4em;
  list-style: revert;
}
body.utopia-site-lp-sales .utopia-lp-content__body :is(h2, h3, h4) {
  margin: 1.8em 0 0.8em;
  font-family: var(--utopia-lp-heading-font);
  font-weight: 500;
  line-height: 1.6;
  color: var(--utopia-lp-black);
}
body.utopia-site-lp-sales .utopia-lp-content__body h2 { font-size: clamp(22px, 2.4vw, 30px); }
body.utopia-site-lp-sales .utopia-lp-content__body h3 { font-size: clamp(19px, 2vw, 24px); }
body.utopia-site-lp-sales .utopia-lp-content__body a {
  color: var(--utopia-lp-navy-ink);
  text-decoration: underline;
}
body.utopia-site-lp-sales .utopia-lp-content__body img {
  height: auto;
}

/* ==========================================================================
   Section background color (Customizer) — text switches to black / white
   ========================================================================== */

body.utopia-site-lp-sales .utopia-lp-sec.has-custom-bg,
body.utopia-site-lp-sales .utopia-lp-hero.has-custom-bg {
  background-color: var(--utopia-lp-sec-bg-custom);
}
body.utopia-site-lp-sales .utopia-lp-sec.has-custom-bg:not(.has-image) {
  background-image: none;
}
/* Dark background → white text (titles, descriptions, lists, lines). */
body.utopia-site-lp-sales .has-custom-bg.is-bg-dark {
  --utopia-lp-black: #ffffff;
  --utopia-lp-ink: rgba(255, 255, 255, 0.92);
  --utopia-lp-ink-soft: rgba(255, 255, 255, 0.76);
  --utopia-lp-rule: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}
/* Light background → black text. */
body.utopia-site-lp-sales .has-custom-bg.is-bg-light {
  color: rgba(0, 0, 0, 0.86);
}
/* White cards / boxes inside a colored section keep their own (default) colors. */
body.utopia-site-lp-sales :where(.has-custom-bg) :where(.utopia-lp-problem__card, .utopia-lp-voice__card, .utopia-lp-box) {
  --utopia-lp-black: #000000;
  --utopia-lp-ink: rgba(0, 0, 0, 0.86);
  --utopia-lp-ink-soft: rgba(0, 0, 0, 0.62);
  --utopia-lp-rule: rgba(0, 0, 0, 0.12);
  --utopia-lp-navy: var(--utopia-lp-g-navy);
  --utopia-lp-navy-rgb: var(--utopia-lp-g-navy-rgb);
  --utopia-lp-on-navy: var(--utopia-lp-g-on-navy);
  --utopia-lp-on-navy-rgb: var(--utopia-lp-g-on-navy-rgb);
  --utopia-lp-navy-ink: var(--utopia-lp-g-navy-ink);
  color: rgba(0, 0, 0, 0.86);
}

/* <br> typed in the Customizer always breaks the line (phones hide automatic line breaks). */
body.utopia-site-lp-sales br.utopia-lp-br {
  display: inline !important;
}

/* ==========================================================================
   Main visual image — 表示方法 (Customizer: 横幅に合わせる / 縦幅に合わせる)
   The image box is the right column (PC: header bottom → hero bottom, to the
   screen edge). Overflow is clipped by the box; PNG transparency is kept.
   ========================================================================== */

body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image {
  overflow: hidden;
}
body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image-png {
  flex: none;
  object-fit: fill;
}
/* 横幅に合わせる */
body.utopia-site-lp-sales .utopia-lp-hero--fit-width .utopia-lp-hero-image-png {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
/* 縦幅に合わせる */
body.utopia-site-lp-sales .utopia-lp-hero--fit-height .utopia-lp-hero-image-png {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
/* Tablet: the image box fills the right grid cell. */
@media (min-width: 701px) and (max-width: 1080px) {
  body.utopia-site-lp-sales .utopia-lp-hero .utopia-lp-hero-image {
    align-self: stretch;
    height: auto;
    min-height: 0;
  }
  /* 縦幅に合わせる needs a definite box height (= the 2-column area below the header). */
  body.utopia-site-lp-sales .utopia-lp-hero--fit-height .utopia-lp-hero-image {
    align-self: center;
    height: calc(676px - var(--utopia-lp-hero-nav-h));
  }
}
/* Smartphone: 横幅 = full width / natural height; 縦幅 = fixed-height box. */
@media (max-width: 700px) {
  body.utopia-site-lp-sales .utopia-lp-hero--fit-height .utopia-lp-hero-image {
    height: min(80vw, 420px);
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 88px;
  }
}

/* ==========================================================================
   Inner pages (posts / pages / archives / search / 404) — same chrome as the
   LP front page; the body is each page's own content.
   ========================================================================== */

body.utopia-site-lp-sales .utopia-lp-inner__article,
body.utopia-site-lp-sales .utopia-lp-inner__archive {
  padding-top: calc(96px + clamp(56px, 7vw, 104px));
  padding-bottom: var(--utopia-lp-pad);
}
/* Pages / posts: space above the title = 1/3 of the former value; space below the title = same value. */
body.utopia-site-lp-sales .utopia-lp-inner__article {
  --utopia-lp-inner-title-gap: calc(clamp(56px, 7vw, 104px) / 3);
  padding-top: calc(96px + var(--utopia-lp-inner-title-gap));
}
body.utopia-site-lp-sales .utopia-lp-inner__head {
  max-width: 880px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
body.utopia-site-lp-sales .utopia-lp-inner__article .utopia-lp-inner__head {
  margin-bottom: calc(var(--utopia-lp-inner-title-gap) * 2);
}
/* H1: same font as the content H2, one weight step heavier (H2 = 500, H1 = 600). */
body.utopia-site-lp-sales .utopia-lp-inner__title {
  overflow-wrap: anywhere;
  font-family: var(--utopia-lp-heading-font);
  font-weight: 600;
}
body.utopia-site-lp-sales .utopia-lp-inner__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 24px 0 0;
}
body.utopia-site-lp-sales .utopia-lp-inner__meta .utopia-lp-news__cat:hover {
  opacity: 0.8;
}
body.utopia-site-lp-sales .utopia-lp-inner__thumb {
  max-width: 880px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
body.utopia-site-lp-sales .utopia-lp-inner__thumb img {
  width: 100%;
  height: auto;
}
body.utopia-site-lp-sales .utopia-lp-inner__content h2 {
  position: relative;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-inner__content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 48px;
  height: 1px;
  background: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-inner__content h3 {
  padding-left: 0.8em;
  border-left: 2px solid var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-inner__content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0.4em 0 0.4em 1.2em;
  border-left: 2px solid var(--utopia-lp-navy-ink);
  color: var(--utopia-lp-ink-soft);
}
body.utopia-site-lp-sales .utopia-lp-inner__content table {
  width: 100%;
  border-collapse: collapse;
}
body.utopia-site-lp-sales .utopia-lp-inner__content :is(th, td) {
  padding: 12px 14px;
  border: 1px solid var(--utopia-lp-rule);
  text-align: left;
  vertical-align: top;
}
body.utopia-site-lp-sales .utopia-lp-inner__content th {
  background: rgba(var(--utopia-lp-navy-rgb), 0.06);
  font-weight: 600;
}
body.utopia-site-lp-sales .utopia-lp-inner__content :is(.wp-block-button__link, .wp-element-button) {
  border-radius: 0;
  background: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
  text-decoration: none;
}
body.utopia-site-lp-sales .utopia-lp-inner__list {
  max-width: 880px;
  margin: 0 auto;
}
body.utopia-site-lp-sales .utopia-lp-inner__pager {
  margin: clamp(40px, 5vw, 64px) 0 0;
}
body.utopia-site-lp-sales .utopia-lp-inner__pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body.utopia-site-lp-sales .utopia-lp-inner__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--utopia-lp-rule);
  font-family: var(--utopia-lp-serif);
  font-size: 16px;
  color: var(--utopia-lp-ink);
  transition: background-color 0.3s var(--utopia-lp-ease), color 0.3s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-inner__pager .page-numbers.current,
body.utopia-site-lp-sales .utopia-lp-inner__pager a.page-numbers:hover {
  border-color: var(--utopia-lp-navy);
  background: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
}
body.utopia-site-lp-sales .utopia-lp-inner__pager .page-numbers.dots {
  border-color: transparent;
}
body.utopia-site-lp-sales .utopia-lp-inner__postnav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--utopia-lp-rule);
}
body.utopia-site-lp-sales .utopia-lp-inner__postnav-next {
  text-align: right;
}
body.utopia-site-lp-sales .utopia-lp-inner__postnav a {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
}
body.utopia-site-lp-sales .utopia-lp-inner__postnav a:hover .utopia-lp-inner__postnav-title {
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-inner__postnav-label {
  font-family: var(--utopia-lp-serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.2em;
  color: var(--utopia-lp-navy-ink);
}
body.utopia-site-lp-sales .utopia-lp-inner__postnav-title {
  font-size: 14px;
  line-height: 1.7;
  color: var(--utopia-lp-ink);
  overflow-wrap: anywhere;
  transition: color 0.3s var(--utopia-lp-ease);
}
body.utopia-site-lp-sales .utopia-lp-inner__pages {
  margin-top: 2em;
}
body.utopia-site-lp-sales .utopia-lp-inner__comments {
  max-width: 880px;
  margin: clamp(48px, 6vw, 80px) auto 0;
}
body.utopia-site-lp-sales .utopia-lp-inner__comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--utopia-lp-rule);
  background: var(--utopia-lp-white);
  font: inherit;
}
body.utopia-site-lp-sales .utopia-lp-inner__comments :is(input[type="submit"], button[type="submit"]),
body.utopia-site-lp-sales .utopia-lp-inner__content :is(.search-submit, .wp-block-search__button) {
  padding: 12px 28px;
  border: 0;
  background: var(--utopia-lp-navy);
  color: var(--utopia-lp-on-navy);
  font: inherit;
  cursor: pointer;
}

@media (max-width: 767px) {
  body.utopia-site-lp-sales .utopia-lp-inner__article,
  body.utopia-site-lp-sales .utopia-lp-inner__archive {
    padding-top: calc(72px + 48px);
  }
  body.utopia-site-lp-sales .utopia-lp-inner__article {
    --utopia-lp-inner-title-gap: calc(48px / 3);
    padding-top: calc(72px + var(--utopia-lp-inner-title-gap));
  }
  body.utopia-site-lp-sales .utopia-lp-inner__postnav {
    grid-template-columns: minmax(0, 1fr);
  }
  body.utopia-site-lp-sales .utopia-lp-inner__postnav-next {
    text-align: left;
  }
}

/* ==========================================================================
   Inner pages — wide content (marketing / landing pages such as siteworks,
   free trial, purchase). Same LP chrome, wider column for rich page markup.
   ========================================================================== */
body.utopia-site-lp-sales .utopia-lp-inner__content--wide {
  max-width: 1200px;
  line-height: 1.8;
  overflow-wrap: normal;
}
body.utopia-site-lp-sales .utopia-lp-inner__content--wide :is(.page-content, .page-content article, .page-content .entry-content) {
  max-width: none !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

/* ==========================================================================
   Inner pages (posts / pages / archives): site width from the Customizer
   (「コンテンツ幅」→ --utopia-lp-inner-w, default 90%; 100% = no side margins).
   ========================================================================== */
body.utopia-site-lp-sales .utopia-lp-inner .utopia-lp-inner__wrap {
  width: var(--utopia-lp-inner-w, 90%);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
body.utopia-site-lp-sales .utopia-lp-inner :is(.utopia-lp-content__body, .utopia-lp-inner__head, .utopia-lp-inner__thumb, .utopia-lp-inner__list, .utopia-lp-inner__postnav, .utopia-lp-inner__comments, .utopia-lp-inner__content--wide) {
  max-width: none;
}

/* H2 in page / post content: space above × 1.5 (1.8em → 2.7em). Space below and other headings unchanged. */
body.utopia-site-lp-sales .utopia-lp-content__body h2 {
  margin-top: 2.7em;
}

/* Section buttons: 料金（PRICE）under the cards / FAQ under the heading (inc/lp-sales-render.php) */
body.utopia-site-lp-sales .utopia-lp-sec-btns {
  display: grid;
  grid-template-columns: repeat(var(--utopia-lp-btn-n, 1), minmax(0, 1fr));
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.utopia-site-lp-sales .utopia-lp-sec-btns__btn {
  width: 100%;
  min-width: 240px;
}
body.utopia-site-lp-sales .utopia-lp-price__btns {
  margin-top: clamp(40px, 5vw, 64px);
}
body.utopia-site-lp-sales .utopia-lp-qa__btns {
  margin-top: 0;
}
@media (max-width: 700px) {
  body.utopia-site-lp-sales .utopia-lp-sec-btns {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  body.utopia-site-lp-sales .utopia-lp-sec-btns__btn {
    min-width: 0;
  }
  body.utopia-site-lp-sales .utopia-lp-qa__btns {
    margin-bottom: 8px;
  }
}

/* Front page: body content section (固定ページの本文) starts without top padding / margin. */
body.utopia-site-lp-sales .utopia-lp-sec.utopia-lp-content {
  margin-top: 0;
  padding-top: 0;
}