@charset "UTF-8";
/* ==============================================
   外構工事プログレス京都 - faq.css (よくあるご質問ページ)
   PC first / breakpoints: 1200 / 960 / 568
   ※メディアクエリは各セクションの直後に配置しています
============================================== */

/* ==============================================
   導入文＋カテゴリーナビ
============================================== */
.faq_intro_section { padding: 0 0 30px; }
.faq_intro_text { text-align: center; font-size: 18px; letter-spacing: .05em; line-height: 1.75; color: var(--color_text); }

.faq_category_nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 40px; max-width: 1120px; margin-left: auto; margin-right: auto; }
.faq_category_btn {
	display: flex; align-items: center; gap: 8px; position: relative;
	width: 268px; min-height: 83px; background: #fff; border-radius: 6px; box-shadow: 0 0 4px rgba(34,34,34,.12);
	padding: 15px 15px 15px 10px; transition: opacity .25s ease;
}
.faq_category_btn:hover { opacity: .7; }
.faq_category_icon {
	flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.faq_category_text { font-size: 18px; line-height: 1.5; color: var(--color_text); }
.faq_category_arrow {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 8px; height: 4px;
	background: url(../img/faq/icon_chevron.svg) center / contain no-repeat;
}

@media only screen and (max-width: 1200px) {
	.faq_intro_section { padding: 0 0 50px; }
}
@media only screen and (max-width: 568px) {
	.faq_intro_section { padding: 0 0 40px; }
	.faq_intro_text { font-size: 14px; text-align: left; }
	.faq_category_nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
	.faq_category_btn { width: auto; height: 72px; box-sizing: border-box; padding: 12px 15px 12px 8px; gap: 5px; }
	.faq_category_icon { width: 35px; height: 35px; }
	.faq_category_text { font-size: 14px; line-height: 1.4; }
}

/* ==============================================
   カテゴリー別セクション
============================================== */
.faq_category_section { padding: 40px 0; scroll-margin-top: 100px; }
.faq_category_heading {
	text-align: center; font-family: var(--font_serif); font-weight: 600; font-size: 32px; letter-spacing: .1em;
	color: var(--color_text); margin-bottom: 40px; padding-bottom: 24px; position: relative;
}
.faq_category_heading::after {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 169px; height: 10px;
	background: url(../img/faq/heading_divider.svg) center / contain no-repeat;
}

@media only screen and (max-width: 960px) {
	.faq_category_heading { font-size: 26px; }
}
@media only screen and (max-width: 568px) {
	.faq_category_section { padding: 24px 0; scroll-margin-top: 80px; }
	.faq_category_heading { font-size: 20px; margin-bottom: 24px; padding-bottom: 16px; }
	.faq_category_heading::after { width: 110px; }
}