/* ------------------------------
    farmer
------------------------------ */
main {
  padding-bottom: 100rem;
  background: url(../images/farmer/bg.png) top left/cover;
  overflow: hidden;
}
main::before {
  content: "";
  position: absolute;
  top: 277rem;
  left: -16rem;
  width: 239rem;
  height: calc(100% - 277rem);
  background: url(../images/common/bg_vegetable_left.png) top left/100% auto repeat-y;
}
main::after {
  content: "";
  position: absolute;
  top: 277rem;
  right: 0;
  width: 239rem;
  height: calc(100% - 277rem);
  background: url(../images/common/bg_vegetable_right.png) top right/100% auto repeat-y;
}

@media screen and (max-width: 768px) {
  main {
    padding-bottom: 60rem;
  }
  main::before, main::after {
    display: none;
  }
}
.farmer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rem;
}
.farmer-list .card {
  width: calc((100% - 40rem) / 3);
}
.farmer-list .card .card-image {
  border-radius: 10rem;
  overflow: hidden;
  margin-bottom: 15rem;
}
.farmer-list .card .card-name {
  font-size: 21rem;
  position: relative;
  border-radius: 10rem;
  padding: 5rem 17rem;
  margin-bottom: 15rem;
  background-color: #fff;
  overflow: hidden;
}
.farmer-list .card .card-name small {
  font-size: 16rem;
}
.farmer-list .card .card-name::before {
  position: absolute;
  content: "";
  top: calc(50% - 9rem);
  left: -9rem;
  width: 18rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--orange);
}
.farmer-list .card .card-links {
  display: flex;
  column-gap: 8rem;
  width: 100%;
  position: relative;
  margin-top: 15rem;
}
.farmer-list .card .card-links .card-links-item {
  width: 48rem;
}
.farmer-list .card .card-links .card-links-item a {
  transition: opacity 0.3s;
}
.farmer-list .card .card-links .copy-window {
  line-height: 1.4;
  color: #fff;
  display: none;
  width: 100%;
  position: absolute;
  left: 0;
  top: calc(100% + 10rem);
  padding: 10rem;
  background-color: var(--text-color);
  border-radius: 10rem;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .farmer-list .card .card-links .card-links-item a:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  .farmer-list {
    row-gap: 25rem;
  }
  .farmer-list .card {
    width: 100%;
  }
  .farmer-list .card .card-name {
    padding: 10rem 12rem;
  }
  .farmer-list .card .card-name::before {
    width: 16rem;
    top: calc(50% - 8rem);
    left: -8rem;
  }
}/*# sourceMappingURL=farmer.css.map */