:root {
    --font__color: #161616;
    --gray: #4d4d4d;
    --white: #fffffa;
    --base__color: #f5fafb;
    --base__color2:#c8dee2;
    --orange: #ff761d;
    --blue: #00779a;
    --light__blue: #69cbe9;
    --red: #d11f1f;
}

.qa__wrap{
    display: flex;
    flex-direction: column;
    gap:1em;
}

/* QAのアコーディオン */
.question__no{
    width:100%;
    text-align: center;
    background:var(--red);
    padding:0.1em 0.5em;
    color:var(--white);
    font-size: 1.2rem;
}

.ans__no{
    width:100%;
    text-align: center;
    background:var(--blue);
    padding:0.1em 0.5em;
    color:var(--white);
    font-size: 1.2rem;
    font-weight: 700;
}

.accordion__head{
    display: grid;
    grid-template-columns:4rem 1fr 50px;
    align-items: center;
    gap:1em;
    margin:1em 0;
    font-weight: 700;
    background:var(--base__color2);
    padding:0.5em 0.5em 0.5em 0;
    cursor: pointer;
    transition: all 0.3s;
}
.accordion__head:hover{
    background: var(--light__blue);
}
.accordion__arrow{
    transform: translateY(-25%) rotate(45deg);
    width: 1rem;
    height: 1rem;
    border-bottom: 3px solid var(--orange);
    border-right: 3px solid var(--orange);
    transition: all .3s;
}
.accordion__content{
    background:var(--base__color2);
    grid-template-columns: 4rem 1fr;
    gap:1em;
    margin:1em 0;
    padding:0.5em 0.5em 0.5em 0;
    transition: all 0.3s;
    display:none;
    align-items:start;
    transform:translateY(-50px);
    opacity: 0;
}
.accordion__active{
    display:grid;
    animation:accordion__active 0.3s linear forwards;
}
@keyframes accordion__active {
    to{
        transform:translateY(0);
        opacity: 1;
    }
}
.accordion__arrow__active{
    transform: rotate(225deg);
}