@charset "UTF-8";
/* ******************************************************************

	--faq.css--
	固定ページ「よくある質問」専用スタイル（page-faq.php）

	参考: https://shop.clinicfor.life/pages/guide
	・上部にセクションへのアンカーナビ（アイコン＋テキスト）
	・各セクションはアコーディオン形式のQ&A
	・開閉はチェックボックス＋label（:checked ~ 兄弟要素）のみで実現し、JS不要

****************************************************************** */

.p-faq {
	max-width: 900px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------
	アンカーナビ（アイコン＋テキストで各セクションへジャンプ）
-------------------------------------------------------------------*/
.p-faq-nav {
	margin: 0 0 50px;
}
.p-faq-nav__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media screen and (max-width: 767px) {
	.p-faq-nav__list {
		grid-template-columns: repeat(2, 1fr);
	}
}
.p-faq-nav__link {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: .6em;
	padding: 1.4em .8em;
	height: 100%;
	border: 1px solid #D2CBBE;
	border-radius: 6px;
	background: #fff;
	color: #545b63;
	text-align: center;
	text-decoration: none !important;
	font-size: .85em;
	font-weight: bold;
	transition: box-shadow .2s, border-color .2s;
}
.p-faq-nav__link:hover {
	border-color: #ae2256;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.p-faq-nav__link i {
	color: #ae2256;
	font-size: 1.8em;
}

/* ------------------------------------------------------------------
	セクション
-------------------------------------------------------------------*/
.p-faq-section {
	margin: 0 0 60px;
	scroll-margin-top: 100px;
}
.p-faq-section__title {
	margin: 0 0 20px;
	padding: .5em;
	background: #f7f6f1;
	padding-bottom: .5em;
	font-size: 1.3em;
}

/* ------------------------------------------------------------------
	Q&A（チェックボックスハックによるアコーディオン）
-------------------------------------------------------------------*/
.p-faq-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.p-faq-list__item {
	position: relative;
	border-bottom: 1px solid #D2CBBE;
}
.p-faq-list__item:first-child {
	border-top: 1px solid #D2CBBE;
}
.p-faq-list__check {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.p-faq-list__question {
	display: block;
	position: relative;
	margin: 0;
	padding: 1.1em 2.4em 1.1em 2em;
	color: #333333;
	cursor: pointer;
	font-weight: bold;
	line-height: 1.6;
	transition: opacity .2s;
}
.p-faq-list__question:hover {
	opacity: .75;
}
.p-faq-list__question::before {
	content: "Q";
	position: absolute;
	top: 1.05em;
	left: 0;
	color: #ae2256;
	font-size: 1.05em;
	font-weight: bold;
}
.p-faq-list__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: .6em;
	width: 8px;
	height: 8px;
	border-top: 2px solid #909090;
	border-right: 2px solid #909090;
	transform: translateY(-70%) rotate(135deg);
	transition: transform .2s;
}
.p-faq-list__check:checked ~ .p-faq-list__question::after {
	transform: translateY(-30%) rotate(-45deg);
}
.p-faq-list__answer {
	display: none;
	position: relative;
	margin: 0;
	padding: 0 1.6em 1.5em 2em;
	color: #545b63;
	font-size: .95em;
	line-height: 1.8;
}
.p-faq-list__check:checked ~ .p-faq-list__answer {
	display: block;
}
.p-faq-list__answer::before {
	content: "A";
	position: absolute;
	top: 0;
	left: 0;
	color: #909090;
	font-size: 1.05em;
	font-weight: bold;
}
.p-faq-list__answer p {
	margin: 0;
}