@charset "UTF-8";

/* ================================================== */
/* accordion */
/* ================================================== */
.accordion-container {
  margin-top: 20px;
  border: 1px solid var(--border-color-gray); /* Bulmaのborder-colorを参考に */
  border-radius: var(--border-radius-card); /* Bulmaのborder-radiusを参考に */
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--border-color-gray);
}

.accordion-item:last-child {
  border-bottom: none; /* 最後の子要素の境界線を削除 */
}

.accordion-title {
  padding: 20px;
  background-color: #f5f5f5; /* Bulmaのlightカラーを参考に */
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.accordion-title:hover {
  background-color: var(--color-lightgray); /* ホバー時の色 */
}

.accordion-title.active {
  background-color: var(--color-lightgray); /* 開いている時の色 */
}

.accordion-content {
  padding: 0 20px;
  background-color: #ffffff;
  overflow: hidden;
  max-height: 0; /* 初期状態でコンテンツを非表示にするためのキー */
  transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* アニメーション用 */
}

.accordion-content.open {
  max-height: inherit; /* 十分な高さに設定 (コンテンツの量に合わせて調整) */
  padding-top: 20px;
  padding-bottom: 20px;
}

/* タイトルの右側に開閉を示すアイコンを追加する場合 */
.accordion-title::after,
.accordion-title.active::after {
  font-family: var(--font-family-font-awesome);
}
.accordion-title::after {
  content: "\2b";
}
.accordion-title.active::after {
  content: "\f068";
}

.accordion-content-block:not(:last-child) {
  border-bottom: 1px solid var(--border-color-gray);
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}