/* FAQ Section */
.faq-section {
    max-width: 858px; /* Figma 9771:19 dimensions.width */
    /* PC版: Act for Nature (y:4816, h:1468 -> end:6284), FAQ (y:6445) -> margin-top: 161px */
    /* PC版: FAQ (y:6445, h:1345 -> end:7790), CTA (y:8000) -> margin-bottom: 210px */
    margin: 161px auto 210px; 
    padding: 0; /* max-width と margin:auto で中央揃え */
    box-sizing: border-box;
}

.faq-title-area {
    text-align: center;
    margin-bottom: 80px; /* Figma 17:17482 (title group) と 17:17492 (Q&A list) のy差 (190) - title group height (110) */
}

.faq-title-en {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 56px;
    color: #1B1464;
    letter-spacing: -2.8px;
    line-height: 51px;
}

.faq-title-jp {
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 18px;
    color: #1B1464;
    line-height: 51px;
    margin-top: 8px; /* Figmaのテキスト間の見た目から調整 */
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Figma Frame 10 (17:17492) の gap */
}

.faq-item {
    border: 2px solid #1B1464; /* Figma Frame 8 (17:17488) strokes */
    border-radius: 40px; /* Figma Frame 8 (17:17488) borderRadius */
    padding: 30px 40px; /* Figma Frame 8 (17:17488) padding (上下30.5, 左右41だがキリよく) */
    cursor: pointer;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 11.5px; /* Figma Frame 9 (17:17489) の Q とテキスト間の gap */
    cursor: pointer; /* 開閉の示唆 */
}

.faq-icon {
    display: inline-block;
    font-family: "RiiCookieTest", cursive;
    font-weight: 400;
    font-size: 32px;
    color: #1B1464;
    letter-spacing: -1.6px;
    line-height: 51px;
}

.faq-question-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #1B1464;
    line-height: 28px;
}

.faq-answer {
    background-color: #FFFBE6; /* Figma Rectangle 22 (17:17508) fills */
    border-radius: 24px; /* Figma Rectangle 22 (17:17508) borderRadius */
    /* 回答エリア(17:17508) y:106. 質問文(17:17487) y:42, h:28 -> end:70. margin-top: 106-70 = 36px */
    /* 回答エリア内パディング: Aアイコン(17:17509) y:128, x:77. 回答エリア(17:17508) y:106, x:40. padding-top: 128-106=22. padding-left: 77-40=37 */
    /* 回答本文(17:17511) y:196, h:55 -> end:251. 回答エリア(17:17508) h:189. padding-bottom: (106+189)-251 = 44 (これはおかしいので、テキストのbottomとエリアのbottomから) */
    /* 回答エリア(17:17508) bottom: 106+189 = 295. 回答本文(17:17511) bottom: 196+55 = 251. padding-bottom: 295-251 = 44px */
    margin-top: 0px;
    /* 回答本文(17:17511) right: 77+701 = 778. 回答エリア(17:17508) right: 40+778 = 818. padding-right: 818-778 = 40px */
    padding: 0px 37px 0px;
    transition: height,margin-top,padding-bottom,padding-top 0.3s ease-in-out;
    overflow: hidden;
}

.faq-answer.active {
    display: block;
    margin-top: 24.5px; 
    padding-top: 22px;
    padding-bottom: 44px;
}

.faq-answer-content {
    display: flex;
    align-items: flex-start;
    /* Aアイコン(17:17509) x:77, w:23 -> end:100. 回答見出し(17:17510) x:125. gap: 125-100 = 25px */
    gap: 25px; 
    transition: height 0.3s ease-in-out;
}

.faq-answer-text-group {
    display: flex;
    flex-direction: column;
}

.faq-answer-heading {
    display: flex;
    align-items: center;
    gap: 11.5px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: #1B1464;
    line-height: 28px;
    /* 回答見出し(17:17510) y:139.5, h:28 -> end:167.5. 回答本文(17:17511) y:196. margin-bottom: 196-167.5 = 28.5px -> 28px */
    margin-bottom: 28px; 
}

.faq-answer-body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1B1464;
    line-height: 28px;
}

/* SP版スタイル */
@media (max-width: 900px) {
    .faq-section {
        /* SP版: Act for Nature SP (y:7381, h:1507 -> end:8888), FAQ SP (y:9018) -> margin-top: 130px */
        /* SP版: FAQ SP (y:9018, h:1290 -> end:10308), CTA SP (y:10468) -> margin-bottom: 160px */
        margin: 130px auto 142px; 
        padding: 0 30px; 
        max-width: 700px; /* SP版Figma 9771:20 dimensions.width */
        box-sizing: content-box;
    }

    .faq-title-area {
        /* SP版タイトルグループ(27:16841) y:0, h:110. Q&Aリスト(27:16844) y:160. margin-bottom: 160-110 = 50px */
        margin-bottom: 50px; 
    }

    .faq-title-en {
        font-size: 56px; /* SP版Figma 27:16842 fontSize (PCと同じ) */
    }

    .faq-title-jp {
        font-size: 18px; /* SP版Figma 27:16843 fontSize (PCと同じ) */
        margin-top: 8px; /* PC版と同じ */
    }

    .faq-list {
        gap: 24px; /* SP版Figma 27:16844 gap (PCと同じ) */
    }

    .faq-item {
        /* SP版Figma 27:16845 (Q&A1) padding: 31px 17px 17px */
        /* SP版Figma 27:16852 (Q&A2) padding: 30px 32px */
        /* Q&A1の回答表示時とそれ以外でpaddingが異なるため、個別に設定するか、共通の値を採用 */
        padding: 30px 18px; /* 共通値を採用 */
        border-radius: 40px; /* SP版Figma 27:16845 borderRadius (PCと同じ) */
    }

    .faq-question {
        gap: 24px; /* SP版Qアイコンとテキスト間のgap (仮、Figmaから読み取りにくいので調整) */
        padding: 0 14px;
    }

    .faq-icon {
        font-size: 32px; /* SP版Figma 27:16853 fontSize (PCと同じ) */
        line-height: 1.59em;
    }

    .faq-question-text {
        font-size: 20px; /* SP版Figma 27:16854 fontSize */
        line-height: 1.4em; /* SP版Figma 27:16854 lineHeight */
    }

    .faq-answer {
        /* SP版Figma 27:16871 padding: 17px 32px 28px */
        padding: 0 32px 0; /* SP版回答エリアパディング (仮、Figmaの値を参考に調整) */
        margin-top: 0px;
        border-radius: 24px; /* SP版Figma 27:16871 borderRadius (PCと同じ) */
    }
    .faq-answer.active{
        padding: 17px 32px 28px;
        margin-top: 24px; /* SP版質問との間隔 (仮、PC版と同じ値を一旦適用) */

    }
    
    .faq-answer-content {
        gap: 11.5px; /* SP版Aアイコンとテキストグループの間 (仮) */
    }

    .faq-answer-heading{
        margin-bottom: 7px;
    }

    .faq-answer-heading-text {
        font-size: 20px; /* SP版回答見出しフォントサイズ (質問文に合わせる) */
        line-height: 1.4em; /* SP版回答見出し行間 (質問文に合わせる) */
    }

    .faq-answer-body {
        font-size: 16px; /* SP版回答本文フォントサイズ (仮) */
        line-height: 1.6; /* SP版回答本文行間 (仮) */
    }
}