/*--------------------------------------------------------------
  RECRUIT
--------------------------------------------------------------*/
.p-faq .l-main {
  overflow: hidden;
}

.p-faq .introduction .inner {
  padding-top: min(136px, 8.5rem, 36.2666666667vw);
  padding-bottom: min(62px, 3.875rem, 16.5333333333vw);
  position: relative;
  z-index: 0;
}

.p-faq .introduction .inner>picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.p-faq .introduction .title {
  font-family: sofia-pro, sans-serif;
  font-size: min(80px, 5rem, 21.3333333333vw);
  line-height: 1.25;
  letter-spacing: 0em;
  color: #ffffff;
  opacity: 0.15;
  position: absolute;
  top: min(5px, 0.3125rem, 1.3333333333vw);
  right: min(30px, 1.875rem, 8vw);
}

.p-faq .introduction .text-container {
  background-color: #fff;
  width: 92%;
  margin-inline: auto;
  padding-top: min(50px, 3.125rem, 13.3333333333vw);
  padding-bottom: min(70px, 4.375rem, 18.6666666667vw);
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
}

.p-faq .introduction .text-container::before {
  content: "";
  display: block;
  background-image: linear-gradient(86.683deg, #2ED0FA, #0051CA);
  width: min(2px, 0.125rem, 0.5333333333vw);
  height: min(50px, 3.125rem, 13.3333333333vw);
  position: absolute;
  top: 0;
  right: min(40px, 2.5rem, 10.6666666667vw);
}

.p-faq .introduction .lead {
  font-size: min(20px, 1.25rem, 5.3333333333vw);
  line-height: 1.5;
  text-align: center;
}

.p-faq .introduction .lead img {
  /* width: min(187px, 11.6875rem, 49.8666666667vw); */
  width: min(487px, 41.6875rem, 89.8666666667vw);
}

.p-faq .introduction .text {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  /* line-height: 2.0714285714; */
  font-size: min(18px, 1.125rem, 3.9vw);
  line-height: calc(38/18);
  /* ------------------ 9/24 */
  font-weight: 400;
  width: 86.9565217391%;
  margin-top: min(38px, 2.375rem, 10.1333333333vw);
  margin-inline: auto;
}

.p-faq .link .inner {
  display: flex;
  flex-direction: column;
  row-gap: min(40px, 2.5rem, 10.6666666667vw);
  width: 92%;
  margin-inline: auto;
  padding-top: min(34px, 2.125rem, 9.0666666667vw);
}

.p-faq .link .box a {
  display: block;
  width: 100%;
}

@media (hover: hover) {
  .p-faq .link .box a:hover .c-button::after {
    animation: skew-button 0.5s forwards;
  }
}

.p-faq .link .image-container {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 345/195;
  position: relative;
  z-index: 0;
}

.p-faq .link .image-container picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.p-faq .link .text {
  display: grid;
  place-content: center;
  font-size: min(24px, 1.5rem, 6.4vw);
  font-weight: 500;
  line-height: 1.4583333333;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: solid 2px #fff;
  width: min(180px, 11.25rem, 48vw);
  height: min(60px, 3.75rem, 16vw);
}

.p-faq .link .c-button {
  background-image: linear-gradient(5.371deg, #00C85B, #00ADAC);
  width: 100%;
  height: min(47px, 2.9375rem, 12.5333333333vw);
}

.p-faq .link .c-button::after {
  background-image: linear-gradient(12.818deg, #0FC3C1, #1CFF83);
}

.p-faq .archive .inner {
  width: 92%;
  margin-inline: auto;
  padding-top: min(70px, 4.375rem, 18.6666666667vw);
  padding-bottom: min(74px, 4.625rem, 19.7333333333vw);
}

.p-faq .archive .title {
  width: min(88px, 5.5rem, 23.4666666667vw);
  margin-inline: auto;
}

.p-faq .archive .archive-list {
  display: flex;
  flex-direction: column;
  row-gap: min(18px, 1.125rem, 4.8vw);
  margin-top: min(32.5px, 2.03125rem, 8.6666666667vw);
}

.p-faq .archive .archive-item a {
  display: block;
  background-color: #fff;
  border-radius: min(10px, 0.625rem, 2.6666666667vw);
  box-shadow: 0 0 min(15px, 0.9375rem, 4vw) rgba(106, 106, 106, 0.16);
  width: 100%;
  padding-block: min(21px, 1.3125rem, 5.6vw);
  padding-right: min(34.5px, 2.15625rem, 9.2vw);
  padding-left: min(26.5px, 1.65625rem, 7.0666666667vw);
  position: relative;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .p-faq .archive .archive-item a:hover {
    opacity: 0.6;
  }
}

.p-faq .archive .post-date {
  display: inline-block;
  font-family: "Roboto Condensed", sans-serif;
  font-size: min(12px, 0.75rem, 3.2vw);
  line-height: 1.3333333333;
  letter-spacing: 0em;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(11.155deg, #2ED0FA, #0051CA);
  padding-bottom: min(2px, 0.125rem, 0.5333333333vw);
  padding-inline: min(7px, 0.4375rem, 1.8666666667vw);
}

.p-faq .archive .post-title {
  /* 9/24 */
  /* font-size: min(14px, 0.875rem, 3.7333333333vw); */
  /* line-height: 1.5714285714; */
  font-size: min(18px, 1.125rem, 4.8888888vw);
  line-height: calc(32/18);
  /* ------------------ 9/24 */
  letter-spacing: 0.05em;
  margin-top: min(7px, 0.4375rem, 1.8666666667vw);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-faq .archive .post-link {
  width: min(10px, 0.625rem, 2.6666666667vw);
  position: absolute;
  top: min(46px, 2.875rem, 12.2666666667vw);
  right: min(13px, 0.8125rem, 3.4666666667vw);
}

.p-faq .archive .post-link img {
  vertical-align: top;
}

@media (768px <=width) {
  .p-faq .introduction .inner {
    padding-top: min(117px, 7.3125rem, 8.125vw);
    padding-bottom: min(72px, 4.5rem, 5vw);
    max-width: 1440px;
    margin: 0 auto;
  }

  .p-faq .introduction .inner>picture {
    top: min(50px, 3.125rem, 3.4722222222vw);
    left: 0;
    width: min(1030px, 64.375rem, 71.5277777778vw);
    aspect-ratio: 1030/585;
  }

  .p-faq .introduction .title {
    font-size: min(147px, 12.8125rem, 14.2361111111vw);
    line-height: 1.2487804878;
    color: #a3a3a3;
    opacity: 0.06;
    top: min(280px, 17.5rem, 19.4444444444vw);
    right: auto;
    /* left: min(970px, 60.625rem, 67.3611111111vw); */
    left: min(1131px, 70.625rem, 74.361111vw);
    transform: rotateZ(90deg);
  }

  .p-faq .introduction .text-container {
    width: min(1000px, 62.5rem, 69.4444444444vw);
    box-shadow: 0 0 min(15px, 0.9375rem, 1.0416666667vw) rgba(103, 103, 103, 0.1);
    padding-top: min(70px, 4.375rem, 4.8611111111vw);
    padding-inline: min(100px, 6.25rem, 6.9444444444vw);
    padding-bottom: min(93px, 5.8125rem, 6.4583333333vw);
  }

  .p-faq .introduction .text-container::before {
    width: min(6px, 0.375rem, 0.4166666667vw);
    height: min(66px, 4.125rem, 4.5833333333vw);
    right: min(66px, 4.125rem, 4.5833333333vw);
  }

  .p-faq .introduction .lead {
    font-size: min(30px, 1.875rem, 2.0833333333vw);
    line-height: 1.4666666667;
    text-align: center;
  }

  .p-faq .introduction .lead img {
    /* width: min(280px, 17.5rem, 19.4444444444vw); */
    width: min(580px, 37.5rem, 39.4444444444vw);
    margin-top: max(-5px, -0.3125rem, -0.3472222222vw);
    margin-right: min(5px, 0.3125rem, 0.3472222222vw);
  }

  .p-faq .introduction .text {
    font-size: min(18px, 1.125rem, 1.25vw);
    font-weight: 500;
    line-height: 2.2222222222;
    width: auto;
    margin-top: min(40px, 2.5rem, 2.7777777778vw);
  }

  .p-faq .link .inner {
    flex-direction: row;
    justify-content: space-between;
    width: min(1040px, 65rem, 72.2222222222vw);
    padding-top: min(107px, 6.6875rem, 7.4305555556vw);
  }

  .p-faq .link .box {
    width: 44.2307692308%;
  }

  .p-faq .link .text {
    font-size: min(40px, 2.5rem, 2.7777777778vw);
    line-height: 1.45;
    width: min(240px, 15rem, 16.6666666667vw);
    height: min(80px, 5rem, 5.5555555556vw);
  }

  .p-faq .link .c-button {
    height: min(62px, 3.875rem, 4.3055555556vw);
  }

  .p-faq .archive .inner {
    width: min(1000px, 62.5rem, 69.4444444444vw);
    padding-top: min(100px, 6.25rem, 6.9444444444vw);
    padding-bottom: min(106px, 6.625rem, 7.3611111111vw);
  }

  .p-faq .archive .title {
    width: min(143px, 8.9375rem, 9.9305555556vw);
  }

  .p-faq .archive .archive-list {
    row-gap: min(20px, 1.25rem, 1.3888888889vw);
    margin-top: min(56.5px, 3.53125rem, 3.9236111111vw);
  }

  .p-faq .archive .archive-item a {
    display: flex;
    flex-direction: row;
    align-items: center;
    -moz-column-gap: min(40px, 2.5rem, 2.7777777778vw);
    column-gap: min(40px, 2.5rem, 2.7777777778vw);
    border-radius: min(20px, 1.25rem, 1.3888888889vw);
    padding-top: min(20px, 1.25rem, 1.3888888889vw);
    padding-right: min(125px, 7.8125rem, 8.6805555556vw);
    padding-left: min(50px, 3.125rem, 3.4722222222vw);
    padding-bottom: min(23px, 1.4375rem, 1.5972222222vw);
  }

  .p-faq .archive .post-date {
    font-size: min(13px, 0.8125rem, 0.9027777778vw);
    line-height: 1.3846153846;
    letter-spacing: 0.05em;
    padding-block: min(2px, 0.125rem, 0.1388888889vw);
    padding-inline: min(9.5px, 0.59375rem, 0.6597222222vw);
  }

  .p-faq .archive .post-title {
    font-size: min(17px, 1.0625rem, 1.1805555556vw);
    line-height: 1.4705882353;
    margin-top: 0;
  }

  .p-faq .archive .post-link {
    width: min(10px, 0.625rem, 0.6944444444vw);
    top: min(30px, 1.875rem, 2.0833333333vw);
    right: min(25px, 1.5625rem, 1.7361111111vw);
  }
}


/* 20250701追記 */
/* カテゴリボタン */
.category-buttons {
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
  flex-wrap: wrap;
  justify-content: center;
}

/* .category-buttons button {
  padding: 0.5em 1.3em;
  border: 1px solid #e4e4e4;
  background-image: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: background-image 0.3s;
  width: 205px;
  text-align: center;
} */

.category-buttons button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: #fff;
  transition: color 0.3s ease;

  padding: .9em 1.1em;
  text-align: center;
  text-shadow: 2px 2px 3px #e1e1e161;
  border: solid 1px;
  border-radius: 10px;

  width: 200px;
}

/* 擬似要素を重ねてグラデ背景を仕込み、フェードさせる */
.category-buttons button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* 各カテゴリの色（hover/active時のグラデ背景） */
.category-buttons button[data-category="cat1"]::before {
  background: linear-gradient(19.7deg, #00C85B, #00ADAC);
}

.category-buttons button[data-category="cat2"]::before {
  background: linear-gradient(19.7deg, #f9a07b, #e67340);
}

.category-buttons button[data-category="cat3"]::before {
  background: linear-gradient(19.7deg, #2ED0FA, #0051CA);
}

/* hover / active 時に擬似要素の opacity を変化させる */
.category-buttons button:hover::before,
.category-buttons button.active::before {
  opacity: 1;
}

.category-buttons button[data-category="cat1"] {
  color: #007B55;
}

.category-buttons button[data-category="cat2"] {
  color: #f9a07b;
}

.category-buttons button[data-category="cat3"] {
  color: #5aa4e8;
}



/* カテゴリ1（グリーン） */
.category-buttons button[data-category="cat1"].active,
.category-buttons button[data-category="cat1"]:hover {
  background-image: linear-gradient(19.7deg, #00C85B, #00ADAC);
  color: #fff;
  border-radius: 10px;
}

/* カテゴリ2（オレンジ系） */
.category-buttons button[data-category="cat2"].active,
.category-buttons button[data-category="cat2"]:hover {
  background-image: linear-gradient(19.7deg, #edac60, #f78911);
  color: #fff;
  border-radius: 10px;
}

/* カテゴリ3（ブルー系） */
.category-buttons button[data-category="cat3"].active,
.category-buttons button[data-category="cat3"]:hover {
  background-image: linear-gradient(19.7deg, #2ED0FA, #0051CA);
  color: #fff;
  border-radius: 10px;
}


/* アコーディオン全体 */
.accordion {
  margin-bottom: 1.5em;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.accordion-header {
  padding: 1em 3em 1em 1.2em;
  /* ← 右側にスペースを確保 */
  position: relative;
  background-color: #e6f5ec;
  color: #007B55;
  font-weight: bold;
  cursor: pointer;
  display: flex;
}

.toggle-icon {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: #007B55;
  transition: transform 0.3s ease;
}


/* Q：のアイコン */
.accordion-header::before {
  content: "Q. ";
  margin-right: 0.5em;
  color: #007B55;
}

/* ＋／−アイコンのスタイル */
.toggle-icon {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: #007B55;
  transition: transform 0.3s ease;
}

.accordion-content {
  overflow: hidden;
  max-height: 0;
  padding: 0 1.2em;
  /* background-color: #f0f8ff; */
  color: #333;
  box-sizing: border-box;
  /* transitionは max-height と padding の両方を指定 */
  transition: max-height 0.4s ease, padding 0.4s ease;
  /* 文字切れ防止のために display: block も念のため */
  display: flex;
  font-size: .9rem;
  line-height: 1.4;
}

.accordion-content::before {
  content: "A. ";
  margin-right: 0.5em;
  color: #ff3232;
  font-weight: bold;
}

/* QAリスト切り替え（カテゴリ） */
.qa-list {
  display: none;
}

.qa-list.active {
  display: block;
}

/* カテゴリ1 */
.qa-list.cat1 .accordion-header {
  background-image: linear-gradient(19.7deg, #00C85B, #00ADAC);
  color: #ffffff;
}

.qa-list.cat1 .accordion-header::before {
  color: #2d6a2d;
}

.qa-list.cat1 .toggle-icon {
  color: #ffffff;
}

/* カテゴリ2 */
.qa-list.cat2 .accordion-header {
  background-image: linear-gradient(19.7deg, #edac60, #ff866c);
  color: #ffffff;
}

.qa-list.cat2 .accordion-header::before {
  color: #b85c2c;
}

.qa-list.cat2 .toggle-icon {
  color: #ffffff;
}

/* カテゴリ3 */
.qa-list.cat3 .accordion-header {
  background-image: linear-gradient(19.7deg, #2ED0FA, #0051CA);
  color: #ffffff;

}

.qa-list.cat3 .accordion-header::before {
  color: #2c5cb8;
}

.qa-list.cat3 .toggle-icon {
  color: #ffffff;
}




@media (768px <=width) {
  .l-main .introduction .inner {
    width: min(1200px, 75rem, 83.3333333333vw);
    padding-top: min(80px, 5rem, 5.5555555556vw);
  }
}

.l-main .introduction .inner {
  width: 92%;
  margin-inline: auto;
  /* padding-top: min(50px, 3.125rem, 13.3333333333vw); */
}


.c-button::before {
  content: "";
  display: block;
  background-color: #fff;
  width: min(20px, 1.25rem, 5.3333333333vw);
  height: min(2px, 0.125rem, 0.5333333333vw);
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  transform: translateY(-50%);
}

@media (768px <=width) {
  .p-faq .c-fv .title {
    font-size: min(41px, 3rem, 2.833333vw) !important;
  }

  .category-buttons button {
    width: auto;
  }
}

.p-faq .c-fv .title {
  font-size: min(35px, 4.5625rem, 4.666667vw);
}

span.nowrap {
  white-space: nowrap;
  display: inline-block;
}