@charset "utf-8";

/* ------------------------------------------------------------ */
/* トップ画像(indexのみ)*/
/* ------------------------------------------------------------ */
.top-img {
  z-index: 0;
  position: relative;
  width: 100%;
  min-height: 990px;
  margin-bottom: 80px;

  & .top-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    & .bg-slide {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 100%;
      clip-path: url(#clippath-slide);

      &::after {
        content: "";
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0) 55%, rgb(0, 0, 0, 0.15) 60%);
      }

      & .clip {
        position: absolute;
        width: 100%;
        height: 100%;

        & .slide {
          position: absolute;
          object-fit: cover;

          & .slide-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            opacity: 0;
          }
        }
      }

      & .clip:nth-child(1) {

        & .slide {
          width: 100%;
          height: 100%;
          top: 0%;
          right: 0%;

          & .slide-img {
            animation: anime1 24s linear infinite;
          }

          & .slide-img:nth-child(1) {
            background-image: url(../img/top/top1.webp);
            animation-delay: -2s;
          }

          & .slide-img:nth-child(2) {
            background-image: url(../img/top/top2.webp);
            animation-delay: 4s;
          }

          & .slide-img:nth-child(3) {
            background-image: url(../img/top/top3.webp);
            animation-delay: 10s;
          }

          & .slide-img:nth-child(4) {
            background-image: url(../img/top/top4.webp);
            animation-delay: 16s;
          }

          & .slide-img:nth-child(5) {
            background-image: url(../img/top/top5.webp);
            animation-delay: 22s;
          }
        }
      }
    }

    & .bg-river {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: #f0ffaf;
      clip-path: url(#clippath-river);

      &::after {
        content: "";
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 0) 48%, rgb(255, 255, 255, 0.1) 60%);
      }
    }
  }

  & .bg-upr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  & .bg-upr_iPad {
    display: none;
  }

  & .bg-lwr {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
  }

  & .bg-lwr_iPad {
    display: none;
  }

  & .phrase {
    position: relative;
    display: block;
    width: 50%;
    max-width: 960px;
    min-width: 875px;
    height: auto;
    transform: translate(-50%, -50%);
    top: 18%;
    left: 38%;

    & div {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;

      & .catch-phrase-upr {
        width: 77%;
        height: auto;
        padding-right: 2rem;
      }

      & .uda {
        width: 23%;
        max-height: 100%;
      }
    }

    & .catch-phrase-lwr {
      width: 60%;
      margin-left: 8%;
      margin-top: 2rem;
    }

    & .catch-phrase-lwr_iPhone {
      display: none;
    }
  }

  & .vegetable-box {
    position: absolute;
    width: clamp(180px, 13%, 250px);
    height: auto;
    bottom: 10%;
    right: 6%;

    & .serif {
      position: absolute;
      top: 0;
      left: 80%;
      transform: translate(-50%, -70%);
      width: 100%;
      height: auto;
    }

    & .vegetable {
      width: 100%;
      height: auto;
    }
  }

}

@keyframes anime1 {
  0% {
    opacity: 0;
    transform: translate(30px, -40px);
  }

  4.16% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  41.66% {
    opacity: 0;
    transform: translate(-30px, 40px);
  }

  100% {
    opacity: 0;
    transform: translate(30px, -40px);
  }
}

@keyframes anime2 {
  0% {
    opacity: 0;
    transform: translate(0px, -50px);
  }

  4.16% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  41.66% {
    opacity: 0;
    transform: translate(0px, 50px);
  }

  100% {
    opacity: 0;
    transform: translate(0px, -50px);
  }
}

@media screen and (max-width:1599px) {
  .top-img {

    & .phrase {
      width: 55%;
      min-width: auto;
      top: 16%;
      left: 35%;

      & div {
        width: 100%;
      }

      & .catch-phrase-lwr {
        width: 60%;
        margin-top: 1.25rem;
      }
    }
  }
}

@media screen and (max-width:1399px) {
  .top-img {

    & .phrase {

      & div {
        width: 100%;
      }

      & .catch-phrase-lwr {
        width: 75%;
        margin-top: 2rem;
      }
    }
  }
}

@media screen and (max-width:1199px) {
  .top-img {

    & .top-clip {
      & .bg-slide {
        clip-path: url(#clippath-slide_iPad);

        & .clip {
          & .slide {
            & .slide-img {
              animation: anime1 24s linear infinite;
            }
          }
        }

        & .clip:nth-child(1) {

          & .slide {
            width: 100%;
            height: 85%;
            top: 15%;
            left: 0%;

            & .slide-img {
              animation: anime1 24s linear infinite;
            }
          }
        }
      }

      & .bg-river {
        clip-path: url(#clippath-river_iPad);
      }
    }

    & .bg-upr {
      display: none;
    }

    & .bg-upr_iPad {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
    }

    & .bg-lwr {
      display: none;
    }

    & .bg-lwr_iPad {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: auto;
    }

    & .phrase {
      transform: translate(-50%, 0);
      top: 3%;
      width: 90%;
      left: 50%;
      text-align: start;

      & .catch-phrase-lwr {
        margin-left: 0;
      }
    }


    & .vegetable-box {
      width: clamp(100px, 23%, 280px);
      top: 58%;
      right: 4%;

      & .serif {
        left: 65%;
      }
    }
  }
}


@media screen and (max-width:991px) {
  .top-img {
    min-height: auto;
  }

}

@media screen and (max-width:767px) {}

@media screen and (max-width:575px) {
  .top-img {

    & .top-clip {
      & .bg-slide {
        &::after {
          display: block;
        }
      }

      & .bg-river {
        &::after {
          display: block;
        }
      }
    }

    & .phrase {
      width: 96%;
      transform: translate(-50%, 0);
      top: 1rem;
      left: 50%;
      text-align: center;

      & div {
        display: block;
        margin: 0;
        width: 100%;

        & .catch-phrase-upr {
          width: 100%;
          padding: 0;
        }

        & .uda {
          display: none;
        }
      }

      & .catch-phrase-lwr {
        display: none;
      }

      & .catch-phrase-lwr_iPhone {
        display: block;
        width: 100%;
        max-width: 375px;
        height: auto;
        margin-top: 1rem;
      }

    }

  }
}