@charset "utf-8";
/* CSS Document */

<style type="text/css">
a {outline:none;}
	
/* アコーディオン全体のスタイリング */
.accordion {
  border: 3px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  width:820px;					  
}

/* アコーディオンのヘッダー部分のスタイリング */
.accordion-header {
  padding: 10px;
  background-color: #f7f7f7;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  position: relative; /* 矢印アイコンの位置調整のため */
  list-style: none; /* デフォルトの矢印を消す */
	
}

/* アコーディオンのコンテンツ部分のスタイリング */
.accordion-content {
  padding: 15px;
  line-height: 1.5;
  background-color: #fff;
}

/* カスタム矢印のスタイル */
.accordion-header::after {
  content: '+'; /* ここに好きなアイコンを設定できます */
  position: absolute;
  right: 5px; /* ヘッダーから右に5pxの位置 */
  transition: transform 0.2s ease-in-out; /* アニメーション効果 */
}

/* アコーディオンが開いている時の矢印のスタイル */
.accordion[open] .accordion-header::after {
  transform: rotate(180deg); /* 矢印を180度回転 */
}

/* WebKitベースのブラウザでデフォルトの矢印を消す */
.accordion .accordion-header::-webkit-details-marker {
  display: none;
}

</style>