@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}

.tit {
    background: linear-gradient(180deg, #F9F9F9 0%, rgba(249, 249, 249, 0.70) 100%);
    width: 100%;
    height: calc((100vw / var(--vw-large))*420);
    align-items: center;
    margin-bottom: calc((100vw / var(--vw-large))*100);

    @media screen and (max-width: 768px) {
        height: calc((100vw / var(--vw-small))*250);
        margin-bottom: calc((100vw / var(--vw-small))*26);
    }

    .wrap {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto;
        text-align: left;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*350);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*110);
            font-style: italic;
            font-weight: 500;
            line-height: 140%;
            /* 154px */
            text-align: left;

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*50);
                margin-bottom: calc((100vw / var(--vw-small))*15);
            }
        }

        span {
            font-size: calc((100vw / var(--vw-large))*16);
            font-weight: 400;
            line-height: 0%;
            /* 0 */
            letter-spacing: calc((100vw / var(--vw-large))*4);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*16);
                letter-spacing: calc((100vw / var(--vw-small))*4);
            }
        }
    }
}

/* FAQ */

.faq {
    position: relative;

    @media screen and (max-width: 768px) {}

    .inner {
        position: relative;
        z-index: 1;
        width: calc((100vw / var(--vw-large))*955);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: 100%;
        }

        /*tabの形状*/
        .tab {
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: center;

            @media screen and (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*300);
                gap: calc((100vw / var(--vw-small))*16) 0;
            }

            li {
                border-left: #524D38 calc((100vw / var(--vw-large))*0.5) solid;
                padding: 0 calc((100vw / var(--vw-large))*30);

                @media screen and (max-width: 768px) {
                    border-left: #524D38 calc((100vw / var(--vw-small))*0.5) solid;
                    width: initial;
                    height: initial;
                    padding: 0 calc((100vw / var(--vw-small))*15);
                }

                a {
                    width: 100%;
                    display: block;
                    color: #524D38;
                    text-decoration: none;
                    line-height: normal;
                }

                &:last-child {
                    border-right: #524D38 calc((100vw / var(--vw-large))*0.5) solid;

                    @media screen and (max-width: 768px) {
                        border-right: #524D38 calc((100vw / var(--vw-small))*0.5) solid;
                    }
                }

                &:nth-child(2) {
                    @media screen and (max-width: 768px) {
                        border-right: #524D38 calc((100vw / var(--vw-small))*0.5) solid;
                    }
                }
            }

            /*liにactiveクラスがついた時の形状*/

            li.active a {
                font-weight: 700;
            }
        }

        /* 初期は非表示だが要素自体の高さを確保しないパターン */
        .area {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity .35s ease, max-height .35s ease;
            /* パディングを無効にしている場合は調整 */

            .
        }

        /* is-active で即表示 → トランジションでフェードイン */
        .area.is-active {
            opacity: 1;
            max-height: 1000px;
            /* 十分に大きな値（実コンテンツの高さより大きく） */
            padding: calc((100vw / var(--vw-large))*70) 0 calc((100vw / var(--vw-large))*60);
            /* 元のパディングを戻す */

            @media screen and (max-width: 768px) {
                width: 100%;
                padding: calc((100vw / var(--vw-small))*40) 0 calc((100vw / var(--vw-small))*68);
            }
        }

        .accordion-area {
            margin-bottom: calc((100vw / var(--vw-large))*30);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*30);
            }

            .title {
                position: relative;
                /*+マークの位置基準とするためrelative指定*/
                cursor: pointer;
                transition: all .5s ease;
                padding: calc((100vw / var(--vw-large))*15);
                background-color: #4B9F9F;
                text-align: left;
                justify-content: flex-start;
                align-items: flex-start;

                @media screen and (max-width: 768px) {
                    padding: calc((100vw / var(--vw-small))*15);
                    font-size: calc((100vw / var(--vw-small))*16);
                    line-height: normal;
                }

                span {
                    margin-right: calc((100vw / var(--vw-large))*10);
                    font-weight: 700;

                    @media screen and (max-width: 768px) {
                        margin-right: calc((100vw / var(--vw-small))*10);
                    }
                }

                h3 {
                    @media screen and (max-width: 768px) {
                        width: calc((100vw / var(--vw-small))*326);
                    }
                }

                &::after,
                &::before {
                    position: absolute;
                    content: '';
                    width: calc((100vw / var(--vw-large))*15);
                    height: calc((100vw / var(--vw-large))*2);
                    background-color: #fff;

                    @media screen and (max-width: 768px) {
                        width: calc((100vw / var(--vw-small))*15);
                        height: calc((100vw / var(--vw-small))*2);
                    }
                }

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

                    @media screen and (max-width: 768px) {
                        right: calc((100vw / var(--vw-small))*15);
                        top: calc((100vw / var(--vw-small))*26);

                    }
                }

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

                    @media screen and (max-width: 768px) {
                        right: calc((100vw / var(--vw-small))*15);
                        top: calc((100vw / var(--vw-small))*26);
                    }
                }
            }

            /*　closeというクラスがついたら形状変化　*/

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

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

            /*アコーディオンで現れるエリア*/
            .box {
                display: none;
                /*はじめは非表示*/
                border-bottom: calc((100vw / var(--vw-large))*1) #C1C1C1 solid;
                padding: calc((100vw / var(--vw-large))*15);

                @media screen and (max-width: 768px) {
                    border-bottom: calc((100vw / var(--vw-small))*1) #C1C1C1 solid;
                    padding: calc((100vw / var(--vw-small))*15);
                }

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

                    span {
                        font-size: calc((100vw / var(--vw-large))*16);
                        line-height: 162.5%;
                        margin-right: calc((100vw / var(--vw-large))*10);

                        @media screen and (max-width: 768px) {
                            font-size: calc((100vw / var(--vw-small))*16);
                            margin-right: calc((100vw / var(--vw-small))*10);
                        }
                    }

                    p {
                        text-align: left;
                        font-size: calc((100vw / var(--vw-large))*16);
                        line-height: 162.5%;
                        letter-spacing: calc((100vw / var(--vw-large))*0.64);

                        @media screen and (max-width: 768px) {
                            font-size: calc((100vw / var(--vw-small))*16);
                            letter-spacing: calc((100vw / var(--vw-small))*0.64);
                        }
                    }
                }
            }
        }
    }
}