/* =========================
   FAQベースレイアウト
   ========================= */
.faq-container {
  max-width: 1200px; /* 商品ページと揃える */
  margin: 0 auto;
  padding: 0 2rem;
}

/* 各質問ブロック */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 0.5rem 0 0.8rem; /* ← 全体的にタイトに */
}


/* =========================
   質問タイトル部分
   ========================= */
.faq-question {
  display: block;               /* ← flexを無効化して自然な左揃え */
  text-align: left;             /* ← 念のため左揃え固定 */
  font-weight: 600;
  font-size: 1.05rem;
  color: #0072b8;
  cursor: pointer;
}

.faq-q {
  display: inline-block;
  margin-right: 0.5rem;
  font-weight: 700;
  text-align: left;
}

/* =========================
   FAQ hover & 視認性改善
   ========================= */
.faq-question {
  display: block;
  text-align: left;
  font-weight: 600;
  font-size: 1rem; /* ← わずかに小さめで密度感アップ */
  color: #0072b8;
  cursor: pointer;
  background-color: #f8fafc;
  padding: 0.5rem 0.8rem; /* ← 上下を詰めて横の余白も控えめに */
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: #f1f5f9; /* hover時も控えめ */
}

.faq-q {
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: 700;
  text-align: left;
}


/* =========================
   回答部分
   ========================= */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: #333;
  line-height: 1.6;
  margin-top: 0.4rem;
  padding: 0 0.8rem;
}

.faq-item.is-open .faq-answer {
  max-height: 500px;
}


/* =========================
   スマホ向け調整
   ========================= */
@media screen and (max-width: 768px) {
  .faq-container {
    padding: 0 1rem; /* 左右の余白を減らす */
  }

  .faq-question {
    font-size: 0.95rem; /* 少し小さく */
    padding: 0.4rem 0.6rem; /* さらにタイトに */
  }

  .faq-answer {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0 0.6rem;
  }

  .faq-item {
    padding: 0.4rem 0 0.6rem; /* 全体的に詰める */
  }
}