@charset "utf-8";

.outer h2 {
	display:block;
	border-bottom:1px solid #ddd;
	font-size:120%;
}

.sec1,
.sec2 {
	opacity:var(--opp);
}

.faqList,
.faqList li,
.faqList .list2 {
	display:block;
	padding:0;
}
.faqList h3 {
	padding:1em;
	background-color:var(--color2);
	color:#fff;
}
.faqList .list2 {
	counter-reset:step;
	padding:1em;
	--ww:2.5em;
	overflow:hidden;
}
.faqList .item2 {
	position:relative;
	padding:1em 1em 1em var(--ww);
}
.faqList .item2 input[type='radio'] {
	display:none;
}
.faqList .item2 label {
#	position:absolute;
#	inset:0;
}
.faqList .fk {
	position:absolute;
	width:2em;
	font-size:120%;
	height:1.5em;
	border-radius:50%;
	color:#fff;
	overflow:hidden;
	inset:0 auto auto calc(var(--ww) * -.5);
	transform:rotate(10deg);
	transition-duration:.5s;
	transition-property:all;
	transition-timing-function:ease;
}
.faqList .item2 input:checked ~ .fk {
	top:3em;
}
.faqList .fk div {
	position:absolute;
	display:flex;
	background-image:linear-gradient(#0066ff 30%, #ff3333 70%);
	justify-content:center;
	align-items:center;
	flex-flow:column;
	inset:0 0 auto;
	transition-duration:.5s;
	transition-property:all;
	transition-timing-function:ease;
}
.faqList .item2 input:checked ~ .fk div {
	top:-1.5em;
}
.faqList .fk p {
	width:fit-content;
	height:1.5em;
}
.faqList .que {
	text-indent:calc(var(--ww) * -1);
}
.faqList .que:before {
	counter-increment:step;
	content:counter(step)'、';
	display:inline-block;
	width:var(--ww);
	text-align:right;
}
.faqList .ans {
	position:relative;
	overflow:hidden;
}
.faqList .ain {
	padding:.5em;
}
.faqList .ain.x1 {
	position:absolute;
	inset:0 0 auto;
}
.faqList .ain.x0 {
	opacity:0;
	transition-duration:.5s;
	transition-property:all;
	transition-timing-function:ease;
}
.faqList .item2 input:not(:checked) ~ .ans .ain.x0 {
	margin-top:calc(100% / -3);
}
.faqList strong {
	position:relative;
	display:inline-block;
	font-weight:normal;
}
.faqList strong:before {
	position:absolute;
	display:block;
	content:'';
	inset:.5em -.6em .1em;
	transform: skewY(.3deg);
	background-color:#ff0;
	mix-blend-mode:multiply;
}

.sec2 a {
	display:block;
	padding:1em 2em;
	background-color:var(--color2);
	color:#fff;
	font-size:110%;
	width:fit-content;
	text-decoration-line:none;
	border-radius:.5em;
}
.sec2 .sarea {
	display:flex;
	height:10em;
	justify-content:center;
	place-items:center;
}
.sec2 .sarea li {
	display:block;
	width:fit-content;
	height:fit-content;

}