@charset "UTF-8";

/* ==========================================================================
   SEGA SAMMY PHOENIX — Page: FAQ
   Figma: Olrvdnxd3NwLbhAQc64Qtl / node 50:14131 (PC base 1512px)
   FAQ ページ固有のセクションのみ。
   HEADER / section-head / NEWS / MOVIE / CTA / FOOTER は components.css を参照。
   ========================================================================== */

.page-faq {
  /* Figma: FAQ コンテナ x302 / w800、行の内側パディング 17.391 */
  --faq-left: min(19.97vw, 302px);      /* 302 / 1512 */
  --faq-width: min(52.91vw, 800px);     /* 800 / 1512 */
  --faq-row-pad-x: 17.391px;
  /* 1 行の高さが Figma 実測の 62.386px になる値
     ( 26.087 行送り + 17.848 x 2 + 0.604 罫 )。 */
  --faq-row-pad-y: 17.848px;
  --faq-label-font-size: 17.391px;
  /* Figma の 0.604px #e5e5e5。DPR1 では 1px に丸められるため、
     見た目の濃度を Figma に合わせてアルファで補正している。 */
  --faq-rule: rgba(229, 229, 229, .62);
  --faq-rule-w: .604px;
}

/* --------------------------------------------------------------------------
   赤グラデ帯（見出し / パンくず / アコーディオンを包む）
   Figma: Rectangle 120 は 1512x1708 だが、y1193 から NEWS の帯が上に重なる。
   → 帯の実高は 1193、グラデーションだけ 1708 分の高さで描く。
   -------------------------------------------------------------------------- */
.faq-dark {
  position: relative;
  isolation: isolate;
  /* Figma: header 下端 102 → FAQ ゴースト見出し 133 */
  padding-top: calc(var(--header-h) + 31px);
  /* Figma: リスト下端 1005.25 → 帯下端 1193 */
  padding-bottom: clamp(88px, 12.42vw, 187.75px);
  overflow: hidden;
}

.faq-dark__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.faq-dark__bg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: max(calc(1708 * var(--r)), 100%);
  background: var(--grad-subpage);
}

/* Figma の NOISE エフェクト。TOP / MISSION と同じ SVG タイルを等倍で敷く。 */
.faq-dark__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: var(--noise-tile);
}

/* --------------------------------------------------------------------------
   Accordion
   Figma 50:14156 : Container:margin x302 w800 / padding-top 34.783
                    Container   padding-inline 17.391 / border-top 0.604
                    FaqItem     border-bottom 0.604 / 行の padding-block 17.391
   -------------------------------------------------------------------------- */
.faq-list {
  width: var(--faq-width);
  /* Figma: パンくず下端 309 → コンテナ 346 → 内側 padding-top 34.783 */
  margin: 72.44px 0 0 var(--faq-left);
  padding-inline: var(--faq-row-pad-x);
  border-top: var(--faq-rule-w) solid var(--faq-rule);
}

.faq-item {
  border-bottom: var(--faq-rule-w) solid var(--faq-rule);
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: var(--faq-row-pad-y);
  cursor: pointer;
  list-style: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

/* Safari / Chrome の既定マーカーを消す。 */
.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__summary::marker {
  content: "";
}

.faq-item__q {
  font-family: var(--font-jp);
  font-size: var(--faq-label-font-size);
  font-weight: 500;
  line-height: 1.5;              /* 26.087 / 17.391 */
  letter-spacing: -.0195em;      /* -0.3397 / 17.391 */
  color: var(--color-white);
}

.faq-item__marker {
  margin-right: .35em;
}

/* Plus / Minus ------------------------------------------------------------
   Figma は Inter の「+」グリフ（幅 12 / 行 26.087）。
   開閉でアニメーションさせるため 2 本の罫として組み、
   開いたときは縦棒だけを畳んで「−」にする（回転はさせない）。 */
.faq-item__icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 26.087px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-white);
  transform: translate(-50%, -50%);
}

.faq-item__icon::before {
  width: 12px;
  height: 1.2px;
}

.faq-item__icon::after {
  width: 1.2px;
  height: 12px;
  transition: transform var(--motion-base) var(--ease-premium);
}

.faq-item[open] .faq-item__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Answer ------------------------------------------------------------------
   高さの補間は CSS 側で行い、faq.js はインライン height を出し入れするだけ。
   JS が無い場合は <details> の標準動作（即時開閉）になる。 */
.faq-item__panel {
  overflow: hidden;
  transition: height var(--motion-base) var(--ease-premium);
}

.faq-item__answer {
  padding-bottom: var(--faq-row-pad-y);
}

.faq-item__text {
  display: flex;
  align-items: flex-start;
  gap: .35em;
  font-family: var(--font-jp);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: -.0195em;
  color: rgba(255, 255, 255, .84);
}

.faq-item__text > .faq-item__marker {
  flex: none;
  font-size: var(--faq-label-font-size);
  line-height: 1.5;
}

.faq-item__content {
  min-width: 0;
}

.faq-item__content p {
  margin: 0;
}

.faq-item__content p + p {
  margin-top: .8em;
}

.faq-item__content a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.faq-item__content a:hover,
.faq-item__content a:focus-visible {
  color: var(--color-red-light);
}

/* --------------------------------------------------------------------------
   Hover / Focus
   -------------------------------------------------------------------------- */
.faq-item__summary:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .faq-item__summary:hover {
    opacity: .72;
  }

}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* 〜1100px: グローバルナビが drawer に変わる境界。
   ここから先は Figma の 20% インデントをやめ、
   見出し / サブ / パンくずと同じ --head-inset の列に揃える。 */
@media (max-width: 1100px) {
  .faq-list {
    width: auto;
    margin-inline: var(--head-inset) var(--gutter);
  }
}

@media (max-width: 768px) {
  .page-faq {
    --faq-label-font-size: 15px;
  }

  .faq-dark {
    padding-bottom: clamp(72px, 18vw, 120px);
  }

  .faq-list {
    margin-top: 40px;
    padding-inline: 0;
  }

  .faq-item__summary {
    align-items: flex-start;
    gap: 12px;
    /* タップ領域を 44px 以上確保する。 */
    padding-block: 16px;
  }

  .faq-item__q {
    font-size: var(--faq-label-font-size);
  }

  .faq-item__icon {
    height: 22.5px;              /* 15px * 1.5 = 行の高さに合わせる */
  }

  .faq-item__text {
    font-size: 14px;
    line-height: 1.85;
  }

  .faq-item__answer {
    padding-bottom: 16px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   base.css がグローバルに transition を殺すが、
   faq.js 側の高さアニメーションもここと同じ条件で無効化している。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq-item__panel,
  .faq-item__icon::after {
    transition: none;
  }
}