/* ============================================================
   JINRO — COMPANY page (company.html only)

   Rebuilt from scratch on the current JINRO Renewal design system.
   Not a new design system: reuses foundation.css tokens (--jr-*) and
   components.css primitives (.jr-section-shell, .jr-section-title,
   .jr-focus-ring, the shared .jr-site-header / .jr-page-kv /
   .jr-site-footer components), like products.html / enjoy.html /
   news.html.

   Everything here is scoped under .company-page so it can never leak
   onto or override TOP / Products / Product Detail / Enjoy / Cocktail /
   Cooking / News. It depends only on foundation.css and components.css.
   ============================================================ */

.company-page {
    /* Clearance so an anchored section title is never hidden behind the
       fixed shared header (96px desktop / 64px tablet+mobile), with a
       little breathing room. Consumed by scroll-margin-top below. */
    --co-anchor-offset: 136px;
}

/* ============================================================
   Section frame — one shared rhythm for MESSAGE / ORIGIN / HISTORY /
   OUTLINE / RECRUIT, using the site's section spacing token.
   ============================================================ */
.company-page .company-section {
    padding: var(--jr-section-space-y) 0;
    scroll-margin-top: var(--co-anchor-offset);
}

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

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

/* Center only HISTORY's and OUTLINE's section heading — MESSAGE (and
   any other section reusing .company-section__heading) is untouched. */
#history .company-section__heading,
#outline .company-section__heading {
    text-align: center;
}

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

/* Title uses the shared Section Title token — no page-local size. */

/* ============================================================
   04 Anchor Navigation
   In-flow one-line strip directly under the Page KV, as in the
   wireframe — deliberately NOT sticky: the shared header already
   hides/shows on scroll, and a second sticky layer under it would
   have to chase that state and would sit on top of section titles.
   PC: five equal cells in a bordered row. Tablet: the same row
   becomes a single horizontally-scrollable line, consistent with the
   2nd-level nav UX already used by .product-subnav /
   .news-filter__categories. Mobile: a full-bleed 2×2 grid of the four
   in-page items (採用情報 hidden; no horizontal scroll). Section clearance is handled purely by
   scroll-margin-top on .company-section (--co-anchor-offset).
   ============================================================ */
.company-page .company-anchors {
    background: #fff;
    border-bottom: 1px solid var(--jr-color-line);
}

.company-page .company-anchors__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.company-page .company-anchors__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 30px 20px;
    color: var(--jr-color-ink);
    border-left: 1px solid var(--jr-color-line);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                background var(--jr-duration-base) var(--jr-ease-standard);
}

/* Open outer edges — only the hairlines between items remain, so this
   reads as an editorial nav strip rather than a bordered table. */
.company-page .company-anchors__list li:first-child .company-anchors__link {
    border-left: 0;
}

.company-page .company-anchors__link:focus-visible {
    color: var(--jr-color-red);
    background: var(--jr-color-surface-soft);
}

/* Hover only where a real pointer can hover. On touch screens :hover
   sticks to the last tapped link, which then looked like a second
   active item next to the scroll-spy's .is-active one. */
@media (hover: hover) {
    .company-page .company-anchors__link:hover {
        color: var(--jr-color-red);
        background: var(--jr-color-surface-soft);
    }

    .company-page .company-anchors__link:hover svg {
        transform: translateY(3px);
    }

    /* 採用情報 now navigates to another page (recruit.html) instead of
       scrolling to a local anchor, so its chevron points right, not
       down — the hover nudge follows that same direction. */
    .company-page .company-anchors__link[href="recruit.html"]:hover svg {
        transform: translateX(3px);
    }
}

/* Set by assets/js/company.js for whichever section is in view. */
.company-page .company-anchors__link.is-active {
    color: var(--jr-color-red);
}

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

.company-page .company-anchors__link svg {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--jr-duration-base) var(--jr-ease-standard);
}

/* MESSAGE-only top clearance: the shared .company-section padding-top
   (--jr-section-space-y, 160/120/64) is still what separates every
   OTHER section pair, so ORIGIN/HISTORY/OUTLINE rhythm is untouched —
   this narrows only the gap directly under the anchor nav, which read
   too large with the full section token stacked under the anchors'
   own bottom padding. */
.company-page .company-section#message {
    padding-top: 160px;
}

/* HISTORY-only bottom clearance: position:sticky's containing block is
   .jr-section-shell, so the pinned stage only releases once the shell
   itself ends — the shared bottom padding token sat entirely *after*
   the shell, stretching the scroll distance the stage stays pinned
   over already-blank space before OUTLINE appears. Narrowing it here
   shortens that hold; OUTLINE's own top padding still provides the
   section-to-section gap. */
.company-page .company-section#history {
    padding-bottom: 64px;
}

/* ============================================================
   05 MESSAGE — brand statement, executive info, then the message body.

   .company-message__inner is the fix for the section reading as stuck
   to the left edge: .jr-section-shell caps at 1440px (foundation.css
   --jr-layout-max), and every piece here used to sit at its own
   (narrower) width from that shell's own left edge, leaving a large,
   asymmetric empty gap on the right at wide viewports. One shared,
   generously wide column, centred with margin-inline:auto, fixes that
   for the whole content group at once — body paragraphs keep their own
   narrower reading measure nested inside it (comfortable line length),
   text-align:center throughout, matching the rest of the section. No
   background image, no gradient, no card UI — typography and layout
   carry the section.
   ============================================================ */
.company-page .company-message__inner {
    max-width: 1040px;
    margin-inline: auto;
    text-align: center;
}

.company-page .company-message__statement {
    margin-top: clamp(32px, 3.4vw, 48px);
}

/* "Challenge Spirits." is the project's own lettering asset
   (assets/images/cs_tit.svg — a bottle stands in for the dot on "i"),
   not CSS text, so .company-message__brand only supplies the row
   layout + a font-size the JINRO logo mark can still size itself off
   of (em-based, unchanged). The logo itself is the shared masked-SVG
   mark taking currentColor, so it stays crisp at any size. Centred as
   the section's main graphic, sized well above the old "small logo"
   scale (up to ~148px tall at wide desktop, vs. 78px before). */
.company-page .company-message__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.company-page .company-message__brand-mark {
    display: block;
    /* 80% of the previous display size (880px / full column width on
       Tablet/Mobile). min() keeps that ratio at every width instead of
       letting max-width:100% snap it back to the full column. Centred by
       .company-message__brand's align-items. */
    width: min(704px, 80%);
    height: auto;
}

/* Sits below "Challenge Spirits." rather than beside it. */
.company-page .company-message__brand-logo {
    display: block;
    width: auto;
    height: 64px; /* 80% of 80px, in step with the brand-mark above */
    aspect-ratio: 121.844 / 40;
    color: var(--jr-color-red);
}

.company-page .company-message__slogan {
    margin: clamp(14px, 1.4vw, 22px) 0 0;
    color: var(--jr-color-ink);
    font-size: clamp(17px, 1.6vw, 24px);
    font-weight: 500;
    letter-spacing: 0.12em;
}

/* ---- Executive info — company/role are real HTML text; the name is
       not repeated as text because sign_parkjaehong.webp / sign_parksangpil.webp
   already print the Japanese + English name under the brush signature
   (the name lives in each image's alt text instead). Two independent,
   centred groups stacked vertically: HITEJINRO belongs to the first
   group only, exactly as in the source content. ---- */
.company-page .company-message__executives {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    column-gap: clamp(40px, 4.6vw, 64px);
    row-gap: 28px;
    margin-top: 64px;
}

.company-page .company-message__executive {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.company-page .company-message__executive-info {
    text-align: center;
}

.company-page .company-message__company {
    margin: 0 0 6px;
    color: var(--jr-color-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.company-page .company-message__role {
    margin: 0;
    color: var(--jr-color-muted);
    font-size: 15px;
    line-height: 1.5;
}

.company-page .company-message__signature {
    display: block;
    width: clamp(130px, 10.4vw, 170px);
    height: auto;
}

/* ---- Body — centred as a block within the wider .company-message__inner
   column, but the paragraph text itself stays left-aligned: centred
   ragged-edge text reads poorly across this many lines of Japanese
   copy. ---- */
.company-page .company-message__body {
    max-width: 860px;
    margin: 80px auto 0;
    text-align: left;
}

.company-page .company-message__body p {
    margin: 0;
    color: var(--jr-color-text);
    font-size: var(--jr-content-body-size);
    line-height: var(--jr-content-body-line-height);
}

.company-page .company-message__body p + p {
    margin-top: 26px;
}

.company-page .company-message__brandname {
    color: var(--jr-color-red);
    font-weight: 700;
}

/* ============================================================
   06 ORIGIN — a normal flowing block sized by its own content, with a
   static decorative background image (assets/images/company/
   company-origin-pc.webp / company-origin-mo.webp on mobile). No pinned/
   sticky scene and no scroll-linked photo sequence — the section simply
   flows into HISTORY below it. A one-time IntersectionObserver fade-up
   on entry is still applied by initOriginReveal() in company.js.
   ============================================================ */
.company-page .company-origin {
    --co-origin-background: #f3f8f1;
    position: relative;
    isolation: isolate;
    background-color: var(--co-origin-background);
    background-image: url("../images/company/company-origin-pc.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.company-page .company-origin__heading {
    text-align: center;
}

.company-page .company-origin__lead {
    margin: 18px 0 0;
    color: var(--jr-color-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: -0.01em;
}

.company-page .company-origin__composition {
    position: relative;
    z-index: 2;
    margin-top: 80px;
}

/* Equal outer columns keep + and the closing rule on the same centre
   axis, independent of the different paragraph lengths. */
.company-page .company-origin__story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 64px 160px minmax(0, 1fr);
    column-gap: clamp(20px, 2.5vw, 36px);
    align-items: start;
}

.company-page .company-origin__mark {
    grid-row: 1;
    margin: 0;
    text-align: center;
}

.company-page .company-origin__mark--jin { grid-column: 2; }
.company-page .company-origin__mark--ro { grid-column: 4; }

.company-page .company-origin__mark img {
    width: 160px;
    height: auto;
    margin-inline: auto;
}

.company-page .company-origin__mark-label {
    margin-top: 10px;
    color: var(--jr-color-red);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.company-page .company-origin__plus {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    width: 64px;
    height: 64px;
    margin-top: 48px;
    justify-self: center;
}

.company-page .company-origin__plus::before,
.company-page .company-origin__plus::after {
    content: "";
    position: absolute;
    background: var(--jr-color-ink);
    opacity: 0.7;
}

.company-page .company-origin__plus::before {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.company-page .company-origin__plus::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
}

.company-page .company-origin__copy {
    grid-row: 1;
    min-width: 0;
    padding-top: 10px;
    color: var(--jr-color-ink);
}

.company-page .company-origin__copy--jin {
    grid-column: 1;
    text-align: center;
}

.company-page .company-origin__copy--ro {
    grid-column: 5;
    text-align: center;
}

.company-page .company-origin__copy-title {
    font-family: var(--jr-font-brand-heading);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.005em;
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.005em;
}

.company-page .company-origin__copy p {
    margin: 0;
    font-size: var(--jr-content-body-size);
    line-height: var(--jr-content-body-line-height);
}

.company-page .company-origin__copy p + p { margin-top: 20px; }

.company-page .company-origin__closing {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    color: var(--jr-color-ink);
}

.company-page .company-origin__closing-rule {
    display: block;
    width: 1px;
    height: 64px;
    margin: 0 auto 24px;
    background: var(--jr-color-ink);
    opacity: 0.7;
}

.company-page .company-origin__closing-lead {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.company-page .company-origin__closing-lead strong { font-weight: inherit; }

.company-page .company-origin__closing-body {
    margin: 24px 0 0;
    font-size: var(--jr-content-body-size);
    line-height: var(--jr-content-body-line-height);
}

/* Content sits in normal flow above the section's own background
   image (set on .company-origin above); no absolute positioning, no
   pinned/sticky wrapper, no fixed top/bottom padding tied to viewport
   height — the block's height is simply whatever its content needs. */
.company-page .company-origin__information {
    position: relative;
    z-index: 1;
    padding-block: clamp(64px, 10vw, 120px);
}

/* Protect individual text lines and the supplied transparent lettering.
   These are the same flat colour as the scene, not separate cards. */
.company-page .company-origin__ink {
    background: transparent;
}
.company-page .company-origin__mark img,
.company-page .company-origin__plus { background: transparent; }

.company-page .company-origin__reveal-line {
    display: block;
}

.company-page .company-origin__copy p + p {
    margin-top: 20px;
}

.company-page .company-origin__closing-body .company-origin__reveal-line {
    display: block;
}

/* ORIGIN entry reveal — the same fade/travel/easing tokens as the shared
   [data-jr-reveal] contract (foundation.css) that HISTORY uses, so the
   two sections read as one rhythm. company.js adds .company-origin__unit
   (only when motion is allowed), then .is-origin-in with a per-unit
   --company-origin-delay when its block is revealed; see initOriginReveal. */
.company-page .company-origin__unit {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
    transition:
        opacity var(--jr-duration-slow) var(--jr-ease-standard),
        transform var(--jr-duration-slow) var(--jr-ease-standard);
    transition-delay: var(--company-origin-delay, 0ms);
}

.company-page .company-origin__unit.is-origin-in {
    opacity: 1;
    transform: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .company-page .company-origin__story {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
        gap: 28px 20px;
    }
    .company-page .company-origin__mark--jin { grid-column: 1; }
    .company-page .company-origin__mark--ro { grid-column: 3; }
    .company-page .company-origin__plus { grid-column: 2; width: 56px; height: 56px; margin-top: 52px; }
    /* Tablet keeps the JIN / + / RO row structure, but the description
       copy drops into its own row beneath it and is allowed to wrap
       naturally — no PC-only forced line breaks or width constraints. */
    .company-page .company-origin__copy {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 0;
        text-align: center;
        max-width: none;
    }
    .company-page .company-origin__copy--jin { grid-row: 2; }
    .company-page .company-origin__copy--ro { grid-row: 3; }
    .company-page .company-origin__copy-title { font-size: 20px; margin-bottom: 18px; }
    .company-page .company-origin__closing { margin-top: 0; }
}

@media (max-width: 767px) {
    .company-page .company-origin__information {
        padding-block: 48px;
    }

    .company-page .company-origin {
        background-image: url("../images/company/company-origin-mo.webp");
    }
}

.company-page .company-history {
    position: relative;
    background: #fff;
}

/* ============================================================
   07 HISTORY — period tabs + 沿革 / 商品・TVCM toggle + timeline

   Redesigned as an editorial "heritage story" rather than a small
   admin-table timeline: simple underline period tabs → one large
   display-scale era title (the section's visual anchor, filled in by
   assets/js/company.js from the same data the tabs already drive) →
   generously spaced timeline rows. Data, filtering and the 沿革/
   商品・TVCM toggle are unchanged — this is a visual pass only.
   ============================================================ */
/* The heading/tabs/period-display/toggle used to pin in place via
   position:sticky while the timeline scrolled underneath. That pinned
   "scene" caused overlap and clipping at common viewport heights (short
   1024x768 / 1280x720-class windows in particular), so it has been
   simplified to plain document flow — stable at every viewport, at the
   cost of the old hold-in-place effect. initHistoryStickyOffset() in
   company.js still measures the shared header's height into
   --company-history-sticky-top, but nothing here consumes it anymore. */
.company-page .company-history__sticky {
    position: static;
    background: #fff;
    padding-bottom: 16px;
}

/* Spacing-only compaction while pinned — the stage's own height sets
   how long the pin visually "holds" after the timeline runs out
   (position:sticky's containing block is .jr-section-shell, so it only
   releases once that ends), so trimming the gaps here directly shortens
   that hold. Font sizes, hierarchy and the period display are untouched. */
.company-page .company-history__sticky .company-section__heading {
    margin-bottom: 24px;
}

.company-page .company-history__controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Large era display + 沿革/商品・TVCM toggle now stack centered, the
   toggle directly under the display — both read as one centered focal
   block above the timeline, instead of a left-aligned display with the
   toggle pinned to the far right. */
.company-page .company-history__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    /* 40px clears the era tabs above; the 24px below is unchanged, as are
       the Tablet (48px) and Mobile (32px) overrides further down. */
    margin: 40px 0 24px;
    text-align: center;
}

/* Period tabs — quiet editorial underline tabs, not pill chips: normal
   state is muted text on a shared hairline; the active tab is the only
   place JINRO Red appears in this whole section. The tab group itself is
   centered within the section width; each tab's own text/underline is
   unaffected. */
.company-page .company-history__periods {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: 32px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--jr-color-line);
}

.company-page .company-history__periods::-webkit-scrollbar { display: none; }

.company-page .company-history__period {
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: 0 0 16px;
    color: var(--jr-color-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                border-color var(--jr-duration-base) var(--jr-ease-standard);
}

.company-page .company-history__period:hover {
    color: var(--jr-color-ink);
}

.company-page .company-history__period[aria-selected="true"] {
    color: var(--jr-color-red);
    border-bottom-color: var(--jr-color-red);
    font-weight: 600;
}

/* Content toggle — a squared 2-cell segmented control (wireframe). */
.company-page .company-history__modes {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--jr-color-line);
}

.company-page .company-history__mode {
    min-width: 148px;
    min-height: 44px;
    padding: 0 20px;
    color: var(--jr-color-muted);
    background: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--jr-duration-base) var(--jr-ease-standard),
                background var(--jr-duration-base) var(--jr-ease-standard);
}

.company-page .company-history__mode + .company-history__mode {
    border-left: 1px solid var(--jr-color-line);
}

.company-page .company-history__mode[aria-selected="true"] {
    color: #fff;
    background: var(--jr-color-ink);
}

.company-page .company-history__period:focus-visible,
.company-page .company-history__mode:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

/* ---- Large era display — the section's visual anchor, filled in by
   company.js from the same period data driving the tabs above. ---- */
.company-page .company-history__period-display {
    margin: 0;
    flex: none;
    color: var(--jr-color-ink);
    font-size: 88px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: opacity var(--jr-duration-base) var(--jr-ease-standard),
                transform var(--jr-duration-base) var(--jr-ease-standard);
}

/* Editorial period-change transition (company.js's setPeriodDisplay):
   outgoing label fades + slides up first, then the incoming label is
   snapped below/invisible (.is-entering, transition disabled so the
   jump itself is never visible) and released into its resting position
   on the very next frame. The Large Period Display is the focal element
   of a period change, so this is the one place on the page a crossfade
   is worth the extra JS — everything else on HISTORY still uses the
   shared [data-jr-reveal] system untouched. */
.company-page .company-history__period-display.is-leaving {
    opacity: 0;
    transform: translateY(-14px);
}

.company-page .company-history__period-display.is-entering {
    opacity: 0;
    transform: translateY(14px);
    transition: none;
}

/* ---- Timeline — center vertical rail + alternating left/right events.
   The single gray divider in this whole section is the rail itself
   (::before on the list); events carry no border/divider of their own,
   only vertical padding between them. Side (left/right) is assigned by
   company.js purely from each entry's position in the already-filtered
   list (data order), not by year parity. ---- */
.company-page .company-history__list {
    position: relative;
    margin: 0;
    padding: var(--jr-space-16, 64px) 0;
    list-style: none;
    transition: opacity var(--jr-duration-slow) var(--jr-ease-standard),
                transform var(--jr-duration-slow) var(--jr-ease-standard);
}

.company-page .company-history__list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--jr-color-line);
    transform: translateX(-50%);
}

.company-page .company-history__list--revealing {
    opacity: 0;
    transform: translateY(16px);
}

/* Two grid rows per item: row 1 = year heading, row 2 = the month/desc
   list. The dot spans both columns (grid-column:1/3) but only row 1
   (grid-row:1) and centers within it — so it structurally locks onto
   the year heading's own vertical center no matter how tall row 2's
   content gets, without any hand-picked top offset. */
.company-page .company-history__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 10px;
    padding: 12px 0;
}

.company-page .company-history__dot {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    width: 10px;
    height: 10px;
    background: var(--jr-color-line);
    border-radius: 50%;
    z-index: 1;
}

.company-page .company-history__year-row,
.company-page .company-history__event-list {
    max-width: 440px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Left side: block hugs the center rail, text reads toward it
   (text-align: right) — the block's position and its text alignment
   are the same direction on purpose. */
.company-page .company-history__row--left .company-history__year-row,
.company-page .company-history__row--left .company-history__event-list {
    grid-column: 1;
    justify-self: end;
    padding-right: clamp(32px, 4vw, 64px);
    text-align: right;
}

.company-page .company-history__row--left .company-history__year-row { grid-row: 1; }
.company-page .company-history__row--left .company-history__event-list { grid-row: 2; }

/* Right side: unchanged from before — hugs the rail from the other
   side, text-align stays left (native reading direction). */
.company-page .company-history__row--right .company-history__year-row,
.company-page .company-history__row--right .company-history__event-list {
    grid-column: 2;
    justify-self: start;
    padding-left: clamp(32px, 4vw, 64px);
    text-align: left;
}

.company-page .company-history__row--right .company-history__year-row { grid-row: 1; }
.company-page .company-history__row--right .company-history__event-list { grid-row: 2; }

.company-page .company-history__year-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
}

.company-page .company-history__row--left .company-history__year-row {
    justify-content: flex-end;
}

.company-page .company-history__year {
    color: var(--jr-color-ink);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.company-page .company-history__era {
    color: var(--jr-color-muted);
    font-size: 14px;
}

/* One line per month within a year group, laid out as a 2-column grid
   so the month column stays pinned to a fixed edge (never drifts down
   or merges into the text) while the description column wraps freely
   on its own. RIGHT (and Mobile, both sides) keep DOM order
   [month][description] with month in the fixed-width first column;
   PC/Tablet LEFT reorders the DOM to [description][month] (see
   company.js buildRow — it is mobile-aware) with description first
   and month pinned in the fixed-width *second* column, i.e. against
   the center rail. Either way the grid — not text-align alone — is
   what keeps the month from being swallowed by a wrapped description.
   Divider: only a top border on the 2nd+ item, so it only ever appears
   *between* two months of the same year — never under the year
   heading and never after the last item. */
.company-page .company-history__event-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
    padding: 10px 0;
}

.company-page .company-history__row--left .company-history__event-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

.company-page .company-history__event-item:first-child {
    padding-top: 0;
}

.company-page .company-history__event-item + .company-history__event-item {
    border-top: 1px solid var(--jr-color-line);
}

.company-page .company-history__month {
    color: var(--jr-color-ink);
    font-size: 16px;
    font-weight: var(--jr-font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    line-height: 1.85;
}

.company-page .company-history__text {
    margin: 0;
    color: var(--jr-color-text);
    font-size: var(--jr-content-body-size);
    line-height: 1.85;
}

.company-page .company-history__empty {
    margin: 56px 0;
    color: var(--jr-color-muted);
    font-size: var(--jr-content-body-size);
    text-align: center;
}

/* ============================================================
   08 OUTLINE — definition list + map + related-offices CTA
   ============================================================ */
.company-page .company-outline__list {
    margin: 0;
    border-top: 1px solid var(--jr-color-ink);
}

.company-page .company-outline__row {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    border-bottom: 1px solid var(--jr-color-line);
}

.company-page .company-outline__list dt {
    padding: 20px 24px;
    background: var(--jr-color-surface-soft);
    color: var(--jr-color-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    transition: background-color var(--jr-duration-base) var(--jr-ease-standard);
}

.company-page .company-outline__list dd {
    margin: 0;
    padding: 20px 24px;
    color: var(--jr-color-text);
    font-size: 16px;
    line-height: 1.7;
    transition: background-color var(--jr-duration-base) var(--jr-ease-standard);
}

/* Reading aid only — a row is not a link/card, so this stays a very
   quiet background tint, never a lift/shadow. */
@media (hover: hover) {
    .company-page .company-outline__row:hover dt,
    .company-page .company-outline__row:hover dd {
        background: var(--jr-color-surface-soft);
    }

    .company-page .company-outline__row:hover dt {
        background: #efefec;
    }
}

/* Real map embed — never an AI-generated picture of a map. */
.company-page .company-outline__map {
    margin-top: 48px;
    overflow: hidden;
    border: 1px solid var(--jr-color-line);
}

.company-page .company-outline__map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

.company-page .company-outline__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 4vw, 48px);
}

/* ============================================================
   Shared outline pill CTA — size/shape come from the shared
   .jr-pill-control base (components.css, also added on this link in
   company.html); this is the color-only modifier, same pattern
   recruit.css's .recruit-cta-link already uses for its own CTA.
   ============================================================ */
.company-page .company-cta-link {
    color: var(--jr-color-ink);
    border-color: var(--jr-color-ink);
    text-decoration: none;
}

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

.company-page .company-cta-link svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* ============================================================
   Tablet (768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .company-page { --co-anchor-offset: 96px; }

    /* One scrollable line, not a wrapped 2-row grid. */
    .company-page .company-anchors__list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .company-page .company-anchors__list::-webkit-scrollbar { display: none; }

    .company-page .company-anchors__link {
        flex: 0 0 auto;
        padding: 28px 20px;
        font-size: 20px;
        line-height: 1.3;
    }

    .company-page .company-section#message {
        padding-top: 80px;
    }

    /* Keep the JINRO mark under "Challenge Spirits." proportionate at
       this width — 80px (the PC value) would outsize the brand-mark
       once its own clamp bottoms out at 64px here. */
    .company-page .company-message__brand-logo {
        height: 45px; /* 80% of 56px */
    }


    .company-page .company-history__periods { gap: 24px; }
    .company-page .company-history__meta { margin: 48px 0; }
    .company-page .company-history__period-display { font-size: 60px; }

    /* Still the two-column left/right grid at this width, just narrower
       columns — PC's 12px felt tight once wrapped onto 2-3 lines here. */
    .company-page .company-history__row { padding: 18px 0; }

    .company-page .company-outline__row { grid-template-columns: 240px minmax(0, 1fr); }
    .company-page .company-outline__map iframe { height: 360px; }
}

/* ============================================================
   Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
    .company-page { --co-anchor-offset: 96px; }

    /* Same shorter Mobile travel as the shared [data-jr-reveal]. */
    .company-page .company-origin__unit {
        transform: translate3d(0, 1.4rem, 0);
    }

    /* Mobile: every item visible up front — a full-bleed 2×2 grid
       instead of a horizontally scrolling strip. 採用情報 (a link to
       another page, not a section) is dropped here, leaving the four
       in-page sections. The shell's side gutter is removed so the
       hairlines reach both viewport edges. Equal cells (1fr columns,
       1fr rows); hairlines drawn once per cell (right on the left
       column, bottom on the first row) so no edge is doubled — the
       nav's own border-bottom closes the grid. */
    .company-page .company-anchors .jr-section-shell {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    .company-page .company-anchors__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
    }

    .company-page .company-anchors__list li {
        display: flex;
        min-width: 0;
    }

    .company-page .company-anchors__list li.company-anchors__item--recruit {
        display: none;
    }

    .company-page .company-anchors__link {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        gap: 4px;
        padding: 16px 6px;
        font-size: 16px;
        line-height: 1.3;
        text-align: center;
        white-space: normal;
        border-left: 0;
    }

    .company-page .company-anchors__link svg {
        width: 18px;
        height: 18px;
    }

    .company-page .company-anchors__list li:nth-child(odd) .company-anchors__link {
        border-right: 1px solid var(--jr-color-line);
    }

    .company-page .company-anchors__list li:nth-child(-n+2) .company-anchors__link {
        border-bottom: 1px solid var(--jr-color-line);
    }

    .company-page .company-section#message {
        padding-top: 80px;
    }


    /* Mobile MESSAGE: the two groups still can't sit side by side at this
       width, so .company-message__executives stays a vertical list —
       but each group itself keeps the PC/Tablet role|signature row
       (one line), just at a narrower signature width. */
    .company-page .company-message__brand { gap: 8px; font-size: 30px; }
    .company-page .company-message__brand-logo { height: 27px; } /* 80% of 34px */
    .company-page .company-message__slogan { font-size: 16px; letter-spacing: 0.1em; }

    .company-page .company-message__executives {
        flex-direction: column;
        align-items: center;
        margin-top: 28px;
        gap: 20px;
    }
    .company-page .company-message__executive {
        gap: 12px;
    }
    .company-page .company-message__company { font-size: 14px; }
    .company-page .company-message__role { font-size: 14px; }
    .company-page .company-message__signature { width: 120px; }

    .company-page .company-message__body { margin-top: 32px; }
    .company-page .company-message__body p + p { margin-top: 22px; }

    /* Mobile ORIGIN rebuild (390/375px): normal document flow, no fixed
       height or absolute positioning — background image is decorative
       only, text readability wins. */
    .company-page .company-origin__lead { font-size: 17px; margin-top: 14px; }
    .company-page .company-origin__story { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 16px; }
    .company-page .company-origin__mark--jin { grid-column: 1; }
    .company-page .company-origin__mark--ro { grid-column: 3; }
    .company-page .company-origin__mark img { width: 72px; }
    .company-page .company-origin__mark-label { margin-top: 4px; }
    .company-page .company-origin__copy { grid-column: 1 / -1; padding: 0; text-align: center; }
    .company-page .company-origin__copy--jin { grid-row: 2; }
    .company-page .company-origin__copy--ro { grid-row: 3; }
    .company-page .company-origin__copy-title { font-size: 18px; margin-bottom: 6px; }
    .company-page .company-origin__copy p + p { margin-top: 8px; }
    .company-page .company-origin__plus { grid-column: 2; width: 40px; height: 40px; margin-top: 16px; }
    .company-page .company-origin__closing { margin-top: 0; text-align: center; }
    .company-page .company-origin__closing-rule { height: 24px; margin-bottom: 12px; }
    .company-page .company-origin__closing-lead { font-size: 18px; }
    .company-page .company-origin__closing-body { margin-top: 12px; }

    .company-page .company-history__modes { width: 100%; }
    .company-page .company-history__mode { flex: 1 1 0; min-width: 0; }

    .company-page .company-history__periods { gap: 20px; }
    .company-page .company-history__period { font-size: 15px; padding-bottom: 14px; }

    .company-page .company-history__meta {
        gap: 20px;
        margin: 32px 0;
    }
    .company-page .company-history__period-display { font-size: 44px; }

    /* Single left-rail timeline — the alternating left/right layout only
       makes sense once there's room either side of a center line; at
       this width the rail moves to the left edge and every event stacks
       in one column to its right, regardless of --left/--right. */
    .company-page .company-history__list::before {
        left: 6px;
        transform: none;
    }

    /* Left/right grid collapses to a single relative-positioned block;
       the dot switches from the PC grid-alignment trick to a plain
       absolute position next to the year heading (there's only ever one
       column here, so there's no "other side" to center between). */
    .company-page .company-history__row {
        position: relative;
        display: block;
        padding: 20px 0 20px 28px;
    }

    .company-page .company-history__dot {
        position: absolute;
        top: 6px;
        left: 6px;
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        align-self: auto;
        margin-left: -5px;
    }

    .company-page .company-history__row--left .company-history__year-row,
    .company-page .company-history__row--right .company-history__year-row,
    .company-page .company-history__row--left .company-history__event-list,
    .company-page .company-history__row--right .company-history__event-list {
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        max-width: none;
        padding: 0;
        text-align: left;
    }

    .company-page .company-history__row--left .company-history__year-row {
        justify-content: flex-start;
    }

    /* PC/Tablet reorders LEFT's grid to [description][month]; Mobile's
       DOM order is forced back to [month][description] (see
       company.js), so the grid columns must match that here too. */
    .company-page .company-history__row--left .company-history__event-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .company-page .company-history__event-list {
        margin-top: 10px;
    }

    .company-page .company-history__year { font-size: 18px; }
    .company-page .company-history__month { font-size: 13px; }
    .company-page .company-history__era { font-size: 12px; }

    /* The heading + tabs + large period display + toggle combined are
       tall enough to eat most of a phone's viewport, leaving little
       room to actually read the pinned timeline underneath — so Mobile
       drops the pinned stage and falls back to plain document flow
       with the same per-year-group reveal as PC/Tablet. */
    .company-page .company-history__sticky {
        position: static;
        top: auto;
        padding-bottom: 0;
    }

    /* Definition list stacks rather than squeezing two columns. */
    .company-page .company-outline__row { grid-template-columns: minmax(0, 1fr); }
    .company-page .company-outline__list dt { padding: 12px 16px; }
    .company-page .company-outline__list dd { padding: 12px 16px 18px; }

    .company-page .company-outline__map { margin-top: 32px; }
    .company-page .company-outline__map iframe { height: 280px; }

    .company-page .company-cta-link { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .company-page .company-anchors__link,
    .company-page .company-anchors__link svg,
    .company-page .company-history__period,
    .company-page .company-history__mode,
    .company-page .company-history__list,
    .company-page .company-history__period-display,
    .company-page .company-cta-link,
    .company-page .company-history__year,
    .company-page .company-history__text {
        transition: none;
    }
}