@charset "utf-8";


/* CSS Document for summary*/
.accbox details {
  border: 1px solid #ccc;       /* 枠線 */
  border-radius: 6px;           /* 角丸 */
  padding: 15px 20px;           /* 全体に内側余白（上下15px、左右20px）を確保 */
  background-color: #fafafa;    /* 背景色（お好みで） */
  margin-bottom: 20px;          /* 外側の余白で、質問ごとに間隔をつける */
  box-sizing: border-box;       /* パディングを含めてサイズ計算 */
}

.accbox details summary {
  color: #454545;   /* 追加：質問の文字色を変更 */
  cursor: pointer;
  font-weight: bold;
  user-select: none;
  list-style: none;             /* ブラウザ標準のマーカーを消す */
  padding: 0;
  margin: 0 0 10px 0;           /* 質問の下に少し間隔をつける */
  position: relative;           /* 疑似要素を置くために relative を指定 */
  padding-left: 24px;           /* 左に三角マークのスペース確保 */
}

/* 既にあるA部分（回答） */
.accbox .accshow,
.accbox .accshow p,
.accbox .accshow ul,
.accbox .accshow li {
  color: #454545;
}


/* 三角形マーク（閉じている時は下向き） */
.accbox details summary::before {
  content: "▼";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* 開いている時は180度回転（上向き） */
.accbox details[open] > summary::before {
  transform: translateY(-50%) rotate(180deg);
}