@charset "utf-8";

/* GALLERY — Figma 52:73 / SP 86:37 absolute collage */

#pageBody {
overflow-x: hidden;
}

#VISUAL {
position: relative;
z-index: 1;
height: 954px;
background: #faf9f6;
--hero-w: 360px;
--hero-h: 540px;
--hero-x: 460px;
--hero-y: 177px;
}
#VISUAL .canvas {
position: relative;
width: 1280px;
height: 100%;
margin: 0 auto;
}
#VISUAL .hero-pht {
position: absolute;
left: calc(var(--hero-x) - var(--hero-w) * .05);
top: calc(var(--hero-y) - var(--hero-h) * .05);
width: calc(var(--hero-w) * 1.1);
height: calc(var(--hero-h) * 1.1);
overflow: hidden;
}
.collage .item > picture,
.collage .item > .item-media {
position: relative;
z-index: var(--z, 1);
display: block;
width: 100%;
height: 100%;
will-change: transform;
}
.collage .item .item-media picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.collage .item .item-video {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.collage .item .item-video .video-js,
.collage .item .item-video .vjs-fill,
.collage .item .item-video .vjs-16-9,
.collage .item .item-video .vjs-fluid {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
padding-top: 0 !important;
background: transparent !important;
}
.collage .item .item-video .vjs-tech,
.collage .item .item-video video {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center center !important;
}
.collage .item .item-video .vjs-control-bar,
.collage .item .item-video .vjs-big-play-button,
.collage .item .item-video .vjs-loading-spinner,
.collage .item .item-video .vjs-error-display,
.collage .item .item-video .vjs-modal-dialog,
.collage .item .item-video .vjs-poster,
.collage .item .item-video .vjs-text-track-display,
.collage .item .item-video .vjs-dock,
.collage .item .item-video .vjs-overlay {
display: none !important;
}
#VISUAL .hero-pht picture {
position: absolute;
left: 50%;
top: 50%;
width: calc(var(--hero-w) * 1.1);
height: calc(var(--hero-h) * 1.1);
max-width: none;
transform: translate(-50%, -50%);
}
#VISUAL .hero-pht img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
}
#VISUAL h1 {
position: absolute;
left: 0;
right: 0;
top: 385px;
z-index: 2;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 80px;
font-weight: 600;
line-height: 1.21;
text-align: center;
color: #000;
pointer-events: none;
opacity: 0;
}
#VISUAL .lead {
position: absolute;
left: 334px;
top: 809px;
width: 613px;
margin: 0;
font-size: 14px;
font-weight: 300;
line-height: 28px;
text-align: center;
color: #000;
opacity: 0;
}
#VISUAL .scroll-hint {
position: absolute;
z-index: 2;
left: 1244px;
top: 669px;
display: none;
flex-direction: column;
align-items: center;
gap: 6px;
color: #000;
pointer-events: none;
opacity: 0;
}
#VISUAL .scroll-hint span {
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 17px;
font-weight: 400;
writing-mode: vertical-rl;
}
#VISUAL .scroll-hint::after {
content: '';
display: block;
width: 1px;
height: 55px;
background: #000;
clip-path: inset(0 0 100% 0);
}
#VISUAL.is-hero-copy .scroll-hint::after {
animation: scrollHintLine 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

.collage .stage {
position: relative;
width: 1280px;
height: 14152px;
margin: 0 auto;
}
.collage .item {
position: absolute;
margin: 0;
overflow: visible;
}
.collage .item img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
}
.collage .item.full {
left: calc(50% - max(50%, 50vw));
width: max(100%, 100vw);
overflow: hidden;
}
.collage .item.full picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.collage .item.full img {
width: 100%;
height: auto;
min-height: 100%;
object-fit: cover;
object-position: center top;
will-change: transform;
}
.collage figcaption {
position: absolute;
z-index: 40;
margin: 0;
font-size: 14px;
font-weight: 300;
line-height: 28px;
color: #000;
pointer-events: none;
opacity: 0;
will-change: transform, opacity;
}

.i01 { left: 195px; top: 0; width: 763px; height: 509px; --z: 16; }
.i01 figcaption { left: 804px; top: 389px; width: 266px; }
.i02 { left: 74px; top: 476px; width: 291px; height: 375px; --z: 6; }
.i03 { left: 586px; top: 629px; width: 609px; height: 406px; --z: 11; }
.i04 { left: 290px; top: 1111px; width: 367px; height: 466px; --z: 4; }
.i04 figcaption { left: 444px; top: 214px; width: 350px; }
.i05 { left: 0; top: 2183px; width: 1280px; height: 620px; --z: 17; }
.i06 { left: 793px; top: 2849px; width: 378px; height: 452px; --z: 9; }
.i07 { left: 54px; top: 2902px; width: 330px; height: 397px; --z: 3; }
.i07 figcaption { left: 97px; top: 453px; width: 355px; }
.i08 { left: 452px; top: 3369px; width: 530px; height: 544px; --z: 12; }
.i09 { left: 810px; top: 3880px; width: 483px; height: 322px; --z: 2; }
.i10 { left: 82px; top: 4502px; width: 442px; height: 606px; --z: 22; }
.i10 figcaption { left: 170px; top: 621px; width: 350px; }
.i11 { left: 608px; top: 4653px; width: 620px; height: 824px; --z: 24; }
.i12 { left: 0; top: 5670px; width: 1280px; height: 784px; --z: 1; }
.i13 { left: 446px; top: 6533px; width: 834px; height: 520px; --z: 18; }
.i14 { left: 82px; top: 7068px; width: 762px; height: 463px; --z: 7; }
.i14 figcaption { left: 448px; top: 483px; width: 350px; }
.i15 { left: -18px; top: 7508px; width: 289px; height: 324px; --z: 5; }
.i16 { left: 752px; top: 7932px; width: 411px; height: 330px; --z: 10; }
.i17 { left: 154px; top: 8424px; width: 416px; height: 559px; --z: 13; }
.i17 figcaption { left: 598px; top: 68px; width: 400px; }
.i18 { left: 517px; top: 8689px; width: 609px; height: 747px; --z: 14; }
.i19 { left: 140px; top: 9750px; width: 603px; height: 830px; --z: 25; }
.i20 { left: 0; top: 10714px; width: 1280px; height: 620px; --z: 23; }
.i21 { left: 430px; top: 11425px; width: 850px; height: 546px; --z: 15; }
.i22 { left: 122px; top: 11665px; width: 379px; height: 415px; --z: 8; }
.i22 figcaption { left: 0; top: 503px; width: 250px; }
.i23 { left: 629px; top: 12273px; width: 517px; height: 700px; --z: 20; }
.i23 figcaption { left: -43px; top: 904px; width: 433px; }
.i24 { left: 99px; top: 12954px; width: 404px; height: 546px; --z: 19; }
.i25 { left: 381px; top: 13454px; width: 711px; height: 474px; --z: 21; }

@media screen and (max-width: 767px) {
#VISUAL {
height: auto;
aspect-ratio: 402 / 937;
width: 100%;
--hero-w: calc(336 * var(--sp));
--hero-h: calc(540 * var(--sp));
--hero-x: calc(33 * var(--sp));
--hero-y: calc(131 * var(--sp));
}
#VISUAL .canvas {
width: 100%;
}
#VISUAL h1 {
left: 23.881%;
right: auto;
top: 75.453%;
width: 52.488%;
margin: 0;
font-size: calc(36 * var(--sp));
line-height: 1.22;
text-align: center;
}
#VISUAL .lead {
left: 7.214%;
top: 88.154%;
text-align: left;
font-size: calc(14 * var(--sp));
line-height: calc(28 * var(--sp));
}
#VISUAL .scroll-hint {
display: flex;
left: auto;
right: 1.244%;
top: 54.429%;
gap: calc(6 * var(--sp));
}
#VISUAL .scroll-hint span {
font-size: calc(17 * var(--sp));
}
#VISUAL .scroll-hint::after {
height: calc(55 * var(--sp));
}
.collage figcaption {
font-size: calc(14 * var(--sp));
line-height: 2.33;
}
.collage .stage {
width: 100%;
height: calc(9720 / 402 * 100vw);
margin-bottom: calc(80 * var(--sp));
}
.collage .item.full {
overflow: visible;
}
.collage .item.full picture {
position: relative;
top: auto;
left: auto;
height: auto;
}
.collage .item.full img {
height: auto;
min-height: 0;
object-fit: unset;
object-position: center center;
will-change: auto;
}

.i01 { left: 17.91%; top: 0; width: 75.622%; height: 2.513%; }
.i01 figcaption { left: 28.947%; top: 121.182%; width: 75%; }
.i02 { left: -2.985%; top: 2.088%; width: 35.323%; height: 2.265%; }
.i03 { left: 30.348%; top: 5.555%; width: 68.408%; height: 2.265%; }
.i04 { left: 5.473%; top: 8.047%; width: 47.264%; height: 2.971%; }
.i04 figcaption { left: 110.526%; top: 32.917%; width: 80%; }
.i05 { left: 0; top: 14.188%; width: 100%; height: auto; }
.i06 { left: 53.483%; top: 19.382%; width: 46.766%; height: 2.785%; }
.i07 { left: -.995%; top: 20.217%; width: 47.512%; height: 2.488%; }
.i07 figcaption { left: 35.602%; top: 114.428%; width: 185.864%; }
.i08 { left: 24.129%; top: 25.825%; width: 70.398%; height: 3.59%; }
.i09 { left: 55.721%; top: 28.986%; width: 54.478%; height: 1.807%; }
.i10 { left: -.746%; top: 31.857%; width: 49.751%; height: 3.392%; }
.i10 figcaption { left: 33.5%; top: 108.394%; width: 150.5%; }
.i11 { left: 30.1%; top: 37.1%; width: 69.9%; height: 4.618%; }
.i12 { left: 0; top: 42.838%; width: 100%; height: auto; }
.i13 { left: 23.632%; top: 48.5%; width: 80.597%; height: 2.501%; }
.i14 { left: 5.224%; top: 51.801%; width: 85.821%; height: 2.6%; }
.i14 figcaption { left: 42.029%; top: 110.476%; width: 60%; }
.i15 { left: -1.244%; top: 53.816%; width: 32.587%; height: 1.807%; }
.i16 { left: 22.637%; top: 58.798%; width: 58.706%; height: 2.34%; --z: 26; }
.i17 { left: -3.483%; top: 59.813%; width: 47.015%; height: 3.144%; }
.i17 figcaption { left: 124.868%; top: 50.472%; width: 100%; }
.i18 { left: 28.109%; top: 64.239%; width: 74.129%; height: 4.519%; }
.i19 { left: 0; top: 70.391%; width: 72.388%; height: 4.952%; }
.i20 { left: 0; top: 76.595%; width: 100%; height: auto; }
.i21 { left: 12.438%; top: 80.561%; width: 94.279%; height: 3.293%; }
.i22 { left: -5.97%; top: 83.359%; width: 60.448%; height: 3.305%; }
.i22 figcaption { left: 110%; top: 61.798%; width: 65%; }
.i23 { left: 30.348%; top: 89.508%; width: 61.94%; height: 3.457%; }
.i23 figcaption { left: 47.39%; top: 125.238%; width: 62%; }
.i24 { left: -.995%; top: 92.736%; width: 55.473%; height: 3.726%; }
.i25 { left: 12.438%; top: 97.456%; width: 86.07%; height: 2.86%; }

}

#CATALOG {
position: relative;
z-index: 5;
background-color: #d5d5d5;
background-image: linear-gradient(to right, #bababa 0%, #d5d5d5 48%, #e7e7e7 100%);
}
#CATALOG .cont {
background: none;
}

@media screen and (min-width: 768px) {
#VISUAL .scroll-hint {
display: flex;
}
}

/* hero intro (same sequence as PERFORMANCE) */
#VISUAL.is-hero-ready .hero-pht {
transition: left 1.6s cubic-bezier(.22, 1, .36, 1), top 1.6s cubic-bezier(.22, 1, .36, 1), width 1.6s cubic-bezier(.22, 1, .36, 1), height 1.6s cubic-bezier(.22, 1, .36, 1);
}
#VISUAL.is-hero-ready .hero-pht picture {
transition: width 1.6s cubic-bezier(.22, 1, .36, 1), height 1.6s cubic-bezier(.22, 1, .36, 1);
}
#VISUAL.is-hero-ready h1 {
transition: opacity 1.15s ease;
}
#VISUAL.is-hero-ready .lead,
#VISUAL.is-hero-ready .scroll-hint {
transition: opacity 1s ease;
}
#VISUAL.is-hero-title h1 {
opacity: 1;
}
#VISUAL.is-hero-clip .hero-pht {
left: var(--hero-x);
top: var(--hero-y);
width: var(--hero-w);
height: var(--hero-h);
}
#VISUAL.is-hero-scale .hero-pht picture {
width: calc(var(--hero-w) * 1.01);
height: calc(var(--hero-h) * 1.01);
}
#VISUAL.is-hero-copy .lead,
#VISUAL.is-hero-copy .scroll-hint {
opacity: 1;
}

@keyframes scrollHintLine {
0% {
clip-path: inset(0 0 100% 0);
}
40% {
clip-path: inset(0 0 0 0);
}
55% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(100% 0 0 0);
}
}

@media (prefers-reduced-motion: reduce) {
.collage .item .item-video {
display: none;
}
}