@charset "UTF-8";

/* アコーディオン全体 */
.accordion {
    width: 100%;
    max-width: 600px;
}

/* アコーディオン */
.accordion__item {
    margin-top: 10px;
}

    .accordion__item.square {
        border: 1.5px solid #ababab;
    }

    .accordion__item.underbar {
        border-bottom: 1.5px solid #ababab;
    }

/* アコーディオンのタイトル */
.accordion__title {
    position: relative;
    font-weight: 500;
    font-size: 1.0em;
    cursor: pointer;
    user-select: none;
}

    /* (+)アイコン */
    .accordion__title::before,
    .accordion__title::after {
        position: absolute;
        content: "";
        top: 0;
        right: 3%;
        bottom: 0;
        margin: auto 0;
        background-color: #898989;
        width: 15px;
        height: 2px;
        transition: all 0.3s;
    }

    .accordion__title::after {
        transform: rotate(90deg);
    }

@media (max-width: 559px) {
    .accordion__title {
        padding: 25px 35px 25px 20px;
    }
}

.accordion__item.square .accordion__title {
    padding: 16px 25px;
}

@media (max-width: 559px) {
    .accordion__item.square .accordion__title {
        padding: 16px 30px;
    }
}

.accordion__item.underbar .accordion__title {
    padding: 16px 7px;
}

@media (max-width: 559px) {
    .accordion__item.underbar .accordion__title {
        padding: 16px 30px 16px 3px;
    }
}

/* アコーディオンのコンテンツ */
.accordion__content {
    position: relative;
    display: none;
    background-color: #ffffff;
    margin-bottom: 0;
    padding: 20px 35px 20px;
    text-align: left;
}

    .accordion__content.is-open {
        display: block;
    }

@media (max-width: 559px) {
    .accordion__content {
        padding: 25px 15px;
    }
}

/* アコーディオン展開時の(-)アイコン */
.accordion__title.is-active::before {
    transform: rotate(180deg);
}

.accordion__title.is-active::after {
    transform: rotate(180deg);
    opacity: 0;
}