body{
    display: none;    
}

/* titleLogo */
.titleLogo_container{
  aspect-ratio: 750/120;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  z-index: 10;

  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-out;
}
.titleLogo_container.scroll{
  opacity: 1;
  visibility: visible;
}
.titleLogo_img{
  width: 37%;
}


.teamf {
  position: relative;
  width: 100%;
}

.teamf_container {
  position: relative;
  width: 100%;
}


/* ロゴ */
.teamf_logo {
  display: flex;
  width: 100%;
  background-color: #fff;

  justify-content: center;
  align-items: center;

  padding: 5.0vw 0 8vw;
}

.teamf_logo_img {
  width: 58.66vw;
  height: auto;
}

/* イントロ */
.teamf_intr {
  display: block;
  position: relative;
  width: 100%;
}

.teamf_intr .block_contents {
  background-image: url(../images/teamf/teamf_bg.png);
  background-size: cover;
  background-position: center bottom;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 90%;
}

.block_heading {
  padding-bottom: 4.66vw;
  font-size: 6.4vw;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
  position: relative;
}

.block_heading:after {
  aspect-ratio: 300/8;
  margin: auto;
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40.0vw;
  background-color: #3A7961;
}

.block_heading-white {
  color: #fff;
}

.block_heading-white:after {
  background-color: #fff;
}

.teamf_intr .block_heading {
  margin-top: 11.46vw;
  margin-bottom: 10.66vw;
}

.block_desc {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 4.26vw;
  line-height: 2;
  letter-spacing: 0.01em;
  text-align: center;
}

.teamf_intr .block_desc {
  margin-bottom: 5vw;
}

/* スクロール */
.teamf_scroll {
  aspect-ratio: 750 / 890;
  position: relative;
  width: 100%;
  /* phpの方で定義 */
  /*
  background-image: url("../images/teamf_scroll.png");
  */
  background-repeat: repeat-x;
  /* 横方向にタイル状に繰り返す */
  background-size: 415%;
  /* 高さをフィットさせる */
  animation: scroll-x 15000s linear infinite;
}

@keyframes scroll-x {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -120000vw 0;
    /* 左へ流れる */
  }
}


/* 農園 */
.teamf_farm {
  display: block;
  position: relative;
  width: 100%;
}

.teamf_farm .block .block_heading {
  margin-top: 18.66vw;
  margin-bottom: 18.66vw;
  padding-bottom: 5.2vw;
}

.teamf_farm .block .block_heading:after {
  width: 40vw;
}

.teamf_farm .card {
  display: block;
  position: relative;
  width: 81.33vw;
  margin: 0 auto;
  margin-bottom: 10.66vw;
}

.teamf_farm .card img {
  width: 100%;
  height: auto;
}

.teamf_farm .card-first {
  margin-bottom: 25.06vw;
}

.teamf_farm .container {
  display: block;
  position: relative;
  width: 100%;
}

/* 注釈 */
.notes {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 27.73vw;
  font-size: 3.73vw;
  line-height: 3;
  font-weight: 400;
}




@media screen and (min-width: 768px) {
  /* titleLogo */
  .titleLogo_container{
    aspect-ratio: 2200 / 120;
  }

  .titleLogo_img{
    width: 13%;
  }

  /* ロゴ */
  .teamf_logo_img {
    width: min(440px, 20vw);
    height: auto;
  }

  .teamf_logo {
    padding: min(2.19vw, 48.40px) 0 min(2.4vw, 52.80px);
    top: min(4.7vw, 103.4px);
    left: 0;
  }

  /* イントロ */
  .teamf_intr .block_contents {
    background-image: url(../images/teamf/teamf_bg_pc.webp);
    padding-bottom: min(59%, 440px);
  }

  .block_heading {
    font-size: min(2.18vw, 48px);
    padding-bottom: min(1.59vw, 35px);
  }

  .block_heading:after {
    width: min(300px, 13.63vw);
    height: min(0.36vw, 8px);
  }

  .teamf_intr .block_heading {
    margin-top: min(3.90vw, 86px);
    margin-bottom: min(3.68vw, 81px);
  }

  .block_desc {
    font-size: min(1.45vw, 32px);
  }

  .teamf_intr .block_desc {
    margin-bottom: min(1.6vw, 35.2px);
  }

  /* スクロール */
  .teamf_scroll {
    aspect-ratio: 2200 / 346;
    /* phpの方で定義 */
    /*
    background-image: url("../images/teamf_scroll.png");
    */
    background-size: 121%;
    /* 高さをフィットさせる */
    animation: scroll-x 20000s linear infinite;
    margin-top: min(5.31vw, 117px);
    margin-bottom: min(5.31vw, 117px);
  }

  /* 農園 */
  .teamf_farm .block .block_heading {
    margin-top: min(6.68vw, 147px);
    margin-bottom: min(6.36vw, 140px);
    padding-bottom: min(1.77vw, 39px);
  }

  .teamf_farm .block .block_heading.sust-agri {
    margin: min(9.68vw, 213px) auto min(6.22vw, 137px);
    padding-bottom: min(1.95vw, 43px);
  }

  .teamf_farm .block .block_heading:after {
    width: min(300px, 13.63vw);
    height: min(0.36vw, 8px);
  }

  .teamf_farm .card {
    width: min(27.86vw, 613px);
    height: min(57.40vw, 1263px);
    overflow: hidden;
    margin: 0;
  }

  .teamf_farm .card.card-first {
    height: auto;
  }

  .teamf_farm .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    gap: min(3.63vw, 80px);
  }

  .notes {
    font-size: min(1.27vw, 28px);
    margin-top: min(8.90vw, 196px);
    margin-bottom: min(2.40vw, 53px);
  }
}