@charset "UTF-8";
/* =========================================================
   service.css  事業内容ページ専用スタイル
   ========================================================= */

.srv-intro { text-align: center; }
.srv-intro h2 {
  font-family: var(--font-rounded);
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(1.5rem, 4.4vw, 2.2rem);
  margin-bottom: 18px;
}
.srv-intro p {
  text-align: left;
  font-size: 1rem;
  line-height: 2.1;
}

.srv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.srv-card {
  background: var(--white);
  border-radius: var(--radius-l);
  padding: 30px 26px;
  box-shadow: var(--shadow-s);
  transition: transform .2s ease, box-shadow .2s ease;
}
.srv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.srv-card__ic {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--pink);
  color: #fff;
  margin-bottom: 18px;
}
.srv-card__ic svg { width: 30px; height: 30px; }
.srv-card h3 {
  font-family: var(--font-rounded);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.srv-card p { font-size: .9rem; }

.srv-flow {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-inline: auto;
}
.srv-flow__item {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--cream);
  border-radius: var(--radius-m);
  padding: 22px 26px;
  box-shadow: var(--shadow-s);
}
.srv-flow__no {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-rounded);
  font-weight: 800;
  font-size: 1.4rem;
}
.srv-flow__item h3 {
  font-family: var(--font-rounded);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.srv-flow__item p { font-size: .9rem; }

@media (max-width: 860px) {
  .srv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .srv-flow__item { flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
}