/* ===== Exam page header (spi_top と統一) ===== */
.spi-exam-page {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
.spi-exam-page * { box-sizing: border-box; }
.spi-exam-page-header {
    background: #26A69A;
    padding: 16px 36px;
    display: flex; align-items: center; gap: 18px;
}
.spi-exam-page-brand { display: inline-flex; align-items: center; text-decoration: none; }
.spi-exam-page-logo-img { display: block; height: 44px; width: auto; transition: transform .22s ease; }
.spi-exam-page-brand:hover .spi-exam-page-logo-img { transform: translateY(-2px); }
.spi-exam-page-divider { width: 1px; height: 28px; background: rgba(255,255,255,.5); }
.spi-exam-page-sub { font-size: 18px; font-weight: 500; color: #fff; letter-spacing: .06em; }
@media (max-width: 720px) {
    .spi-exam-page-header { padding: 12px 16px; gap: 12px; }
    .spi-exam-page-logo-img { height: 36px; }
    .spi-exam-page-sub { font-size: 14px; }
}

#spi-exam-app.spi-quiz {
    --spi-green: #26A69A;
    --spi-green-dark: #1f8a80;
    --spi-green-light: #E4F8F6;
    --spi-yellow: #f1c40f;
    --spi-red: #e04e4e;
    --spi-text: #1f2328;
    --spi-muted: #6a737d;
    --spi-border: #e1e4e8;
    --spi-surface: #f6f8fa;
    max-width: 980px;
    margin: 2em auto;
    background: #fff;
    color: var(--spi-text);
    line-height: 1.7;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
    padding: 1.8em 2em;
}
#spi-exam-app.spi-quiz * { box-sizing: border-box; }

/* ===== 共通ボタン ===== */
.spi-quiz-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .7em 1.5em; border-radius: 6px; font-weight: 700; border: 1px solid transparent; background: var(--spi-surface); color: var(--spi-text); cursor: pointer; font-size: 1em; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s; }
.spi-quiz-btn-primary { background: var(--spi-green); color: #fff; border-color: var(--spi-green); }
.spi-quiz-btn-primary:hover { background: var(--spi-green-dark); border-color: var(--spi-green-dark); }
.spi-quiz-btn-next { background: #4a7fd0; color: #fff; border-color: #4a7fd0; padding: .75em 1.8em; border-radius: 4px; }
.spi-quiz-btn-next:hover:not(:disabled) { background: #3a6cbb; border-color: #3a6cbb; }
.spi-quiz-btn-next:disabled { background: #b0bec5; border-color: #b0bec5; cursor: not-allowed; opacity: .7; }
.spi-quiz-btn-ghost { background: #fff; color: var(--spi-green-dark); border-color: var(--spi-border); }
.spi-quiz-btn-ghost:hover { border-color: var(--spi-green); }

/* ===== スタート ===== */
.spi-quiz-start { padding: 2em 1em; text-align: center; }
.spi-quiz-start-title { margin: 0 0 .8em; font-size: 1.5em; color: var(--spi-text); }
.spi-quiz-start-lead { margin: 0 0 1.6em; color: var(--spi-muted); }

/* ===== ヘッダー ===== */
.spi-quiz-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; margin-bottom: 1.4em; }
.spi-quiz-head-left { flex: 1; min-width: 0; }
.spi-exam-page .spi-quiz-title { padding: 0; border: 0; background: none; font-size: 1.3em; font-weight: 700; margin: 0 0 .7em; color: var(--spi-text); }
.spi-exam-page .spi-quiz-title::before,
.spi-exam-page .spi-quiz-title::after { content: none; display: none; }
.spi-quiz-instruction { display: none; }

/* ===== 右上：2重リングメーター ===== */
.spi-quiz-meter { display: flex; align-items: center; gap: .8em; flex: none; }
.spi-quiz-meter-chart { width: 86px; height: 86px; position: relative; flex: none; }
.spi-quiz-meter-chart svg { width: 100%; height: 100%; }
.spi-quiz-pie-bg        { fill: #eef1f3; }
.spi-quiz-wedge-time    { fill: #a5d6a7; transition: fill .3s; }
.spi-quiz-wedge-progress{ fill: #fdf3a0; }
.spi-quiz-meter.is-warn   .spi-quiz-wedge-time { fill: #f3c66c; }
.spi-quiz-meter.is-danger .spi-quiz-wedge-time { fill: #e88c8c; }

.spi-exam-page .spi-quiz-meter-legend { list-style: none; padding: 0; margin: 0; font-size: .82em; color: var(--spi-muted); line-height: 1.6; }
.spi-quiz-meter-legend li { display: flex; align-items: center; gap: .4em; }
.spi-quiz-meter-legend em { font-style: normal; font-weight: 700; color: var(--spi-text); font-variant-numeric: tabular-nums; margin-left: .2em; }
.spi-quiz-meter-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.spi-quiz-meter-legend .dot-time     { background: var(--spi-green); }
.spi-quiz-meter-legend .dot-progress { background: var(--spi-yellow); }

/* ===== 本体（左：問題 / 右：選択肢） ===== */
.spi-quiz-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5em; padding-top: 1em; border-top: 1px solid var(--spi-border); }
.spi-quiz-question { background: #f6fffe; border: 1.5px solid var(--spi-green); border-left: 5px solid var(--spi-green); border-radius: 8px; padding: 1.2em 1.4em; }
.spi-quiz-question-text { font-size: 1.08em; font-weight: 700; line-height: 1.9; margin: 0; white-space: pre-wrap; color: var(--spi-text); }
.spi-quiz-qnum { font-weight: 800; color: var(--spi-green-dark); margin-right: .2em; font-size: 1.05em; }
.spi-quiz-question-figure { margin: 1em auto 0; display: flex; justify-content: center; }
.spi-quiz-question-figure svg { max-width: 100%; height: auto; display: block; }
.spi-quiz-question-figure[hidden] { display: none; }
.spi-quiz-review-figure { margin: .8em 0 0; display: flex; justify-content: center; }
.spi-quiz-review-figure svg { max-width: 360px; width: 100%; height: auto; display: block; }

.spi-quiz-choices { display: flex; flex-direction: column; gap: .5em; }
.spi-quiz-choice { display: flex; align-items: center; gap: .8em; padding: .9em 1.2em; border: 1px solid var(--spi-border); border-radius: 6px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.spi-quiz-choice:hover { border-color: var(--spi-green); }
.spi-quiz-choice.is-selected { border-color: var(--spi-green); background: var(--spi-green-light); }
.spi-quiz-choice input { margin: 0; accent-color: var(--spi-green); width: 18px; height: 18px; flex: none; }
.spi-quiz-choice-text { flex: 1; color: var(--spi-text); }

/* ===== フッター ===== */
.spi-quiz-footer { padding-top: 1.4em; display: flex; align-items: center; gap: 1.2em; }
.spi-quiz-timebar { display: flex; align-items: center; gap: .8em; flex: 1; min-width: 0; }
.spi-quiz-timebar-label { font-size: .85em; color: var(--spi-text); font-weight: 700; flex: none; }
.spi-quiz-timebar-track { position: relative; flex: 1; display: flex; gap: 3px; height: 22px; min-width: 0; }
.spi-quiz-timebar-seg { flex: 1; min-width: 0; border-radius: 2px; transition: filter .2s; }
.spi-quiz-timebar-marker { position: absolute; top: -10px; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #1f2328; pointer-events: none; will-change: left; }
.spi-quiz-next { min-width: 110px; flex: none; }

/* ===== スコア帯カード ===== */
.spi-quiz-tier-card {
    /* ブランド緑（B案）に統一・中央寄せ（ミニ結果と揃える） */
    --tier-accent: #2CB4A6;
    --tier-accent-dark: #22A093;
    --tier-tint: #E4F8F6;
    --tier-ink: #137a70;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .1em;
    padding: 1.6em 1.4em 1.4em;
    border-radius: 20px;
    margin: 1.4em 0;
    border: 1px solid #e6ebea;
    background: #fff;
    box-shadow: 0 12px 28px -18px rgba(31,138,128,.55);
    overflow: hidden;
}
/* スコア帯によらず緑で統一（参照デザイン準拠） */
.spi-quiz-tier-card.is-low,
.spi-quiz-tier-card.is-mid,
.spi-quiz-tier-card.is-high { --tier-accent: #2CB4A6; --tier-accent-dark: #22A093; --tier-ink: #137a70; }

.spi-quiz-tier-icon { display: block; margin: 0 auto .2em; }
.spi-quiz-tier-icon svg { display: block; margin: 0 auto; }
.spi-quiz-tier-body { width: 100%; min-width: 0; }
.spi-quiz-tier-label {
    font-size: 1.2em; font-weight: 800; letter-spacing: .01em;
    margin: .1em 0 .5em; color: var(--tier-ink);
}
.spi-quiz-tier-msg {
    font-size: .9em; color: var(--spi-muted);
    margin: 0 0 1.1em; line-height: 1.7;
}
.spi-quiz-tier-cta {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    width: 100%;
    padding: .95em 1.4em;
    border-radius: 13px;
    font-size: 1.0em; font-weight: 800; letter-spacing: .01em;
    text-decoration: none; color: #fff;
    background: linear-gradient(180deg, var(--tier-accent), var(--tier-accent-dark));
    /* 押せる立体感：下辺の"厚み"＋落ち影 */
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--tier-accent-dark) 82%, #000),
        0 10px 20px -8px color-mix(in srgb, var(--tier-accent-dark) 80%, transparent);
    overflow: hidden;
    transition: transform .14s cubic-bezier(0.23,1,0.32,1), box-shadow .14s ease-out;
}
/* 上端のツヤは廃止（B案＝クリーン・くすみ除去のため） */
/* 光沢スイープ */
.spi-quiz-tier-cta::before {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg);
    animation: spi-present-sheen 3.4s ease-in-out .8s infinite;
    pointer-events: none;
}
@keyframes spi-present-sheen {
    0% { left: -60%; } 22% { left: 130%; } 100% { left: 130%; }
}
@media (hover: hover) and (pointer: fine) {
    .spi-quiz-tier-cta:hover {
        transform: translateY(-2px);
        filter: saturate(1.06);
        box-shadow:
            0 6px 0 color-mix(in srgb, var(--tier-accent-dark) 82%, #000),
            0 14px 26px -8px color-mix(in srgb, var(--tier-accent-dark) 80%, transparent);
    }
    .spi-quiz-tier-cta:hover .spi-quiz-tier-cta-arrow { transform: translateX(4px); }
}
.spi-quiz-tier-cta:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--tier-accent-dark) 82%, #000),
        0 4px 10px -6px color-mix(in srgb, var(--tier-accent-dark) 80%, transparent);
}
.spi-quiz-tier-cta-icon {
    display: inline-flex; flex: none; transform-origin: 50% 60%;
    animation: spi-present-wiggle 3.4s ease-in-out infinite;
}
.spi-quiz-tier-cta-icon svg { display: block; }
@keyframes spi-present-wiggle {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-10deg); }
    92% { transform: rotate(9deg); }
    95% { transform: rotate(-6deg); }
    98% { transform: rotate(3deg); }
}
.spi-quiz-tier-cta-label { position: relative; }
.spi-quiz-tier-cta-arrow { flex: none; transition: transform .16s cubic-bezier(0.23,1,0.32,1); font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
    .spi-quiz-tier-cta::before, .spi-quiz-tier-cta-icon { animation: none; }
    .spi-quiz-tier-cta, .spi-quiz-tier-cta-arrow { transition: none; }
}

@media (max-width: 720px) {
    .spi-quiz-tier-card { flex-direction: column; text-align: center; gap: .9em; padding: 1.4em 1.2em; }
    .spi-quiz-tier-card::before { inset: 0 0 auto 0; width: auto; height: 5px; background: linear-gradient(90deg, var(--tier-accent), var(--tier-accent-dark)); }
}

/* ===== 結果 ===== */
.spi-quiz-result { padding: 1em 0; }
.spi-exam-page .spi-quiz-result-title { padding: 0 0 .5em; border: 0; background: none; margin: 0 0 1.2em; color: var(--spi-green-dark); text-align: center; font-size: 1.5em; font-weight: 800; letter-spacing: .04em; position: relative; }
.spi-exam-page .spi-quiz-result-title::before { content: none; display: none; }
.spi-exam-page .spi-quiz-result-title::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--spi-green), #5fd0c4); }

/* ===== Lognavi 誘導（spi-topの白カード基調に合わせて） ===== */
.spi-quiz-lognavi { margin: 36px auto 16px; max-width: 520px; }
.spi-quiz-lognavi-card {
    position: relative;
    padding: 28px 28px 26px;
    background: #fff;
    border: 1px solid #EAF2F1;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(38,166,154,.06);
}
.spi-quiz-lognavi-eyebrow {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px;
}
.spi-quiz-lognavi-tag {
    display: inline-block;
    padding: 3px 10px;
    background: #E4F8F6;
    color: #1f8a80;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    border-radius: 999px;
}
.spi-quiz-lognavi-brandname {
    font-size: 13px;
    font-weight: 600;
    color: #1f8a80;
    letter-spacing: .04em;
}
.spi-exam-page .spi-quiz-lognavi-headline {
    margin: 0 0 12px;
    padding: 0; border: 0; background: none;
    font-size: 22px; font-weight: 500;
    line-height: 1.55;
    color: #1a1a1a;
    letter-spacing: .02em;
}
.spi-exam-page .spi-quiz-lognavi-headline::before,
.spi-exam-page .spi-quiz-lognavi-headline::after { content: none; display: none; }
.spi-quiz-lognavi-headline .is-accent { color: #26A69A; font-weight: 600; }
.spi-quiz-lognavi-lead {
    margin: 0 0 22px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #5d6f6c;
}
.spi-quiz-lognavi-lead strong { color: #1f8a80; font-weight: 600; }
.spi-exam-page .spi-quiz-lognavi-feats {
    list-style: none;
    margin: 0 0 24px;
    padding: 16px 18px;
    background: #F8FCFB;
    border-radius: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
.spi-exam-page .spi-quiz-lognavi-feats li {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0; margin: 0;
    font-size: 12px;
    color: #5d6f6c;
    letter-spacing: .02em;
    text-align: center;
    flex: 1;
}
.spi-quiz-lognavi-feat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: #E4F8F6;
    border-radius: 50%;
}
.spi-quiz-lognavi-feat-text { font-weight: 500; }
.spi-quiz-lognavi-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 22px;
    background: #26A69A; color: #fff;
    border-radius: 12px;
    font-weight: 500; font-size: 15px;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(38,166,154,.22);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .18s ease;
}
.spi-quiz-lognavi-cta:hover {
    transform: translateY(-2px);
    background: #1f8a80;
    box-shadow: 0 12px 24px rgba(38,166,154,.32);
    color: #fff;
}
.spi-quiz-lognavi-cta-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
}
@media (max-width: 720px) {
    .spi-quiz-lognavi { margin: 28px 0 12px; }
    .spi-quiz-lognavi-card { padding: 22px 20px 20px; }
    .spi-exam-page .spi-quiz-lognavi-headline { font-size: 18px; margin-bottom: 10px; }
    .spi-quiz-lognavi-lead { font-size: 12.5px; margin-bottom: 18px; }
    .spi-exam-page .spi-quiz-lognavi-feats { padding: 14px 12px; gap: 6px; margin-bottom: 20px; }
    .spi-exam-page .spi-quiz-lognavi-feats li { font-size: 11px; }
    .spi-quiz-lognavi-feat-icon { width: 32px; height: 32px; }
    .spi-quiz-lognavi-cta { padding: 14px 18px; font-size: 14px; }
}
.spi-quiz-result-summary {
    padding: 1.6em 1.6em 1.4em;
    border-radius: 18px;
    margin-bottom: 1.5em;
    border: 1px solid color-mix(in srgb, var(--spi-green) 16%, #fff);
    background:
        radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--spi-green) 10%, #fff) 0%, #fff 60%),
        #fff;
    box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 14px 30px -20px color-mix(in srgb, var(--spi-green) 60%, transparent);
}
.spi-quiz-result-stats { display: flex; align-items: stretch; justify-content: center; gap: 0; }
.spi-quiz-result-stat { flex: 1; text-align: center; padding: 0 1em; }
.spi-quiz-result-stat + .spi-quiz-result-stat { border-left: 1px solid color-mix(in srgb, var(--spi-green) 18%, #fff); }
.spi-quiz-result-summary .label { font-size: .8em; color: var(--spi-muted); display: block; margin-bottom: .35em; letter-spacing: .04em; }
.spi-quiz-result-summary .value { font-size: 2.1em; font-weight: 800; line-height: 1; color: var(--spi-green-dark); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; }
.spi-quiz-result-summary .value .unit { font-size: .5em; font-weight: 700; color: var(--spi-muted); letter-spacing: 0; }
.spi-quiz-result-stat.is-pct .value { background: linear-gradient(90deg, var(--spi-green), #2bb6a8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.spi-quiz-result-stat.is-pct .value .unit { -webkit-text-fill-color: var(--spi-muted); }
.spi-quiz-result-bar { margin-top: 1.25em; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--spi-green) 12%, #eef2f1); overflow: hidden; }
.spi-quiz-result-bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--spi-green), #5fd0c4); box-shadow: 0 0 0 1px color-mix(in srgb, var(--spi-green) 30%, transparent) inset; transition: width .6s cubic-bezier(.22,1,.36,1); }
.spi-quiz-result-list { display: flex; flex-direction: column; gap: .8em; }
.spi-quiz-review { padding: 1em 1.2em; border: 1px solid var(--spi-border); border-left-width: 4px; background: #fff; border-radius: 6px; }
.spi-quiz-review.is-correct { border-left-color: var(--spi-green); }
.spi-quiz-review.is-wrong   { border-left-color: var(--spi-red); }
.spi-quiz-review-head { display: flex; gap: .6em; align-items: center; margin-bottom: .3em; font-weight: 700; flex-wrap: wrap; }
.spi-quiz-review.is-correct .spi-quiz-review-verdict { color: var(--spi-green-dark); }
.spi-quiz-review.is-wrong   .spi-quiz-review-verdict { color: var(--spi-red); }
.spi-quiz-tag { display: inline-block; font-size: .75em; padding: .15em .7em; border-radius: 999px; background: var(--spi-green-light); color: var(--spi-green-dark); font-weight: 700; }
.spi-quiz-review dl { margin: .4em 0 0; font-size: .95em; }
.spi-quiz-review dt { font-weight: 700; color: var(--spi-muted); margin-top: .4em; }
.spi-quiz-review dd { margin: 0 0 0 1em; white-space: pre-wrap; }
.spi-quiz-result-actions { margin-top: 1.5em; display: flex; flex-direction: column; align-items: center; gap: .8em; }
/* 他の科目も練習するならこちら（SPIハブ導線・retryの上） */
.spi-quiz-other-subjects {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    padding: .8em 1.4em; border-radius: 11px;
    border: 1.5px solid var(--spi-green, #26A69A);
    background: #fff; color: var(--spi-green-dark, #1f8a80);
    font-weight: 800; font-size: .95em; letter-spacing: .01em;
    text-decoration: none;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.spi-quiz-other-subjects:hover {
    background: var(--spi-green-light, #E4F8F6);
    color: var(--spi-green-dark, #1f8a80);
    box-shadow: 0 4px 12px -6px rgba(38,166,154,.5);
}
.spi-quiz-other-subjects-arrow { transition: transform .16s cubic-bezier(0.23,1,0.32,1); font-weight: 800; }
.spi-quiz-other-subjects:hover .spi-quiz-other-subjects-arrow { transform: translateX(3px); }

/* ===== Result gate（spi-mini と同じ HTML/CSS 構造に統一） ===== */
.spi-quiz-gate { display: flex; justify-content: center; padding: 0; }
.spi-quiz-gate[hidden] { display: none; }
/* spi-mini の外枠スタイル（bg/border/padding/margin）を exam gate に当てない */
.spi-quiz-gate.spi-mini {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    box-shadow: none !important;
}
/* exam ページ: SANGO リンクスタイル打ち消し */
.spi-exam-page .spi-mini-gate-line {
    display: flex !important;
    border: none !important; border-bottom: none !important;
    text-decoration: none !important; color: #fff !important;
}
/* ラベルを絶対配置で確定（SANGOのspan上書きに勝つよう3クラスで詳細度を上げる）。
   模試CTAラベル：PC(デスクトップ)はボタン340pxと広いので19px。モバイルは狭い(ボタン290px)ので16pxへ下げる（下のmedia参照）。
   ミニは記事幅次第で被るためベース14pxのまま。 */
.spi-exam-page .spi-mini-gate-line .spi-mini-gate-line-label {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    /* 左右対称に44pxずつ確保し、絶対配置バッジ(left13px+幅30px=43px)にセンター文字が被らないようにする。
       box-sizingでpaddingを含めて全幅=ボタン幅に収め、中央寄せを維持（reference_line_cta_center_via_absolute_icon_arrow） */
    box-sizing: border-box !important;
    padding-left: 44px !important; padding-right: 44px !important;
    text-align: center !important;
    transform: none !important;
    color: #fff !important;
    font-size: 16px !important;
}
/* バッジの絶対配置を!importantで確定（SANGOの .entry-content span 上書きに勝つ）。
   サイズ(30px)/leftはベース spi-mini.css に集約済み */
.spi-exam-page .spi-mini-gate-line .spi-mini-gate-badge {
    position: absolute !important;
    left: 13px !important; top: 50% !important;
    transform: translateY(-50%) !important;
}
/* 以下の spi-quiz-gate-* は spi-mini-gate-* に移行済み。後方互換のため空定義を残す */
.spi-quiz-gate-card {
    width: 100%; max-width: 430px;
    /* 背景：方眼グリッド + ソフトミントの円 + キラキラ（Figma 259:2 を書き出したSVG）。
       100% auto で横幅基準＋縦横比維持。100% 100% だとモバイルの細長カードで横圧縮され
       円が楕円・キラキラがズレるため使わない。下部の隙間は背景色#fbfffeで自然に繋ぐ */
    background: #fbfffe url('../gate-bg-celebrate.svg?v=4') no-repeat top center;
    background-size: 100% auto;
    border: 1px solid #b6e9e4;
    border-radius: 20px;
    padding: 32px 26px 34px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(38,166,154,.12);
    box-sizing: border-box;
    /* ミニ(.spi-mini line-height:1.75)と行間を揃える。模試は独立ページで継承元が無く normal=詰まるため明示 */
    line-height: 1.75;
}

/* ねぎらい */
/* spi-reset の .spi-exam-page p{margin:0}(0,1,1) に勝つため .spi-exam-page で詳細度を上げる */
.spi-exam-page .spi-quiz-gate-eyebrow { margin: 0 0 1.5em; font-size: 20px; font-weight: 700; color: #18afa3; letter-spacing: .02em; }

/* 見出し（2段：大ソリッド＋小グレー）。グラデーション廃止（Figma 259:2） */
.spi-exam-page .spi-quiz-gate-title {
    margin: 0; padding: 0; border: 0; background: none; text-align: center;
}
.spi-exam-page .spi-quiz-gate-title::before,
.spi-exam-page .spi-quiz-gate-title::after { content: none; display: none; }
.spi-exam-page .spi-quiz-gate-title-main {
    display: block;
    color: #12a99d;
    font-size: 23px; font-weight: 700; line-height: 1.32; letter-spacing: .01em;
    text-shadow: 0 3px 0 rgba(0,0,0,.04);
}
.spi-exam-page .spi-quiz-gate-title-sub {
    display: block; margin-top: 16px; color: #818181; font-size: 13px; font-weight: 700; line-height: 22px;
    text-shadow: 0 3px 0 rgba(0,0,0,.04);
}

/* perks（無料 / 1分で登録完了 チップ・以前のデザインに復帰。テキストの圧を抑える） */
.spi-quiz-gate-perks {
    list-style: none; margin: 24px 0 16px; padding: 0;
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
}
.spi-quiz-gate-perk {
    display: inline-flex; align-items: center;
    padding: 4px 14px 4px 26px;
    background: #E4F8F6; color: #1f8a80;
    border-radius: 100px; font-size: 13px; font-weight: 700; line-height: 1.6;
    position: relative;
}
.spi-quiz-gate-perk::before {
    content: ''; position: absolute; left: 10px; top: 50%;
    width: 10px; height: 10px; border-radius: 50%;
    background: #26A69A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2 2 4-4' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateY(-50%);
}

/* LINE CTA */
.spi-quiz-gate-line {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 330px; min-height: 52px;
    margin: 0 auto; padding: 10px 16px;
    background: #06C755; color: #fff;
    border-radius: 24px;
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(3,140,56,.38), 0 5px 0 rgba(3,102,41,.55);
    box-sizing: border-box;
    transition: transform .08s ease;
}
.spi-quiz-gate-line:hover { color: #fff; }
.spi-quiz-gate-line:active { transform: translateY(2px); }
/* プライマリ(上部)CTAは気持ち大きく（Figma比 +6px・フォント16px） */
.spi-quiz-gate-line-primary { min-height: 60px; }
/* LINEアイコン：白枠(白い箱)を撤去。公式アイコンの緑がボタン緑(#06C755)に溶け込み吹き出しだけ映える */
.spi-quiz-gate-badge {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; background: transparent; flex-shrink: 0;
}
.spi-quiz-gate-line img.spi-line-mark { display: block; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; object-fit: contain; flex: none; }
/* ラベル：font-size 16px / translateX(4px) で光学中央 */
.spi-quiz-gate-line-label { position: absolute; left: 0; right: 0; transform: translateX(4px); color: #fff; font-weight: 700; font-size: 16px; text-align: center; line-height: 1.5; }

.spi-quiz-gate-line-primary .spi-quiz-gate-line-label { font-size: 16px; }
.spi-quiz-gate-line-free { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; }
.spi-quiz-gate-line-arrow-old { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 22px; line-height: 1; }

/* 下向き三角矢印 */
.spi-quiz-gate-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 13px solid #12a99d; margin: 10px auto 0; }

/* 解説ティーザーカード */
.spi-quiz-gate-blur-card { position: relative; background: #fff; border: 1.5px solid #b6e9e4; border-radius: 14px; margin: 20px auto 4px; max-width: 330px; overflow: hidden; text-align: left; }
.spi-quiz-gate-blur-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #12a99c; border-radius: 14px 0 0 14px; display: block; }
.spi-quiz-gate-blur-body { padding: 13px 14px 14px 20px; filter: blur(3.5px); pointer-events: none; user-select: none; }
.spi-quiz-gate-blur-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.spi-quiz-gate-blur-qno { display: inline-block; background: #e9f1f1; border-radius: 4px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #484a4d; }
.spi-quiz-gate-blur-verdict { font-size: 12px; font-weight: 700; color: #12a99c; }
.spi-quiz-gate-blur-text { margin: 0 0 10px; font-size: 12px; line-height: 1.7; color: #222831; }
.spi-quiz-gate-blur-sep { height: 1px; background: #edf3f3; margin: 0 0 10px; }
.spi-quiz-gate-blur-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; margin: 0; font-size: 11px; }
.spi-quiz-gate-blur-dt { color: #949aa0; font-weight: 700; }
.spi-quiz-gate-blur-dd { color: #222831; }
.spi-quiz-gate-blur-dd-ok { color: #12a99c; font-weight: 700; }
.spi-quiz-gate-blur-overlay { position: absolute; inset: 10px 8px; background: rgba(255,255,255,.62); border-radius: 10px; }
.spi-quiz-gate-blur-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #12a99c; border-radius: 999px; padding: 8px 14px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #12a99c !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(18,169,156,.18); cursor: pointer; transition: box-shadow .15s ease, transform .1s ease; }
.spi-quiz-gate-blur-pill:hover { box-shadow: 0 4px 12px rgba(18,169,156,.3); transform: translate(-50%,-52%); color: #12a99c !important; }
.spi-quiz-gate-blur-lock-icon { flex-shrink: 0; display: block; }

/* 注記 */
.spi-exam-page .spi-quiz-gate-note { display: block; margin: 10px 0 20px; font-size: 11px; color: #ff7a00; font-weight: 700; }

/* キーワード入力（lock + input + ＞submit）
   CTAは position:relative + 立体シャドウ(0 5px 0)で後続要素の前面に描画されるため、
   フォームに上余白(18px=Figma 259:2準拠)を設けて重なりを防ぐ */
.spi-quiz-gate-form { margin: 18px 0 0; }
.spi-quiz-gate-field {
    position: relative; width: 100%; max-width: 291px; height: 60px; margin: 0 auto;
    background: #eff5f7; border: 2px solid #b6e9e4; border-radius: 22px; box-sizing: border-box;
}
.spi-quiz-gate-field:focus-within { border-color: #12a99c; }
.spi-quiz-gate-lock { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.spi-quiz-gate-lock-body { position: absolute; left: 2px; top: 9px; width: 16px; height: 11px; background: #949aa0; border-radius: 2px; }
.spi-quiz-gate-lock-shackle { position: absolute; left: 5px; top: 2px; width: 10px; height: 10px; border: 2px solid #949aa0; border-bottom: 0; border-radius: 5px 5px 0 0; }
.spi-exam-page .spi-quiz-gate-field .spi-quiz-gate-input {
    width: 100%; height: 100%; border: 0; background: transparent;
    padding: 0 46px 0 48px; margin: 0;
    font: inherit; font-size: 15px; font-weight: 500; color: var(--spi-text);
    outline: none; box-shadow: none; box-sizing: border-box;
}
.spi-quiz-gate-input::placeholder { color: #949aa0; font-weight: 500; }
.spi-quiz-gate-input.is-error { color: #e04e4e; }
.spi-quiz-gate-field:has(.spi-quiz-gate-input.is-error) { border-color: #e04e4e; }
/* ＞送信ボタン：ティール角丸ボタン化（Figma 259:2 / go-btn-bg） */
.spi-quiz-gate-go {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; background: #12a99d; color: #fff;
    border-radius: 12px;
    font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .08s ease;
}
.spi-quiz-gate-go:hover { background: #0e8e84; }
.spi-quiz-gate-go:active { transform: translateY(-50%) scale(.94); }
.spi-quiz-gate-error { margin: 8px 0 0; color: #e04e4e; font-size: 13px; }
.spi-quiz-gate-error[hidden] { display: none; }

/* 社会的証明 */
.spi-quiz-gate-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 16px; }
.spi-quiz-gate-proof svg { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.spi-quiz-gate-proof-num { color: #f56e05; font-weight: 900; font-size: 20px; letter-spacing: .6px; }
.spi-quiz-gate-proof-suf { color: #818181; font-weight: 700; font-size: 14px; }

/* 無料・登録完了コピー：CTAに近づける（下マージンを詰める） */
.spi-exam-page .spi-quiz-gate-minute { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #12a99d; line-height: 20px; }

/* セクション見出し（Figma 259:2 / 264:124） */
.spi-exam-page .spi-quiz-gate-section-title { margin: 24px 0 12px; font-size: 15px; font-weight: 700; color: #16a99d; line-height: 22px; text-align: center; }

/* ベネフィット（タイトルのみ） */
.spi-quiz-gate-benefits { display: flex; flex-direction: column; gap: 6px; max-width: 270px; margin: 0 auto; }
.spi-quiz-gate-benefit {
    display: flex; align-items: center; gap: 12px; min-height: 72px;
    background: #fff; border: 1px solid #b6e9e4; border-radius: 18px; padding: 9px 14px;
    box-shadow: 0 10px 24px rgba(20,153,141,.10); text-align: left;
}
.spi-quiz-gate-benefit-icon {
    flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: #ddf4ef; border: 1px solid #d9f3ef; border-radius: 26px;
}
.spi-quiz-gate-benefit-icon svg { width: 27px; height: 27px; display: block; }
.spi-exam-page .spi-quiz-gate-benefit-title { margin: 0; color: #14998d; font-weight: 900; font-size: 14px; line-height: 1.3; }

/* 下部CTA（Figma: w-[298px] = 上部330pxより一回り小さい） */
.spi-quiz-gate-line-bottom { margin-top: 20px; max-width: 298px; }

/* スクリーンリーダー専用 */
.spi-quiz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== レスポンシブ ===== */
@media (max-width: 720px) {
    /* SANGO子テーマ固定ヘッダー(62px)に隠れるのを防ぐ。
       SANGO親 first-child margin-top:0.1em と衝突しない padding-top で確実に効かせる。 */
    .spi-exam-page { padding-top: 80px; }
    #spi-exam-app.spi-quiz { margin: 1em; padding: 1.2em 1em; }
    /* 結果ゲートだけは #spi-exam-app の左右padding(1em)を負マージンで取り戻して横幅確保
       （360px端末でボタン実幅 258→約292pxへ）。16pxラベルをバッジと被らず収めるため。解除後の結果本体には効かせない。
       .spi-quiz-gate.spi-mini{margin:0 !important}(外枠リセット)に勝つよう !important＋詳細度を上げる */
    .spi-exam-page .spi-quiz-result .spi-quiz-gate.spi-mini { margin-left: -1em !important; margin-right: -1em !important; }
    /* モバイルはボタンが狭い(約290px)ので、PCの19pxだとバッジと被る→16pxへ下げる */
    .spi-exam-page .spi-mini-gate-line .spi-mini-gate-line-label { font-size: 15px !important; }
    .spi-quiz-header { display: none; }
    .spi-quiz-question { position: relative; }
    .spi-quiz-meter.is-inline { position: absolute; top: .8em; right: .8em; flex-direction: column; align-items: center; gap: .2em; z-index: 1; }
    .spi-quiz-meter-chart { width: 52px; height: 52px; }
    .spi-quiz-question-text { padding-right: 72px; }
    /* モバイルでは凡例ラベル（時間/解答状況）を隠して、進捗数字のみコンパクト表示 */
    .spi-quiz-meter-legend { font-size: 0; line-height: 1.2; }
    .spi-quiz-meter-legend li:first-child { display: none; }
    .spi-quiz-meter-legend li:last-child { font-size: 0; gap: 0; }
    .spi-quiz-meter-legend li:last-child .dot { display: none; }
    .spi-quiz-meter-legend li:last-child em { font-size: 13px; margin: 0; }
    .spi-quiz-body { display: block; gap: 0; padding-top: 0; border-top: none; }
    .spi-quiz-question { margin-bottom: 1.2em; }
    .spi-quiz-question-text {
        font-size: .95em;
        line-height: 1.7;
    }
    .spi-quiz-question-figure { padding-right: 0; }
    .spi-quiz-footer { flex-wrap: wrap; gap: .8em; }
    .spi-quiz-timebar { flex: 1 1 100%; }
    .spi-quiz-next { width: 100%; }
    .spi-quiz-result-summary { padding: 1.3em 1.1em 1.2em; }
    .spi-quiz-result-stat { padding: 0 .6em; }
    .spi-quiz-result-summary .value { font-size: 1.85em; }

    /* ===== モバイル: ゲート ===== */
    /* spi-mini-gate-card はspi-mini.cssの540px対応で処理済み */
    /* キーワード入力欄は一回り狭く */
    .spi-exam-page .spi-mini-gate-field { max-width: 92%; }
}