/* =========================
   FAQ（よくある質問）
========================= */

.faq{
	padding:0 20px;
	margin:30px auto 0;
}

.faq-wrap{
	max-width:1100px;
	margin:0 auto;
}

/* 見出し：business-lead 系 */
.faq-lead{
	margin:30px auto 0;
	padding:18px 20px;
	border-left:6px solid #2590e2;
	background:linear-gradient(90deg, rgba(37,144,226,.10), rgba(255,255,255,0));
	border-radius:12px;
	font-size:20px;
	font-weight:900;
	color:#111;
	letter-spacing:.02em;
}

/* 外枠：business-box 系 */
.faq-box{
	margin:16px auto 0;
	padding:10px;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:14px;
	box-shadow:0 10px 26px rgba(0,0,0,.05);
}

/* 1件 */
.faq-item{
	border-radius:12px;
	overflow:hidden;
	border:1px solid #eef2f7;
	background:#fff;
}

.faq-item + .faq-item{
	margin-top:10px;
}

.faq-q{
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:12px;
	padding:16px 16px;
	font-weight:900;
	color:#111;
	position:relative;
	background:
		radial-gradient(circle at 15% 10%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(90deg, rgba(37,144,226,.06), rgba(255,255,255,0));
}

/* summaryのデフォルト矢印消す */
.faq-q::-webkit-details-marker{display:none;}

/* Qバッジ */
.faq-q__badge{
	width:34px;
	height:34px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#2590e2;
	color:#fff;
	font-weight:900;
	flex:0 0 auto;
	box-shadow:0 10px 20px rgba(37,144,226,.18);
}

.faq-q__text{
	flex:1;
	font-size:15px;
	line-height:1.6;
}

/* 右の開閉アイコン */
.faq-q__icon{
	width:20px;
	height:20px;
	position:relative;
	flex:0 0 auto;
	opacity:.9;
}

.faq-q__icon::before,
.faq-q__icon::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:14px;
	height:2px;
	background:#1b4f8f;
	transform:translate(-50%,-50%);
	border-radius:2px;
	transition:transform .2s ease, opacity .2s ease;
}
.faq-q__icon::after{
	transform:translate(-50%,-50%) rotate(90deg);
}

/* 開いたら＋が−になる */
.faq-item[open] .faq-q__icon::after{
	opacity:0;
	transform:translate(-50%,-50%) rotate(90deg);
}

/* Aエリア */
.faq-a{
	display:flex;
	gap:12px;
	padding:16px 16px 18px;
	border-top:1px solid #eef2f7;
	background:#fff;
}

.faq-a__badge{
	width:34px;
	height:34px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#1b4f8f;
	color:#fff;
	font-weight:900;
	flex:0 0 auto;
	box-shadow:0 10px 20px rgba(27,79,143,.16);
}

.faq-a__text{
	flex:1;
	color:#555;
	font-size:14px;
	line-height:1.9;
}

/* hover */
.faq-item:hover{
	box-shadow:0 12px 30px rgba(16,24,40,.08);
	transition:.2s ease;
}

/* スマホ */
@media screen and (max-width:900px){
	.faq{
		padding:0;
	}
	.faq-wrap{
		margin:0 12px;
	}
	.faq-lead{
		padding:16px 16px;
		font-size:18px;
	}
	.faq-q__text{
		font-size:14px;
	}
	.faq-a__text{
		font-size:13px;
	}
}