/* 横100%のピンク背景ブロック */
.faq-header-pink-block {
	background-color: #fdeef4;
	padding: 60px 0;
	margin-bottom: 50px;
	width: 100%;
}

/* タイトルとサブコピー */
.faq-header {
	text-align: center;
	margin-bottom: 40px;
}

.faq-main-title {
	font-size: 32px;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
}

.faq-sub-copy {
	font-size: 15px;
	color: #666;
}

/* 隙間のあるタイルナビゲーション */
.faq-nav-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	/* ボタン同士の隙間 */
	list-style: none;
	padding: 0;
	justify-content: center;
}

.faq-nav-item {
	/* 1行に5つ並べる計算（隙間分を引く） */
	width: calc(20% - 10px);
	min-width: 150px;
}

.faq-nav-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	background-color: #fff;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	border: 1px solid #333;
	/* ボタン単体に枠線を付ける */
	transition: all 0.3s ease;
	text-align: center;
	padding: 0 5px;
}

.faq-nav-item a:hover {
	background-color: #333;
	color: #fff;
}

/* スマホ対応 */
@media (max-width: 1024px) {
	.faq-nav-item {
		width: calc(33.333% - 8px);
	}
}

@media (max-width: 768px) {
	.faq-nav-item {
		width: calc(50% - 6px);
	}

	.faq-main-title {
		font-size: 24px;
	}
}


.faq-category-title {
	margin-bottom: 20px;
}

/* アコーディオンの回答部分 */
.faq-answer {
	height: 0;
	overflow: hidden;
	transition: height 0.4s ease-out;
	will-change: height;
}

/* JSで .open クラスがついた時 */
.faq-item.open .faq-answer {
	/* ここでは高さを指定せず、JSで計算した値を直接流し込む */
}

/* 中身の余白 */
.faq-answer-inner {
	padding: 20px;
}

/* FAQの回答内にあるリンクのスタイル */
.faq-link {
	color: #0073aa;
	/* サイトのメインカラーに合わせて調整 */
	text-decoration: underline;
	font-weight: bold;
}

.faq-link:hover {
	text-decoration: none;
	opacity: 0.8;
}