.appear-item {
  transition:
    opacity var(--dur-appear) var(--ease-up),
    transform var(--dur-appear) var(--ease-up);
}
html.js .appear-item.appear {
  opacity: 0;
  transform: translateY(45px);
}
.hero-piece {
  transition: transform var(--dur-hero) var(--ease-hero-base);
  /* B6: 土台（arch-sage）の delay。他のピースは各 --ease-* 側で個別に上書きする */
  transition-delay: 400ms;
}
html.js .hero-piece.appear {
  transform: translateY(198px);
}
/* B7: H1 / リード / 吹き出しはヒーロー専用の delay（共通の appear-item と分ける） */
.hero h1.appear-item {
  transition-delay: 1600ms;
}
.hero__lead.appear-item {
  transition-delay: 1800ms;
}
.hero__bubble.appear-item {
  transition-delay: 1600ms;
  transition-duration: 400ms;
  transition-timing-function: var(--ease-bubble);
}
html.js .hero__bubble.appear-item.appear {
  transform: scale(0.5) translate(-19px, 56px);
}
.hero-piece--orange {
  transition-delay: 500ms;
  transition-duration: 500ms;
  transition-timing-function: var(--ease-orange);
}
html.js .hero-piece--orange.appear {
  transform: translate(-24px, -522px) rotate(-35deg);
}
.hero-piece--green {
  transition-delay: 600ms;
  transition-timing-function: var(--ease-green);
}
html.js .hero-piece--green.appear {
  transform: translate(-74px, -379px) rotate(40deg);
}
.hero-piece--red {
  transition-delay: 700ms;
  transition-timing-function: var(--ease-red);
}
html.js .hero-piece--red.appear {
  transform: translate(48px, -283px) rotate(-20deg);
}
.hero-piece--blue {
  transition-delay: 800ms;
  transition-timing-function: var(--ease-blue);
}
html.js .hero-piece--blue.appear {
  transform: translate(64px, -227px) rotate(8deg);
}
.hero-piece--yellow {
  transition-delay: 900ms;
  transition-duration: 400ms;
  transition-timing-function: var(--ease-yellow);
}
html.js .hero-piece--yellow.appear {
  transform: translate(30px, -163px);
}
.hero-piece--pink {
  transition-delay: 1000ms;
  transition-duration: 1000ms;
  transition-timing-function: var(--ease-pink);
}
html.js .hero-piece--pink.appear {
  transform: translate(41px, -90px) rotate(200deg);
}
.solution-char {
  transition: transform 1000ms var(--ease-up);
}
html.js .solution-char.appear {
  transform: translateY(160px);
}
/* D: 5体が時間差で跳ねる（BEHAVIORS.md 解決セクション） */
.solution-char:nth-child(1) {
  transition-delay: 200ms;
  transition-duration: 800ms;
}
html.js .solution-char:nth-child(1).appear {
  transform: translateY(109px);
}
.solution-char:nth-child(2) {
  transition-delay: 350ms;
  transition-duration: 1000ms;
}
html.js .solution-char:nth-child(2).appear {
  transform: translateY(196px);
}
.solution-char:nth-child(3) {
  transition-delay: 500ms;
  transition-duration: 900ms;
}
html.js .solution-char:nth-child(3).appear {
  transform: translateY(140px);
}
.solution-char:nth-child(4) {
  transition-delay: 650ms;
  transition-duration: 1000ms;
}
html.js .solution-char:nth-child(4).appear {
  transform: translateY(170px);
}
.solution-char:nth-child(5) {
  transition-delay: 800ms;
  transition-duration: 850ms;
}
html.js .solution-char:nth-child(5).appear {
  transform: translateY(125px);
}
.solution-char img {
  animation: shake01 3s var(--ease-shake) infinite;
}
/* C14: キャラごとに shake01/02 の周期・delay を変える（declared-css.json の #solution-* 由来） */
.solution-char:nth-child(1) img {
  animation: shake01 2.5s var(--ease-shake) infinite;
}
.solution-char:nth-child(2) img {
  animation: shake02 2.5s var(--ease-shake) infinite;
  animation-delay: 3s;
}
.solution-char:nth-child(3) img {
  animation: shake02 4.5s var(--ease-shake) infinite;
  animation-delay: 3s;
}
.solution-char:nth-child(4) img {
  animation: shake01 3.5s var(--ease-shake) infinite;
}
.solution-char:nth-child(5) img {
  animation: shake01 4s var(--ease-shake) infinite;
}
@keyframes shake01 {
  0%,
  20%,
  100% {
    transform: rotate(0);
  }
  5%,
  15% {
    transform: rotate(-3deg);
  }
  10% {
    transform: rotate(3deg);
  }
}
@keyframes shake02 {
  0%,
  20%,
  100% {
    transform: translate(0) rotate(0);
  }
  5% {
    transform: translate(2px, -3px) rotate(-3deg);
  }
  10% {
    transform: translate(-2px, 2px) rotate(3deg);
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.marquee__track {
  animation: marquee 40s linear infinite;
}
@media (max-width: 1140px) {
  html.js .hero-piece--orange.appear {
    transform: translate(-21px, -431px) rotate(-35deg);
  }
}
@media (max-width: 840px) {
  html.js .hero-piece--orange.appear {
    transform: translate(-21px, -751px) rotate(-35deg);
  }
  html.js .hero-piece.appear {
    transform: translateY(240px);
  }
}
@media (max-width: 680px) {
  html.js .hero-piece--orange.appear {
    transform: translate(-21px, -490px) rotate(-35deg);
  }
  html.js .hero-piece--green.appear {
    transform: translate(-74px, -420px) rotate(40deg);
  }
  html.js .hero-piece--red.appear {
    transform: translate(48px, -370px) rotate(-20deg);
  }
  html.js .hero-piece--blue.appear {
    transform: translate(64px, -340px) rotate(8deg);
  }
  html.js .hero-piece--yellow.appear {
    transform: translate(30px, -310px);
  }
  html.js .hero-piece--pink.appear {
    transform: translate(41px, -250px) rotate(200deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html.js .appear,
  html.js .appear-item.appear,
  html.js .hero-piece.appear,
  html.js .solution-char.appear,
  html.js .solution-char:nth-child(n).appear {
    opacity: 1;
    transform: none;
  }
}