.ta-campaign-mainvisual {
  --sakura-petal: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2080%2080%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27petalFill%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%25%27%20stop-color=%27%23ffe7ee%27/%3E%3Cstop%20offset=%2755%25%27%20stop-color=%27%23f9c9d4%27/%3E%3Cstop%20offset=%27100%25%27%20stop-color=%27%23f1a7bc%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform=%27translate%2816%2014%29%20rotate%28-16%2024%2024%29%27%3E%3Cpath%20d=%27M20%200H40V28A20%2020%200%200%201%2020%2048H0V20A20%2020%200%200%201%2020%200Z%27%20fill=%27url%28%23petalFill%29%27/%3E%3Cpath%20d=%27M6%2020A14%2014%200%200%201%2020%206H31%27%20fill=%27none%27%20stroke=%27%23fff8fb%27%20stroke-linecap=%27round%27%20stroke-width=%273%27%20stroke-opacity=%27.74%27/%3E%3Cpath%20d=%27M39%2016V28A18%2018%200%200%201%2021%2046H11%27%20fill=%27none%27%20stroke=%27%23e46e8c%27%20stroke-linecap=%27round%27%20stroke-width=%274%27%20stroke-opacity=%27.22%27/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ta-campaign-mainvisual img {
  display: block;
  width: 100%;
  height: auto;
}

.ta-campaign-mainvisual::before,
.ta-campaign-mainvisual::after {
  content: none;
}

.ta-campaign-mainvisual-sakura {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  aspect-ratio: 4 / 5;
  background-image: var(--sakura-petal);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--opacity, 0.9);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 10px 16px rgba(191, 100, 138, 0.22));
  transform-origin: center;
  will-change: transform;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.ta-campaign-mainvisual-sakura.drift-a {
  animation-name: sakura-drift-a;
}

.ta-campaign-mainvisual-sakura.drift-b {
  animation-name: sakura-drift-b;
}

.ta-campaign-mainvisual-sakura.drift-c {
  animation-name: sakura-drift-c;
}

.ta-campaign-mainvisual-sakura.drift-d {
  animation-name: sakura-drift-d;
}

.sakura-01 {
  --left: -18%;
  --top: -14%;
  --size: 78px;
  --duration: 20s;
  --delay: -5s;
  --rotate-start: -38deg;
  --rotate-mid: 54deg;
  --rotate-end: 220deg;
  --opacity: 0.94;
}

.sakura-02 {
  --left: -6%;
  --top: 6%;
  --size: 54px;
  --duration: 17s;
  --delay: -12s;
  --rotate-start: 26deg;
  --rotate-mid: -84deg;
  --rotate-end: 140deg;
  --opacity: 0.82;
}

.sakura-03 {
  --left: 4%;
  --top: -10%;
  --size: 68px;
  --duration: 22s;
  --delay: -15s;
  --rotate-start: -12deg;
  --rotate-mid: 120deg;
  --rotate-end: 286deg;
  --opacity: 0.9;
}

.sakura-04 {
  --left: 12%;
  --top: 18%;
  --size: 48px;
  --duration: 18s;
  --delay: -7s;
  --rotate-start: 58deg;
  --rotate-mid: -36deg;
  --rotate-end: 174deg;
  --opacity: 0.8;
}

.sakura-05 {
  --left: 20%;
  --top: 0%;
  --size: 60px;
  --duration: 21s;
  --delay: -10s;
  --rotate-start: -46deg;
  --rotate-mid: 70deg;
  --rotate-end: 248deg;
  --opacity: 0.9;
}

.sakura-06 {
  --left: 28%;
  --top: 28%;
  --size: 42px;
  --duration: 16s;
  --delay: -4s;
  --rotate-start: 18deg;
  --rotate-mid: -112deg;
  --rotate-end: 102deg;
  --opacity: 0.76;
}

.sakura-07 {
  --left: 36%;
  --top: -6%;
  --size: 58px;
  --duration: 19s;
  --delay: -13s;
  --rotate-start: 34deg;
  --rotate-mid: 146deg;
  --rotate-end: 318deg;
  --opacity: 0.88;
}

.sakura-08 {
  --left: 44%;
  --top: 16%;
  --size: 46px;
  --duration: 18s;
  --delay: -9s;
  --rotate-start: -72deg;
  --rotate-mid: 20deg;
  --rotate-end: 196deg;
  --opacity: 0.8;
}

.sakura-09 {
  --left: 52%;
  --top: 4%;
  --size: 62px;
  --duration: 20s;
  --delay: -16s;
  --rotate-start: -24deg;
  --rotate-mid: 92deg;
  --rotate-end: 252deg;
  --opacity: 0.92;
}

.sakura-10 {
  --left: 60%;
  --top: 30%;
  --size: 40px;
  --duration: 17s;
  --delay: -3s;
  --rotate-start: 48deg;
  --rotate-mid: -138deg;
  --rotate-end: 128deg;
  --opacity: 0.74;
}

.sakura-11 {
  --left: 68%;
  --top: -4%;
  --size: 56px;
  --duration: 22s;
  --delay: -8s;
  --rotate-start: 12deg;
  --rotate-mid: 184deg;
  --rotate-end: 336deg;
  --opacity: 0.88;
}

.sakura-12 {
  --left: 76%;
  --top: 18%;
  --size: 44px;
  --duration: 16s;
  --delay: -14s;
  --rotate-start: -64deg;
  --rotate-mid: 44deg;
  --rotate-end: 210deg;
  --opacity: 0.79;
}

.sakura-13 {
  --left: 84%;
  --top: 0%;
  --size: 64px;
  --duration: 21s;
  --delay: -6s;
  --rotate-start: 30deg;
  --rotate-mid: 108deg;
  --rotate-end: 276deg;
  --opacity: 0.93;
}

.sakura-14 {
  --left: 92%;
  --top: 26%;
  --size: 46px;
  --duration: 18s;
  --delay: -11s;
  --rotate-start: -18deg;
  --rotate-mid: -98deg;
  --rotate-end: 148deg;
  --opacity: 0.8;
}

.sakura-15 {
  --left: 102%;
  --top: -8%;
  --size: 38px;
  --duration: 15s;
  --delay: -2s;
  --rotate-start: 82deg;
  --rotate-mid: 12deg;
  --rotate-end: 188deg;
  --opacity: 0.72;
}

.sakura-16 {
  --left: 0%;
  --top: 44%;
  --size: 52px;
  --duration: 20s;
  --delay: -17s;
  --rotate-start: -56deg;
  --rotate-mid: 66deg;
  --rotate-end: 236deg;
  --opacity: 0.84;
}

.sakura-17 {
  --left: 18%;
  --top: 52%;
  --size: 36px;
  --duration: 16s;
  --delay: -6s;
  --rotate-start: 40deg;
  --rotate-mid: -124deg;
  --rotate-end: 116deg;
  --opacity: 0.7;
}

.sakura-18 {
  --left: 34%;
  --top: 60%;
  --size: 48px;
  --duration: 19s;
  --delay: -10s;
  --rotate-start: -28deg;
  --rotate-mid: 132deg;
  --rotate-end: 294deg;
  --opacity: 0.82;
}

.sakura-19 {
  --left: 50%;
  --top: 58%;
  --size: 34px;
  --duration: 17s;
  --delay: -1s;
  --rotate-start: 18deg;
  --rotate-mid: 86deg;
  --rotate-end: 224deg;
  --opacity: 0.68;
}

.sakura-20 {
  --left: 66%;
  --top: 66%;
  --size: 42px;
  --duration: 18s;
  --delay: -12s;
  --rotate-start: -78deg;
  --rotate-mid: 28deg;
  --rotate-end: 202deg;
  --opacity: 0.78;
}

.sakura-21 {
  --left: 82%;
  --top: 62%;
  --size: 30px;
  --duration: 15s;
  --delay: -8s;
  --rotate-start: 52deg;
  --rotate-mid: -152deg;
  --rotate-end: 96deg;
  --opacity: 0.66;
}

.sakura-22 {
  --left: 8%;
  --top: 76%;
  --size: 40px;
  --duration: 19s;
  --delay: -14s;
  --rotate-start: -8deg;
  --rotate-mid: 118deg;
  --rotate-end: 280deg;
  --opacity: 0.76;
}

.sakura-23 {
  --left: 40%;
  --top: 82%;
  --size: 28px;
  --duration: 16s;
  --delay: -5s;
  --rotate-start: 70deg;
  --rotate-mid: 14deg;
  --rotate-end: 170deg;
  --opacity: 0.64;
}

.sakura-24 {
  --left: 72%;
  --top: 78%;
  --size: 32px;
  --duration: 17s;
  --delay: -11s;
  --rotate-start: -44deg;
  --rotate-mid: 74deg;
  --rotate-end: 244deg;
  --opacity: 0.72;
}

@keyframes sakura-drift-a {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rotate-start));
  }
  35% {
    transform: translate3d(10vw, 10vh, 0) rotate(var(--rotate-mid));
  }
  68% {
    transform: translate3d(-6vw, 24vh, 0) rotate(var(--rotate-end));
  }
  100% {
    transform: translate3d(7vw, 44vh, 0) rotate(calc(var(--rotate-end) + 110deg));
  }
}

@keyframes sakura-drift-b {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rotate-start));
  }
  32% {
    transform: translate3d(-11vw, 12vh, 0) rotate(var(--rotate-mid));
  }
  70% {
    transform: translate3d(8vw, 28vh, 0) rotate(var(--rotate-end));
  }
  100% {
    transform: translate3d(-9vw, 48vh, 0) rotate(calc(var(--rotate-end) + 130deg));
  }
}

@keyframes sakura-drift-c {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rotate-start));
  }
  38% {
    transform: translate3d(14vw, 14vh, 0) rotate(var(--rotate-mid));
  }
  74% {
    transform: translate3d(-10vw, 30vh, 0) rotate(var(--rotate-end));
  }
  100% {
    transform: translate3d(12vw, 54vh, 0) rotate(calc(var(--rotate-end) + 150deg));
  }
}

@keyframes sakura-drift-d {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rotate-start));
  }
  34% {
    transform: translate3d(-8vw, 16vh, 0) rotate(var(--rotate-mid));
  }
  72% {
    transform: translate3d(12vw, 34vh, 0) rotate(var(--rotate-end));
  }
  100% {
    transform: translate3d(-11vw, 56vh, 0) rotate(calc(var(--rotate-end) + 140deg));
  }
}

@media (max-width: 767px) {
  .ta-campaign-mainvisual-sakura {
    width: calc(var(--size) * 0.72);
    filter: drop-shadow(0 6px 10px rgba(191, 100, 138, 0.18));
  }

  .sakura-02,
  .sakura-04,
  .sakura-06,
  .sakura-08,
  .sakura-10,
  .sakura-12,
  .sakura-14,
  .sakura-16,
  .sakura-18,
  .sakura-20,
  .sakura-22,
  .sakura-24 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-campaign-mainvisual-sakura {
    animation: none;
    transform: rotate(var(--rotate-start));
  }
}