@charset "utf-8";
/*
 * よくある質問 — カテゴリ階層（第1階層）
 *
 * 設置先: assets/css/faq.css（新規）／ functions.php で enqueue
 *
 * 第2階層（設問・回答）はトップページで使われている既存パーツ
 * （.faq-list / .faq-items / .question / .answer）をそのまま流用するため、
 * このファイルで追加するのはカテゴリ見出しの分だけ。
 *
 * 開閉は既存の共通JS（assets/js/common.js）がそのまま担う。
 *   $('.js-accordion-title').on('click', function () {
 *       $(this).next().slideToggle(200);
 *       $(this).toggleClass('open', 200);
 *   });
 * 「見出し要素 + その直後の兄弟要素」という構造を守っているため、JSの改修は不要。
 *
 * 既存CSSと衝突させないため、クラス名は n- プレフィックスで名前空間を分けている。
 */

/* 治療ページの本文カラムいっぱいに広げ、直下の注記や他セクションと左端を揃える
   （トップページの .faq-list は max-width:1000px で中央寄せだが、あれは
   濃紺背景の .box の中に置かれる前提のため、ここでは踏襲しない） */
.n-faq {
	width: 100%;
}

.n-faq__cat:not(:last-child) {
	margin-bottom: 1.25rem;
}

/* ------------------------------------------------ 第1階層：カテゴリ見出し */

.n-faq__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
	background: #F2F5FA;
	border-left: 3px solid #001B66;
	padding: 1.125rem 3.25rem 1.125rem 1.25rem;
	cursor: pointer;
}

.n-faq__head h3 {
	margin: 0;
	color: #001B66;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.5;
}

.n-faq__price {
	color: #001B66;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.75;
}

/* ＋/− アイコンは既存の設問側と同じ画像を使う */
.n-faq__head:after {
	content: "";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	margin-top: -0.46875rem;
	background: url(../img/icon/icn-plus.png) no-repeat center;
	background-size: cover;
	width: 0.9375rem;
	height: 0.9375rem;
}

.n-faq__head.open:after {
	background-image: url(../img/icon/icn-minus.png);
	height: 0.13375rem;
	margin-top: -0.066875rem;
}

/* 直下の注記（※ 診察内容や体質により…）が最後のカテゴリに接するため間隔を空ける。
   .note 自体は他所でも使われている共通クラスなので、隣接セレクタで限定する */
.n-faq + .note {
	margin-top: 1.25rem;
}

/* -------------------------------------------------- 第2階層の入れ物 */

/* 既存JSの slideToggle 対象。初期状態は閉じる */
.n-faq__body {
	display: none;
	padding: 2rem 1.25rem 0.5rem;
}

/* 既存の .faq-list は max-width:1000px で中央寄せされるが、
   ここではカテゴリの内側いっぱいに広げる */
.n-faq__body .faq-list {
	max-width: none;
	margin: 0;
}

/* ------------------------------------------------------------ SP */

@media only screen and (max-width: 767px) {
	.n-faq__cat:not(:last-child) {
		margin-bottom: 0.9375rem;
	}

	.n-faq__head {
		display: block;
		padding: 0.9375rem 2.75rem 0.9375rem 0.9375rem;
	}

	.n-faq__head h3 {
		font-size: 0.9375rem;
	}

	.n-faq__price {
		display: block;
		margin-top: 0.25rem;
		font-size: 0.75rem;
	}

	.n-faq__head:after {
		right: 0.9375rem;
	}

	.n-faq__body {
		padding: 1.25rem 0.9375rem 0.3125rem;
	}
}

/* ------------------------------------------------------- ページ間の余白差 */

/* 治療ページ（.menu-single 配下）では、直前の .menu-items が持つ
   padding-bottom: 9.375rem がそのまま上の余白になるため何もしなくてよい。
   オンライン診療ページはそのルールの対象外なので、ここだけ余白を補う。 */
.page-guide .n-faq-section {
	margin-top: 9.375rem;
}

@media only screen and (max-width: 767px) {
	.page-guide .n-faq-section {
		margin-top: 5rem;
	}
}