/* =============================================================
  よくある質問 .qanda
============================================================= */
/* 共通
-------------------------------------------*/
/* 全体
----------------------------*/
/* block */
.block {
	margin-top: 4rem;
}
.block:first-child {
	margin-top: 0;
}

/* 上マージン */
details {
	margin-top: 2rem;
}
/* summaryのデザイン */
details summary {
	font-weight: bold;
	background-color: var(--color-primary-bright-a20);
	border-radius: 0.5rem;
	padding: 1rem 2rem;
}
/* p */
details p {
	padding: 1rem 2rem;
}
/* a */
details a {
	text-decoration: underline;
}
/* 注釈 */
details p.annotation {
	padding-top: 0;
}

/* 矢印を変更
----------------------------*/
/* 矢印を削除、左パディング追加 */
details summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding-left: 3.5rem; /* アイコン分の余白 */
  cursor: pointer;
  transition: 0.2s; /* 変化を滑らかに */
}
/* chrome safariの矢印を削除　*/
details summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}
/* 疑似要素でアイコンを表示 */
details summary:before,
details summary:after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2rem;
}
details summary:before {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--color-primary-dark);
}
details summary:after {
  left: 2.4rem;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}
/* オープン時回転 */
details[open] summary:after {
  transform: rotate(90deg); /* 90度回転 */
  left: 2.2rem;
  top: 5px;
}

/* ホーバー時
----------------------------*/
/* デザインとカーソルを変更 */
details summary:hover {
  cursor: pointer; /* カーソルを指マークに */
  background-color: var(--color-primary-bright-a50);
}

/* オープン時
----------------------------*/
/* デザインを変更*/
details[open] summary {  
	background-color: var(--color-primary-bright-a50);
}
/* アニメーションを設定 */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}