/* color */
/* ============================================ */
/* font */
/* ============================================ */
/* achieve */
/* ============================================ */
#wrapper article h1 {
  background-image: url("../images/achieve/main-img.jpg");
}

.achieve-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media all and (max-width: 767px) {
  .achieve-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
}
@media all and (max-width: 430px) {
  .achieve-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.achieve-list > li {
  box-sizing: border-box;
  border: 1px solid #932343;
  line-height: 1.4;
  padding-bottom: 16px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
}
@media all and (max-width: 767px) {
  .achieve-list > li {
    padding-bottom: 12px;
  }
}
.achieve-list__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 236/150;
}
.achieve-list__name {
  word-break: keep-all;
  font-size: 1.6rem;
  font-weight: 500;
  width: calc(100% - 20px);
  margin-inline: auto;
  margin-top: 10px;
}
@media all and (max-width: 767px) {
  .achieve-list__name {
    font-size: 1.4rem;
  }
}
.achieve-list__detail {
  width: calc(100% - 20px);
  margin-top: 4px;
  margin-inline: auto;
  word-break: keep-all;
}
@media all and (max-width: 767px) {
  .achieve-list__detail {
    font-size: 1.2rem;
  }
}
.achieve-list__link {
  width: calc(100% - 20px);
  margin-top: 12px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 10px;
}
.achieve-list__link > div {
  width: 80px;
}
@media all and (max-width: 767px) {
  .achieve-list__link > div {
    width: 75px;
  }
}
.achieve-list__link a {
  box-sizing: border-box;
  padding: 2px 4px;
  border-radius: 6px;
  display: block;
  width: 100%;
  border: 1px solid #932343;
  background: #932343;
  color: #fff !important;
  text-decoration: none;
  font-size: 1.2rem;
}
@media all and (max-width: 767px) {
  .achieve-list__link a {
    font-size: 1.1rem;
  }
}
.achieve-list__link a::before {
  font-family: Fontawesome;
  content: "\f0a9";
  margin-right: 0.4em;
}
.achieve-list__link a:hover {
  background: #fff;
  color: #932343 !important;
}