@charset "UTF-8";

/*
 * よくある質問のページ（page-faq.php）。
 *
 * メインビジュアル・質問と回答（p-qa）・CTA は page-first.css を流用しているため、
 * functions.php で 'first' を extends に指定している。
 *
 * ジャンルのボタンは、お知らせ一覧・イベント一覧と共通の
 * c-filter（css/components.css）を使っている。
 *
 * モバイルファースト。PC は 840px 以上。
 */

.p-faq {
	overflow-x: hidden;
}

.p-faq__body {
	padding: 40px 0 56px;
	background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   ジャンルのボタン
   -------------------------------------------------------------------------- */
.p-faq__nav {
	margin-bottom: 8px;
}

/*
 * c-filter__button は一覧ページでは <button>、ここでは <a> を使っている。
 * リンクの下線と文字色だけ打ち消す。
 */
.p-faq__nav .c-filter__button {
	text-decoration: none;
	color: var(--color-primary);
}

.p-faq__nav .c-filter__button.is-active {
	color: #fff;
}

/* --------------------------------------------------------------------------
   グループ（見出し＋質問）
   -------------------------------------------------------------------------- */
.p-faq__group {
	/*
	 * ヘッダーは position: fixed のため、上のボタンから飛んできたときに
	 * 見出しがヘッダーの下に潜らないよう、ヘッダーの高さぶん余白をとる。
	 */
	scroll-margin-top: calc(var(--header-h-sp) + 16px);
	padding-top: 60px;
}

/* 飛んできたときに枠が出ないようにする（移動先を伝えるための focus） */
.p-faq__group:focus {
	outline: none;
}

.p-faq__group-title {
	margin: 0;
	font-family: var(--font-mincho);
	/* 明朝体は太字にしない */
	font-weight: 400;
	font-size: 25px;
	line-height: 1.4;
	letter-spacing: .04em;
}

.p-faq__list {
	margin-top: 16px;
}

/* ==========================================================================
   PC（840px 以上）
   ========================================================================== */
@media (min-width: 840px) {

	.p-faq__body {
		padding: 72px 0 100px;
	}

	.p-faq__nav {
		margin-bottom: 16px;
	}

	.p-faq__group {
		scroll-margin-top: calc(var(--header-h-pc) + 24px);
		padding-top: 75px;
	}

	.p-faq__group-title {
		font-size: 25px;
		margin-bottom: 20px;
	}

	.p-faq__list {
		margin-top: 8px;
	}
}