@charset "UTF-8";

/* ==========================================================================
   BAG COLLECTION - PC
   ========================================================================== */

.bag-page {
    --bag-base: #f3f3f3;
    --bag-paper: #fff;
    --bag-teal: #288981;
    --bag-plate: #d9d9d9;
    --bag-ink: #232323;
    --bag-sub: #6f6f6f;
    --bag-line: #dcdcdc;
    --bag-main: #69AB93;
    --bag-main-dark: #549D82;
    --bag-main-tint: #eaede2;
    --bag-font: "Noto Sans JP", "Rakuten Sans JP", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
    --bag-font-en: "Helvetica Neue", arial, "Noto Sans JP", "Rakuten Sans JP", sans-serif;
    --bag-font-mincho: "A P-OTF RyuminKO+ ProN", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", serif;
    --bag-font-zen: "Zen Kaku Gothic New", var(--bag-font);
    color: var(--bag-ink);
    font-family: var(--bag-font);
    background-color: var(--bag-paper);
    /* hidden would force overflow-y to auto and give the wrapper its own
       scrollbar, so clip is used where supported. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* MEN keeps the WOMEN layout and only swaps the palette. */
.bag-page.bag-men {
    --bag-main: #6980AA;
    --bag-main-dark: #547299;
    --bag-main-tint: #e4e7ee;
    --bag-teal: #285E98;
}

.bag-page .ecm-alcor {
    padding: 8px;
}

.bag-page a:hover {
    text-decoration: none;
}

/* ECM base styles recolour links on hover; card links keep their own colour. */
.bag-scene-card:hover {
    color: inherit;
}

.bag-guide-card:hover {
    color: var(--bag-ink);
}

.bag-inner {
    box-sizing: border-box;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
}


/* --------------------------------------------------------------------------
   00 KV : rebuilt from Figma layer data (kv-pc frame, 1920x460). The photo
   collage tile loops left to right; the copy stays fixed on top. Cropped from
   both sides on narrow viewports rather than scaled.
   -------------------------------------------------------------------------- */

.bag-kv-figma {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    background-color: var(--bag-main);
}

.bag-kv-marquee {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Offset only the photo layer; the copy/mask keeps its own centered origin.
   Max safe value is 179px - beyond that the leading card leaves a gap at the
   left edge on the loop seam. */
.bag-kv-track {
    display: flex;
    width: max-content;
    height: 100%;
    margin-left: 170px;
    animation: bag-kv-scroll 26s linear infinite;
}

/* Tile width keeps every card gap at 10px across the loop seam. */
@keyframes bag-kv-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-2100px, 0, 0);
    }
}

.bag-kv-pc {
    position: relative;
    flex: 0 0 2100px;
    width: 2100px;
    height: 540px;
    background-color: var(--bag-main);
}

.bag-kv-photo {
    position: absolute;
    top: 10px;
    width: 340px;
    height: 440px;
    overflow: hidden;
    background-color: #d9d9d9;
}

/* Photos and the vertical copy wipe open together while the loop is already scrolling. */
.bag-kv-photo,
.bag-kv-scene-img {
    animation: bag-kv-mask-down 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bag-kv-mask-down {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Each asset is exported already cropped, so it fills its card 1:1. */
.bag-kv-figma .bag-kv-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.bag-kv-copy {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 540px;
    pointer-events: none;
}

.bag-kv-figma .bag-kv-logo-img,
.bag-kv-figma .bag-kv-scene-img {
    position: absolute;
    max-width: none;
}

/* Wipes start left to right, overlapping rather than running one after another. */
.bag-kv-photo-06 {
    left: -179px;
}

.bag-kv-photo-07 {
    left: 171px;
    animation-delay: 90ms;
}

.bag-kv-photo-04 {
    left: 521px;
    animation-delay: 180ms;
}

.bag-kv-photo-03 {
    left: 871px;
    animation-delay: 270ms;
}

.bag-kv-photo-05 {
    left: 1221px;
    animation-delay: 360ms;
}

.bag-kv-photo-01 {
    left: 1571px;
    animation-delay: 450ms;
}

/* Centred in the 1920px copy layer at its design width, then scales with the
   viewport once that no longer fits, so it never gets cropped. */
.bag-kv-logo-img {
    left: 50%;
    top: 380px;
    width: min(989px, 96vw);
    height: auto;
    transform: translateX(-50%);
}

/* Two-part Figma signboard, sized to the single sign it replaces. */
.bag-kv-scene {
    position: absolute;
    left: 1199px;
    top: 57px;
    width: 94px;
    height: 264px;
}

.bag-kv-scene-img {
    width: 44.167%;
    animation-delay: 340ms;
}

.bag-kv-scene-img-1 {
    left: 55.833%;
    top: 0;
    height: 87.798%;
}

.bag-kv-scene-img-2 {
    left: 0;
    top: 17.857%;
    height: 82.143%;
}

/* The signboard artwork is exported in the WOMEN green, so MEN rotates its
   hue into the blue palette instead of shipping a second asset. */
.bag-men .bag-kv-scene-img {
    filter: hue-rotate(56deg);
}

@media (prefers-reduced-motion: reduce) {
    .bag-kv-track,
    .bag-kv-photo,
    .bag-kv-scene-img {
        animation: none;
    }
}

.bag-kv-figma-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --------------------------------------------------------------------------
   01 Gender tabs
   -------------------------------------------------------------------------- */

.bag-gender {
    padding: 0;
}

.bag-lead {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 0 0;
    font-size: 15px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    text-align: center;
    color: #3d3d3d;
}

.bag-gender-tabs {
    background-color: var(--bag-paper);
}

.bag-gender-tablist {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.bag-gender-tabitem {
    flex: 1 1 0;
    height: 56px;
}

.bag-gender-tabitem.is-current {
    height: 68px;
}

.bag-gender-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: var(--bag-ink);
    background-color: var(--bag-paper);
    border: 1px solid var(--bag-line);
    border-bottom: 0;
    transition: color 200ms ease-out, border-color 200ms ease-out;
}

/* Each tab previews the palette of the page it leads to, so these stay fixed
   instead of following the current page's --bag-main. */
.bag-gender-tab[data-link-name="women"]:hover {
    color: #69AB93;
    border-color: #69AB93;
}

.bag-gender-tab[data-link-name="men"]:hover {
    color: #6980AA;
    border-color: #6980AA;
}

.bag-gender-tabitem.is-current .bag-gender-tab {
    color: var(--bag-paper);
    background-color: var(--bag-main);
    border-color: var(--bag-main);
    cursor: default;
    pointer-events: none;
}

/* placeholder */
.bag-gender-tab.is-current::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background-color: var(--bag-main);
}

.bag-gender-tab.is-current::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background-color: var(--bag-paper);
}

.bag-gender-tab-en {
    display: block;
    font-family: var(--bag-font-en);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.23em;
}

/* --------------------------------------------------------------------------
   Floating refine search (trigger + popup shell)
   -------------------------------------------------------------------------- */

/* The ecm-floating wrapper in the markup pins this above the scroll-to-top
   button, so the button itself only draws the circle. */
.bag-refine-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    padding: 0;
    font-family: inherit;
    color: var(--bag-paper);
    background-color: var(--bag-main);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: opacity 200ms ease-out;
}

.bag-refine-btn:hover {
    opacity: 0.85;
}

.bag-refine-btn-label {
    display: block;
    width: 5em;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
}

.bag-refine-btn-label .ecm-icon-search {
    display: block;
    margin-bottom: 2px;
    font-size: 20px;
}

/* The framed box is the body alone; the title and the close sit above it,
   directly on the overlay. */
.bag-refine-panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    max-height: 100%;
    overflow-y: auto;
}

.bag-refine-panel-title {
    margin: 0 0 28px;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--bag-main);
}

.bag-refine-close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 34px;
    color: var(--bag-paper);
    background: none;
    border: none;
    cursor: pointer;
}

.bag-refine-panel-body {
    padding: 34px 85px 40px;
    background-color: var(--bag-main-tint);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.bag-refine-legend {
    margin: 0 0 11px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--bag-ink);
}

/* The checkbox keeps the state and the swatch draws it, so the native box is
   dropped rather than restyled. */
.bag-refine-check {
    display: none;
}

.bag-refine-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bag-refine-select {
    box-sizing: border-box;
    width: calc(50% - 35px);
    height: 56px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 18px;
    color: var(--bag-ink);
    background-color: var(--bag-paper);
    border: 1px solid var(--bag-line);
    border-radius: 10px;
    cursor: pointer;
}

.bag-refine-price-sep {
    font-size: 18px;
    color: var(--bag-ink);
}

.bag-refine-colors {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px 10px;
    padding: 0;
    list-style: none;
}

.bag-refine-swatch {
    display: block;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    margin: 0 5px 9px;
    border: 1px solid var(--bag-paper);
    border-radius: 50%;
    cursor: pointer;
}

/* Eighteen different grounds to sit on, so the selected state is a ring
   around the swatch instead of a mark drawn over it. */
.bag-refine-check:checked + .bag-refine-swatch {
    box-shadow: 0 0 0 2px var(--bag-main);
}

.bag-refine-keyword {
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 18px;
    color: var(--bag-ink);
    background-color: var(--bag-paper);
    border: 1px solid var(--bag-line);
    border-radius: 10px;
}

.bag-refine-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 42px;
}

.bag-refine-reset,
.bag-refine-submit {
    height: 56px;
    padding: 0;
    font-family: inherit;
    font-size: 20px;
    border-radius: 28px;
    cursor: pointer;
    transition: opacity 200ms ease-out;
}

.bag-refine-reset {
    width: calc(44% - 12px);
    color: var(--bag-main);
    background-color: var(--bag-paper);
    border: 1px solid var(--bag-main);
}

.bag-refine-submit {
    width: 56%;
    color: var(--bag-paper);
    background-color: var(--bag-main);
    border: none;
}

.bag-refine-reset:hover,
.bag-refine-submit:hover {
    opacity: 0.85;
}

.bag-refine-swatch-black {
    background-color: #333333;
}

.bag-refine-swatch-gray {
    background-color: #999999;
}

.bag-refine-swatch-white {
    background-color: #ffffff;
}

.bag-refine-swatch-brown {
    background-color: #955322;
}

.bag-refine-swatch-beige {
    background-color: #d9c7a2;
}

.bag-refine-swatch-khaki {
    background-color: #6b692c;
}

.bag-refine-swatch-pink {
    background-color: #ffb1bf;
}

.bag-refine-swatch-rose {
    background-color: #b33e5c;
}

.bag-refine-swatch-red {
    background-color: #d62525;
}

.bag-refine-swatch-orange {
    background-color: #f49000;
}

.bag-refine-swatch-yellow {
    background-color: #e7dd40;
}

.bag-refine-swatch-green {
    background-color: #009600;
}

.bag-refine-swatch-blue {
    background-color: #04a3d7;
}

.bag-refine-swatch-navy {
    background-color: #060f80;
}

.bag-refine-swatch-purple {
    background-color: #6c1e98;
}

.bag-refine-swatch-gold {
    background-image: linear-gradient(-45deg, #f0d23c, #f0d23c 50%, #ffe762 50%, #ffe762);
}

.bag-refine-swatch-silver {
    background-image: linear-gradient(-45deg, #c9c9c9, #c9c9c9 50%, #dfdfdf 50%, #dfdfdf);
}

.bag-refine-swatch-clear {
    background-image: linear-gradient(-45deg, #d0eeff, #d0eeff 50%, #e9f7ff 50%, #e9f7ff);
}

/* --------------------------------------------------------------------------
   Section shell / headings
   -------------------------------------------------------------------------- */

.bag-section {
    padding: 96px 0;
}

.bag-section-tinted {
    background-color: var(--bag-base);
}

/* Lead copy and the scene navigation continue the KV's green band. */
.bag-gender,
.bag-usenav,
.bag-column {
    background-color: var(--bag-main);
    color: var(--bag-paper);
    /* Section edges land on fractional pixels, so abutting green blocks let a
       hairline of the white page background show through; overlap by 1px. */
    margin-top: -1px;
}

.bag-gender .bag-lead,
.bag-usenav .bag-heading-en,
.bag-column .bag-heading-en {
    color: var(--bag-paper);
}

.bag-usenav {
    padding-top: 64px;
}

/* Runs straight on from the scene navigation, so the shared band is not
   padded twice at the seam. */
.bag-column {
    padding-top: 0;
}

.bag-heading {
    margin: 0;
    text-align: center;
}

.bag-heading-en {
    display: block;
    font-family: fiona, sans-serif;
    font-style: normal;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.23em;
    color: var(--bag-teal);
}

/* Artwork cropped tight to the caps, so the height is the cap height the
   30px type used to draw. */
.bag-heading-en img {
    display: block;
    width: auto;
    height: 22px;
    margin: 0 auto;
}

.bag-heading-ja {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.bag-note {
    margin: 16px 0 48px;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--bag-sub);
}

/* --------------------------------------------------------------------------
   Column cards
   -------------------------------------------------------------------------- */

.bag-column-slider {
    margin-top: 40px;
}

/* A hovered card tilts past its slide and the slider viewport clips. Growing
   the viewport by the overhang and pulling it back by the same amount keeps
   the track where it was, corners included. */
.bag-column .ecm-slider {
    margin: -12px;
    padding: 12px;
}

/* Cards sit on the green band, so the plate levels with the tallest card in
   the row instead of each one ending at its own text. */
.bag-column .ecm-slider-track {
    align-items: stretch;
}

/* The card is the popup trigger, so it is a button stripped back to a plate.
   Laid out as a column because a stretched button centres its content, which
   drops the photo away from the top edge. */
.bag-column-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    font: inherit;
    text-align: left;
    color: inherit;
    background-color: var(--bag-paper);
    border: none;
    cursor: pointer;
}

/* Every other card takes the tinted ground SCENE 02 / 04 use. */
.bag-column-card-alt {
    background-color: var(--bag-main-tint);
}

.bag-column-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin: -16px -16px 0;
    background-color: var(--bag-plate);
}

/* Out of flow so a tall photo cannot push the plate past the ratio: every
   card keeps the same picture height. */
.bag-column-thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Same snap as the scene cards: the card jumps to its tilt instead of easing
   into it. */
.bag-column-card:hover {
    transform: rotate(-3.5deg);
}

/* Titles run one or two lines depending on the article, so the box always
   reserves two: without it the body copy starts at a different height on
   every card and the cards end up unequal. */
.bag-column-title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 3em;
    margin: 14px 0 0;
    font-family: var(--bag-font-zen);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--bag-ink);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* The body copy stays in the card for the popup to read, but the card only
   shows the photo and the title. */
.bag-column-text {
    display: none;
}

.bag-column-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bag-column-panel::-webkit-scrollbar {
    display: none;
}

.bag-column-panel-head {
    position: relative;
    min-height: 56px;
    margin-bottom: 16px;
}

.bag-column-panel-title {
    flex: none;
    margin: 0;
    padding: 24px 24px 0;
    font-family: var(--bag-font-zen);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--bag-ink);
}

.bag-column-close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 34px;
    color: var(--bag-paper);
    background: none;
    border: none;
    cursor: pointer;
}

/* Every article gets the same box, so the copy scrolls inside it instead of
   the frame growing with the longer pieces. The floor clears the longest
   article, so every piece reads in one go without an inner scroll. */
.bag-column-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 640px;
    background-color: var(--bag-paper);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Empty until the article thumbnails land, so the plate itself stands in. */
.bag-column-panel-photo {
    position: relative;
    flex: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--bag-plate);
}

/* Taken out of flow so a tall photo cannot stretch the flex item past the
   ratio: every article keeps the same picture box. */
.bag-column-panel-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bag-column-panel-text {
    flex: 1 1 auto;
    margin: 0;
    padding: 12px 24px 28px;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--bag-ink);
}

.bag-column-panel-note {
    margin: 0;
    padding: 0 24px 28px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--bag-gray-2, #767676);
}

.bag-item-note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--bag-sub);
}

/* "CASE 0X" heading (Figma 960x66 bar): a 2px rule split around a centered
   chip, with the heading below. */
.bag-case-heading {
    margin: 64px 0 40px;
}

.bag-case-heading-rule {
    display: flex;
    align-items: center;
}

.bag-case-heading-line {
    flex: 1 1 auto;
    height: 2px;
    background-color: var(--bag-main);
}

.bag-case-heading-chip {
    flex: 0 0 auto;
    width: 117px;
    height: 17.3px;
    background-color: var(--bag-main);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.bag-case-heading-chip-01 {
    --bag-case-chip: url("data:image/svg+xml,%3Csvg width='95' height='14' viewBox='0 0 95 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.37628 14C1.62236 12.9407 1.03545 11.8241 0.615542 10.6503C0.205181 9.46694 0 8.25017 0 7C0 5.73074 0.205181 4.49966 0.615542 3.30675C1.03545 2.11384 1.62236 1.01159 2.37628 0L3.67894 0.672801C3.01091 1.62713 2.47648 2.61963 2.07566 3.65031C1.68439 4.68098 1.48875 5.79755 1.48875 7C1.48875 8.18337 1.68439 9.28562 2.07566 10.3067C2.47648 11.3183 3.01568 12.3204 3.69325 13.3129L2.37628 14Z' fill='%236AAC94'/%3E%3Cpath d='M92.3151 14C93.069 12.9407 93.656 11.8241 94.0759 10.6503C94.4862 9.46694 94.6914 8.25017 94.6914 7C94.6914 5.73074 94.4862 4.49966 94.0759 3.30675C93.656 2.11384 93.069 1.01159 92.3151 0L91.0125 0.672801C91.6805 1.62713 92.2149 2.61963 92.6157 3.65031C93.007 4.68098 93.2027 5.79755 93.2027 7C93.2027 8.18337 93.007 9.28562 92.6157 10.3067C92.2149 11.3183 91.6757 12.3204 90.9982 13.3129L92.3151 14Z' fill='%236AAC94'/%3E%3Cpath d='M26.8797 5.276H24.9837C24.8997 4.748 24.5397 4.256 23.8317 4.256C23.0037 4.256 22.5597 4.856 22.5597 6.212V7.508C22.5597 8.804 22.9917 9.464 23.8317 9.464C24.5397 9.464 24.8637 9.104 24.9837 8.444H26.8797C26.5917 10.304 25.5837 11.12 23.8317 11.12C21.9477 11.12 20.5677 9.98 20.5677 7.508V6.212C20.5677 3.716 21.9477 2.6 23.8317 2.6C25.4757 2.6 26.6037 3.476 26.8797 5.276Z' fill='%236AAC94'/%3E%3Cpath d='M30.9216 11H28.7976L31.6776 2.72H33.5976L36.4776 11H34.3536L33.9096 9.584H31.3536L30.9216 11ZM32.6376 5.48L31.8696 7.928H33.3936L32.6376 5.48Z' fill='%236AAC94'/%3E%3Cpath d='M44.663 3.956L43.187 5.012C42.863 4.46 42.455 4.256 41.711 4.256C41.051 4.256 40.763 4.556 40.763 4.976C40.763 5.468 41.195 5.744 42.239 6.044C44.039 6.56 44.723 7.232 44.723 8.648C44.723 10.148 43.715 11.12 41.831 11.12C40.319 11.12 39.299 10.748 38.519 9.764L40.007 8.72C40.415 9.236 40.919 9.464 41.663 9.464C42.431 9.464 42.731 9.14 42.731 8.744C42.731 8.264 42.395 8.024 41.171 7.628C39.491 7.088 38.771 6.32 38.771 4.988C38.771 3.62 39.671 2.6 41.687 2.6C43.007 2.6 44.075 3.044 44.663 3.956Z' fill='%236AAC94'/%3E%3Cpath d='M47.6048 2.72H52.8368V4.376H49.5968V5.888H52.4768V7.544H49.5968V9.344H52.8368V11H47.6048V2.72Z' fill='%236AAC94'/%3E%3Cpath d='M66.0786 8.36C66.0786 10.376 64.7106 11.12 63.1026 11.12C61.4946 11.12 60.1266 10.376 60.1266 8.36V5.36C60.1266 3.224 61.4946 2.6 63.1026 2.6C64.7106 2.6 66.0786 3.224 66.0786 5.348V8.36ZM62.1066 5.588V8.132C62.1066 9.02 62.3466 9.464 63.1026 9.464C63.8466 9.464 64.0866 9.02 64.0866 8.132V5.588C64.0866 4.7 63.8466 4.256 63.1026 4.256C62.3466 4.256 62.1066 4.7 62.1066 5.588Z' fill='%236AAC94'/%3E%3Cpath d='M72.948 3.12V11.4H70.956V5.148L69.768 5.88V4.032L71.196 3.12H72.948Z' fill='%236AAC94'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--bag-case-chip);
    mask-image: var(--bag-case-chip);
}

.bag-case-heading-chip-02 {
    --bag-case-chip: url("../../_cmn/img/photo/00_case-chip-02.svg");
    -webkit-mask-image: var(--bag-case-chip);
    mask-image: var(--bag-case-chip);
}

.bag-case-heading-chip-03 {
    --bag-case-chip: url("../../_cmn/img/photo/00_case-chip-03.svg");
    -webkit-mask-image: var(--bag-case-chip);
    mask-image: var(--bag-case-chip);
}

.bag-case-heading-chip-04 {
    --bag-case-chip: url("../../_cmn/img/photo/00_case-chip-04.svg");
    -webkit-mask-image: var(--bag-case-chip);
    mask-image: var(--bag-case-chip);
}

.bag-case-heading-text {
    margin: 22px 0 0;
    font-family: var(--bag-font-zen);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--bag-main);
}

.bag-subheading-sub {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-align: center;
}

/* Second and later sub-headings follow a product slider instead of the H3. */
.bag-page [data-param-name="s-id"] + .bag-subheading-sub,
.bag-page .bag-more + .bag-subheading-sub {
    margin-top: 48px;
}

.bag-more {
    margin-top: 24px;
    text-align: center;
}

.bag-more .ecm-button {
    position: relative;
    box-sizing: border-box;
    width: 320px;
    max-width: 100%;
    padding: 11px 40px;
}

.bag-more .ecm-icon-chevron-right {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   02 Scene navigation (3 columns, 3 + 2)
   -------------------------------------------------------------------------- */

/* Flex instead of grid so the 2-item second row stays centered. */
.bag-scene-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 24px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.bag-scene-grid > li {
    width: calc((100% - 48px) / 3);
}

/* MEN runs four scenes, so they sit 2x2 at the same card size as the WOMEN
   three-column row rather than leaving an orphan on the second row.
   632px is two 304px cards plus the 24px gutter. */
.bag-men .bag-scene-grid {
    max-width: 632px;
    margin: 48px auto 0;
}

.bag-men .bag-scene-grid > li {
    width: calc((100% - 24px) / 2);
}

.bag-scene-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bag-scene-thumb {
    display: block;
    margin: 0 4px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--bag-plate);
    transform: rotate(0deg);
}

.bag-scene-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Crops past the dark window frame on the left of the source photo. */
.bag-scene-thumb .bag-photo-zoom {
    transform: scale(1.15);
    transform-origin: right top;
}

/* SCENE 02 on MEN is a wide landscape travel shot, so the portrait crop is
   held left of centre to keep both the traveller and the case in frame. */
.bag-men .bag-scene-card[href="#section-use-02"] .bag-scene-thumb img,
.bag-men .bag-use-02 .bag-use-showcase-photo-a img {
    object-position: 40% center;
}

/* The tall mask only exposes about a third of this landscape frame, so the
   crop is held left of centre to keep the suitcase next to the traveller. */
.bag-men .bag-use-02 .bag-use-showcase-photo-b img {
    object-position: 29% center;
}

.bag-scene-card:hover .bag-scene-thumb {
    transform: rotate(-3.5deg);
}

.bag-scene-num {
    display: block;
    margin-top: 16px;
    font-family: fiona, sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}

.bag-scene-num img {
    display: block;
    width: auto;
    height: 11.5px;
    margin: 0 auto;
}

.bag-scene-title {
    position: relative;
    display: block;
    width: fit-content;
    margin: 2px auto 0;
    padding: 5px 14px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
}

/* The label picks up the KV signboard while the photo tilts. It is a second
   copy of the text in the signboard colours, wiped in from the left, so the
   type flips to green exactly as the plate passes under it. */
.bag-scene-title::after {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: inherit;
    color: var(--bag-main);
    background-color: var(--bag-paper);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bag-scene-card:hover .bag-scene-title::after {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .bag-scene-title::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   03 Search guide (4 columns)
   -------------------------------------------------------------------------- */

.bag-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 32px;
}

.bag-guide-card {
    display: block;
    color: var(--bag-ink);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.bag-guide-card:nth-child(even) {
    margin-top: 56px;
}

.bag-guide-thumb {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--bag-plate);
}

.bag-guide-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease-out;
}

.bag-guide-card:hover .bag-guide-thumb img {
    transform: scale(1.04);
}

.bag-guide-body {
    display: block;
    padding: 20px 0 0;
}

.bag-guide-tag {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    font-family: var(--bag-font-en);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.23em;
    color: var(--bag-teal);
    background-color: transparent;
    border-radius: 0;
}

.bag-guide-title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.bag-guide-text {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    line-height: 2;
    color: var(--bag-sub);
}

/* --------------------------------------------------------------------------
   04-08 Use sections
   -------------------------------------------------------------------------- */

.bag-use {
    background-color: var(--bag-paper);
}

.bag-use-02,
.bag-use-04 {
    background-color: var(--bag-main-tint);
}

/* USE 01 : photo collage showcase, replacing the plain heading for this section.
   Sized to the Figma frame's own bounding box (665x472) so every child can be
   positioned with percentages and still land on the exact original pixel values
   at full width, while staying fluid below that. */
.bag-use-showcase-wrap {
    box-sizing: border-box;
    max-width: 705px;
    margin: 0 auto 56px;
    padding: 0 20px;
}

.bag-use-showcase {
    position: relative;
    aspect-ratio: 665 / 472;
}

.bag-use-showcase-photo {
    position: absolute;
    overflow: hidden;
    background-color: var(--bag-plate);
}

.bag-use-showcase-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bag-use-showcase-photo-a {
    left: 50.5%;
    top: 0;
    width: 49.5%;
    height: 80.9%;
}

.bag-use-showcase-photo-b {
    left: 8.1%;
    top: 56.1%;
    width: 57.6%;
    height: 43.9%;
}

/* MEN runs a full-length portrait here, so the wide frame has to crop low
   enough to keep the tote in shot. */
.bag-men .bag-use-03 .bag-use-showcase-photo-b img {
    object-position: center 90%;
}

.bag-use-showcase-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 18.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.bag-use-showcase-mark svg {
    width: 95%;
    height: auto;
}

.bag-use-showcase-mark svg path {
    fill: var(--bag-main);
}

/* The number artwork ships as an alpha-only PNG, so it is painted through a
   mask to pick up the KV green rather than its baked-in dark ink. One shared
   digit height keeps every mark the same size, so each digit pair takes its
   width from its own ratio. */
.bag-use-showcase-num {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 84px;
    background-color: var(--bag-main);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.bag-use-showcase-num-01 {
    aspect-ratio: 94 / 91;
    -webkit-mask-image: url("../../_cmn/img/photo/04_usecase01-num-icon.png");
    mask-image: url("../../_cmn/img/photo/04_usecase01-num-icon.png");
}

.bag-use-showcase-num-02 {
    aspect-ratio: 105 / 76;
    -webkit-mask-image: url("../../_cmn/img/photo/05_usecase02-num-icon.png");
    mask-image: url("../../_cmn/img/photo/05_usecase02-num-icon.png");
}

.bag-use-showcase-num-03 {
    aspect-ratio: 105 / 77;
    -webkit-mask-image: url("../../_cmn/img/photo/06_usecase03-num-icon.png");
    mask-image: url("../../_cmn/img/photo/06_usecase03-num-icon.png");
}

.bag-use-showcase-num-04 {
    aspect-ratio: 113 / 81;
    -webkit-mask-image: url("../../_cmn/img/photo/07_usecase04-num-icon.png");
    mask-image: url("../../_cmn/img/photo/07_usecase04-num-icon.png");
}

.bag-use-showcase-num-05 {
    aspect-ratio: 105 / 77;
    -webkit-mask-image: url("../../_cmn/img/photo/08_usecase05-num-icon.png");
    mask-image: url("../../_cmn/img/photo/08_usecase05-num-icon.png");
}

.bag-use-showcase-caption {
    position: absolute;
    left: 20.6%;
    top: 9.7%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 28px;
    background-color: var(--bag-paper);
}

.bag-use-showcase-caption-text {
    font-family: var(--bag-font-zen);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--bag-main);
    white-space: nowrap;
}

.bag-use-showcase-lead {
    position: absolute;
    left: 0;
    top: 36%;
    width: 38.9%;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--bag-ink);
}

/* Zoomed until the shoulder line reaches the top of the frame, so the caption
   plate no longer sits over the model's face. */
.bag-use-01 .bag-use-showcase-photo-a img {
    transform: scale(1.3);
    transform-origin: 65% bottom;
}

/* USE 02 / USE 04 : same showcase component, repositioned to their shared
   Figma frame (670x438 content bounding box, identical between both scenes).
   The lead copy sits as a white chip on top of the lower photo, and the
   category label runs vertically. */
.bag-use-02 .bag-use-showcase,
.bag-use-04 .bag-use-showcase {
    aspect-ratio: 670 / 438;
}

.bag-use-02 .bag-use-showcase-photo-a,
.bag-use-04 .bag-use-showcase-photo-a {
    left: 0;
    top: 0;
    width: 49.1%;
    height: 87.2%;
}

.bag-use-02 .bag-use-showcase-photo-b,
.bag-use-04 .bag-use-showcase-photo-b {
    left: 45.1%;
    top: 12.6%;
    width: 30.9%;
    height: 87.4%;
}

.bag-use-02 .bag-use-showcase-mark,
.bag-use-04 .bag-use-showcase-mark {
    left: 79.5%;
    width: 19.8%;
}

.bag-use-02 .bag-use-showcase-caption,
.bag-use-04 .bag-use-showcase-caption {
    left: 86.3%;
    top: 35.3%;
    padding: 8px;
}

.bag-use-02 .bag-use-showcase-caption-text,
.bag-use-04 .bag-use-showcase-caption-text {
    writing-mode: vertical-rl;
}

.bag-use-02 .bag-use-showcase-lead,
.bag-use-04 .bag-use-showcase-lead {
    left: 58.4%;
    top: 78%;
    width: 41.6%;
    box-sizing: border-box;
    padding: 6px 10px;
    background-color: var(--bag-paper);
}

/* SCENE 02 / 04 sit on the light var(--bag-main-tint) ground, so their green runs darker. */
.bag-use-02 .bag-use-showcase-mark svg path,
.bag-use-04 .bag-use-showcase-mark svg path {
    fill: var(--bag-main-dark);
}

.bag-use-02 .bag-use-showcase-num,
.bag-use-04 .bag-use-showcase-num {
    align-self: flex-end;
    background-color: var(--bag-main-dark);
}

.bag-use-02 .bag-use-showcase-caption-text,
.bag-use-04 .bag-use-showcase-caption-text {
    color: var(--bag-main-dark);
}

.bag-use-02 .bag-case-heading-text,
.bag-use-04 .bag-case-heading-text {
    color: var(--bag-main-dark);
}

.bag-use-02 .bag-case-heading-line,
.bag-use-04 .bag-case-heading-line,
.bag-use-02 .bag-case-heading-chip,
.bag-use-04 .bag-case-heading-chip {
    background-color: var(--bag-main-dark);
}

/* USE 03 / USE 05 : share USE 01's photo bounding box (665x472); only the
   mark box and caption chip shift slightly because their SCENE glyph and
   copy differ in width. */
.bag-use-03 .bag-use-showcase-mark,
.bag-use-05 .bag-use-showcase-mark {
    left: 0.6%;
    width: 19.8%;
}

.bag-use-05 .bag-use-showcase-mark {
    width: 20.5%;
}

/* MEN has no formal-wear scene, so its last section carries the "04"
   artwork, which is narrower than the WOMEN "05" mark. */
.bag-men .bag-use-05 .bag-use-showcase-mark {
    width: 19.9%;
}

.bag-use-03 .bag-use-showcase-caption,
.bag-use-05 .bag-use-showcase-caption {
    left: 22.6%;
}

.bag-anchor-navi {
    margin: 40px 0 0;
}

.bag-anchor-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bag-anchor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* Side padding clears the pinned arrow so the label stays optically centred. */
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--bag-ink);
    background-color: var(--bag-paper);
    border: 1px solid var(--bag-line);
    border-radius: 0;
    transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
}

.bag-anchor-btn:hover {
    color: var(--bag-teal);
    background-color: var(--bag-paper);
    border-color: var(--bag-teal);
}

/* These scenes sit on white, so their anchors take the KV's solid green. */
.bag-use-01 .bag-anchor-btn,
.bag-use-03 .bag-anchor-btn,
.bag-use-05 .bag-anchor-btn {
    color: var(--bag-paper);
    background-color: var(--bag-main);
    border-color: var(--bag-main);
}

.bag-use-01 .bag-anchor-btn:hover,
.bag-use-03 .bag-anchor-btn:hover,
.bag-use-05 .bag-anchor-btn:hover {
    color: var(--bag-paper);
    background-color: var(--bag-main-dark);
    border-color: var(--bag-main-dark);
}

.bag-anchor-btn .ecm-icon-chevron-down {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}


/* --------------------------------------------------------------------------
   Floating navigation
   -------------------------------------------------------------------------- */

/* The bar fills the 960px content column, so the items share it evenly and an
   active section reads as a solid cell. */
.bag-sticky-nav .ecm-floating-navi {
    max-width: 960px;
    margin: 0 auto;
}

.bag-sticky-nav .ecm-floating-navi > :first-child {
    margin-left: 0;
}

.bag-sticky-nav .ecm-floating-navi > :last-child {
    margin-right: 0;
}

/* Two stacked labels per item; the active section takes the KV signboard
   green. ECM flags every visible section, so the second of two adjacent
   hits is reset the same way its own stylesheet does. */
.bag-sticky-nav .ecm-floating-navi-item {
    flex: 1 1 0;
    gap: 3px;
    line-height: 1.3;
}

.bag-navi-num {
    font-family: fiona, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: inherit;
}

.bag-sticky-nav .ecm-floating-navi-item > span:last-child {
    font-size: 14px;
    font-weight: 500;
}

.bag-sticky-nav .ecm-floating-navi-item-anchor[data-in-viewport="true"] {
    color: var(--bag-paper);
    background-color: var(--bag-main);
    border-color: var(--bag-main);
}

.bag-sticky-nav .ecm-floating-navi-item-anchor[data-in-viewport="true"] + .ecm-floating-navi-item-anchor[data-in-viewport="true"] {
    color: var(--bag-ink);
    background-color: transparent;
    border-color: transparent;
}

/* Gender switch stacked over the scene menu. Closed by default; it only
   opens while the reader scrolls back up, so the bar stays slim on the way
   down. The current side is marked with a rule rather than a filled cell:
   a themed block here would run straight into the themed active cell of the
   menu below and the two rows would read as one. The hairline and the cast
   shadow are what keep them apart. */
.bag-sticky-gender {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    background-color: var(--bag-paper);
    border-bottom: 1px solid var(--bag-line);
    box-shadow: 0 4px 8px -6px rgba(0, 0, 0, 0.28);
    transition: max-height 240ms ease-out, opacity 160ms ease-out;
}

.bag-sticky-nav.is-scroll-up .bag-sticky-gender {
    max-height: 46px;
    opacity: 1;
}

.bag-sticky-gender-btn {
    box-sizing: border-box;
    flex: 0 1 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-family: var(--bag-font-en);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-decoration: none;
    color: var(--bag-sub);
    transition: color 200ms ease-out;
}

/* The underline sits on the label itself, and the transparent border is kept
   on both sides so switching pages never shifts the baseline. The left pad
   balances the trailing letter-space so the rule looks centred. */
.bag-sticky-gender-btn > span {
    margin-top: 5px;
    padding-bottom: 3px;
    padding-left: 0.2em;
    border-bottom: 2px solid transparent;
}

.bag-sticky-gender-btn.is-current {
    color: var(--bag-main);
    font-weight: 500;
    pointer-events: none;
}

.bag-sticky-gender-btn.is-current > span {
    border-bottom-color: var(--bag-main);
}

/* Same rule as the signboard tabs: each side previews its own palette. */
.bag-sticky-gender-btn[data-link-name="women"]:hover {
    color: #69AB93;
}

.bag-sticky-gender-btn[data-link-name="men"]:hover {
    color: #6980AA;
}
.rakuten_fashion__sub {
    text-align: center !important;
}