/* ========================================
  FAQ
======================================== */

.faq-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 80px 0;
  background-color: var(--recruit-color-green-200);
}

.faq-inner {
  width: clamp(21.938rem, 3.254rem + 79.718vw, 75rem);
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ========================================
  FAQカード
======================================== */

.faq-item {
  width: 100%;

  background-color: var(--recruit-color-white);

  border-radius: 20px;
  overflow: hidden;
}


/* ========================================
  質問部分
======================================== */

.faq-question {
  width: 100%;

  display: grid;
  grid-template-columns:
    clamp(1.875rem, 1.325rem + 2.347vw, 3.438rem)
    1fr
    clamp(1.375rem, 1.111rem + 1.127vw, 2.125rem);

  align-items: center;

  /* Qと文章、文章と矢印の間隔 */
  column-gap: clamp(28px, 2.5vw, 56px);

  /* 上下：16px → 40px */
  padding-block: clamp(16px, 2.1vw, 40px);

  /* 左右：24px → 56px */
  padding-inline: clamp(24px, 2.8vw, 56px);

  box-sizing: border-box;

  cursor: pointer;
  list-style: none;
}

/* Chrome / Safari */
.faq-question::-webkit-details-marker {
  display: none;
}


/* Q */
.faq-q-icon {
  width: clamp(1.875rem, 1.325rem + 2.347vw, 3.438rem);
  height: clamp(1.875rem, 1.325rem + 2.347vw, 3.438rem);

  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;

  border-radius: 50%;

  background-color: var(--recruit-color-green-400);
  color: var(--recruit-color-white);

  font-size: clamp(1.25rem, 0.986rem + 1.127vw, 2rem);
  line-height: 1;
}


/* 質問文 */
.faq-question-text {
  font-size: clamp(0.875rem, 0.743rem + 0.563vw, 1.25rem);
  line-height: 1.8;
  font-weight: 500;

  color: var(--recruit-color-green-500);
}


/* ========================================
  右側の矢印
======================================== */

.faq-toggle-icon {
  position: relative;
  width: clamp(1.375rem, 1.111rem + 1.127vw, 2.125rem);

  justify-self: end;

  transition: transform 0.3s ease;
}


/* 開いたときに▲にする */
.faq-item[open] .faq-toggle-icon {
  transform: rotate(180deg);
}


/* ========================================
  回答
======================================== */
.faq-answer-inner {
  display: grid;
   grid-template-columns:
    clamp(1.875rem, 1.325rem + 2.347vw, 3.438rem)
    1fr;

  /* Aと回答文の間隔 */
  column-gap: clamp(28px, 2.5vw, 56px);

  align-items: start;

 /* 上は0 */
  padding-top: 0;

  /* 左右：24px → 56px */
  padding-right: clamp(24px, 2.8vw, 56px);
  padding-left: clamp(24px, 2.8vw, 56px);

  /* 下：32px → 80px */
  padding-bottom: clamp(32px, 4.2vw, 80px);

  box-sizing: border-box;
}

/* detailsの中身を滑らかに開閉 */
.faq-item::details-content {
  display: block;

  height: 0;
  overflow: hidden;

  opacity: 0;

  transition:
    height 0.4s ease,
    opacity 0.3s ease,
    content-visibility 0.4s allow-discrete;
}

/* 開いた状態 */
.faq-item[open]::details-content {
  height: auto;
  opacity: 1;
}

/* A */
.faq-a-icon {
  width: clamp(1.875rem, 1.325rem + 2.347vw, 3.438rem);
  height: clamp(1.875rem, 1.325rem + 2.347vw, 3.438rem);

  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;

  border: 1px solid var(--recruit-color-green-400);
  border-radius: 50%;

  color: var(--recruit-color-green-400);

  font-size: clamp(1.25rem, 0.986rem + 1.127vw, 2rem);
  line-height: 1;
}


/* 回答文 */
.faq-answer-text {
  margin: 0;
  padding-top: 5px;

  font-size: clamp(0.875rem, 0.743rem + 0.563vw, 1.25rem);
  line-height: 2;
  font-weight: 500;

  color: var(--recruit-color-green-500);
}

/* ========================================
  就活ハラスメント防止方針
======================================== */

.faq-policy-link {
  width: clamp(21.938rem, 3.254rem + 79.718vw, 75rem);
  margin: 72px auto 80px;

  border-top: 1px solid #ACACAC;
  border-bottom: 1px solid #ACACAC;
}

.faq-policy-link-inner {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 24px;

  color: var(--recruit-color-green-500);
  text-decoration: none;
}

.faq-policy-text {
  font-size: clamp(0.875rem, 0.743rem + 0.563vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
}

.faq-policy-arrow {
  font-size: 24px;
  line-height: 1;

  transition: transform 0.3s ease;
}

.faq-policy-link-inner:hover {
  color: var(--recruit-color-green-400);
}

.faq-policy-link-inner:hover .faq-policy-arrow {
  transform: translateX(6px);
}