@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* ============================================================
   JINRO Renewal — Shared foundations

   This file is intentionally layout-agnostic. Components and page styles
   should consume the --jr-* tokens below instead of redefining foundations.

   Responsive convention (CSS custom properties cannot be used in @media):
   - Mobile reference: 390px
   - Mobile:           0–767px
   - Tablet:           768–1023px
   - Desktop:          1024px+
   - PC content max:   1440px
   ============================================================ */

:root {
    /* Brand and neutral color system */
    --jr-color-red: #e10017;
    --jr-color-red-deep: #b30012;
    --jr-color-ink: #121212;
    --jr-color-text: #262626;
    --jr-color-muted: #737373;
    --jr-color-line: #e5e5e5;
    --jr-color-surface: #ffffff;
    --jr-color-surface-soft: #F0F1F1;
    --jr-color-white: #ffffff;

    /* Typography */
    --jr-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --jr-font-serif-en: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --jr-font-serif-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --jr-font-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --jr-font-brand-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --jr-font-enjoy-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

    --jr-font-weight-regular: 400;
    --jr-font-weight-medium: 500;
    --jr-font-weight-semibold: 600;
    --jr-font-weight-bold: 700;
    --jr-font-weight-extrabold: 800;

    /* Button / CTA label weight — the ONE place this is set. Every
       button-role control consumes this token instead of a literal:
       .jr-button and .jr-pill-control (and therefore every CTA built on
       them), the standalone pill CTAs that predate .jr-pill-control,
       filter chips, tabs, pagination and the "…を見る" arrow links.
       Change it here and they all move together — do not re-declare a
       numeric font-weight on a button in a page stylesheet.
       Deliberate per-state emphasis (e.g. a filter chip going bold when
       active) stays in that component's own rule and is not this token's
       job. Body copy, section/card titles, GNB, breadcrumbs and plain
       text links are NOT buttons and never read this. */
    --jr-button-font-weight: var(--jr-font-weight-semibold);

    --jr-text-xs: 0.75rem;
    --jr-text-sm: 0.875rem;
    --jr-text-md: 1rem;
    --jr-text-lg: 1.125rem;
    --jr-text-xl: 1.25rem;
    --jr-text-2xl: clamp(1.75rem, 2.5vw, 2.5rem);
    --jr-text-3xl: clamp(2.25rem, 4vw, 4rem);
    --jr-text-display: clamp(3rem, 7vw, 7.5rem);

    --jr-leading-tight: 1.1;
    --jr-leading-heading: 1.25;
    --jr-leading-body: 1.8;
    --jr-tracking-tight: -0.03em;
    --jr-tracking-label: 0.08em;

    /* Four-pixel spacing scale */
    --jr-space-1: 0.25rem;
    --jr-space-2: 0.5rem;
    --jr-space-3: 0.75rem;
    --jr-space-4: 1rem;
    --jr-space-5: 1.25rem;
    --jr-space-6: 1.5rem;
    --jr-space-8: 2rem;
    --jr-space-10: 2.5rem;
    --jr-space-12: 3rem;
    --jr-space-16: 4rem;
    --jr-space-20: 5rem;
    --jr-space-24: 6rem;
    --jr-space-32: 8rem;

    /* Site-wide horizontal layout system — single source of truth for
       every content container on the site except GNB/Footer (KV,
       Products/Enjoy/Cocktail/Product Detail/News page
       bodies, TOP's .top-*__inner sections). --jr-container-wide and
       --jr-gutter-pc/tablet/mobile below resolve FROM these three
       tokens, so every existing selector that already references
       --jr-container-wide/--jr-gutter-* (no rewrite needed) moves
       together. Flip --jr-layout-max to "100%" to test the whole site
       fluid; flip it back to restore the 1440 grid everywhere at once. */
    --jr-layout-max: 1440px;
    --jr-layout-gutter-pc: 80px;
    --jr-layout-gutter-tablet: 32px;
    --jr-layout-gutter-mobile: 20px;

    /* Layout references and containers */
    --jr-reference-pc: 1440px;
    --jr-reference-tablet: 768px;
    --jr-reference-mobile: 390px;
    --jr-container-wide: var(--jr-layout-max);
    --jr-container-content: 1200px;
    --jr-container-reading: 760px;
    --jr-gutter: clamp(20px, 4.2vw, 64px);
    --jr-gutter-pc: var(--jr-layout-gutter-pc);
    --jr-gutter-tablet: var(--jr-layout-gutter-tablet);
    --jr-gutter-mobile: var(--jr-layout-gutter-mobile);

    /* Documented breakpoint values for JS and design reference */
    --jr-breakpoint-mobile: 768px;
    --jr-breakpoint-tablet: 1024px;
    --jr-breakpoint-desktop: 1024px;

    /* Card typography — single source of truth for the three roles used
       inside any card-shaped piece of content (product cards, cocktail/
       recipe cards, TOP's feature/column/company cards, etc.): Label
       (small eyebrow above the title), Title (the card's name/headline),
       Description (body copy below the title). NOT for Section Title, KV
       Title, GNB, buttons, badges, tabs, dates/meta,
       specifications, Footer, or article h2/h3 body headings.

       --jr-card-*-size below is what consumers actually reference — it
       resolves to -pc/-tablet/-mobile per breakpoint, so a selector needs
       no @media of its own to be responsive. Change only the -pc/-tablet/
       -mobile (or -weight/-line-height) tokens here to move every card's
       Label/Title/Description on the site at once — never add a
       page-local "compact" or "product"/"recipe"-specific variant. */
    --jr-card-label-size-pc: 12px;
    --jr-card-label-size-tablet: 12px;
    --jr-card-label-size-mobile: 11px;
    --jr-card-label-weight: 600;
    --jr-card-label-line-height: 1.4;
    --jr-card-label-size: var(--jr-card-label-size-pc);

    --jr-card-title-size-pc: 26px;
    --jr-card-title-size-tablet: 22px;
    --jr-card-title-size-mobile: 20px;
    --jr-card-title-weight: 600;
    --jr-card-title-line-height: 1.35;
    --jr-card-title-letter-spacing: -0.01em;
    /* Product names on product cards (Products, Product Detail lineup, TOP
       product cards) track tighter than recipe / promo card titles. */
    --jr-product-name-letter-spacing: -0.02em;
    --jr-card-title-size: var(--jr-card-title-size-pc);

    --jr-card-desc-size-pc: 16px;
    --jr-card-desc-size-tablet: 15px;
    --jr-card-desc-size-mobile: 14px;
    --jr-card-desc-weight: 400;
    --jr-card-desc-line-height: 1.6;
    --jr-card-desc-size: var(--jr-card-desc-size-pc);

    /* Content Body typography — single source of truth for long-form /
       informational body copy on information-heavy pages (Company,
       Recruit, Support: MESSAGE/ORIGIN/HISTORY prose, KV lead, Contact
       body, Intro, FAQ answers, etc.). Distinct from Card Description
       above: Card Description is for the short 1-3 line description
       under a card title (Products/Enjoy/Cocktail cards); Content Body
       is for the paragraph(s) of text a user actually reads on these
       pages, and sits one step larger. NOT for Section Title, KV Title,
       Card Title, buttons, labels, dates/meta, or captions. */
    --jr-content-body-size-pc: 18px;
    --jr-content-body-size-tablet: 17px;
    --jr-content-body-size-mobile: 16px;
    --jr-content-body-weight: 400;
    --jr-content-body-line-height: 1.85;
    --jr-content-body-size: var(--jr-content-body-size-pc);

    /* Supporting Card Copy — one step above Card Description, for card
       description text that reads more like a short paragraph than a
       one-line caption (Recruit staff interview description, job
       description). NOT a replacement for --jr-card-desc-size site-wide;
       use only where a page-specific review found the description role
       needs more presence than the standard card scale. */
    --jr-content-supporting-size-pc: 17px;
    --jr-content-supporting-size-tablet: 16px;
    --jr-content-supporting-size-mobile: 15px;
    --jr-content-supporting-weight: 400;
    --jr-content-supporting-line-height: 1.7;
    --jr-content-supporting-size: var(--jr-content-supporting-size-pc);

    /* Product Detail Sub Navigation typography — single source of truth
       for every product detail page's product-switcher tab strip
       (.product-subnav__link). Normal/Hover/Active share this size/
       weight; only color differs per state. */
    --jr-subnav-font-size-pc: 22px;
    --jr-subnav-font-size-tablet: 18px;
    --jr-subnav-font-size-mobile: 16px;
    --jr-subnav-font-weight: 600;
    --jr-subnav-line-height: 1.4;
    --jr-subnav-font-size: var(--jr-subnav-font-size-pc);

    /* Section Title typography — single source of truth for every
       .jr-section-title on the site (Products/Enjoy/Cocktail/TOP section
       headings). NOT for KV Title, Card Title, GNB, 2nd-level
       nav, buttons, labels, descriptions, or article h1-h3 body headings.
       PC stepped down 58 -> 54; Tablet/Mobile unchanged. KV/Hero titles
       use their own tokens and are unaffected. */
    --jr-section-title-size-pc: 54px;
    --jr-section-title-size-tablet: 43px;
    --jr-section-title-size-mobile: 33px;
    --jr-section-title-weight: 600;
    --jr-section-title-line-height: 1.35;
    --jr-section-title-letter-spacing: 0.005em;
    --jr-section-title-size: var(--jr-section-title-size-pc);

    /* Section Title L2 — sub-section heading under a page's L1 (a page's
       own h1/L1 above it): News Detail "最新のニュース", CSR "社会貢献活動".
       Not for L1 (.jr-section-title above), Intro Title, Card Title or the
       cocktail result-header (Functional Heading, kept at its own 40/700). */
    --jr-section-title-l2-size-pc: 40px;
    --jr-section-title-l2-size-tablet: 34px;
    --jr-section-title-l2-size-mobile: 28px;
    --jr-section-title-l2-weight: 600;
    --jr-section-title-l2-line-height: 1.35;
    --jr-section-title-l2-letter-spacing: 0.005em;
    --jr-section-title-l2-size: var(--jr-section-title-l2-size-pc);

    /* Intro Title — the page-opening statement under a page's L1 title
       (Support "JINROのお客様相談室では…", CSR mission statement). Not the L1
       (.jr-section-title), not a Card Title. Consumed by .jr-intro-title. */
    --jr-intro-title-size-pc: 26px;
    --jr-intro-title-size-tablet: 22px;
    --jr-intro-title-size-mobile: 19px;
    --jr-intro-title-weight: 600;
    --jr-intro-title-line-height: 1.7;
    --jr-intro-title-letter-spacing: 0.005em;
    --jr-intro-title-size: var(--jr-intro-title-size-pc);

    /* Cocktail List page title (COCKTAIL RECIPES) — deliberately excluded
       from the shared Section Title system above; this is its own
       component-scoped token, not var(--jr-section-title-size). */
    --jr-cocktail-list-title-size-pc: 40px;
    --jr-cocktail-list-title-size-tablet: 34px;
    --jr-cocktail-list-title-size-mobile: 28px;
    --jr-cocktail-list-title-weight: 700;
    --jr-cocktail-list-title-line-height: 1.25;
    --jr-cocktail-list-title-size: var(--jr-cocktail-list-title-size-pc);

    /* Section vertical spacing tokens (Common Section / Product List) */
    --jr-section-space-y: 160px;
    --jr-productlist-space-y: 160px;

    /* Shared timing and focus */
    --jr-duration-fast: 180ms;
    --jr-duration-base: 300ms;
    --jr-duration-slow: 700ms;
    --jr-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --jr-focus-ring: 0 0 0 3px rgba(225, 0, 23, 0.28);
}

/* Small, safe reset. It deliberately avoids changing current page layout. */
:where(*, *::before, *::after) {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Site base — reset, body, media and link defaults for every page. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--jr-font-sans);
    color: var(--jr-color-ink);
    background: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

:where(button, input, select, textarea) {
    color: inherit;
    font: inherit;
}

:where(button, [type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
}

:where([hidden]) {
    display: none !important;
}

.jr-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Opt-in shared containers for renewal templates. */

/* Shared reveal contract. common.js adds .is-revealed when observed.
   --jr-reveal-delay is the single generic stagger hook for this system —
   set it inline per element (style="--jr-reveal-delay:80ms") wherever a
   heading-then-content or card stagger is needed; unset elements just use
   the 0ms default. Component-scoped delay vars from before this pass
   (--enjoy-reveal-delay, --news-reveal-delay, etc.) still work exactly as
   they did and are left alone — this is additive, not a replacement. */
[data-jr-reveal] {
    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(--jr-reveal-delay, 0ms);
}

[data-jr-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --jr-section-space-y: 120px;
        --jr-productlist-space-y: 120px;
        --jr-card-label-size: var(--jr-card-label-size-tablet);
        --jr-card-title-size: var(--jr-card-title-size-tablet);
        --jr-card-desc-size: var(--jr-card-desc-size-tablet);
        --jr-content-body-size: var(--jr-content-body-size-tablet);
        --jr-content-supporting-size: var(--jr-content-supporting-size-tablet);
        --jr-subnav-font-size: var(--jr-subnav-font-size-tablet);
        --jr-section-title-size: var(--jr-section-title-size-tablet);
        --jr-section-title-l2-size: var(--jr-section-title-l2-size-tablet);
        --jr-intro-title-size: var(--jr-intro-title-size-tablet);
        --jr-cocktail-list-title-size: var(--jr-cocktail-list-title-size-tablet);
    }
}

@media (max-width: 767px) {
    :root {
        --jr-gutter: 20px;
        --jr-section-space-y: 64px;
        --jr-productlist-space-y: 80px;
        --jr-card-label-size: var(--jr-card-label-size-mobile);
        --jr-card-title-size: var(--jr-card-title-size-mobile);
        --jr-card-desc-size: var(--jr-card-desc-size-mobile);
        --jr-content-body-size: var(--jr-content-body-size-mobile);
        --jr-content-supporting-size: var(--jr-content-supporting-size-mobile);
        --jr-subnav-font-size: var(--jr-subnav-font-size-mobile);
        --jr-section-title-size: var(--jr-section-title-size-mobile);
        --jr-section-title-l2-size: var(--jr-section-title-l2-size-mobile);
        --jr-intro-title-size: var(--jr-intro-title-size-mobile);
        --jr-intro-title-line-height: 1.75;
        --jr-cocktail-list-title-size: var(--jr-cocktail-list-title-size-mobile);
    }

    /* Slightly shorter travel on Mobile so a scroll doesn't feel like it's
       waiting on staggered cards one after another. */
    [data-jr-reveal] {
        transform: translate3d(0, 1.4rem, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --jr-duration-fast: 1ms;
        --jr-duration-base: 1ms;
        --jr-duration-slow: 1ms;
    }

    [data-jr-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-jr-motion] {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}