@charset "UTF-8";

summary {
    display: block;
    list-style: none;
}
/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
    display:none;
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.faq__section {
    padding: 95px 60px;
}
    .faq__ttl {
        margin: 0 0 83px;
        font-size  : 32px;
        font-weight: 700;
        color      : var(--main-color);
        text-align: center;
    }

/* #
--------------------------- */
.faq__list:not(:last-child){
    border-bottom: 1px solid #A6C7EB;
    margin: 0 0 33px;
    padding: 0 0 25px;
}
    .faq__toggle {
        display: flex;
        gap    : 25px;
        padding: 0 80px 0 0;
        position: relative;
    }
        [class*="faq__icn--"]{
            min-width: 59px;
            height: 59px;
            border-radius: 50%;
            display        : flex;
            align-items    : center;
            justify-content: center;
            font-family: var(--open-sans);
            font-size  : 40px;
            font-weight: 400;
        }
        .faq__icn--question {
            background-color: var(--main-color);
            color: #fff;
        }
        .faq__icn--answer {
            border: 1px solid currentColor;
            color: var(--main-color);
        }
        .faq__sub-ttl {
            margin: 8px 0 0;
            font-size  : 23px;
            font-weight: 500;
            line-height: 1.86;
        }
        .faq__toggle i {
            width: 18px;
            height: 18px;
            position: absolute;
            top     : 20px;
            right   : 10px;
        }
        .faq__toggle i:before,
        .faq__toggle i:after {
            content: "";
            width: 100%;
            height: 2px;
            background-color: #000;
            position: absolute;
            inset   : 0;
            margin  : auto;
        }
        .faq__toggle i:after {
            transform: rotate(90deg);
        }
        .faq__list[open] .faq__toggle i:after {
            transform: rotate(0);
        }
    .faq__contents {
        display: flex;
        gap    : 25px;
        padding: 30px 0 0;
    }
        .faq__comment > * + * {
            margin: 30px 0 0;
        }
        .faq__text {
            line-height: 2.37;
        }

@media screen and (max-width: 768px){
    .faq__section {
        padding: 60px 30px;
    }
    .faq__toggle {
        gap: 10px;
        padding: 0 44px 0 0;
        align-items: center;
    }
    .faq__ttl {
        margin: 0 0 23px;
        font-size: clamp(22px, 4vw, 32px);
        text-align: left;
    }
    [class*="faq__icn--"]{
        min-width: 40px;
        height: 40px;
        font-size: 25px;
    }
    .faq__sub-ttl {
        margin: 0;
        font-size: clamp(15px, 3.5vw, 23px);
    }
    .faq__toggle i {
        top: 12px;
    }
    .faq__contents {
        gap: 10px;
    }
}