/* ==========================================================================
   FAQページ専用スタイル
   Figma: https://www.figma.com/design/Mj20Hj0MHYKyrElrxn915j?node-id=1865-12672
   Figma SP: https://www.figma.com/design/Mj20Hj0MHYKyrElrxn915j?node-id=1867-12673
   Q&Aアコーディオン部は common/css/faq-accordion.css を参照

   clamp() 補間基準: 375px → 1920px (range 1545px)
   ========================================================================== */

.faq-page {
	padding-block: clamp(40px, calc(40px + 40 * (100vw - 375px) / 1545), 80px);
	background-color: #fff;
	color: #191a19;
	font-family: 'Noto Sans JP', 'Inter', sans-serif;
}

/* ----- リード文 ----- */
.faq-lead {
	margin-block-end: clamp(42px, calc(42px + 22 * (100vw - 375px) / 1545), 64px);
}

.faq-lead__text {
	font-size: clamp(16px, calc(16px + 4 * (100vw - 375px) / 1545), 20px);
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.2px;
	color: #191a19;
	margin: 0;
}

/* ----- セクション共通: ■見出し ----- */
.faq-section-heading,
.faq-category-title {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: clamp(14px, calc(14px + 4 * (100vw - 375px) / 1545), 18px);
	line-height: 1.4;
	font-weight: 700;
	color: #191a19;
	margin: 0 0 clamp(22px, calc(22px + 18 * (100vw - 375px) / 1545), 40px);
	padding-inline: clamp(0px, calc(0px + 12 * (100vw - 375px) / 1545), 12px);
}

.faq-section-heading__marker,
.faq-category-title__marker {
	color: var(--color-brand);
	font-size: clamp(14px, calc(14px + 4 * (100vw - 375px) / 1545), 18px);
	font-weight: 600;
	line-height: 1.4;
}

.faq-section-heading__text,
.faq-category-title__text {
	color: #191a19;
}

/* ==========================================================================
   カテゴリーリンク
   ========================================================================== */
.faq-categories {
	margin-block-end: clamp(48px, calc(48px + 32 * (100vw - 375px) / 1545), 80px);
}

.faq-category-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 42px;
	row-gap: clamp(20px, calc(20px + 4 * (100vw - 375px) / 1545), 24px);
	padding-inline: 0;
	list-style: none;
	margin: 0;
}

.faq-category-list__item {
	max-width: 100%;
}

.faq-category-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-link);
	font-size: clamp(14px, calc(14px + 1 * (100vw - 375px) / 1545), 15px);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.faq-category-link:hover {
	opacity: 0.7;
}

.faq-category-link__text {
	flex: 1 1 0;
	min-width: 0;
}

.faq-category-link__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 40px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-link);
	border-radius: 999px;
	color: var(--color-link);
	box-sizing: border-box;
}

.faq-category-link__icon svg {
	width: 8px;
	height: 6.28px;
	display: block;
}

/* ==========================================================================
   Q&Aアコーディオン部のスタイルは common/css/faq-accordion.css を参照
   FAQページ固有の周辺レイアウトのみここで上書き
   ========================================================================== */
.faq-list {
	margin-block-start: clamp(48px, calc(48px + 32 * (100vw - 375px) / 1545), 80px);
}

.faq-category-group {
	margin-block-end: clamp(48px, calc(48px + 24 * (100vw - 375px) / 1545), 72px);
	scroll-margin-block-start: 120px;
}

.faq-category-group:last-child {
	margin-block-end: 0;
}

.faq-category-title {
	margin-block-end: clamp(22px, calc(22px + 2 * (100vw - 375px) / 1545), 24px);
}

/* FAQページ内ではアコーディオンセクションの上下paddingを抑制 */
.faq-category-group .menu-faq__list {
	max-inline-size: 952px;
	margin-inline: auto;
}

/* ==========================================================================
   レスポンシブ（タブレット 768–1024px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.faq-category-list {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 28px;
	}
}

/* ==========================================================================
   レスポンシブ（〜767px）
   ========================================================================== */
@media (max-width: 767px) {
	.faq-lead__text {
		line-height: 1.6;
	}

	.faq-category-list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 20px;
	}
}