/* FAQ Component - CSSのみ実装（radioボタンで排他制御） */
.faq-container{width:100%;max-width:100%;margin:0;padding:0}
.faq-item{margin-bottom:15px;background:white;border:1px solid #e0e0e0;border-radius:12px;overflow:hidden}

/* radioボタンを非表示 */
input[type="radio"][name="faq"]{display:none}

/* ラベル（質問部分） */
.faq-label{background:var(--color-primary);color:white;padding:20px 25px;cursor:pointer;font-size:18px;font-weight:500;display:flex;align-items:center;justify-content:space-between;transition:background-color 0.3s ease;user-select:none}
.faq-label:hover{background:#009a96}

/* トグルアイコン */
.faq-toggle-icon{width:28px;height:28px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:bold;transition:transform 0.3s ease}

/* チェックされた時のアイコン回転 */
input[type="radio"]:checked + .faq-label .faq-toggle-icon{transform:rotate(45deg)}

/* 回答部分 */
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;background:white}
.faq-answer-content{padding:0 25px}

/* チェックされた時の回答表示 */
input[type="radio"]:checked ~ .faq-answer{max-height:500px;padding:20px 0}

/* 回答内スタイル */
.faq-answer p{margin-bottom:12px;color:#333;font-size:16px;line-height:1.8}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer strong{color:var(--color-primary);font-weight:600;margin-right:5px}

/* ====================
   FAQページ専用スタイル
   ==================== */

/* ページヘッダー部分 */
.faq-page-header {
    background: var(--color-primary);
    padding: 60px 20px;
    text-align: center;
    color: white;
}

.faq-page-title-ja {
    font-size: var(--fs-sm);
    margin-bottom: 10px;
    opacity: 0.9;
}

.faq-page-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* FAQページ用のコンテナ調整 */
.faq-page-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

/* FAQページ固有の質問スタイル */
.faq-page .faq-label {
    background: var(--color-primary);
    font-size: var(--fs-base);
    padding: 18px 25px;
}

.faq-page .faq-answer {
    background: #f8f8f8;
}

.faq-page .faq-answer-content {
    padding: 20px 25px;
}

/* レスポンシブ */
@media(max-width:768px){
    .faq-label{padding:16px 20px;font-size:16px}
    .faq-toggle-icon{width:24px;height:24px;font-size:18px}
    .faq-answer p{font-size:14px}
    
    /* FAQページ */
    .faq-page-header {
        padding: 40px 20px;
    }
    .faq-page-title {
        font-size: var(--fs-2xl);
    }
    .faq-page-container {
        margin: 30px auto;
        padding: 0 15px;
    }
}

@media(max-width:480px){
    .faq-label{padding:14px 16px;font-size:15px}
    
    /* FAQページ */
    .faq-page-header {
        padding: 30px 15px;
    }
    .faq-page-title {
        font-size: var(--fs-xl);
    }
    .faq-page-container {
        margin: 20px auto;
    }
}