.faq {
    color: var(--white);
}


#faq {
    margin-bottom: 1em;

}

#faq .text {

    background: none;
}

#faq h2 {
    text-shadow: 3px 2px 3px var(--green)
}

.faq input[type="checkbox"] {
    display: none;
}

.faq label {
    position: relative;
    z-index: 2;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid whitesmoke;
    border-radius: 15px 0 15px 0;

    margin-top: 1em;
    padding: 0.5em 2em;
    transition: 1s;
    font-size: 0.8em;

}

.faq input[type="checkbox"]:checked+label {
    box-shadow: 0 1px 15px #ffffff40;
    background: rgb(242, 246, 247, 0.2);
    /*background: green;*/
    margin-left: 0;
}



/*For PC*/
@media (min-aspect-ratio: 1/1) {
    .faq label:hover {
        /*background: green;*/
        box-shadow: 0 1px 15px #ffffff40;
        background: rgb(242, 246, 247, 0.2);
        margin-left: 1em;

    }

    .faq label:hover .faq-heading {
        font-weight: 600;
        color: #29bf11;
    }
}

.faq-heading {

    color: var(--white);
}

.faq input[type="checkbox"]:checked+label>.faq-heading {
    color: #29bf11;
    font-weight: 600;
}

.faq input[type="checkbox"]:checked+label .faq-text {
    height: auto;
    max-height: 1000px;

    transition: 0.5s;

}

.faq input[type="checkbox"]:checked+label .outLinks {
    position: relative;
    bottom: 0;
    display: flex;
    max-height: 200px;
}

.faq .outLinks {
    display: none;
    max-height: 0;
    overflow:hidden;
}

.faq-text {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;

}

.faq-text ol,
.faq-text ul {
    margin-left: 1em;
    list-style: inside;
    color: var(--blue);
    text-shadow: none;
}

.faq-text ol {
    margin-left: 2em;
    list-style: auto;
    color: #03e9f4;
}