#faq {margin:0 auto;padding:20px;}
#faq h3 {background:#f8f8f8;padding:15px;margin:20px 0 10px;border-left:5px solid #4a90e2;font-size:18px;}


details {margin-bottom:10px;}
summary {padding:15px;cursor:pointer;position:relative;font-size:16px;color:#444;transition:all 0.3s ease;}
summary:hover {background:#f0f7ff;}
summary::-webkit-details-marker {display:none;}
/*summary::after {content:'+';position:absolute;right:20px;transition:transform 0.3s ease;}
details[open] summary::after {content:'-';}*/
.answer {padding:15px;border-top:1px solid #eee;color:#666;line-height:1.6;}
.category {margin-bottom:20px;border:none;}
.category-title {background:#4f5966;color:white;padding:15px;font-weight:bold;border-radius:5px;}
summary.category-title:hover {color:#333;}
/*.category-content {padding:10px 20px;background:#d2b48c4f;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}*/

.category-content {
    padding: 10px 20px;
    background: #d2b48c4f;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    opacity: 0;
}
details[open] .category-content {
    max-height: 1000px; /* コンテンツの最大高さを設定 */
    opacity: 1;
    padding: 10px 20px;
}

summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    transition: all 0.3s ease;
}

details[open] summary::after {
    content: '－';
    transform: rotate(180deg);
}


.qa-item {margin:10px 0;background:#fff;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.question {padding:12px;background:#f8f8f8;}
.answer {padding:15px;line-height:1.6;}

/* アニメーション効果 
details[open] .answer {animation:fadeIn 0.5s ease-in-out;}

@keyframes fadeIn {from { opacity:0; transform:translateY(-10px); }to { opacity:1; transform:translateY(0); }}*/

/* レスポンシブ対応 */
@media (max-width:768px) {
	#faq {padding:10px;}
	#faq h3 {font-size:16px;}
	summary {font-size:14px;}
}