@charset "utf-8";

.library .accordion {
  overflow: hidden;
}

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

.library .accordion-item .accordion-header {
  transition: all .3s;
}

/* .library .accordion-item.is-active .accordion-header {
  border-bottom: 1px dashed var(--Umios_Blue);
} */

.library .accordion-item.is-active .accordion-header::after {
  /* アクティブ時：縦棒（横棒は回転で消える想定） */
  transform: translateY(-50%) rotate(0deg);
}

.library .accordion-header {
  position: relative;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: white;
  text-align: left;
  font-size: 2rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
	gap: 12px;
	color: var(--Umios_body_text);
  /* min-height: 48px; // タッチターゲットサイズの確保（アクセシビリティ対応） */
}

.library .accordion-header .fy-title {
	font-size: 3rem;
	font-weight: 700;
}

.library .accordion-header:hover {
  color: var(--Umios_Red);
}

.library .accordion-header:focus-visible {
  /* キーボード操作時のフォーカス表示 */
  outline: 2px solid #0066cc;
  outline-offset: -2px;
  color: var(--Umios_Red);
  z-index: 1;
}

.library .accordion-header:focus:not(:focus-visible) {
  outline: none;
}

.library .accordion-header::before,
.library .accordion-header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 2px;
  background-color: var(--Umios_Red);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.library .accordion-header::before {
  /* 横棒 */
  transform: translateY(-50%);
}

.library .accordion-header::after {
  /* 縦棒（デフォは90度回転で＋を表現） */
  transform: translateY(-50%) rotate(-90deg);
}

.library .accordion-content {
  overflow: hidden;
  height: 0;
}

.library .accordion-content-inner {
  padding: 0 20px;
	background-color: var(--Bg_BW2);

	dl {
		display: flex;
		/* justify-content: space-between; */
		gap: 150px;
		padding: 20px 0;

		dt {
			width: 150px;
			min-width: 150px;
			font-weight: 700;
		}

		dd {
			font-weight: 500;

			li + li {
				margin-top: 24px;
			}
		}

		+ dl {
			border-top: 1px solid var(--Bg_BW1);
		}
	}
}

@media screen and (max-width: 979px) {
	.library .accordion-header {
		font-size: 1.4rem;
	}
	.library .accordion-header .fy-title {
		font-size: 2.2rem;
	}
	.library .accordion-content-inner {
		padding: 0 16px;

		dl {
			flex-direction: column;
			gap: 32px;
			padding: 16px 0;

			dt {
				width: auto;
				min-width: auto;
			}
		}
	}
}
