#i-athlete .sec_hero {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 405fr 225fr 405fr 405fr;
  grid-template-areas:
    "flex-01 flex-01 grip logo"
    "flex-02 wire wire tough";
  background: url("../img/kv/bg_kv_pc.webp") no-repeat center/cover;
  aspect-ratio: 16 / 9;

  @media (width <= 740px) {
    grid-template-rows: 187.5fr 85fr 127.5fr 60fr 127.5fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "flex-01 flex-02"
      "wire flex-02"
      "wire tough"
      "grip tough"
      "grip logo";
    background: url("../img/kv/bg_kv_sp.webp") no-repeat center/cover;
    aspect-ratio: 375 / 587;
  }

  > div {
    position: relative;
    overflow: hidden;
  }

  .label {
    position: absolute;
    top: calc(15 / 1440 * 100vw);
    right: calc(15 / 1440 * 100vw);
    width: auto;
    height: calc(24 / 1440 * 100vw);

    @media (width <= 740px) {
      height: calc(13.53 / 375 * 100vw);
    }
  }

  .copy {
    position: absolute;
  }

  .flex-01 {
    grid-area: flex-01;

    .label {
      @media (width <= 740px) {
        top: calc(10 / 375 * 100vw);
        left: calc(10 / 375 * 100vw);
      }
    }

    .copy {
      top: 0;
      left: 0;
      width: calc(73 / 1440 * 100vw);
    }
  }
  .grip {
    grid-area: grip;

    .label {
      @media (width <= 740px) {
        top: auto;
        bottom: calc(10 / 375 * 100vw);
        left: calc(10 / 375 * 100vw);
      }
    }
  }
  .logo {
    grid-area: logo;
    align-content: center;
    text-align: center;

    img {
      width: calc(250 / 1440 * 100vw);

      @media (width <= 740px) {
        width: calc(110 / 375 * 100vw);
      }
    }
  }
  .flex-02 {
    grid-area: flex-02;

    .label {
      @media (width <= 740px) {
        top: auto;
        right: calc(10 / 375 * 100vw);
        bottom: calc(10 / 375 * 100vw);
      }
    }

    .copy {
      @media (width <= 740px) {
        top: 0;
        right: 0;
        width: calc(38.5 / 375 * 100vw);
      }
    }
  }
  .wire {
    grid-area: wire;

    /* override */
    .label {
      top: auto;
      bottom: calc(15 / 1440 * 100vw);
      left: calc(15 / 1440 * 100vw);

      @media (width <= 740px) {
        top: calc(10 / 375 * 100vw);
        right: calc(10 / 375 * 100vw);
        left: auto;
      }
    }

    .copy {
      top: 0;
      right: 0;
      width: calc(373 / 1440 * 100vw);

      @media (width <= 740px) {
        top: auto;
        bottom: 0;
        width: 100%;
      }
    }
  }
  .tough {
    grid-area: tough;

    .label {
      @media (width <= 740px) {
        top: auto;
        right: calc(10 / 375 * 100vw);
        bottom: calc(10 / 375 * 100vw);
      }
    }
  }
}

/* 以下、アニメーション */
#i-athlete .sec_hero {
  --duration: 1s;
  --easing: cubic-bezier(0, 1, 0.68, 1);
  --global-delay: 0.3s;

  .flex-01 {
    .product {
      transition: transform var(--duration) calc(0.2s + var(--global-delay))
        var(--easing);

      @starting-style {
        transform: translateY(100%);

        @media (width <= 740px) {
          transform: translateX(100%);
        }
      }
    }

    .copy {
      transition: transform var(--duration) calc(1s + var(--global-delay))
        var(--easing);

      @starting-style {
        transform: translateX(-100%);
      }
    }
  }

  .flex-02 {
    .product {
      transition: transform var(--duration) calc(0.4s + var(--global-delay))
        var(--easing);

      @media (width <= 740px) {
        transition-delay: 0.3s;
      }

      @starting-style {
        transform: translateY(-100%);
      }
    }

    .copy {
      @media (width <= 740px) {
        transition: transform var(--duration) calc(0.9s + var(--global-delay))
          var(--easing);

        @starting-style {
          transform: translateX(100%);
        }
      }
    }
  }

  .grip {
    .product {
      transition: transform var(--duration) calc(0.3s + var(--global-delay))
        var(--easing);

      @media (width <= 740px) {
        transition-delay: calc(1s + var(--global-delay));
      }

      @starting-style {
        transform: translateX(100%);
      }
    }
  }

  .wire {
    .product {
      transition: transform var(--duration) calc(0.6s + var(--global-delay))
        var(--easing);

      @media (width <= 740px) {
        transition-delay: calc(0.5s + var(--global-delay));
      }

      @starting-style {
        transform: translateY(100%);

        @media (width <= 740px) {
          transform: translateY(-100%);
        }
      }
    }

    .copy {
      transition: transform var(--duration) calc(0.9s + var(--global-delay))
        var(--easing);

      @starting-style {
        transform: translateY(-100%);

        @media (width <= 740px) {
          transform: translateY(100%);
        }
      }
    }
  }

  .tough {
    .product {
      transition: transform var(--duration) calc(0.8s + var(--global-delay))
        var(--easing);

      @media (width <= 740px) {
        transition-delay: calc(0.8s + var(--global-delay));
      }

      @starting-style {
        transform: translateY(-100%);

        @media (width <= 740px) {
          transform: translateY(100%);
        }
      }
    }
  }

  .logo img {
    transition: opacity 0.8s calc(1.5s + var(--global-delay));

    @starting-style {
      opacity: 0;
    }
  }

  .label {
    transition: opacity 0.8s calc(1.2s + var(--global-delay));

    @starting-style {
      opacity: 0;
    }
  }
}