/* ============================================================
   Service Page — Figma design implementation
   ============================================================ */

.page-service .service-main {
  padding-top: 80px;
}

/* ---------- Hero ---------- */
.service-hero {
  padding: 60px 40px 80px;
}

.service-breadcrumb {
  display: flex;
  gap: 16px;
  align-items: center;
  font: 400 13px/1.5 "Inter", "Noto Sans JP", sans-serif;
  color: #737070;
  margin-bottom: 60px;
}

.service-breadcrumb a {
  color: #737070;
}

.service-breadcrumb a:hover {
  color: #302a2b;
}

.service-breadcrumb-sep {
  color: #737070;
}

.service-breadcrumb-current {
  color: #737070;
}

.service-hero-inner {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.service-hero-text {
  flex: 1;
  min-width: 280px;
  max-width: 560px;
}

.service-page-title-en {
  font: 200 60px/1 "Inter", sans-serif;
  color: #f05064;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.service-page-title-jp {
  font: 700 24px/1.55 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
  margin-bottom: 32px;
}

.service-lead {
  font: 400 16px/1.8 "Inter", "Noto Sans JP", sans-serif;
  color: #1e1e1e;
}

.service-lead p {
  margin-bottom: 1em;
}

.service-lead p:last-child {
  margin-bottom: 0;
}

.service-hero-link {
  margin-top: 24px;
}

.service-hero-link .service-card-btn {
  margin-top: 0;
}

/* ---------- Diagram（顧客を捉える / 施策を実行する）---------- */
.service-hero-diagram {
  flex-shrink: 0;
  width: 100%;
  max-width: 480px;
}

.service-diagram {
  background: #f9f8f8;
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.service-diagram-outer {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
}

.service-diagram-left,
.service-diagram-right {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-diagram-label {
  display: inline-block;
  font: 400 12px/1 "Inter", "Noto Sans JP", sans-serif;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.service-diagram-label--red {
  background: #f05064;
  color: #fff;
}

.service-diagram-label--blue {
  background: #4a90d9;
  color: #fff;
}

.service-diagram-caption {
  font: 700 14px/1.4 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
  margin-bottom: 12px;
}

.service-diagram-list {
  font: 400 13px/1.5 "Inter", "Noto Sans JP", sans-serif;
  color: #737070;
  list-style: none;
}

.service-diagram-list li + li {
  margin-top: 4px;
}

.service-diagram-creative {
  width: 100%;
}

.service-diagram-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  font: 400 11px/1.4 "Inter", "Noto Sans JP", sans-serif;
  color: #737070;
  justify-content: center;
}

/* ---------- Section common ---------- */
.service-section {
  padding: 100px 40px;
  background: #fff;
}

.service-section--gray {
  background: #f9f8f8;
}

.service-section-title {
  display: block;
  margin-bottom: 48px;
}

.service-section-title-jp {
  display: block;
  font: 700 24px/1.55 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
  margin-bottom: 8px;
}

.service-section-title-en {
  display: block;
  font: 200 14px/1.5 "Inter", sans-serif;
  color: #737070;
  letter-spacing: 0.02em;
}

/* ---------- Card grid ---------- */
.service-card-grid {
  display: grid;
  gap: 24px;
}

.service-card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.service-card-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- Service card ---------- */
.service-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.service-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.service-card-head {
  min-height: 120px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card-head--placeholder {
  background: #e8e6e6;
  border-radius: 10px;
}

.service-card-title {
  font: 700 18px/1.4 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.service-card-title br {
  display: block;
}

.service-card-logo {
  font: 700 18px/1.3 "Inter", "Noto Sans JP", sans-serif;
  color: #302a2b;
}

.service-card-logo--3c1 {
  font-size: 24px;
  font-weight: 700;
}

.service-card-desc {
  font: 500 16px/1.65 "Inter", "Noto Sans JP", sans-serif;
  color: #1e1e1e;
  margin-bottom: 20px;
  flex: 1;
}

.service-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/1 "Inter", "Noto Sans JP", sans-serif;
  margin-top: auto;
  width: fit-content;
}

.service-card .service-card-btn + .service-card-btn {
  margin-top: 12px;
}

.service-card-btn .icon-chevron-right-small {
  flex-shrink: 0;
}

/* アウトラインボタン（お問い合わせ用）*/
.btn-outline-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  background: transparent;
  border: 1px solid #302a2b;
  border-radius: 100px;
  color: #302a2b;
  font: 400 13px/1 "Inter", "Noto Sans JP", sans-serif;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  white-space: nowrap;
}

.btn-outline-small:hover {
  opacity: 0.85;
  background: rgba(48, 42, 43, 0.05);
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .service-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1079px) {
  .service-hero {
    padding: 40px 24px 60px;
  }

  .service-hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .service-hero-text {
    max-width: none;
  }

  .service-hero-diagram {
    max-width: 360px;
    margin: 0 auto;
  }

  .service-diagram-outer {
    flex-direction: column;
    max-width: 280px;
    margin: 0 auto;
  }

  .service-section {
    padding: 60px 24px;
  }

  .service-card-grid--3col,
  .service-card-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  .service-hero {
    padding: 32px 16px 48px;
  }

  .service-breadcrumb {
    margin-bottom: 40px;
    font-size: 12px;
  }

  .service-page-title-en {
    font-size: 40px;
  }

  .service-page-title-jp {
    font-size: 20px;
  }

  .service-lead {
    font-size: 14px;
  }

  .service-section {
    padding: 48px 16px;
  }

  .service-section-title {
    margin-bottom: 32px;
  }

  .service-section-title-jp {
    font-size: 20px;
  }

  .service-card-grid--3col,
  .service-card-grid--4col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card {
    padding: 20px;
  }

  .service-card-head {
    min-height: 100px;
  }
}