/* =============================================================
  よくある質問　.faq
============================================================= */
/* 共通
-------------------------------------------*/
/* 全体
--------------------------------*/
/* 上マージン */
details {
	margin-top: 2rem;
}
/* summaryのデザイン */
details summary {
	font-weight: bold;
	background-color: var(--color-primary-pale4);
	border-radius: 0.5rem;
	padding: 1rem 2rem;
}
/* p */
details p {
	padding: 1rem 2rem;
}
/* 注釈 */
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: #fff;
}
details summary:after {
  left: 2.4rem;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid var(--color-primary-pale1);
  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-pale3);
}

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