#i-athlete .parts_product-lineup {
  container-type: inline-size;
  margin-top: min(calc(90 / var(--max-w-pad) * 100vw), 90px);

  @media (width <= 740px) {
    margin-top: calc(60 / var(--design-w-sp) * 100vw);
    overflow-x: auto;
  }

  ul {
    display: flex;
    column-gap: calc(90 / var(--max-w) * 100cqw);

    @media (width <= 740px) {
      display: inline-flex;
      padding-inline: calc(45 / var(--design-w-sp) * 100vw);
    }
  }

  li {
    display: grid;
    row-gap: calc(30 / var(--max-w) * 100cqw);
    width: calc(290 / var(--max-w) * 100cqw);
    text-align: center;

    @media (width <= 740px) {
      row-gap: calc(28 / var(--design-w-sp) * 100vw);
      width: calc(200 / var(--design-w-sp) * 100vw);
      font-size: calc(14 / var(--design-w-sp) * 100vw);
    }
  }

  a.product-name {
    display: grid;
    row-gap: calc(10 / var(--max-w) * 100cqw);

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

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

  .imgs {
    aspect-ratio: 290/139;
  }

  .imgs a {
    display: none;
    position: relative;
    transition: opacity 0.3s;

    @starting-style {
      opacity: 0;
    }

    &.is-active {
      display: block;
    }

    &:hover::before {
      position: absolute;
      z-index: 1;
      inset: 0;
      border: 1px solid rgba(0, 0, 0, 0.15);
      width: 100%;
      height: 100%;
      content: "";
    }
  }

  .buttons {
    display: flex;
    column-gap: calc(20 / var(--max-w) * 100cqw);
    justify-content: center;

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

  .buttons label {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    width: calc(28 / var(--max-w) * 100cqw);
    height: calc(28 / var(--max-w) * 100cqw);

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

    &:hover,
    &:has(input:checked) {
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    &::before {
      display: block;
      cursor: pointer;
      border-radius: 50%;
      background-color: #000;
      width: calc(18 / var(--max-w) * 100cqw);
      height: calc(18 / var(--max-w) * 100cqw);
      content: "";

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

    input {
      display: none;
    }

    &.is-28e100::before {
      background-color: #28e100;
    }
    &.is-00cf27::before {
      background-color: #00cf27;
    }
    &.is-8a8a8a::before {
      background-color: #8a8a8a;
    }
    &.is-9b9b9b::before {
      background-color: #9b9b9b;
    }
    &.is-919ba5::before {
      background-color: #919ba5;
    }
    &.is-000000::before {
      background-color: #000;
    }
    &.is-0048e2::before {
      background-color: #0048e2;
    }
    &.is-a56f32::before {
      background-color: #a56f32;
    }
    &.is-dc0000::before {
      background-color: #dc0000;
    }
    &.is-2d1eff::before {
      background-color: #2d1eff;
    }
    &.is-ffffff::before {
      border: 0.25px solid #000;
      background-color: #fff;
    }
    &.is-grad-cf9f::before {
      background: linear-gradient(
        38.92deg,
        #cccccc 4.3%,
        #ffffff 31.72%,
        #9b9b9b 68.28%,
        #ffffff 95.7%
      );
    }
  }
}