/* ========================================
 * よくあるご質問ページ
 * Project層 - BEM命名
 * ======================================== */


/* ----------------------------------------
 * レイアウト（ヘッダー・フッター間の余白）
 * ---------------------------------------- */
.p-form-main {
    gap: 40px;
}

.p-form-main::after {
    content: '';
    display: block;
}

.p-form-main .c-gi-container {
    box-sizing: border-box;
}


/* ----------------------------------------
 * FAQ 全体コンテナ
 * ---------------------------------------- */
.p-faq {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* ----------------------------------------
 * カテゴリ（大項目）
 * ---------------------------------------- */
.p-faq__category {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.p-faq__category + .p-faq__category {
    margin-top: 20px;
}

.p-faq__category-title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: #333333;
    margin: 0;
    padding: 0;
}


/* ----------------------------------------
 * Q&A リスト
 * ---------------------------------------- */
.p-faq__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* ----------------------------------------
 * Q&A アイテム（一塊り）
 * ---------------------------------------- */
.p-faq__item {
    background-color: #F3F8FF;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}


/* ----------------------------------------
 * 質問（button）
 * ---------------------------------------- */
.p-faq__question {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    color: #2873C9;
    text-align: left;
}

/* Q ラベル */
.p-faq__question::before {
    content: 'Q';
    flex-shrink: 0;
    width: 40px;
}

.p-faq__question-text {
    flex: 1;
}


/* ----------------------------------------
 * +/- アイコン（CSS疑似要素）
 * ---------------------------------------- */
.p-faq__icon {
    position: relative;
    width: 20px;
    height: 1.8em;
    flex-shrink: 0;
}

/* 共通（十字の横棒・縦棒） */
.p-faq__icon::before,
.p-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #2873C9;
    transform: translate(-50%, -50%);
}

/* 横棒（常時表示） */
.p-faq__icon::before {
    width: 16px;
    height: 2px;
}

/* 縦棒（閉じ時のみ表示 → 展開時に非表示で + → - に変化） */
.p-faq__icon::after {
    width: 2px;
    height: 16px;
}

.p-faq__question[aria-expanded="true"] .p-faq__icon::after {
    display: none;
}


/* ----------------------------------------
 * 回答エリア
 * ---------------------------------------- */
.p-faq__answer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 5px;
    padding-top: 10px;
    padding-right: 36px; /* Qの+/-アイコン領域分（icon 20px + gap 16px） */
    border-top: 1px solid #E0E0E0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: var(--line-height-relaxed);
    color: #1E3A5F;
}

.p-faq__answer[hidden] {
    display: none;
}

/* A ラベル（Qと同様に::before） */
.p-faq__answer::before {
    content: 'A';
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    width: 40px;
}

.p-faq__answer p {
    margin: 0;
    flex: 1;
    font-size: 15px;
}

.p-faq__answer a {
    color: #2873C9;
}


/* ----------------------------------------
 * レスポンシブ
 * ---------------------------------------- */
@media screen and (max-width: 767px) {
    .p-faq__category-title {
        font-size: 14px;
    }

    .p-faq__question {
        align-items: flex-start;
    }

    .p-faq__question-text {
        font-size: 14px;
        align-self: center;
    }

    .p-faq__answer {
        align-items: flex-start;
    }

    .p-faq__answer::before {
        margin-top: -5px;
    }

    .p-faq__answer p {
        font-size: 12px;
    }
}