/* ============================================
   s-faq-02 - Recruit FAQ (採用ページ FAQ)
   wp-block-details ベースのアコーディオン
   ============================================ */
.s-faq-02.wp-block-group,
.s-faq-02 {
  container-type: inline-size;
  max-width: var(--width-narrow);
  margin: 0 auto;
}

:is(.s-faq-02 *) {
  margin: 0;
}

.s-faq-02__item.wp-block-details,
.s-faq-02__item {
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.s-faq-02__item:first-child {
  border-top: 1px solid var(--color-border);
}

/* --- Question (summary) --- */
.s-faq-02__item summary {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-3-xl) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: var(--space-5-xl);
  padding-right: var(--space-5-xl);
}

.s-faq-02__item summary::-webkit-details-marker {
  display: none;
}

/* Q label */
.s-faq-02__item summary::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: var(--space-3-xl);
  font-family: var(--font-family-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* Toggle icon: 横棒（summary::after） */
.s-faq-02__item summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--font-size-xl);
  height: 1.5px;
  background: var(--color-primary);
  transform: translateY(-50%);
}

/* Toggle icon: 縦棒（details::after） → open時に回転して消える */
.s-faq-02__item::after {
  content: "";
  position: absolute;
  right: calc((var(--font-size-xl) - 1.5px) / 2);
  top: var(--space-3-xl);
  width: 1.5px;
  height: var(--font-size-xl);
  background: var(--color-primary);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  pointer-events: none;
}

.s-faq-02__item[open]::after {
  transform: rotate(90deg);
  opacity: 0;
}

.s-faq-02__item summary:hover {
  opacity: 0.7;
}

/* --- Answer --- */
.s-faq-02__item p {
  padding: 0 0 var(--space-3-xl) var(--space-5-xl);
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
  color: var(--color-text-light);
  position: relative;
}

.s-faq-02__item p::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-family-en);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}