main {
  width: min(1120px, 94vw);
}

.service-tabs {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid #dbe3cf;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: 0;
}

.service-tabs ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.service-tabs li a {
  display: block;
  text-align: center;
  padding: 12px 8px;
  font-size: 13px;
  color: #55603f;
  border-right: 1px solid #e6edd8;
}

.service-tabs li:last-child a {
  border-right: none;
}

.service-tabs li a:hover {
  background: #edf5d5;
}

.service-tabs li.active a {
  background: #7d8f2a;
  color: #fff;
}

.detail-hero {
  margin-top: 12px;
  min-height: 170px;
  display: grid;
  align-items: center;
  border-radius: 0;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(79, 96, 24, 0.62), rgba(122, 139, 39, 0.46)),
    var(--hero-image) center/cover no-repeat;
}

.detail-hero > div {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #fff;
  text-align: center;
}

.detail-hero h1 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 60px);
}

.breadcrumb {
  margin-top: 10px;
  text-align: right;
  color: #7a8282;
  font-size: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.detail-content {
  margin-top: 30px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.detail-content h2 {
  text-align: left;
  font-size: clamp(32px, 3.5vw, 48px);
  margin-bottom: 16px;
}

.detail-content p {
  color: #4d5658;
  font-size: 16px;
  line-height: 1.9;
}

.detail-content p + p {
  margin-top: 10px;
}

.point-box {
  margin: 26px 0;
  background: #f4f7ed;
  border: 1px solid #dbe4c7;
  border-radius: 10px;
  padding: 20px 24px;
}

.point-box ul {
  margin-left: 1.2em;
}

.point-box li {
  color: #4f5858;
  line-height: 1.9;
}

.tabs-bottom {
  margin-top: 38px;
}

@media (max-width: 980px) {
  .service-tabs ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-tabs li a {
    border-bottom: 1px solid #e6edd8;
  }

  .service-tabs li:nth-child(3n) a {
    border-right: none;
  }
}

@media (max-width: 620px) {
  .service-tabs ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-tabs li:nth-child(3n) a {
    border-right: 1px solid #e6edd8;
  }

  .service-tabs li:nth-child(2n) a {
    border-right: none;
  }

  .detail-content h2 {
    font-size: 28px;
  }

  .detail-content p {
    font-size: 15px;
  }
}