@charset "utf-8";
/**
 * FAQセクション共通スタイル（faq.css）
 *
 * 概要: 全サービスページで共有するFAQ（question-sec）のスタイル
 * 仕様: カラーはfoundation.cssのCSS変数で制御
 *       h2装飾はページ固有（pages/*.css）で定義
 * 制限: h2の装飾スタイル（円形/ブラケット）はページ固有のため含まない
 */


/* === セクション基本 ===
-----------------------------------------------------------*/
.question-sec { padding-bottom: 0; }
.question-sec-inner { position: relative; padding-bottom: 80px; }
.question-sec .inner { position: relative; z-index: 2; }


/* === 背景グラデーション ===
   nurture/meo で使用。manufacturing では --faq-bg-gradient-color: transparent で非表示化
-----------------------------------------------------------*/
.bg-gradients {
	bottom: -12rem; height: 64rem; left: -24rem;
	width: 64rem; position: absolute;
}
.bg-gradients-inner {
	background: radial-gradient(closest-side, var(--faq-bg-gradient-color), transparent);
	content: ""; display: block; height: 100%; opacity: .4; width: 100%;
}


/* === スクロールエリア ===
-----------------------------------------------------------*/
.question-area-inner { height: 600px; overflow-y: scroll; padding: 0 48px 24px; }
.question-sec .question-area-inner::-webkit-scrollbar { display: none; }
.question-sec .simplebar-scrollbar::before {
	background: var(--faq-scrollbar-color);
	border-radius: 0; width: 12px;
}
.question-sec .simplebar-scrollbar.simplebar-visible::before { opacity: 1; }
.question-sec .simplebar-track { background-color: #fff; width: 16px !important; }


/* === QAボックス ===
-----------------------------------------------------------*/
.qa-box-wrap {
	box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.qa-box {
	display: block; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
	background: #fff; padding: 24px 40px; transition: 0.5s; position: relative;
}

/* --- 質問ボックス --- */
.question-box {
	margin-top: 64px; font-weight: 900;
	border: 2px solid var(--faq-border-color);
	cursor: pointer;
	transition: box-shadow var(--base-duration) var(--base-easing);
	position: relative;
}
.question-box:before {
	content: ""; position: absolute; left: 16px; top: 46%;
	width: 8px; height: 8px; transition: 0.4s;
	border-top: 2px solid var(--faq-arrow-color);
	border-right: 2px solid var(--faq-arrow-color);
	transform: rotate(45deg) translateX(-50%);
}

/* --- QUESTIONラベル --- */
.question-box:after {
	content: 'QUESTION';
	font-family: 'Impact', sans-serif; position: absolute;
	padding: 8px 16px 2px; top: -28px; left: -2px; z-index: 2;
	color: var(--faq-label-color); letter-spacing: 1.2px;
	line-height: 1; border-top-left-radius: 8px; border-top-right-radius: 8px;
	background-color: var(--faq-label-bg);
}

/* --- 開閉状態 --- */
.qa-box-wrap[open] .question-box:before { transform: rotate(135deg) translateX(-50%); }
.qa-box-wrap[open] .question-box {
	border-bottom: none; padding: 16px 40px;
	border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;
}
.qa-box-wrap[open] .answer-box {
	padding-top: 4px;
	border-bottom: 2px solid var(--faq-border-color);
	border-left: 2px solid var(--faq-border-color);
	border-right: 2px solid var(--faq-border-color);
	animation: answerIn var(--base-duration) var(--base-easing);
}

/* --- 回答ボックス --- */
.answer-box p { font-size: 90%; }

@keyframes answerIn {
	0% { opacity: 0; transform: translateY(-12px); }
	100% { opacity: 1; transform: none; }
}


/* === ホバー ===
-----------------------------------------------------------*/
@media (hover: hover) and (pointer: fine) {
	.question-box:hover {
		box-shadow: 0 0 40px var(--faq-hover-shadow-color) inset;
		cursor: pointer;
	}
}


/* === レスポンシブ ===
-----------------------------------------------------------*/
@media (max-width: 960px) {
	.bg-gradients { bottom: -6rem; height: 32rem; left: -12rem; width: 32rem; }
	.question-area-inner { margin: 0 !important; padding: 0 24px 24px; }
	.question-box { margin-top: 40px; }
}

@media (max-width: 767px) {
	.question-sec p.intro .spbr { display: block; }
}

@media (max-width: 599px) {
	.question-sec h2 { margin-bottom: 40px; }
}