.content {
  display: grid;
  grid-template-rows: 0fr; /* 閉じた状態：高さ0 */
  transition: grid-template-rows 1s; /* アニメーション */
  overflow: hidden;
}

#check1 {
  display: none;
}

.topics-label{
	background: #0068b7;
	color: #fff;
	display: block;
	margin: 3em auto;
	padding: 1em;
	position: relative;
	text-align: center;
	width: 330px;
	border-radius: 3rem;
	cursor: pointer;
}

.topics-label:hover {
 opacity: 0.7;
}

.topics-label:after{
	box-sizing: border-box;
	content: '\f067';
	display: block;
	font-family: "Font Awesome 5 Free";
	font-size: 150%;
	padding: 0.5em 1em;
	position: absolute;
	right: 0;
	top: 0.2em;
}

/* チェックが入ったら（開いた状態） */
#check1:checked ~ .content {
  grid-template-rows: 1fr; /* 開いた状態：中身に合わせる */
}

#check1:checked + .topics-label:after{
	content: '\f068';
}

/* 中身が消えないようにラップする */
.inner {
  min-height: 0;
}

.accordion-close {
  background: #0068b7;
	color: #fff;
	display: block;
	margin: 3em auto;
	padding: 1em;
	position: relative;
	text-align: center;
	width: 200px;
	border-radius: 3rem;
  cursor: pointer;
}

.topics-label:hover,
.accordion-close:hover {
 opacity: 0.7;
}