/* tech-theme.faq-q-fix.css
   FAQ: Qアイコンと縦ラインの重なり解消（スマホ対応）
   このCSSは tech-theme.css の後に読み込むか、内容を tech-theme.css の末尾に統合してください。
*/

/* 質問ブロック全体の左余白を確保 */
.faq.styled dt,
.faq dt {
  padding-left: 56px !important;   /* Qの分だけ余白 */
  position: relative;
}

/* Qアイコンを線の左に配置 */
.faq.styled dt .q,
.faq dt .q,
.faq.styled dt .Q,
.faq dt .Q {
  position: absolute !important;
  left: 16px !important;           /* 縦ラインより左 */
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  background: #ffffff !important;  /* 線の上に重ならない */
  border-radius: 999px !important;
  padding: 2px 6px !important;
  line-height: 1 !important;
}

/* 左の縦ライン位置を少し右に（疑似要素/実線どちらにも対応） */
.faq.styled dt::before,
.faq dt::before,
.faq.styled dt .line,
.faq dt .line {
  left: 40px !important;           /* Qより右にライン */
}

/* スマホ時の微調整 */
@media (max-width: 768px) {
  .faq.styled dt,
  .faq dt {
    padding-left: 52px !important;
  }
  .faq.styled dt .q,
  .faq dt .q,
  .faq.styled dt .Q,
  .faq dt .Q {
    left: 12px !important;
  }
  .faq.styled dt::before,
  .faq dt::before,
  .faq.styled dt .line,
  .faq dt .line {
    left: 36px !important;
  }
}