/* === ippan page-specific === */
#services { padding: 80px 0; }
#services .container { max-width: 960px; }
#services .section-label { text-align: center; }
#services .section-heading { text-align: center; margin-bottom: 16px; }
#services .service-lead {
  text-align: center; font-size: 1.1rem; color: var(--gray-600);
  line-height: 2; margin-bottom: 48px;
}
.service-list { display: flex; gap: 40px; margin-bottom: 40px; }
.service-list dl { flex: 1; }
.service-list dt {
  font-family: var(--font-serif);
  font-size: 1.3rem; font-weight: 700; color: var(--brown-dark);
  margin-bottom: 12px; padding-left: 16px;
  border-left: 4px solid var(--orange);
}
.service-list dd { font-size: 1.05rem; color: var(--gray-600); line-height: 1.9; margin: 0; }
.permit-info {
  padding: 28px 0 0;
  border-top: 1px solid var(--gray-200);
}
.permit-info dt {
  font-size: 0.95rem; font-weight: 700; color: var(--orange-dark);
  letter-spacing: 0.1em; margin-bottom: 6px;
}
.permit-info dd {
  font-family: var(--font-serif); font-size: 1.2rem;
  font-weight: 600; color: var(--brown-dark); margin: 0;
  letter-spacing: 0.06em;
}
@media (max-width: 768px) {
  .service-list { flex-direction: column; gap: 32px; }
  .service-list dt { font-size: 1.15rem; }
  .service-list dd { font-size: 1rem; }
  .permit-info dd { font-size: 1.05rem; }
}
.section-map .container { max-width: 900px; }
.section-map { padding: 64px 0; }
.section-map .section-label { text-align: center; }
.section-map .section-heading { text-align: center; }
/* Flow section */
.flow-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.flow-step { text-align: center; }
.flow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: 0.9rem; margin-bottom: 10px;
}
.flow-step h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; }
.flow-step p { font-size: 0.78rem; color: var(--gray-600); line-height: 1.6; }
@media (max-width: 768px) {
  .flow-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
  .flow-list { grid-template-columns: 1fr; }
}