#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;background:#fff;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
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;}
.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;}
.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;margin-left: 1.5em;}
.answer {padding:15px;line-height:1.6;}

.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);
}
details[open] .question::after{content: '';}

details[open] .question::marker{content: '';}
details[open] .question::before{content: '+';transition: all 0.3s ease;transform: rotate(180deg);position: absolute;left:-1em;}
details[open] details[open] .question::before{content: '－';transform: rotate(0);}

/* レスポンシブ対応 */
@media (max-width:768px) {
	#faq {padding:10px;}
	#faq h3 {font-size:16px;}
	summary {font-size:14px;}
	.pickup{
	.pager {grid-template-columns:repeat(5,37px);}}
}
