@charset "UTF-8";

.main {
    background-color: #F4F3F3;
    padding: 50px 2.6% ;
}

.topic__qa {
    margin-top: 0;
}

/* pc */
@media screen and (min-width: 769px) {
    .main {
        padding: 70px 2.7% ;
    }

} /* 769px pc */


/*====================
Q&A
====================*/

.qa__item {
    padding: 30px 10px;
    background-color: #FFF;
    border-radius: 20px;
    margin-top: 30px;
}

.q {
    font-family: Roboto;
    font-size: 1.4rem;
    line-height: 21px;
    font-weight: 700;
}

.question {
    font-family: "Noto Serif JP";
    font-size: 1.4rem;
    line-height: 21px;
    position: relative;
    width: 90.5vw;
}

/* アコーディオンメニュー btn */
.question::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #2F486B;
    border-radius: 50%;
}

.question::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 4.5px;
    width: 0;
    height: 0;
    margin: auto;
    border-top: 9px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 0 solid transparent;
    transform: translateY(1px);
    transition-duration: .5s;
}

/* アコーディオンbtn clickされたとき 途中 */
.question.open::after {
    transform: rotate(180deg);
}

.a {
    font-family: Roboto;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 21px;
}

.answer {
    font-family: "Noto Serif JP";
    font-size: 1.4rem;
    line-height: 21px;
    margin-top: 30px;
    display: none;
}

/* Q&A pc */
@media screen and (min-width: 769px) {

    .qa {
        max-width: 1180px;
        margin: 0 auto;
    }

    .qa__item {
        padding: 30px 20px;
        margin-top: 50px;
    }

    .q, .question {
        font-size: 2rem;
        line-height: 30px;
    }

    .question {
        width: 96%;
    }

    .a, .answer {
        font-size: 2rem;
        line-height: 30px;
    }

    /* アコーディオンメニュー btn */
    .question::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        background-color: #2F486B;
        border-radius: 50%;
    }
    
    .question::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 8.5px;
        width: 0;
        height: 0;
        margin: auto;
        border-top: 11.5px solid #fff;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-bottom: 0 solid transparent;
        transform: translateY(1px);
        transition-duration: .5s;
    }

}