div.q-and-a {
}

    div.q-and-a > h3 {
        position: relative;
        padding-left: 1.25em;
    }

        div.q-and-a > h3::before {
            content: 'Q';
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            font: 700 1em NotoSansJP, sans-serif;
            line-height: 1;
            color: var(--accent-color);
        }

    div.q-and-a > p {
        display: block;
        position: relative;
        padding: 16px 16px 16px 32px;
        font: 500 1em LineSeedJP, sans-serif;
        background-color: #ff000018;
    }

        div.q-and-a > p::before {
            content: 'A';
            display: inline-block;
            position: absolute;
            left: 0;
            top: -0.1em;
            font: 700 2.5em NotoSansJP, sans-serif;
            line-height: 1;
            color: #ff000040;
        }

        div.q-and-a > p.answer1, div.q-and-a > p.answer2, div.q-and-a > p.answer3 {
            padding-left: 48px;
        }

            div.q-and-a > p.answer1::before {
                content: 'A1';
            }

            div.q-and-a > p.answer2::before {
                content: 'A2';
            }

            div.q-and-a > p.answer3::before {
                content: 'A3';
            }