@keyframes px2-accordion__content--show-hide {
	0% {
		transform: scaleY(1) translateY(-5px);
		opacity: 0;
	}
	100% {
		transform: scaleY(1) translateY(0);
		opacity: 1;
	}
}
.px2-accordion {
	margin-top: 1em;
	margin-bottom: 1em;
	container-type: inline-size;

	> .px2-accordion__unit {
		border-top: 1px solid #dee2e6;
		border-left: 1px solid #dee2e6;
		border-right: 1px solid #dee2e6;
		&:last-child {
			border-bottom: 1px solid #dee2e6;
		}
		&::after {
			content: " ";
			display: block;
			visibility: hidden;
			height: 0.1px;
			font-size: 0.1em;
			line-height: 0;
			clear: both;
		}
		> .px2-accordion__label {
			text-align: left;
			a{
				display: block;
				padding: 0.3em 1em;
				background-color: #f9f9f9;
				&::before{
					content: "";
					display: inline-block;
					border-right: 3px solid #a6acb3;
					border-bottom: 3px solid #a6acb3;
					width: 0.5em;
					height: 0.5em;
					text-decoration: none;
					margin-right: 1em;
					transition: transform 0.1s ease-in;
					transform: rotate(-45deg);
				}
			}
		}
		> .px2-accordion__content {
			margin: 1rem;
			display: none;
		}
	}
	> .px2-accordion--active > .px2-accordion__content {
		display: block;
		animation: px2-accordion__content--show-hide .3s ease 0s 1 normal none running;
	}
	> .px2-accordion--active > .px2-accordion__label a::before {
		transform: rotate(45deg) translate(-0.1em, -0.1em);
	}
}