/* ============================================================
   JINRO — RECRUIT page (recruit.html only)

   Independent page, not a company.html section. Reuses foundation.css
   tokens (--jr-*) and components.css primitives (.jr-section-shell,
   .jr-section-title, .jr-focus-ring, .jr-carousel-controls/-control/
   -dots/-dot, .jr-arrow-icon, the shared .jr-site-header/
   .jr-site-footer components), like company.html/support.html.

   No real photography exists yet for this page (spec: placeholder only,
   no new image generation) — every visual slot below is a flat
   placeholder block (background: var(--jr-color-surface-soft)), same
   technique products.html/company.html already use for pending assets.

   FAQ accordion here is NOT support.js/support.css reused verbatim —
   support.html's approved output must stay untouched, so this is a
   page-scoped rebuild of the exact same pattern (grid-template-rows
   panel transition, aria-expanded, 44px+ tap target) under
   .recruit-faq__* class names instead of .support-faq__*. If a shared
   accordion primitive is ever extracted (mirroring how .jr-news-row /
   .jr-pill-control were pulled out of page-specific CSS this same
   sprint), support.html can adopt it too without this page changing.
   ============================================================ */

.recruit-page {
    --rc-anchor-offset: 96px;
}

.recruit-page .recruit-section {
    padding: var(--jr-section-space-y) 0;
    scroll-margin-top: var(--rc-anchor-offset);
}

.recruit-page .recruit-section--alt {
    background: var(--jr-color-surface-soft);
}

.recruit-page .recruit-section__heading {
    margin: 0 0 clamp(40px, 5vw, 64px);
}

/* #jobs only — matches TOP's .top-company__heading gap (styles.css,
   clamp(46px, 5vw, 70px)) since this section's grid is now that same
   card component. The shared .recruit-section__heading rule above still
   governs every other Recruit section (MESSAGE/DATA/PEOPLE/BENEFITS/
   FAQ) unchanged. */
.recruit-page #jobs .recruit-section__heading {
    margin-bottom: clamp(46px, 5vw, 70px);
}

/* Eyebrow — the shared .jr-section-eyebrow (components.css), added
   alongside this class in the markup; no page-local size/color here. */

/* 02 Recruit KV — page-scoped video hero. The video uses the same
   section shell, eyebrow and title rhythm as the shared Page KV, while
   keeping the media layer independent from the content layer. */
.recruit-video-kv {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--jr-color-ink);
}

.recruit-video-kv__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.recruit-video-kv__media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(18, 18, 18, 0.46) 0%, rgba(18, 18, 18, 0.22) 42%, rgba(18, 18, 18, 0) 72%);
}

.recruit-video-kv__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.recruit-video-kv__inner {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 96px;
    padding-bottom: 96px;
}

.recruit-video-kv__content {
    max-width: 620px;
}

.recruit-video-kv__title {
    font-family: var(--jr-font-brand-heading);
    margin: 0;
    color: #fff;
    font-size: 80px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.005em;
}

.recruit-video-kv__title span {
    display: block;
}

.recruit-video-kv__title .recruit-video-kv__title-line {
    display: inline-flex;
    align-items: center;
    gap: 0.12em;
}

.recruit-video-kv__title-logo {
    width: auto;
    height: 0.92em;
    aspect-ratio: 121.844 / 40;
    flex: 0 0 auto;
    transform: translateY(0.025em);
}

.recruit-video-kv__description {
    margin: 28px 0 0;
    color: #fff;
    font-size: var(--jr-content-body-size);
    line-height: var(--jr-content-body-line-height);
}

.recruit-page .recruit-video-kv__cta {
    margin-top: 32px;
    color: #fff;
    background: var(--jr-color-red);
    border-color: var(--jr-color-red);
    text-decoration: none;
}

.recruit-page .recruit-video-kv__cta:hover,
.recruit-page .recruit-video-kv__cta:focus-visible {
    color: var(--jr-color-red);
    background: #fff;
    border-color: #fff;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .recruit-video-kv__inner {
        justify-content: flex-start;
        padding-top: 160px;
        padding-bottom: 64px;
    }

    .recruit-video-kv__title { font-size: 56px; }
}

@media (max-width: 767px) {
    .recruit-video-kv__media::after {
        background: linear-gradient(180deg, rgba(18, 18, 18, 0) 18%, rgba(18, 18, 18, 0.13) 52%, rgba(18, 18, 18, 0.37) 100%);
    }

    .recruit-video-kv__inner {
        align-items: flex-start;
        justify-content: flex-end;
        padding-top: 96px;
        padding-bottom: 48px;
    }

    .recruit-video-kv__title { font-size: 40px; }
    .recruit-video-kv__description { margin-top: 20px; }
    .recruit-page .recruit-video-kv__cta { margin-top: 24px; }
}

/* ============================================================
   03 採用メッセージ — large editorial typography, generous whitespace,
   centered (not the shared left-aligned Eyebrow → Title default —
   scoped to #message only, so DATA/PEOPLE/BENEFITS/FAQ keep their own
   left-aligned heading).
   ============================================================ */
.recruit-page #message .jr-section-shell {
    text-align: center;
}

.recruit-page #message .recruit-message__body {
    margin-left: auto;
    margin-right: auto;
}

.recruit-page .recruit-message__en {
    margin: 0;
    color: var(--jr-color-ink);
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.recruit-page .recruit-message__en em {
    font-style: normal;
    color: var(--jr-color-red);
}

.recruit-page .recruit-message__jp {
    margin: 32px 0 0;
    color: var(--jr-color-ink);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.7;
}

.recruit-page .recruit-message__body {
    margin: 32px 0 0;
    max-width: 720px;
    color: var(--jr-color-text);
    font-size: var(--jr-content-body-size);
    line-height: 1.85;
}

/* ============================================================
   05 数字で見るJINRO — dark editorial DATA grid. PC 4×2 / Tablet 2×4 /
   Mobile 1×8. Same #121212/#fff pairing as .jr-dark-section
   (components.css) — a scoped override here rather than that shared
   class, since .recruit-section--alt already carries this section's
   spacing/scroll-margin and only ITS background/text need to flip.
   Divider-grid technique (1px gap “background bleeds through” as
   hairlines) is unchanged from the previous light version, just at a
   dark-appropriate opacity instead of var(--jr-color-line) — same
   convention as styles.css's other dark-bg hairline borders (e.g.
   .hero__arrow, rgba(255,255,255,.4-.7)). Label/value sizes are pulled
   from the existing --jr-card-title-* / --jr-section-title-* families,
   not new numbers; secondary text reuses .jr-section-intro's existing
   dark-bg muted value (rgba(255,255,255,.72), components.css). No card
   radius/shadow, no icons — editorial rows, not a dashboard. */
.recruit-page #data.recruit-section--alt {
    background: #121212;
    color: #fff;
}

.recruit-page #data .jr-section-title {
    color: #fff;
}

.recruit-page .recruit-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Dividers are borders on each card, not a 1px grid-gap bleeding through
   a lighter background — that gap technique showed a visibly grey seam
   whenever a card's own [data-jr-reveal] opacity was mid-fade (the gap's
   rgba(255,255,255,.16) background doesn't match the card's #121212, so
   a translucent card let it show through). Borders live on the same
   element as the fading content, so they fade together and the section's
   own #121212 background — identical to each card's — shows through
   seamlessly instead. */
/* Cell padding/alignment is the shared skeleton of this page's two
   information grids (DATA here, ENVIRONMENT below) — declared once, so
   the two can't drift apart. Only the divider colour differs, and each
   grid supplies it through --recruit-grid-line. */
.recruit-page .recruit-stats__card,
.recruit-page .recruit-benefits__cell {
    padding: 40px 32px;
    text-align: left;
    border-right: 1px solid var(--recruit-grid-line);
    border-bottom: 1px solid var(--recruit-grid-line);
}

.recruit-page .recruit-stats {
    --recruit-grid-line: rgba(255, 255, 255, 0.16);
}

.recruit-page .recruit-stats__card {
    background: #121212;
}

.recruit-page .recruit-stats__card:nth-child(4n) {
    border-right: none;
}

.recruit-page .recruit-stats__card:nth-last-child(-n+4) {
    border-bottom: none;
}

/* Label typography is shared with ENVIRONMENT's benefit titles below —
   one declaration, so the two grids read as the same information tier
   (spacing below the label is --jr-space-5 / 20px, the rhythm that sets
   DATA's label→figure gap and ENVIRONMENT's label→icon gap alike).
   Colour stays per-section: #fff on DATA's dark ground, ink on
   ENVIRONMENT's light one. */
.recruit-page .recruit-stats__label,
.recruit-page .recruit-benefits__label {
    margin: 0 0 var(--jr-space-5);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.recruit-page .recruit-stats__label {
    color: #fff;
}

.recruit-page .recruit-stats__value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Root cause of the previous mismatch: ".recruit-stats__value span" was a
   bare-element descendant selector, so it caught BOTH the number span and
   the unit span alike, silently shrinking every number that had a unit
   sibling (55:45 has no unit span, so it alone kept the large size). Number
   and unit are now their own classes — exactly one selector per role,
   applied identically to all 8 cards regardless of unit/no-unit. */
.recruit-page .recruit-stats__number {
    color: #fff;
    font-size: 54px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.recruit-page .recruit-stats__unit {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .recruit-page .recruit-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 2 cols × 4 rows here — right border drops every 2nd card, bottom
       border drops the last row (last 2 cards), same logic as the PC
       4-col rule above just re-based on this grid's own column count. */
    .recruit-page .recruit-stats__card:nth-child(2n) {
        border-right: none;
    }

    .recruit-page .recruit-stats__card:nth-last-child(-n+4) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .recruit-page .recruit-stats__card:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .recruit-page .recruit-stats__number {
        font-size: 46px;
    }
}

@media (max-width: 767px) {
    .recruit-page .recruit-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 1 col — no right dividers at all, only bottom ones, last card's
       removed. */
    .recruit-page .recruit-stats__card {
        border-right: none;
    }

    .recruit-page .recruit-stats__card:nth-last-child(-n+4) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .recruit-page .recruit-stats__card:last-child {
        border-bottom: none;
    }

    .recruit-page .recruit-stats__number {
        font-size: 40px;
    }
}

/* ============================================================
   06 社員紹介 — scroll-snap carousel: PC shows 3 cards, Mobile 1 (spec
   12). Prev/Next + dots reuse components.css's shared
   .jr-carousel-controls/-control/-dots/-dot (the same visual language
   TOP's hero/pickup carousels use) — assets/js/recruit.js only wires
   scroll-position → active dot / disabled-arrow state, it does not
   reimplement that control chrome.
   ============================================================ */
.recruit-page .recruit-staff__viewport {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -4px;
    padding: 4px;
}

.recruit-page .recruit-staff__viewport::-webkit-scrollbar {
    display: none;
}

.recruit-page .recruit-staff__card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
}

.recruit-page .recruit-staff__media {
    aspect-ratio: 3 / 4;
    background: var(--jr-color-surface-soft);
    border-radius: 8px;
    overflow: hidden;
}

.recruit-page .recruit-staff__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--jr-duration-slow) var(--jr-ease-standard);
}

/* Card typography below uses the same --jr-card-label/-title/-desc
   tokens as product-detail-lineup__name/spec, cocktail-card__name/desc,
   etc. — the site's one shared Card Typography scale — instead of
   page-local px values, so this card sits at the same visual weight as
   every other card on the site at each breakpoint. */
.recruit-page .recruit-staff__dept {
    margin: 18px 0 0;
    color: var(--jr-color-red);
    font-size: var(--jr-card-label-size);
    font-weight: var(--jr-card-label-weight);
    line-height: var(--jr-card-label-line-height);
    letter-spacing: 0.08em;
}

.recruit-page .recruit-staff__name {
    margin: 6px 0 0;
    color: var(--jr-color-ink);
    font-family: var(--jr-font-serif-jp);
    font-size: var(--jr-card-title-size);
    font-weight: var(--jr-card-title-weight);
    line-height: var(--jr-card-title-line-height);
    transition: color var(--jr-duration-base) var(--jr-ease-standard);
}

@media (hover: hover) {
    .recruit-page .recruit-staff__card:hover .recruit-staff__media img {
        transform: scale(1.03);
    }
    .recruit-page .recruit-staff__card:hover .recruit-staff__name {
        color: var(--jr-color-red);
    }
}

.recruit-page .recruit-staff__desc {
    margin: 8px 0 0;
    color: var(--jr-color-muted);
    font-size: var(--jr-content-supporting-size);
    font-weight: var(--jr-content-supporting-weight);
    line-height: var(--jr-content-supporting-line-height);
}

.recruit-page .recruit-staff__nav {
    margin-top: 32px;
}

.recruit-page .recruit-staff__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 4.5vw, 56px);
}

/* Color-only modifier on the shared .jr-pill-control size system
   (components.css) — same outline→ink-fill hover language as
   enjoy.html/company.html/support.html's own pill CTAs, just declared
   under this page's own scope instead of reusing their page-scoped
   classes (which only apply under .enjoy-page/.company-page/
   .support-page ancestors). */
.recruit-page .recruit-cta-link {
    color: var(--jr-color-ink);
    border-color: var(--jr-color-ink);
    text-decoration: none;
}

.recruit-page .recruit-cta-link:hover,
.recruit-page .recruit-cta-link:focus-visible {
    color: #fff;
    background: var(--jr-color-ink);
}

.recruit-page .recruit-cta-link:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

.recruit-page .recruit-cta-link svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ============================================================
   07 働く環境・福利厚生 — information grid, PC 4×2 / Tablet+Mobile 2×4.

   Structurally the same divided grid as DATA above (shared cell padding
   and label typography — see those rules), so both sections read as one
   information system: title first, supporting element under it, cells
   separated by internal rules only. What is NOT shared is the palette:
   this section keeps its light ground, ink type and black line icons, so
   the divider comes from the site's own --jr-color-line instead of
   DATA's white-on-dark rgba. No card fill, no radius, no outer frame and
   no hover — it is a static information grid, not a set of link cards.
   ============================================================ */
.recruit-page .recruit-benefits {
    --recruit-grid-line: var(--jr-color-line);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 8 items / 4 columns: drop the right rule on the last column and the
   bottom rule on the last row, leaving internal dividers only. */
.recruit-page .recruit-benefits__cell:nth-child(4n) {
    border-right: none;
}

.recruit-page .recruit-benefits__cell:nth-last-child(-n+4) {
    border-bottom: none;
}

/* Lucide line-icon set, inlined as SVG (see recruit.html for the
   attribution/rationale comment) — same stroke-icon convention as
   .company-anchors__link svg (currentColor stroke, 1.75 stroke-width).
   Fixed box so all eight read at one optical size regardless of how much
   of the 24-unit viewBox each glyph fills. */
.recruit-page .recruit-benefits__icon {
    width: 44px;
    height: 44px;
    display: block;
    color: var(--jr-color-ink);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.recruit-page .recruit-benefits__label {
    color: var(--jr-color-ink);
}

/* Tablet AND Mobile are the same 2×4 grid here (unlike DATA, which goes
   to a single column on Mobile — its 54px figures need the full width,
   these short labels do not), so the column count and its divider logic
   are declared once for both. */
@media (max-width: 1023px) {
    .recruit-page .recruit-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recruit-page .recruit-benefits__cell:nth-child(2n) {
        border-right: none;
    }

    /* Re-based on 2 columns: rows 1–3 keep their bottom rule, only the
       final row (last 2 cells) drops it. */
    .recruit-page .recruit-benefits__cell:nth-last-child(-n+4) {
        border-bottom: 1px solid var(--recruit-grid-line);
    }

    .recruit-page .recruit-benefits__cell:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* ============================================================
   08 募集職種 — 2 job-type cards. Grid/card/media/content/title/desc/
   arrow are the shared .jr-promo-card-grid/.jr-promo-card/__media/
   __content/__title/__desc/__arrow component (components.css) — the
   exact same CSS rules TOP's 企業情報 grid uses, not a copy.
   ============================================================ */

/* ============================================================
   09 FAQ — accordion, restyled onto the same editorial-list visual
   language as TOP's .top-news__* (index.html/styles.css): hairline
   list border (--jr-color-line, not ink), a 3-column row axis (marker
   / text / arrow) matching .top-news__row's meta/title/arrow columns,
   the same column-gap clamp, and .top-news__article-title's font
   clamp/weight/line-height/letter-spacing as the question's base (bumped
   to weight 600 since this is an interactive control, not a link-out
   list item). Page-scoped rebuild of support.html's .support-faq__*
   pattern (see file banner comment above) — visual VALUES are kept
   identical between the two pages by design, just under different
   selectors, so the two FAQs read as one shared component. Q1 starts
   open (spec 11). Accordion mechanics (grid-row track, aria-expanded,
   is-open class, JS) are unchanged — this is a visual pass only.
   ============================================================ */
.recruit-page .recruit-faq__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--jr-color-line);
}

.recruit-page .recruit-faq__item {
    border-bottom: 1px solid var(--jr-color-line);
}

.recruit-page .recruit-faq__question {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: clamp(18px, 2vw, 32px);
    width: 100%;
    padding: 0;
    color: var(--jr-color-ink);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard);
}

.recruit-page .recruit-faq__question:hover {
    color: var(--jr-color-red);
}

.recruit-page .recruit-faq__question:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

.recruit-page .recruit-faq__marker {
    color: var(--jr-color-red);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.recruit-page .recruit-faq__question-text {
    min-width: 0;
    padding-block: 28px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.recruit-page .recruit-faq__icon {
    position: relative;
    justify-self: center;
    width: 20px;
    height: 20px;
}

.recruit-page .recruit-faq__icon::before,
.recruit-page .recruit-faq__icon::after {
    position: absolute;
    left: 50%;
    top: 50%;
    content: '';
    width: 16px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--jr-duration-base) var(--jr-ease-standard),
                opacity var(--jr-duration-base) var(--jr-ease-standard);
}

.recruit-page .recruit-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.recruit-page .recruit-faq__question[aria-expanded="true"] .recruit-faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

.recruit-page .recruit-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--jr-duration-base) var(--jr-ease-standard);
}

.recruit-page .recruit-faq__panel.is-open {
    grid-template-rows: 1fr;
}

.recruit-page .recruit-faq__panel-inner {
    overflow: hidden;
}

/* Same 3-column axis as the question row above, so the answer body
   starts flush under the question text — no card/soft-fill background,
   stays part of the same white editorial list. */
.recruit-page .recruit-faq__answer {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 44px;
    align-items: start;
    column-gap: clamp(18px, 2vw, 32px);
    margin: 0;
    padding: 0 0 32px;
    background: transparent;
}

.recruit-page .recruit-faq__answer .recruit-faq__marker {
    padding-top: 2px;
    color: var(--jr-color-muted);
}

.recruit-page .recruit-faq__answer-body {
    min-width: 0;
    color: var(--jr-color-text);
    font-size: var(--jr-content-body-size);
    line-height: 1.85;
}

.recruit-page .recruit-faq__answer-body p {
    margin: 0;
}

/* ============================================================
   Tablet (768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 福利厚生's Tablet columns/dividers live with the section itself (one
       shared max-width:1023px rule covering Tablet + Mobile alike). */
    .recruit-page .recruit-staff__card { flex: 0 0 calc((100% - 24px) / 2); }

    .recruit-page .recruit-faq__question-text { font-size: 18px; }
}

/* ============================================================
   Mobile (max 767px) — layout change, not a plain shrink (spec 12):
   社員紹介 3→1, 数字で見るJINRO 4→1 (own 1-col rule above), 福利厚生 4→2,
   募集職種 2→1.
   ============================================================ */
@media (max-width: 767px) {
    .recruit-page .recruit-stats__card { padding: 28px 20px; }

    .recruit-page .recruit-staff__card { flex: 0 0 100%; }
    .recruit-page .recruit-staff__viewport { gap: 16px; }

    /* Columns/dividers come from the section's own max-width:1023px rule;
       only the cell inset tightens here, so two cells still fit at 390px
       without the label wrapping awkwardly. */
    .recruit-page .recruit-benefits__cell { padding: 28px 16px; }

    .recruit-page .recruit-faq__question {
        grid-template-columns: 36px minmax(0, 1fr) 44px;
        column-gap: 12px;
        align-items: flex-start;
    }
    .recruit-page .recruit-faq__question-text { padding-block: 16px 15px; font-size: 17px; line-height: 1.65; }
    .recruit-page .recruit-faq__marker { font-size: 14px; padding-top: 18px; }
    .recruit-page .recruit-faq__icon { align-self: center; }
    .recruit-page .recruit-faq__answer {
        grid-template-columns: 36px minmax(0, 1fr) 44px;
        column-gap: 12px;
        padding: 0 0 24px;
    }
    /* __answer-body's size now comes from --jr-content-body-size (already
       16px at Mobile), same as support-faq__answer-body — no page-local
       override needed. */
}

@media (prefers-reduced-motion: reduce) {
    .recruit-page .recruit-faq__panel,
    .recruit-page .recruit-faq__icon::before,
    .recruit-page .recruit-faq__icon::after,
    .recruit-page .recruit-staff__media img,
    .recruit-page .recruit-staff__name {
        transition: none;
    }
}