/* ============================================================
   Service Detail Page Styles — 事業詳細
   ============================================================ */

/* --------------------------------------------------
   パンくずリスト（事業詳細ページ用上書き）
-------------------------------------------------- */
.page-breadcrumb__inner {
  padding-inline: 180px;
  padding-block: 64px;
}

/* --------------------------------------------------
   サービスタイトルセクション
-------------------------------------------------- */
.sec-svc-title {
  padding-block: 128px;
  background-color: var(--color-white);
}

.sec-svc-title__inner {
  max-width: var(--width-site);
  margin-inline: auto;
  padding-inline: var(--pad-side);
  display: flex;
  flex-direction: column;
}

.sec-svc-title__en {
  font-family: var(--font-en);
  font-size: var(--fz-h2);       /* 48px */
  font-weight: var(--fw-label);  /* 600 – Montserrat SemiBold */
  line-height: 1;
  color: var(--color-main);
}

.sec-svc-title__ja {
  font-family: var(--font-ja);
  font-size: var(--fz-h2);       /* 48px */
  font-weight: var(--fw-h2);     /* 700 */
  line-height: var(--lh-h2);     /* 1.5 */
  color: var(--color-black);
}

/* --------------------------------------------------
   課題セクション
-------------------------------------------------- */
.sec-svc-issues {
  background-color: #f7f7f7;
}

.sec-svc-issues__inner {
  max-width: var(--width-site);
  margin-inline: auto;
  padding-inline: var(--pad-side);
  padding-block: 128px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sec-svc-issue {
  display: flex;
  align-items: center;
  gap: 43px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e7e5e5;
}

.sec-svc-issue__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  padding: 8px;
  background-color: var(--color-main);
  border-radius: var(--radius-sm);
  font-family: var(--font-ja);
  font-size: 32px;
  font-weight: var(--fw-body);
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}

.sec-svc-issue__text {
  font-family: var(--font-ja);
  font-size: var(--fz-h4);       /* 24px */
  font-weight: var(--fw-body-b); /* 700 */
  line-height: 2.4;
  color: var(--color-main);
}

/* --------------------------------------------------
   概要セクション
-------------------------------------------------- */
.sec-svc-desc {
  padding-block: 128px;
  background-color: var(--color-white);
}

.sec-svc-desc__inner {
  max-width: var(--width-site);
  margin-inline: auto;
  padding-inline: var(--pad-side);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.sec-svc-desc__title {
  padding: 8px;
  font-family: var(--font-ja);
  font-size: var(--fz-h3);       /* 32px */
  font-weight: var(--fw-body-b); /* 700 */
  line-height: 1.5;
  color: var(--color-black);
  text-align: center;
}

.sec-svc-desc__body {
  width: 100%;
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: var(--fw-body);   /* 400 */
  line-height: 1.5;
  color: var(--color-black);
}

.sec-svc-desc__body p {
  margin: 0;
}

.sec-svc-desc__body p + p {
  margin-top: 1.5em;
}

/* --------------------------------------------------
   特徴セクション
-------------------------------------------------- */
.sec-svc-features {
  background-color: var(--color-white);
}

.sec-svc-features__inner {
  max-width: var(--width-site);
  margin-inline: auto;
  padding-inline: var(--pad-side);
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sec-svc-features__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px; /* 32px gap + 32px margin = 64px total before first item */
}

.sec-svc-features__en {
  font-family: var(--font-en);
  font-size: var(--fz-h2);      /* 48px */
  font-weight: var(--fw-label); /* 600 */
  line-height: 1;
  color: var(--color-main);
}

.sec-svc-features__ja {
  font-family: var(--font-ja);
  font-size: var(--fz-h3);      /* 32px */
  font-weight: var(--fw-body);  /* 400 */
  line-height: 1;
  color: var(--color-black);
}

.sec-svc-feature {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.sec-svc-feature__img {
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.sec-svc-feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-svc-feature__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 37px;
}

.sec-svc-feature__title-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid #e7e5e5;
}

.sec-svc-feature__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 86px;
  padding-inline: 8px;
  background-color: var(--color-main);
  font-family: var(--font-ja);
  font-size: var(--fz-h4);      /* 24px */
  font-weight: 500;              /* Medium */
  line-height: 2;
  color: var(--color-white);
  white-space: nowrap;
}

.sec-svc-feature__title {
  font-family: var(--font-ja);
  font-size: var(--fz-h4);      /* 24px */
  font-weight: 500;              /* Medium */
  line-height: 2;
  color: var(--color-black);
}

.sec-svc-feature__desc {
  font-family: var(--font-ja);
  font-size: var(--fz-body);    /* 16px */
  font-weight: var(--fw-body);  /* 400 */
  line-height: 2;
  color: var(--color-black);
}

/* --------------------------------------------------
   サービス一覧ボタン
-------------------------------------------------- */
.sec-svc-back {
  display: flex;
  justify-content: center;
  padding: 96px var(--pad-side);
  background-color: var(--color-white);
}

/* --------------------------------------------------
   採用CTAセクション
-------------------------------------------------- */
.sec-recruit-cta__heading {
  font-weight: 400;
}

/* ============================================================
   Responsive
   ============================================================ */

/* TAB: 768px – 1024px */
@media (max-width: 1024px) {

  .page-breadcrumb__inner {
    padding-inline: 40px;
    padding-block: 40px;
  }

  .sec-svc-title {
    padding-block: 80px;
  }

  .sec-svc-title__inner {
    padding-inline: 40px;
  }

  .sec-svc-title__en,
  .sec-svc-title__ja {
    font-size: 40px;
  }

  .sec-svc-issues__inner {
    padding-inline: 40px;
    padding-block: 80px;
  }

  .sec-svc-desc {
    padding-block: 80px;
  }

  .sec-svc-desc__inner {
    padding-inline: 40px;
    gap: 48px;
  }

  .sec-svc-features__inner {
    padding-inline: 40px;
  }

  .sec-svc-back {
    padding-inline: 40px;
    padding-block: 64px;
  }
}

/* SP: ~ 767px */
@media (max-width: 767px) {

  /* タイトル */
  .sec-svc-title {
    padding-block: 48px;
  }

  .sec-svc-title__inner {
    padding-inline: var(--pad-side-sp);
  }

  .sec-svc-title__en,
  .sec-svc-title__ja {
    font-size: 28px;
  }

  /* 課題 */
  .sec-svc-issues__inner {
    padding-inline: var(--pad-side-sp);
    padding-block: 48px;
    gap: 16px;
  }

  .sec-svc-issue {
    gap: 16px;
    flex-wrap: wrap;
  }

  .sec-svc-issue__badge {
    font-size: 20px;
    height: 36px;
  }

  .sec-svc-issue__text {
    font-size: 16px;
    line-height: 1.8;
  }

  /* 概要 */
  .sec-svc-desc {
    padding-block: 48px;
  }

  .sec-svc-desc__inner {
    padding-inline: var(--pad-side-sp);
    gap: 32px;
  }

  .sec-svc-desc__title {
    font-size: 22px;
    text-align: left;
  }

  .sec-svc-desc__body {
    font-size: 15px;
  }

  /* 特徴 */
  .sec-svc-features__inner {
    padding-inline: var(--pad-side-sp);
    gap: 40px;
  }

  .sec-svc-features__header {
    margin-bottom: 0;
  }

  .sec-svc-features__en {
    font-size: 32px;
  }

  .sec-svc-features__ja {
    font-size: 22px;
  }

  .sec-svc-feature {
    flex-direction: column;
    gap: 16px;
  }

  .sec-svc-feature__img {
    width: 100%;
    height: 200px;
  }

  .sec-svc-feature__body {
    gap: 20px;
  }

  .sec-svc-feature__badge,
  .sec-svc-feature__title {
    font-size: 18px;
  }

  .sec-svc-feature__badge {
    width: auto;
    padding-inline: 12px;
  }

  /* ボタン */
  .sec-svc-back {
    padding-inline: var(--pad-side-sp);
    padding-block: 48px;
  }
}