/* ===== Simple FAQ Toggle : FRONT (Divi対応・完全版) ===== */

/* ラッパー */
.sftaq-wrap{ width:100%; }

/* 改行 <br> を消すオプション（[data-no-br="1"] のときだけ非表示） */
.sftaq-wrap[data-no-br="1"] .sftaq-question br,
.sftaq-wrap[data-no-br="1"] .sftaq-answer br{ display:none !important; }

/* ─ 質問行：Divi が <p> を挟んでも横一列レイアウトを維持 ─ */
.sftaq-question,
.sftaq-question > p{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;       /* 回答と同じ余白に統一 */
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
  background:#ffffff;
  color:#333333;
  border:1px solid #cccccc;
  border-radius:8px;
}
.sftaq-question > p{ margin:0; }

/* 番号（ユーザーの .qa-itemNum を正式採用／重複防止で .sftaq-qno は無効化） */
.sftaq-question .qa-itemNum,
.sftaq-question > p .qa-itemNum{
  flex:0 0 auto;
  min-width:1.6em;
  text-align:center;
  font-weight:600;
}
.sftaq-question .sftaq-qno{ display:none !important; }

/* タイトル（2行目以降の字下げを完全排除） */
.sftaq-question .sftaq-title,
.sftaq-question > p .sftaq-title{
  display:block;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  text-indent:0;
  white-space:normal;
  word-break:break-word;
}

/* トグルアイコン（高さ中央／右端8px空け） */
.sftaq-toggle{
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.6em; height:1.6em;
}
.sftaq-wrap[data-icon-pos="right"] .sftaq-question .sftaq-toggle,
.sftaq-wrap[data-icon-pos="right"] .sftaq-question > p .sftaq-toggle{
  order:3;
  margin-left:auto;
  margin-right:8px;
}
.sftaq-wrap[data-icon-pos="left"] .sftaq-question .sftaq-toggle,
.sftaq-wrap[data-icon-pos="left"] .sftaq-question > p .sftaq-toggle{
  order:0;
  margin-right:12px;
}

/* 回答（初期は閉じる） */
.sftaq-answer{
  display:none;
  padding:12px 14px;
  box-sizing:border-box;
  background:#ffffff;
  color:#333333;
  border:1px solid #cccccc;
  border-radius:8px;
  line-height:1.8;
}

/* 開状態の任意装飾（必要なら） */
/* .sftaq-question.is-open{ border-color:#999; } */


/* ===== Simple FAQ Toggle : layout fixes ===== */

/* 質問行は「番号 → タイトル（可変幅）→ アイコン」の横一列 */
.sftaq-question{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;           /* 回答欄と同じ余白 */
  box-sizing:border-box;
}

/* Divi が自動で入れる <p> で段差が出ないように */
.sftaq-question p{ margin:0; }

/* 番号（qa-itemNum を使う。独自ナンバリングは一切しない） */
.sftaq-question .qa-itemNum{
  order:0;
  flex:0 0 auto;
  min-width:1.6em;
  text-align:center;
  font-weight:600;
  margin-right:8px;
}

/* タイトル（複数行になっても“左端ぞろえ”で折り返す） */
.sftaq-question .sftaq-title{
  order:1;
  flex:1 1 auto;
  min-width:0;
  display:block;               /* <span> のままでもブロック化して揃える */
  white-space:normal;
  word-break:break-word;
}

/* トグルアイコンは右端/左端に吸着（端から約8pxで止める） */
.sftaq-question .sftaq-toggle{
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.6em; height:1.6em;
}

.sftaq-wrap[data-icon-pos="right"] .sftaq-question .sftaq-toggle{
  order:2;
  margin-left:auto;            /* 右端へ押し出し */
  padding-right:8px;           /* 端から8pxの余白 */
}

.sftaq-wrap[data-icon-pos="left"] .sftaq-question .sftaq-toggle{
  order:0;
  margin-right:12px;
  padding-left:8px;
}

/* <br> 抑制オプション（data-no-br="1" で <br> を非表示） */
.sftaq-wrap{ --sftaq-br-display:inline; }
.sftaq-wrap[data-no-br="1"]{ --sftaq-br-display:none; }
.sftaq-question br, .sftaq-answer br{ display:var(--sftaq-br-display); }