CSSで作ったアコーディオン

	<div class="css-accordion ac-arrow">

		<input type="checkbox" id="faq003" class="ac-hidden"> //faqxxx …重複しない番号
		<label for="faq003" class="ac-open"><span>Q</span>□□□□□□□□□□□□ですか。</label>
		<label for="faq003" class="ac-close"><span>A</span>
			<p>□□□□□□□□□□□□□□□□□□□□□□□□です。</p>
		</label>

		<input type="checkbox" id="faq004" class="ac-hidden">
		<label for="faq004" class="ac-open"><span>Q</span>□□□□□□□□□□□□ですか。</label>
		<label for="faq004" class="ac-close"><span>A</span>
			<p>□□□□□□□□□□□□□□□□□□□□□□□□です。</p>
		</label>

	</div>

.css-accordion label:hover{
	opacity: .6;
	}
.ac-hidden {
	display: none;
	}
.ac-open {
	display: block;
	position: relative;
	line-height:1.5;
	margin: 2px 0;
	padding: 1rem 4rem 1rem 6rem ;
	cursor: pointer;
	background: #eee;
	}
.ac-close {
	display: block;
	position: relative;
	left: -1rem;
	line-height:1.3;
	padding: 0 0 0 6rem;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.5s;
	}
.ac-hidden:checked + .ac-open + .ac-close {
	opacity: 1;
	margin-bottom: 2rem;
	padding: 1rem 1rem 1rem 6rem ;
	height: auto;
	background: #f9f9f9;
	}
.ac-open span:nth-child(1),
.ac-close span:nth-child(1) {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 100%;
	text-align: center;
	color: #fff;
	}

.ac-open span:nth-child(1) {
	background: #ee7836;
	}
.ac-close span:nth-child(1) {
	background: #ccc;
	}

/*-- Mark .> --*/
.ac-arrow .ac-open::after {
	position: absolute;
	top: 20%;
	right: 5%;
	content: '';
	width: 13px;
	height: 13px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	background: none;
	transform: rotate(135deg)!important;
	transition: all .5s;
	}
.ac-arrow .ac-hidden:checked + .ac-open:after {
	transform: rotate(-45deg) !important;
	top: 35%;
	transition: .5s;
	}

/*-- Mark + --*/
.ac-plus .ac-open::before,
.ac-plus .ac-open::after {
	position: absolute;
	top: 50%;
	right: 5%;
	content: '';
	width: 20px;
	height: 2px;
	background: #000;
	transform: translateY(-50%);
	}
.ac-plus .ac-open::after {
	transform: translateY(-50%) rotate(90deg);
	transition: .5s;
	}
.ac-plus .ac-hidden:checked + .ac-open:after {
	transform: translateY(-50%) rotate(0);
	}