/* ==========================================================================
   よくある質問ページ（faq.html）専用スタイル
   ✨ 添付画像デザイン再現（Q. 文頭揃え・ぶら下げインデント完全対応版）
   ========================================================================== */

/* 下層共通ページヘッダー */
.page-header {
  background: #f8f9fa !important;
  padding: 40px 20px !important;
  text-align: center !important;
  border-bottom: 1px solid #eeeeee !important;
}

/* FAQ全体のコンテナ（カード同士の間隔を上品に保持） */
.faq-section .faq-list {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
}

/* 枠線とカード全体のデザイン（温かみのあるアイボリー背景） */
.faq-section .custom-qa {
  width: 100% !important;
  border: 1px solid #d3c2a3 !important; /* 上品なゴールドの細線 */
  border-radius: 12px !important;
  overflow: hidden !important;
  background-color: #fdfbf7 !important; /* 生成り・アイボリー */
  box-shadow: 0 6px 20px rgba(184, 163, 126, 0.15) !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: box-shadow 0.3s ease !important;
}

/* 開いている時は少し影を落として浮かせる */
.faq-section .custom-qa[open] {
  box-shadow: 0 8px 25px rgba(184, 163, 126, 0.25) !important;
}

/* 四隅のクラシカルな装飾ライン（内側の細い二重線） */
.faq-section .custom-qa::before {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  border: 1px solid rgba(211, 194, 163, 0.4) !important;
  border-radius: 8px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 質問をタップするエリア */
.faq-section .custom-qa-summary {
  padding: 35px 60px 30px 45px !important;
  background: transparent !important;
  cursor: pointer !important;
  list-style: none !important;
  position: relative !important;
  outline: none !important;
  user-select: none !important;
  
  /* 横並びにして、垂直方向の「上揃え」にする（ひし形と1行目の高さを綺麗に揃える） */
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

/* ブラウザ標準の三角マーク（▶）を消去 */
.faq-section .custom-qa-summary::-webkit-details-marker {
  display: none !important;
}

/* ◆ ひし形のナンバリング */
.faq-section .faq-number {
  width: 32px !important;
  height: 32px !important;
  background-color: #5c1d16 !important; /* 渋めの赤茶色 */
  margin: 0 !important;
  transform: rotate(45deg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important; /* 文字の高さに合わせる微調整 */
}

.faq-section .faq-number span {
  display: block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: bold !important;
  transform: rotate(-45deg) !important;
}

/* 質問のテキスト（h2：ボルドーカラー＆明朝セリフ体） */
.faq-section .custom-qa-summary h2 {
  font-size: 22px !important;
  color: #510d11 !important; /* 深みのある美しいボルドー */
  font-family: "Sawarabi Mincho", "Noto Serif JP", "Georgia", serif !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-weight: bold !important;
  text-align: left !important;
  flex: 1 !important;
  
  /* 💡 魔法のぶら下げインデント設定（Q.の幅だけ2行目を右に下げる） */
  padding-left: 1.5em !important;
  text-indent: -1.5em !important;
  
  /* 日本語の不自然なブツ切り改行防止セット */
  word-break: normal !important;
  line-break: strict !important;
  overflow-wrap: anywhere !important;
}

/* 右側の開閉「▼」アロー（アンティークゴールド） */
.faq-section .custom-qa-summary::after {
  content: '▼' !important;
  position: absolute !important;
  right: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.7em !important;
  color: #bfa881 !important;
  transition: transform 0.3s !important;
}

/* アコーディオンが開いたときに矢印をひっくり返す */
.faq-section .custom-qa[open] .custom-qa-summary::after {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* アコーディオンが開いたときの、質問と回答の間にある薄い境界線 */
.faq-section .custom-qa[open] .custom-qa-summary {
  border-bottom: 1px solid rgba(211, 194, 163, 0.4) !important;
}

/* 回答エリアのコンテナ設定（ふんわり展開） */
.faq-section .faq-answer {
  /* 💡 左側の余白を計算（ひし形32px + gap20px + Q.の引っ込み分を合算） */
  padding: 30px 50px 35px 97px !important; 
  background-color: transparent !important;
  animation: faqFadeIn 0.35s ease !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 回答テキスト（高級感のあるダークブラウン・明朝体） */
.faq-section .faq-answer p {
  font-size: 16px !important;
  color: #2c1e15 !important;
  font-family: "Noto Serif JP", serif !important;
  line-height: 1.9 !important;
  margin: 0 !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;

  /* 回答文のブツ切り改行防止 */
  word-break: normal !important;
  line-break: strict !important;
  overflow-wrap: anywhere !important;
}

/* フェードインアニメーション */
@keyframes faqFadeIn {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 📱 スマホ用レスポンシブ微調整（画面幅768px以下） */
@media screen and (max-width: 768px) {
  .faq-section .custom-qa-summary {
    padding: 25px 40px 20px 20px !important;
    gap: 12px !important;
  }
  .faq-section .faq-number {
    width: 28px !important;
    height: 28px !important;
    margin-top: 1px !important;
  }
  .faq-section .faq-number span {
    font-size: 11px !important;
  }
  .faq-section .custom-qa-summary h2 {
    font-size: 16px !important;
    /* スマホ用にインデント幅を微調整 */
    padding-left: 1.6em !important;
    text-indent: -1.6em !important;
  }
  .faq-section .faq-answer {
    padding: 20px 20px 25px 20px !important; /* スマホはすっきり全面表示 */
  }
  .faq-section .custom-qa-summary::after {
    right: 15px !important;
  }
}