/* JOYWALK_修正指示.pdf — overrides scoped to test.html, 2026-09-24.
   Lettering and character PNGs are isolated from the original vector objects. */

/* Full-width top and bottom bands; the artwork itself is never cropped. */
.site-shell,
.navigation {
  max-width: none;
}

.hero-art {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.app-banner,
.organizers,
.site-footer {
  width: 100%;
}

/* Reduce the central PC composition to 80%, including its type and spacing. */
.page-content {
  --s: min(.0416666667vw, .8px);
  width: 80%;
  max-width: 1536px;
  margin-inline: auto;
  font-size: calc(24 * var(--s));
}

/* The composition shrinks, while the sky still joins the full-width hero. */
.concept {
  background: none;
  isolation: isolate;
}

.concept:before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: url('../index2/sky-pattern.webp') repeat-x top /
    calc(80 * var(--s)) calc(1200 * var(--s));
  z-index: -1;
  pointer-events: none;
}

.overview-step h3 {
  line-height: 0;
}

.overview-step-art {
  width: auto;
  height: calc(60 * var(--s));
  margin-inline: auto;
}

.points-table-art {
  width: calc(100% - 42% - 55 * var(--s));
  height: auto;
  flex: 1;
  min-width: 0;
}

.coin-art {
  width: calc(200 * var(--s));
  height: auto;
  flex: 0 0 auto;
}

.virtual-art {
  gap: calc(24 * var(--s));
}

.virtual-art .coins,
.stamp-rally .coins {
  gap: calc(26 * var(--s));
}

.rank-label-art {
  width: calc(220 * var(--s));
  height: auto;
  margin-inline: auto;
}

.rank-label {
  line-height: 0;
  margin-top: calc(22 * var(--s));
}

.prize-point-art {
  width: calc(220 * var(--s));
  height: auto;
  margin-inline: auto;
}

.prize-character {
  width: calc(165 * var(--s));
  height: auto;
  max-height: none;
  right: calc(45 * var(--s));
  top: calc(-43 * var(--s));
}

.faq .content:after {
  background-image: url('../test-0924/faq-boy.png');
  width: calc(210 * var(--s));
  height: calc(230 * var(--s));
}

.entry-date-art {
  margin-bottom: calc(66 * var(--s));
}

.entry-date-art img {
  width: 100%;
  height: auto;
}

.group-entry-panel {
  overflow: visible;
  clip-path: none;
  background: transparent;
  position: relative;
}

.group-entry-panel:before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: var(--cut);
  z-index: -1;
}

.group-entry-panel .panel-inner {
  overflow: visible;
  clip-path: none;
  background: transparent;
  position: relative;
}

.group-entry-panel .panel-inner:before {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  clip-path: var(--cut);
  z-index: -1;
}

.group-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto calc(200 * var(--s));
  gap: calc(28 * var(--s));
}

.group-entry > div:first-child {
  width: auto;
}

.group-entry > .entry-character {
  width: auto;
  position: relative;
  align-self: end;
}

.entry-character .entry-man {
  width: calc(195 * var(--s));
  height: auto;
  max-height: none;
  margin: 0;
}

.entry-speech {
  position: absolute;
  width: calc(290 * var(--s));
  max-width: none;
  right: calc(-12 * var(--s));
  bottom: calc(100% + 20 * var(--s));
  height: auto;
}

.step-circle-art {
  border: none;
  border-radius: 0;
  padding: 0;
  object-fit: contain;
}

/* These labels are images, but are not the neighboring app screenshots. */
.event-step > .step-circle-art {
  width: calc(80 * var(--s));
  height: calc(80 * var(--s));
  margin: 0;
  order: initial;
}

.event-step > p {
  width: calc(100% + 82 * var(--s));
  margin-left: calc(-82 * var(--s));
  font-size: calc(22 * var(--s));
}

.store-links img {
  object-fit: contain;
}

/* Mobile keeps the original readable content width with the same corrected art. */
@media (max-width: 767px) {
  .page-content {
    --s: .1333333333vw;
    width: 100%;
    max-width: none;
    font-size: calc(28 * var(--s));
  }

  .overview-step-art {
    height: calc(52 * var(--s));
  }

  .concept:before {
    background-size: calc(80 * var(--s)) calc(850 * var(--s));
  }

  .event-step > .step-circle-art {
    width: calc(115 * var(--s));
    height: calc(115 * var(--s));
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .event-step > p {
    width: auto;
    margin-left: 0;
    font-size: calc(28 * var(--s));
  }

  .points-table-art {
    width: 100%;
    flex: none;
  }

  .coin-art {
    width: calc(195 * var(--s));
  }

  .virtual-art {
    gap: calc(45 * var(--s));
  }

  .stamp-rally .coins {
    gap: calc(40 * var(--s));
  }

  .rank-label-art,
  .prize-point-art {
    width: calc(220 * var(--s));
  }

  .prize-character {
    width: calc(140 * var(--s));
    height: auto;
    right: calc(32 * var(--s));
    top: calc(-85 * var(--s));
  }

  .faq .content:after {
    width: calc(175 * var(--s));
    height: calc(195 * var(--s));
  }

  .entry-date-art {
    margin-top: calc(50 * var(--s));
    margin-bottom: calc(80 * var(--s));
  }

  .group-entry {
    display: flex;
    gap: calc(30 * var(--s));
  }

  .group-entry > div:first-child {
    width: 100%;
  }

  .group-entry > .entry-character {
    width: calc(155 * var(--s));
    margin-left: auto;
    margin-right: calc(12 * var(--s));
    order: 1;
  }

  .entry-character .entry-man {
    width: 100%;
  }

  .entry-speech {
    width: calc(290 * var(--s));
    right: calc(100% + 20 * var(--s));
    bottom: calc(50 * var(--s));
  }

  .group-entry .entry-button {
    margin-top: 0;
    order: 2;
  }
}
/* Keep the frame backgrounds in their own stacking contexts. */
.group-entry-panel,
.group-entry-panel .panel-inner {
  isolation: isolate;
}