/*---------------------
      page-service
  -------------------- */
#service h2 {
  font-size: 2.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 6rem 0 1.4rem;
  scroll-margin-top: 6rem; /* 固定ヘッダーの分だけ上にオフセット */
}

#service .page__heading{
  margin-bottom: 0;
}
.page-service {
  background-color: var(--gray);
  position: relative;
  z-index: 10;
}

.page-service__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 23px;
}

.page-service__list__item{
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 2px 11px -4px rgba(0, 0, 0, 0.15);
  position: relative;
}

.page-service__list__item__img img {
  border-radius: 15px 15px 0 0;
  object-fit: cover;
  height: 15rem;
}

.page-service__list__item__text {
  padding: 2rem 2rem 8rem;
}

.page-service__list__item__text h3{
  font-weight: bold;
  font-size: 1.8rem;
}

.page-service__list__item__text p{
  font-size: 1.5rem;
  padding: 2px 0;
}

.page-service__list__item__text a{
  display: flex;
  gap: 5px;
  width: fit-content;
  color: #fff;
  background-color: var(--red);
  padding: 10px 30px;
  border-radius: 40px;
  align-items: center;
  margin-top: 10px;
  position: absolute;
  bottom: 2.5rem;
  z-index: 0;
  transition: color 0.2s, background-color 0.2s;
  justify-content: center;
}


.page-service__list__item__text a::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform 0.2s, background-color 0.2s;
  transform: scale(0.3);
  background-color: var(--red);
}

.page-service__list__item__text a:hover {
  color: var(--red);
}

.page-service__list__item__text a:hover::after {
  border: 1.5px solid var(--red);
  background-color: #ffffff;
  transform: scale(1);
}



/*-------------------------------------------------------------------------------------------
                                          レスポンシブ
  ----------------------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  /*---------------------
      page-service
  -------------------- */
  .page-service__list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

}

@media screen and (max-width: 768px) {

  /*---------------------
      page-service
  -------------------- */

  .page-service__list__item__text h3 {
    font-size: 2rem;
  }
  .page-service__list {
    grid-template-columns: 1fr; /* 1列に変更 */
  }

  .page-service__list__item__text a {
    position: relative; /* absoluteからrelativeに変更 */
    bottom: auto; /* bottom位置指定を解除 */
    margin: 20px auto 0; /* 上下左右の余白を調整 */
  }
  .page-service__list__item__text {
    padding: 2rem;
  }
}