/* Page: Work Detail */

/* Anchor offset for fixed header */
#job-intro,
#job-openings {
  scroll-margin-top: 50px;
}

@media (max-width: 768px) {
  #job-intro,
  #job-openings {
    scroll-margin-top: 80px;
  }
}

/* Override section padding - only for work detail page */
.work-detail-page .section {
  padding: 35px 0;
}

/* ── Hero ── */
.work-detail-hero {
  position: relative;
  background: #f7f7f5;
  padding: 60px 0 0;
  overflow: hidden;
}

.work-detail-hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.work-detail-hero__text {
  flex: 0 0 35%;
  padding-bottom: 60px;
}

.work-detail-hero__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 12px;
}

.work-detail-hero__subtitle {
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 700;
  color: #999;
  /* font-family: var(--font-en, "Inter"), sans-serif; */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.work-detail-hero__media {
  flex: 1;
  overflow: hidden;
}

.work-detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-detail-hero__placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* ── Navigation Pills ── */
.work-detail-nav {
  padding: 41.6px 0;
}

.work-detail-nav--sp {
  display: none;
}

.work-detail-nav__pills {
  display: flex;
  justify-content: center;
  gap: 52px;
}

.work-detail-nav__pills .benefits-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10.4px;
  padding: 0px 26px;
  border-radius: 999px;
  font-size: 19.5px;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.25s ease;
  background: #fff;
  color: var(--color-primary, #e60012);
  border: 1px solid var(--color-primary, #e60012);
  min-width: 312px;
  height: 57.2px;
  white-space: nowrap;
}

.work-detail-nav__pills .benefits-nav__item .btn__spacer {
  display: none;
}

.work-detail-nav__pills .benefits-nav__item .btn__circle-arrow {
  background: var(--color-primary, #e60012);
  color: #fff;
  border-color: var(--color-primary, #e60012);
  width: 20.8px;
  height: 20.8px;
}

.work-detail-nav__pills .benefits-nav__item .btn__circle-arrow::before {
  border-top: 6px solid currentColor;
  border-bottom: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transform: translateY(1px);
}

.work-detail-nav__pills .benefits-nav__item:hover {
  background: var(--color-primary, #e60012);
  color: #fff;
  transform: translateY(-2px);
  opacity: 1;
}

.work-detail-nav__pills .benefits-nav__item:hover .btn__circle-arrow {
  background: #fff;
  color: var(--color-primary, #e60012);
  border-color: #fff;
}

/* ── Work Title ── */
.work-detail-title {
  padding: 0 0 32px;
}

.work-detail-title__name {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  /* color: #1a1a1a; */
  padding-bottom: 16px;
  /* border-bottom: 1px solid var(--color-border, #ccc); */
}

/* ── Content Area ── */
.work-detail-content {
  max-width: 860px;
  padding-bottom: 48px;
}

.work-detail-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.work-detail-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 32px 0 12px;
}

.work-detail-content p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 24px;
}

.work-detail-content ol {
  counter-reset: work-list;
  list-style: none;
  padding-left: 0;
  margin-bottom: 32px;
}

.work-detail-content ol li {
  counter-increment: work-list;
  position: relative;
  padding-left: 2em;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.8;
  /* color: #333; */
}

.work-detail-content ol li::before {
  content: counter(work-list) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-primary);
}

.work-detail-content ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 24px;
}

.work-detail-content ul li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  /* color: #333; */
}

/* Career Path Table (in content) */
.work-detail-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
}

.work-detail-content table th {
  width: 120px;
  padding: 16px;
  background: #f7f7f5;
  font-weight: 700;
  font-size: 14px;
  /* color: #333; */
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.work-detail-content table td {
  padding: 16px;
  font-size: 15px;
  line-height: 1.8;
  /* color: #333; */
  border-bottom: 1px solid #e0e0e0;
}

/* ── Related Jobs ── */
#job-openings.section {
  padding-bottom: 0;
}

.work-detail-jobs__heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary, #e60012);
  margin-bottom: 32px;
}

.work-detail-jobs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Back to List ── */
.work-detail-back {
  padding: 48px 0;
}

.work-detail-back .container {
  display: flex;
  justify-content: center;
}

.work-back__btn {
  width: 240px;
  height: 36px;
}

.work-back__arrow {
  transform: rotate(180deg);
}

/* Override fade-in-up for work detail — ensure always visible */
#job-intro.fade-in-up,
#job-openings.fade-in-up,
#job-openings .job-card.fade-in-up,
#job-openings .section-heading.fade-in-up,
.work-detail-title.fade-in-up,
.work-detail-content.fade-in-up,
.work-detail-back.fade-in-up,
.work-detail-nav.fade-in-up,
.work-detail-jobs .job-card {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  /* Hero */
  .work-detail-hero {
    padding: 32px 0 0;
  }

  .work-detail-hero__inner {
    flex-direction: column;
    gap: 20px;
  }

  .work-detail-hero__text {
    flex: none;
    padding-bottom: 0;
    text-align: center;
  }

  .work-detail-hero__title {
    font-size: 24px;
  }

  .work-detail-hero__subtitle {
    font-size: 12px;
  }

  /* Navigation Pills */
  .work-detail-nav {
    padding: 31.2px 0;
  }

  .work-detail-nav--pc {
    display: none;
  }

  .work-detail-nav--sp {
    display: block;
  }

  .work-detail-nav--sp .work-detail-nav__pills {
    flex-direction: row;
    justify-content: center;
    gap: 13px;
  }

  .work-detail-nav--sp .benefits-nav__item {
    min-width: 156px;
    height: 28.6px;
    font-size: 9.75px;
    padding: 0 13px;
  }

  .work-detail-nav--sp .benefits-nav__item .btn__circle-arrow {
    width: 10.4px;
    height: 10.4px;
  }

  .work-detail-nav--sp .benefits-nav__item .btn__circle-arrow::before {
    border-top: 5.2px solid currentColor;
    border-left: 3.9px solid transparent;
    border-right: 3.9px solid transparent;
  }

  .work-detail-nav__pills {
    flex-direction: column;
    align-items: center;
    gap: 13px;
  }

  .work-detail-nav__pill {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    padding: 10px 24px;
    font-size: 14px;
  }

  /* Job Introduction */
  #job-intro .section-heading {
    margin-bottom: 0;
  }

  #job-intro.section {
    padding: 0;
  }

  /* Work Title */
  .work-detail-title {
    padding: 0 0 20px;
  }

  .work-detail-title__name {
    font-size: 20px;
    padding-bottom: 12px;
  }

  /* Content Area */
  .work-detail-content {
    padding-bottom: 32px;
  }

  .work-detail-content h2 {
    font-size: 18px;
    margin: 32px 0 12px;
    padding-bottom: 10px;
  }

  .work-detail-content h3 {
    font-size: 16px;
    margin: 24px 0 10px;
  }

  .work-detail-content p {
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 20px;
  }

  .work-detail-content ol li,
  .work-detail-content ul li {
    font-size: 14px;
    line-height: 1.75;
  }

  /* Career Path Table */
  .work-detail-content table {
    margin: 16px 0 24px;
  }

  .work-detail-content table th {
    width: 80px;
    padding: 12px 8px;
    font-size: 13px;
  }

  .work-detail-content table td {
    padding: 12px 8px;
    font-size: 14px;
    line-height: 1.7;
  }

  /* Related Jobs */
  .work-detail-jobs {
    margin-top: 20px;
  }

  /* .work-detail-jobs .job-card {
    padding: 16px 0;
  } */

  /* Back to List */
  .work-detail-back {
    padding: 32px 0;
  }

  .btn--back-circle {
    width: 110px;
    height: 110px;
    font-size: 11px;
  }
}

/* ------------------------------
   ACF based sections (Work detail)
------------------------------ */

/* 赤字見出し共通 */
.work-detail-duties__heading,
.work-detail-career__heading,
.work-detail-jobs__heading--red {
  color: var(--color-primary);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  margin-bottom: 0.5em;
}

/* 区切り線 */
.work-detail__divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5em 0;
}

/* 概要テキスト */
.work-detail-title__overview {
  margin-top: 1em;
  font-size: 14px;
  line-height: 1.8;
  border-bottom: 1px solid var(--color-border, #ccc);
  padding-bottom: 30px;
}

/* メイン担当業務 */
.work-detail-duties__main {
  font-size: 14px;
  line-height: 1.8;
  /* color: #333; */
}

.work-detail-duties__sub-heading {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.work-detail-duties__detail {
  font-size: 0.95rem;
  line-height: 1.8;
  /* color: #333; */
}

/* キャリアイメージ */
.work-detail-career__desc {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* キャリア時系列 */
.work-detail-career__timeline {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin-top: 1.5em;
}

.career-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
}

.career-timeline__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  min-height: 50px;
}

.career-timeline__badge-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画像がある時はプレースホルダーテキストを非表示 */
.career-timeline__badge-img + .career-timeline__badge-placeholder {
  display: none;
}

/* 画像がない（読み込み失敗）時のフォールバック */
.career-timeline__badge-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: #d32f2f;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

.career-timeline__content {
  font-size: 14px;
  line-height: 1.8;
  flex: 1;
}

/* SP対応 */
@media (max-width: 768px) {
  .career-timeline__item {
    flex-direction: column;
    gap: 1.5em;
  }
  .career-timeline__badge {
    width: 120px;
    height: 105px;
    font-size: 0.85rem;
    margin: auto;
  }
  .work-detail-title__overview {
    padding-bottom: 30px;
  }
  .work-detail-page .section {
    padding: 0;
    padding-bottom: 20px;
  }
}