:root {
  --road-color: #f0c878;
  --cat-size: clamp(100px, 14vw, 210px);
  --cat-speed: 28s;
  --cat-delay: -10s;
  --cat-road-y: 16%;
  --pumpkin-size: clamp(85px, 11vw, 165px);
  --pumpkin-speed: 32s;
  --pumpkin-delay: -22s;
  --pumpkin-road-y: 24%;
  --pumpkin-one-size: clamp(92px, 12.5vw, 185px);
  --pumpkin-one-speed: 30s;
  --pumpkin-one-delay: -5s;
  --pumpkin-one-road-y: 19%;
  --sheet-size: clamp(78px, 10.5vw, 155px);
  --sheet-speed: 34s;
  --sheet-delay: -15s;
  --sheet-road-y: 27%;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  touch-action: pan-y pinch-zoom;
}
body {
  overflow-x: clip;
  background: var(--road-color);
}

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: var(--road-color);
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__characters { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.character {
  position: absolute;
  left: 0;
  bottom: var(--road-y);
  width: var(--size);
  height: var(--size);
  animation: walk-across var(--speed) linear var(--delay) infinite;
  z-index: var(--depth, 1);
  will-change: transform;
}
.character canvas { display: block; width: 100%; height: 100%; background: transparent; }
.character--cat {
  --size: var(--cat-size);
  --road-y: var(--cat-road-y);
  --speed: var(--cat-speed);
  --delay: var(--cat-delay);
  --depth: 2;
}
.character--pumpkin {
  --size: var(--pumpkin-size);
  --road-y: var(--pumpkin-road-y);
  --speed: var(--pumpkin-speed);
  --delay: var(--pumpkin-delay);
  --depth: 1;
}
.character--pumpkin-one {
  --size: var(--pumpkin-one-size);
  --road-y: var(--pumpkin-one-road-y);
  --speed: var(--pumpkin-one-speed);
  --delay: var(--pumpkin-one-delay);
  --depth: 2;
}
.character--sheet {
  --size: var(--sheet-size);
  --road-y: var(--sheet-road-y);
  --speed: var(--sheet-speed);
  --delay: var(--sheet-delay);
  --depth: 1;
}
.character--main-fixed {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: none;
  transform: none;
  z-index: 9;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  will-change: opacity, transform;
}

.character--main-fixed.is-hidden-in-depth {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

@keyframes walk-across {
  from { transform: translateX(calc(-100% - var(--size))); }
  to { transform: translateX(calc(100vw + var(--size))); }
}

.hero__content { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.hero__logo {
  position: absolute;
  top: clamp(16px, 3.5svh, 36px);
  left: 50%;
  width: min(72vw, 900px);
  height: auto;
  transform: translateX(-50%);
  object-fit: contain;
}

.hero__speech {
  position: absolute;
  left: clamp(225px, 25vw, 380px);
  bottom: clamp(22px, 3svh, 34px);
  width: max-content;
  max-width: none;
  padding: 17px 23px;
  color: #24132f;
  background: #fff9df;
  border: 4px solid #24132f;
  box-shadow: 7px 8px 0 #ed7900;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform;
}

.hero__speech.is-scrolled-away {
  opacity: 0;
  transform: translateY(12px);
}

.hero__speech::before,
.hero__speech::after {
  content: "";
  position: absolute;
  transform: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.hero__speech::before {
  top: 22%;
  left: -36px;
  width: 36px;
  height: 39px;
  background: #24132f;
  z-index: 1;
}

.hero__speech::after {
  top: calc(22% + 4px);
  left: -27px;
  width: 27px;
  height: 29px;
  background: #fff9df;
  z-index: 2;
}

.hero__speech-text {
  position: relative;
  z-index: 3;
  margin: 0;
  white-space: nowrap;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.04em;
  transition: opacity 180ms ease, transform 180ms ease;
}

.hero__speech-text.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.event-intro {
  position: relative;
  overflow: hidden;
  padding: 76px 20px 84px;
  color: #281631;
  background:
    radial-gradient(circle at 8% 12%, rgb(238 121 0 / 12%) 0 46px, transparent 47px),
    radial-gradient(circle at 92% 82%, rgb(126 148 61 / 13%) 0 62px, transparent 63px),
    #f8dda0;
}

.event-intro::before,
.event-intro::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 16px;
  background: #ee7900;
  transform: rotate(-8deg);
}

.event-intro::before { top: 32px; left: -12px; }
.event-intro::after { right: -12px; bottom: 34px; transform: rotate(8deg); }

.event-intro__inner {
  width: min(100%, 1040px);
  margin-inline: auto;
  text-align: center;
}

.event-intro__eyebrow {
  margin: 0 0 10px;
  color: #7a4a26;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.event-intro__title {
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(28px, 8vw, 50px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.event-intro__title::after {
  content: "";
  display: block;
  width: 86px;
  height: 6px;
  margin: 18px auto 24px;
  background: #ee7900;
  border-radius: 999px;
  transform: rotate(-2deg);
}

.event-intro__description {
  margin: 0 auto;
  max-width: 720px;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 700;
  line-height: 2;
}

.event-intro__desktop-break { display: none; }

.event-intro__features {
  display: grid;
  gap: 14px;
  margin: 38px auto 32px;
}

.event-feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 18px;
  text-align: left;
  background: #fff9e8;
  border: 3px solid #281631;
  border-radius: 22px 16px 24px 15px;
  box-shadow: 5px 6px 0 var(--card-color, #ee7900);
}

.event-feature:nth-child(2) { --card-color: #78518c; }
.event-feature:nth-child(3) { --card-color: #7e943d; }

.event-feature__image {
  display: block;
  width: 56px;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f7c763;
  border-radius: 50% 45% 52% 43%;
}

.event-feature h3 {
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.event-feature__note {
  margin: 8px 0 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.event-intro__price {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin: 14px 0 0;
  padding: 13px 25px 12px;
  color: #fff9e8;
  background: #5a3470;
  border: 3px solid #281631;
  border-radius: 18px 13px 19px 14px;
  box-shadow: 5px 6px 0 #ee7900;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(27px, 8vw, 40px);
  font-weight: 900;
  line-height: 1;
}

.event-intro__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 34px auto 0;
}

.event-intro__facts p {
  display: grid;
  align-content: center;
  min-height: 104px;
  margin: 0;
  padding: 15px;
  background: rgb(255 253 241 / 76%);
  border: 3px solid #281631;
  border-radius: 17px 13px 20px 14px;
}

.event-intro__facts span,
.event-entry__eyebrow {
  color: #7e943d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.event-intro__facts strong { margin-top: 5px; font-size: clamp(15px, 2vw, 19px); line-height: 1.5; }

.event-entry {
  position: relative;
  z-index: 11;
  max-width: 780px;
  margin: 32px auto 0;
  padding: 24px clamp(18px, 4vw, 34px);
  text-align: left;
  background: #fff9df;
  border: 4px solid #281631;
  border-radius: 24px 17px 27px 18px;
  box-shadow: 8px 9px 0 #7e943d;
  pointer-events: auto;
}

.event-entry__eyebrow { margin: 0; }
.event-entry h3 { margin: 5px 0 12px; color: #6d3a7d; font-size: clamp(21px, 4vw, 30px); }
.event-entry > p { line-height: 1.7; }
.event-entry ol { display: grid; gap: 5px; margin: 14px 0; padding-left: 1.5em; font-weight: 800; }
.event-entry__deadline { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; color: #a04a19; }
.event-entry__deadline span { font-size: 13px; font-weight: 800; }
.event-entry__payment { margin: 4px 0 0; font-size: 13px; font-weight: 800; }

.event-entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.event-entry__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 18px;
  color: #fff;
  border: 3px solid #281631;
  border-radius: 14px 11px 16px 12px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 5px 0 #281631;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.event-entry__button--instagram { background: #a23a85; }
.event-entry__button:hover { transform: translateY(-2px); box-shadow: 5px 7px 0 #281631; }
.event-entry__button:focus-visible { outline: 4px solid #ffc548; outline-offset: 3px; }

.event-collab {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 780px;
  margin: 24px auto 0;
  padding: 15px 19px;
  text-align: left;
  background: rgb(255 197 72 / 30%);
  border: 2px dashed #a04a19;
  border-radius: 15px;
}

.event-collab > span { font-size: 30px; }
.event-collab p { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.65; }
.event-collab strong { color: #6d3a7d; font-size: 15px; }

.rally-map {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 9vw, 112px) 20px;
  color: #281631;
  text-align: center;
  background:
    radial-gradient(circle at 10% 18%, rgb(237 121 0 / 12%) 0 52px, transparent 53px),
    radial-gradient(circle at 92% 80%, rgb(109 58 125 / 10%) 0 68px, transparent 69px),
    #fff5cf;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

.rally-map__inner { width: min(100%, 980px); margin: 0 auto; }
.rally-map__eyebrow {
  margin: 0 0 8px;
  color: #ed7900;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.rally-map h2 {
  margin: 0;
  color: #61356f;
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.3;
}

.rally-map__intro {
  margin: 17px auto 0;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  line-height: 1.8;
}

.rally-map__figure {
  margin: 34px auto 0;
  padding: clamp(10px, 2vw, 18px);
  background: #fff;
  border: 4px solid #281631;
  border-radius: 20px 14px 24px 16px;
  box-shadow: 10px 12px 0 #ed7900;
}

.rally-map__figure a { display: block; }
.rally-map__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.rally-map__figure figcaption {
  margin-top: 12px;
  color: #735f46;
  font-size: 12px;
  font-weight: 800;
}

.event-intro__price span { font-size: 0.52em; }

.event-intro__next {
  position: relative;
  display: block;
  width: max-content;
  max-width: min(calc(100% - clamp(220px, 23vw, 280px) - 20px), 780px);
  margin: 58px 0 0 clamp(220px, 23vw, 280px);
  padding: 24px 38px;
  color: #281631;
  background: linear-gradient(135deg, #fffdf0, #fff1b8);
  border: 4px solid #281631;
  border-radius: 20px 25px 18px 27px;
  box-shadow: 8px 9px 0 #ee7900, 13px 14px 0 rgb(90 52 112 / 28%);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(22px, 5.8vw, 34px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.025em;
  text-shadow: 1px 2px 0 #fff;
  opacity: 0;
  transform: translateY(34px) scale(0.94);
  transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.2, 0.8, 0.25, 1.08);
  will-change: opacity, transform;
}

.event-intro__next.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.event-intro__next::before,
.event-intro__next::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.event-intro__next::before {
  left: -37px;
  bottom: 13px;
  border-top: 27px solid transparent;
  border-right: 40px solid #281631;
  border-bottom: 7px solid transparent;
}

.event-intro__next::after {
  left: -27px;
  bottom: 18px;
  border-top: 20px solid transparent;
  border-right: 30px solid #fff8d3;
  border-bottom: 4px solid transparent;
}

.depth-zone {
  position: relative;
  height: 620svh;
  min-height: 1900px;
  background: #24132f;
}

.depth-zone__scene {
  --road-scale: 0.72;
  --road-shift: 0px;
  --road-base-shift: 16svh;
  --far-scale: 1;
  --far-shift: 0px;
  --middle-scale: 1;
  --middle-shift: 0px;
  --near-scale: 1;
  --near-shift: 0px;
  position: sticky;
  top: 0;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  color: #fff9e8;
  background: #f5d88f;
}

.depth-zone__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 17%, #fff7c9 0 5%, rgb(255 247 201 / 42%) 5.3% 8%, transparent 8.4%),
    linear-gradient(#f3cf76 0%, #f9dda0 48%, #fff0bd 100%);
}

.depth-zone__town {
  position: absolute;
  left: 50%;
  bottom: 35%;
  z-index: 2;
  width: max(118%, 1200px);
  height: auto;
  transform-origin: center bottom;
  transform: translateX(-50%) translateY(var(--middle-shift)) scale(var(--middle-scale));
  filter: saturate(0.62) brightness(1.2);
  opacity: 0.82;
  will-change: transform;
}

.depth-layer {
  position: absolute;
  left: -8%;
  width: 116%;
  transform-origin: center bottom;
  will-change: transform;
}

.depth-layer--far {
  bottom: 34%;
  z-index: 1;
  height: 31%;
  background:
    linear-gradient(145deg, transparent 50%, #392548 51%) 0 100% / 22% 100% repeat-x;
  transform: translateY(var(--far-shift)) scale(var(--far-scale));
}

.depth-layer--middle {
  bottom: 21%;
  z-index: 2;
  height: 38%;
  opacity: 0.96;
  background:
    radial-gradient(ellipse at 8% 100%, #463050 0 34%, transparent 35%),
    radial-gradient(ellipse at 25% 100%, #5e3c59 0 38%, transparent 39%),
    radial-gradient(ellipse at 73% 100%, #5e3c59 0 37%, transparent 38%),
    radial-gradient(ellipse at 94% 100%, #463050 0 35%, transparent 36%);
  transform: translateY(var(--middle-shift)) scale(var(--middle-scale));
}

.depth-layer--near {
  bottom: -12%;
  z-index: 5;
  height: 42%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0 100%, #25192f 0 45%, transparent 46%),
    radial-gradient(ellipse at 100% 100%, #25192f 0 45%, transparent 46%);
  transform: translateY(var(--near-shift)) scale(var(--near-scale));
}

.depth-zone__road {
  position: absolute;
  left: 50%;
  bottom: -19%;
  z-index: 3;
  width: 76%;
  height: 70%;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #d8c49f, #f1dfb9 48%, #d8c49f);
  transform-origin: center top;
  transform: translate(-50%, calc(var(--road-base-shift) + var(--road-shift))) scale(var(--road-scale));
  will-change: transform;
}

.depth-zone__tiles {
  position: absolute;
  inset: -38% 0 0;
  transform: translateY(var(--tiles-shift, 0px));
  will-change: transform;
}

.depth-zone__tiles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 1.7;
  background: rgb(123 94 74 / 22%);
  border-radius: 2px;
  transform: translateX(-50%) perspective(300px) rotateX(62deg);
}

.depth-zone__walker {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 7svh, 72px);
  z-index: 8;
  width: clamp(120px, 18vw, 220px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 5px rgb(36 19 47 / 25%));
}

.depth-zone__walker canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.depth-zone__heading {
  position: absolute;
  top: clamp(28px, 6svh, 68px);
  left: 50%;
  z-index: 8;
  width: min(90%, 760px);
  text-align: center;
  transform: translateX(-50%);
  text-shadow: 0 3px 0 rgb(36 19 47 / 45%);
}

.depth-zone__heading span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.depth-zone__heading h2 {
  margin: 8px 0 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(25px, 6vw, 48px);
  line-height: 1.3;
}

.depth-stop {
  position: absolute;
  z-index: 7;
  opacity: var(--candy-opacity, 0);
  pointer-events: none;
  will-change: opacity, transform;
}

.depth-stop--candy {
  left: 50%;
  top: 48%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 3vw, 34px);
  width: min(82%, 900px);
  transform: translate(-50%, -50%) translateY(var(--candy-y, -80px)) scale(var(--candy-scale, 0.06));
  transform-origin: center center;
}

.depth-stop--candy img {
  width: clamp(150px, 28vw, 330px);
  max-height: 65svh;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(10px 14px 0 rgb(36 19 47 / 28%));
}

.depth-stop--ghost {
  left: 50%;
  top: 48%;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  width: min(82%, 900px);
  opacity: var(--ghost-opacity, 0);
  transform: translate(-50%, -50%) translateY(var(--ghost-y, -80px)) scale(var(--ghost-scale, 0.05));
  transform-origin: center center;
  z-index: 6;
}

.depth-stop__ghost-image {
  flex: 0 0 clamp(170px, 25vw, 300px);
  width: clamp(170px, 25vw, 300px);
  max-height: 58svh;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(10px 14px 0 rgb(36 19 47 / 25%));
}

.depth-stop--stage {
  left: 50%;
  top: 48%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  width: min(84%, 940px);
  opacity: var(--stage-opacity, 0);
  transform: translate(-50%, -50%) translateY(var(--stage-y, -90px)) scale(var(--stage-scale, 0.05));
  transform-origin: center center;
  z-index: 6;
}

.depth-stop__stage-image {
  flex: 0 0 clamp(200px, 34vw, 410px);
  width: clamp(200px, 34vw, 410px);
  max-height: 58svh;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(10px 14px 0 rgb(36 19 47 / 25%));
}

.depth-stop__message--stage {
  flex: 1;
  width: auto;
  text-align: left;
  position: relative;
  z-index: 1;
}

.depth-stop--notice {
  left: 50%;
  top: 49%;
  width: min(88%, 760px);
  max-height: 86svh;
  overflow: auto;
  padding: clamp(24px, 4vw, 42px);
  color: #281631;
  background: #fff3c4;
  border: clamp(7px, 1.2vw, 12px) solid #7c4825;
  border-radius: 10px 15px 8px 13px;
  box-shadow: 0 0 0 4px #2e1b2f, 14px 16px 0 rgb(36 19 47 / 30%);
  opacity: var(--notice-opacity, 0);
  transform: translate(-50%, -50%) translateY(var(--notice-y, -70px)) scale(var(--notice-scale, 0.08));
  transform-origin: center center;
  z-index: 10;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

.event-notice__pin {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ed7900;
  border: 3px solid #281631;
  transform: translateX(-50%);
}

.event-notice__eyebrow {
  margin: 0 0 4px;
  color: #7e943d;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.depth-stop--notice h2 {
  margin: 0 0 20px;
  color: #6d3a7d;
  text-align: center;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.35;
}

.event-notice__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.event-notice__details div {
  padding: 12px 14px;
  background: rgb(255 255 255 / 58%);
  border: 2px dashed #d77a2b;
  border-radius: 12px;
}

.event-notice__details dt {
  color: #7c4825;
  font-size: 13px;
  font-weight: 900;
}

.event-notice__details dd {
  margin: 3px 0 0;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
  line-height: 1.55;
}

.event-notice__notes {
  margin-top: 14px;
  padding: 12px 14px;
  color: #fff9df;
  background: #6d3a7d;
  border-radius: 12px 9px 14px 10px;
}

.event-notice__notes h3,
.event-notice__notes p { margin: 0; }
.event-notice__notes h3 { color: #ffc548; font-size: 15px; }
.event-notice__notes p { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.7; }

.depth-stop__message {
  flex: 1;
  padding: clamp(16px, 3vw, 30px);
  color: #281631;
  background: #fff9df;
  border: 4px solid #281631;
  border-radius: 22px 17px 25px 16px;
  box-shadow: 8px 9px 0 #ed7900;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(14px, 2.1vw, 21px);
  font-weight: 800;
  line-height: 1.75;
}

.depth-stop__message p { margin: 0; }
.depth-stop__message .depth-stop__lead {
  margin-bottom: 8px;
  color: #6d3a7d;
  font-size: 1.28em;
  font-weight: 900;
}

.depth-zone__progress {
  position: absolute;
  right: 18px;
  top: 22%;
  z-index: 9;
  width: 6px;
  height: 56%;
  overflow: hidden;
  background: rgb(255 249 232 / 28%);
  border-radius: 999px;
}

.depth-zone__progress-fill {
  display: block;
  width: 100%;
  height: calc(var(--depth-progress, 0) * 100%);
  background: #ffc548;
  border-radius: inherit;
}

.after-depth {
  position: relative;
  z-index: 1;
  padding: clamp(82px, 11vw, 140px) 20px;
  color: #281631;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

.after-depth__inner {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.after-depth__eyebrow {
  margin: 0 0 10px;
  color: #ed7900;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.after-depth h2 {
  margin: 0;
  color: #61356f;
  font-size: clamp(31px, 6vw, 54px);
  line-height: 1.3;
}

.after-depth__intro {
  max-width: 720px;
  margin: 22px 0 0;
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 700;
  line-height: 1.9;
}

.section-booths { background: #fff5cf; }

.after-depth__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.after-depth__cards article {
  padding: 28px 22px;
  background: #fffdf1;
  border: 3px solid #281631;
  border-radius: 24px 17px 26px 19px;
  box-shadow: 7px 8px 0 #ed7900;
}

.after-depth__cards article:nth-child(2) { box-shadow: 7px 8px 0 #7e943d; }
.after-depth__cards article:nth-child(3) { box-shadow: 7px 8px 0 #78518c; }
.after-depth__cards span { font-size: 44px; }
.after-depth__cards h3 { margin: 15px 0 8px; font-size: 21px; }
.after-depth__cards p { margin: 0; font-weight: 700; line-height: 1.75; }

.section-stage { background: #efdba8; }
.after-depth__inner--split {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(38px, 7vw, 86px);
}

.after-depth__visual {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 340px;
  background: #fff5cf;
  border: 5px solid #281631;
  border-radius: 49% 44% 47% 42%;
  box-shadow: 12px 14px 0 #78518c;
}

.after-depth__visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: inherit;
}

.after-depth__schedule {
  display: grid;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.after-depth__schedule li {
  padding: 13px 16px;
  background: rgb(255 253 241 / 72%);
  border-radius: 12px;
  font-weight: 800;
}

.after-depth__schedule time { color: #6d3a7d; margin-right: 12px; }
.schedule-instruments { color: #654b31; font-size: 14px; line-height: 1.65; }

.section-gallery { background: #fffaf0; }
.after-depth__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
}

.after-depth__gallery figure {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  margin: 0;
  color: #fff9df;
  background: linear-gradient(145deg, #78518c, #3d2749);
  border: 8px solid #fff;
  box-shadow: 5px 7px 18px rgb(40 22 49 / 18%);
  transform: rotate(-1.5deg);
}

.after-depth__gallery figure:nth-child(2) { transform: rotate(1.5deg); background: linear-gradient(145deg, #ed7900, #a94d18); }
.after-depth__gallery figure:nth-child(3) { transform: rotate(-0.7deg); background: linear-gradient(145deg, #899c45, #56672b); }
.after-depth__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.sponsors {
  position: relative;
  z-index: 1;
  padding: clamp(76px, 9vw, 120px) 20px;
  color: #281631;
  text-align: center;
  background: #f1e1b6;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

.sponsors__inner { width: min(100%, 980px); margin: 0 auto; }
.sponsors h2 { margin: 0; color: #61356f; font-size: clamp(30px, 5vw, 48px); }
.sponsors__intro { margin: 18px 0 0; font-weight: 700; line-height: 1.8; }

.sponsors__names {
  margin: 34px 0 0;
  padding: 26px clamp(18px, 4vw, 36px);
  text-align: left;
  background: rgb(255 253 243 / 78%);
  border: 2px solid #c8a969;
  border-radius: 18px 13px 21px 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
}
.sponsors__note { margin: 22px 0 0; color: #735f46; font-size: 12px; }
.sponsors__support { display: flex; justify-content: center; gap: 12px; margin: 20px 0 0; }
.sponsors__support span { color: #9a7b45; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; }
.sponsors__support strong { font-size: 15px; }

.site-footer {
  position: relative;
  z-index: 1;
  padding: 28px 22px 14px;
  color: #fff9df;
  background: #281631;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(32px, 6vw, 76px);
  width: min(100%, 1040px);
  margin: 0 auto;
}

.footer-guide {
  position: relative;
  min-height: 240px;
}

.footer-guide__canvas {
  position: absolute;
  left: -18px;
  bottom: -12px;
  width: 900px;
  height: 700px;
  background: transparent;
  clip-path: inset(0 72% 0 0);
  pointer-events: none;
  z-index: 0;
}

.footer-guide__speech {
  position: absolute;
  top: 100px;
  left: 215px;
  z-index: 2;
  width: max-content;
  max-width: 240px;
  padding: 15px 19px;
  color: #281631;
  background: #fff9df;
  border: 3px solid #ed7900;
  border-radius: 16px 13px 18px 12px;
  box-shadow: 5px 6px 0 #6d3a7d;
}

.footer-guide__speech::before {
  content: "";
  position: absolute;
  left: -25px;
  bottom: 12px;
  border-top: 11px solid transparent;
  border-right: 25px solid #ed7900;
  border-bottom: 4px solid transparent;
}

.footer-guide__speech-text {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.55;
  transition: opacity 180ms ease, transform 180ms ease;
}

.footer-guide__speech-text.is-changing { opacity: 0; transform: translateY(4px); }
.site-footer__content { position: relative; z-index: 3; text-align: right; }
.site-footer__logo { margin: 0; color: #ffc548; font-size: clamp(25px, 4vw, 38px); font-weight: 900; text-align: right; }
.site-footer__tagline { margin: 9px 0 0; font-size: 13px; font-weight: 700; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; margin-top: 32px; }
.site-footer__nav a { color: #fff9df; font-size: 13px; font-weight: 800; text-decoration: none; }
.site-footer__nav a:hover { color: #ffc548; }
.site-footer__copyright { margin: 34px 0 0; text-align: right; color: #cbbbd0; }
.site-footer__organizer { margin: 20px 0 -24px; color: #e7d8e9; font-size: 12px; font-weight: 700; }

@media (max-width: 699px) {
  .event-entry__button { width: 100%; }
  .rally-map { padding: 68px 14px 78px; }
  .rally-map__intro { max-width: 310px; }
  .rally-map__figure {
    margin-top: 25px;
    padding: 8px;
    border-width: 3px;
    box-shadow: 7px 8px 0 #ed7900;
  }
  .event-intro__facts { grid-template-columns: 1fr; }
  .event-intro__facts p { min-height: 0; }
  .event-entry { margin-top: 26px; }
  .depth-zone { height: 580svh; }
  .depth-zone__scene { --road-base-shift: 14svh; }
  .depth-zone__town { width: max(210%, 900px); bottom: 37%; }
  .depth-zone__walker { width: clamp(105px, 32vw, 150px); }
  .depth-stop--candy {
    left: 50%;
    top: 49%;
    align-items: flex-end;
    flex-direction: row;
    width: 92%;
  }
  .depth-stop--candy img { width: 42%; }
  .depth-stop--ghost {
    left: 50%;
    top: 49%;
    align-items: flex-end;
    width: 92%;
  }
  .depth-stop__ghost-image {
    flex-basis: 43%;
    width: 43%;
  }
  .depth-stop--stage {
    top: 49%;
    align-items: center;
    width: 94%;
    gap: 10px;
  }
  .depth-stop__stage-image {
    flex-basis: 43%;
    width: 43%;
    max-height: 46svh;
  }
  .depth-stop__message--stage {
    width: auto;
  }
  .depth-stop--notice {
    top: 50%;
    width: 92%;
    max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
    padding: 20px 14px 14px;
  }
  .depth-stop--notice h2 {
    margin-bottom: 10px;
    font-size: clamp(19px, 5.6vw, 25px);
  }
  .event-notice__details { grid-template-columns: 1fr; gap: 5px; }
  .event-notice__details div { padding: 6px 9px; }
  .event-notice__details dt { font-size: 11px; }
  .event-notice__details dd {
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.35;
  }
  .event-notice__notes { margin-top: 7px; padding: 7px 10px; }
  .event-notice__notes h3 { font-size: 13px; }
  .event-notice__notes p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.45;
  }
  .after-depth { padding: 76px 18px 88px; }
  .after-depth__cards,
  .after-depth__gallery { grid-template-columns: 1fr; }
  .after-depth__cards { gap: 16px; margin-top: 30px; }
  .after-depth__inner--split { grid-template-columns: 1fr; gap: 40px; }
  .after-depth__visual { min-height: 260px; }
  .after-depth__gallery figure,
  .after-depth__gallery img { min-height: 240px; }
  .sponsors { padding: 72px 18px; }
  .sponsors__names { padding: 20px 16px; font-size: 12px; line-height: 1.85; }
  .sponsors__support { align-items: center; flex-direction: column; gap: 5px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 20px; }
  .footer-guide { min-height: 225px; }
  .footer-guide__canvas { left: -30px; bottom: -10px; width: 760px; height: 590px; clip-path: inset(0 74% 0 0); }
  .footer-guide__speech {
    top: 0;
    left: 92px;
    max-width: min(250px, calc(100vw - 125px));
  }
  .footer-guide__speech::before {
    left: 28px;
    bottom: -22px;
    border-top: 22px solid #ed7900;
    border-right: 11px solid transparent;
    border-bottom: 0;
    border-left: 11px solid transparent;
  }
  .site-footer__content,
  .site-footer__logo,
  .site-footer__copyright { text-align: right; }
  .site-footer__nav { justify-content: flex-end; }
  .depth-stop__message {
    padding: 14px;
    font-size: 13px;
    line-height: 1.6;
  }
}

.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.event-intro.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.event-intro.is-visible .reveal-item:nth-child(2) { transition-delay: 80ms; }
.event-intro.is-visible .reveal-item:nth-child(3) { transition-delay: 160ms; }
.event-intro.is-visible .event-feature:nth-child(1) { transition-delay: 240ms; }
.event-intro.is-visible .event-feature:nth-child(2) { transition-delay: 320ms; }
.event-intro.is-visible .event-feature:nth-child(3) { transition-delay: 400ms; }
.event-intro.is-visible .event-intro__price { transition-delay: 480ms; }

@media (min-width: 700px) {
  .event-intro { padding: 104px 32px 112px; }
  .event-intro__desktop-break { display: initial; }
  .event-intro__features {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
  }
  .event-feature {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 190px;
    padding: 24px 18px;
    text-align: center;
  }
  .event-feature__image { width: 104px; }
  .event-feature h3 { font-size: 18px; }
}

@media (max-width: 600px) {
  .hero { min-height: 430px; }
  .hero__background { object-position: center bottom; }
  .hero__logo {
    top: max(12px, env(safe-area-inset-top));
    width: min(92vw, 520px);
  }
  .character--main-fixed {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    height: 100svh;
    transform: scale(1.16);
    transform-origin: left bottom;
    pointer-events: none;
    touch-action: pan-y pinch-zoom;
  }
  .hero__speech {
    display: block;
    left: clamp(142px, 38vw, 176px);
    bottom: max(22px, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 164px);
    padding: 13px 15px;
  }
  .hero__speech-text {
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
  }
  .event-intro__next {
    max-width: 88vw;
    margin-inline: auto;
    padding: 21px 25px;
    border-radius: 22px;
  }
  .event-intro__next::before,
  .event-intro__next::after {
    display: none;
  }
  :root {
    --cat-size: clamp(90px, 30vw, 145px);
    --cat-road-y: 14%;
    --pumpkin-size: clamp(76px, 24vw, 120px);
    --pumpkin-road-y: 23%;
    --pumpkin-one-size: clamp(82px, 27vw, 132px);
    --pumpkin-one-road-y: 18%;
    --sheet-size: clamp(70px, 22vw, 110px);
    --sheet-road-y: 26%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character { animation-play-state: paused; }
  .hero__speech,
  .hero__speech-text,
  .character--main-fixed,
  .event-intro__next,
  .depth-stop,
  .reveal-item { transition: none; }
  .event-intro__next,
  .reveal-item { opacity: 1; transform: none; }
}
