.hc-index {
  align-items: center;
  display: flex;
  flex: 1;
  padding-block: 50px;
  text-align: center;
}
.hc-index__name {
  color: var(--hc-1);
  font-size: 8rem;
  line-height: 1;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.hc-index__slogan {
  color: var(--hc-7);
  line-height: 1.7;
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.hc-index__txt {
  color: var(--hc-3);
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}
.hc-index__ttl {
  color: var(--hc-7);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.hc-index__nav {
  gap: 20px;
  display: flex;
}
.hc-index__item {
  align-items: center;
  background-color: var(--hc-root);
  border: 1px solid var(--hc-1);
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  width: calc((100% - 40px) / 3);
}
.hc-index__item:hover {
  background-color: var(--hc-hover);
  border-color: var(--hc-hover);
  transform: translateY(-10px);
}
.hc-index__item:hover .hc-index__icon {
  background-color: var(--hc-2);
}
.hc-index__item:hover .hc-index__btn {
  background-color: var(--hc-root);
  color: var(--hc-7);
}
.hc-index__item:hover .hc-index__txt,
.hc-index__item:hover .hc-index__ttl {
  color: var(--hc-root);
}
.hc-index__icon {
  align-items: center;
  background-color: var(--hc-1);
  border-radius: 100%;
  display: inline-flex;
  height: 80px;
  justify-content: center;
  margin-bottom: 30px;
  width: 80px;
}
.hc-index__icon img {
  height: auto;
  width: 30px;
}
.hc-index__btn {
  background-color: var(--hc-1);
  border-radius: 100vw;
  display: inline-block;
  color: var(--hc-root);
  font-size: 1.4rem;
  font-weight: 700;
  padding: 10px 20px 8px;
  text-transform: uppercase;
  transition: color 0.3s ease, background-color 0.3s ease;
}
@media only screen and (max-width: 1199.98px) {
  .hc-index__logo {
    margin-bottom: 15px;
  }
  .hc-index__logo img {
    width: 100px;
  }
  .hc-index__slogan {
    font-size: 1.8rem;
  }
  .hc-index__note {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }
  .hc-index__nav {
    gap: 10px;
  }
  .hc-index__item {
    padding: 10px;
    width: calc((100% - 20px) / 3);
  }
}
@media only screen and (max-width: 575.98px) {
  .hc-index {
    padding-block: 30px;
  }
  .hc-index__nav {
    flex-direction: column;
  }
  .hc-index__item {
    width: 100%;
  }
  .hc-index__icon {
    height: 60px;
    margin-bottom: 10px;
    width: 60px;
  }
  .hc-index__icon img {
    width: 20px;
  }
  .hc-index__ttl {
    font-size: 1.6rem;
  }
  .hc-index__txt {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
}

.hl-index {
  align-items: center;
  background-color: var(--hc-root);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 60px;
  min-height: 100%;
  width: 100%;
}