details{
    interpolate-size: allow-keywords;

    &::details-content {
        height: 0;
        overflow: clip;
        opacity: 0;
        transition: height 0.8s ease, opacity 0.8s ease,content-visibility 0.8s ease allow-discrete;
    }
    &[open]::details-content {
        height: auto;
        height: calc-size(auto, size);
        opacity: 1;
    }

    summary{
        cursor: pointer;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 1rem;
        padding: 1.5rem 3rem;
        
        &::-webkit-details-marker {display: none;}

        &::after{content: "＋";}
        [open] &::after {content: "ー";}
    }
}
details > :not(summary) {
    padding: 1.5rem 3rem;
}

.qa_list{
    
    &::details-content {
        display: flex;
        column-gap: 0.8rem;
        background-color: var(--color-wh);

        &::before{content:'A';}
    }

    summary{
        grid-template-columns: auto 1fr auto;
        
        &::before{
            content:'Q';
        }
    }
}

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