@charset "UTF-8";


/* MV */
.p-mv {
    margin-bottom: calc((100vw / var(--vw-large))*150);
}

.p-faq {
    width: calc((100vw / var(--vw-large))*802);
    margin: 0 auto;

    /* --- 導入セクション --- */
    .p-feature__intro {
        text-align: center;
        width: calc((100vw / var(--vw-large))*804);
        margin: 0 auto calc((100vw / var(--vw-large)) * 50);

        .p-feature__intro__header {
            text-align: left;

            .en {
                font-size: calc((100vw / var(--vw-large))*15);
                font-family: var(--font-en);
                color: var(--color-primary-light);
                font-weight: bold;
                margin-bottom: calc((100vw / var(--vw-large))*10);
            }

            h2 {
                font-size: calc((100vw / var(--vw-large))*30);
                font-weight: 900;
                text-align: left;
            }

            .c-section-title-underline {
                display: block;
                width: calc((100vw / var(--vw-large)) * 158);
                /* 線の長さ */
                height: 3px;
                /* 線の太さ */
                /* 修正箇所: グラデーションで2色を半分ずつ表現 */
                background: linear-gradient(to right, #00A310 50%, #93D500 50%);
                margin-top: calc((100vw / var(--vw-large)) * 10);
            }
        }

        .p-feature__intro-items {
            display: flex;
            justify-content: center;
            gap: calc((100vw / var(--vw-large)) * 53);

            .item {
                width: calc((100vw / var(--vw-large)) * 232);

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }

    /* ナビゲーションのコンテナ */
    .term-anchor-nav {
        display: flex;
        flex-wrap: wrap;
        gap: calc((100vw / var(--vw-large))*5);
        /* ボタン同士の間隔 */
        margin-bottom: calc((100vw / var(--vw-large))*50);
        justify-content: center;
        /* 中央寄せ */
    }

    /* ボタンのスタイル */
    .term-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((100vw / var(--vw-large))*128);
        height: calc((100vw / var(--vw-large))*55);
        background-color: #00A310;
        /* ボタンの色 */
        color: #fff;
        text-decoration: none;
        /* 丸み */
        transition: 0.3s;
        letter-spacing: 0;
    }

    /* ホバー時のスタイル */
    .term-btn:hover {
        background-color: #C6C6C6;
        opacity: 0.8;
    }

    /* 各セクションの余白調整 */
    .term-group {
        margin-bottom: calc((100vw / var(--vw-large))*60);
        padding-top: calc((100vw / var(--vw-large))*20);
        /* スクロール位置の微調整用 */
    }

    .term-title {
        font-size: calc((100vw / var(--vw-large))*24);
        font-weight: 900;
    }

    .c-section-title-underline2 {
        display: block;
        width: calc((100vw / var(--vw-large)) * 124);
        /* 線の長さ */
        height: 3px;
        /* 線の太さ */
        /* 修正箇所: グラデーションで2色を半分ずつ表現 */
        background: linear-gradient(to right, #00A310 50%, #93D500 50%);
        margin: calc((100vw / var(--vw-large)) * 5) auto calc((100vw / var(--vw-large))*40);
    }

    .post-list {
        text-align: left;

        li {
            margin-bottom: calc((100vw / var(--vw-large))*20);
        }

        .title {
            position: relative;
            /*+マークの位置基準とするためrelative指定*/
            background-color: #00A310;
            color: #fff;
            padding: calc((100vw / var(--vw-large))*15) 0 calc((100vw / var(--vw-large))*15) calc((100vw / var(--vw-large))*20);
            cursor: pointer;
            transition: all .5s ease;
            display: flex;

            span {
                font-family: Inter;
                font-size: calc((100vw / var(--vw-large))*29);
                font-style: italic;
                font-weight: 700;
                line-height: normal;
                margin-right: calc((100vw / var(--vw-large))*20);
            }

            h3 {
                width: calc((100vw / var(--vw-large))*700);
            }
        }


        /*アイコンの＋と×*/
        .title::before,
        .title::after {
            position: absolute;
            content: '';
            width: calc((100vw / var(--vw-large))*16);
            height: calc((100vw / var(--vw-large))*2);
            background-color: #fff;

        }

        .title::before {
            top: 48%;
            right: calc((100vw / var(--vw-large))*20);
            transform: rotate(0deg);

        }

        .title::after {
            top: 48%;
            right: calc((100vw / var(--vw-large))*20);
            transform: rotate(90deg);

        }

        /*　closeというクラスがついたら形状変化　*/
        .title.close::before {
            transform: rotate(45deg);
        }

        .title.close::after {
            transform: rotate(-45deg);
        }

        /*アコーディオンで現れるエリア*/
        .box {
            display: none;
            /*はじめは非表示*/
            background-color: #F8F8F8;
            padding: calc((100vw / var(--vw-large))*15) 0 calc((100vw / var(--vw-large))*15) calc((100vw / var(--vw-large))*20);
            line-height: 1.8;

            .flex {
                justify-content: flex-start;
                align-items: flex-start;
            }

            span {
                color: #93D500;
                font-family: Inter;
                font-size: calc((100vw / var(--vw-large))*29);
                font-style: italic;
                font-weight: 700;
                line-height: normal;
                margin-right: calc((100vw / var(--vw-large))*20);
            }

            p {
                width: calc((100vw / var(--vw-large))*700);
            }
        }
    }

}