@charset "UTF-8";

/**
 * customer
 */

.top_content_customer,
.customer_content {
  position: relative;
  background: var(--c2);
  .content_header {
    h2 {
      color: #fff;
    }
    h3 {
      color: var(--c3);
    }
    .customer_info {
      position: relative;
      z-index: 5;
      color: #8b6e6e;
      font-size: 2.2rem;
      margin-top: 117px;
      strong {
        font-size: 3.2rem;
        font-weight: 700;
        color: var(--c2);
      }
    }
    .band {
      margin-top: 4px;
      position: relative;
      z-index: 5;
      img {
        margin: 0 auto;
        max-width: 50%;
      }
    }
  }
  .binder {
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 24%;
    }
  }
}

.top_content_customer::before,
.customer_content::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 210px;
  width: 58%;
  height: 380px;
  clip-path: polygon(0 100%, 0 30%, 50% 0, 100% 30%, 100% 100%);
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 0;
}

.content_customer {
  position: relative;
  .photo {
    img {
      position: absolute;
      right: 0;
      bottom: 100%;
      width: 25%;
    }
  }
  .more_link {
    a {
      background-color: #e9a93a;
    }
  }
}

.archive_elements_customer {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  .customer_element {
    width: calc(calc(100% - 80px) / 3);
  }
}

.customer_elements,
.archive_elements_customer {
  .customer_element {
    text-decoration: none;
    .thumbnail {
      position: relative;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
      }
    }
    .thumbnail::before {
      content: "";
      display: block;
      padding-top: 100%;
    }
    h3 {
      font-size: 2.4rem;
      font-family: var(--go);
      color: #91754d;
      background: var(--c3);
      padding: 16px 32px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    background: rgba(215, 223, 182, 0.8);
    border-radius: 100%;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    color: #fff;
    transform: rotate(-45deg);
  }
  .swiper-button-prev::after {
    margin-left: 8px;
  }
  .swiper-button-next::after {
    transform: rotate(135deg);
    margin-right: 8px;
  }
}

/* archive */

.customer_content_header {
  background: var(--c2);
  padding-top: 100px;
  padding-bottom: 80px;
  .content_header {
    h2 {
      color: #fff;
    }
  }
}

.customer_content {
  .binder {
    top: auto;
    bottom: calc(100% + 140px);
    left: 0;
    transform: translateX(0);
  }
}

@media screen and (max-width: 1110px) {
}
@media screen and (max-width: 740px) {
  .top_content_customer {
    .binder {
      top: -34px;
    }
  }
  .customer_content {
    .binder {
      bottom: calc(100% + 230px);
    }
  }

  .customer_content_header {
    padding-top: 27px;
    .photo {
      display: none;
    }
  }
  .archive_elements_customer {
    .customer_element {
      width: 100%;
    }
  }
  .top_content_customer::before,
  .customer_content::before {
    width: 100%;
    top: 110px;
  }
  .top_content_customer,
  .customer_content {
    .content_header {
      .customer_info {
      }
    }
  }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}