/* ===== JINRO Landing Page - Figma → Web (desktop) ===== */

:root {
    --muted: #8e8e8e;
    --line: #ebebeb;

    --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    --font-serif-en: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    --font-serif-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    --font-num: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background: #ffffff;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    color: var(--jr-color-ink);
    overflow-x: hidden;
    overflow-y: auto;
}

img {
    display: block;
}

.viewport {
    position: relative;
    overflow: clip;
    width: 100%;
}

/* ============================================================
   HERO — renewal main visual carousel
   ============================================================ */
/* KV -> Lead scroll story.
   Default (no JS / GSAP unavailable / reduced motion): plain flow. The Lead
   tucks one screen up under the KV (margin-top: -100dvh) and its gradient
   starts one screen further down, so the KV scrolls away over the Lead
   while the copy stays centred (sticky) over the passing gradient.
   .hero--kv-story (script.js, "HERO KV STORY"): KV -> green -> copy.
     - Only the KV (.hero__carousel) is pinned, for its shrink/fade.
     - The Lead starts at the page top, under the pinned KV: the gradient
       (.hero__lead-bg) is held on its green core and fades in behind the
       shrinking KV; the centred copy fades in once the KV has gone.
     - After the reading hold the gradient's sticky releases and it scrolls
       up 1:1 behind the still copy (green -> pale -> white). When its
       bottom edge reaches the viewport bottom the Lead ends: PICK UP comes
       up from below and pushes the Lead — copy included, at full opacity —
       off the screen. No fade-out.
     - script.js sets the lengths from the pinned KV's measured height, so
       a mobile URL-bar resize (which ScrollTrigger does not re-measure)
       cannot shift them.
   Layers: KV (z 1) > Lead copy > gradient (Lead z 0). */
.hero {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: #fff;
    color: #fff;
}

/* Lead structure:
     .hero__lead-pin          sticky, top 0, 0 tall — pins for the whole Lead
       .hero__lead-pin-inner    one screen tall, copy centred in it
     .hero__lead-bg           the gradient <picture> in normal flow, at its
                              own ratio (width 100%, height auto — no cover,
                              crop or stretch)
   The white copy shows over the colour core and is lost again in the white
   bottom. overflow: clip (not hidden, which would break sticky) stops the
   pinned screen spilling past the Lead. */
.hero__brand-message {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    margin-top: -100vh;
    margin-top: -100dvh;
    padding: 0;
    overflow: clip;
    color: #fff;
    text-align: center;
}

.hero__lead-pin {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 0;
}

.hero__lead-pin-inner {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 7vw;
}

/* Plain flow: a white lead-in above the image keeps the copy from tinting
   until the KV has (almost) scrolled away (9vh measured at 1440x900). */
.hero__lead-bg {
    position: relative;
    z-index: 0;
    margin-top: 100vh;
    margin-top: 100dvh;
    padding-top: 9vh;
}

.hero__lead-bg img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.hero--kv-story .hero__brand-message {
    margin-top: calc(-1 * (var(--hero-kv-height, 100dvh) + var(--hero-kv-scroll, 0px)));
    height: var(--hero-lead-height, auto);
}

/* The copy and the gradient are each one sticky screen, so when the Lead
   ends they leave together — pushed up by PICK UP, no fade. */
.hero--kv-story .hero__lead-pin {
    height: var(--hero-kv-height, 100dvh);
}

.hero--kv-story .hero__lead-pin-inner {
    height: 100%;
}

/* The Lead background: ONE static layer — the white wash is the top
   layer of the same background as the gradient art (no overlay, no pseudo
   element), so from the first frame it already runs green (top/centre,
   behind the copy) -> mint -> white (bottom). The art is scaled to >= 1.6
   screens wide and positioned on its green core. Nothing animates inside
   it: script.js only fades the whole layer in behind the shrinking KV,
   before the copy appears. The white wash is an eased ramp (alpha ~
   t^1.6 over the lower 32%, from 68% down) so green stays the main
   background and meets white at the bottom with no band. */
.hero--kv-story .hero__lead-bg {
    position: sticky;
    top: 0;
    height: var(--hero-kv-height, 100dvh);
    margin: calc(-1 * var(--hero-kv-height, 100dvh)) 0 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    background-image:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 68%,
            rgba(255, 255, 255, 0.11) 76%,
            rgba(255, 255, 255, 0.33) 84%,
            rgba(255, 255, 255, 0.63) 92%,
            rgba(255, 255, 255, 0.85) 97%,
            #fff 100%),
        url("../images/top/lead_bg.webp");
    background-repeat: no-repeat;
    background-position: 0 0, 50% 48%;
    background-size: 100% 100%, max(100%, 1.6 * var(--hero-kv-height, 100vh)) auto;
}

/* The <picture> is the plain-flow (no JS / reduced motion) artwork. */
.hero--kv-story .hero__lead-bg picture {
    display: none;
}

/* Tablet: at 768px wide the image is only ~1.1 screens tall, so without a
   white tail the Lead ends (and PICK UP clips the sticky copy) while the
   title is still over green. 25svh (768x1024 measured) lets the copy be
   lost in white first. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero__lead-bg {
        padding-bottom: 25vh;
        padding-bottom: 25svh;
    }
}

@media (max-width: 767px) {
    .hero__lead-pin-inner {
        padding: 0 20px;
    }

    /* Plain flow: the longer mobile white lead-in (390x844 measured), and a
       white tail so the whole copy is lost in white before the Lead's
       bottom edge clips it. */
    .hero__lead-bg {
        padding-top: 33vh;
        padding-top: 33svh;
        padding-bottom: 15vh;
        padding-bottom: 15svh;
    }

    /* Until a mobile gradient asset exists the PC artwork stands in: at
       390px wide it would be only ~0.7 screens tall, so it is drawn 130svh
       tall with object-fit: cover (ratio kept, only the soft left/right
       edges are cropped). When a mobile asset arrives, add a <source
       media="(max-width: 767px)"> to the <picture> and drop this rule. */
    .hero__lead-bg img {
        height: 130vh;
        height: 130svh;
        object-fit: cover;
    }
}

/* Lead copy: one four-line statement (PC breaks one line per phrase;
   narrower screens wrap within a phrase only if they must). */
.hero__brand-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

.home-page .hero__brand-lead {
    margin: 0;
    font-family: var(--jr-font-brand-heading);
    font-weight: 700;
    font-size: 54px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.hero__brand-lead-line {
    display: block;
    text-wrap: balance;
}

@media (min-width: 1600px) {
    .home-page .hero__brand-lead { font-size: 58px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-page .hero__brand-lead { font-size: 36px; }
}

@media (max-width: 767px) {
    .home-page .hero__brand-lead {
        font-size: clamp(22px, calc((100vw - 40px) / 15.3), 24px);
        line-height: 1.65;
        letter-spacing: 0.02em;
    }
}

.hero__carousel,
.hero__viewport,
.hero__track,
.hero__slide {
    width: 100%;
    height: 100%;
}

.hero__carousel {
    position: relative;
    height: 100vh;
    height: 100dvh;
    z-index: 1;
    overflow: visible;
}

.hero__viewport {
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
    position: relative;
    z-index: 2;
    /* Scaled around its centre by the KV story (script.js). */
    transform-origin: center center;
    will-change: transform, opacity;
}

.hero__viewport:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #fff;
}

.hero__track {
    margin: 0;
    padding: 0;
}

.hero__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.hero__media,
.hero__media::after {
    position: absolute;
    inset: 0;
}

.hero__media {
    z-index: -2;
    background: #171717;
}

.hero__media::after {
    content: "";
    z-index: 1;
    background: none;
    pointer-events: none;
}

.hero__picture {
    width: 100%;
    height: 100%;
    display: block;
}

.hero__image,
.hero__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.hero__slide--chamisul .hero__video { object-position: 55% center; }
.hero__slide--jinro .hero__image { object-position: 60% center; }

/* Slide 1 uses a local PC/Tablet video and falls back to a mounted YouTube
   Shorts iframe on Mobile until a Mobile MP4 is available. Only one of the
   two is ever visible per breakpoint. */
.hero__video--pc {
    display: block;
}

/* The mounted YouTube iframe is oversized on one axis and centered so it
   covers the hero with no letterboxing, matching the object-fit:cover
   behaviour of the other slides' video/image media. */
.hero__yt-mount {
    display: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__yt-mount iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero__yt-mount[data-hero-yt-orientation="landscape"] iframe {
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100dvh;
}

.hero__yt-mount[data-hero-yt-orientation="portrait"] iframe {
    height: 100dvh;
    width: 56.25dvh;
    min-height: 177.78vw;
    min-width: 100vw;
}

/* Campaign key visuals are finished banners, so they are shown whole rather than
   cropped. Each one sets a backdrop matching its own edge colour, which makes the
   letterbox around the artwork invisible. */
.hero__slide--banner .hero__media {
    background: var(--hero-banner-backdrop);
}

.hero__slide--banner .hero__image {
    object-fit: contain;
}

.hero__slide--banner .hero__media::after {
    background: none;
}

.hero__slide--snack-card { --hero-banner-backdrop: linear-gradient(180deg, #010224 0%, #02042a 55%, #060a33 100%); }
.hero__slide--terra { --hero-banner-backdrop: linear-gradient(180deg, #000801 0%, #010c05 55%, #010e06 100%); }

/* Slides with a dedicated portrait cut run full-bleed on narrow viewports;
   the rest keep the whole landscape artwork visible. */
@media (max-width: 767px) {
    .hero__slide--snack-card .hero__image,
    .hero__slide--terra .hero__image {
        object-fit: cover;
    }

    /* The TERRA portrait cut opens with copy right at its top edge, so it is
       nudged clear of the site header. The exposed strip falls on the slide's
       own backdrop, which matches the artwork's dark green. */
    .hero__slide--terra .hero__image {
        transform: translateY(8%);
    }
}

.hero__video--mobile {
    display: none;
}

/* Hero control colours follow the ACTIVE slide's KV tone, which
   script.js copies from the slide's data-hero-theme onto .hero__carousel:
     data-hero-theme="dark"  (dark KV, the default) -> white controls
     data-hero-theme="light" (light KV)             -> dark controls
   Only these tokens change per tone; shape, size, position and motion
   are shared. Scoped to the TOP Hero carousel only. */
.hero__carousel {
    --hero-ctrl-color: #fff;
    --hero-ctrl-border: rgba(255, 255, 255, 0.7);
    --hero-ctrl-bg: rgba(10, 10, 10, 0.08);
    --hero-ctrl-hover-border: #fff;
    --hero-ctrl-hover-bg: #fff;
    --hero-ctrl-hover-color: #151515;
    --hero-ctrl-active-bg: rgba(255, 255, 255, 0.82);
    --hero-dot: rgba(255, 255, 255, 0.46);
    --hero-dot-hover: rgba(255, 255, 255, 0.75);
    --hero-dot-current: #fff;
}

.hero__carousel[data-hero-theme="light"] {
    --hero-ctrl-color: #171717;
    --hero-ctrl-border: rgba(23, 23, 23, 0.58);
    --hero-ctrl-bg: rgba(255, 255, 255, 0.12);
    --hero-ctrl-hover-border: #171717;
    --hero-ctrl-hover-bg: #171717;
    --hero-ctrl-hover-color: #fff;
    --hero-ctrl-active-bg: rgba(23, 23, 23, 0.82);
    --hero-dot: rgba(23, 23, 23, 0.36);
    --hero-dot-hover: rgba(23, 23, 23, 0.6);
    --hero-dot-current: #171717;
}

.hero__navigation {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 64px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--hero-ctrl-color);
    transform: translateX(-50%);
    will-change: opacity;
}

/* Same double-tap-zoom guard as .top-pickup__arrow — the Hero carousel
   on this same page has the identical own-class arrow + shared-class dot
   structure, so fixing only おすすめ情報 would leave this one zooming. */
.hero__arrow {
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--hero-ctrl-border);
    border-radius: 50%;
    background: var(--hero-ctrl-bg);
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.hero__arrow svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
    border-color: var(--hero-ctrl-hover-border);
    background: var(--hero-ctrl-hover-bg);
    color: var(--hero-ctrl-hover-color);
}

.hero__arrow:active {
    border-color: var(--hero-ctrl-hover-border);
    background: var(--hero-ctrl-active-bg);
    color: var(--hero-ctrl-hover-color);
}

/* The Hero loops, so this never shows today; kept for a non-looping
   configuration. Hover/active never apply to a disabled arrow. */
.hero__arrow:disabled {
    border-color: var(--hero-ctrl-border);
    background: var(--hero-ctrl-bg);
    color: inherit;
    opacity: 0.35;
    cursor: default;
}

.hero__arrow:focus-visible,
.hero__dots .jr-carousel-dot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.hero__dots {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero__dots .jr-carousel-dot {
    position: relative;
    width: 30px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hero__dots .jr-carousel-dot::before {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    top: 50%;
    height: 2px;
    background: var(--hero-dot);
    transform: translateY(-50%);
    transition: background-color 180ms ease, transform 180ms ease;
}

.hero__dots .jr-carousel-dot:hover::before {
    background: var(--hero-dot-hover);
}

.hero__dots .jr-carousel-dot[aria-current="true"]::before {
    background: var(--hero-dot-current);
    transform: translateY(-50%) scaleY(2);
}

@media (max-width: 1023px) {
    .hero__navigation { left: 50%; }
}

@media (max-width: 767px) {
    .hero__video--mobile {
        display: block;
    }

    .hero__video--pc {
        display: none;
    }

    .hero__yt-mount {
        display: block;
    }

    .hero__slide--chamisul .hero__video { object-position: 56% center; }
    .hero__slide--jinro .hero__image { object-position: 72% center; }

    .hero__navigation {
        left: 16px;
        right: 16px;
        bottom: 22px;
        min-height: 52px;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
        transform: none;
    }

    .hero__arrow {
        width: 44px;
        height: 44px;
    }

    .hero__arrow--previous { grid-column: 1; }
    .hero__arrow--next { grid-column: 3; }

    .hero__dots {
        grid-column: 2;
        grid-row: 1;
        gap: 0;
    }

    .hero__dots .jr-carousel-dot {
        width: 44px;
        height: 44px;
    }

}

@media (max-width: 359px) {
    .hero__navigation {
        min-height: 96px;
        grid-template-rows: 44px 44px;
    }

    .hero__dots {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .hero__arrow--previous {
        grid-column: 1;
        grid-row: 2;
    }

    .hero__arrow--next {
        grid-column: 3;
        grid-row: 2;
    }

}

/* ============================================================
   PICK UP — responsive promotional carousel
   ============================================================ */
.top-pickup {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: var(--jr-section-space-y) 0;
    overflow: hidden;
    background: #fff;
}

.top-pickup__inner {
    width: min(100% - 80px, 1280px);
    margin-inline: auto;
}

.top-pickup__heading {
    margin-bottom: clamp(36px, 4.5vw, 64px);
    color: var(--jr-color-ink);
    text-align: center;
}

.home-page .top-pickup__title {
    margin: 0;
}

.top-pickup__viewport {
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
}

.top-pickup__viewport:focus-visible {
    box-shadow: inset 0 0 0 2px var(--jr-color-red);
}

.top-pickup__track {
    width: 100%;
    gap: 24px;
}

.top-pickup__slide {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: calc((100% - 48px) / 3);
}

.top-pickup__banner {
    position: relative;
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--jr-color-surface-soft);
    border-radius: 16px;
}

.top-pickup__banner img {
    width: 100%;
    height: 100%;
    display: block;
    /* Preserve the full promotional artwork; the first two source banners
       are 664x360 and contain edge-to-edge copy that must not be cropped. */
    object-fit: contain;
    background: var(--jr-color-surface-soft);
    transition: transform var(--jr-duration-slow) var(--jr-ease-standard);
}

.top-pickup__banner:hover img {
    transform: scale(1.025);
}

.top-pickup__banner:focus-visible {
    outline: 3px solid var(--jr-color-red);
    outline-offset: -3px;
}

.top-pickup__carousel { position: relative; }

.top-pickup__controls {
    /* Was an absolute inset:0 overlay with the arrows pinned to the left/
       right edges of the images; now a plain row below them instead, with
       the arrows flanking the dots. */
    position: relative;
    margin: 24px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    pointer-events: auto;
}

/* touch-action:manipulation — tapping this arrow twice in quick
   succession to page through the carousel was being read as a
   double-tap zoom by iOS Safari. This arrow uses its own class (not the
   shared .jr-carousel-control), so it needs its own declaration; the
   dots below are the shared .jr-carousel-dot, already covered in
   components.css. Page/pinch zoom is unaffected. */
.top-pickup__arrow {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--jr-color-ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: color var(--jr-duration-fast) ease, background-color var(--jr-duration-fast) ease, border-color var(--jr-duration-fast) ease;
}

.top-pickup__arrow svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-pickup__arrow:hover,
.top-pickup__arrow:focus-visible {
    color: #fff;
    background: var(--jr-color-ink);
    border-color: var(--jr-color-ink);
}

.top-pickup__dots {
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.top-pickup__dots .jr-carousel-dot {
    position: relative;
    width: 30px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    touch-action: manipulation;
}

.top-pickup__dots .jr-carousel-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    left: 5px;
    height: 1px;
    background: #c9c9c9;
    transform: translateY(-50%);
    transition: background-color var(--jr-duration-fast) ease, transform var(--jr-duration-fast) ease;
}

.top-pickup__dots .jr-carousel-dot[aria-current="true"]::before {
    background: var(--jr-color-red);
    transform: translateY(-50%) scaleY(2);
}

.top-pickup__dots .jr-carousel-dot:focus-visible,
.top-pickup__arrow:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 3px;
}

.top-pickup__status {
    display: none;
    min-width: 40px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-align: left;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .top-pickup__slide {
        flex-basis: calc((100% - 24px) / 2);
        min-width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 767px) {

    .top-pickup__inner {
        width: calc(100% - 40px);
    }

    .top-pickup__heading {
        margin-bottom: 32px;
    }

    .top-pickup__banner { aspect-ratio: 5 / 3; }

    .top-pickup__track { gap: 12px; }
    .top-pickup__slide {
        flex-basis: 100%;
        min-width: 100%;
    }

    .top-pickup__slide:first-child .top-pickup__banner,
    .top-pickup__slide:nth-child(4) .top-pickup__banner {
        transform: none;
    }

    .top-pickup__banner img {
        object-position: center;
    }

    .top-pickup__arrow {
        width: 44px;
        height: 44px;
    }

    .top-pickup__dots {
        justify-content: center;
        gap: 0;
    }

    .top-pickup__dots .jr-carousel-dot {
        width: 40px;
        height: 44px;
    }

    .top-pickup__status {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* ============================================================
   PRODUCTS — responsive product carousel
   ============================================================ */
.top-products {
    --top-product-field: #121212;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: clamp(28px, 4.5vh, 96px) 0;
    overflow: hidden;
    color: #fff;
    background: var(--top-product-field);
}

.top-products__inner {
    position: relative;
    width: min(100% - 80px, 1280px);
    margin-inline: auto;
}

.top-products__heading {
    position: absolute;
    z-index: 2;
    top: 120px;
    left: clamp(24px, 5.56vw, 80px);
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    text-align: left;
}

.top-products__title {
    margin: 0;
}

@media (max-width: 767px) {
    .top-products__intro {
        word-break: auto-phrase;
        text-wrap: balance;
    }
}

/* Lead typography comes from .jr-section-intro; TOP's section is not a
   .jr-dark-section, so it keeps its own on-dark tint. */
.top-products__intro {
    color: rgba(255, 255, 255, 0.72);
}

/* The disc is anchored to the stage, not to a slide, so it holds its place
   while the products travel past it. Its colour follows the active product. */
.top-products__disc {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(29vw, 378px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--top-product-accent, #f0ece1);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: background-color var(--jr-duration-slow) var(--jr-ease-standard);
}

.top-products__viewport {
    overflow: visible;
    outline: none;
    touch-action: pan-y;
}

.top-products__viewport:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
}

.top-products__track {
    width: 100%;
}

.top-products__slide {
    position: relative;
    flex: 0 0 56%;
    min-width: 56%;
    min-height: 64vh;
    min-height: 64dvh;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.top-products__copystack {
    position: absolute;
    z-index: 3;
    top: 50%;
    /* Keep the product copy on the right side of the centered bottle. */
    left: calc(50% + min(340px, 26vw) / 2 + clamp(120px, 10vw, 220px));
    width: min(340px, 26vw);
    text-align: left;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Title row: prev arrow / product name / next arrow, laid out with equal-
   width side columns so the name's center point is always the row's
   (and therefore the carousel's) true center — never hand-tuned offsets. */
.top-products__titlebar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    width: 100%;
    pointer-events: none;
}

.top-products__titles {
    grid-column: 2;
    position: relative;
    display: grid;
    width: 100%;
    text-align: center;
    justify-self: center;
}

.top-products__name {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
    font-family: var(--font-serif-jp);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.045em;
    text-wrap: balance;
    transition: opacity 620ms var(--jr-ease-standard), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.top-products__name.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.top-products__titlebar .top-products__arrow--previous { grid-column: 1; justify-self: start; }
.top-products__titlebar .top-products__arrow--next { grid-column: 3; justify-self: end; }

.top-products__body {
    position: relative;
    display: grid;
    width: 100%;
    margin-top: 14px;
}

.top-products__copy {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 620ms var(--jr-ease-standard), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.top-products__copy.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.top-products__desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
    font-size: var(--jr-card-desc-size);
    font-weight: 400;
    line-height: var(--jr-card-desc-line-height);
    letter-spacing: 0.02em;
}

.top-products__cta {
    margin-top: 22px;
    height: 56px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    border: 1.2px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.45);
    backdrop-filter: blur(6px);
    font-size: 16px;
    font-weight: var(--jr-button-font-weight);
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: color var(--jr-duration-fast) ease, background-color var(--jr-duration-fast) ease, border-color var(--jr-duration-fast) ease;
}

/* .jr-arrow-icon itself now lives in components.css (loaded by every
   page, not just TOP) — it was defined here by historical accident even
   though most of its consumers (enjoy/company/support/product/news-
   detail pages) never load styles.css, so the icon silently fell back to
   the browser's default black-filled path there. Do not redefine it in
   this file; page-specific overrides on top of it (like the rule right
   below) are fine. */

.top-products__cta:hover,
.top-products__cta:focus-visible {
    color: var(--top-product-field);
    border-color: #fff;
    background: #fff;
}

.top-products__image {
    height: 100%;
    min-height: 88vh;
    min-height: 88dvh;
    display: grid;
    place-items: center;
    padding: clamp(8px, 1.8vh, 22px) 0;
}

.top-products__image img {
    width: auto;
    max-width: min(100%, 640px);
    height: 88vh;
    height: 88dvh;
    max-height: none;
    object-fit: contain;
}

/* Disc colour per product, taken from each bottle's own label. */
.top-products[data-product-tone="jinro"] { --top-product-accent: #e10017; }
.top-products[data-product-tone="jinro35"] { --top-product-accent: #d7e3ef; }
.top-products[data-product-tone="makgeolli"] { --top-product-accent: #e8e1cf; }
.top-products[data-product-tone="ippin"] { --top-product-accent: #d9c7a5; }
.top-products[data-product-tone="yoicha"] { --top-product-accent: #dfe9dc; }
.top-products[data-product-tone="back"]  { --top-product-accent: #3fa9dc; }
.top-products[data-product-tone="terra"] { --top-product-accent: #b8d4b4; }

/* ============================================================
   商品一覧 — PC 3-column grid / Mobile peek-carousel.
   A parallel presentation to .top-products__carousel above: shown
   instead of it (display:none swap) only at >=1024px and <=767px.
   Tablet (768–1023px) is untouched by any rule below — it keeps the
   original carousel via the rules already in this file.
   .top-products__card-deco is an empty, absolutely-positioned hook for a
   future per-product decoration asset (water/fruit/grain motif per
   product). No such asset exists in this project yet, so it renders
   nothing — see chat report for what's needed before it can be filled in.
   ============================================================ */
.top-products__grid {
    display: none;
}

.top-products__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.top-products__card-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    background: transparent;
}

.top-products__card-deco {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.4s var(--jr-ease-standard, ease), transform 0.4s var(--jr-ease-standard, ease);
}

/* Filename-driven hover layering (product 03 only, see chat report).
   back(z-index:1) -> normal(z-index:2) -> front(z-index:3), all absolute
   over the same .top-products__card-visual box so nothing moves/resizes.
   The hover trigger itself is scoped to hover-capable pointers only
   (see the (hover:hover) and (pointer:fine) block below) — touch/mobile
   always shows the normal layer only, at rest state defined here.
   Asymmetric in/out timing works by defining the transition on each side
   of the state change: the rest-state rule below carries the hover-OUT
   timing (front leads, back follows ~0.06s later); the :hover rule
   further down carries the hover-IN timing (back leads, front follows). */
.top-products__card-visual--layered {
    overflow: visible;
}

.top-products__card-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-products__card-layer--back {
    z-index: 1;
    opacity: 0;
    transform: scale(0.94) translate(-6px, 4px);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.06s;
}

.top-products__card-layer--normal {
    z-index: 2;
    transform: scale(1) translateY(0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-products__card-layer--front {
    z-index: 3;
    opacity: 0;
    transform: scale(0.96) translate(6px, 6px);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .top-products__card:hover .top-products__card-layer--back {
        opacity: 1;
        transform: scale(1) translate(0, 0);
        transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .top-products__card:hover .top-products__card-layer--normal {
        transform: scale(1.045) translateY(-3px);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .top-products__card:hover .top-products__card-layer--front {
        opacity: 1;
        transform: scale(1) translate(0, 0);
        transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.07s,
                    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.07s;
    }
}

.top-products__card-name {
    margin: 12px 0 0;
    font-family: var(--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);
    letter-spacing: var(--jr-product-name-letter-spacing);
}

.top-products__card-desc {
    margin: 10px 0 0;
    min-height: 3.4em;
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--jr-card-desc-size);
    font-weight: var(--jr-card-desc-weight);
    line-height: var(--jr-card-desc-line-height);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-products__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #fff;
    font-size: 14px;
    font-weight: var(--jr-button-font-weight);
    text-decoration: none;
}

.top-products__card-cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* PC product carousel: five-up composition with half cards bleeding at both
   edges, a centered section title, and centered copy beneath the product. */
@media (min-width: 1024px) {
    .top-products__slide {
        /* Exactly 1/4 of the viewport so the centered-carousel math (which
           always centers the active slide) leaves precisely half a slide
           peeking on each side: half | full | full | full | half — 5
           pieces visible. */
        flex-basis: 25%;
        min-width: 25%;
        min-height: 640px;
    }

    .top-products__disc {
        /* Half the row height; the image is centered in that row, so its
           own center matches the row's. */
        top: 320px;
    }

    .top-products__image {
        height: 640px;
        min-height: 640px;
    }

    .top-products__image img {
        height: 640px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .top-products__slide {
        /* Half the piece count of the PC layout: half | full | half — 3
           pieces visible, same auto-height carousel structure as PC. */
        flex-basis: 50%;
        min-width: 50%;
        min-height: 560px;
    }

    .top-products__disc {
        top: 280px;
    }

    .top-products__image {
        height: 560px;
        min-height: 560px;
    }

    .top-products__image img {
        height: 560px;
    }

    .top-products__name {
        font-size: 32px;
    }

}

@media (min-width: 768px) {
    .top-products {
        height: auto;
        min-height: 0;
        padding-top: 120px;
        padding-bottom: 96px;
    }

    .top-products__carousel {
        display: flex;
        flex-direction: column;
        /* Also the positioning context for the disc/arrows below, so their
           math is relative to the carousel row itself, not the heading. */
        position: relative;
    }

    .top-products__viewport {
        order: 1;
    }

    .top-products__heading {
        /* Flow in normal document order, right above the carousel, instead
           of floating via absolute positioning + a hand-tuned clearance
           value on the carousel — that value drifted out of sync whenever
           the heading's (responsive, vw-based) height changed. This way the
           gap is always exactly however tall the heading actually renders. */
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        text-align: center;
        transform: none;
        margin-bottom: 64px;
    }

    .top-products__copystack {
        position: static;
        order: 2;
        margin: 40px auto 0;
        width: 640px;
        text-align: center;
        transform: none;
    }

    .top-products__desc {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-products__cta {
        margin-top: 16px;
    }

    .top-products__image {
        /* Matches the img's own height 1:1 below — no leftover space to
           center within, but keep align-items:center for horizontal.
           Actual height set per-breakpoint above (PC 640 / tablet 560). */
        align-items: center;
        padding: 0;
    }

    .top-products__image img {
        /* Source files are near-square canvases with the bottle occupying
           only ~25-33% of the width; object-fit: cover crops that empty
           side margin away (centered) instead of shrinking the bottle to
           fit the whole canvas. Box aspect (0.42) stays wider than every
           product's own content aspect (max ~0.334) so only the transparent
           padding is cropped, never the bottle itself. Actual height set
           per-breakpoint above. */
        width: auto;
        aspect-ratio: 0.42;
        max-width: none;
        object-fit: cover;
        object-position: center;
        transform: none;
        transform-origin: center;
    }

}

@media (min-width: 1024px) {
    /* Placed after the shared min-width:768px block above (same selector,
       same specificity — source order decides) which sets 640px. That was
       meant as the whole "stage" width (image+copy align to it), but it
       put the arrows way out past the actual title text — narrower here
       so they land close to the product name instead. */
    .top-products__copystack {
        /* Let the copy stack grow to the widest product description so the
           product name and its description share one horizontal measure. */
        width: max-content;
        min-width: 480px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Same idea, narrower again for the tablet viewport (a 776px-wide
       flank span barely fits an ~800px screen). */
    .top-products__copystack {
        width: max-content;
        min-width: 420px;
    }

}

@media (min-width: 768px) {
    /* The title should use the same full content width as the description.
       Keep the controls pinned to the title row edges instead of reserving
       grid columns that make the name narrower than the copy below. */
    .top-products__titlebar {
        position: relative;
        display: block;
    }

    .top-products__titles {
        width: 100%;
    }

    .top-products__titlebar .top-products__arrow--previous,
    .top-products__titlebar .top-products__arrow--next {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .top-products__titlebar .top-products__arrow--previous { left: 0; }
    .top-products__titlebar .top-products__arrow--next { right: 0; }
}

.top-products__arrow {
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.55);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: color var(--jr-duration-fast) ease, background-color var(--jr-duration-fast) ease, border-color var(--jr-duration-fast) ease;
}

.top-products__arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-products__arrow:hover,
.top-products__arrow:focus-visible { color: var(--top-product-field); background: #fff; border-color: #fff; }

/* Mobile only (tablet now shares the PC carousel structure, just at 50%
   slide width instead of 25% — see the two ".top-products__slide" rules
   above). The desktop overlay (copy floating beside the image, one shared
   disc centered on the whole stage) only works with room for copy and
   image side by side. Below that width the carousel becomes a simple column —
   image first (always vertically centered in its own box, neighbouring
   products still peeking at the edges like desktop), copy stacked below it.
   The disc moves from ".top-products__inner" to each slide's own image so it
   always centers on the actual bottle instead of the tallest flex sibling,
   and the arrow controls move (in the HTML) inside ".top-products__viewport"
   so they center on the image alone, not on the image+copy column combined. */
@media (max-width: 767px) {
    .top-products { height: auto; padding: 76px 0 88px; }
    .top-products__inner { width: calc(100% - 40px); }
    .top-products__heading { position: static; margin-bottom: 34px; text-align: center; }

    .top-products__carousel { display: flex; flex-direction: column; }
    .top-products__viewport { position: relative; order: 1; }
    .top-products__copystack { order: 2; }

    /* Full width — the product is sized up ~160%, wide enough that
       neighbouring slides wouldn't fit in the peek anyway. */
    .top-products__slide { flex: 0 0 100%; min-width: 100%; min-height: 0; }
    .top-products__disc { display: none; }
    .top-products__image { position: relative; }
    .top-products__image::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 0;
        /* Sized against the slide's own box (not the viewport) so it always
           fits inside it without being edge-clipped; max-width scaled up
           along with the ~160% bigger product image below. */
        width: 82%;
        max-width: 547px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--top-product-accent, #f0ece1);
        transform: translate(-50%, -50%);
        transition: background-color var(--jr-duration-slow) var(--jr-ease-standard);
    }
    /* Only the centered, interactive slide gets the accent circle — the
       half-visible neighbours either side stay plain, like on desktop. */
    .top-products__slide[aria-hidden="true"] .top-products__image::before { display: none; }
    .top-products__image img { position: relative; z-index: 1; }
    .top-products__copystack {
        position: static;
        margin: 20px auto 0;
        width: 100%;
        max-width: 300px;
        text-align: center;
        transform: none;
        pointer-events: auto;
    }
    .top-products__name { font-size: 28px; }

    /* Keep the mobile title row consistent with tablet/desktop: the product
       name fills the same copy width as the description, while the controls
       sit at the row edges without narrowing the title box. */
    .top-products__titlebar {
        position: relative;
        display: block;
    }

    .top-products__titles { width: 100%; }

    .top-products__titlebar .top-products__arrow--previous,
    .top-products__titlebar .top-products__arrow--next {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        pointer-events: auto;
    }

    .top-products__titlebar .top-products__arrow--previous { left: 0; }
    .top-products__titlebar .top-products__arrow--next { right: 0; }

    /* Same fill-the-box structure as PC (height:X + aspect-ratio + cover,
       no leftover space to center within) instead of letting the image
       size itself by its own aspect ratio inside a taller fixed box. */
    .top-products__image { height: 480px; min-height: 480px; padding: 0; align-items: center; }
    .top-products__image img {
        width: auto;
        height: 480px;
        aspect-ratio: 0.42;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }
    .top-products__arrow { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .top-products__disc,
    .top-products__name,
    .top-products__copy { transition: none; }
}

/* 商品一覧 — PC 3-column grid / Mobile peek-carousel overrides.
   Placed after every other .top-products media query in this file on
   purpose: several of the rules above (e.g. the plain "@media (min-width:
   768px)" carousel block) re-declare .top-products__carousel's display and
   .top-products's height at the same specificity, and CSS breaks same-
   specificity ties by source order — whichever rule is physically later in
   the file wins, not whichever is "more specific" to a breakpoint. Moving
   this block earlier silently lost the override to that later rule before;
   keep it last. */
@media (min-width: 1024px) {
    .top-products {
        height: auto;
        display: block;
        padding: 120px 0 140px;
    }

    .top-products__heading {
        position: static;
        margin-bottom: 56px;
    }

    .top-products__carousel {
        display: none;
    }

    .top-products__grid {
        display: block;
    }

    .top-products__cardtrack {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 80px 24px;
    }

    .top-products__card-cta {
        padding: 10px 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 999px;
    }

    .top-products__card-cta:hover {
        border-color: #fff;
    }

    /* Hover: image scale + decoration fade, both inside the fixed-size
       .top-products__card-visual box — nothing outside it moves, so
       neighbouring cards and the grid never shift. */
    
    .top-products__card:hover .top-products__card-deco {
        opacity: 1;
        transform: scale(1);
    }
}

/* Per-card mobile prev/next buttons. Base rule (display:none) must stay
   ABOVE the <=767px media block below so that block's display:flex wins
   the cascade tie (same selector, later source wins) — see cascade_bugs. */
.top-products__mobile-arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 4;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.top-products__mobile-arrow--prev {
    left: 12px;
}

.top-products__mobile-arrow--next {
    right: 12px;
}

.top-products__mobile-arrow:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.top-products__mobile-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tablet: same 3-column grid as PC, sized down for the narrower viewport —
   no carousel, no horizontal scroll. Old .top-products__carousel stays
   hidden here just like it already is hidden on PC/mobile. */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-products__carousel {
        display: none;
    }

    .top-products__grid {
        display: block;
    }

    .top-products__cardtrack {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 20px;
    }

    .top-products__card-cta {
        padding: 10px 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 999px;
    }

    .top-products__card-cta:hover {
        border-color: #fff;
    }
}

/* Mobile: static 2-column grid list, same idea as PC/Tablet — no more
   sliding carousel. Hover-only effects (image scale, deco fade, layered
   swap) can't fire on touch, so assets/js/product-mobile-carousel.js
   drives the same visual state via the .is-tapped class instead, based
   on scroll position (an IntersectionObserver activates whichever card
   sits in the viewport's 45%–65% band) rather than a tap. */
@media (max-width: 767px) {
    .top-products__carousel {
        display: none;
    }

    .top-products__grid {
        display: block;
    }

    /* Mobile never gets a list-level fade/translateY reveal — the grid is
       visible immediately. [data-jr-reveal]'s base opacity:0 state
       (foundation.css) is neutralized here so is-revealed toggling from
       common.js's observer has no visual effect on Mobile. */
    .top-products__grid[data-jr-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .top-products__cardtrack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 16px;
    }

    .top-products__card-cta {
        padding: 10px 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 999px;
    }

    .top-products__mobile-arrow {
        display: none;
    }

    /* Scroll-active (.is-tapped) mirrors the PC :hover target values above
       1-1-1; only the transition speed changes here so entering AND
       leaving the active state both read as a slow, deliberate crossfade
       instead of the PC hover's snappy ~0.3-0.4s. Same properties the PC
       hover rules already transition (opacity/transform) — no new
       properties added. PC/Tablet (the hover:hover media query above)
       are untouched. */
    .top-products__card-image,
    .top-products__card-deco,
    .top-products__card-layer--back,
    .top-products__card-layer--normal,
    .top-products__card-layer--front {
        transition-duration: 0.7s !important;
    }

    
    .top-products__card.is-tapped .top-products__card-deco {
        opacity: 1;
        transform: scale(1);
    }

    .top-products__card.is-tapped .top-products__card-layer--back {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }

    .top-products__card.is-tapped .top-products__card-layer--front {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

/* ENJOY — moved to components.css (shared with products.html). */

/* ============================================================
   COLUMN — responsive editorial article index
   ============================================================ */

/* The 3-column grid only has room to breathe from ~1024px up; tablet widths
   squeeze titles and category tags into an awkward wrap. */

/* ============================================================
   NEWS RELEASE — responsive editorial list
   ============================================================ */
/* ============================================================
   NEWS / EVENT — soft-gray section band holding two white content
   cards (イベント情報 / ニュース).

   Hierarchy the design is built around, outermost first:
     .top-news              section band (soft gray) + title + filter
     .top-news__column      one white card per category
     .top-news__col-head    card title + enlarged brand icon
     .top-news__row         date | (category / title / place) | arrow

   The filter contract is unchanged — assets/js/top-news-filter.js still
   only flips [data-filter] on .top-news__columns, and the two
   [data-filter="event"|"news"] rules below still collapse the grid to a
   single card. No JS or markup hook was renamed.
   ============================================================ */
.top-news {
    width: 100%;
    padding: var(--jr-section-space-y) 0;
    overflow: hidden;
    color: var(--jr-color-ink);
    background: var(--jr-color-surface-soft);
}

.top-news__inner {
    width: min(100% - 80px, 1280px);
    margin-inline: auto;
}

.top-news__heading {
    margin: 0 auto clamp(46px, 5vw, 70px);
    text-align: center;
}

.home-page .top-news__title {
    margin: 0;
}

.top-news__filter {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto clamp(28px, 3vw, 40px);
}

.top-news__chip {
    color: var(--jr-color-muted);
    background: #fff;
    border-color: var(--jr-color-line);
}

.top-news__chip:not(.is-active):hover {
    color: #fff;
    background: var(--jr-color-ink);
    border-color: var(--jr-color-ink);
}

.top-news__chip.is-active {
    color: #fff;
    background: var(--jr-color-red);
    border-color: var(--jr-color-red);
}

.top-news__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(20px, 2.2vw, 32px);
}

.top-news__columns[data-filter="event"] { grid-template-columns: 1fr; }
.top-news__columns[data-filter="news"] { grid-template-columns: 1fr; }

.top-news__columns[data-filter="event"] .top-news__column--news,
.top-news__columns[data-filter="news"] .top-news__column--event {
    display: none;
}

/* The card itself. No shadow and no full border — a single hairline
   keeps it editorial against the soft-gray band, in the same register as
   .jr-promo-card elsewhere on TOP. */
.top-news__column {
    padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.4vw, 36px);
    background: var(--jr-color-surface);
    border: 1px solid var(--jr-color-line);
    border-radius: 16px;
    transition: opacity var(--jr-duration-base) ease;
}

.top-news__col-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(20px, 2vw, 28px);
}

.top-news__col-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--jr-color-red);
}

.top-news__col-icon svg {
    width: 100%;
    height: 100%;
}

.top-news__col-title {
    margin: 0;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.top-news__list {
    border-top: 1px solid var(--jr-color-line);
}

/* Date column is fixed so every row's category/title/place share one
   left edge; the arrow keeps a 44px touch target at the row's right. */
.top-news__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: clamp(14px, 1.4vw, 24px);
    padding-block: clamp(20px, 1.8vw, 26px);
    border-bottom: 1px solid var(--jr-color-line);
    color: inherit;
    text-decoration: none;
    transition-delay: var(--news-reveal-delay, 0ms);
}

/* The card's own padding already closes the list; a trailing rule would
   read as an empty fourth row. */
.top-news__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.top-news__date-col {
    align-self: start;
    padding-top: 2px;
}

.top-news__date {
    color: var(--jr-color-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.top-news__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.top-news__category {
    color: var(--jr-color-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.top-news__article-title {
    min-width: 0;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.02em;
    transition: transform var(--jr-duration-base) var(--jr-ease-standard), color var(--jr-duration-base) ease;
}

/* Optional supporting line (event venue etc.) — one step below the
   title, and absent rows simply don't render it. */
.top-news__place {
    color: var(--jr-color-muted);
    font-size: 13px;
    line-height: 1.6;
}

.top-news__arrow {
    justify-self: end;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--jr-color-ink);
    font-size: 20px;
    line-height: 1;
    transition: transform var(--jr-duration-base) var(--jr-ease-standard), color var(--jr-duration-base) ease;
}

.top-news__row:hover .top-news__article-title,
.top-news__row:focus-visible .top-news__article-title {
    color: var(--jr-color-red);
    transform: translateX(5px);
}

.top-news__row:hover .top-news__arrow,
.top-news__row:focus-visible .top-news__arrow {
    color: var(--jr-color-red);
    transform: translateX(5px);
}

.top-news__row:focus-visible,
.top-news__all-link:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 4px;
}

.top-news__all-link {
    position: relative;
    height: 56px;
    margin: clamp(48px, 5vw, 72px) auto 0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    color: var(--jr-color-ink);
    background: var(--jr-color-surface);
    border: 1.2px solid var(--jr-color-ink);
    border-radius: 999px;
    font-size: 16px;
    font-weight: var(--jr-button-font-weight);
    letter-spacing: 0.04em;
    text-decoration: none;
}

.top-news__all-link::after {
    content: none;
}

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

/* Tablet: two half-width cards leave each title only ~320px here, which
   wraps these headlines to three and four lines. So the cards stack to
   one full-width column from 1023px down — the rows keep the PC
   date | body | arrow layout, which a full-width card has room for; only
   the <=767px block below switches rows to the compact stacked form. */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-news__columns { grid-template-columns: 1fr; gap: 20px; }
    .top-news__row { padding-block: 22px; }
}

/* Below 768px the two cards stack, イベント情報 first (source order). */
@media (max-width: 767px) {
    .top-news__inner { width: calc(100% - 40px); }
    .top-news__heading { margin-bottom: 38px; }
    .top-news__filter { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-bottom: 28px; }
    .top-news__filter::-webkit-scrollbar { display: none; }
    .top-news__columns { grid-template-columns: 1fr; gap: 16px; }
    .top-news__columns[data-filter="event"],
    .top-news__columns[data-filter="news"] { grid-template-columns: 1fr; }
    .top-news__column { padding: 24px 20px; border-radius: 14px; }
    .top-news__col-icon { width: 24px; height: 24px; }
    .top-news__col-title { font-size: 19px; }

    /* Date and category share the first line; title (and place) sit
       under them, with the arrow centred against the whole row. */
    .top-news__row {
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-areas: "date arrow" "body arrow";
        column-gap: 12px;
        row-gap: 6px;
        padding-block: 18px;
        min-height: 44px;
    }
    .top-news__date-col { grid-area: date; padding-top: 0; }
    .top-news__body { grid-area: body; }
    .top-news__date { font-size: 12px; }
    .top-news__category { font-size: 11px; }
    .top-news__article-title { font-size: 16px; line-height: 1.6; }
    .top-news__place { font-size: 12px; }
    .top-news__arrow { grid-area: arrow; align-self: center; }
    .top-news__all-link { width: 100%; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .top-news__article-title,
    .top-news__arrow,
    .top-news__all-link::after { transition: none; }
    .top-news__row:hover .top-news__article-title,
    .top-news__row:hover .top-news__arrow { transform: none; }
}

/* ============================================================
   COMPANY - responsive two-destination gateway
   ============================================================ */
/* Top padding is the shared Common Section token (160 PC / 120 Tablet /
   64 Mobile), not 0 as before: NEWS above now ends in its own soft-gray
   band, so that boundary is visible and 企業情報 needs the standard
   section clearance below it rather than sitting flush against the band. */
.top-company {
    width: 100%;
    padding: var(--jr-section-space-y) 0;
    overflow: hidden;
    color: var(--jr-color-ink);
    background: #fff;
}

/* ============================================================
   INSTAGRAM — "JINRO MOMENTS" post grid + Follow Us
   ============================================================ */
.top-instagram {
    --top-instagram-bg: #e7f0dc;
    --top-instagram-ink: #16351f;
    position: relative;
    width: 100%;
    padding: var(--jr-section-space-y) 0;
    background: var(--top-instagram-bg);
    color: var(--top-instagram-ink);
    overflow: hidden;
}

.top-instagram__inner {
    position: relative;
    z-index: 2;
    width: min(100% - 80px, 1440px);
    margin-inline: auto;
}

.top-instagram__heading {
    max-width: 640px;
    margin: 0 auto clamp(40px, 4.5vw, 64px);
    text-align: center;
}

.top-instagram__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #3a7d3f;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.top-instagram__eyebrow-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-instagram__title {
    margin: 12px 0 0;
}

.top-instagram__sub {
    margin: 16px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--top-instagram-ink);
    opacity: 0.85;
}

.top-instagram__sub-break {
    display: none;
}

.top-instagram__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 24px;
    /* Reserves clear space above row 1 for the card-1/card-4 frogs (see
       .top-instagram__frog--blue/--pink) so they never overlap the heading
       above or the cards below. */
    margin: 155px 0 clamp(24px, 2.5vw, 36px);
    padding: 0;
    list-style: none;
}

.top-instagram__item {
    position: relative;
    min-width: 0;
}

.top-instagram__card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: transform var(--jr-duration-base, 300ms) var(--jr-ease-standard, ease);
}

.top-instagram__card:hover,
.top-instagram__card:focus-visible {
    transform: translateY(-6px);
}

.top-instagram__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #dfe9d5;
}

.top-instagram__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--jr-ease-standard, ease);
}

.top-instagram__card:hover .top-instagram__media img {
    transform: scale(1.05);
}

.top-instagram__reel-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
}

.top-instagram__reel-badge svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-instagram__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
}

.top-instagram__user {
    font-size: 16px;
    font-weight: 700;
    color: var(--top-instagram-ink);
}

.top-instagram__user::before {
    content: '@';
    opacity: 0.6;
}

.top-instagram__caption {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(22, 53, 31, 0.72);
}

.top-instagram__follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

/* Frog + button as one visual group, centered together in the section;
   align-items:center keeps their vertical centers matched regardless of
   the frog being taller than the button. */
.top-instagram__follow-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Matches the TOP page's standard pill CTA (see .top-news__all-link):
   56px tall, 1.2px ink border, ink-fill on hover — same button language
   used across the other TOP sections. */
.top-instagram__follow-link {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    gap: 10px;
    color: var(--top-instagram-ink);
    font-size: 16px;
    font-weight: var(--jr-button-font-weight);
    letter-spacing: 0.04em;
    text-decoration: none;
    background: transparent;
    border: 1.2px solid var(--top-instagram-ink);
    border-radius: 999px;
    transition: color var(--jr-duration-fast, 200ms) ease, background-color var(--jr-duration-fast, 200ms) ease;
}

.top-instagram__follow-link:hover,
.top-instagram__follow-link:focus-visible {
    color: #fff;
    background: var(--top-instagram-ink);
}

.top-instagram__follow-link strong {
    font-weight: 800;
}

.top-instagram__follow-note {
    display: none;
    margin: 0;
    font-size: 13px;
    color: rgba(22, 53, 31, 0.7);
}

/* Frog decorations — real character art sitting fully above card 1 (blue)
   and card 4 (pink), centered on that card's own width, no overlap with
   the card. Absolute + anchored to the item's own box (position:relative,
   see .top-instagram__item) so it never affects the grid's own sizing —
   card row heights/alignment stay identical whether the frog is there or
   not. */
.top-instagram__frog {
    display: block;
    width: auto;
    object-fit: contain;
    pointer-events: none;
}

.top-instagram__frog--blue,
.top-instagram__frog--pink {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 100%;
    height: 115px;
    transform: translateX(-50%);
}

.top-instagram__frog--green {
    flex: 0 0 auto;
    height: 144px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .top-instagram__grid {
        column-gap: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Only card 1's frog shows at Tablet/Mobile (see chat report) — card 4
       moves to row 2 in this 2-column layout, and a second frog sitting
       mid-grid there was dropped, so row-gap can stay a normal grid gap. */
    .top-instagram__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
        row-gap: 24px;
        margin-top: 155px;
    }

    .top-instagram__sub {
        font-size: 18px;
    }

    .top-instagram__user {
        font-size: 15px;
    }

    .top-instagram__caption {
        font-size: 14px;
    }

    .top-instagram__frog--pink {
        display: none;
    }
}

@media (max-width: 767px) {
    .top-instagram__inner {
        width: calc(100% - 40px);
    }

    .top-instagram__heading {
        margin-bottom: 32px;
    }

    .top-instagram__sub {
        font-size: 16px;
    }

    .top-instagram__sub-break {
        display: inline;
    }

    .top-instagram__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 14px;
        row-gap: 14px;
        margin-top: 108px;
        margin-bottom: 20px;
    }

    .top-instagram__frog--blue {
        height: 82px;
        bottom: 100%;
    }

    .top-instagram__frog--pink {
        display: none;
    }

    .top-instagram__meta {
        padding: 12px;
    }

    .top-instagram__user {
        font-size: 14px;
    }

    .top-instagram__caption {
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .top-instagram__follow-link {
        order: 1;
        justify-content: center;
        width: 100%;
        padding: 14px 28px;
    }

    .top-instagram__follow-note {
        display: block;
        order: 2;
        text-align: center;
    }

    /* Break the frog+button pairing on mobile so each can take its own row
       in the order button -> note -> frog (see .top-instagram__follow-link
       order:1 / .top-instagram__follow-note order:2 above). */
    .top-instagram__follow-group {
        display: contents;
    }

    .top-instagram__frog--green {
        order: 3;
        height: 106px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-instagram__card,
    .top-instagram__follow-link,
    .top-instagram__media img {
        transition: none;
    }
}

/* Tablet content guide: 80px maximum side gutter, scales with viewport.
   Scoped to the tablet range only — desktop has its own fixed 1440px cap
   below, added because this rule's old unbounded "@media (min-width:768px)"
   let padding-inline stop growing at 80px while width:100% kept the content
   area itself expanding forever past 1440px on wide monitors. */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-pickup__inner,
    .top-products__inner,
    .top-enjoy__inner,
    .top-news__inner,
    .top-company__inner {
        width: 100%;
        padding-inline: clamp(24px, 5.56vw, 80px);
    }
}

/* PC content guide: fixed 1440px max, centered — stops growing past that
   regardless of monitor width. Placed after every other .top-*__inner width
   rule in this file (including the tablet block just above and each
   section's own base rule) so it always wins the cascade tie at >=1024px. */
@media (min-width: 1024px) {
    .top-pickup__inner,
    .top-products__inner,
    .top-enjoy__inner,
    .top-news__inner,
    .top-company__inner {
        max-width: var(--jr-layout-max, 1440px);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}

.top-company__heading {
    margin: 0 auto clamp(46px, 5vw, 70px);
    text-align: center;
}

.home-page .top-company__title {
    margin: 0;
}

/* Grid/card/media/content/title/desc/arrow are now the shared
   .jr-promo-card-grid/.jr-promo-card/__media/__content/__title/__desc/
   __arrow component (components.css) — index.html's markup carries both
   class names (top-company__* kept for the two rules below + the
   reveal-stagger var; jr-promo-card__* drives the actual visuals). Only
   what's genuinely TOP-specific stays here. */
.top-company__card {
    transition-delay: var(--company-reveal-delay, 0ms);
}

.top-company__card:first-child .jr-promo-card__media img { object-position: center 54%; }
.top-company__card:nth-child(2) .jr-promo-card__media img { object-position: center; }

@media (max-width: 767px) {
    .top-company__inner { width: calc(100% - 40px); margin-inline: auto; }
    .top-company__heading { margin-bottom: 38px; }
}

/* ============================================================
   公式SNS — a full TOP section (Section Title + 4 official-account
   logos), not a thin utility strip: same --jr-section-space-y
   top/bottom rhythm as every other TOP section (PICK UP/Products/
   Enjoy), same .jr-section-heading/.jr-section-title component for
   the title (color overridden to white for the #121212 background).
   No text label, no circle chip/card added by us — see the HTML
   comment above this section for why each logo uses a different
   source file (_mo vs _pc) to stay legible on dark. ============================================================ */
.top-sns {
    width: 100%;
    padding: var(--jr-section-space-y) 20px;
    background: #121212;
}

.top-sns__inner {
    margin-inline: auto;
}

.top-sns__title {
    color: #fff;
}

.top-sns__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.top-sns__item {
    flex: 0 0 auto;
}

.top-sns__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    transition: opacity var(--jr-duration-base) ease, transform var(--jr-duration-base) var(--jr-ease-standard);
}

.top-sns__link img {
    width: auto;
    height: 88px;
    object-fit: contain;
}

.top-sns__link:hover,
.top-sns__link:focus-visible {
    opacity: 0.7;
    transform: scale(1.03);
}

.top-sns__link:focus-visible {
    outline: 2px solid var(--jr-color-red);
    outline-offset: 4px;
    border-radius: 4px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .top-sns__grid { gap: 40px; }
    .top-sns__link img { height: 44px; }
}

@media (max-width: 767px) {
    .top-sns__grid { gap: 20px; }
    .top-sns__link img { height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .top-sns__link { transition: none; }
    .top-sns__link:hover { transform: none; }
}