@charset "utf-8";

/*-------------------------------------------------------------------------
HEAD
-------------------------------------------------------------------------*/

.faq__head {
    position: relative;
}
    .faq__head-btn {
        overflow: hidden;
        position: absolute;
        top     : 59px;
        left    : 422px;
    }
        .faq__head-btn li {
            float: left;
            cursor: pointer;
            width: 105px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
        }
        .faq__head-btn__open {
            background-color: #beaf87;
            border-bottom: 3px solid #90793a;
            color: #fff;
        }
        .faq__head-btn__close {
            background-color: #fff;
            border-bottom: 3px solid #777;
        }
        .faq__head-btn li:hover {
            opacity: .8;
        }

/*-------------------------------------------------------------------------
BODY
-------------------------------------------------------------------------*/

.page__body {
    padding: 28px 20px 85px;
}
.faq-list {
    padding: 18px 0 0;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}
.faq-list:last-of-type {
    margin: 0 0 50px;
}
    .faq-list dt {
        margin: 0 0 10px;
        font-size  : 16px;
        font-weight: bold;
        color      : #beaf87;
        position: relative;
    }
    /* Q A アイコン */
    .faq-list dt:before,
    .faq-list dd:before {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        text-indent: 0;
        font-size  : 16px;
        font-weight: bold;
        color      : #fff;
        display: inline-block;
        margin: 0 8px 0 0;
        vertical-align: top;
    }
    .faq-list dt:before {
        content: "Q";
        background-color: #49494c;
    }
    .faq-list dd:before {
        content: "A";
        background-color: #beaf87;
    }
        /* + - ボタン */
        .faq-list__btn {
            position: absolute;
            top     : 0;
            right   : 0;
            width: 24px;
            height: 24px;
            background-color: #49494c;
            border-radius: 50px;
            transition: .2s ease;
        }
        .is-open .faq-list__btn {
            background-color: #beaf87;
        }
        .faq-list__btn:before,
        .faq-list__btn:after {
            content: "";
            width: 10px;
            height: 2px;
            background-color: #fff;
            position: absolute;
            top     : 50%;
            left    : 50%;
            margin: -1px 0 0 -5px;
            transition: .2s ease;
        }
        .faq-list__btn:after {
            transform: rotate(90deg);
        }
        .is-open .faq-list__btn:after {
            transform: rotate(0);
        }
    /* 答え */
    .faq-list dd {
        margin: 0 0 19px;
        display: none;
    }
        .faq-list__anwser {
            display: inline-block;
            width: 840px;
        }