/*
Theme Name: Live55 Theme
Theme URI: 
Description:
Version: 1.0
Author:
Author URI:
*/
.ai-faq {
  /* 全体のパディングと背景色 */
  padding: 20px;margin:1em;
  background-color: #a8d8e3;
  border-radius: 15px; /* 角を丸く */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* ほんのり影 */
}

.ai-faq dt {
  /* 質問部分のスタイル */
  font-weight: bold;
  color: #fff;
  background-color: var(--main-color);
  padding: 0.5em 1em 0.5em 4em;
  margin-bottom: 8px;
  border-radius: 10px;
  position: relative; /* :before擬似要素の基準位置 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* 控えめな影 */
  line-height:1.7;
  border: 3px solid;
}

.ai-faq dt::before {
  /* 質問のQアイコン */
  content: "Q";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  color: var(--main-color);
  font-weight: bold;
  font-size: 1.1em;
  width: 28px;
  height: 28px;
  border-radius: 50%; /* 丸い形 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Qアイコンの影 */
}

.ai-faq dd {
  /* 回答部分のスタイル */
  color: #7a6e7e; /* 落ち着いたグレーパープル */
  background-color: #ffffff; /* 白い背景 */
  padding: 1em 1em 1em 4em;
  margin-bottom: 20px; /* 次の質問との間隔 */
  border-radius: 10px;
  position: relative; /* :before擬似要素の基準位置 */
  line-height: 1.7; /* 行の高さ */
  border: 3px solid #5ab2bb99;
}

.ai-faq dd::before {
  /* 回答のAアイコン */
  content: "A";
  position: absolute;
  left: 15px;
  top: 12px; /* 少し上寄りに配置 */
  background-color:#333 ;
  color: #ffffff; /* 白い文字 */
  font-weight: bold;
  font-size: 1.1em;
  width: 28px;
  height: 28px;
  border-radius: 50%; /* 丸い形 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Aアイコンの影 */
}

/* 最後のdd要素の下マージンを調整 */
.ai-faq dd:last-of-type {
  margin-bottom: 0;
}

/* <strong>タグのスタイル */
.ai-faq dd strong {
  font-weight: bold;
}