/* ------------------------------------------------------------ */
/* 全体 */
/* ------------------------------------------------------------ */

body {
  color: #1a1a1a;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 500;
}

a {
  color: inherit;
}

/* person.html＆info.html＆／mainの背景色に使用 */
.bg-col-3 {
  background-color: #f1f8ea;
}

/* personのみで使用 */
.annotation {
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------- */
/* 全体 */
/* ------------------------------------------------------------------- */
/* 背景の動くリングstart */
.bg_img {
  z-index: -100;
  position: absolute;
  width: 100%;
  height: auto;
  animation: haikei 10s infinite linear;
}

@keyframes haikei {
  0% {
    background-position: 0 -100vh;
  }

  100% {
    background-position: 0 0;
  }
}

/* 背景の動くリングend */

/* ------------------------------------------------------------------- */
/* ヘッダー */
/* ------------------------------------------------------------------- */
header {
  z-index: 9999;
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 10rem;
  margin: 0 auto;
  background-color: #f5f5f5;
  filter: drop-shadow(0px 1px 1px rgb(30, 30, 30, 0.6));

  & .nav-udacity {
    width: 10rem;
    height: auto;
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  & .translate {
    position: absolute;
    bottom: 1rem;
    right: 0;
    height: 4rem;

    & .nav-link {
      padding: 0;
      width: 100%;
      height: 100%;

      & img {
        width: 100%;
        height: 100%;
      }
    }

    & .dropdown-toggle::after {
      display: none;
    }

    & .dropdown-menu {
      width: 12rem;
      padding: 0.5rem;

      & a {
        width: 100%;

        & img {
          width: 25px;
          height: auto;
          margin: 0 0.5rem 0 0;
        }
      }
    }

    & .dropdown-menu[data-bs-popper] {
      transform: translateX(-20%);
    }
  }
}

.navbar-nav {
  bottom: 0;
  width: 100%;
  height: 10rem;
  padding-bottom: 1.5rem;
  justify-content: center;
  gap: 30px;
  align-items: end;

  & .nav-item:nth-child(4) {
    height: 7rem;

    & .nav-link {
      padding: 0;
      width: 100%;
      height: 100%;

      & img {
        width: 100%;
        height: 100%;
      }
    }
  }

  & .nav-item {
    height: 3.5rem;

    & .nav-link {
      padding: 0;
      width: 100%;
      height: 100%;

      & img {
        width: 100%;
        height: 100%;
      }
    }

    & .dropdown-menu {
      width: 12rem;
      padding: 0.5rem;

      & a {
        width: 100%;

        & img {
          width: 25px;
          height: auto;
          margin: 0 0.5rem 0 0;
        }
      }
    }

    & .dropdown-menu[data-bs-popper] {
      transform: translateX(-20%);
    }
  }
}

.navbar-collapse {
  z-index: 9999;
}

/* ------------------------------------------------------------ */
/* トップ画像(indexのみ)*/
/* ------------------------------------------------------------ */
.top-slider {
  z-index: 0;
  position: relative;
  width: 100%;
  height: calc(100vh - 10rem);
  overflow: hidden;
  margin-bottom: 80px;

  & .top-lwr-img {
    z-index: 10;
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 0;
    filter: drop-shadow(0px 0px 1px rgb(30, 30, 30, 0.6));
  }

  & .top-slider-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: slider-1 40s linear infinite;
  }

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

  & .top-slider-img:nth-child(2) {
    background-image: url(../img/top2.png);
    animation-delay: 6s;
  }

  & .top-slider-img:nth-child(3) {
    background-image: url(../img/top3.png);
    animation-delay: 14s;
  }

  & .top-slider-img:nth-child(4) {
    background-image: url(../img/top4.png);
    animation-delay: 22s;
  }

  & .top-slider-img:nth-child(5) {
    background-image: url(../img/top5.png);
    animation-delay: 30s;
  }

  & .top-phrase {
    z-index: 10;
    min-width: 520px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    color: #f5f5f5;

    & p {
      filter: drop-shadow(2px 2px 3px rgb(30, 30, 30, 0.6));
    }

    & .sub-img {
      position: absolute;
      top: -9rem;
      right: -10rem;
      width: 20rem;
      height: auto;
    }

    & .main-img {
      width: 100%;
      height: auto;
      filter: drop-shadow(2px 2px 3px rgb(30, 30, 30, 0.6));
    }
    & .main-img-sp{
      display: none;
    }
    @media screen and (max-width:590px) {
      .main-img{
        display: none;
      }
      .main-img-sp{
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(2px 2px 3px rgb(30, 30, 30, 0.6));
      }
    }
  }
}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  4.16% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;
  }

  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------- */
/* 全般 */
/* ---------------------------------------------------- */
.title {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;

  & img {
    width: auto;
    height: clamp(100px, 10vw, 145px);
  }
}

/* 記載内容の幅規定 */
.content {
  max-width: 1600px;
  padding: 0 250px;
}

/* ---------------------------------------------------- */
/* ２ページ目 */
/* ---------------------------------------------------- */
#page-2 {
  max-width: 1600px;
  margin: 60px auto 140px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;

  & .uda-map {
    position: relative;
    width: 600px;
    height: 625px;

    & .comment {
      position: absolute;
      text-align: center;
      right: 0;
      bottom: 0.25rem;
    }

    & .name {
      display: flex;
      gap: 1rem;
      align-items: end;
      justify-content: center;
      margin-bottom: 1rem;
    }

    & .sub-comment {
      text-align: start;
    }

  }

  & .declare {
    position: relative;
    width: 600px;
    height: 700px;
    padding: 0 10px 0 10px;

    & .declare-title {
      width: 100%;
      height: auto;
    }

    & .comment {
      position: absolute;
      width: 500px;
      top: 50px;
      left: 50px;
    }

    & .signature {
      display: inline-block;
      transform: translateX(-5rem);
    }

    & .mayor {
      position: absolute;
      width: 180px;
      height: 180px;
      bottom: -60px;
      left: 350px;
    }
  }
}

/* ---------------------------------------------------- */
/* ３ページ目 */
/* ---------------------------------------------------- */
#page-3 {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 80px;

  & div {
    z-index: 10;
    position: absolute;
    min-width: 600px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    color: white;
    text-align: center;
    font-size: 1.25rem;
    filter: drop-shadow(2px 2px 3px #1e1e1e);

    & img {
      width: 75%;
      height: auto;
      margin-bottom: 1.25rem;
    }
  }

  & .haikei {
    z-index: 0;
    object-fit: cover;
  }
}

/* ---------------------------------------------------- */
/* ４ページ目 */
/* ---------------------------------------------------- */
#page-4 {
  max-width: 1600px;
  margin: 0 auto 150px;

  & .vege-photo {
    width: 90%;
    height: auto;
    margin: 60px auto 0;
  }
}

/* ---------------------------------------------------- */
/* ５ページ目 */
/* ---------------------------------------------------- */
.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: 315px;
  overflow: hidden;
  display: flex;
  max-width: 64vw;
  width: 100%;
  height: auto;

  & .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;
      border-radius: 5%;
      box-shadow: 1px 3px 3px #aaa;
    }

    & h4 {
      position: absolute;
      bottom: 0;
      left: 5px;
      color: #fff;
      filter: drop-shadow(1px 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;
    list-style: none;
    -webkit-animation: loop-slide 35s infinite linear 1s both;
    animation: loop-slide 35s 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;
}

/* スライダー end----------------------------- */

/* ---------------------------------------------------- */
/* ６ページ目 */
/* ---------------------------------------------------- */
#page-6 {
  margin: 0 auto 150px;
  max-width: 1600px;

  & .env-circle {
    width: 50%;
    height: auto;
    margin-top: 60px;
  }

  & .recipe {
    margin-top: 60px;
    width: 100%;
  }

  & .SDGs-mark {
    width: 120px;
    height: 120px;
  }
}

/* ---------------------------------------------------- */
/* ７ページ目 */
/* ---------------------------------------------------- */
#page-7 {
  margin: -65px auto 0;
  max-width: 1600px;

  & .title_img {
    width: 100%;
    height: 145px;
    transform: translateY(145px);
  }
}

/* お知らせ　*/
.info-box {
  width: 100%;
  margin: 10px auto;

  & img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }

  /* お知らせカードの設定 */
  & .info-style {
    width: 33%;
    padding: 0 10px;
    margin-bottom: 3rem;
    border: none;

    & img {
      object-fit: cover;
      object-position: center;
      height: 12rem;
    }

    /* 通常のお知らせの設定 */
    & .info-lv1 {
      background-color: blueviolet;
      color: #FEEEED;
      padding: 0.3rem 0.5rem;
      border-radius: 0.5rem;
      font-size: 0.8em;
    }

    & .info-lv1-bg {
      background-color: blueviolet;
    }

    /* 重要なお知らせの設定 */
    & .info-lv2 {
      background-color: rgb(253, 70, 70);
      color: #FEEEED;
      padding: 0.3rem 0.3rem;
      border-radius: 0.5rem;
      font-size: 0.8em;
    }

    & .info-lv2-bg {
      background-color: rgb(253, 70, 70);
    }
  }
}

.card-body {
  & a {
    color: #393939;
    text-decoration: none;
  }

  & a:hover {
    color: #8ecc54;
  }
}

.sns-1 {
  width: 540px;
  height: auto;
  padding: 0 20px;

  & .f-logo {
    height: 3.5rem;
    width: auto;
    margin-left: 0.5rem;
    margin-bottom: 1rem;
  }
}

.sns-2 {
  width: calc(100% - 540px);
  height: auto;
  padding: 0;

  & .instagram-logo {
    height: 3rem;
    width: auto;
    margin-left: 0.5rem;
    margin-bottom: 1.25rem;
  }
}

.sns-3 {
  width: 100%;

  & .movie-title {
    height: 1.85rem;
    width: auto;
    margin-bottom: 2rem;
  }

  & .youtube {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 100px;
  }
}

/* ブログ　*/
#blog {
  text-align: center;

  & .blog-title {
    height: 3.25rem;
    width: auto;
    margin-bottom: 2rem;
  }

  & .blog-box {
    width: 100%;
    margin: 0 auto;

    /* ブログカードの設定 */
    & .blog-style {
      width: 33%;
      padding: 0 10px;
      margin-bottom: 3rem;
      border: none;

      & img {
        min-width: 100%;
        object-fit: cover;
        object-position: center;
        height: 12rem;
      }

      /* ブログ記載文の設定（3行のみ表示、あとは・・・で省略） */
      & .blog-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        /* 制限したい行数が5の場合 */
        overflow: hidden;
      }

      & .card-title {
        text-align: start;
      }
    }

  }
}

/* ---------------------------------------------------- */
/* 8ページ目 */
/* ---------------------------------------------------- */
#page-8 {
  margin: 100px auto 0;
  max-width: 1600px;

  & .content {
    margin-top: 60px;
  }
}

#gallery-select {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;

  & li {
    list-style: none;
    text-align: center;
    align-self: center;
    width: 120px;
    height: 32px;
    padding-top: 2px;
    font-size: 18px;
    color: #fff;
    background-color: #ff9900;
    border-radius: 0.5rem;
  }

  & li.active {
    background-color: #af6901;
  }

  & li:hover {
    opacity: 0.6;
    color: #6d4200;
    cursor: pointer;
  }
}

#gallery {
  display: flex;
  flex-wrap: wrap;

  & .card {
    max-width: 20%;
    border: none;
    padding: 0 2.5px;
    margin-bottom: 20px;
  }

  & .group01.nonSelect {
    display: none;
  }

  & .group02.nonSelect {
    display: none;
  }

  & .group03.nonSelect {
    display: none;
  }

  & .card-img-top {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
  }

  & .card-text {
    font-size: 13px;
  }

  & .card-text.isAppear {
    display: block;
  }

  & .card-text th img {
    width: 30px;
    height: 20px;
    margin-right: 8px;
  }

  & .card-name {
    display: inline-flex;
  }
}

/* ---------------------------------------------------- */
/* 以下は、person.htmlで使用 -------------------*/
/* ---------------------------------------------------- */
/* 生産者様の人物画像 */
.intro-person {
  width: 35%;
  position: absolute;
  top: 50%;
  left: 50%;
}

/* 掲載文章の長さにより２通り設定 start ------------*/
.intro-image-md,
.intro-image-xmd,
.intro-image-lg,
.intro-image-xlg {
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.intro-image-md img,
.intro-image-xmd img,
.intro-image-lg img,
.intro-image-xlg img {
  min-width: 100%;
  height: 215px;
  object-fit: cover;
  border: 1px solid #adadad;
}

.intro-image-xmd img {
  height: 280px;
}

.intro-image-lg img {
  height: 400px;
}

.intro-image-xlg img {
  height: 415px;
}

/* 掲載文章の長さにより２通り設定 end ------------*/
.person-text {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  background-color: cornsilk;
}

/* ------------------------------------------------------------ */
/* フッター */
/* ------------------------------------------------------------ */
footer {
  width: 100%;
  height: 200px;
  background-color: #e2e2e2;

  & a {
    font-weight: 500;

    & img {
      width: auto;
      height: 3rem;
    }
  }

  & p {
    font-weight: 500;
  }

}

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


/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 1400px未満*/
@media screen and (max-width:1399px) {
  .container {
    width: 100% !important;
  }

  /* ---------------------------------------------------- */
  /* メイン */
  /* ---------------------------------------------------- */
  .content {
    padding: 0 120px;
  }

  /* ---------------------------------------------------- */
  /* 5ページ目 */
  /* ---------------------------------------------------- */
  #page-5 {
    padding-top: 90px;

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

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

  .wrap {
    top: 250px;
  }


  /* ---------------------------------------------------- */
  /* 8ページ目 */
  /* ---------------------------------------------------- */
  #gallery {
    & .card {
      max-width: 25%;
    }
  }

  /* 宇陀の有機農産物(indexのみ) の下側画像 ------------------------*/
  .product-box,
  .product {
    width: 240px;
    height: 240px;
  }

  .product-box p {
    font-size: 1.25rem;
    line-height: 1.25rem;
  }

}


/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 1200px未満*/
@media screen and (max-width:1199px) {
  .navbar-toggler {
    z-index: 9999;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #f5f5f5;
  }
  /* ------------------------------------------------------------ */
  /* ヘッダー */
  /* ------------------------------------------------------------ */
  header {
    height: 6rem;
    justify-content: space-between;

    & .nav-udacity {
      left: 1rem;
    }
  }
  .navbar-nav {
    gap: 1.25rem;
    width: 100%;
    height: auto;
    padding: 0.5rem 0.5rem 1rem;
    border-bottom-left-radius: 0.25rem;
    margin-right: 100px;

    & .nav-item:nth-child(3) {
      height: 3rem;
    }

    & .nav-item:nth-child(4){
      display: none;
    }
    & .nav-item {
      height: 3.5rem;

      & .dropdown-menu {
        width: auto;

        & a {
          padding: 0 0 0.5rem 0;
          font-size: 15px;
        }
      }

      & .dropdown-menu[data-bs-popper] {
        transform: translate(-2.5rem, 0);
      }
    }
  }



  /* ------------------------------------------------------------ */
  /* トップ */
  /* ------------------------------------------------------------ */
  .top-slider {
    height: calc(100vh - 6rem);

    & .top-phrase {
      & .sub-img {
        right: -6rem;
      }
    }
  }

  /* ---------------------------------------------------- */
  /* メイン */
  /* ---------------------------------------------------- */
  .content {
    padding: 0 30px 0 60px;

    & h5 {
      font-size: 1rem !important;
    }
  }

  /* ---------------------------------------------------- */
  /* トップ */
  /* ---------------------------------------------------- */
  .top-slider {
    margin-bottom: 120px;
  }

  /* ---------------------------------------------------- */
  /* ２ページ目 */
  /* ---------------------------------------------------- */

  #page-2 {
    margin: 60px auto 0;
    padding: 0;
    display: block;

    & .uda-map {
      margin: 0 auto 80px;

      & .name {
        display: flex;
        gap: 1rem;
        align-items: end;
        justify-content: center;
      }
    }

    & .declare {
      margin: 0 auto 120px;
    }
  }

  /* ---------------------------------------------------- */
  /* 3ページ目 */
  /* ---------------------------------------------------- */
  #page-3 {
    margin-bottom: 120px;
  }

  /* ---------------------------------------------------- */
  /* 4ページ目 */
  /* ---------------------------------------------------- */
  #page-4 {
    margin-top: -80px;
    margin-bottom: 100px;
  }

  /* ---------------------------------------------------- */
  /* 5ページ目 */
  /* ---------------------------------------------------- */
  #page-5 {
    padding-top: 90px;

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

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

  .wrap {
    top: 250px;
    max-width: 75%;
  }

  /* ---------------------------------------------------- */
  /* 7ページ目 */
  /* ---------------------------------------------------- */
  .sns-1 {
    & h3 {
      & svg {
        width: calc(1.55rem + .6vw);
        height: calc(1.55rem + .6vw);
      }
    }

    & iframe {
      transform: translateX(2rem);
    }
  }

  .sns-2 {
    & h3 {
      & svg {
        width: calc(1.55rem + .6vw);
        height: calc(1.55rem + .6vw);
      }
    }
  }



  /* ---------------------------------------------------- */
  /* ８ページ目 */
  /* ---------------------------------------------------- */
  #gallery {
    & .card {
      max-width: 33%;
    }
  }

  /* 以下は、person.htmlで使用 -------------------*/
  /* 生産者様の人物画像 */
  .intro-person {
    width: 60%;
  }

}

/* ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ */
/* レスポンシブ対応 992px未満*/
@media screen and (max-width:991px) {
  /* ------------------------------------------------------------ */
  /* 2ページ目 */
  /* ------------------------------------------------------------ */
  #page-2 {
    & .uda-map {
      width: 540px;
      height: 575px;
    }
  }

  /* ---------------------------------------------------- */
  /* 3ページ目 */
  /* ---------------------------------------------------- */
  #page-3 {
    min-width: 100%;
    height: 400px;

    & .haikei {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* ---------------------------------------------------- */
  /* 4ページ目 */
  /* ---------------------------------------------------- */

  #page-4 {
    margin-top: -20px;
  }

  /* ---------------------------------------------------- */
  /* 5ページ目 */
  /* ---------------------------------------------------- */
  #page-5 {
    padding-top: 90px;

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

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

  .wrap {
    top: 240px;
  }

  /* ---------------------------------------------------- */
  /* 6ページ目 */
  /* ---------------------------------------------------- */
  #page-6 {
    margin-top: 30px;

    & h4 {
      font-size: 1rem;
    }

    & .env-circle {
      margin-top: 30px;
    }

    & .recipe {
      margin-top: 30px;
    }

    & .SDGs-mark {
      width: 80px;
      height: 80px;
    }
  }

  /* ---------------------------------------------------- */
  /* 7ページ目 */
  /* ---------------------------------------------------- */
  #page-7 {
    margin-top: -65px;
  }

  .sns-1 {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 60px;

    & iframe {
      transform: translateX(1rem);
    }
  }

  .sns-2 {
    width: 100%;
  }

  .sns-3 {
    & .youtube {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 100%;
      margin-bottom: 100px;

      & #player1 {
        margin-bottom: 3rem;
      }
    }
  }

  #blog {
    & .blog-box {
      & .blog-style {
        width: 50%;
        margin-bottom: 2rem;
      }
    }
  }

  /* ---------------------------------------------------- */
  /* 8ページ目 */
  /* ---------------------------------------------------- */
  #page-8 {
    margin-top: 80px;
  }

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

  .intro-image-md img {
    height: 110px;
  }

  .intro-image-xmd img {
    height: 160px;
  }

  .intro-image-lg img {
    height: 225px;
  }

  .intro-image-xlg img {
    height: 250px;
  }


  /* お知らせ（indexのみ） ----------------------------------------*/
  .info-box {
    margin: 10px auto 0;

    & .info-style {
      width: 50%;
    }
  }

  /* ---------------------------------------------------- */
  /* フッター */
  /* ---------------------------------------------------- */
  footer {
    height: 240px;
  }

}

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

  /* ------------------------------------------------------------ */
  /* トップ */
  /* ------------------------------------------------------------ */
  .navbar-nav {
    background-color: #f5f5f5;
    display: grid;
    gap: 1.25rem;
    width: 5.5rem;
    height: auto;
    padding: 0.5rem 0.5rem 1rem;
    transform: translate(0, 4rem);
    border-bottom-left-radius: 0.25rem;

    & .nav-item:nth-child(3) {
      height: 3rem;
    }

    & .nav-item {
      height: 3rem;

      & .dropdown-menu {
        width: auto;

        & a {
          padding: 0 0 0.5rem 0;
          font-size: 15px;
        }
      }

      & .dropdown-menu[data-bs-popper] {
        transform: translate(-2.5rem, 0);
      }
    }
  }
  .top-slider {
    height: calc(100vh - 4.5rem);

    & .top-phrase {
      & .sub-img {
        top: -9rem;
        right: 0;
        width: 18rem;
      }
    }
  }

  /* ------------------------------------------------------------ */
  /* 2ページ目 */
  /* ------------------------------------------------------------ */
  #page-2 {
    & .uda-map {
      height: 585px;

      & .comment {
        bottom: 1rem;
      }
    }
  }

  /* ---------------------------------------------- */
  /* ３ページ目 */
  /* ---------------------------------------------- */
  #page-3 {
    margin-bottom: 60px;

    & div {
      min-width: 96%;
      font-size: 1rem;
      top: 55%;

      & img {
        max-height: 3rem;
        width: 96%;
      }
    }
  }

  /* ---------------------------------------------- */
  /* 5ページ目 */
  /* ---------------------------------------------- */
  .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: 210px;
    min-width: 96%;

    & .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;
  }

  /* ---------------------------------------------- */
  /* 7ページ目 */
  /* ---------------------------------------------- */
  .info-box {
    & .info-style {
      width: 100%;
    }
  }

  .sns-1 {
    & .f-logo {
      height: 2.75rem;
    }

    & iframe {
      transform: translateX(-0.75rem);
    }
  }

  .sns-2 {
    & .instagram-logo {
      height: 2.5rem;
    }
  }

  .sns-3 {
    & .movie-title {
      height: 1.5rem;
    }
  }

  #blog {
    & .blog-title {
      height: 2.5rem;
    }

    & .blog-box {
      & .blog-style {
        width: 100%;
        margin-bottom: 2rem;
      }
    }
  }

  /* ---------------------------------------------------- */
  /* フッター */
  /* ---------------------------------------------------- */
  footer {
    height: 270px;

    & #page-contact {
      text-align: center;
    }

    & ul {
      & li {
        padding: 0 0.5rem;
      }
    }

    & a {
      font-weight: 400;
      font-size: 14px;

      & img {
        height: 2.25rem;
      }
    }

    & p {
      font-weight: 400;
      font-size: 14px;
    }

  }
}

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

  /* ---------------------------------------------------- */
  /* メイン */
  /* ---------------------------------------------------- */
  .content {
    padding: 0 15px;

    & h5 {
      font-size: 13px !important;
    }
  }

  /* ---------------------------------------------------- */
  /* トップ */
  /* ---------------------------------------------------- */
  .top-slider {
    margin-bottom: 30px;

    & .top-phrase {
      width: 100%;
      min-width: auto;
      padding: 0 1rem;

      & .sub-img {
        top: -6rem;
        right: 0;
        width: 15rem;
      }

    }
  }

  /* ---------------------------------------------------- */
  /* ２ページ目 */
  /* ---------------------------------------------------- */
  #page-2 {
    & .uda-map {
      width: 94%;
      height: calc(94vw + 70px);

      & .comment {
        width: 96%;

        & .name {
          justify-content: end;
          padding-right: 1rem;
        }
      }

      & .sub-comment {
        font-size: 14px;
      }
    }

    & .declare {
      width: 370px;
      height: 600px;
      padding: 0 2px;

      & .comment {
        width: 375px;
        padding: 0 20px;
        top: 30px;
        left: 0;

        & h4 {
          font-size: 18px;
        }

        & h3 {
          font-size: 21px;
        }

        & h6 {
          font-size: 13px;
        }
      }

      & .signature {
        transform: translateX(-3rem);
        font-size: 15px;
      }

      & .mayor {
        position: absolute;
        width: 120px;
        height: 120px;
        bottom: -70px;
        left: 245px;
      }
    }
  }

  /* ---------------------------------------------- */
  /* ３ページ目 */
  /* ---------------------------------------------- */
  #page-3 {
    height: 450px;
    margin-bottom: 40px;

    & div {
      min-width: 96%;
      font-size: 15px;
      top: 60%;

      & img {
        max-height: 2.5rem;
        width: 96%;
      }
    }
  }

  /* ---------------------------------------------------- */
  /* ４ページ目 */
  /* ---------------------------------------------------- */
  #page-4 {
    margin-top: 0;

    & .title {
      margin-bottom: 30px;
    }

    & .vege-photo {
      width: 100%;
      height: auto;
      margin-top: 40px;
    }
  }

  /* ---------------------------------------------------- */
  /* 5ページ目 */
  /* ---------------------------------------------------- */
  #page-5 {

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

  .wrap {
    top: 225px;

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

  /* ---------------------------------------------------- */
  /* 6ページ目 */
  /* ---------------------------------------------------- */
  #page-6 {
    margin: 30px auto 80px;

    & .env-circle {
      width: 75%;
      margin-top: 20px;
    }

    & .recipe {
      margin-top: 20px;
    }

    & .content h4 {
      font-size: 13px;
    }

    & .SDGs-mark {
      width: 60px;
      height: 60px;
    }

    & p {
      font-size: 13px;
    }
  }

  /* ---------------------------------------------------- */
  /* 7ページ目 */
  /* ---------------------------------------------------- */
  #page-7 {
    margin-top: 60px;

    & .title::before {
      transform: translateY(0);
    }

    & .info-box {
      width: 100%;
    }

    & .info-style {
      width: 100%;
      padding: 0 5px;
      margin-bottom: 20px;
    }

    & .card-title {
      font-size: 18px !important;
    }

    & .sns-1 {
      & iframe {
        transform: translateX(0);
      }
    }
  }

  /* ---------------------------------------------------- */
  /* 8ページ目 */
  /* ---------------------------------------------------- */
  #page-8 {
    margin-top: 20px;

    & .content {
      margin-top: 60px;
    }
  }

  #gallery {
    & .card {
      max-width: 50%;
    }

    & .card-img-top {
      height: 105px;
    }

    & .card-body {
      padding: 5px 3px;
    }

    & .card-text {
      font-size: 12px;

      & th img {
        width: 20px;
        height: 15px;
      }
    }
  }

  #gallery-select {
    gap: 10px;

    & li {
      height: 24px;
      padding-top: 2px;
      font-size: 14px;
    }
  }

  /* お知らせ(indexのみ) -----------------------------------------*/
  .info-style {
    width: 90%;
    margin: 0 auto 3rem;
  }

  /* ------------------------------------------------------------ */
  /* フッター */
  /* ------------------------------------------------------------ */
  footer {
    margin-top: 20px;

    & li a {
      font-size: 13px;
    }

    & p {
      font-size: 13px;
    }
  }

  .contact {
    & h5 {
      font-size: 18px;
    }

    & p {
      font-size: 13px;
    }
  }

}

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

  /* ------------------------------------------------------------ */
  /* ヘッダー */
  /* ------------------------------------------------------------ */
  .header-bar {
    padding-top: 5px;
  }

  .logo-menu {
    top: 0;
    width: 60%;
    height: auto;
  }

}