/**

 * よくある質問（template-parts/faq.php）用 CSS

 *

 * パーツ側から読み込む。#faq でページ側の既存指定より優先する。

 */



#faq,

#faq * {

	box-sizing: border-box;

}

#faq.block {

	padding: 76px 0;

	font-family: var(--body, 'Zen Kaku Gothic New', sans-serif);

}



@media (max-width: 560px) {

	#faq.block {

		padding: 56px 0;

	}

}



@media (min-width: 761px) {

	#faq.block {

		padding: 82px 0;

	}

}

#faq .wrap {

	max-width: 1140px;

	margin: 0 auto;

	padding: 0 24px;

}

#faq .sec-head {

	margin-bottom: 32px;

	max-width: none;

}

#faq .eyebrow {

	font-size: 12.5px;

	letter-spacing: 0.12em;

	color: #e8770f;

	font-weight: 700;

	display: block;

	margin-bottom: 8px;

}

#faq .sec-head h2 {

	text-wrap: balance;

	font-size: clamp(23px, 3.2vw, 32px);

	font-weight: 900;

	margin: 0 0 10px;

	line-height: 1.55;

	text-align: left;

}



@media (max-width: 560px) {

	#faq .sec-head h2 {

		font-size: 21px;

	}

}

#faq .faq-list {

	display: grid;

	gap: 12px;

	max-width: none;

	width: 100%;

}

#faq .faq {

	width: 100%;

	background: #fff;

	border: 1px solid var(--line, #ece8e1);

	border-radius: 16px;

	box-shadow: var(--shadow-s, 0 4px 16px rgba(23, 24, 29, 0.06));

}

#faq .faq summary {

	list-style: none;

	cursor: pointer;

	padding: 22px 60px 22px 24px;

	font-size: 17px;

	font-weight: 900;

	position: relative;

	line-height: 1.7;

}



@media (max-width: 560px) {

	#faq .faq summary {

		font-size: 15.5px;

		padding: 20px 54px 20px 18px;

	}

}

#faq .faq summary::-webkit-details-marker {

	display: none;

}

#faq .faq summary::before {

	content: 'Q';

	font-family: var(--num, 'Outfit', sans-serif);

	color: #e8770f;

	margin-right: 12px;

}

#faq .faq summary::after {

	content: '＋';

	position: absolute;

	right: 22px;

	top: 50%;

	transform: translateY(-50%);

	width: 32px;

	height: 32px;

	border-radius: 50%;

	background: var(--tint, #fff6eb);

	color: #e8770f;

	font-weight: 900;

	font-size: 18px;

	display: flex;

	align-items: center;

	justify-content: center;

}

#faq .faq[open] summary::after {

	content: '−';

}

#faq .faq summary:hover {

	color: #c96a00;

}

#faq .fa {

	padding: 0 24px 24px 24px;

}



@media (max-width: 560px) {

	#faq .fa {

		padding: 0 18px 20px;

	}

}

#faq .fa p {

	margin: 0;

	font-size: 15.5px;

	color: #454b63;

	line-height: 1.9;

	padding-right: 24px;

}



@media (max-width: 560px) {

	#faq .fa p {

		padding-right: 0;

	}

}

#faq .fa p b {

	color: var(--ink, #17181d);

}

#faq .fa p::before {

	content: 'A';

	font-family: var(--num, 'Outfit', sans-serif);

	font-weight: 700;

	color: #17994f;

	margin-right: 12px;

}