@charset "utf-8";

/* ---------------------------------------------------- */
/* ５ページ目 */
/* ---------------------------------------------------- */
.page-5-haikei {
  min-width: 100%;
  height: auto;
  min-height: 140px;
}

#page-5 {
  z-index: 0;
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding-top: 90px;

  & .title-area {
    margin-top: -200px;
    width: 100%;

    & .title {
      margin-bottom: 0;
    }

    & h5 {
      background-color: #c8e8ba;
      margin-top: -2.5rem;
      padding-top: 3.5rem;
      margin-bottom: 0;
      padding-bottom: 3rem;
      text-align: center;
      line-height: 1.5;
    }
  }

  & .page-5_lwr {
    margin-top: -0.25rem;
    width: 100%;

    & img {
      min-width: 100%;
      min-height: 350px;
    }
  }
}

/* スライダー start----------------------------- */
.wrap {
  z-index: 20;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 290px;
  overflow: hidden;
  display: flex;
  align-items: end;
  max-width: 64vw;
  width: 100%;
  height: calc(16vw + 50px);

  & .slide-content {
    position: relative;
    padding: 0;
    width: 16vw;
    min-width: 200px;
    height: 16vw;
    min-height: 200px;

    & a {
      display: block;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    & img {
      width: 100%;
      min-height: 100%;
      object-fit: cover;
      overflow: hidden;
      box-shadow: 1px 3px 3px #aaa;
    }

    & h4 {
      position: absolute;
      bottom: 0;
      padding:5px;
      color: #fff;
      filter: drop-shadow(0 1px 1px #000);
      font-weight: normal;
    }
  }

  /* ホバー時の装飾（パターン3） */
  & .slide-content-hover {
    transition: all 0.2s;
    margin-right: 5px;
  }

  & .slide-content-hover:hover {
    transform: translateY(-20px);
    border-radius: 0 10%;
    box-shadow: 0 3px 10px 0 #333;
    opacity: 0.8;
    cursor: pointer;
  }

  & .slideshow {
    display: flex;
    padding-left: 2px;
    margin-bottom: 0;
    list-style: none;
    -webkit-animation: loop-slide 70s infinite linear 1s both;
    animation: loop-slide 70s infinite linear 1s both;
  }

}

@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* ホバー時に動きを止める（パターン2・3）*/
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* レスポンシブ対応 1600px未満*/
@media screen and (max-width:1599px) {
  .wrap {
    top: 240px;
  }
}

/* レスポンシブ対応 1400px未満*/
@media screen and (max-width:1399px) {

  #page-5 {
    padding-top: 90px;

    & .title-area {
      margin-top: -200px;
    }

    & .page-5_lwr {
      margin-top: -0.25rem;
    }
  }

  .wrap {
    top: 205px;
    height: 225px;
  }
}

/* レスポンシブ対応 1200px未満*/
@media screen and (max-width:1199px) {

  #page-5 {
    padding-top: 90px;

    & .title-area {
      margin-top: -180px;
    }

    & .page-5_lwr {
      transform: translateX(-80px);
    }
  }

  .wrap {
    max-width: 75%;
  }
}

/* レスポンシブ対応 992px未満*/
@media screen and (max-width:991px) {

  #page-5 {
    padding-top: 90px;

    & .title-area {
      margin-top: -175px;
    }

    & .page-5_lwr {
      transform: translateX(-80px);
    }
  }
}

/* レスポンシブ対応 768px未満*/
@media screen and (max-width:767px) {
  .page-5-haikei {
    min-height: 100px;
    transform: translateX(-120px);
  }

  #page-5 {
    padding-top: 90px;

    & .title-area {
      margin-top: -165px;

      & h5 {
        font-size: 15px;
      }
    }

    & .page-5_lwr {
      transform: translateX(-120px);

      & img {
        min-height: 320px;
      }
    }
  }

  .wrap {
    top: 195px;
    min-width: 96%;
    height: 200px;

    & .slide-content {
      min-width: 175px;
      min-height: 175px;
    }
  }

  /* 宇陀野菜を作る人たちの紹介(index,person)  ------*/
  /* 以下は、person.htmlで使用 -------------------*/
  .intro-person {
    width: 40%;
  }

  .intro-image-md img,
  .intro-image-xmd img,
  .intro-image-lg img,
  .intro-image-xlg img {
    height: 180px;
  }
}

/* レスポンシブ対応 576px未満*/
@media screen and (max-width:575px) {

  #page-5 {

    & .page-5_lwr {
      & img {
        min-height: 300px;
      }
    }
  }

  .wrap {
    top: 210px;
    height: 195px;

    & .slide-content {
      min-width: 170px;
      min-height: 170px;
    }
  }
}