/* ==========================================================================
   Proposal Experience — /proposal/{slug}/, /proposal/, /service/{slug}/, G-macross
   Chapters sit on the 1920 grid from 1024px (N × --u, --u = chapter width / 1920), so the page and
   PRESENTATION MODE (a 16:9 chapter) are the same layout at different scales.
   Mock screens use their own unit --s (= screen width / 400): never --u inside a .mock.
   Brand: orange only for attention / selection / operation / progress / change.
   ========================================================================== */

/* ---------- reveal (assets/js/proposal/reveal.js) ---------- */

[data-pp-reveal] {
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}

.motion:not(.pp-failed) [data-pp-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}

.pp-reset [data-pp-reveal] { transition: none !important; }

/* ---------- chapter ---------- */

.pp-chapter {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-ink);
}

.pp-chapter--ground { background: var(--color-ground); }

.pp-chapter--navy,
.pp-chapter--dark {
  --focus: var(--color-white);
  background: var(--color-navy-deep);
  color: var(--color-white);
}

.pp-chapter__stage {
  --u: calc(100cqw / 1920);
  position: relative;
  z-index: 1;
  display: grid;
  gap: 36px;
  padding: 88px var(--gutter) 96px;
}

.pp-chapter__word {
  position: absolute;
  right: 2cqw;
  bottom: -2.6cqw;
  z-index: 0;
  font-family: var(--font-en);
  font-size: 13cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: rgba(7, 28, 44, .035);
  pointer-events: none;
}

:is(.pp-chapter--navy, .pp-chapter--dark) .pp-chapter__word { color: rgba(255, 255, 255, .035); }

.pp-body { position: relative; min-width: 0; }

/* ---------- chapter head ---------- */

.pp-head__index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-family: var(--font-en);
}

.pp-head__num {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-brand);
}

.pp-head__total { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--color-muted); }

.pp-head__line {
  align-self: center;
  width: 40px;
  height: 2px;
  background: var(--color-brand);
}

.pp-head__en { font-size: 12px; font-weight: 700; letter-spacing: .3em; }

.pp-head__ja { font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; color: var(--color-muted); }

.pp-head__title {
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: clamp(27px, 7.2vw, 40px);
  font-weight: 600;
  font-feature-settings: "palt";
  line-height: 1.45;
  letter-spacing: .03em;
  color: var(--color-hero-ink);
}

.pp-line { display: block; }

.pp-head__lead {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em;
  color: var(--color-text);
}

:is(.pp-chapter--navy, .pp-chapter--dark) .pp-head__title { color: var(--color-white); }
:is(.pp-chapter--navy, .pp-chapter--dark) .pp-head__lead { color: rgba(255, 255, 255, .82); }
:is(.pp-chapter--navy, .pp-chapter--dark) :is(.pp-head__total, .pp-head__ja) { color: rgba(255, 255, 255, .62); }

/* ---------- shared atoms ---------- */

.pp-source,
.pp-note {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--color-muted);
}

:is(.pp-chapter--navy, .pp-chapter--dark, .section--navy, .pp-hero) :is(.pp-source, .pp-note) { color: rgba(255, 255, 255, .62); }

.pp-figure,
.pp-stat__figure {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-serif);
  line-height: 1;
  color: var(--color-brand);
}

:is(.pp-figure, .pp-stat__figure) > span:first-child:not([data-count]) { /* prefix */
  margin-right: .08em;
  font-family: var(--font-sans);
  font-size: .38em;
  font-weight: 700;
}

.pp-figure__value,
.pp-stat__figure__value {
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.pp-figure__unit,
.pp-stat__figure__unit {
  margin-left: .06em;
  font-family: var(--font-sans);
  font-size: .36em;
  font-weight: 700;
}

.pp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.pp-tags li {
  padding: 4px 10px;
  border: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .06em;
}

:is(.pp-chapter--navy, .pp-chapter--dark) .pp-tags li,
.pp-tags--light li { border-color: rgba(255, 255, 255, .3); }

.pp-search-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
}

.pp-search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: var(--color-brand);
  transform: rotate(45deg);
}

.pp-present-icon {
  position: relative;
  display: inline-block;
  flex: none;
  width: 18px;
  height: 12px;
  border: 1.5px solid currentColor;
}

.pp-present-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid var(--color-brand);
  transform: translate(-40%, -50%);
}

/* The flow of a product (hero, service page): the current phase is orange. */
.pp-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 0;
  margin-top: 28px;
}

.pp-flow__step {
  position: relative;
  display: grid;
  gap: 2px;
  padding-right: 34px;
}

.pp-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: .4;
}

.pp-flow__step::before {
  content: "";
  position: absolute;
  right: 34px;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-large) var(--ease-out);
}

.pp-flow__step.is-current::before { transform: scaleX(1); }

.pp-flow__en {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  transition: color var(--dur-normal) var(--ease-out);
}

.pp-flow__ja { font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; opacity: .72; }

.pp-flow__step.is-current .pp-flow__en { color: var(--color-brand); }

.pp-flow--light .pp-flow__step.is-current .pp-flow__en { color: var(--color-brand-text); }

/* ---------- ProposalHero ---------- */

.pp-hero {
  --focus: var(--color-white);
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: var(--color-navy-deep);
  color: var(--color-white);
}

.pp-hero__stage {
  --u: calc(100cqw / 1920);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--adminbar-h) + 20px) var(--gutter) 48px;
}

.pp-hero__breadcrumb { position: relative; z-index: 2; }

.pp-hero__breadcrumb ol { color: rgba(255, 255, 255, .7); }

.pp-hero__breadcrumb [aria-current="page"] { color: var(--color-white); }

.pp-hero__brush {
  position: absolute;
  right: -40%;
  bottom: 12%;
  width: 130%;
  aspect-ratio: 1200 / 675;
  background: url("../../art/brush-strokes-1200.webp") center / cover no-repeat;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.pp-hero__name {
  position: absolute;
  top: 16%;
  right: -2cqw;
  font-family: var(--font-en);
  font-size: 26cqw;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}

.pp-hero__copy { position: relative; z-index: 2; margin-top: 32px; }

.pp-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
}

.pp-hero__eyebrow span:last-child { font-family: var(--font-sans); letter-spacing: .12em; color: rgba(255, 255, 255, .78); }

.pp-hero__eyebrow-line { width: 36px; height: 2px; background: var(--color-brand); }

.pp-hero__title {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 8.6vw, 52px);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: .02em;
}

.pp-hero__lead {
  max-width: 38em;
  margin-top: 20px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .86);
}

.pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
  margin-top: 32px;
}

.pp-hero__present { display: none; }

.pp-toc { position: relative; z-index: 2; margin-top: auto; padding-top: 48px; }

.pp-toc__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 12px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.pp-toc__link {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 0;
}

.pp-toc__link::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-normal) var(--ease-out);
}

.pp-toc__num { font-family: var(--font-serif); font-size: 15px; color: var(--color-brand); }

.pp-toc__en { font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .2em; }

.pp-toc__ja { display: none; }

@media (hover: hover) {
  .pp-toc__link:hover::before { transform: scaleX(1); }
}

.pp-toc__link:focus-visible::before { transform: scaleX(1); }

/* ---------- 01 ProblemStory ---------- */

.pp-problem__list { display: grid; gap: 28px; }

.pp-problem__item {
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--color-ink);
}

/* An orange line is drawn on the rule as the item appears. */
.pp-problem__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-out) calc(var(--d, 0) * 70ms + 200ms);
}

.pp-problem__item.is-in::before,
.pp-failed .pp-problem__item::before,
html:not(.motion) .pp-problem__item::before { transform: scaleX(1); }

.pp-problem__num { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--color-muted); }

.pp-problem__figure { display: grid; gap: 6px; margin-top: 10px; }

.pp-problem__figure .pp-figure { font-size: 48px; }

.pp-problem__figure-label { font-family: var(--font-sans); font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--color-muted); }

.pp-problem__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-hero-ink);
}

.pp-problem__text { margin-top: 8px; font-size: 14px; line-height: 1.95; color: var(--color-text); }

/* ---------- 02 MarketChange ---------- */

.pp-market { display: grid; gap: 36px; }

.pp-market__caption {
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .72);
}

.pp-gap { display: grid; gap: 16px; }

.pp-gap__row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
}

.pp-gap__bar {
  position: relative;
  display: flex;
  height: 18px;
  background: rgba(255, 255, 255, .08);
}

.pp-gap__fill {
  display: block;
  flex: none;
  width: 100%;
  background: rgba(255, 255, 255, .86);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out);
}

.pp-gap__row--supply .pp-gap__fill { width: calc(var(--ratio) * 100%); }

.pp-gap__missing {
  display: block;
  flex: 1;
  background: repeating-linear-gradient(135deg, var(--color-brand) 0 4px, transparent 4px 8px);
  transition: opacity .6s .9s;
}

.pp-gap__value { font-family: var(--font-en); font-weight: 600; white-space: nowrap; }

.pp-gap__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 10px; }

.pp-gap__result-value { font-family: var(--font-serif); font-size: 52px; line-height: 1; color: var(--color-brand); }

.pp-gap__result-label { font-size: 15px; font-weight: 600; }

.pp-ready [data-meter]:not(.is-active) .pp-gap__fill { transform: scaleX(0); }
.pp-ready [data-meter]:not(.is-active) .pp-gap__missing { opacity: 0; }

.pp-longtail__chart { display: block; width: 100%; height: 180px; }

.pp-longtail__area { fill: rgba(255, 255, 255, .07); }

.pp-longtail__line { fill: none; stroke: rgba(255, 255, 255, .82); stroke-width: 2; vector-effect: non-scaling-stroke; }

.pp-longtail__split { stroke: rgba(255, 255, 255, .22); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }

.pp-longtail__layers { display: grid; grid-template-columns: 18fr 32fr 50fr; }

.pp-longtail__layer {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 8px 0 0;
  border-top: 2px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .66);
  text-align: left;
  transition: border-color var(--dur-normal) ease, color var(--dur-normal) ease;
}

.pp-longtail__layer[aria-pressed="true"] { border-top-color: var(--color-brand); color: var(--color-white); }

.pp-longtail__en { font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .2em; }

.pp-longtail__label { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; }

.pp-longtail__query {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .32);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}

.pp-bars__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 16px;
  height: 260px;
}

.pp-bars__item {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100%;
}

.pp-bars__value { font-family: var(--font-serif); font-size: 30px; line-height: 1; }

.pp-bars__value small { margin-left: 4px; font-family: var(--font-sans); font-size: 12px; }

.pp-bars__bar {
  align-self: end;
  display: block;
  height: calc(var(--h) * 100%);
  margin-top: 10px;
  background: rgba(255, 255, 255, .86);
  transform-origin: 50% 100%;
  transition: transform 1.1s var(--ease-out);
}

.pp-bars__item:last-child .pp-bars__bar { background: var(--color-brand); }

.pp-bars__label { margin-top: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; }

/* Two lines reserved so a longer note never lifts its bar out of line with the others. */
.pp-bars__note { min-height: 3.4em; font-family: var(--font-sans); font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, .66); }

.pp-ready [data-meter]:not(.is-active) .pp-bars__bar { transform: scaleY(0); }

.pp-market__stats { display: grid; gap: 22px; }

.pp-stat { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .26); }

.pp-stat__figure { font-size: 44px; }

.pp-stat__label { margin-top: 8px; font-family: var(--font-sans); font-size: 13px; line-height: 1.7; }

.pp-stat__note { margin-top: 4px; font-family: var(--font-sans); font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .66); }

/* ---------- 03 BeforeAfter ---------- */

.pp-change__switch { margin-bottom: 26px; }

.pp-change__toggle {
  --track: 56px;
  --knob: 14px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  text-align: left;
  cursor: pointer;
}

.pp-change__side { display: grid; gap: 2px; transition: opacity var(--dur-normal) ease; }

.pp-change__side-en { font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .24em; }

.pp-change__side-ja { font-family: var(--font-sans); font-size: 11px; color: var(--color-muted); }

.pp-change__track { position: relative; width: var(--track); height: 2px; background: var(--color-line); transition: background-color var(--dur-normal) ease; }

.pp-change__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: var(--color-hero-ink);
  transform: translate(0, -50%);
  transition: transform var(--dur-large) var(--ease-out), background-color var(--dur-normal) ease;
}

.pp-change__toggle[aria-pressed="true"] .pp-change__track { background: var(--color-brand); }

.pp-change__toggle[aria-pressed="true"] .pp-change__knob { background: var(--color-brand); transform: translate(calc(var(--track) - var(--knob)), -50%); }

.pp-change__toggle[aria-pressed="false"] .pp-change__side--after,
.pp-change__toggle[aria-pressed="true"] .pp-change__side--before { opacity: .45; }

.pp-change__labels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-ink);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--color-muted);
}

.pp-change__labels span:last-child { grid-column: 3; }

.pp-change__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr);
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}

.pp-change__before {
  position: relative;
  justify-self: start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  transition: color .5s ease;
}

.pp-change__before::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease-out) calc(var(--i, 0) * 120ms);
}

.pp-change__arrow {
  position: relative;
  justify-self: center;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transition: background-color .4s ease, opacity .4s ease;
}

.pp-change__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.pp-change__after {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-hero-ink);
  transition: opacity .6s ease calc(var(--i, 0) * 120ms + 200ms), transform .6s var(--ease-out) calc(var(--i, 0) * 120ms + 200ms);
}

.pp-ready .pp-change:not(.is-after) .pp-change__after { opacity: .2; transform: translateX(-8px); }

.pp-change.is-after .pp-change__before { color: var(--color-muted); }

.pp-change.is-after .pp-change__before::after { transform: scaleX(1); }

.pp-change.is-after .pp-change__arrow { color: var(--color-brand); background: var(--color-brand); opacity: 1; }

.pp-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 13px;
}

.pp-matrix :is(th, td) {
  padding: 11px 8px;
  border-bottom: 1px solid var(--color-line);
  text-align: center;
  vertical-align: middle;
}

.pp-matrix thead th { border-bottom: 1px solid var(--color-ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; }

.pp-matrix thead .pp-matrix__after { color: var(--color-brand-text); box-shadow: inset 0 -3px 0 var(--color-brand); }

.pp-matrix tbody th { font-weight: 500; text-align: left; }

.pp-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  font-size: 16px;
  line-height: 1;
}

.pp-mark--partial { color: var(--color-muted); }

.pp-mark--strong::before {
  content: "";
  width: .36em;
  height: .72em;
  margin-top: -.18em;
  border-right: .16em solid var(--color-brand);
  border-bottom: .16em solid var(--color-brand);
  transform: rotate(45deg);
  transition: transform .5s var(--ease-out) calc(var(--d, 0) * 60ms);
}

.pp-ready .pp-change:not(.is-after) .pp-mark--strong::before { transform: rotate(45deg) scale(0); }

.pp-ready .pp-change:not(.is-after) .pp-matrix__after .pp-mark--strong + .visually-hidden + * { display: none; }

.pp-change.is-after .pp-matrix__row.is-diff th { font-weight: 700; color: var(--color-hero-ink); }

/* ---------- 04 SolutionConcept ---------- */

.pp-solution { display: grid; gap: 34px; }

.pp-diagram { display: grid; }

.pp-diagram__node {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 0 16px 28px;
  border-left: 1px solid var(--color-line);
}

.pp-diagram__node::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-hero-ink);
  transition: background-color var(--dur-normal) ease;
}

/* The connection line is drawn in orange up to the current node. */
.pp-diagram__node::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--color-brand);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-large) var(--ease-out);
}

.pp-diagram__node:is(.is-current, .is-passed)::before { background: var(--color-brand); }
.pp-diagram__node:is(.is-current, .is-passed)::after { transform: scaleY(1); }

.pp-diagram__en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--color-muted); transition: color var(--dur-normal) ease; }

.pp-diagram__node.is-current .pp-diagram__en { color: var(--color-brand-text); }

.pp-diagram__title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--color-hero-ink); }

.pp-diagram__text { font-size: 13px; line-height: 1.8; color: var(--color-text); }

.pp-pillars { display: grid; gap: 18px; }

.pp-pillar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--color-ink);
}

.pp-pillar__num { grid-row: span 2; font-family: var(--font-serif); font-size: 22px; line-height: 1; color: var(--color-brand); }

.pp-pillar__title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--color-hero-ink); }

.pp-pillar__text { margin-top: 4px; font-size: 13px; line-height: 1.8; color: var(--color-text); }

/* ---------- 05 ProcessFlow ---------- */

.pp-process { display: grid; gap: 24px; }

.pp-process__tabs {
  position: relative;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-line);
  scrollbar-width: none;
}

.pp-process__tab {
  position: relative;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 10px 18px 14px 0;
  color: var(--color-muted);
  text-align: left;
  transition: color var(--dur-normal) ease;
}

.pp-process__tab::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-normal) var(--ease-out);
}

.pp-process__tab[aria-selected="true"] { color: var(--color-hero-ink); }
.pp-process__tab[aria-selected="true"]::after { transform: scaleX(1); }
.pp-process__tab[aria-selected="true"] .pp-process__tab-num { color: var(--color-brand-text); }

.pp-process__tab-num { grid-row: span 2; font-family: var(--font-serif); font-size: 15px; }

.pp-process__tab-en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .2em; white-space: nowrap; }

.pp-process__tab-ja { font-family: var(--font-sans); font-size: 11px; white-space: nowrap; }

.pp-process__loop { display: none; }

.pp-process__panel-en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--color-brand-text); }

.pp-process__title { margin-top: 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.5; color: var(--color-hero-ink); }

.pp-process__text { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--color-text); }

.js:not(.pp-ready):not(.pp-failed) [data-tabs] [role="tabpanel"]:not(:first-of-type) { display: none; }

/* ---------- 06 InteractiveDemo: lab shell ---------- */

.lab { position: relative; }

.lab__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.lab__steps { display: flex; overflow-x: auto; scrollbar-width: none; }

.lab__step {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: baseline;
  padding: 10px 18px 12px 0;
  color: rgba(255, 255, 255, .62);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.lab__step::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-normal) var(--ease-out);
}

.lab__step[aria-pressed="true"] { color: var(--color-white); }
.lab__step[aria-pressed="true"]::after { transform: scaleX(1); }
.lab__step[aria-pressed="true"] .lab__step-num { color: var(--color-brand); }

.lab__step-num { grid-row: span 2; font-family: var(--font-serif); font-size: 16px; }

.lab__step-ja { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; }

.lab__step-en { font-family: var(--font-en); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; opacity: .72; }

.lab__step--extra { margin-left: auto; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .2); }

.lab__step--extra::after { left: 18px; }

.lab__stage { margin-top: 22px; }

.js:not(.pp-failed) .lab[data-step="1"] .lab__stage:not([data-step-view~="1"]),
.js:not(.pp-failed) .lab[data-step="2"] .lab__stage:not([data-step-view~="2"]),
.js:not(.pp-failed) .lab[data-step="3"] .lab__stage:not([data-step-view~="3"]),
.js:not(.pp-failed) .lab[data-step="4"] .lab__stage:not([data-step-view~="4"]),
.js:not(.pp-failed) .lab[data-step="video"] .lab__stage:not([data-step-view~="video"]),
.js:not(.pp-failed) .lab[data-step="map"] .lab__stage:not([data-step-view~="map"]) { display: none; }

.js:not(.pp-failed) .lab[data-step="1"] [data-step-content]:not([data-step-content="1"]),
.js:not(.pp-failed) .lab[data-step="2"] [data-step-content]:not([data-step-content="2"]),
.js:not(.pp-failed) .lab[data-step="3"] [data-step-content]:not([data-step-content="3"]),
.js:not(.pp-failed) .lab[data-step="4"] [data-step-content]:not([data-step-content="4"]) { display: none; }

:is(.lab--rcmp .lab__stage:not(.lab__stage--video), .search-lab, .journey__body, .compare, .maplab) {
  display: grid;
  gap: 22px;
  align-items: start;
}

.lab__screen-wrap { position: relative; min-width: 0; }

.mock-browser {
  background: #fff;
  color: #1b2733;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.mock-browser__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 10px;
  background: #e9edf0;
  font-family: var(--font-en);
  font-size: 10px;
  color: #5b6770;
}

.mock-browser__dots { display: flex; gap: 4px; }

.mock-browser__dots i { width: 7px; height: 7px; border-radius: 50%; background: #c5ccd2; }

.mock-browser__url {
  flex: 1;
  overflow: hidden;
  padding: 2px 10px;
  background: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mock-browser__tag { padding: 1px 6px; background: var(--color-navy-deep); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .16em; }

.mock {
  --s: calc(100cqw / 400);
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: #fff;
  color: #1b2733;
  font-family: var(--font-sans);
}

.lab__panel { display: grid; align-content: start; gap: 14px; min-width: 0; }

.lab__content-en { font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--color-brand); }

.lab__content-title { margin-top: 6px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.55; }

.lab__content-ja { color: var(--color-brand); }

.lab__content-text { margin-top: 10px; font-size: 14px; line-height: 1.95; color: rgba(255, 255, 255, .84); }

.lab__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.lab__nav-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-white);
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.lab__nav-button--next { margin-left: auto; }

.lab__nav-button[disabled] { opacity: .35; cursor: default; }

@media (hover: hover) {
  .lab__nav-button:not([disabled]):hover { color: var(--color-brand-light); }
  .lab__nav-button--next:not([disabled]):hover .arrow { transform: translateX(6px); }
  .lab__step:hover { color: var(--color-white); }
}

/* ---------- RCMP mock (400 × 470 viewport, 1170 page; units: --s) ---------- */

.rcmp-viewport { position: relative; aspect-ratio: 400 / 470; overflow: hidden; background: #eef1f4; }

.rcmp-page {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(1170 * var(--s));
  background: #fff;
  transform: translateY(calc(var(--scroll, 0) * var(--s) * -1));
  transform-origin: 50% 0;
  transition: transform .9s var(--ease-out);
}

.lab.is-replaying .rcmp-page { transition: none; }

.lab:is([data-step="2"], [data-step="3"], [data-step="4"]) .rcmp-page { transform: scale(.4017); }

.rcmp-block { position: relative; flex: none; overflow: hidden; order: var(--o, 5); }

.rcmp-block--header {
  --o: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(36 * var(--s));
  padding: 0 calc(16 * var(--s));
  border-bottom: 1px solid #e3e7ea;
}

.rcmp-logo { font-family: var(--font-en); font-size: calc(13 * var(--s)); font-weight: 800; letter-spacing: .08em; color: #0e2a40; }

.rcmp-nav { display: flex; gap: calc(8 * var(--s)); }

.rcmp-nav i { width: calc(26 * var(--s)); height: calc(4 * var(--s)); background: #cfd6dc; }

.rcmp-block--kv { --o: 1; height: calc(230 * var(--s)); background: #0e2a40; color: #fff; }

.rcmp-kv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }

.rcmp-kv__copy {
  position: absolute;
  bottom: calc(52 * var(--s));
  left: calc(20 * var(--s));
  font-family: var(--font-serif);
  font-size: calc(24 * var(--s));
  font-weight: 600;
  line-height: 1.4;
}

.rcmp-kv__sub { position: absolute; bottom: calc(24 * var(--s)); left: calc(20 * var(--s)); font-size: calc(9 * var(--s)); letter-spacing: .08em; opacity: .86; }

:is(.rcmp-block--work, .rcmp-block--voice, .rcmp-block--day, .rcmp-block--req) {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--s));
  padding: calc(22 * var(--s)) calc(20 * var(--s));
  border-bottom: 1px solid #edf0f2;
}

.rcmp-block--work { --o: 3; height: calc(200 * var(--s)); }
.rcmp-block--voice { --o: 4; height: calc(170 * var(--s)); }
.rcmp-block--day { --o: 5; height: calc(170 * var(--s)); }
.rcmp-block--req { --o: 6; height: calc(210 * var(--s)); }

.rcmp-label { font-family: var(--font-en); font-size: calc(8 * var(--s)); font-weight: 700; letter-spacing: .24em; color: var(--color-brand-text); }

.rcmp-h { font-family: var(--font-serif); font-size: calc(16 * var(--s)); font-weight: 600; color: #10202e; }

.rcmp-cards { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--s)); margin-top: calc(10 * var(--s)); }

.rcmp-cards i { background: #eef1f4; }

.rcmp-voice { display: flex; align-items: center; gap: calc(14 * var(--s)); margin-top: calc(10 * var(--s)); }

.rcmp-voice__img { flex: none; width: calc(72 * var(--s)); height: calc(72 * var(--s)); border-radius: 50%; object-fit: cover; }

.rcmp-lines { display: grid; flex: 1; gap: calc(8 * var(--s)); }

.rcmp-lines i { height: calc(6 * var(--s)); background: #e3e8ec; }

.rcmp-lines i:last-child { width: 60%; }

.rcmp-day {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6 * var(--s));
  margin-top: calc(18 * var(--s));
  border-top: calc(2 * var(--s)) solid #dfe5ea;
}

.rcmp-day i {
  position: relative;
  padding-top: calc(14 * var(--s));
  font-family: var(--font-en);
  font-size: calc(9 * var(--s));
  font-style: normal;
  color: #56626c;
}

.rcmp-day i::before {
  content: "";
  position: absolute;
  top: calc(-5 * var(--s));
  left: 0;
  width: calc(8 * var(--s));
  height: calc(8 * var(--s));
  border-radius: 50%;
  background: #0e2a40;
}

.rcmp-table { display: grid; margin-top: calc(8 * var(--s)); }

.rcmp-table i {
  display: flex;
  align-items: center;
  height: calc(26 * var(--s));
  border-bottom: 1px solid #edf0f2;
  font-size: calc(9 * var(--s));
  font-style: normal;
  color: #56626c;
}

.rcmp-table i::after { content: ""; width: 55%; height: calc(5 * var(--s)); margin-left: auto; background: #e3e8ec; }

.rcmp-block--entry {
  --o: 7;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(8 * var(--s));
  height: calc(110 * var(--s));
  background: #f7f7f5;
}

.rcmp-page[data-layout="after"] .rcmp-block--entry { --o: 2; }

.rcmp-entry__label { font-family: var(--font-en); font-size: calc(8 * var(--s)); letter-spacing: .3em; color: #56626c; }

.rcmp-entry__button { padding: calc(10 * var(--s)) calc(34 * var(--s)); background: var(--color-brand-dark); color: #fff; font-size: calc(11 * var(--s)); font-weight: 700; letter-spacing: .1em; }

.lab[data-step="3"] .rcmp-block--entry { outline: calc(8 * var(--s)) solid var(--color-brand); outline-offset: calc(-8 * var(--s)); }

.rcmp-block--footer { --o: 9; display: grid; place-items: center; height: calc(44 * var(--s)); background: #0e2a40; color: #fff; font-family: var(--font-en); font-size: calc(8 * var(--s)); }

.rcmp-heat {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(234, 85, 20, .62) 0%, rgba(234, 85, 20, .48) 26%, rgba(255, 122, 50, .32) 44%, rgba(255, 196, 120, .2) 58%, rgba(29, 99, 198, .2) 72%, rgba(29, 99, 198, .4) 100%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity .6s ease;
}

.rcmp-click {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 4;
  width: calc(60 * var(--s));
  height: calc(60 * var(--s));
  margin: calc(-30 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 71, 14, .9) 0, rgba(234, 85, 20, .55) 35%, rgba(255, 122, 50, 0) 70%);
  opacity: 0;
  transition: opacity .5s ease;
}

.rcmp-click--soft { transform: scale(.7); }

.lab:is([data-step="2"], [data-step="4"]) :is(.rcmp-heat, .rcmp-click) { opacity: 1; }

.rcmp-trail { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

.rcmp-trail svg { width: 100%; height: 100%; }

.rcmp-trail polyline { fill: none; stroke: var(--color-brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }

.rcmp-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  width: calc(16 * var(--s));
  transform: translate(calc(var(--cx, 300) * var(--s)), calc(var(--cy, 380) * var(--s)));
}

.rcmp-cursor svg { display: block; width: 100%; height: auto; fill: #10202e; stroke: #fff; stroke-width: 1.4; }

.lab:not([data-step="1"]) :is(.rcmp-cursor, .rcmp-trail, .rcmp-exit) { display: none; }

.rcmp-exit {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(6 * var(--s));
  background: rgba(7, 28, 44, .8);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s .4s;
}

.rcmp-exit.is-visible { opacity: 1; visibility: visible; transition: opacity .4s ease; }

.rcmp-exit__en { font-family: var(--font-en); font-size: calc(30 * var(--s)); font-weight: 800; letter-spacing: .1em; color: var(--color-brand); }

.rcmp-exit__ja { font-size: calc(11 * var(--s)); letter-spacing: .06em; }

.rcmp-callout {
  position: absolute;
  right: calc(6 * var(--s));
  z-index: 6;
  max-width: calc(106 * var(--s));
  padding: calc(8 * var(--s)) calc(9 * var(--s));
  background: var(--color-navy-deep);
  color: #fff;
  font-size: calc(9.5 * var(--s));
  line-height: 1.5;
  opacity: 0;
  transform: translateY(calc(6 * var(--s)));
  transition: opacity .5s ease .5s, transform .5s var(--ease-out) .5s;
}

.rcmp-callout::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-18 * var(--s));
  width: calc(18 * var(--s));
  height: 2px;
  background: var(--color-brand);
}

.rcmp-callout--issue { top: calc(370 * var(--s)); }
.rcmp-callout--ok { top: calc(108 * var(--s)); }

.lab[data-step="2"] .rcmp-callout--issue,
.lab[data-step="4"] .rcmp-callout--ok { opacity: 1; transform: none; }

/* replay / heatmap / edit controls */

.replay { display: grid; gap: 12px; margin-top: 18px; }

.replay__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

:is(.replay__toggle, .vsplit__play) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-right: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--color-white);
  cursor: pointer;
}

.replay__icon { position: relative; display: block; width: 12px; height: 14px; }

.replay__icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--color-brand);
}

[aria-pressed="true"] > .replay__icon::before {
  left: 1px;
  width: 3px;
  height: 14px;
  border: 0;
  background: var(--color-brand);
  box-shadow: 6px 0 0 var(--color-brand);
}

.replay__caption { font-size: 13px; color: rgba(255, 255, 255, .86); }

.replay__timeline { position: relative; height: 22px; }

.replay__timeline:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }

.replay__progress { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: rgba(255, 255, 255, .2); }

.replay__progress span { display: block; width: calc(var(--progress, 0) * 100%); height: 100%; background: var(--color-brand); }

.replay__range { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; }

.replay__phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }

.replay__phase {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 0;
  border-top: 2px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease, border-color var(--dur-normal) ease;
}

.replay__phase span:first-child { font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .18em; }

.replay__phase.is-current { border-top-color: var(--color-brand); color: var(--color-white); }

.heat-legend { margin-top: 18px; }

.heat-legend__bar { display: block; height: 10px; background: linear-gradient(90deg, rgba(234, 85, 20, .95), rgba(255, 122, 50, .7), rgba(255, 196, 120, .45), rgba(29, 99, 198, .6)); }

.heat-legend__labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .76); }

.edit-toggle { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border: 1px solid rgba(255, 255, 255, .3); }

.edit-toggle__button {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}

.edit-toggle__button span:first-child { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .2em; }

.edit-toggle__button[aria-pressed="true"] { color: var(--color-white); box-shadow: inset 0 -3px 0 var(--color-brand); }

.cycle-mini { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; font-size: 12px; }

.cycle-mini li { display: flex; align-items: center; color: rgba(255, 255, 255, .66); }

.cycle-mini li + li::before { content: ""; width: 18px; height: 1px; margin: 0 8px; background: rgba(255, 255, 255, .4); }

.cycle-mini li.is-current { font-weight: 700; color: var(--color-brand); }

/* ---------- video split ---------- */

.vsplit { display: grid; gap: 22px; }

.vsplit__stage {
  --split: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b1a27;
}

.vsplit__side { position: absolute; inset: 0; }

.vsplit__photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }

.vsplit__photo-text {
  position: absolute;
  bottom: 8%;
  left: 5%;
  display: grid;
  gap: 8px;
  width: 36%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .94);
}

.vsplit__tag { font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #10202e; }

.vsplit__lines { display: grid; gap: 5px; }

.vsplit__lines i { height: 5px; background: #d8dde1; }

.vsplit__lines i:last-child { width: 60%; }

.vsplit__side--video { clip-path: inset(0 0 0 var(--split)); }

.vsplit__video { width: 100%; height: 100%; object-fit: cover; }

.vsplit__frames { position: absolute; inset: 0; }

.vsplit__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  animation: vsplit-frame var(--duration) linear infinite;
  animation-delay: calc(var(--duration) / var(--frames) * var(--i));
  animation-play-state: paused;
}

.vsplit__frame-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: vsplit-zoom var(--duration) linear infinite;
  animation-delay: calc(var(--duration) / var(--frames) * var(--i));
  animation-play-state: paused;
}

.vsplit.is-playing :is(.vsplit__frame, .vsplit__frame-img, .vsplit__rec) { animation-play-state: running; }

@keyframes vsplit-frame {
  0% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes vsplit-zoom {
  0% { transform: scale(1.02); }
  25% { transform: scale(1.14) translateX(-2%); }
  100% { transform: scale(1.14) translateX(-2%); }
}

.vsplit__caption {
  position: absolute;
  right: 6%;
  bottom: 12%;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 14px rgba(7, 28, 44, .45);
}

.vsplit__tag--video { position: absolute; top: 5%; right: 4%; display: flex; align-items: center; gap: 6px; color: #fff; }

.vsplit__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); animation: vsplit-rec 1s steps(2) infinite paused; }

@keyframes vsplit-rec { 50% { opacity: .2; } }

.vsplit__time {
  position: absolute;
  top: 5%;
  left: calc(var(--split) + 3%);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .1em;
  color: #fff;
  white-space: nowrap;
}

.vsplit__progress { position: absolute; right: 0; bottom: 0; left: var(--split); height: 3px; background: rgba(255, 255, 255, .25); }

.vsplit__progress span { display: block; width: calc(var(--vprogress, 0) * 100%); height: 100%; background: var(--color-brand); }

.vsplit__divider { position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 3; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }

.vsplit__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  background: var(--color-navy-deep);
  transform: translate(-50%, -50%);
}

.vsplit__handle::before,
.vsplit__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--color-brand);
  border-left: 2px solid var(--color-brand);
}

.vsplit__handle::before { left: 7px; transform: translateY(-50%) rotate(-45deg); }
.vsplit__handle::after { right: 7px; transform: translateY(-50%) rotate(135deg); }

.vsplit__side-copy { display: grid; align-content: start; gap: 10px; }

.vsplit__label { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-brand); }

.vsplit__title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; }

.vsplit__text { font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .84); }

.vsplit__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }

.vsplit__range { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 10px; letter-spacing: .16em; color: rgba(255, 255, 255, .72); }

.vsplit__range input { width: 140px; accent-color: var(--color-brand); }

.vsplit__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }

.vsplit__stats li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .26); }

.vsplit__stats .pp-stat__figure { font-size: 30px; }

.vsplit__stat-label { font-family: var(--font-sans); font-size: 12px; }

/* ---------- CCMP search / journey mocks ---------- */

/* Padding on a .mock itself is a percentage: --s only resolves correctly on its descendants. */
.search-screen { aspect-ratio: 400 / 470; padding: 4.5% 4%; }

.search-screen__note { position: absolute; right: calc(10 * var(--s)); bottom: calc(8 * var(--s)); font-size: calc(8 * var(--s)); color: #8a949c; }

.js:not(.pp-failed) .search-lab[data-level="big"] [data-search-results]:not([data-search-results="big"]),
.js:not(.pp-failed) .search-lab[data-level="middle"] [data-search-results]:not([data-search-results="middle"]),
.js:not(.pp-failed) .search-lab[data-level="long"] [data-search-results]:not([data-search-results="long"]),
.js:not(.pp-failed) .search-lab[data-level="big"] [data-level-text]:not([data-level-text="big"]),
.js:not(.pp-failed) .search-lab[data-level="middle"] [data-level-text]:not([data-level-text="middle"]),
.js:not(.pp-failed) .search-lab[data-level="long"] [data-level-text]:not([data-level-text="long"]) { display: none; }

.mk-search {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  height: calc(36 * var(--s));
  padding: 0 calc(14 * var(--s));
  border: 1px solid #d8dde1;
  border-radius: calc(18 * var(--s));
  font-size: calc(11 * var(--s));
  color: #10202e;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.search-lab.is-typing .mk-search { border-color: var(--color-brand); box-shadow: 0 0 0 calc(3 * var(--s)) rgba(234, 85, 20, .18); }

.mk-search__icon { position: relative; flex: none; width: calc(10 * var(--s)); height: calc(10 * var(--s)); border: calc(2 * var(--s)) solid #56626c; border-radius: 50%; }

.mk-search__icon::after { content: ""; position: absolute; right: calc(-4 * var(--s)); bottom: calc(-3 * var(--s)); width: calc(5 * var(--s)); height: calc(2 * var(--s)); background: #56626c; transform: rotate(45deg); }

.mk-search__query { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mk-search__caret { width: 1px; height: calc(14 * var(--s)); background: var(--color-brand); animation: mk-caret 1s steps(2) infinite; }

@keyframes mk-caret { 50% { opacity: 0; } }

.mk-results { display: grid; gap: calc(10 * var(--s)); margin-top: calc(16 * var(--s)); }

.mk-result {
  position: relative;
  display: grid;
  gap: calc(3 * var(--s));
  padding: calc(8 * var(--s)) calc(10 * var(--s)) calc(8 * var(--s)) calc(12 * var(--s));
  border-left: calc(3 * var(--s)) solid transparent;
}

.mk-result.is-own { border-left-color: var(--color-brand); background: #fff7f2; }

.mk-results.is-in .mk-result { animation: mk-in .5s var(--ease-out) both; }
.mk-results.is-in .mk-result:nth-child(2) { animation-delay: .08s; }
.mk-results.is-in .mk-result:nth-child(3) { animation-delay: .16s; }
.mk-results.is-in .mk-result:nth-child(4) { animation-delay: .24s; }

@keyframes mk-in { from { opacity: 0; transform: translateY(calc(8 * var(--s))); } }

.mk-result__meta { display: flex; align-items: center; gap: calc(6 * var(--s)); font-size: calc(8 * var(--s)); color: #56626c; }

.mk-result__type { padding: calc(1 * var(--s)) calc(5 * var(--s)); border: 1px solid #c3cbd2; font-weight: 700; white-space: nowrap; }

.mk-result__type--column { border-color: var(--color-brand); color: var(--color-brand-text); }

.mk-result__title { font-size: calc(11.5 * var(--s)); font-weight: 700; line-height: 1.45; color: #0e3a6c; }

.mk-result__text { font-size: calc(9 * var(--s)); line-height: 1.6; color: #56626c; }

.search-levels { display: grid; gap: 8px; margin-top: 14px; }

.search-level {
  position: relative;
  display: grid;
  grid-template-columns: 6.4em minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 0 10px 16px;
  border-left: 2px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .66);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease, border-color var(--dur-normal) ease;
}

.search-level[aria-pressed="true"] { border-left-color: var(--color-brand); color: var(--color-white); }

.search-level__en { grid-row: span 2; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .18em; }

.search-level[aria-pressed="true"] .search-level__en { color: var(--color-brand); }

.search-level__label { font-family: var(--font-sans); font-size: 11px; }

.search-level__query { font-family: var(--font-sans); font-size: 13px; font-weight: 700; }

.journey { position: relative; display: grid; gap: 18px; }

.journey__nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }

.journey__node {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 2px;
  width: 100%;
  padding: 16px 6px 2px 0;
  color: rgba(255, 255, 255, .6);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.journey__node::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: var(--color-navy-deep);
  transition: background-color var(--dur-normal) ease, border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}

.journey__node.is-passed::before { border-color: var(--color-brand); background: var(--color-brand); }

.journey__node[aria-current="step"] { color: var(--color-white); }

.journey__node[aria-current="step"]::before { border-color: var(--color-brand); background: var(--color-brand); box-shadow: 0 0 0 5px rgba(234, 85, 20, .28); }

.journey__node-num { font-family: var(--font-serif); font-size: 13px; }

.journey__node-ja { font-family: var(--font-sans); font-size: 12px; font-weight: 700; }

.journey__node-en { font-family: var(--font-en); font-size: 9px; letter-spacing: .18em; opacity: .72; }

.journey__line { position: absolute; top: 0; right: calc(100% / var(--count)); left: 0; height: 2px; background: rgba(255, 255, 255, .2); }

.journey__line-fill { display: block; width: calc(var(--progress, 0) * 100%); height: 100%; background: var(--color-brand); transition: width var(--dur-large) var(--ease-out); }

.journey__screens { aspect-ratio: 400 / 470; }

.journey__screen {
  position: absolute;
  inset: 0;
  padding: calc(16 * var(--s));
  overflow: hidden;
  transition: opacity .5s ease, transform .6s var(--ease-out), visibility 0s .6s;
}

.journey__screen:not(:first-child) { opacity: 0; visibility: hidden; }

.pp-ready .journey__screen { opacity: 0; visibility: hidden; transform: translateX(calc(24 * var(--s))); }

.pp-ready .journey__screen.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s var(--ease-out); }

.js:not(.pp-ready):not(.pp-failed) [data-journey-text]:not([data-journey-text="0"]) { display: none; }

.mk-page { display: grid; align-content: start; gap: calc(7 * var(--s)); }

.mk-page--cv { align-content: center; justify-items: start; height: 100%; }

.mk-kicker { font-family: var(--font-en); font-size: calc(8 * var(--s)); font-weight: 700; letter-spacing: .22em; color: var(--color-brand-text); }

.mk-title { font-family: var(--font-serif); font-size: calc(17 * var(--s)); font-weight: 600; line-height: 1.45; color: #10202e; }

.mk-img { display: block; height: calc(110 * var(--s)); overflow: hidden; }

.mk-img--wide { height: calc(120 * var(--s)); }

.mk-img img { width: 100%; height: 100%; object-fit: cover; }

.mk-h { margin-top: calc(4 * var(--s)); font-size: calc(11 * var(--s)); font-weight: 700; color: #10202e; }

.mk-lines { display: grid; gap: calc(6 * var(--s)); }

.mk-lines i { display: block; height: calc(5 * var(--s)); background: #e3e8ec; }

.mk-lines i:last-child:not(:first-child) { width: 70%; }

.mk-card { display: grid; gap: calc(2 * var(--s)); margin-top: calc(6 * var(--s)); padding: calc(10 * var(--s)) calc(12 * var(--s)); border: 1px solid #d8dde1; }

.mk-card--link { border-left: calc(3 * var(--s)) solid var(--color-brand); }

.mk-card__label { font-size: calc(8 * var(--s)); color: #56626c; }

.mk-card__name { font-size: calc(11 * var(--s)); font-weight: 700; color: #10202e; }

.mk-menu { display: grid; }

.mk-menu__item { display: grid; gap: calc(5 * var(--s)); padding: calc(8 * var(--s)) 0; border-bottom: 1px solid #edf0f2; }

.mk-menu__name { font-size: calc(11 * var(--s)); font-weight: 700; }

.mk-info { display: grid; gap: calc(4 * var(--s)); font-size: calc(10 * var(--s)); }

.mk-info b { display: inline-block; width: calc(34 * var(--s)); font-weight: 500; color: #56626c; }

.mk-map {
  position: relative;
  display: block;
  height: calc(70 * var(--s));
  background:
    linear-gradient(#fff, #fff) 0 42% / 100% calc(6 * var(--s)) no-repeat,
    linear-gradient(#fff, #fff) 58% 0 / calc(6 * var(--s)) 100% no-repeat,
    #e6ece7;
}

.mk-map__pin {
  position: absolute;
  top: 42%;
  left: 58%;
  width: calc(12 * var(--s));
  height: calc(12 * var(--s));
  margin: calc(-13 * var(--s)) 0 0 calc(-6 * var(--s));
  border-radius: 50% 50% 50% 0;
  background: var(--color-brand);
  transform: rotate(-45deg);
}

.mk-actions { display: grid; gap: calc(8 * var(--s)); width: 100%; margin-top: calc(10 * var(--s)); }

.mk-actions--row { grid-template-columns: 1fr 1fr; }

.mk-action { display: block; padding: calc(10 * var(--s)) calc(12 * var(--s)); border: 1px solid #c3cbd2; font-size: calc(11 * var(--s)); font-weight: 700; text-align: center; color: #0e2a40; }

.mk-action.is-primary { border-color: var(--color-brand-dark); background: var(--color-brand-dark); color: #fff; }

.mk-done { margin-top: calc(10 * var(--s)); font-family: var(--font-en); font-size: calc(9 * var(--s)); letter-spacing: .2em; color: var(--color-brand-text); }

.mk-chips { display: grid; gap: calc(5 * var(--s)); margin-top: calc(12 * var(--s)); }

.mk-chip { display: flex; align-items: center; gap: calc(8 * var(--s)); padding-left: calc(10 * var(--s)); border-left: 2px solid #d8dde1; font-size: calc(9.5 * var(--s)); color: #56626c; }

.mk-chip b { flex: none; width: calc(68 * var(--s)); font-size: calc(8 * var(--s)); font-weight: 500; }

.mk-chip.is-current { border-left-color: var(--color-brand); font-weight: 700; color: #10202e; }

.mk-compare { display: grid; gap: calc(8 * var(--s)); margin-top: calc(8 * var(--s)); }

.mk-compare__item { display: grid; gap: calc(5 * var(--s)); padding: calc(10 * var(--s)) calc(12 * var(--s)); border: 1px solid #d8dde1; }

.mk-compare__item.is-own { border-color: #10202e; box-shadow: inset calc(3 * var(--s)) 0 0 var(--color-brand); }

.mk-compare__name { font-size: calc(11.5 * var(--s)); font-weight: 700; }

.mk-tags { display: flex; flex-wrap: wrap; gap: calc(4 * var(--s)); }

.mk-tags i { padding: calc(2 * var(--s)) calc(6 * var(--s)); background: #f1f3f5; font-size: calc(8.5 * var(--s)); font-style: normal; }

.mk-owner { display: flex; align-items: center; gap: calc(10 * var(--s)); margin-top: calc(6 * var(--s)); font-size: calc(10 * var(--s)); }

.mk-owner img { flex: none; width: calc(46 * var(--s)); height: calc(46 * var(--s)); border-radius: 50%; object-fit: cover; }

/* ---------- マクロスまっぷ compare ---------- */

.compare__cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }

.compare__label { margin-bottom: 8px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .76); }

.compare__label--rich { color: var(--color-brand); }

.compare__vs { align-self: center; font-family: var(--font-en); font-size: 14px; font-weight: 800; letter-spacing: .1em; color: rgba(255, 255, 255, .5); }

.compare-card { background: #fff; }

.compare-card__screen { display: flex; flex-direction: column; aspect-ratio: 400 / 640; padding: 4.5%; }

.compare-card__screen > * + * { margin-top: calc(8 * var(--s)); }

.cc-basic { display: grid; gap: calc(4 * var(--s)); padding-bottom: calc(12 * var(--s)); border-bottom: 1px solid #e3e8ec; }

.cc-name { font-family: var(--font-serif); font-size: calc(22 * var(--s)); font-weight: 600; color: #10202e; }

.cc-info { font-size: calc(12 * var(--s)); color: #56626c; }

.cc-empty { display: grid; flex: 1; place-items: center; border: 1px dashed #c3cbd2; font-size: calc(12 * var(--s)); color: #8a949c; }

.cc-layer {
  display: grid;
  gap: calc(6 * var(--s));
  max-height: calc(170 * var(--s));
  padding: calc(8 * var(--s)) 0;
  overflow: hidden;
  border-bottom: 1px solid #edf0f2;
  transition: max-height .6s var(--ease-out), opacity .45s ease, padding .6s var(--ease-out);
}

.pp-ready .cc-layer:not(.is-on) { max-height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; }

.cc-layer__label { font-size: calc(9 * var(--s)); font-weight: 700; letter-spacing: .08em; color: var(--color-brand-text); }

.cc-chips { display: flex; flex-wrap: wrap; gap: calc(5 * var(--s)); }

.cc-chips i { padding: calc(3 * var(--s)) calc(8 * var(--s)); border: 1px solid #d8dde1; font-size: calc(10 * var(--s)); font-style: normal; }

.cc-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5 * var(--s)); }

.cc-photos img { width: 100%; height: calc(66 * var(--s)); object-fit: cover; }

.cc-text { font-size: calc(12 * var(--s)); font-weight: 600; line-height: 1.6; color: #10202e; }

.cc-owner { display: flex; align-items: center; gap: calc(10 * var(--s)); }

.cc-owner img { flex: none; width: calc(46 * var(--s)); height: calc(46 * var(--s)); border-radius: 50%; object-fit: cover; }

.cc-article { position: relative; padding-left: calc(14 * var(--s)); font-size: calc(12 * var(--s)); font-weight: 700; color: #0e3a6c; }

.cc-article::before { content: ""; position: absolute; top: .15em; bottom: .15em; left: 0; width: calc(3 * var(--s)); background: var(--color-brand); }

.compare__layers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.compare__layer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .36);
  font-size: 13px;
  color: rgba(255, 255, 255, .86);
  cursor: pointer;
  transition: border-color var(--dur-normal) ease, color var(--dur-normal) ease;
}

.compare__layer-check { position: relative; width: 14px; height: 14px; border: 1.5px solid rgba(255, 255, 255, .6); transition: background-color var(--dur-micro) ease, border-color var(--dur-micro) ease; }

.compare__layer-check::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3.5px;
  width: 4px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-micro) var(--ease-out);
}

.compare__layer[aria-pressed="true"] { border-color: var(--color-brand); color: var(--color-white); }

.compare__layer[aria-pressed="true"] .compare__layer-check { border-color: var(--color-brand); background: var(--color-brand); }

.compare__layer[aria-pressed="true"] .compare__layer-check::after { transform: rotate(45deg) scale(1); }

.compare__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }

.compare__count { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--color-brand); }

.compare__total { font-family: var(--font-en); font-size: 12px; color: rgba(255, 255, 255, .6); }

.compare__message { width: 100%; font-family: var(--font-serif); font-size: 15px; font-weight: 600; line-height: 1.7; }

/* ---------- map (Googleマップ運用支援 / G-macross) ---------- */

.map-screen { aspect-ratio: 400 / 500; }

.map-screen__streets { position: absolute; inset: 0; width: 100%; height: 100%; }

.map-screen__ground { fill: #eef1ec; }
.map-screen__park { fill: #d6e6cf; }
.map-screen__water { fill: #c6dbee; }
.map-screen__roads path { fill: none; stroke: #fff; stroke-width: 10; }
.map-screen__roads .map-screen__road-main { stroke-width: 16; }

.map-screen__route {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}

.maplab[data-map-step="4"] .map-screen__route { stroke-dashoffset: 0; }

.map-screen__search {
  position: absolute;
  top: calc(14 * var(--s));
  right: calc(14 * var(--s));
  left: calc(14 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  height: calc(36 * var(--s));
  padding: 0 calc(14 * var(--s));
  border-radius: calc(4 * var(--s));
  background: #fff;
  box-shadow: 0 calc(2 * var(--s)) calc(8 * var(--s)) rgba(7, 28, 44, .14);
  font-size: calc(12 * var(--s));
  transition: box-shadow .3s ease;
}

.maplab[data-map-step="1"] .map-screen__search { box-shadow: 0 0 0 calc(2 * var(--s)) var(--color-brand), 0 calc(2 * var(--s)) calc(8 * var(--s)) rgba(7, 28, 44, .14); }

.map-pin {
  --pin: #56626c;
  position: absolute;
  top: calc(var(--y) / 500 * 100%);
  left: calc(var(--x) / 400 * 100%);
  width: calc(18 * var(--s));
  height: calc(18 * var(--s));
  margin: calc(-20 * var(--s)) 0 0 calc(-9 * var(--s));
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-out);
}

.map-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: var(--pin); transform: rotate(-45deg); }

.map-pin::after { content: ""; position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; border-radius: 50%; background: #fff; }

.map-pin--own { --pin: var(--color-brand); z-index: 2; }

.map-pin__label { position: absolute; top: calc(-1 * var(--s)); left: calc(22 * var(--s)); padding: 0 calc(5 * var(--s)); background: #fff; font-size: calc(10 * var(--s)); font-weight: 700; white-space: nowrap; }

.maplab:not([data-map-step="1"]) .map-pin { transform: scale(1); }
.maplab:not([data-map-step="1"]) .map-pin:nth-of-type(3) { transition-delay: .1s; }
.maplab:not([data-map-step="1"]) .map-pin:nth-of-type(4) { transition-delay: .2s; }
.maplab:not([data-map-step="1"]) .map-pin:nth-of-type(5) { transition-delay: .3s; }

.map-you {
  position: absolute;
  top: calc(var(--y) / 500 * 100%);
  left: calc(var(--x) / 400 * 100%);
  width: calc(12 * var(--s));
  height: calc(12 * var(--s));
  margin: calc(-6 * var(--s));
  border: calc(2 * var(--s)) solid #fff;
  border-radius: 50%;
  background: #1d63c6;
  box-shadow: 0 0 0 calc(5 * var(--s)) rgba(29, 99, 198, .22);
}

.map-card {
  position: absolute;
  right: calc(12 * var(--s));
  bottom: calc(12 * var(--s));
  left: calc(12 * var(--s));
  display: grid;
  gap: calc(6 * var(--s));
  padding: calc(12 * var(--s)) calc(14 * var(--s));
  background: #fff;
  box-shadow: 0 calc(4 * var(--s)) calc(18 * var(--s)) rgba(7, 28, 44, .16);
  transform: translateY(115%);
  transition: transform .6s var(--ease-out);
}

.maplab:is([data-map-step="3"], [data-map-step="4"]) .map-card { transform: none; }

.maplab[data-map-step="4"] .map-card { transform: translateY(38%); }

.map-card__name { font-size: calc(14 * var(--s)); font-weight: 700; }

.map-card__name small { margin-left: calc(4 * var(--s)); font-size: calc(9 * var(--s)); font-weight: 400; color: #56626c; }

.map-card__rating { display: flex; gap: calc(8 * var(--s)); font-size: calc(10 * var(--s)); color: #56626c; }

.map-card__stars { letter-spacing: .06em; color: var(--color-brand); }

.map-card__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--s)); }

.map-card__photos img { width: 100%; height: calc(56 * var(--s)); object-fit: cover; }

.map-card__review { font-size: calc(10.5 * var(--s)); color: #10202e; }

.map-card__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--s)); }

.map-card__actions span { padding: calc(7 * var(--s)) 0; border: 1px solid #c3cbd2; font-size: calc(10 * var(--s)); font-weight: 700; text-align: center; color: #0e3a6c; }

.maplab[data-map-step="4"] .map-card__actions span:first-child { border-color: var(--color-brand-dark); background: var(--color-brand-dark); color: #fff; }

.maplab__lead { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.6; }

.map-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .2); }

.map-step {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-top: -2px;
  padding: 12px 6px 0 0;
  border-top: 3px solid transparent;
  color: rgba(255, 255, 255, .6);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease, border-color var(--dur-normal) ease;
}

.map-step[aria-pressed="true"] { border-top-color: var(--color-brand); color: var(--color-white); }

.map-step__num { font-family: var(--font-serif); font-size: 14px; }

.map-step[aria-pressed="true"] .map-step__num { color: var(--color-brand); }

.map-step__en { font-family: var(--font-en); font-size: 10px; font-weight: 700; letter-spacing: .16em; }

.map-step__ja { font-family: var(--font-sans); font-size: 11px; }

.js:not(.pp-failed) .maplab[data-map-step="1"] [data-map-text]:not([data-map-text="1"]),
.js:not(.pp-failed) .maplab[data-map-step="2"] [data-map-text]:not([data-map-text="2"]),
.js:not(.pp-failed) .maplab[data-map-step="3"] [data-map-text]:not([data-map-text="3"]),
.js:not(.pp-failed) .maplab[data-map-step="4"] [data-map-text]:not([data-map-text="4"]) { display: none; }

.map-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }

.map-facts li { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .26); }

.map-facts__value { font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--color-brand); }

.map-facts__value small { margin-left: 2px; font-family: var(--font-sans); font-size: .45em; }

.map-facts__label { font-family: var(--font-sans); font-size: 11px; }

/* ---------- 07 FeatureDetail ---------- */

.pp-features { display: grid; gap: 22px; }

.pp-features__tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-line); }

.pp-features__tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 22px 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.pp-features__tab::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-normal) var(--ease-out);
}

.pp-features__tab[aria-selected="true"] { color: var(--color-hero-ink); }
.pp-features__tab[aria-selected="true"]::after { transform: scaleX(1); }

.pp-features__tab-num { font-family: var(--font-serif); font-size: 13px; }

.pp-features__tab[aria-selected="true"] .pp-features__tab-num { color: var(--color-brand-text); }

.pp-fgrid { display: grid; gap: 22px; }

.pp-fitem { padding-top: 16px; border-top: 1px solid var(--color-ink); }

.pp-fitem__en { font-family: var(--font-en); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--color-brand-text); }

.pp-fitem__title { margin-top: 8px; font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: var(--color-hero-ink); }

.pp-fitem__text { margin-top: 8px; font-size: 13.5px; line-height: 1.9; color: var(--color-text); }

.pp-contrast { display: grid; gap: 18px; }

.pp-contrast__col { padding-top: 20px; border-top: 1px solid var(--color-ink); }

.pp-contrast__col--after { border-top: 3px solid var(--color-brand); }

.pp-contrast__title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--color-hero-ink); }

.pp-contrast__col--before .pp-contrast__title { color: var(--color-muted); }

.pp-contrast__list { display: grid; gap: 10px; margin-top: 14px; }

.pp-contrast__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.8; }

.pp-contrast__list li::before { content: ""; position: absolute; top: .9em; left: 0; width: 8px; height: 1px; background: currentColor; }

.pp-contrast__col--after .pp-contrast__list li::before { height: 2px; background: var(--color-brand); }

.pp-contrast__arrow { justify-self: center; width: 2px; height: 28px; background: var(--color-brand); }

.pp-flist { display: grid; border-top: 1px solid var(--color-ink); }

.pp-flist__item { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--color-line); }

.pp-flist__num { grid-row: span 2; font-family: var(--font-serif); font-size: 15px; color: var(--color-brand-text); }

.pp-flist__title { font-size: 14px; font-weight: 700; color: var(--color-hero-ink); }

.pp-flist__text { font-size: 12px; line-height: 1.7; color: var(--color-muted); }

.pp-cases { display: grid; gap: 14px; }

.pp-case { padding-top: 14px; border-top: 1px solid var(--color-ink); }

.pp-case__industry { font-size: 14px; font-weight: 700; }

.pp-case__value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }

.pp-case__label { font-size: 12px; }

.pp-case__num { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--color-brand); }

.pp-case__unit { font-size: 14px; font-weight: 700; }

.pp-case__table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }

.pp-case__table :is(th, td) { padding: 6px 0; border-bottom: 1px solid var(--color-line); font-weight: 500; text-align: left; }

.pp-case__table td { font-family: var(--font-en); text-align: right; white-space: nowrap; }

.pp-case__arrow { display: inline-block; width: 14px; height: 2px; margin: 0 8px; vertical-align: middle; background: var(--color-brand); }

/* ---------- 08 SuitableFor ---------- */

.pp-fit { display: grid; gap: 24px; }

.pp-fit__list { display: grid; border-top: 1px solid var(--color-ink); }

.pp-fit__item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.pp-fit__check {
  position: relative;
  flex: none;
  width: 1em;
  height: 1em;
  border: 1.5px solid var(--color-ink);
  font-size: 22px;
  transition: border-color var(--dur-micro) ease;
}

/* Checking paints an orange brush patch left to right, then the tick. */
.pp-fit__check::before {
  content: "";
  position: absolute;
  inset: -.26em -.4em -.26em -.26em;
  background: var(--color-brand-dark);
  -webkit-mask: var(--mask-brush-fill) center / 100% 100% no-repeat;
  mask: var(--mask-brush-fill) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-normal) var(--ease-out);
}

.pp-fit__check::after {
  content: "";
  position: absolute;
  top: .08em;
  left: .32em;
  width: .28em;
  height: .56em;
  border-right: .09em solid #fff;
  border-bottom: .09em solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-micro) var(--ease-out) .15s;
}

.pp-fit__item[aria-pressed="true"] { font-weight: 700; color: var(--color-hero-ink); }
.pp-fit__item[aria-pressed="true"] .pp-fit__check { border-color: transparent; }
.pp-fit__item[aria-pressed="true"] .pp-fit__check::before { clip-path: inset(0 0 0 0); }
.pp-fit__item[aria-pressed="true"] .pp-fit__check::after { transform: rotate(45deg) scale(1); }

.pp-fit__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; }

.pp-fit__count { display: flex; align-items: baseline; gap: 6px; }

.pp-fit__num { font-family: var(--font-serif); font-size: 56px; line-height: 1; color: var(--color-brand); }

.pp-fit__total { font-family: var(--font-en); font-size: 14px; color: var(--color-muted); }

.pp-fit__message { font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.7; color: var(--color-hero-ink); }

/* ---------- 09 ProposalCTA ---------- */

.pp-consult__brush {
  position: absolute;
  top: 0;
  right: -30%;
  bottom: 0;
  z-index: 0;
  width: 90%;
  background: url("../../art/brush-strokes-1200.webp") 80% 40% / cover no-repeat;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.pp-chapter--consult :is(.pp-head, .pp-consult) { position: relative; z-index: 1; }

.pp-consult { display: grid; gap: 28px; }

.pp-consult__text { font-size: 15px; line-height: 2; letter-spacing: .06em; color: rgba(255, 255, 255, .88); }

.pp-consult__actions { display: grid; justify-items: start; gap: 22px; }

.pp-consult__primary { min-width: min(100%, 360px); }

.pp-consult__links { display: flex; flex-wrap: wrap; gap: 4px 36px; }

/* ---------- toolbar (SELECT SOLUTION / PRESENT) ---------- */

.pp-toolbar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 28, 44, .94);
  color: var(--color-white);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateY(calc(100% + 28px));
  transition: transform var(--dur-large) var(--ease-out);
}

.pp-toolbar.is-visible { transform: none; }

.pp-toolbar__current {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  white-space: nowrap;
}

.pp-toolbar__num { font-family: var(--font-serif); font-size: 18px; letter-spacing: 0; color: var(--color-brand); }

.pp-toolbar__button {
  --focus: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--color-white);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-normal) ease;
}

.pp-toolbar__button + .pp-toolbar__button { border-left: 1px solid rgba(255, 255, 255, .16); }

.pp-toolbar__button--present { display: none; }

@media (hover: hover) {
  .pp-toolbar__button:hover { color: var(--color-brand-light); }
}

/* ---------- SELECT SOLUTION ---------- */

html.is-switcher-open { overflow: hidden; }

.pp-switcher {
  --focus: var(--color-white);
  position: fixed;
  inset: 0;
  z-index: 320;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-navy-deep);
  color: var(--color-white);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-large) var(--ease-draw);
}

.pp-switcher.is-open { clip-path: inset(0 0 0 0); }

.pp-switcher__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding: var(--adminbar-h) var(--gutter) 36px;
  overflow: hidden;
}

.pp-switcher__brush {
  position: absolute;
  right: -30vw;
  bottom: -14vh;
  z-index: -1;
  width: min(110vw, 1500px);
  aspect-ratio: 1200 / 675;
  background: url("../../art/brush-strokes-1200.webp") center / contain no-repeat;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.pp-switcher__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.pp-switcher__title { display: grid; gap: 4px; font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .3em; }

.pp-switcher__title-ja { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: rgba(255, 255, 255, .66); }

.pp-switcher .solution-list { align-self: center; margin-block: 24px; }

.pp-switcher .solution-item { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-normal) ease, transform var(--dur-large) var(--ease-out); }

.pp-switcher.is-open .solution-item { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .07s); }

/* ---------- PRESENTATION MODE ---------- */

html.is-presenting,
html.is-presenting body { overflow: hidden; }

.is-presenting :is(.site-header, .site-footer, .pp-toolbar, .skip-link, .page-transition) { display: none !important; }

.is-presenting .proposal {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: #020d16;
}

.is-presenting .proposal [data-slide] {
  position: absolute;
  top: calc((100dvh - 64px) / 2);
  left: 50%;
  width: min(100vw, calc((100dvh - 64px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity .5s var(--ease-out), visibility 0s .5s;
}

.is-presenting .proposal [data-slide].is-current { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-out) .12s; }

.is-presenting .proposal :is(.pp-chapter__stage, .pp-hero__stage) { height: 100%; min-height: 0; }

.is-presenting .pp-hero__breadcrumb { visibility: hidden; }

.pp-present { position: fixed; inset: 0; z-index: 300; pointer-events: none; }

.pp-present__bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 28px;
  height: 64px;
  padding: 0 20px 0 24px;
  background: var(--color-navy-deep);
  color: var(--color-white);
  pointer-events: auto;
}

.pp-present__product { display: flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }

.pp-present__brand .brand__img { height: 18px; }

.pp-present__counter { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-en); }

.pp-present__num { min-width: 1.3em; font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--color-brand); }

.pp-present__total { font-size: 12px; letter-spacing: .16em; color: rgba(255, 255, 255, .6); }

.pp-present__label { position: relative; padding-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .26em; white-space: nowrap; }

.pp-present__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-brand);
  transform-origin: 0 50%;
}

.pp-present__label.is-changing::after { animation: pp-line .6s var(--ease-out); }

@keyframes pp-line { from { transform: scaleX(0); } }

.pp-present__ticks { display: flex; justify-self: center; gap: 4px; }

.pp-present__tick { position: relative; width: 28px; height: 28px; cursor: pointer; }

.pp-present__tick::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  left: 2px;
  height: 2px;
  margin-top: -1px;
  background: rgba(255, 255, 255, .26);
  transition: background-color var(--dur-normal) ease, height var(--dur-micro) ease;
}

.pp-present__tick:is(.is-passed, .is-current)::before { background: var(--color-brand); }

.pp-present__tick.is-current::before { height: 4px; margin-top: -2px; }

.pp-present__controls { display: flex; align-items: center; gap: 2px; }

.pp-present__nav { display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-white); cursor: pointer; }

.pp-present__nav[disabled] { opacity: .3; cursor: default; }

.pp-present__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--color-white);
  cursor: pointer;
}

.pp-present__key { padding: 1px 5px; border: 1px solid rgba(255, 255, 255, .4); font-size: 9px; font-weight: 500; letter-spacing: .06em; }

@media (hover: hover) {
  :is(.pp-present__nav, .pp-present__text):not([disabled]):hover { color: var(--color-brand-light); }
}

.pp-present__progress { position: absolute; top: -3px; right: 0; left: 0; height: 3px; background: rgba(255, 255, 255, .08); }

.pp-present__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-brand);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform var(--dur-large) var(--ease-out);
}

.pp-present__hint {
  position: absolute;
  bottom: 90px;
  left: 50%;
  padding: 10px 18px;
  background: rgba(7, 28, 44, .92);
  color: var(--color-white);
  font-size: 12px;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .4s ease;
}

.pp-present__hint.is-visible { opacity: 1; }

/* The brand brush runs across once on every slide change. */
.pp-present__wipe {
  position: absolute;
  top: 40%;
  left: -5%;
  width: 110%;
  height: 18vh;
  background: var(--color-brand-dark);
  opacity: 0;
  -webkit-mask: var(--mask-brush-fill) center / 100% 100% no-repeat;
  mask: var(--mask-brush-fill) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
}

.pp-present__wipe.is-running { animation: pp-wipe .7s var(--ease-draw); }

@keyframes pp-wipe {
  0% { opacity: .92; clip-path: inset(0 100% 0 0); }
  48% { opacity: .92; clip-path: inset(0 0 0 0); }
  100% { opacity: .92; clip-path: inset(0 0 0 100%); }
}

/* ---------- /service/{slug}/ ---------- */

.pd-overview__inner { display: grid; gap: 28px; }

.pd-overview__cat { display: flex; gap: 12px; margin-top: 16px; font-family: var(--font-sans); font-size: 13px; color: var(--color-muted); }

.pd-overview__cat span { font-family: var(--font-en); font-weight: 700; letter-spacing: .2em; color: var(--color-brand-text); }

.pd-overview__body { font-size: 15px; line-height: 2.05; letter-spacing: .06em; }

.pd-overview__body p + p { margin-top: 1.2em; }

.pd-overview__body .pp-flow { margin-top: 32px; }

.pd-points__list { display: grid; margin-top: 40px; border-top: 1px solid var(--color-ink); }

.pd-points__item { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--color-line); }

.pd-points__num { grid-row: span 2; font-family: var(--font-serif); font-size: 22px; line-height: 1.2; color: var(--color-brand); }

.pd-points__title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.6; color: var(--color-hero-ink); }

.pd-points__text { margin-top: 6px; font-size: 14px; line-height: 1.9; color: var(--color-text); }

.pd-related .sitemap-list { margin-top: 28px; }

.pd-proposal {
  --focus: var(--color-white);
  position: relative;
  overflow: hidden;
  background: var(--color-navy-deep);
  color: var(--color-white);
}

.pd-proposal__brush {
  position: absolute;
  top: 0;
  right: -20%;
  bottom: 0;
  width: 80%;
  background: url("../../art/brush-strokes-1200.webp") 80% 50% / cover no-repeat;
  opacity: .6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.pd-proposal__inner { position: relative; display: grid; justify-items: start; gap: 20px; padding-block: clamp(80px, 8vw, 160px); }

.pd-proposal__title { font-family: var(--font-serif); font-size: clamp(28px, 3.3vw, 62px); font-weight: 600; line-height: 1.45; letter-spacing: .02em; }

.pd-proposal__text { max-width: 40em; font-size: clamp(14px, 1.05vw, 19px); line-height: 2; letter-spacing: .06em; color: rgba(255, 255, 255, .86); }

.pd-proposal__chapters { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-en); font-size: 11px; letter-spacing: .18em; color: rgba(255, 255, 255, .72); }

.pd-proposal__chapters li { display: flex; gap: 6px; }

.pd-proposal__num { color: var(--color-brand); }

.pd-proposal__button { min-width: min(100%, 320px); margin-top: 10px; }

.pd-proposal__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }

/* ---------- /proposal/ ---------- */

.pi-howto__list { display: grid; gap: 28px; margin-top: 40px; }

.pi-howto__item { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .26); }

.pi-howto__num { font-family: var(--font-serif); font-size: 28px; color: var(--color-brand); }

.pi-howto__en { margin-top: 10px; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .22em; }

.pi-howto__title { margin-top: 6px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; }

.pi-howto__text { margin-top: 8px; font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .84); }

/* ---------- /service/macross-map/g-macross/ ---------- */

.gm-about__inner { display: grid; gap: 30px; }

.gm-about__body { font-size: 15px; line-height: 2.05; letter-spacing: .06em; }

.gm-about__body p + p { margin-top: 1.2em; }

.gm-about__target { padding-left: 14px; border-left: 3px solid var(--color-brand); font-weight: 700; }

.gm-pair { display: grid; gap: 16px; }

.gm-pair__side { padding: 24px; border: 1px solid var(--color-line); }

.gm-pair__cross { justify-self: center; font-family: var(--font-en); font-size: 28px; color: var(--color-brand); }

.gm-pair__en { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--color-brand-text); }

.gm-pair__title { margin-top: 6px; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--color-hero-ink); }

.gm-pair__list { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.8; }

.gm-pair__list li { position: relative; padding-left: 18px; }

.gm-pair__list li::before { content: ""; position: absolute; top: .9em; left: 0; width: 8px; height: 2px; background: var(--color-brand); }

.gm-demo__lead { color: rgba(255, 255, 255, .86); }

.gm-demo__lab { container-type: inline-size; margin-top: 40px; }

.gm-demo__lab > .maplab { --u: calc(100cqw / 1110); }

.gm-demo__note { margin-top: 20px; }

.gm-stats { display: grid; gap: 22px; margin-top: 36px; }

.gm-why .pp-stat { border-top-color: var(--color-ink); }

.gm-why .pp-stat__figure { font-size: clamp(44px, 5vw, 88px); }

.gm-merits__list { display: grid; margin-top: 36px; border-top: 1px solid var(--color-ink); }

.gm-merits__item { display: flex; align-items: baseline; gap: 20px; padding: clamp(18px, 2vw, 34px) 0; border-bottom: 1px solid var(--color-line); }

.gm-merits__num { font-family: var(--font-serif); font-size: clamp(22px, 2vw, 36px); color: var(--color-brand); }

.gm-merits__title { font-family: var(--font-serif); font-size: clamp(20px, 2.1vw, 38px); font-weight: 600; color: var(--color-hero-ink); }

.gm-anagram__inner { display: grid; gap: 36px; }

.gm-anagram__text { margin-top: 20px; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, .86); }

.gm-anagram__query {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .36);
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 700;
  letter-spacing: .12em;
}

.gm-anagram__orders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }

.gm-anagram__order {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
  color: rgba(255, 255, 255, .76);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-normal) ease, color var(--dur-normal) ease;
}

.gm-anagram__order[aria-pressed="true"] { border-color: var(--color-brand); color: var(--color-white); }

.gm-anagram__num { font-family: var(--font-serif); color: rgba(255, 255, 255, .5); }

.gm-anagram__order[aria-pressed="true"] .gm-anagram__num { color: var(--color-brand); }

.pp-flist--page { margin-top: 36px; }

.gm-report__inner { display: grid; gap: 30px; }

.gm-report__text { margin-top: 18px; font-size: 15px; line-height: 2; }

.gm-report__list { border-top: 1px solid var(--color-ink); }

.gm-report__list li { display: flex; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 28px); font-weight: 600; }

.gm-report__num { font-family: var(--font-en); font-size: 13px; font-weight: 700; color: var(--color-brand-text); }

.gm-cases .pp-cases { margin-top: 36px; }

.gm-flow__steps { display: grid; gap: 16px; margin-top: 36px; }

.gm-flow__step { padding-top: 18px; border-top: 3px solid var(--color-line); }

.gm-flow__step:first-child { border-top-color: var(--color-brand); }

.gm-flow__label { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--color-brand-text); }

.gm-flow__title { margin-top: 8px; font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--color-hero-ink); }

.gm-flow__text { margin-top: 6px; font-size: 14px; line-height: 1.9; }

.gm-flow__after-title { margin-top: 56px; font-family: var(--font-serif); font-size: 22px; font-weight: 600; }

.gm-flow__after { margin-top: 18px; border-top: 1px solid var(--color-ink); }

.gm-flow__after li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--color-line); }

.gm-flow__after-name { font-weight: 700; }

.gm-flow__after-text { font-size: 14px; line-height: 1.8; color: var(--color-text); }

/* ---------- tablets and up ---------- */

@media (min-width: 768px) {
  .pp-market__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-problem__list,
  .pp-fgrid,
  .pp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-flist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .gm-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .gm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-anagram__orders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pi-howto__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw; }
  .pd-points__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5vw; }
  .gm-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- desktop: the 1920 grid (N × --u) ---------- */

@media (min-width: 1024px) {
  .pp-chapter__stage {
    grid-template-columns: calc(610 * var(--u)) minmax(0, 1fr);
    column-gap: calc(100 * var(--u));
    row-gap: 0;
    align-content: center;
    align-items: start;
    min-height: calc(1080 * var(--u));
    padding: calc(170 * var(--u)) calc(150 * var(--u)) calc(120 * var(--u));
  }

  .pp-head__index { column-gap: calc(18 * var(--u)); }
  .pp-head__num { font-size: calc(96 * var(--u)); }
  .pp-head__total { font-size: max(10px, calc(18 * var(--u))); }
  .pp-head__line { width: calc(64 * var(--u)); height: max(2px, calc(3 * var(--u))); }
  .pp-head__en { font-size: max(10px, calc(17 * var(--u))); }
  .pp-head__ja { font-size: max(10px, calc(16 * var(--u))); }
  .pp-head__title { margin-top: calc(44 * var(--u)); font-size: calc(46 * var(--u)); }
  .pp-head__lead { margin-top: calc(36 * var(--u)); font-size: max(12px, calc(20 * var(--u))); }

  .pp-chapter :is(.pp-source, .pp-note) { margin-top: calc(18 * var(--u)); font-size: max(10px, calc(14 * var(--u))); }
  .pp-chapter .pp-tags { gap: calc(8 * var(--u)); margin-top: calc(22 * var(--u)); }
  .pp-chapter .pp-tags li { padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }

  /* hero */
  .pp-hero__stage {
    min-height: max(100vh, calc(1080 * var(--u)));
    padding: calc(250 * var(--u)) calc(150 * var(--u)) calc(70 * var(--u));
  }

  .pp-hero__breadcrumb { position: absolute; top: calc(142 * var(--u)); left: calc(150 * var(--u)); }
  .pp-hero__brush { right: calc(-160 * var(--u)); bottom: calc(40 * var(--u)); width: calc(1300 * var(--u)); opacity: .82; }
  .pp-hero__name { top: calc(190 * var(--u)); right: calc(-30 * var(--u)); font-size: calc(250 * var(--u)); -webkit-text-stroke-width: max(1px, calc(1.5 * var(--u))); }
  .pp-hero__copy { width: calc(1160 * var(--u)); margin-top: 0; }
  .pp-hero__eyebrow { gap: calc(22 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }
  .pp-hero__eyebrow-line { width: calc(56 * var(--u)); height: max(2px, calc(3 * var(--u))); }
  .pp-hero__title { margin-top: calc(40 * var(--u)); font-size: calc(84 * var(--u)); font-feature-settings: "palt"; line-height: 1.32; }
  .pp-hero__lead { max-width: calc(860 * var(--u)); margin-top: calc(40 * var(--u)); font-size: max(13px, calc(22 * var(--u))); }
  .pp-hero .pp-flow { margin-top: calc(52 * var(--u)); row-gap: calc(18 * var(--u)); }
  .pp-hero .pp-flow__step { padding-right: calc(64 * var(--u)); }
  .pp-hero .pp-flow__step::before { right: calc(64 * var(--u)); bottom: calc(-12 * var(--u)); height: max(2px, calc(3 * var(--u))); }
  .pp-hero .pp-flow__step:not(:last-child)::after { right: calc(18 * var(--u)); width: calc(28 * var(--u)); }
  .pp-hero .pp-flow__en { font-size: max(10px, calc(19 * var(--u))); }
  .pp-hero .pp-flow__ja { font-size: max(10px, calc(14 * var(--u))); }
  .pp-hero__actions { gap: calc(56 * var(--u)); margin-top: calc(60 * var(--u)); }
  .pp-hero__present { display: inline-flex; min-width: calc(300 * var(--u)); }
  .pp-hero .pp-present-icon { width: max(16px, calc(26 * var(--u))); height: max(11px, calc(17 * var(--u))); }
  .pp-toc { padding-top: calc(70 * var(--u)); }
  .pp-toc__list { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0 calc(14 * var(--u)); }
  .pp-toc__link { gap: calc(6 * var(--u)); padding: calc(20 * var(--u)) 0 0; }
  .pp-toc__num { font-size: calc(28 * var(--u)); }
  .pp-toc__en { font-size: max(9px, calc(13 * var(--u))); }
  .pp-toc__ja { display: block; font-family: var(--font-sans); font-size: max(9px, calc(13 * var(--u))); color: rgba(255, 255, 255, .62); }

  /* 01 */
  .pp-problem__list { gap: calc(56 * var(--u)) calc(64 * var(--u)); }
  .pp-problem__item { padding-top: calc(26 * var(--u)); }
  .pp-problem__item::before { width: calc(96 * var(--u)); height: max(2px, calc(4 * var(--u))); }
  .pp-problem__num { font-size: max(10px, calc(14 * var(--u))); }
  .pp-problem__figure { gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
  .pp-problem__figure .pp-figure { font-size: calc(84 * var(--u)); }
  .pp-problem__figure-label { font-size: max(10px, calc(14 * var(--u))); }
  .pp-problem__title { margin-top: calc(18 * var(--u)); font-size: max(14px, calc(26 * var(--u))); }
  .pp-problem__item.is-plain .pp-problem__title { margin-top: calc(36 * var(--u)); font-size: max(15px, calc(30 * var(--u))); }
  .pp-problem__text { margin-top: calc(12 * var(--u)); font-size: max(12px, calc(17 * var(--u))); line-height: 1.9; }

  /* 02 */
  .pp-market { gap: calc(56 * var(--u)); }
  .pp-market__caption { margin-bottom: calc(24 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }
  .pp-market__stats { gap: calc(40 * var(--u)) calc(56 * var(--u)); }
  .pp-stat { padding-top: calc(20 * var(--u)); }
  .pp-chapter .pp-stat__figure { font-size: calc(76 * var(--u)); }
  .pp-chapter .pp-stat__label { margin-top: calc(12 * var(--u)); font-size: max(11px, calc(17 * var(--u))); }
  .pp-chapter .pp-stat__note { font-size: max(10px, calc(14 * var(--u))); }
  .pp-gap { gap: calc(22 * var(--u)); }
  .pp-gap__row { grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr) calc(160 * var(--u)); gap: calc(20 * var(--u)); font-size: max(11px, calc(17 * var(--u))); }
  .pp-gap__bar { height: calc(30 * var(--u)); }
  .pp-gap__result { gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
  .pp-gap__result-value { font-size: calc(100 * var(--u)); }
  .pp-gap__result-label { font-size: max(12px, calc(22 * var(--u))); }
  .pp-longtail__chart { height: calc(230 * var(--u)); }
  .pp-longtail__layer { gap: calc(6 * var(--u)); padding-top: calc(16 * var(--u)); border-top-width: max(2px, calc(3 * var(--u))); }
  .pp-longtail__en { font-size: max(9px, calc(13 * var(--u))); }
  .pp-longtail__label { font-size: max(10px, calc(16 * var(--u))); }
  .pp-longtail__query { gap: calc(18 * var(--u)); margin-top: calc(30 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)); font-size: max(12px, calc(24 * var(--u))); }
  .pp-market--bars { grid-template-columns: calc(430 * var(--u)) minmax(0, 1fr); column-gap: calc(64 * var(--u)); align-items: start; }
  .pp-market--bars .pp-market__stats { gap: calc(26 * var(--u)) calc(40 * var(--u)); }
  .pp-market--bars .pp-stat__figure { font-size: calc(60 * var(--u)); }
  .pp-market--bars .pp-body__source { grid-column: 1 / -1; }
  .pp-bars__list { gap: calc(24 * var(--u)); height: calc(460 * var(--u)); }
  .pp-bars__value { font-size: calc(50 * var(--u)); }
  .pp-bars__value small { font-size: max(10px, calc(16 * var(--u))); }
  .pp-bars__bar { margin-top: calc(14 * var(--u)); }
  .pp-bars__label { margin-top: calc(14 * var(--u)); font-size: max(10px, calc(17 * var(--u))); }
  .pp-bars__note { font-size: max(9px, calc(13 * var(--u))); }

  /* 03 */
  .pp-change__switch { margin-bottom: calc(40 * var(--u)); }
  .pp-change__toggle { --track: calc(90 * var(--u)); --knob: max(12px, calc(20 * var(--u))); gap: calc(24 * var(--u)); }
  .pp-change__side-en { font-size: max(10px, calc(17 * var(--u))); }
  .pp-change__side-ja { font-size: max(10px, calc(14 * var(--u))); }
  .pp-change__labels { grid-template-columns: minmax(0, 1fr) calc(110 * var(--u)) minmax(0, 1.15fr); padding-bottom: calc(14 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }
  .pp-change__row { grid-template-columns: minmax(0, 1fr) calc(110 * var(--u)) minmax(0, 1.15fr); padding: calc(30 * var(--u)) 0; }
  .pp-change__before { font-size: max(12px, calc(22 * var(--u))); }
  .pp-change__before::after { height: max(2px, calc(3 * var(--u))); }
  .pp-change__arrow { width: calc(44 * var(--u)); }
  .pp-change__after { font-size: max(14px, calc(31 * var(--u))); }
  .pp-matrix { font-size: max(11px, calc(19 * var(--u))); }
  .pp-matrix :is(th, td) { padding: calc(14 * var(--u)) calc(16 * var(--u)); }
  .pp-matrix thead th { font-size: max(10px, calc(17 * var(--u))); }
  .pp-mark { font-size: calc(26 * var(--u)); }

  /* 04 */
  .pp-solution { gap: calc(64 * var(--u)); }
  .pp-diagram { grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: calc(24 * var(--u)); }
  .pp-diagram__node { gap: calc(10 * var(--u)); padding: calc(40 * var(--u)) 0 0; border-top: 1px solid var(--color-line); border-left: 0; }
  .pp-diagram__node::before { top: calc(-8 * var(--u)); left: 0; width: max(9px, calc(16 * var(--u))); height: max(9px, calc(16 * var(--u))); }
  .pp-diagram__node::after { top: -1px; right: calc(-24 * var(--u)); bottom: auto; left: 0; width: auto; height: max(2px, calc(3 * var(--u))); transform: scaleX(0); transform-origin: 0 50%; }
  .pp-diagram__node:last-child::after { right: 0; }
  .pp-diagram__node:is(.is-current, .is-passed)::after { transform: scaleX(1); }
  .pp-diagram__en { font-size: max(9px, calc(14 * var(--u))); }
  .pp-diagram__title { font-size: max(14px, calc(25 * var(--u))); font-feature-settings: "palt"; }
  .pp-diagram__text { font-size: max(11px, calc(16 * var(--u))); }
  .pp-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(32 * var(--u)); }
  .pp-pillar { display: block; padding-top: calc(24 * var(--u)); }
  .pp-pillar__num { font-size: calc(40 * var(--u)); }
  .pp-pillar__title { margin-top: calc(16 * var(--u)); font-size: max(12px, calc(21 * var(--u))); }
  .pp-pillar__text { margin-top: calc(8 * var(--u)); font-size: max(11px, calc(15 * var(--u))); }

  /* 05 */
  .pp-process { grid-template-columns: calc(360 * var(--u)) minmax(0, 1fr); column-gap: calc(72 * var(--u)); row-gap: calc(24 * var(--u)); align-items: start; }
  .pp-process > .pp-note { grid-column: 1 / -1; }
  .pp-process__tabs { flex-direction: column; overflow: visible; border-bottom: 0; border-left: 1px solid var(--color-line); }
  .pp-process__tab { flex: none; grid-template-columns: calc(70 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); row-gap: calc(4 * var(--u)); padding: calc(24 * var(--u)) 0 calc(24 * var(--u)) calc(30 * var(--u)); }
  .pp-process__tab::after { top: 0; right: auto; bottom: 0; left: -2px; width: max(3px, calc(5 * var(--u))); height: auto; transform: scaleY(0); transform-origin: 50% 0; }
  .pp-process__tab[aria-selected="true"]::after { transform: scaleY(1); }
  .pp-process__tab-num { font-size: calc(36 * var(--u)); line-height: 1; }
  .pp-process__tab-en { font-size: max(10px, calc(20 * var(--u))); }
  .pp-process__tab-ja { font-size: max(10px, calc(14 * var(--u))); }
  .pp-process--long .pp-process__tab { padding-block: calc(12 * var(--u)); }
  .pp-process--long .pp-process__tab-num { font-size: calc(26 * var(--u)); }
  .pp-process--long .pp-process__tab-en { font-size: max(10px, calc(16 * var(--u))); }
  .pp-process__loop { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); padding-left: calc(30 * var(--u)); font-family: var(--font-en); font-size: max(9px, calc(13 * var(--u))); letter-spacing: .24em; color: var(--color-muted); }
  .pp-process__loop::before { content: ""; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border: max(2px, calc(3 * var(--u))) solid var(--color-brand); border-right-color: transparent; border-radius: 50%; }
  .pp-process__panels { padding-top: calc(20 * var(--u)); }
  .pp-process__panel-en { font-size: max(10px, calc(16 * var(--u))); }
  .pp-process__title { margin-top: calc(22 * var(--u)); font-size: calc(42 * var(--u)); }
  .pp-process__text { margin-top: calc(26 * var(--u)); font-size: max(12px, calc(20 * var(--u))); }

  /* 06 */
  .pp-chapter--experience .pp-chapter__stage { grid-template-columns: calc(470 * var(--u)) minmax(0, 1fr); column-gap: calc(64 * var(--u)); padding-top: calc(140 * var(--u)); padding-bottom: calc(80 * var(--u)); }
  .pp-chapter--experience .pp-head__title { font-size: calc(42 * var(--u)); }
  .pp-chapter--experience .pp-head__lead { font-size: max(11px, calc(18 * var(--u))); }
  .pp-demo__note { margin-top: calc(14 * var(--u)) !important; }

  .lab__step { column-gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(30 * var(--u)) calc(16 * var(--u)) 0; }
  .lab__step::after { right: calc(30 * var(--u)); height: max(2px, calc(4 * var(--u))); }
  .lab__step-num { font-size: calc(26 * var(--u)); }
  .lab__step-ja { font-size: max(10px, calc(17 * var(--u))); }
  .lab__step-en { font-size: max(8px, calc(12 * var(--u))); }
  .lab__step--extra { padding-left: calc(30 * var(--u)); }
  .lab__step--extra::after { left: calc(30 * var(--u)); }
  .lab__stage { margin-top: calc(28 * var(--u)); }

  :is(.lab--rcmp .lab__stage:not(.lab__stage--video), .search-lab, .journey__body) { grid-template-columns: calc(510 * var(--u)) minmax(0, 1fr); column-gap: calc(48 * var(--u)); }
  .compare { grid-template-columns: calc(620 * var(--u)) minmax(0, 1fr); column-gap: calc(48 * var(--u)); }
  .maplab { grid-template-columns: calc(440 * var(--u)) minmax(0, 1fr); column-gap: calc(48 * var(--u)); }
  .journey { gap: calc(24 * var(--u)); }

  .mock-browser__bar { gap: calc(12 * var(--u)); height: max(20px, calc(34 * var(--u))); padding: 0 calc(12 * var(--u)); font-size: max(8px, calc(13 * var(--u))); }
  .mock-browser__dots { gap: calc(6 * var(--u)); }
  .mock-browser__dots i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
  .mock-browser__tag { font-size: max(7px, calc(11 * var(--u))); }

  .lab__panel { gap: calc(18 * var(--u)); }
  .lab__content-en { font-size: max(9px, calc(13 * var(--u))); }
  .lab__content-title { margin-top: calc(8 * var(--u)); font-size: max(14px, calc(28 * var(--u))); }
  .lab__content-text { margin-top: calc(14 * var(--u)); font-size: max(11px, calc(17 * var(--u))); }
  .lab__nav { margin-top: calc(8 * var(--u)); padding-top: calc(16 * var(--u)); }
  .lab__nav-button { gap: calc(14 * var(--u)); min-height: max(36px, calc(52 * var(--u))); font-size: max(11px, calc(16 * var(--u))); }

  .replay { gap: calc(16 * var(--u)); margin-top: calc(22 * var(--u)); }
  :is(.replay__toggle, .vsplit__play) { gap: calc(14 * var(--u)); min-height: max(36px, calc(56 * var(--u))); padding-right: calc(20 * var(--u)); font-size: max(11px, calc(17 * var(--u))); }
  .replay__caption { font-size: max(11px, calc(16 * var(--u))); }
  .replay__phase { padding: calc(10 * var(--u)) 0; font-size: max(10px, calc(14 * var(--u))); }
  .replay__phase span:first-child { font-size: max(9px, calc(13 * var(--u))); }
  .heat-legend__bar { height: calc(14 * var(--u)); }
  .heat-legend__labels { font-size: max(10px, calc(14 * var(--u))); }
  .edit-toggle__button { padding: calc(16 * var(--u)) calc(18 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }
  .edit-toggle__button span:first-child { font-size: max(9px, calc(14 * var(--u))); }
  .cycle-mini { font-size: max(10px, calc(15 * var(--u))); }

  .search-levels { gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
  .search-level { grid-template-columns: calc(120 * var(--u)) minmax(0, 1fr); column-gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) 0 calc(12 * var(--u)) calc(20 * var(--u)); border-left-width: max(2px, calc(4 * var(--u))); }
  .search-level__en { font-size: max(9px, calc(14 * var(--u))); }
  .search-level__label { font-size: max(9px, calc(13 * var(--u))); }
  .search-level__query { font-size: max(11px, calc(17 * var(--u))); }

  .journey__node { gap: calc(4 * var(--u)); padding-top: calc(22 * var(--u)); }
  .journey__node::before { top: calc(-6 * var(--u)); width: max(10px, calc(14 * var(--u))); height: max(10px, calc(14 * var(--u))); }
  .journey__line { height: max(2px, calc(3 * var(--u))); }
  .journey__node-num { font-size: max(10px, calc(18 * var(--u))); }
  .journey__node-ja { font-size: max(10px, calc(16 * var(--u))); }
  .journey__node-en { font-size: max(8px, calc(11 * var(--u))); }

  .compare__cards { gap: calc(14 * var(--u)); }
  .compare__label { margin-bottom: calc(10 * var(--u)); font-size: max(10px, calc(15 * var(--u))); }
  .compare__vs { font-size: max(11px, calc(20 * var(--u))); }
  .compare__layers { gap: calc(10 * var(--u)); }
  .compare__layer { gap: calc(10 * var(--u)); min-height: max(36px, calc(52 * var(--u))); padding: 0 calc(18 * var(--u)); font-size: max(11px, calc(16 * var(--u))); }
  .compare__count { font-size: calc(56 * var(--u)); }
  .compare__total { font-size: max(10px, calc(16 * var(--u))); }
  .compare__message { font-size: max(12px, calc(21 * var(--u))); }

  .maplab__lead { font-size: max(13px, calc(24 * var(--u))); }
  .map-step { padding-top: calc(14 * var(--u)); }
  .map-step__num { font-size: max(11px, calc(20 * var(--u))); }
  .map-step__en { font-size: max(8px, calc(13 * var(--u))); }
  .map-step__ja { font-size: max(9px, calc(14 * var(--u))); }
  .map-facts { gap: calc(16 * var(--u)); }
  .map-facts li { gap: calc(6 * var(--u)); padding-top: calc(14 * var(--u)); }
  .map-facts__value { font-size: calc(46 * var(--u)); }
  .map-facts__label { font-size: max(9px, calc(14 * var(--u))); }

  .lab .vsplit { grid-template-columns: calc(700 * var(--u)) minmax(0, 1fr); column-gap: calc(44 * var(--u)); align-items: start; }
  .lab .vsplit__stage { aspect-ratio: 16 / 11; }
  .lab .vsplit__photo-text { gap: calc(10 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
  .lab .vsplit__tag { font-size: max(8px, calc(13 * var(--u))); }
  .lab .vsplit__caption { font-size: calc(44 * var(--u)); }
  .lab .vsplit__time { font-size: max(9px, calc(14 * var(--u))); }
  .lab .vsplit__handle { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
  .lab .vsplit__side-copy { gap: calc(14 * var(--u)); }
  .lab .vsplit__label { font-size: max(10px, calc(15 * var(--u))); }
  .lab .vsplit__title { font-size: max(15px, calc(34 * var(--u))); }
  .lab .vsplit__text { font-size: max(11px, calc(16 * var(--u))); }
  .lab .vsplit__range { font-size: max(8px, calc(12 * var(--u))); }
  .lab .vsplit__range input { width: calc(180 * var(--u)); }
  .lab .vsplit__stats { gap: calc(16 * var(--u)); }
  .lab .vsplit__stats .pp-stat__figure { font-size: calc(46 * var(--u)); }
  .lab .vsplit__stat-label { font-size: max(9px, calc(14 * var(--u))); }

  /* 07 */
  .pp-features { gap: calc(34 * var(--u)); }
  .pp-features__tab { gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(44 * var(--u)) calc(18 * var(--u)) 0; font-size: max(11px, calc(19 * var(--u))); }
  .pp-features__tab::after { right: calc(44 * var(--u)); height: max(2px, calc(4 * var(--u))); }
  .pp-features__tab-num { font-size: max(11px, calc(20 * var(--u))); }
  .pp-fgrid { gap: calc(40 * var(--u)) calc(56 * var(--u)); }
  .pp-fgrid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-fitem { padding-top: calc(22 * var(--u)); }
  .pp-fitem__en { font-size: max(9px, calc(13 * var(--u))); }
  .pp-fitem__title { margin-top: calc(10 * var(--u)); font-size: max(14px, calc(27 * var(--u))); }
  .pp-fitem__text { margin-top: calc(10 * var(--u)); font-size: max(11px, calc(16 * var(--u))); }
  .pp-contrast { grid-template-columns: minmax(0, 1fr) calc(90 * var(--u)) minmax(0, 1fr); align-items: start; gap: 0 calc(24 * var(--u)); }
  .pp-contrast__col { padding-top: calc(28 * var(--u)); }
  .pp-contrast__arrow { position: relative; align-self: center; width: 100%; height: max(2px, calc(3 * var(--u))); }
  .pp-contrast__arrow::after { content: ""; position: absolute; top: 50%; right: 0; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-top: max(2px, calc(3 * var(--u))) solid var(--color-brand); border-right: max(2px, calc(3 * var(--u))) solid var(--color-brand); transform: translateY(-50%) rotate(45deg); }
  .pp-contrast__title { font-size: max(15px, calc(32 * var(--u))); }
  .pp-contrast__list { gap: calc(16 * var(--u)); margin-top: calc(26 * var(--u)); }
  .pp-contrast__list li { padding-left: calc(28 * var(--u)); font-size: max(12px, calc(20 * var(--u))); }
  .pp-contrast__list li::before { width: calc(14 * var(--u)); }
  .pp-chapter .pp-flist { column-gap: calc(48 * var(--u)); }
  .pp-chapter .pp-flist__item { column-gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) 0; }
  .pp-chapter .pp-flist__num { font-size: max(12px, calc(22 * var(--u))); }
  .pp-chapter .pp-flist__title { font-size: max(11px, calc(17 * var(--u))); }
  .pp-chapter .pp-flist__text { font-size: max(9px, calc(13 * var(--u))); }
  .pp-chapter .pp-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(28 * var(--u)); }
  .pp-chapter .pp-case { padding-top: calc(20 * var(--u)); }
  .pp-chapter .pp-case__industry { font-size: max(12px, calc(20 * var(--u))); }
  .pp-chapter .pp-case__value { margin-top: calc(10 * var(--u)); }
  .pp-chapter .pp-case__label { font-size: max(10px, calc(15 * var(--u))); }
  .pp-chapter .pp-case__num { font-size: calc(72 * var(--u)); }
  .pp-chapter .pp-case__unit { font-size: max(11px, calc(18 * var(--u))); }
  .pp-chapter .pp-case__table { margin-top: calc(14 * var(--u)); font-size: max(9px, calc(14 * var(--u))); }
  .pp-chapter .pp-case__table :is(th, td) { padding: calc(8 * var(--u)) 0; }

  /* 08 */
  .pp-fit { grid-template-columns: minmax(0, 1fr) calc(300 * var(--u)); column-gap: calc(64 * var(--u)); align-items: end; }
  .pp-fit__item { gap: calc(26 * var(--u)); min-height: max(44px, calc(90 * var(--u))); padding: calc(18 * var(--u)) 0; font-size: max(12px, calc(22 * var(--u))); }
  .pp-fit__check { font-size: max(16px, calc(32 * var(--u))); }
  .pp-fit__result { display: grid; gap: calc(18 * var(--u)); }
  .pp-fit__num { font-size: calc(130 * var(--u)); }
  .pp-fit__total { font-size: max(11px, calc(22 * var(--u))); }
  .pp-fit__message { font-size: max(13px, calc(26 * var(--u))); }

  /* 09 */
  /* CONSULT: the head spans the slide so the long closing line keeps its two lines. */
  .pp-chapter--consult .pp-chapter__stage { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .pp-chapter--consult .pp-head__title { font-size: calc(70 * var(--u)); }
  .pp-consult { gap: calc(44 * var(--u)); max-width: calc(1080 * var(--u)); padding-top: calc(56 * var(--u)); }
  .pp-consult__brush { right: calc(-200 * var(--u)); width: calc(1300 * var(--u)); opacity: .78; }
  .pp-consult__text { font-size: max(13px, calc(23 * var(--u))); }
  .pp-consult__actions { gap: calc(34 * var(--u)); }
  .pp-consult__primary { min-width: calc(480 * var(--u)); min-height: max(56px, calc(84 * var(--u))); font-size: max(14px, calc(20 * var(--u))); }
  .pp-consult__links { column-gap: calc(56 * var(--u)); }
  .pp-consult__links .text-link { font-size: max(12px, calc(19 * var(--u))); }

  /* toolbar */
  .pp-toolbar { right: 28px; bottom: 28px; }
  .pp-toolbar__current { display: flex; }
  .pp-toolbar__button--present { display: inline-flex; }

  /* pages */
  .pd-overview__inner,
  .gm-about__inner,
  .gm-anagram__inner,
  .gm-report__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 6vw; align-items: start; }
  .gm-pair { grid-column: 1 / -1; }
  .pd-overview__body,
  .gm-about__body { font-size: clamp(15px, 1.05vw, 19px); }
  .pd-points__title { font-size: clamp(19px, 1.45vw, 26px); }
  .pd-points__text { font-size: clamp(14px, .95vw, 17px); }
  .pd-proposal__inner { gap: 26px; }
  .gm-merits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5vw; }
  .gm-anagram__inner { align-items: center; }
  .gm-flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4vw; }
  .gm-flow__after li { grid-template-columns: 20em minmax(0, 1fr); gap: 24px; }
  .gm-cases .pp-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; }
  .gm-cases .pp-case__num { font-size: clamp(44px, 4vw, 72px); }
}

@media (min-width: 1280px) {
  .pp-flist--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  :is(.vsplit__frame, .vsplit__frame-img, .vsplit__rec, .mk-search__caret, .mk-result) { animation: none !important; }
  .vsplit__frame:first-child { opacity: 1; }
  .pp-present__wipe { display: none; }
  .pp-switcher { clip-path: none; transition: none; }
  .pp-switcher .solution-item { opacity: 1; transform: none; }
  :is(.rcmp-page, .map-screen__route, .map-card, .map-pin, .journey__screen, .cc-layer, .pp-gap__fill, .pp-bars__bar) { transition: none !important; }
  .is-presenting .proposal [data-slide] { transition: none; }
}

/* ---------- additions ---------- */

.search-lab.is-typing .mk-results { visibility: hidden; }

[data-slide] :is(h1, h2)[tabindex="-1"]:focus { outline: none; }

/* The cover as a slide: no PRESENT / read buttons, and room for the table of contents. */
.is-presenting .pp-hero__actions { display: none; }

@media (min-width: 1024px) {
  .is-presenting .pp-hero__stage { padding-top: calc(190 * var(--u)); }
}