/*
 * RAPL FAQ 同梱スタイル
 * アクセント色は --rapl-faq-accent で差し替えられる。
 * 設置先の「追加CSS」などで、例えば
 *   .rapl-faq { --rapl-faq-accent: #c0392b; }
 * と書けば、開閉印や Q. の色がまとめて変わる。
 */

.rapl-faq {
    --rapl-faq-accent: #0f8c7c;
    margin: 1.5em 0;
}

/* カテゴリ見出し: アクセント色の下線 */
.rapl-faq .rapl-faq__group {
    margin: 2em 0 0.75em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--rapl-faq-accent);
    font-size: 1.15em;
    line-height: 1.4;
}

.rapl-faq .rapl-faq__group:first-child {
    margin-top: 0;
}

/* 質問と答えのひとかたまり: 角丸のボーダー */
.rapl-faq .rapl-faq__item {
    margin: 0 0 0.75em;
    border: 1px solid #d5d9dd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

/* 質問行 */
.rapl-faq .rapl-faq__q {
    display: block;
    position: relative;
    padding: 0.9em 2.75em 0.9em 2.5em;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.5;
    list-style: none;
    transition: background-color 0.15s;
}

.rapl-faq .rapl-faq__q:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* ブラウザ既定の ▶ 印は消す（印は自前の ＋/− を使う） */
.rapl-faq .rapl-faq__q::-webkit-details-marker {
    display: none;
}

/* Q. プレフィックス */
.rapl-faq .rapl-faq__q::before {
    content: "Q.";
    position: absolute;
    left: 0.9em;
    color: var(--rapl-faq-accent);
    font-weight: 700;
}

/* 開閉印: 閉じているときは ＋、開いているときは − */
.rapl-faq .rapl-faq__q::after {
    content: "＋";
    position: absolute;
    right: 0.9em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rapl-faq-accent);
    font-weight: 700;
}

.rapl-faq .rapl-faq__item[open] > .rapl-faq__q::after {
    content: "−";
}

/* 答え */
.rapl-faq .rapl-faq__a {
    padding: 0.9em 1.25em 1em 2.5em;
    border-top: 1px solid #e7eaec;
    line-height: 1.7;
}

.rapl-faq .rapl-faq__a > p:first-child {
    margin-top: 0;
}

.rapl-faq .rapl-faq__a > p:last-child {
    margin-bottom: 0;
}