/* ============================================
   s-faq-03 - FAQ (ピンク帯見出し + アコーディオン)
   wp-block-details ベースのアコーディオン
   ============================================ */
.s-faq-03 {
  container-type: inline-size;
  max-width: var(--width-narrow);
  margin: 0 auto;
}

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

/* --- Pink band heading --- */
.s-faq-03__heading {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-2-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-align: center;
  padding: var(--space-2-xl) var(--space-3-xl);
  margin-bottom: var(--space-5-xl);
}

/* --- FAQ list container --- */
.s-faq-03__list {
  max-width: var(--content-width-2xl);
  margin: 0 auto;
}

/* --- FAQ item (details element) --- */
.s-faq-03__item.wp-block-details,
.s-faq-03__item {
  border-bottom: 1px solid var(--color-primary-light);
  position: relative;
}

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

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

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

/* Q label */
.s-faq-03__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-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* Toggle icon: circle with horizontal line */
.s-faq-03__item summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--space-3-xl);
  height: var(--space-3-xl);
  border: 1px solid var(--color-text-light);
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--color-text-light), var(--color-text-light)) center center / 10px 1.5px no-repeat;
}

/* Toggle icon: vertical line via details pseudo (forms +) */
.s-faq-03__item::after {
  content: "";
  position: absolute;
  right: calc(var(--space-3-xl) / 2);
  top: 50%;
  width: 1.5px;
  height: 10px;
  background: var(--color-text-light);
  transform: translate(50%, -50%);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  pointer-events: none;
}

.s-faq-03__item[open]::after {
  transform: translate(50%, -50%) rotate(90deg);
  opacity: 0;
}

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

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

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

/* --- Responsive --- */
@container (max-width: 599px) {
  .s-faq-03__heading {
    font-size: var(--font-size-xl);
    padding: var(--space-xl) var(--space-2-xl);
    margin-bottom: var(--space-4-xl);
  }

  .s-faq-03__item summary {
    font-size: var(--font-size-md);
    padding-right: var(--space-5-xl);
  }
}