@charset "utf-8";

/* メインビジュアル */
.page_mv.page_mv-qa {
    background-image: url(../img/pageQ&A_top_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.page_mv.page_mv-qa::before {
    position: absolute;
    background-color: #1F0A0A;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    mix-blend-mode: multiply;
}

.breadcrumb_qa {
    margin-bottom: 60px;
}

/* アコーディオンメニュー */
.qa_wrapper {
    width: 100%;
    max-width: 950px;
    margin: auto;
    margin-bottom: 180px;
}

.qa {
    display: flex;
    justify-content: center;
    width: 100%;
}

.qa_block {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    letter-spacing: 0.14em;
}


.qa_item {
    display: inline-block;

}

.qa_head {
    position: relative;
    text-align: left;
    padding: 41px 120px;
    background: #F3EDED;
    color: #1F0A0A;
    cursor: pointer;
    width: 100%;
}

.qa_head::before {
    content: "";
    position: absolute;
    display: inline-block;
    background-image: url(../img/pageQ&A_letterQ.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 22px;
    height: 18px;
    top: 40%;
    left: 82px;
}

.qa_head:after {
    content: "";
    border-top: 1px solid #1F0A0A;
    border-left: 1px solid #1F0A0A;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(-135deg) translateY(9px);
    position: absolute;
    right: 55px;
    top: 50%;
    transition: transform .4s;

}

.qa_body {
    position: relative;
    background: #fff;
    color: black;
    border: transparent;
    padding: 0 120px;
    line-height: 0;
    opacity: 0;
    transition: line-height 0.4s, padding 0.4s, opacity 0.4s;
}

.qa_body::before {
    content: "";
    position: absolute;
    display: inline-block;
    background-image: url(../img/pageQ&A_letterA.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 22px;
    height: 18px;
    top: 32%;
    left: 82px;
}

.qa_body.is-open {
    /* left: 105px; */
    padding: 20px 120px;
    line-height: 1.5;
    width: 100%;
    opacity: 1;
}

.qa_body_animation {
    text-decoration: underline;
    transition: color .4s;
}

.qa_body_animation:hover {
    color: #A8A7A7;
}

.qa_head.is-open::after {
    transform: rotate(45deg) translateY(-10px);

}

.qa_item:not(:first-child) {
    margin-top: 30px;
}



/* スマホ対応 */

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

    .qa_head {
        padding: 30px 62px;
    }

    .qa_head::before {
        left: 30px;
    }

    .qa_head::after {
        right: 35px;
    }

    .qa_body {
        padding: 0 62px;
    }

    .qa_body::before {
        top: 18%;
        left: 30px;
    }

    .qa_body.is-open {
        padding: 20px 62px;
    }

    .qa_wrapper {
        margin-bottom: 120px;
    }

}