@charset "utf-8";

/* =========================
   Section base
========================= */

.section{
  padding: 72px 0;
  background: #fff;
}

.section-head{
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.section-title{
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: .02em;
}

.section-lead{
  margin: 0;
  color: var(--color-subtext);
}

/* =========================
   Services grid
========================= */

.serviceGrid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* li（背景レイヤーの親） */
.serviceCard{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* 背景画像（ぼかし） */
.serviceCard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: blur(2px) brightness(.92);
  transform: scale(1.06);
  opacity: .55;
  border-radius: inherit;
}

/* 白い霞（文字の読みやすさ確保） */
.serviceCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background: linear-gradient(
    rgba(255,255,255,.68),
    rgba(255,255,255,.82)
  );
  border-radius: inherit;
}

/* 前面リンク（カード本体） */
.serviceCard__link{
  position: relative;
  z-index: 2;

  display: grid;
  gap: 10px;

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px 18px 16px;

  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.serviceCard__link:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border-color: rgba(76,140,122,.22);
}

/* hoverで画像を少しだけ出す */
.serviceCard:hover::before{
  opacity: .70;
  transform: scale(1.08);
}

/* タイポ */
.serviceCard__title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.serviceCard__text{
  margin: 0;
  color: rgba(51,51,51,.92);
  line-height: 1.7;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.serviceCard__more{
  color: var(--color-main);
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* 個別の背景画像 */
.serviceCard--general::before{   background-image: url("../img/services/general.webp"); }
.serviceCard--lifestyle::before{ background-image: url("../img/services/lifestyle.webp"); }
.serviceCard--checkup::before{   background-image: url("../img/services/checkup.webp"); }
.serviceCard--vaccine::before{   background-image: url("../img/services/vaccine.webp"); }
.serviceCard--fever::before{     background-image: url("../img/services/fever.webp"); }
.serviceCard--sleep::before{     background-image: url("../img/services/sleep.webp"); }

/* =========================
   Responsive
========================= */

@media (max-width: 900px){
  .serviceGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .section{ padding: 56px 0; }
  .serviceGrid{ grid-template-columns: 1fr; }
}


/* =========================
   Services hover polish
   - 薄緑のベール + ふわっと縁色
========================= */

/* うっすら薄緑のベール（文字は読めるまま） */
.serviceCard::after{
  transition: background .18s ease;
}

/* hover時：白霞に薄緑を混ぜる */
.serviceCard:hover::after{
  background: linear-gradient(
    rgba(240, 248, 245, .72),
    rgba(240, 248, 245, .88)
  );
}

/* カード本体：縁色＋ほんのり発光 */
.serviceCard__link{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.serviceCard__link:hover{
  border-color: rgba(76,140,122,.38);
  box-shadow:
    0 18px 40px rgba(0,0,0,.10),
    0 0 0 4px rgba(76,140,122,.10);
}

/* キーボード操作でも同じ見た目に（安心） */
.serviceCard__link:focus-visible{
  outline: 3px solid rgba(76,140,122,.35);
  outline-offset: 3px;
  border-color: rgba(76,140,122,.42);
}