/* ============================================================================
   EFA www — FAQ page (design/よくある質問.svg, 1440px). Loads after
   www-program.css, which supplies the page hero and jump chips.

   Artboard section boundaries: hero 152→608.9, then four question groups
   (→1433.6, →2271.8, →3109.9, →3948.1) and the footer. Groups 1 and 4 hold
   three closed questions, groups 2 and 3 four; the artboard pads them so the
   four plates are equally tall.
   ========================================================================== */

.faq-hero { padding: calc(74 * var(--u)) 0 calc(89.1 * var(--u)); }
.faq-hero .section-label { margin-right: calc(34 * var(--u)); } /* the label plate is drawn 17px left of centre */
.faq-hero .section-title-h1 { margin-top: calc(23.7 * var(--u)); }
.faq-hero .section-lead { margin: calc(32.1 * var(--u)) auto 0; margin-right: calc(60 * var(--u)); line-height: calc(28 * var(--u)); } /* drawn 30px left of centre */
.faq-hero .jump-nav { margin: calc(36.6 * var(--u)) 0 0 calc(261.5 * var(--u)); }

.faq-group { padding: calc(71.9 * var(--u)) 0 calc(133.8 * var(--u)); }
.faq-group-2, .faq-group-3 { padding-top: calc(85.4 * var(--u)); padding-bottom: calc(69 * var(--u)); }
.faq-group-4 { padding-top: calc(85.5 * var(--u)); }
.faq-group .faq-list { width: calc(926.2 * var(--u)); margin: calc(61.4 * var(--u)) 0 0 calc(264.3 * var(--u)); }
.faq-group .faq-item summary { padding: 0 calc(90 * var(--u)) 0 calc(0.1 * var(--u)); line-height: calc(34 * var(--u)); }
.faq-group .faq-toggle { top: calc(-3.8 * var(--u)); }
.faq-group .faq-item + .faq-item { margin-top: calc(32.35 * var(--u)); }
/* Open answers sit on a tinted plate that starts just under the rule and
   reaches 2.9px left of it; the next question follows 60.4px below it. */
.faq-group .faq-a {
    width: calc(929.1 * var(--u));
    margin: calc(2.8 * var(--u)) 0 0 calc(-2.9 * var(--u));
    padding: calc(25.4 * var(--u)) calc(30 * var(--u)) calc(42.6 * var(--u)) calc(57.1 * var(--u));
    background: var(--cyan-tint);
}
.faq-group-1 .faq-a { padding-left: calc(36.3 * var(--u)); }
.faq-group .faq-item[open] + .faq-item { margin-top: calc(60.4 * var(--u)); }

/* ── Phone (design/mobile/アートボード 6.svg, 716px artboard) ─────────────
   Hero 152→668.9, groups →1409 / →2236.9 / →3075.3 / →3835.6, footer. */

/* ── English desktop: the four longer chips are centred instead of left-aligned ── */
@media (width > 900px) {
    html:lang(en) .faq-hero .jump-nav { margin-left: 0; justify-content: center; }
}

@media (max-width: 900px) {
    .faq-hero { padding: calc(71.1 * var(--u)) 0 calc(59 * var(--u)); }
    .faq-hero .section-label { margin-right: 0; }
    .faq-hero .section-title-h1 { margin-top: calc(23.7 * var(--u)); font-size: max(28px, calc(72 * var(--u))); line-height: calc(72 * var(--u)); }
    .faq-hero .section-lead { margin: calc(23.6 * var(--u)) 0 0; line-height: calc(33.9 * var(--u)); }
    .faq-hero .jump-nav { gap: calc(28.1 * var(--u)) calc(12.6 * var(--u)); margin: calc(20.1 * var(--u)) calc(60 * var(--u)) 0; }
    .faq-hero .jump-nav a { width: calc(221.4 * var(--u)); }

    .faq-group, .faq-group-2, .faq-group-3, .faq-group-4 { padding: calc(32.1 * var(--u)) 0 calc(84.6 * var(--u)); }
    .faq-group-2 { padding-top: calc(76.4 * var(--u)); padding-bottom: calc(59.6 * var(--u)); }
    .faq-group-3 { padding-top: calc(70.9 * var(--u)); padding-bottom: calc(75.6 * var(--u)); }
    .faq-group-4 { padding-top: calc(68.3 * var(--u)); padding-bottom: calc(68.7 * var(--u)); }
    .faq-group .section-title { margin-top: calc(13 * var(--u)); }
    .faq-group .faq-list { width: calc(644.7 * var(--u)); margin: calc(33.9 * var(--u)) 0 0 calc(23 * var(--u)); }
    .faq-group .faq-item summary { padding: 0 calc(45 * var(--u)) 0 calc(0.1 * var(--u)); font-size: max(13px, calc(24 * var(--u))); line-height: calc(34 * var(--u)); }
    .faq-group .faq-toggle { top: calc(-3.8 * var(--u)); right: calc(-31.1 * var(--u)); }
    .faq-group .faq-item + .faq-item { margin-top: calc(32.4 * var(--u)); }
    .faq-group .faq-a, .faq-group-1 .faq-a {
        width: calc(643 * var(--u));
        margin: calc(4.9 * var(--u)) 0 0 calc(-1 * var(--u));
        padding: calc(25 * var(--u)) calc(20 * var(--u)) calc(30.7 * var(--u)) calc(24.2 * var(--u));
        font-size: max(13px, calc(24 * var(--u)));
        line-height: calc(33.9 * var(--u));
    }
    .faq-group .faq-item[open] + .faq-item { margin-top: calc(27.6 * var(--u)); }
}

/* ── English phone: chips grow to their labels and the row widens to 656px so the
   four chips still sit two per row (22px labels, 18px side padding) ─────────── */
@media (max-width: 900px) {
    html:lang(en) .faq-hero .jump-nav { margin-left: calc(30 * var(--u)); margin-right: calc(30 * var(--u)); }
    html:lang(en) .faq-hero .jump-nav a { width: auto; min-width: calc(221.4 * var(--u)); padding-left: calc(18 * var(--u)); padding-right: calc(18 * var(--u)); font-size: max(13px, calc(22 * var(--u))); }
}