/* ============================================================
   よくある質問（/faq）ページ固有スタイル
   共通: ../../css/{tokens,base,components}.css
   方針：ブラウン基調・native details/summary のアコーディオン。
   Q/A をブラウンの角丸マークで示し、開閉は + / − のトグル。
   末尾に「解決しない場合はお電話ください」の電話CTA。
   ============================================================ */

/* スクリーンリーダー専用見出し */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 1. ページタイトル＋導入（中央・掛軸のあしらい） ---- */
.page-hero { padding-block: var(--space-1600) var(--space-1200); }
.page-hero__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-600); padding-top: var(--space-800);
}
/* タイトル上の縦の細線（掛軸のモチーフ） */
.page-hero__inner::before { content: ""; width: 1px; height: 56px; background: var(--color-primary); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-200);
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.page-hero__eyebrow .icon { font-size: 18px; color: var(--color-primary); }
.page-hero__title {
  font: 700 56px/1.3 var(--font-display); letter-spacing: .12em; color: var(--color-primary-deep);
}
.page-hero__lead { font: 500 17px/2 var(--font-base); color: var(--color-text); max-width: 720px; }

/* ---- 2. よくある質問一覧（アコーディオン） ---- */
.faq-section { gap: var(--space-800); }
.faq-list {
  display: flex; flex-direction: column; gap: var(--space-400);
  width: 100%; max-width: 840px; list-style: none;
}

.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-400);
  box-shadow: 0 8px 16px rgba(63, 63, 63, .03);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open] {
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px rgba(63, 63, 63, .08);
}

/* 質問（クリックで開閉する summary） */
.faq-q {
  display: flex; align-items: center; gap: var(--space-400);
  padding: var(--space-600) var(--space-800);
  cursor: pointer; list-style: none;
  transition: background .2s ease;
}
.faq-q::-webkit-details-marker { display: none; }   /* デフォルトの三角を消す */
.faq-q:hover { background: var(--color-bg-soft); }
.faq-q__text {
  flex: 1;
  font: 700 18px/1.6 var(--font-display); letter-spacing: .02em;
  color: var(--color-primary-deep);
}

/* Q / A の角丸マーク */
.faq-mark {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-200);
  font: 700 18px/1 "Zen Kaku Gothic New", sans-serif;
}
.faq-mark--q { background: var(--color-primary); color: #fff; }
.faq-mark--a { background: var(--color-bg-soft); color: var(--color-primary); border: 1px solid var(--color-secondary); }

/* 開閉トグル（+ / −） */
.faq-toggle {
  flex: none; position: relative; width: 22px; height: 22px;
  color: var(--color-primary);
}
.faq-toggle::before,
.faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; border-radius: 2px;
  background: currentColor; transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* 回答 */
.faq-a {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-400);
  padding: var(--space-600) var(--space-800);
}
/* 質問と回答の間の淡い区切り */
.faq-a::before {
  content: ""; position: absolute; top: 0; left: var(--space-800); right: var(--space-800);
  border-top: 1px solid var(--color-grey);
}
.faq-a__text {
  flex: 1;
  font: 400 16px/1.95 var(--font-base); color: var(--color-text-soft);
}
.faq-a__link {
  display: inline-flex; align-items: center; gap: var(--space-100);
  margin-left: var(--space-200);
  font-weight: 700; color: var(--color-primary);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s ease;
}
.faq-a__link:hover { color: var(--color-primary-dark); }
.faq-a__link .icon-arrow { font-size: 18px; }

/* ---- 3. 解決しない場合はお電話ください（電話CTA） ---- */
.faq-cta { padding-block: var(--space-1600); }
.faq-cta__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-400);
  max-width: 720px;
  padding: var(--space-1200) var(--space-800);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  background:
    linear-gradient(180deg, var(--color-bg-soft), #fff);
}
.faq-cta__eyebrow {
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.faq-cta__heading {
  font: 700 28px/1.5 var(--font-display); letter-spacing: .04em; color: var(--color-primary-deep);
}
.faq-cta__tel {
  display: inline-flex; align-items: center; gap: var(--space-300);
  margin-top: var(--space-200);
  color: var(--color-primary-deep);
}
.faq-cta__tel .icon { font-size: 38px; color: var(--color-primary); }
.faq-cta__num { font: 700 48px/1.1 var(--font-display); letter-spacing: .02em; }
.faq-cta__note { font: 500 15px/1.6 var(--font-base); color: var(--color-text-soft); }

/* ---- レスポンシブ（簡易） ---- */
@media (max-width: 720px) {
  .page-hero__title { font-size: 40px; }
  .faq-q { padding: var(--space-400) var(--space-400); gap: var(--space-300); }
  .faq-q__text { font-size: 16px; }
  .faq-a { padding-inline: var(--space-400); }
  .faq-a::before { left: var(--space-400); right: var(--space-400); }
  .faq-cta__num { font-size: 34px; }
  .faq-cta__heading { font-size: 22px; }
}

/* ============================================================
   ブラッシュアップ：上品な微インタラクション
   voice/guide の作法に合わせ、uiverse 由来の効果をトークンに置換。
   ブラウン基調を維持し、見せ場は「回答の出現」1点に集中。
   prefers-reduced-motion を尊重（自動再生はガード）。
   ============================================================ */

/* ① ヒーローに淡いブラウンの放射グラデ（voice/guide と同調） */
.page-hero { position: relative; isolation: isolate; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 78% at 50% 0%, rgba(155, 135, 89, .12), transparent 70%);
}

/* ② 各項目の左に「軸」のアクセントバー（掛軸モチーフの発展）。
      ホバー／開で上から伸びる。位置・高さは不変で派手に動かさない */
.faq-item { position: relative; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.faq-item::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--color-primary);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s ease;
}
.faq-item:hover::before,
.faq-item[open]::before { transform: scaleY(1); }
/* ホバーでわずかに浮かせて枠を温める（移動は最小限） */
.faq-item:hover { transform: translateY(-2px); border-color: var(--color-primary); }

/* ③ Q マークはホバー／開でやわらかく拡大（主役の補助） */
.faq-mark { transition: transform .25s ease, background .25s ease, color .25s ease; }
.faq-q:hover .faq-mark--q,
.faq-item[open] .faq-mark--q { transform: scale(1.06); }

/* ④【主役】回答は開いた瞬間にふわっとフェードイン＆スライド */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-reveal .4s ease both; }
  @keyframes faq-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ⑤ 初回ロードで各項目を少しずつフェードアップ（reduced-motion 時は非適用＝即表示） */
  .faq-list > li { opacity: 0; animation: faq-rise .5s ease forwards; }
  .faq-list > li:nth-child(1)  { animation-delay: .04s; }
  .faq-list > li:nth-child(2)  { animation-delay: .09s; }
  .faq-list > li:nth-child(3)  { animation-delay: .14s; }
  .faq-list > li:nth-child(4)  { animation-delay: .19s; }
  .faq-list > li:nth-child(5)  { animation-delay: .24s; }
  .faq-list > li:nth-child(6)  { animation-delay: .29s; }
  .faq-list > li:nth-child(7)  { animation-delay: .34s; }
  .faq-list > li:nth-child(8)  { animation-delay: .39s; }
  .faq-list > li:nth-child(n+9){ animation-delay: .44s; }
  @keyframes faq-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ⑥ 電話CTA：パネルに淡い放射グラデ、番号ホバーでブラウン点灯＋アイコンが受話の角度に */
.faq-cta__inner { position: relative; overflow: hidden; }
.faq-cta__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 0%, rgba(155, 135, 89, .10), transparent 65%);
}
.faq-cta__inner > * { position: relative; z-index: 1; }
.faq-cta__tel .icon { transition: transform .3s ease; }
.faq-cta__tel:hover .icon { transform: scale(1.12) rotate(-10deg); }
.faq-cta__num { transition: color .2s ease; }
.faq-cta__tel:hover .faq-cta__num { color: var(--color-primary); }