/* ==========================================================================
   FAQ（アコーディオン）
   開いた状態の回答はカンプ未提供のため仮デザイン
   ========================================================================== */

.c-faq {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
}

.c-faq__item {
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
}

.c-faq__question {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    list-style: none;
    cursor: pointer;
}

.c-faq__question::-webkit-details-marker {
    display: none;
}

.c-faq__mark {
    color: var(--color-accent);
}

.c-faq__icon {
    width: var(--space-3);
    height: var(--space-3);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h14M8 1v14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c-faq__item[open] .c-faq__icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* 見えない Q を置いて、回答の文字の左右を質問の文字にそろえる */
.c-faq__answer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    padding: 0 calc(var(--space-3) * 3) var(--space-3) var(--space-3);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.c-faq__answer::before {
    content: "Q";
    font-weight: var(--weight-bold);
    visibility: hidden;
}

.c-faq__answer-text p {
    margin: 0;
}

.c-faq__answer-text p + p {
    margin-top: var(--space-2);
}