/* =========================================================
   sema-theme page-faq.css（「よくある質問」固有）
   コンセプト＝「疑問をほどく案内帳」。カテゴリー索引（目次）＋カテゴリーごとの空気の切り替え＋
   罫線・余白・小さな記号で整理した質問一覧。大きな白い角丸アコーディオンカードの連続にしない。
   表示は details/summary（JS不要）。回答は同じ紙面上で静かに展開（大きな箱を出現させない）。
   共通土台（page.css）を継承。全クラス sema-faq- プレフィックス（他ページのクラスは流用しない）。
   ========================================================= */

/* =========================================================
   導入面（このページ専用）：静かな導入＋目録を思わせる短い罫線
   ========================================================= */
.sema-faq-hero{
  background:var(--sema-ivory);
  border-bottom:1px solid var(--sema-line);
  padding:clamp(46px,6.8vw,90px) 0 clamp(24px,3.2vw,38px);
}
.sema-faq-hero__inner{ position:relative; }
.sema-faq-hero__mark{ display:flex; align-items:center; gap:8px; margin-bottom:1.2em; }
.sema-faq-hero__mark span{ display:block; height:1px; background:var(--sema-bronze); }
.sema-faq-hero__mark span:nth-child(1){ width:26px; }
.sema-faq-hero__mark span:nth-child(2){ width:11px; opacity:.7; }
.sema-faq-hero__title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.4; letter-spacing:.12em;
  margin:0; color:var(--sema-ink); text-wrap:balance;
}

/* =========================================================
   本文：読みやすい単一カラム（中央に細くしすぎない）
   ========================================================= */
.sema-faq-body{ max-width:46rem; }

/* --- 導入リード（確定原稿・既存本文） --- */
.sema-faq-body .sema-faq-lead{ margin:0 0 clamp(30px,4.2vw,46px); }
.sema-faq-body .sema-faq-lead p{
  font-family:var(--sema-serif); font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.95;
  letter-spacing:.04em; color:var(--sema-ink); margin:0;
}

/* =========================================================
   カテゴリー索引（目次）：大きなボタンの羅列にせず、目録のような罫線一覧。
   本文より目立たせない。スマホでも縦に積み、横スクロールを出さない。
   ========================================================= */
.sema-faq-body .sema-faq-index{ margin:0 0 clamp(44px,6.5vw,76px); }
.sema-faq-body .sema-faq-index__title{
  font-family:var(--sema-sans); font-size:.8rem; letter-spacing:.16em; color:var(--sema-ink-mute);
  margin:0 0 .7em;
}
.sema-faq-body .sema-faq-index__list{
  list-style:none; margin:0; padding:0; border-top:1px solid var(--sema-line-2);
}
.sema-faq-body .sema-faq-index__list li{ border-bottom:1px solid var(--sema-line); }
.sema-faq-body .sema-faq-index__list a{
  display:flex; align-items:baseline; gap:.9em; padding:.72em .2em; text-decoration:none; color:var(--sema-ink);
}
.sema-faq-body .sema-faq-index__no{
  flex:0 0 auto; font-family:var(--sema-sans); font-size:.76rem; letter-spacing:.1em; color:var(--sema-bronze);
}
.sema-faq-body .sema-faq-index__label{ font-family:var(--sema-serif); font-size:1rem; line-height:1.6; }
.sema-faq-body .sema-faq-index a:hover .sema-faq-index__label{
  color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:3px;
}

/* =========================================================
   カテゴリー：スティッキーヘッダー分のアンカー位置を確保し、上に十分な空気を置く
   ========================================================= */
.sema-faq-body .sema-faq-cat{ scroll-margin-top:calc(var(--sema-header-h) + 44px); }
.sema-faq-body .sema-faq-cat + .sema-faq-cat{ margin-top:clamp(48px,7vw,86px); }
/* カテゴリー見出し＝空気の切り替え（深緑の下罫線＋番号＋明朝名） */
.sema-faq-body .sema-faq-cat__head{
  display:flex; align-items:baseline; gap:.8em;
  margin:0 0 clamp(8px,1.4vw,14px); padding-bottom:.55em;
  border-bottom:1.5px solid var(--sema-sage);
}
.sema-faq-body .sema-faq-cat__no{
  flex:0 0 auto; font-family:var(--sema-sans); font-size:.82rem; letter-spacing:.14em; color:var(--sema-bronze);
}
.sema-faq-body .sema-faq-cat__name{
  font-family:var(--sema-serif); font-weight:600;
  font-size:clamp(1.24rem,2.3vw,1.5rem); line-height:1.45; letter-spacing:.06em;
  color:var(--sema-ink); margin:0;
}

/* =========================================================
   質問と回答：罫線で仕切る一覧（大きな角丸カードにしない）。
   details/summary。標準マーカーは消し、代替の＋／−を用意。
   ========================================================= */
.sema-faq-body .sema-faq-item{ border-bottom:1px solid var(--sema-line); }

.sema-faq-body .sema-faq-q{
  display:flex; align-items:baseline; gap:.7em; cursor:pointer; list-style:none;
  padding:clamp(15px,2.2vw,20px) 0;
}
.sema-faq-body .sema-faq-q::-webkit-details-marker{ display:none; }
/* 質問の小さな記号（ブロンズの点。番号連番に依存しない小記号） */
.sema-faq-body .sema-faq-q::before{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.5em; background:var(--sema-bronze);
}
.sema-faq-body .sema-faq-q__text{
  flex:1 1 auto; margin:0;
  font-family:var(--sema-serif); font-weight:600; font-size:clamp(1.02rem,1.7vw,1.16rem);
  line-height:1.65; letter-spacing:.03em; color:var(--sema-ink); overflow-wrap:break-word;
}
/* 開閉記号：回転させず ＋ → − に切り替えるだけ */
.sema-faq-body .sema-faq-q::after{
  content:"＋"; flex:0 0 auto; align-self:center;
  font-family:var(--sema-sans); font-weight:400; font-size:1.05rem; line-height:1; color:var(--sema-sage);
  transition:color .2s var(--sema-ease);
}
.sema-faq-body .sema-faq-item[open] > .sema-faq-q::after{ content:"−"; }
.sema-faq-body .sema-faq-q:hover .sema-faq-q__text{ color:var(--sema-sage-deep); }
.sema-faq-body .sema-faq-q:hover::after{ color:var(--sema-bronze); }

/* 回答：同じ紙面で静かに展開。質問文の開始位置に沿わせ、質問と近い距離に保つ */
.sema-faq-body .sema-faq-a{
  padding:0 0 clamp(18px,2.6vw,26px) calc(7px + .7em);
}
.sema-faq-body .sema-faq-a p{
  font-family:var(--sema-serif); font-size:1rem; line-height:1.95; color:var(--sema-ink-soft); margin:0 0 1em;
}
.sema-faq-body .sema-faq-a > :last-child{ margin-bottom:0; }
.sema-faq-body .sema-faq-a ul,
.sema-faq-body .sema-faq-a ol{ margin:0 0 1em; padding-left:1.3em; }
.sema-faq-body .sema-faq-a li{ margin-bottom:.4em; }
.sema-faq-body .sema-faq-a li::marker{ color:var(--sema-bronze); }
/* 回答内の案内リンク：静かな矢印リンク（内部リンク） */
.sema-faq-body .sema-faq-a__link{ margin-top:.4em !important; }
.sema-faq-body .sema-faq-a__link a{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sema-sans); font-size:.9rem; letter-spacing:.05em;
  color:var(--sema-sage-deep); text-decoration:none;
}
.sema-faq-body .sema-faq-a__link a::after{
  content:"\2192"; color:var(--sema-bronze); transition:margin .25s var(--sema-ease);
}
.sema-faq-body .sema-faq-a__link a:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }
.sema-faq-body .sema-faq-a__link a:hover::after{ margin-left:.3em; }

/* =========================================================
   スマホ：単純な縦積みのなぞりにしない。質問を「探す・開く・読む・閉じる」操作を基準に、
   タップ域を広げ、開閉記号と質問文が重ならないようにし、横スクロールを出さない。
   ========================================================= */
@media (max-width:767px){
  .sema-faq-body{ max-width:none; }
  .sema-faq-body .sema-faq-index__list a{ padding:.9em .2em; }         /* タップしやすく */
  .sema-faq-body .sema-faq-q{ padding:16px 0; gap:.55em; }
  .sema-faq-body .sema-faq-q__text{ font-size:1.05rem; line-height:1.6; }
  .sema-faq-body .sema-faq-q::after{ font-size:1.15rem; }              /* 開閉記号を押しやすく */
  .sema-faq-body .sema-faq-a{ padding-left:calc(7px + .55em); }
  /* カテゴリー間にスマホ固有の区切り（前カテゴリー末に余白＋淡い上罫） */
  .sema-faq-body .sema-faq-cat + .sema-faq-cat{
    margin-top:clamp(40px,10vw,56px); padding-top:clamp(24px,6vw,32px); border-top:1px solid var(--sema-line);
  }
}

/* 空状態（公開FAQが0件のとき）：静かな一文。通常は移行済みFAQが表示されるため出ない */
.sema-faq-body .sema-faq-empty{
  font-family:var(--sema-serif); font-size:1rem; line-height:1.95;
  color:var(--sema-ink-mute); margin:clamp(24px,4vw,40px) 0 0;
}

/* 動きの抑制設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .sema-faq-body .sema-faq-q::after,
  .sema-faq-body .sema-faq-a__link a::after{ transition:none; }
}