@charset "UTF-8";
/* =========================================================
   WWE — /faq/ 固有

   アコーディオン本体（.wwe-acc）は components.css。ここには書かない。
   ========================================================= */

/* =========================================================
   [2] リード＋カテゴリの目次
   ========================================================= */
.wwe-faqindex { padding-block: 40px 24px; }
.wwe-faqindex__body {
  font-size: var(--wwe-fs-lead);
  line-height: var(--wwe-lh-body);
  color: var(--wwe-text-body);
  text-align: center;
}
.wwe-faqindex__body p + p { margin-top: .4em; }

.wwe-faqindex__nav { margin-top: 22px; }
.wwe-faqindex__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.wwe-faqindex__link {
  display: flex;
  align-items: center;
  min-height: 44px;          /* タップ領域を確保する */
  padding: 8px 18px;
  border: 1px solid var(--wwe-line);
  border-radius: var(--wwe-radius-tag);
  background: var(--wwe-white);
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  transition: background-color var(--wwe-dur) var(--wwe-ease),
              border-color var(--wwe-dur) var(--wwe-ease);
}
.wwe-faqindex__link:hover,
.wwe-faqindex__link:focus-visible {
  background: var(--wwe-gold-pale);
  border-color: var(--wwe-gold);
}

/* =========================================================
   [3] カテゴリ別のFAQ
   ========================================================= */
/* 目次から飛んだとき、見出しがヘッダーの下に隠れないようにする。
   ヘッダーは position: sticky なので、その分だけ余白を確保する。 */
.wwe-faqgroups > .wwe-sec { scroll-margin-top: 90px; }

.wwe-faqgroups .wwe-sec-head { margin-bottom: 28px; }

/* =========================================================
   [4] くわしくは、各ページでご説明しています（出口）
   ========================================================= */
.wwe-faqpages { display: grid; gap: 14px; }
.wwe-faqpages__link {
  display: block;
  height: 100%;
  padding: 22px 20px;
  background: var(--wwe-white);
  border: 1px solid var(--wwe-line);
  border-radius: var(--wwe-radius-card);
  transition: border-color var(--wwe-dur) var(--wwe-ease),
              transform var(--wwe-dur) var(--wwe-ease),
              box-shadow var(--wwe-dur) var(--wwe-ease);
}
.wwe-faqpages__link:hover,
.wwe-faqpages__link:focus-visible {
  border-color: var(--wwe-gold);
  transform: translateY(-2px);
  box-shadow: var(--wwe-shadow-card);
}
.wwe-faqpages__label {
  display: block;
  font-size: var(--wwe-fs-lead);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}
.wwe-faqpages__note {
  display: block;
  margin-top: 2px;
  font-size: var(--wwe-fs-small);
  color: var(--wwe-gold-dark);
  font-weight: var(--wwe-fw-bold);
}
/* そのページで答えている質問。見出しだけだと何があるか分からず押されない */
.wwe-faqpages__qs {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--wwe-line);
}
.wwe-faqpages__q {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--wwe-fs-small);
  color: var(--wwe-text-body);
  line-height: 1.7;
}
.wwe-faqpages__q::before {
  content: "Q";
  position: absolute;
  left: 0;
  font-family: var(--wwe-font-num);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-gold-dark);
}

/* =========================================================
   [5] ここに無い質問について
   ========================================================= */
.wwe-faqmore__inner { text-align: center; }
.wwe-faqmore__title {
  font-size: var(--wwe-fs-h3);
  color: var(--wwe-navy);
  font-feature-settings: var(--wwe-palt);
}
.wwe-faqmore__text {
  margin-top: 14px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-text-body);
  line-height: 1.9;
}

@media (min-width: 768px) {
  .wwe-faqgroups > .wwe-sec { scroll-margin-top: 110px; }
  .wwe-faqpages { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .wwe-faqpages { grid-template-columns: repeat(3, 1fr); }
}