/* =========================================================
   FAQ Section（よくあるご質問）
   - shadcn/ui Accordion を踏襲したミニマル設計
     ・カテゴリ = ヘアライン区切りのリスト群
     ・トリガー = font-medium + chevron-down（開で180°回転）
     ・hover:下線 / focus-visible リング / 高さアニメーション
   - 骨格は <details>/<summary>（JS不要・キーボード操作可）
   - 色・間隔は :root トークンに準拠
========================================================= */
.faq-section{
  max-width:var(--container);
  margin:var(--section-gap) auto;
  padding: var(--section-gap) 1.4rem;
  background:var(--gradient-card);
  border:var(--border-card);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  scroll-margin-top:84px;            /* sticky ヘッダー分のアンカーオフセット */
  /* 子孫 <details> の高さ auto アニメーションを許可（対応ブラウザのみ） */
  interpolate-size: allow-keywords;
}
.faq-section__head{
  text-align:center;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.faq-section__eyebrow{
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--eyebrow);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.faq-section__eyebrow::before{
  content:"";
  width:40px;
  height:1px;
  background:linear-gradient(90deg, rgba(15,78,231,0), rgba(15,78,231,0.65));
}
.faq-section__title{
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin:.6rem 0;
  position:relative;
  display:inline-block;
  text-wrap:balance;
}
.faq-section__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.2rem;
  width:100%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(120deg, var(--brand-teal), var(--brand-blue));
  opacity:.6;
}
.faq-section__lead{
  max-width:720px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.8;
  text-wrap:pretty;
}

/* ---- カテゴリ群（2カラム） ---- */
.faq-groups{
  display:grid;
  gap:clamp(1.2rem, 2vw, 1.6rem);
  align-items:start;
}
@media(min-width:960px){
  .faq-groups{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* カテゴリ = ミニマルなカード（shadcn の bordered list 風） */
.faq-group{
  background:#fff;
  border:1px solid rgba(12, 36, 64, 0.10);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding: 0 clamp(1rem, 2vw, 1.5rem);
}

/* カテゴリ見出し（アイコン + ラベル、下にヘアライン） */
.faq-group__title{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  padding:1rem 0 .85rem;
  font-weight:700;
  color:var(--ink);
  font-size:clamp(1.02rem, 1vw + .8rem, 1.18rem);
  line-height:1.4;
  border-bottom:1px solid rgba(12, 36, 64, 0.10);
}
.faq-group__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:1.85rem;
  height:1.85rem;
  border-radius:var(--radius-sm);
  background:rgba(15, 78, 231, 0.06);
  color:var(--brand-blue);
}
.faq-group__icon svg{
  width:1.15rem;
  height:1.15rem;
  display:block;
}

/* ---- アコーディオン（ヘアライン区切り） ---- */
.faq-accordion{
  display:block;
}
.faq-accordion__item{
  border-bottom:1px solid rgba(12, 36, 64, 0.10);
}
.faq-accordion__item:last-child{ border-bottom:none; }

/* トリガー行（shadcn: flex / py-4 / font-medium / hover:underline） */
.faq-accordion__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1rem .15rem;
  min-height:44px;
  font-weight:600;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.6;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  border-radius:var(--radius-sm);
  transition:color .15s ease;
}
.faq-accordion__summary::-webkit-details-marker{ display:none; }
.faq-accordion__summary::marker{ content:""; }
.faq-accordion__summary:hover .faq-accordion__q{
  text-decoration:underline;
  text-underline-offset:3px;
}
.faq-accordion__summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15, 78, 231, .35);
}

.faq-accordion__q{
  text-align:left;
  line-height:1.6;
}

/* chevron-down（lucide 風 / 開で180°回転） */
.faq-accordion__arrow{
  flex:0 0 auto;
  position:relative;
  width:1rem;
  height:1rem;
  margin-top:.18rem;            /* 1行目テキストに合わせて微調整 */
  color:var(--muted);
  transition:transform .2s ease, color .2s ease;
}
.faq-accordion__arrow::before{
  content:"";
  position:absolute;
  top:42%;
  left:50%;
  width:.52rem;
  height:.52rem;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:translate(-50%, -50%) rotate(45deg);
}
.faq-accordion__summary:hover .faq-accordion__arrow{ color:var(--brand-blue); }
.faq-accordion__item[open] .faq-accordion__arrow{ transform:rotate(180deg); }

/* 回答（shadcn: pb-4 / text-sm / muted） */
.faq-accordion__content{
  padding:0 .15rem 1.1rem;
  color:var(--ink-2);
  line-height:1.85;
}
.faq-accordion__content p{
  margin:0;
  font-size:.92rem;
}

/* 高さアニメーション（::details-content 対応ブラウザのみ。
   非対応ブラウザはセレクタが無効 → 即時展開でグレースフルに劣化） */
.faq-accordion__item::details-content{
  height:0;
  overflow:clip;
  transition:height .24s ease, content-visibility .24s ease;
  transition-behavior:allow-discrete;
}
.faq-accordion__item[open]::details-content{
  height:auto;
}

/* ---- SP ---- */
@media (max-width: 599px){
  .faq-section{
    padding:1.6rem 1rem;
    border-radius:var(--radius-lg);
  }
  .faq-section__head{ margin-bottom:1.4rem; }
  .faq-section__lead{ font-size:.92rem; line-height:1.7; }

  .faq-groups{ gap:1rem; }
  .faq-group{ padding:0 1rem; }
  .faq-group__title{ font-size:1.04rem; padding:.95rem 0 .8rem; }
  .faq-group__icon{ width:1.7rem; height:1.7rem; }
  .faq-group__icon svg{ width:1.05rem; height:1.05rem; }

  .faq-accordion__summary{ padding:.95rem .05rem; font-size:.94rem; }
  .faq-accordion__content{ padding:0 .05rem 1rem; }
  .faq-accordion__content p{ font-size:.92rem; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .faq-accordion__arrow,
  .faq-accordion__summary{ transition:none; }
  .faq-accordion__item::details-content{ transition:none; }
}