/* ============================================================
   GESTALT Careers — SERVICE PAGES
   works-pages.css の意匠を踏襲した拡張スタイル
   （ダーク #0d0d0d / Roboto / teal #1e5a70 / 余白設計を共通化）
   ============================================================ */

/* --- breadcrumb (可視パンくず: BreadcrumbList schema と対応) --- */
.svc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.svc-breadcrumb a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; }
.svc-breadcrumb a:hover { color: #fff; }
.svc-breadcrumb .bc-sep { color: rgba(255, 255, 255, 0.3); }
.svc-breadcrumb .bc-current { color: rgba(120, 180, 200, 0.95); }

/* --- service hero --- */
.svc-hero {
  padding: 190px var(--content-right) 56px var(--page-x);
  min-height: clamp(340px, 46vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}
.svc-hero-inner { width: min(100%, 960px); margin: 0 auto; }
.svc-eyebrow {
  color: rgba(120, 180, 200, 0.92);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
  display: block;
}
.svc-hero h1 {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #fff;
}
.svc-hero h1 .accent { color: rgba(120, 180, 200, 0.95); }
.svc-lead {
  margin-top: 26px;
  width: min(100%, 760px);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.04em;
}

/* --- generic section frame --- */
.svc-section {
  padding: 84px var(--content-right) 84px var(--page-x);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.svc-section-inner { width: min(100%, 960px); margin: 0 auto; }
.svc-section h2 {
  color: #fff;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.svc-section h2 .en {
  display: block;
  color: rgba(120, 180, 200, 0.8);
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.svc-section > .svc-section-inner > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 500;
  line-height: 2.05;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.svc-section h3 {
  color: #fff;
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  margin: 34px 0 12px;
}

/* --- feature / merit cards --- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.svc-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  padding: 30px 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.24s ease, border-color 0.24s ease, transform 0.24s ease;
}
.svc-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(120, 180, 200, 0.55);
  transform: translateY(-3px);
}
.svc-card .num {
  color: rgba(120, 180, 200, 0.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.svc-card h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.svc-card p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.03em;
  margin: 0;
}

/* --- numbered flow / process --- */
.svc-flow { margin-top: 34px; display: grid; gap: 0; }
.svc-flow-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.svc-flow-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.svc-flow-step {
  color: rgba(120, 180, 200, 0.9);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.svc-flow-body h3 { margin: 0 0 8px; font-size: 18px; }
.svc-flow-body p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.95;
  margin: 0;
}

/* --- bullet list --- */
.svc-list { margin-top: 20px; display: grid; gap: 12px; }
.svc-list li {
  list-style: none;
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(120, 180, 200, 0.9);
}

/* --- FAQ accordion (CSS-only, AI-readable: 全文を初期DOMに保持し max-height で開閉) --- */
.svc-faq { margin-top: 34px; display: grid; gap: 0; }
.svc-faq-item { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.svc-faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.svc-faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  padding: 24px 44px 24px 0;
  position: relative;
  display: block;
}
.svc-faq-q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(#fff, #fff) center/14px 1.6px no-repeat,
    linear-gradient(#fff, #fff) center/1.6px 14px no-repeat;
  transition: transform 0.3s ease;
}
.svc-faq-item.is-open .svc-faq-q::after { transform: rotate(45deg); }
.svc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.svc-faq-item.is-open .svc-faq-a { max-height: 600px; }
.svc-faq-a-inner {
  padding: 0 0 26px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.03em;
}

/* --- related links (内部リンク) --- */
.svc-related {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.svc-related a {
  border: 1px solid var(--line);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.svc-related a:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.8); }
.svc-related a span.arrow { color: rgba(120, 180, 200, 0.9); }

/* --- CTA band --- */
.svc-cta {
  padding: 78px var(--page-x) 86px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.svc-cta h2 {
  color: #fff;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 18px;
}
.svc-cta p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  line-height: 1.95;
  margin-bottom: 34px;
}
.svc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 48px;
  border: 1px solid rgba(120, 180, 200, 0.7);
  background: rgba(30, 90, 112, 0.28);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  transition: background 0.24s ease, border-color 0.24s ease;
}
.svc-cta-btn:hover { background: rgba(30, 90, 112, 0.5); border-color: rgba(120, 180, 200, 1); }
.svc-cta-btn svg { width: 14px; height: 14px; }

/* --- responsive --- */
@media (max-width: 860px) {
  .svc-hero { padding-top: 150px; min-height: clamp(300px, 44vh, 380px); }
  .svc-cards { grid-template-columns: 1fr; }
  .svc-related { grid-template-columns: 1fr; }
  .svc-section { padding-top: 56px; padding-bottom: 56px; }
}