@charset "utf-8";

/* PERFORMANCE — Figma 2031:390 / SP 86:250 */

#pageBody {
overflow-x: hidden;
}

#VISUAL {
position: relative;
height: 951px;
background: #faf9f6;
--hero-w: 651px;
--hero-h: 440px;
--hero-x: 315px;
--hero-y: 229px;
}
#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;
}
#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: 759px;
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;
}

.perf-sec {
margin: 0 0 80px;
}
.perf-sec .banner {
position: relative;
height: 400px;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 110px;
color: #fff;
}
.perf-sec .banner picture {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
max-width: none;
z-index: 0;
will-change: transform;
}
.perf-sec .banner img {
position: static;
display: block;
width: 100%;
height: auto;
max-width: none;
object-fit: none;
}
.perf-sec .banner span {
position: relative;
z-index: 1;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 24px;
font-weight: 800;
letter-spacing: .03em;
line-height: 28px;
}
.perf-sec .cont {
width: 1280px;
margin: 0 auto;
padding: 101px 137px 0 137px;
box-sizing: border-box;
display: grid;
grid-template-columns: 290px 1fr;
column-gap: 81px;
align-items: start;
}
.perf-sec h2 {
margin-bottom: 12px;
font-family: 'Koburina Gothic W6 JIS2004', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: .03em;
line-height: 28px;
}
.perf-sec .body,
.perf-sec dd,
.perf-sec article p {
font-size: 14px;
font-weight: 300;
line-height: 28px;
}
.perf-sec dt,
.perf-sec article h3 {
font-family: 'Koburina Gothic W6 JIS2004', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 28px;
}
.perf-sec dl {
margin-top: 30px;
}
.perf-sec dd {
margin: 0 0 12px;
}

.perf-sec .pht picture,
.perf-sec .diagram picture,
.perf-sec .diagrams picture,
.perf-sec .pht img,
.perf-sec .diagram img,
.perf-sec .diagrams img {
width: 100%;
height: auto;
max-width: none;
display: block;
}

#SILENCE .pht picture,
#SILENCE .pht img {
width: 290px;
height: 500px;
}
#SILENCE .pht img {
object-fit: cover;
}
#SILENCE .diagram {
margin-top: 46px;
max-width: 316px;
}

#AIR .cont.air {
grid-template-columns: 438px 421px;
column-gap: 118px;
justify-content: start;
padding: 91px 150px 0 154px;
}
#AIR .pht {
grid-column: 1;
grid-row: 1;
}
#AIR .pht picture,
#AIR .pht img {
width: 438px;
height: 412px;
}
#AIR .pht img {
object-fit: cover;
}
#AIR .systems {
grid-column: 2;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
gap: 24px;
}
#AIR .systems article h3 {
margin-bottom: 0;
}
#AIR .systems .diagram {
margin-top: 12px;
max-width: 365px;
}
#AIR .txt {
grid-column: 1;
grid-row: 2;
padding-top: 51px;
max-width: 477px;
}

#CEILING .cont.ceiling {
grid-template-columns: 290px 1fr;
column-gap: 60px;
padding: 93px 100px 0 150px;
}
#CEILING .pht picture,
#CEILING .pht img {
width: 290px;
height: 500px;
}
#CEILING .pht img {
object-fit: cover;
}
#CEILING .diagrams {
display: flex;
gap: 0;
margin: 0 0 48px;
}
#CEILING .diagrams img {
width: 100%;
height: auto;
}
#CEILING .txt {
max-width: 504px;
}

@media screen and (max-width: 767px) {
#VISUAL {
height: auto;
padding: calc(56 * var(--sp)) 0 0;
--hero-w: calc(336 * var(--sp));
--hero-h: calc(540 * var(--sp));
--hero-x: auto;
--hero-y: auto;
}
#VISUAL .canvas {
width: 100%;
height: auto;
padding-bottom: calc(62 * var(--sp));
}
#VISUAL .hero-pht {
position: relative;
left: auto;
top: auto;
width: calc(var(--hero-w) * 1.1);
height: calc(var(--hero-h) * 1.1);
margin: calc(69 * var(--sp)) auto 0;
}
#VISUAL h1 {
position: relative;
top: auto;
left: auto;
right: auto;
margin: calc(48 * var(--sp)) auto 0;
font-size: calc(36 * var(--sp));
line-height: 1.22;
white-space: nowrap;
}
#VISUAL .lead {
position: relative;
left: calc(52 * var(--sp));
top: auto;
max-width: none;
margin: calc(37 * var(--sp)) 0 0;
padding: 0;
text-align: left;
font-size: calc(14 * var(--sp));
line-height: calc(28 * var(--sp));
}
#VISUAL .scroll-hint {
display: flex;
left: auto;
right: calc(5 * var(--sp));
top: calc(454 * var(--sp));
gap: calc(6 * var(--sp));
}
#VISUAL .scroll-hint span {
font-size: calc(17 * var(--sp));
}
#VISUAL .scroll-hint::after {
height: calc(54 * var(--sp));
}

.perf-sec {
margin: 0;
}
.perf-sec .banner {
height: calc(236 * var(--sp));
padding-left: calc(33 * var(--sp));
}
.perf-sec .banner picture {
height: 100%;
will-change: auto;
}
.perf-sec .banner img {
height: 100%;
object-fit: cover;
object-position: center center;
}
.perf-sec .banner span {
font-size: calc(24 * var(--sp));
line-height: calc(28 * var(--sp));
}
.perf-sec .cont,
#AIR .cont.air,
#CEILING .cont.ceiling {
width: 100%;
display: flex;
flex-direction: column;
}
.perf-sec h2 {
margin-bottom: calc(12 * var(--sp));
font-size: calc(18 * var(--sp));
line-height: calc(28 * var(--sp));
}
.perf-sec .body,
.perf-sec dd,
.perf-sec article p {
font-size: calc(14 * var(--sp));
line-height: calc(28 * var(--sp));
}
.perf-sec dt,
.perf-sec article h3 {
font-size: calc(14 * var(--sp));
line-height: calc(28 * var(--sp));
}

#SILENCE .cont {
padding: calc(44 * var(--sp)) calc(33 * var(--sp)) calc(53 * var(--sp));
}
#SILENCE .txt {
display: contents;
}
#SILENCE .pht {
order: 1;
display: flex;
justify-content: center;
margin: 0 auto calc(44 * var(--sp));
}
#SILENCE .pht picture,
#SILENCE .pht img {
width: calc(170 * var(--sp));
height: auto;
aspect-ratio: auto;
}
#SILENCE h2 { order: 2; }
#SILENCE .body { order: 3; }
#SILENCE .diagram {
order: 4;
max-width: none;
width: 100%;
margin: calc(45 * var(--sp)) 0 calc(34 * var(--sp));
}
#SILENCE dl {
order: 5;
margin: 0;
}

#AIR .cont.air {
padding: calc(77 * var(--sp)) calc(33 * var(--sp)) calc(76 * var(--sp));
}
#AIR .pht {
order: 1;
grid-column: auto;
grid-row: auto;
margin: 0 0 calc(34 * var(--sp));
}
#AIR .pht img,
#AIR .pht picture {
width: 100%;
height: auto;
aspect-ratio: auto;
}
#AIR .txt {
order: 2;
grid-column: auto;
grid-row: auto;
padding-top: 0;
max-width: none;
margin: 0 0 calc(30 * var(--sp));
}
#AIR .systems {
order: 3;
grid-column: auto;
grid-row: auto;
gap: calc(44 * var(--sp));
}
#AIR .systems article {
margin-bottom: 0;
}
#AIR .systems .diagram {
max-width: none;
width: 100%;
margin-top: calc(14 * var(--sp));
}
#AIR .systems article:last-child .diagram {
width: calc(346 * var(--sp));
}

#CEILING .cont.ceiling {
padding: calc(66 * var(--sp)) calc(33 * var(--sp)) calc(68 * var(--sp));
}
#CEILING .pht {
width: calc(320 * var(--sp));
margin: 0 auto calc(56 * var(--sp));
}
#CEILING .pht img,
#CEILING .pht picture {
width: 100%;
height: auto;
aspect-ratio: auto;
}
#CEILING .diagrams {
display: block;
width: calc(390 * var(--sp));
margin: 0 0 calc(35 * var(--sp));
margin-left: calc(-27 * var(--sp));
}
#CEILING .diagrams img,
#CEILING .diagrams picture {
width: 100%;
height: auto;
}
#CEILING .txt {
max-width: none;
}

}

#CATALOG {
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 + scroll reveal */
#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) {
#VISUAL .hero-pht,
#VISUAL.is-hero-ready .hero-pht,
#VISUAL.is-hero-clip .hero-pht {
left: var(--hero-x);
top: var(--hero-y);
width: var(--hero-w);
height: var(--hero-h);
transition: none;
}
#VISUAL .hero-pht picture,
#VISUAL.is-hero-scale .hero-pht picture {
width: var(--hero-w);
height: var(--hero-h);
transition: none;
}
#VISUAL h1,
#VISUAL .lead,
#VISUAL .scroll-hint,
#VISUAL.is-hero-ready h1,
#VISUAL.is-hero-ready .lead,
#VISUAL.is-hero-ready .scroll-hint,
.page-performance .reveal,
.page-performance .reveal-fade {
opacity: 1;
transform: none;
transition: none;
}
#VISUAL .scroll-hint::after,
#VISUAL.is-hero-copy .scroll-hint::after {
clip-path: none;
animation: none;
}
}