/* 全体コンテナ */
html {
scroll-behavior: smooth;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
line-height: 1.6;
}
/* ヘッダービジュアル・入りボックス */
.faq-header-box {
background: #fdfbf7;
border: 2px solid #e0be68; /* 令和地所様のブランドゴールド/イエロー系 */
border-radius: 8px;
padding: 24px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.faq-header-title {
font-size: 1.4rem;
font-weight: bold;
color: #2b2b2b;
margin-top: 0;
margin-bottom: 12px;
border-bottom: 2px solid #e0be68;
padding-bottom: 8px;
}
.faq-header-text {
font-size: 0.95rem;
margin: 0;
color: #555;
}
/* クイック目次ナビゲーション */
.faq-nav-box {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 18px 20px;
margin-bottom: 35px;
}
.faq-nav-title {
font-size: 1.05rem;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
color: #444;
}
.faq-nav-list {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.faq-nav-list li a {
display: inline-block;
background: #f4f4f4;
color: #333;
text-decoration: none;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
transition: background 0.2s;
}
.faq-nav-list li a:hover {
background: #e0be68;
color: #fff;
}
/* セクション見出し */
.faq-sec-title {
font-size: 1.25rem;
font-weight: bold;
color: #2c3e50;
border-left: 5px solid #e0be68;
padding-left: 12px;
margin-top: 40px;
margin-bottom: 20px;
scroll-margin-top: 80px;
}
/* アコーディオンパーツ (details / summary) */
.faq-item {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.faq-summary {
list-style: none;
padding: 16px 45px 16px 18px;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
position: relative;
background: #fff;
transition: background 0.2s;
}
.faq-summary::-webkit-details-marker {
display: none; /* デフォルトの矢印を非表示 */
}
.faq-summary:hover {
background: #fcfbf7;
}
.faq-q-icon {
color: #d97706; /* Qマークの色 */
font-size: 1.15rem;
margin-right: 8px;
}
/* 開閉プラス・マイナスアイコン */
.faq-summary::after {
content: "+";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 1.3rem;
color: #888;
font-weight: normal;
}
details[open] .faq-summary::after {
content: "−";
}
/* アコーディオンの中身 */
.faq-content {
padding: 16px 20px 20px 20px;
border-top: 1px dashed #e2e8f0;
background: #fafafa;
font-size: 0.95rem;
}
.faq-a-box {
display: flex;
gap: 10px;
margin-bottom: 12px;
}
.faq-a-icon {
color: #2563eb; /* Aマークの色 */
font-weight: bold;
font-size: 1.15rem;
}
.faq-a-text {
flex: 1;
margin: 0;
}
/* 詳細記事へのリンクボタン */
.faq-detail-link {
display: inline-block;
margin-top: 10px;
padding: 8px 18px;
background: #2563eb;
color: #fff !important;
text-decoration: none;
border-radius: 5px;
font-size: 0.85rem;
font-weight: bold;
transition: opacity 0.2s;
}
.faq-detail-link:hover {
opacity: 0.85;
}
/* お問い合わせ・CTAエリア */
.faq-cta-box {
background: #2c3e50;
color: #fff;
border-radius: 8px;
padding: 30px 20px;
text-align: center;
margin-top: 50px;
}
.faq-cta-title {
font-size: 1.25rem;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
color: #cbd5e1;
}
.faq-cta-desc {
font-size: 0.9rem;
margin-bottom: 20px;
color: #cbd5e1;
}
.faq-cta-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.faq-btn-main {
background: #e0be68;
color: #2c3e50 !important;
padding: 12px 28px;
border-radius: 25px;
font-weight: bold;
text-decoration: none;
font-size: 0.95rem;
}
.faq-btn-line {
background: #06c755;
color: #fff !important;
padding: 12px 28px;
border-radius: 25px;
font-weight: bold;
text-decoration: none;
font-size: 0.95rem;
}
