@charset "UTF-8";

.faq {
    padding: 0 0 100px;
    @media only screen and (max-width: 767px) {
        padding: 0 0 60px;
    }
    .faq__cat {
        display: flex;
        flex-wrap: wrap;
        max-width: 750px;
        margin: 0 auto;
        @media only screen and (max-width: 767px) {
            gap: 15px 0;
        }
        a {
            width: 25%;
            color: var(--base-color);
            font-size: 14px;
            font-weight: bold;
            display: block;
            text-align: center;
            padding: 3px 10px;
            border-right: 1px solid #ccc;
            @media only screen and (max-width: 767px) {
                width: 50%;
            }
            &:first-child {
                border-left: 1px solid #ccc;
            }
            @media only screen and (max-width: 767px) {
                &:nth-child(2n-1) {
                    border-left: 1px solid #ccc;
                }
            }
        }
    }
    .faq__list {
        max-width: 750px;
        margin: 0 auto;
    }
    .faq__item {
        padding-top: 60px;
        @media only screen and (max-width: 767px) {
            padding-top: 45px;
        }
    }
    .faq__ttl {
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin-bottom: 20px;
        @media only screen and (max-width: 767px) {
            margin-bottom: 15px;
        }
    }
    ul {
        li {
            border-bottom: 1px solid #ccc;
            &:first-child {
                border-top: 1px solid #ccc;
            }
            .q {
                cursor: pointer;
                padding: 25px 0;
                @media only screen and (max-width: 767px) {
                    padding: 20px 0;
                }
                p {
                    font-size: 14px;
                    letter-spacing: 0.12em;
                    position: relative;
                    line-height: 1.3;
                    padding: 0 40px 0 30px;
                    &:before {
                        content: "Q.";
                        font-size: 20px;
                        font-family: var(--font--nimbus);
                        font-weight: 500;
                        color: var(--color-primary);
                        position: absolute;
                        left: 0;
                        top: -2px;
                        letter-spacing: 0;
                        line-height: 1;
                    }
                    &:after {
                        content: "";
                        background: url(ico_plus.svg) no-repeat left top / 100%;
                        width: 10px;
                        height: 10px;
                        position: absolute;
                        right: 20px;
                        top: 3px;
                        transition: all 0.4s;
                    }
                }
                &.active {
                    p {
                        &:after {
                            content: "";
                            background: url(ico_minus.svg) no-repeat left center / 100%;
                            width: 10px;
                            height: 10px;
                        }
                    }
                }
            }
            .a {
                display: none;
                p {
                    font-size: 14px;
                    letter-spacing: 0.12em;
                    line-height: 1.8;
                    position: relative;
                    padding: 0 0 25px 30px;
                    &:before {
                        content: "A.";
                        font-size: 20px;
                        font-family: var(--font--nimbus);
                        font-weight: 500;
                        position: absolute;
                        left: 0;
                        top: 2px;
                        letter-spacing: 0;
                        line-height: 1;
                    }
                    @media only screen and (max-width: 750px) {
                        padding: 0 0 20px 30px;
                    }
                    a {
                        color: #1a0dab;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}