@charset "utf-8";

/******************* 統一設定 *******************/
section[id^=sec] .button{
	margin:0 auto;
	padding:10px 40px;
	color:#4d99b5;
	background:#fff;
	border:solid 2px #4d99b5;
	border-radius:999px;
	display:block;
}

section[id^=sec] .faqlist{
	width:90%;
	max-width:1092px;
	margin:max(-4%,-55px) auto 0;
	row-gap:10px;;
	flex-direction:column;
}

section[id^=sec] .faqlist details{
	width:100%;
	margin-bottom:15px;
	padding:30px;
	background:#fff;
	border-radius:15px;
	box-shadow:0 0 15px rgb(0 0 0 / 30%);
}

section[id^=sec] .faqlist details summary{
	color:#4d99b5;
	font-size:1.25em;
	font-weight:bold;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;
	transition:transform .4s;
}

section[id^=sec] .faqlist details summary::after{
	width:30px;
	height:30px;
	color:#fff;
	background:#888;
	text-align:center;
	border-radius:100%;
	aspect-ratio:1/1;
	content:"+";
	display:block;
}

section[id^=sec] .faqlist details[open="true"] summary::after{
	line-height:1.175em;
	content:"-";
	transition:.3s;
}

section[id^=sec] .faqlist details summary::-webkit-details-marker{
	display:none;
}

section[id^=sec] .faqlist details div.detail{
	margin-top:15px;
	column-gap:5px;
	line-height:1.575em;
	border-top:solid 1px #c0c0c0;
	transition:.3s;
}

section[id^=sec] .faqlist details div.detail::before{
	margin-top:15px;
	content:"A. "
}

section[id^=sec] .faqlist details div.detail .innerbox{
	margin-top:15px;
}

section[id^=sec] .faqlist details div.detail .innerbox ul{
	margin:15px 0;
}


/******************* 各セクション *******************/
#sec01 h1::before{
	background:url("./../img/common/faq.png") no-repeat center/contain;
}


#sec02{
	padding-bottom:50px;
	background:#d0eaf4;
}


#sec03{
	padding-bottom:50px;
	background:#e0f3fa;
}

@media (max-width:767px){
	#sec02{
		row-gap:10px;
		column-gap:0;
		flex-direction:column;
	}
	
	#sec02 .img{
		width:100%;
	}

	#sec02 .img::after{
		display:none;
	}
	
	#sec02 .textbox{
		width:90%;
		margin:0 auto;
		padding:10px 15px;
	}

	#sec02 .textbox .button{
		margin:0 auto;
	}
		

	#sec04 .intro{
		row-gap:20px;
		column-gap:0;
		flex-direction:column;
	}

	#sec04 .intro .textbox{
		width:100%;
	}



	#sec05 .textbox .innerbox{
		row-gap:10px;
		column-gap:0;
		flex-direction:column;
	}

	#sec05 .textbox .innerbox img,#sec05 .textbox .innerbox .guide{
		width:100%;
	}

	#sec05 .textbox .innerbox .guide{
		padding:0 10px 10px;
	}

	#sec05 .tips br{
		display:block;
	}
}


@media (max-width:450px){
	section[id^=sec] .circle{
		padding-top:25px;
	}

	section[id^=sec] .circle .header{
		flex-direction:column;
		align-items:center;
	}
	
	section[id^=sec] .circle .header img{
		width:42px;
	}
	
	section[id^=sec] .circle .header h2{
		font-size:1.475em;
	}
}