:root {
  --oc-red: #dc4f4e;
  --oc-yellow: #e4bd25;
  --oc-grey: #8e8b8a;
  --oc-ink: #332b29;
  --oc-paper: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--oc-ink);
  background: var(--oc-paper);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.people-circle {
  position: relative;
  min-height: 720svh;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(228, 189, 37, .04), transparent 18%),
    var(--oc-paper);
  isolation: isolate;
}

.people-circle__stage {
  position: sticky;
  z-index: 1;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.people-circle__chapter-title {
  position: absolute;
  z-index: 6;
  top: calc(var(--site-header-anchor-offset, 84px) + 12px);
  left: 50%;
  width: min(calc(100vw - 40px), 900px);
  margin: 0;
  color: var(--oc-ink);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .045em;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .22s ease;
  pointer-events: none;
}

.people-circle__glow {
  position: absolute;
  inset: 7% -25% auto;
  height: 62%;
  background: radial-gradient(circle, rgba(228, 189, 37, .13), rgba(220, 79, 78, .045) 42%, transparent 70%);
  transform: scale(.8);
  transition: transform 1.1s ease, opacity 1.1s ease;
}

.people-circle__orbit {
  position: absolute;
  top: max(14svh, 102px);
  left: 50%;
  width: min(88vw, 43svh, 590px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  opacity: var(--journey-exit-opacity, 1);
  transition: opacity .48s ease;
}

.people-circle:not([data-step]) .people-circle__orbit {
  opacity: 0;
}

.people-circle__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.people-circle__arc-light {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.people-circle__arc-guide,
.people-circle__arc-line {
  fill: none;
  stroke-width: 1.65;
}

.people-circle__arc-guide {
  stroke: rgba(142, 139, 138, .1);
}

.people-circle__arc-line {
  stroke: url(#people-circle-gradient);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dashoffset .18s linear;
  filter: drop-shadow(0 3px 7px rgba(220, 79, 78, .12));
}

.people-circle__arc-head {
  opacity: 0;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: opacity .3s ease;
}

.people-circle__arc-head.is-visible {
  opacity: 1;
}

.people-circle__arc-light-offset {
  transform: translateX(1.2px);
}

.people-circle__arc-trail {
  fill: none;
  stroke: url(#people-circle-trail-gradient);
  stroke-linecap: round;
  /* Keep the afterglow on the ring while the light source spills outward. */
  transform: translateX(-1.2px);
}

.people-circle__arc-trail--soft {
  stroke-width: 1.5;
  opacity: .68;
  filter: url(#people-circle-inner-glow);
}

.people-circle__arc-trail--fine {
  stroke-width: .36;
  opacity: .72;
}

.people-circle__arc-head-glow {
  fill: #fff;
  opacity: .28;
  filter: url(#people-circle-soft-glow);
}

.people-circle__arc-head-halo {
  fill: #fffaf0;
  opacity: .58;
  filter: url(#people-circle-inner-glow);
}

.people-circle__arc-head-core {
  fill: #fff;
  opacity: .9;
  filter: url(#people-circle-spark-glow);
}

.people-circle__arc-spark {
  opacity: 0;
  transform-origin: 109px 60px;
}

.people-circle__arc-spark line {
  fill: none;
  stroke: rgba(255, 255, 255, .82);
  stroke-width: .34;
  stroke-linecap: round;
  filter: url(#people-circle-spark-glow);
}

.people-circle__arc-head.is-visible .people-circle__arc-spark {
  animation: arc-sparkle 4.4s ease-in-out infinite;
}

.people-circle__orbit.is-looping .people-circle__arc-head {
  opacity: 1;
  animation: arc-light-loop 7.8s linear infinite;
}

.people-circle__character-layer,
.people-circle__people,
.people-circle__final-group {
  position: absolute;
  inset: 0;
}

.people-circle__character-layer {
  z-index: 1;
  transform: translateY(-6.25%) scale(1.08);
  transform-origin: center;
}

.people-circle[data-step="5"] .people-circle__character-layer {
  transform: translateY(-5.75%) scale(1.08);
}

.people-circle[data-step="5"] .people-circle__arc-light {
  z-index: 0;
}

.pc-person {
  /* Every character shares one ring-relative frame. Modifier classes only
     adjust the artwork inside that frame and its ring-relative anchor. */
  --rest-left: 50%;
  --rest-top: 50%;
  --rest-scale: .42;
  --focus-left: 50%;
  --focus-top: 83%;
  --focus-scale: 1;
  --asset-scale: 1;
  --asset-x: 0;
  --asset-y: 0;
  position: absolute;
  z-index: 1;
  top: var(--focus-top);
  left: var(--focus-left);
  width: min(42%, 180px);
  height: min(76%, 315px);
  margin: 0;
  opacity: 0;
  transform: translate(-50%, calc(-100% + 20px)) scale(.76);
  transform-origin: center bottom;
  transition: opacity .75s ease, transform 1s cubic-bezier(.2, .72, .25, 1), left 1s cubic-bezier(.2, .72, .25, 1), top 1s cubic-bezier(.2, .72, .25, 1), filter .75s ease;
  filter: saturate(.75);
  will-change: transform, opacity;
}

.pc-person img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(var(--asset-x), var(--asset-y)) scale(var(--asset-scale));
  transform-origin: center bottom;
}

.pc-person.is-visible {
  top: var(--rest-top);
  left: var(--rest-left);
  opacity: .5;
  transform: translate(-50%, -100%) scale(var(--rest-scale));
}

.pc-person.is-current {
  top: var(--focus-top);
  left: var(--focus-left);
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -100%) scale(var(--focus-scale));
  filter: saturate(1);
}

.pc-person--juggling {
  --asset-scale: .92;
  --rest-left: 20%;
  --rest-top: 46%;
  --rest-scale: .47;
}

.pc-person--wheelchair {
  --asset-scale: .78;
  --focus-left: 35%;
  --focus-top: 83%;
  --rest-left: 22%;
  --rest-top: 76%;
  --rest-scale: .45;
}

.pc-person--girl {
  --asset-scale: .71;
  --focus-left: 65%;
  --focus-top: 83%;
  --rest-left: 78%;
  --rest-top: 67%;
  --rest-scale: .5;
}

.pc-person--receiver {
  --asset-scale: 1.05;
  --rest-left: 34%;
  --rest-top: 91%;
  --rest-scale: .42;
}

.pc-person--deliverer {
  --asset-scale: .98;
  --rest-left: 70%;
  --rest-top: 89%;
  --rest-scale: .4;
}

.pc-person--unicycle {
  --asset-scale: .91;
  --focus-top: 85%;
}

.people-circle__final-group {
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8%;
  opacity: 0;
  transform: scale(.78) rotate(-2deg);
  transform-origin: 50% 42%;
  transition: opacity 1s ease, transform 1.25s cubic-bezier(.2, .75, .2, 1);
  pointer-events: none;
}

.people-circle__final-group img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.people-circle__final-group.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.people-circle__scroll-cue {
  position: absolute;
  z-index: 5;
  right: max(16px, calc(env(safe-area-inset-right) + 10px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--oc-grey);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
  transition: opacity .5s ease;
}

.people-circle__scroll-cue i {
  display: block;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(142, 139, 138, .24);
}

.people-circle__scroll-cue i::after {
  content: "";
  display: block;
  width: 100%;
  height: 55%;
  background: linear-gradient(var(--oc-red), var(--oc-yellow));
  animation: scroll-cue 1.8s ease-in-out infinite;
}

.people-circle[data-step="5"] .people-circle__scroll-cue {
  opacity: 0;
}

.people-circle:not([data-step]) .people-circle__scroll-cue {
  opacity: 0;
}

.people-circle__scenes {
  position: relative;
  z-index: 3;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}

.pc-step {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: flex-end;
  justify-content: center;
  padding: 0 20px max(8svh, calc(env(safe-area-inset-bottom) + 42px));
}

.pc-step__copy {
  position: fixed;
  z-index: 4;
  right: 20px;
  bottom: max(8svh, calc(env(safe-area-inset-bottom) + 42px));
  left: 20px;
  width: min(calc(100vw - 40px), 480px);
  margin: 0 auto;
  padding: 19px 22px 21px;
  text-align: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(220, 79, 78, .08);
  border-radius: 22px;
  box-shadow: 0 14px 44px rgba(74, 48, 39, .08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .36s ease, visibility 0s linear .36s;
}

.pc-step.is-active .pc-step__copy {
  opacity: var(--journey-exit-opacity, 1);
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.pc-step h2,
.pc-step__copy > p:last-child {
  opacity: 1;
  transform: none;
}

.pc-step h2 {
  display: inline-block;
  margin: 0;
  color: var(--oc-ink);
  font-size: clamp(22px, 6.2vw, 31px);
  line-height: 1.35;
  letter-spacing: .07em;
}

.pc-step h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 10px auto 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oc-red), var(--oc-yellow));
}

.pc-step__copy > p:last-child {
  margin: 0;
  color: #625d5b;
  font-size: clamp(13px, 3.7vw, 16px);
  line-height: 1.85;
  letter-spacing: .035em;
}

.pc-step--final .pc-step__copy > p:last-child span {
  display: inline-block;
  margin-top: .35em;
  font-size: .92em;
  white-space: nowrap;
}

.pc-step--final .pc-step__copy {
  border-color: rgba(228, 189, 37, .15);
}

.pc-step--final h2 {
  font-size: clamp(25px, 7vw, 36px);
}

.people-circle[data-step="5"] .people-circle__glow {
  opacity: 1;
  transform: scale(1.25);
}

@keyframes scroll-cue {
  0% { transform: translateY(-110%); }
  55%, 100% { transform: translateY(210%); }
}

@keyframes arc-light-loop {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

@keyframes arc-sparkle {
  0%, 72%, 100% {
    opacity: 0;
    transform: scale(.35) rotate(12deg);
  }
  78% {
    opacity: .2;
  }
  82% {
    opacity: .58;
    transform: scale(1) rotate(12deg);
  }
  88% {
    opacity: 0;
    transform: scale(1.28) rotate(12deg);
  }
}

@media (min-width: 720px) {
  .people-circle__orbit {
    top: calc(55svh - min(19vw, 28svh, 220px));
    width: min(38vw, 56svh, 440px);
    left: calc(50% - min(27vw, 300px));
  }

  .people-circle__character-layer {
    transform: translateY(-8.75%) scale(1.08);
  }

  .pc-step {
    align-items: center;
    justify-content: flex-end;
    padding: 0 max(7vw, 56px);
  }

  .pc-step__copy {
    top: 55%;
    right: max(32px, calc((100vw - 1120px) / 2));
    bottom: auto;
    left: auto;
    width: min(52vw, 560px);
    margin: 0;
    text-align: left;
    transform: translateY(calc(-50% + 10px));
    padding:22px;
    text-wrap:pretty;
    overflow-wrap:break-word;
    line-break:strict;
  }
  .pc-step--final .pc-step__copy > p:last-child span { white-space:normal; }

  .pc-step.is-active .pc-step__copy {
    transform: translateY(-50%);
  }

  .pc-step h2::after {
    margin-left: 0;
  }

}

@media (max-width: 959px) {
  .people-circle__chapter-title {
    font-size: 34px;
  }
}

@media (max-width: 680px) {
  .people-circle__orbit {
    top: 14svh;
    width: min(106.5vw, 50.3svh);
  }
  .people-circle__chapter-title {
    width: min(calc(100vw - 36px), 520px);
    font-size: 27px;
    line-height: 1.5;
  }

  .pc-step__copy {
    right: 20px;
    top: 62svh;
    bottom: auto;
    left: 16px;
    width: min(calc(100vw - 36px), 480px);
    padding: 17px 16px 18px;
  }
}

@media (max-width: 680px) and (max-height: 740px) {
  .people-circle__orbit { top: max(112px, 17svh); width: 37.4svh; }
  .pc-step__copy { top: 56svh; padding: 13px 16px; }
  .pc-step__copy > p:last-child { font-size: 12px; line-height: 1.7; }
}

@media (max-width: 359px) {
  .pc-step--final .pc-step__copy > p:last-child span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .people-circle {
    min-height: 600svh;
  }

  .pc-step {
    min-height: 100svh;
  }

  .pc-person,
  .people-circle__chapter-title,
  .people-circle__orbit,
  .people-circle__final-group,
  .people-circle__arc-line,
  .people-circle__glow {
    transition-duration: .01ms;
  }

  .pc-step__copy {
    transition-duration: .01ms;
  }

  .pc-step.is-active h2,
  .pc-step.is-active .pc-step__copy > p:last-child {
    animation-duration: .01ms;
    animation-delay: 0s;
  }

  .people-circle__scroll-cue i::after {
    animation: none;
  }

  .people-circle__arc-head.is-visible .people-circle__arc-spark {
    animation: none;
  }

  .people-circle__orbit.is-looping .people-circle__arc-head {
    animation: none;
    transform: rotate(-90deg) !important;
  }
}