/* ===== FAQ（共通・PC基本） ===== */
:root{
  --faq-max-w: 980px;          /* 本文最大幅（930–1040で調整） */
  --faq-gap: 14px;             /* QとAの間隔 */
  --faq-base: #F8F9FB;         /* セクションの台紙色 */
  --faq-accent: #009145;       /* トグル線・リンクの強調色 */
  --faq-qmark: #009145;        /* 「Q.」の色 */
}

.faq{
  scroll-margin-top: var(--dyn-header-offset, 64px); /* 固定ヘッダー対策 */
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--faq-base);
}
.faq__inner{
  width: min(100%, var(--faq-max-w));
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.faq__title{
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1.2;
  text-align: center;
  margin: 0 0 clamp(18px, 2.2vw, 28px);
}
.faq__group{
  margin: calc(clamp(20px, 3vw, 32px) + 1em) 0 30px;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem);
  font-weight: 800;
  color: #111;
}

.faq__list{
  display: grid;
  gap: clamp(8px, 1.4vw, 14px);
}

/* ===== アイテム・トグル（＋／− を“線”で描画） ===== */
.faq__item{
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

/* Q行：左揃え＋先頭「Q.」＋右端のトグル線（＋／−） */
.faq__q{
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 56px 16px 16px;   /* 右はトグル、左は行頭余白 */
  font-weight: 700;
  color: #111;
  text-align: left;               /* ← 左揃え */
}
.faq__q::-webkit-details-marker{ display:none; } /* デフォ矢印を消す */

/* 「Q.」は本文 <span> の前に付与 */
.faq__q span::before{
  content: "Q.";
  display: inline-block;
  margin-right: 8px;              /* 6–10pxで調整 */
  color: var(--faq-qmark);
  font-weight: 900;
  line-height: 1;
}

/* 右端のトグル線：水平（::after）＋垂直（::before） */
.faq__q::after,
.faq__q::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;                    /* 線の長さ：18–24px */
  height: 2px;                    /* 線の太さ：2–3px */
  background: var(--faq-accent);
  border-radius: 1px;
  transform-origin: 50% 50%;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
/* 水平線（常に見える） */
.faq__q::after{
  transform: translateY(-50%) scaleX(1);
}
/* 垂直線（閉時のみ見える＝＋。開いたら scale で消える＝−に） */
.faq__q::before{
  transform: translateY(-50%) rotate(90deg) scaleX(1);
}
.faq__item[open] .faq__q::before{
  transform: translateY(-50%) rotate(90deg) scaleX(0); /* ＋ → − */
  opacity: 0.9;
}

/* ===== A本文：スムーズ開閉（CSS版。JSなしでOK） ===== */
.faq__a{
  padding: 0 16px 16px 16px;
  color: #222;
  line-height: 1.8;
  text-align: left;               /* ← 左揃え */
  overflow: hidden;
  max-height: 0;                  /* 閉時 */
  opacity: 0;
  transition: max-height .34s ease, opacity .24s ease;
}
.faq__a p{ margin: var(--faq-gap) 0 0; }
.faq__a a{ color: var(--faq-accent); text-decoration: underline; }

/* 開いたときに本文を表示（max-height は十分な値に） */
.faq__item[open] .faq__a{
  max-height: 800px;              /* 内容が長い場合は 1000–1400px へ */
  opacity: 1;
}

/* フッター誘導（任意） */
.faq__foot{
  margin: clamp(18px, 3vw, 28px) 0 0;
  text-align: center;
}
.faq__link{
  color: var(--faq-accent);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  font-weight: 700;
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .faq__q::after, .faq__q::before, .faq__a{ transition: none; }
}

/* ===== SP（～768px） ===== */
@media (max-width: 768px){
  .faq{ padding: 40px 0 56px; }
  .faq__inner{ padding: 0 14px; }
  .faq__q{ padding: 14px 48px 14px 14px; }
  .faq__q::after, .faq__q::before{ right: 12px; width: 18px; }
  .faq__a{ padding: 0 14px 14px 14px; }
}