@charset "UTF-8";

/* ==========================================================================
   FAQ (よくある質問) 
   ========================================================================== */
        #faq-section {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
            font-family: 'Zen Maru Gothic', sans-serif;
        }

        /* メインタイトル */
        .faq-main-title {
            text-align: center;
            color: #4097B6;
            font-family: 'RocknRoll One', sans-serif;
            font-size: clamp(22px, 4vw + 11px, 60px);
            font-weight: normal;
            margin-top: clamp(20px, 8vw, 40px);
            margin-bottom: clamp(10px, 8vw, 20px);
            letter-spacing: 0.05em;
        }

        .strip-frame {
            max-width: 1000px;
            width: 100%;
        }

        /* FAQリスト */
        .faq-container {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .faq-item {
            background-color: #fcffff;
            border: 2px solid #E2F1F0;
            border-radius: 25px;
            padding: 30px 40px;
            box-shadow: 0 4px 10px rgba(64, 151, 182, 0.05);
            overflow: hidden;
        }

        /* 質問エリア */
        .faq-question {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }

        /* 葉の画像アイコン */
        .leaf-img-icon {
            width: 42px;
            height: 42px;
            object-fit: contain;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .strip-frame h3 {
            font-size: clamp(14px, 0.46rem + 1.77vw, 30px);
            color: #29313D;
            margin: 0;
            line-height: 1.6;
            font-weight: 500;
            flex-grow: 1;
            word-break: break-all; 
        }

        /* 回答エリア */
        .faq-answer {
            border-top: 5px dotted #FFCDCD;
            padding-top: 15px;
        }

        .a-content p {
            font-size: clamp(14px, 0.72rem + 0.66vw, 20px);
            line-height: 1.8;
            color: #29313D;
            margin: 0;
            padding-left: 0px;
        }

        .cta-btn {
            justify-content: center;
            background: #BCDBD9;
            box-shadow: 0 3px 0 #9cbdbb;
        }


        /* --- スマートフォン表示 (767px以下) の調整 --- */
        @media screen and (max-width: 767px) {
            .faq-item {
                padding: 15px 20px;
                border-radius: 20px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

            .faq-item:active {
                background-color: #f9fdfd;
            }

            .leaf-img-icon {
                width: 34px;
                height: 34px;
                margin-right: 12px;
            }

            /* アコーディオンの状態管理用：初期状態は回答を隠す */
            .faq-answer {
                display: none; /* JSで制御 */
                padding-top: 15px;
                border-top: 4px dotted #FFCDCD;
            }

            .faq-question {
                margin-bottom: 0; 
                padding-right: 30px; 
            }

            .faq-item.is-open .faq-question {
                margin-bottom: 15px;
            }

            .a-content p {
                padding-left: 0px; 
            }

            /* 開閉アイコン (+/-) */
            .faq-question::after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                width: 14px;
                height: 2px;
                background-color: #4097B6;
                transform: translateY(-50%);
                transition: transform 0.3s;
            }
            .faq-question::before {
                content: '';
                position: absolute;
                right: 5px;
                top: 50%;
                width: 2px;
                height: 14px;
                background-color: #4097B6;
                transform: translate(-50%, -50%);
                transition: opacity 0.3s;
            }

            .faq-item.is-open .faq-question::before {
                opacity: 0; /* 開いている時はマイナスのみ */
            }

        }

        @media screen and (max-width: 430px) {
            #faq-section {
                padding: 0;
            }
            .strip-frame {
                width: 100%;
            }
        }