/* ============================================================
   Diary 求人サイト — FAQ (Q&A) ページ
   - prefix .rc-fq-* (recruit-faq)
   - ヒーロー/カテゴリピル/ページ wrap は .rc-bh-* (blog-list.css) を流用
   - 1カラム + カテゴリ毎にグループ + アコーディオン
   ============================================================ */

/* ============================================================
   メインカラム
   ============================================================ */
.rc-fq-main {
    max-width: 820px;
    margin: 0 auto;
}

/* ============================================================
   カテゴリグループ (1カテゴリのまとまり)
   ============================================================ */
.rc-fq-group {
    margin-bottom: 64px;
}
.rc-fq-group:last-child {
    margin-bottom: 0;
}

.rc-fq-group-header {
    text-align: center;
    margin-bottom: 32px;
}
.rc-fq-group-eyebrow {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 13px;
    color: var(--rch2-text-light);
    letter-spacing: 0.36em;
    margin: 0 0 12px;
}
.rc-fq-group-title {
    font-family: var(--rch2-font-serif);
    font-size: 22px;
    color: var(--rch2-text-main);
    letter-spacing: 0.2em;
    font-weight: 500;
    margin: 0 0 14px;
}
.rc-fq-group-divider {
    width: 36px;
    height: 1px;
    background: var(--rch2-accent);
    margin: 0 auto;
}

/* ============================================================
   FAQ リスト (項目間は余白だけで区切り)
   ============================================================ */
.rc-fq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 各 FAQ 項目 (Q + A) */
.rc-fq-item {
    background: var(--rch2-bg-section);            /* #F5EFE6 薄ベージュ */
    border: 0.5px solid var(--rch2-line);
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.rc-fq-item.is-open {
    background: var(--rch2-bg-card);               /* #FFFFFF 開いたら白でくっきり */
    border-color: var(--rch2-accent-light);
}

/* 質問ボタン (常時表示) */
.rc-fq-question {
    appearance: none;
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: var(--rch2-font-serif);
    transition: background-color 0.3s ease;
}
.rc-fq-question:hover {
    background: rgba(184, 122, 86, 0.06);
}
.rc-fq-item.is-open .rc-fq-question {
    background: rgba(184, 122, 86, 0.04);
}

/* Q / A マーカー */
.rc-fq-mark {
    font-family: var(--rch2-font-en);
    font-style: italic;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
    padding-top: 1px;
}
.rc-fq-mark-q {
    color: var(--rch2-accent);                     /* #B87A56 */
}
.rc-fq-mark-a {
    color: var(--rch2-accent-strong);              /* #6B4226 */
}

/* 質問テキスト */
.rc-fq-question-text {
    flex: 1;
    font-size: 15.5px;
    color: var(--rch2-text-main);
    line-height: 1.65;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* 開閉トグル (+ / ×) */
.rc-fq-toggle {
    font-family: var(--rch2-font-en);
    font-size: 24px;
    color: var(--rch2-accent);
    flex-shrink: 0;
    line-height: 1;
    padding-top: 1px;
    transition: transform 0.3s ease, color 0.3s ease;
}
.rc-fq-item.is-open .rc-fq-toggle {
    transform: rotate(45deg);
    color: var(--rch2-accent-strong);
}

/* 回答 (アコーディオン展開部) */
.rc-fq-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.rc-fq-item.is-open .rc-fq-answer-wrap {
    max-height: 1000px;                            /* 長文も収まる十分な値 */
}
.rc-fq-answer {
    /* 上 padding を 22px に増やして罫線とテキストの間を確保。
       text の padding-top は撤去し、A マーカーとテキストの 1 行目を
       同じ top 位置に揃える (質問エリアと同じ挙動)。 */
    padding: 22px 24px 24px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-top: 0.5px solid var(--rch2-line);
}
.rc-fq-answer-text {
    flex: 1;
    font-family: var(--rch2-font-serif);
    font-size: 14.5px;
    color: var(--rch2-text-sub);
    line-height: 1.95;
    letter-spacing: 0.04em;
    margin: 0;
    white-space: pre-wrap;                         /* 改行を保持 */
}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 768px) {
    .rc-fq-main { max-width: 100%; }
    .rc-fq-group { margin-bottom: 48px; }

    .rc-fq-group-eyebrow { font-size: 11.5px; letter-spacing: 0.3em; }
    .rc-fq-group-title { font-size: 18px; letter-spacing: 0.14em; margin-bottom: 12px; }
    .rc-fq-group-divider { width: 30px; }

    .rc-fq-list { gap: 8px; }

    .rc-fq-question { padding: 16px 18px; gap: 12px; }
    .rc-fq-mark { font-size: 20px; }
    .rc-fq-question-text { font-size: 14px; line-height: 1.55; }
    .rc-fq-toggle { font-size: 20px; }

    .rc-fq-answer { padding: 0 18px 18px; gap: 12px; }
    .rc-fq-answer-text { font-size: 13.5px; line-height: 1.85; padding-top: 14px; }
}

@media (max-width: 380px) {
    .rc-fq-question { padding: 14px 14px; }
    .rc-fq-answer { padding: 0 14px 14px; }
    .rc-fq-question-text { font-size: 13.5px; }
    .rc-fq-answer-text { font-size: 13px; }
}