.ps_faq{
    --faq-box-bg: transparent;
    --faq-border: 1px solid #E0E0E0;
    --faq-border-radius: 1rem;
    --faq-q-color: #4792F3;
    --faq-q-bg-color: #b2f0ff;
    --faq-a-color: #F25C5C;
    --faq-a-bg-color: #fdedf2;
    --faq-font-size: 1.125rem;
    --faq-qa-size: 2rem;
    --faq-padding-lr: 1.5rem;
    --faq-padding-tb: 1.5rem;
    --faq-open-size: 1rem;
    --faq-open-thick: 3px;
    --faq-open-color: black;
}

.ps_faq__questions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1rem;
}

.ps_faq__questions + .ps_faq__questions{
    margin-top: 40px;
}

.ps_faq__question{
    border-radius: var(--faq-border-radius);
    border: var(--faq-border);
    max-width: 100%;
    background-color: var(--faq-box-bg);
}

.ps_faq__is_open{
    position: absolute;
    top: calc( var(--faq-padding-tb) + var(--faq-qa-size)/2 );
    transform: translateY(-50%);
    right: var(--faq-padding-lr);
    width: var(--faq-open-size);
    aspect-ratio: 1/1;
}

.ps_faq__is_open::before,
.ps_faq__is_open::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--faq-open-color);
    transition: .2s;
    width: 100%;
    height: var(--faq-open-thick);
}

.ps_faq__is_open::after{
    transform: translate(-50%,-50%) rotate(90deg);
}

details[open] .ps_faq__is_open::after{
    transform: translate(-50%,-50%);
}

.ps_faq__q,
.ps_faq__a{
    position: relative;
    padding: var(--faq-padding-tb) calc( var(--faq-padding-lr) + var(--faq-open-size) * 1.25 ) var(--faq-padding-tb) calc( var(--faq-padding-lr) + var(--faq-qa-size) + 1rem );
}

.ps_faq__q{
    font-weight: bold;
    font-size: var(--faq-font-size);
    list-style: none;
}

.ps_faq__a{
    padding-top: 0;
}

.ps_faq__icon{
    position: absolute;
    top: var(--faq-padding-tb);
    left: var(--faq-padding-lr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc( var(--faq-qa-size) * .9 );
    width: var(--faq-qa-size);
    aspect-ratio: 1/1;
    line-height: 1;
}

.ps_faq__icon.--q{
    color: var(--faq-q-color);
    font-size: calc( var(--faq-qa-size) * .8 );
    background-color: var(--faq-q-bg-color);
}

.ps_faq__icon.--q::before{
    position: relative;
    content: 'Q';
    bottom: 0.1em;
}

.ps_faq__icon.--a{
    top: 0;
    color: var(--faq-a-color);
    background-color: var(--faq-a-bg-color);
} 

.ps_faq__icon.--a::before{
    content: 'A';
}

.ps_faq__icon.--a + *{
    margin-top: 0 !important;

}

/* 色の設定用フォーム */
.ps_faq__form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.ps_faq.--test{
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.ps_faq.--test .ps_faq__icon{
    position: static;
    transform: unset;
}