@charset "UTF-8";
/* ==============================================
   FAQ ARCHIVE
   ============================================== */
.p-faq {
  background-color: #1f3134;
  padding-bottom: 13rem;
}

/* ==============================================
   FAQ ACCORDION (c-faq)
   クリック対象(button)はページ全幅、テキストはl-wrapper内に収める。
   開閉・色変化のイージングは始点終点が遅く中間が速いeaseInOutQuartで統一
   ============================================== */
.c-faq {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-faq__item {
  background-color: #2b3d40;
  border-bottom: 1px solid #1f3134;
  transition: background-color 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.c-faq__item.is-active {
  background-color: #f7f3e5;
}

/* --- 質問（クリック対象） --- */
.c-faq__question {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.c-faq__question-inner {
  display: flex;
  align-items: flex-start;
  padding: 3.4rem 0;
  transition: opacity 0.4s ease;
}
.c-faq__item:not(.is-active) .c-faq__question:hover .c-faq__question-inner {
  opacity: 0.6;
}

/* Q / A の頭文字 */
.c-faq__label {
  flex: 0 0 5rem;
  font-size: 3.2rem;
  line-height: 3.5rem; /* 質問タイトル1行目(2rem×1.75)と天地センターを揃える */
  letter-spacing: 0.05em;
  color: var(--c-gold, #a98f54);
}
.c-faq__label--a {
  color: #888888;
  line-height: 3rem; /* 回答テキスト1行目(1.5rem×2)と天地センターを揃える */
}

.c-faq__title {
  flex: 1;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: #fff;
  transition: color 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.c-faq__item.is-active .c-faq__title {
  color: var(--c-gold, #a98f54);
}

/* +/− アイコン */
.c-faq__toggle-icon {
  position: relative;
  flex: 0 0 2rem;
  height: 2rem;
  margin-top: 0.75rem; /* 質問タイトル1行目と天地センターを揃える */
  margin-left: 2rem;
}
.c-faq__toggle-icon::before,
.c-faq__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), background-color 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.c-faq__toggle-icon::after {
  transform: rotate(90deg); /* 縦棒。アクティブ時に横棒に重なって−になる */
}
.c-faq__item.is-active .c-faq__toggle-icon::before,
.c-faq__item.is-active .c-faq__toggle-icon::after {
  background-color: var(--c-gold, #a98f54);
}
.c-faq__item.is-active .c-faq__toggle-icon::after {
  transform: rotate(0deg);
}

/* --- 回答（開閉パネル） --- */
.c-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden; /* 閉時はパネル内のリンクへフォーカスが入らないように */
  transition: grid-template-rows 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.6s;
}
.c-faq__item.is-active .c-faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}
.c-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
}
.c-faq__answer-body {
  display: flex;
  align-items: flex-start;
  padding-bottom: 6rem;
}
.c-faq__answer-text {
  flex: 1;
  padding-right: 4rem; /* 質問タイトルの右端(+アイコン分)と揃える */
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--c-dark, #2c2c2e);
}
.c-faq__answer-text p + p {
  margin-top: 3rem;
}
.c-faq__answer-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
  transition: color 0.3s ease;
}
.c-faq__answer-text a:hover {
  color: var(--c-gold, #a98f54);
}
/* mbtk-block-editor.css の本文・リンク指定を打ち消し、FAQの指定を優先 */
.c-faq__answer-text.mbtk-block-editor p {
  padding-bottom: 0;
  font-size: inherit;
}
.c-faq__answer-text.mbtk-block-editor a {
  display: inline;
  font-size: inherit;
  transition: color 0.3s ease;
}
.c-faq__answer-text.mbtk-block-editor a:hover {
  opacity: 1;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1000px) {
  .p-faq {
    padding-bottom: 7rem;
  }
  .c-faq__question-inner {
    padding: 2.8rem 0;
  }
  .c-faq__label {
    flex-basis: 3.2rem;
    font-size: 2.4rem;
    line-height: 3.2rem; /* 質問タイトル1行目(1.7rem×1.88)と天地センターを揃える */
  }
  .c-faq__label--a {
    line-height: 2.8rem; /* 回答テキスト1行目(1.4rem×2)と天地センターを揃える */
  }
  .c-faq__title {
    font-size: 1.7rem;
    line-height: 1.88;
  }
  .c-faq__toggle-icon {
    flex-basis: 1.4rem;
    height: 1.4rem;
    margin-top: 0.9rem;
    margin-left: 1.5rem;
  }
  .c-faq__answer-body {
    padding-bottom: 3.8rem;
  }
  .c-faq__answer-text {
    padding-right: 0;
    font-size: 1.4rem;
  }
  .c-faq__answer-text p + p {
    margin-top: 2.5rem;
  }
}