/* ==========================================================================
   サービス案内（service.html）
   ========================================================================== */

/* 見出し帯のカバー画像（PC用 2400×1018 / スマホ用 1080×1080） */
.page-header--cover {
  background-image: var(--cover-overlay), url("../assets/covers/cover-service-pc.jpg");
}

@media (max-width: 767px) {
  .page-header--cover {
    background-image: var(--cover-overlay), url("../assets/covers/cover-service-sp.jpg");
  }
}

/* フェーズカードの中身（内容・訴求・料金の3列。狭い画面では折り返す） */
.phase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
  padding-top: 8px;
}

.phase__label {
  font-size: 12px;
  color: var(--text-muted);
}

.phase__content {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.7;
}

/* 料金の目安 */
.price-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  align-self: start;
}

.price-box__label {
  font-size: 12px;
  color: var(--text-muted);
}

.price-box__price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-heading);
}

.price-box__note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* フェーズ一覧の下はすぐCTAが続くため、下側の余白をなくして間を詰める */
.section--service {
  padding-bottom: 0;
}