@charset "utf-8";


/*よくある質問
-------------------------------------------------------------*/
.qa-1 {
    max-width: 100%;
    margin-bottom: 7px;
    padding: 0;
}

.qa-1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 3em 1em 3em;
    font-size: 1.2rem;
}

/*画面幅600px*/
@media screen and (max-width:600px) {
    section#faq {
        padding: 10% 5%;
    }
    .qa-1 summary {
        padding: 0.5em 3em 0.5em 3em;
    }
}

.qa-1 summary::before,
.qa-1 p::before {
    position: absolute;
    left: 15px;
    font-size: 25px;
}

.qa-1 summary::before {
    color: #70ae27;
    content: "Q";
    font-size: 2.5rem;
}

.qa-1 summary::after {
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%) rotate(45deg); 
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #70ae27;
    border-right: 3px solid #70ae27;
    content: '';
    transition: transform .5s;
}

.qa-1[open] summary::after {
    transform: rotate(225deg);
}

.qa-1 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 0em 1.5em 5em;
    transition: transform .5s, opacity .5s;
}

.qa-1[open] p {
    transform: none;
    opacity: 1;
}

.qa-1 p::before {
    color: #fc860d;
    line-height: 1.2;
    content: "A";
    font-size: 2.5rem;
}

details > summary:first-of-type {
    counter-increment: list-item 0;
    list-style: inside disclosure-closed;
}

.qa-1 summary::-webkit-details-marker {
    display: none;
}