/* #LP-A Q&A Section
   ------------------------------------------------------------------------- */

.qa-section {
    /* ローカル変数定義: このセクション固有の色 */
    --qa-text-navy: #1a2b4b;
    /* 見出し、質問文など */
    --qa-text-body: #4a4a4a;
    /* 回答文 */
    --qa-accent-gold: #e6c55a;
    /* 見出し下線 */
    --qa-accent-red: #cc0000;
    /* 強調テキスト */
    --qa-bg-label: #0d1b33;
    /* Qラベル背景 */

    padding: 16vw 5.3vw;
    background: url('../../assets/images/lp-a/qa_bg.webp') center/cover no-repeat;
    display: grid;
    gap: 8vw;
}

/* -------------------------------------------------------------------------
   Header Area
   ------------------------------------------------------------------------- */
.qa-header {
    text-align: center;
    /* margin-bottom: 10px -> 2.7vw */
    margin-bottom: 2.7vw;
}

.qa-title {
    font-family: var(--font-main);
    color: var(--qa-text-navy);
    display: inline-block;
    display: inline-block;
    position: relative;
    padding-bottom: 2.1vw;
    font-weight: 700;
    line-height: 1;
    text-shadow: var(--text-shadow-sm);
}

/* Underline decoration */
.qa-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16vw;
    height: 0.8vw;
    background: var(--qa-accent-gold);
    box-shadow: 0.5vw 0.5vw 0.5vw rgba(0, 0, 0, 0.25);
}

/* Typography sizes for title */
.qa-char-large {
    font-size: 9.6vw;
}

.qa-char-small {
    font-size: 6.4vw;
}

/* -------------------------------------------------------------------------
   QA Item Card
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   QA Item Card (Grid Layout)
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   QA Item Card (Grid Layout)
   ------------------------------------------------------------------------- */
.qa-item {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5.3vw;
    box-shadow: 0 1vw 4vw rgba(0, 0, 0, 0.2);
    box-shadow: 0 1vw 4vw rgba(0, 0, 0, 0.2);
    padding: 6.7vw 5vw;

    /* Grid Layout for dynamic vertical alignment */
    display: grid;
    grid-template-columns: min-content 1fr;
    /* No gap on parent, controlled by children margin/padding to maintain border continuity */
}

/* "Q" Label Circle */
.qa-label {
    grid-row: 1;
    grid-column: 1;
    /* Center vertically relative to the Question Text row */
    align-self: center;

    width: 8vw;
    height: 8vw;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--qa-bg-label);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-main);
    font-size: 5vw;
    line-height: 1;

    /* Spacing between Icon and Text content (Reduced to 3vw) */
    margin-right: 3vw;

    /* Optical adjustment: nudge down slightly to match text baseline weight */
    margin-top: 0.5vw;
}

/* -------------------------------------------------------------------------
   Typography Content & Border
   ------------------------------------------------------------------------- */
.qa-question-text {
    grid-row: 1;
    grid-column: 2;
    /* Center text block vertically in the row */
    align-self: center;

    color: var(--qa-text-navy);
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 4vw;
    line-height: 1.5;
    margin: 0;

    /* Border Styling */
    border-left: 0.8vw solid var(--qa-text-navy);
    /* Spacing between border and text (Reduced to 3vw) */
    padding-left: 3vw;

    /* Spacing below question text */
    padding-bottom: 2.7vw;
}

.qa-answer-text {
    grid-row: 2;
    grid-column: 2;

    color: var(--qa-text-body);
    font-size: 3vw;
    line-height: 1.5;

    /* Border Continuity */
    border-left: 0.8vw solid var(--qa-text-navy);
    /* Spacing between border and text (Reduced to 3vw) */
    padding-left: 3vw;

    /* Close up the gap to ensure border looks continuous if needed */
    margin-top: -0.27vw;
    padding-top: 0.27vw;
}

.qa-answer-text p {
    margin: 0;
}

/* Highlight / Emphasis */
.qa-strong {
    color: var(--qa-accent-red);
    font-weight: 700;
    background: none;
}