#i-athlete .parts_product-video {
  /* 下に定義しているアニメーションに使用している */
  --close-up-video-duration: 16s;
  --corner-cut-size: min(20px, calc(20 / var(--max-w-pad) * 100vw));

  position: relative;
  container-type: inline-size;
  margin-top: calc(67 / var(--max-w) * 100cqw);
  background: url("../img/bg_video_pc.png") no-repeat center / cover;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  @media (width <= 740px) {
    --corner-cut-size: calc(14 / var(--design-w-sp) * 100vw);

    margin-top: calc(88 / var(--design-w-sp) * 100vw);
    margin-inline: calc(45 / var(--design-w-sp) * 100vw);
    background-image: url("../img/bg_video_sp.png");
    aspect-ratio: 285 / 506;
  }

  .close-up-img {
    position: absolute;

    .is-paused & {
      animation-play-state: paused !important;
    }
  }

  p.headline {
    position: absolute;
    top: calc(60 / var(--max-w) * 100cqw);
    left: calc(60 / var(--max-w) * 100cqw);
    z-index: 1;
    mix-blend-mode: difference;
    color: #ddd;

    @media (width <= 740px) {
      top: calc(30 / var(--design-w-sp) * 100vw);
      left: calc(30 / var(--design-w-sp) * 100vw);
    }

    img {
      #p001 & {
        width: calc(356 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(199 / var(--design-w-sp) * 100vw);
        }
      }

      #p002 & {
        width: calc(331 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(181 / var(--design-w-sp) * 100vw);
        }
      }

      #p003 & {
        width: calc(385 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(216 / var(--design-w-sp) * 100vw);
        }
      }

      #p004 & {
        width: calc(319 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(178 / var(--design-w-sp) * 100vw);
        }
      }
    }
  }

  p.desc {
    position: absolute;
    bottom: calc(60 / var(--max-w) * 100cqw);
    left: calc(60 / var(--max-w) * 100cqw);
    mix-blend-mode: difference;
    color: #ddd;
    font-weight: 700;
    font-size: 24px;

    @media (width <= 740px) {
      bottom: calc(30 / var(--design-w-sp) * 100vw);
      left: calc(30 / var(--design-w-sp) * 100vw);
    }

    img {
      #p001 & {
        width: calc(310 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(123 / var(--design-w-sp) * 100vw);
        }
      }

      #p002 & {
        width: calc(331 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(134 / var(--design-w-sp) * 100vw);
        }
      }

      #p003 & {
        width: calc(255 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(172 / var(--design-w-sp) * 100vw);
        }
      }

      #p004 & {
        width: calc(334 / var(--max-w) * 100cqw);

        @media (width <= 740px) {
          width: calc(123 / var(--design-w-sp) * 100vw);
        }
      }
    }
  }

  button {
    --corner-cut-size: min(10px, calc(10 / var(--max-w-pad) * 100vw));
    display: flex;
    position: absolute;
    right: calc(60 / var(--max-w) * 100cqw);
    bottom: calc(60 / var(--max-w) * 100cqw);
    column-gap: calc(5 / var(--max-w) * 100cqw);
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
    background: #fff;
    width: calc(60 / var(--max-w) * 100cqw);
    height: calc(60 / var(--max-w) * 100cqw);

    @media (width <= 740px) {
      --corner-cut-size: calc(5 / var(--design-w-sp) * 100vw);
      right: calc(30 / var(--design-w-sp) * 100vw);
      bottom: calc(30 / var(--design-w-sp) * 100vw);
      column-gap: calc(3 / var(--design-w-sp) * 100vw);
      width: calc(30 / var(--design-w-sp) * 100vw);
      height: calc(30 / var(--design-w-sp) * 100vw);
    }

    &:hover {
      background: #000;

      @media (width <= 740px) {
        background: #fff;
      }
    }

    &::before,
    &::after {
      display: block;
      mix-blend-mode: difference;
      background: #fff;
      width: calc(4 / var(--max-w) * 100cqw);
      height: calc(18 / var(--max-w) * 100cqw);
      content: "";

      @media (width <= 740px) {
        width: calc(2 / var(--design-w-sp) * 100vw);
        height: calc(7.5 / var(--design-w-sp) * 100vw);
      }
    }

    .is-paused & {
      &::after {
        display: none;
      }

      &::before {
        clip-path: polygon(0 0, 0 100%, 100% 50%);
        width: 14px;
        height: 16px;

        @media (width <= 740px) {
          width: calc(7 / var(--design-w-sp) * 100vw);
          height: calc(8 / var(--design-w-sp) * 100vw);
        }
      }
    }

    /* .meter {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
      animation: meter-fill var(--close-up-video-duration) linear infinite;
      background: #ccc;
      width: 100%;

      .is-paused & {
        animation-play-state: paused;
      }
    } */
  }
}

/* 以下、アニメーション */
:root {
  /* --close-up-video-duration: 16s; */
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  10%,
  80% {
    opacity: 1;
  }
}

@keyframes p001_pc {
  0% {
    transform: rotate(0deg) translate(-20%, -50%) scale(0.4);
  }
  100% {
    transform: rotate(20deg) translate(-10%, -25%) scale(1);
  }
}

@keyframes p001_sp {
  0% {
    transform: rotate(0deg) translate(-30%, -20%) scale(0.7);
  }
  100% {
    transform: rotate(15deg) translate(-10%, 10%) scale(1.8);
  }
}

#i-athlete #p001 .close-up-img {
  animation:
    p001_pc var(--close-up-video-duration) linear infinite,
    fadeInOut var(--close-up-video-duration) linear infinite;

  @media (width <= 740px) {
    animation:
      p001_sp var(--close-up-video-duration) linear infinite,
      fadeInOut var(--close-up-video-duration) linear infinite;
  }
}

@keyframes p002_pc {
  0% {
    transform: rotate(12deg) translate(-1%, -15%) scale(1);
  }
  100% {
    transform: rotate(15deg) translate(28%, -21%) scale(1.4);
  }
}

@keyframes p002_sp {
  0% {
    transform: rotate(-6deg) translate(-31%, 126%) scale(1.6);
  }
  100% {
    transform: rotate(10deg) translate(55%, 40%) scale(2.4);
  }
}

#i-athlete #p002 .close-up-img {
  /* transform: rotate(-10deg) translate(16%, 10%) scale(0.8); */
  animation:
    p002_pc var(--close-up-video-duration) linear infinite,
    fadeInOut var(--close-up-video-duration) linear infinite;

  @media (width <= 740px) {
    animation:
      p002_sp var(--close-up-video-duration) linear infinite,
      fadeInOut var(--close-up-video-duration) linear infinite;
  }
}

@keyframes p003_pc {
  0% {
    transform: rotate(-3deg) translate(-7%, -1%) scale(1.2);
  }
  100% {
    transform: rotate(10deg) translate(20%, -21%) scale(2);
  }
}

@keyframes p003_sp {
  0% {
    transform: rotate(-8deg) translate(-23%, 73%) scale(1.5);
  }
  100% {
    transform: rotate(0deg) translate(22%, 56%) scale(2.6);
  }
}

#i-athlete #p003 .close-up-img {
  animation:
    p003_pc var(--close-up-video-duration) linear infinite,
    fadeInOut var(--close-up-video-duration) linear infinite;

  @media (width <= 740px) {
    animation:
      p003_sp var(--close-up-video-duration) linear infinite,
      fadeInOut var(--close-up-video-duration) linear infinite;
  }
}

@keyframes p004_pc {
  0% {
    transform: rotate(-37deg) translate(-61%, -20%) scale(2);
  }
  100% {
    transform: rotate(-17deg) translate(32%, 63%) scale(2.2);
  }
}

@keyframes p004_sp {
  0% {
    transform: rotate(-20deg) translate(50%, 180%) scale(3);
  }
  100% {
    transform: rotate(-35deg) translate(-119%, 19%) scale(2.6);
  }
}

#i-athlete #p004 .close-up-img {
  /* transform: rotate(-31deg) translate(-16%, 5%) scale(1.3); */
  animation:
    p004_pc var(--close-up-video-duration) linear infinite,
    fadeInOut var(--close-up-video-duration) linear infinite;
  @media (width <= 740px) {
    animation:
      p004_sp var(--close-up-video-duration) linear infinite,
      fadeInOut var(--close-up-video-duration) linear infinite;
  }
}