@charset "utf-8";

/* ==========================================================================
   DESIGN — Figma DESIGN02 / SP_DESIGN
   ========================================================================== */

#pageBody,
#contents {
max-width: 100%;
background-color: #fff;
}

#VISUAL {
position: relative;
z-index: 1;
--hero-w: 740px;
--hero-h: 440px;
--hero-x: 270px;
--hero-y: 229px;
--hero-stage-h: 951px;
height: var(--hero-stage-h);
background: #fff;
}
#VISUAL .hero-stage {
position: sticky;
top: 0;
height: var(--hero-stage-h);
overflow: hidden;
background: #fff;
}
#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: 472px;
top: 778px;
width: 365px;
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;
}

.hero-dial {
position: absolute;
left: var(--hero-x);
top: calc(var(--hero-y) + var(--hero-h) + 18px);
z-index: 3;
display: flex;
align-items: center;
gap: 16px;
width: var(--hero-w);
opacity: 0;
pointer-events: none;
transition: opacity .45s ease;
}
#VISUAL.is-hero-free .hero-dial {
opacity: 1;
pointer-events: auto;
}
.hero-dial label {
flex: none;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: .16em;
color: #000;
}
.hero-dial input[type="range"] {
-webkit-appearance: none;
appearance: none;
flex: 1;
height: 18px;
margin: 0;
background: transparent;
cursor: pointer;
}
.hero-dial input[type="range"]::-webkit-slider-runnable-track {
height: 1px;
background: #000;
}
.hero-dial input[type="range"]::-moz-range-track {
height: 1px;
background: #000;
}
.hero-dial input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
margin-top: -5.5px;
background: #000;
border: 0;
border-radius: 0;
}
.hero-dial input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
background: #000;
border: 0;
border-radius: 0;
}

.design-sec {
position: relative;
padding: 40px 0 40px;
--sticky-top: 110px;
}
.design-sec .bg-ttl-track {
position: absolute;
left: 81px;
top: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
}
.design-sec .bg-ttl {
position: sticky;
top: var(--sticky-top);
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 70px;
font-weight: 600;
line-height: 1;
color: #8a8a8a;
opacity: .42;
white-space: nowrap;
}
.design-sec .cont {
position: relative;
z-index: 1;
width: 1280px;
margin: 0 auto;
padding: 100px 80px 0;
box-sizing: border-box;
}

.sticky-split {
display: grid;
grid-template-columns: 380px 1fr;
gap: 60px;
align-items: stretch;
}
.sticky-split .col-sticky {
min-height: 0;
}
.sticky-split .sticky-card {
position: sticky;
top: var(--sticky-top);
z-index: 2;
}

.pht picture {
display: block;
width: 100%;
height: 100%;
}

#EXTERIOR .sticky-card .pht {
margin-bottom: 36px;
overflow: hidden;
}
#EXTERIOR .sticky-card .pht img {
width: 100%;
aspect-ratio: 539 / 329;
object-fit: cover;
display: block;
}
#EXTERIOR .sticky-card p,
#EXTERIOR .feat p,
#INTERIOR p,
#PLAN p {
font-size: 14px;
font-weight: 300;
line-height: 28px;
}
#EXTERIOR .feat {
padding-top: 18px;
margin-bottom: 60px;
border-top: 1px solid #000;
}
#EXTERIOR .feat h3 {
margin-bottom: 0;
font-family: 'Koburina Gothic W6 JIS2004', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: .03em;
line-height: 28px;
}
#EXTERIOR .feat .pht {
margin-top: 20px;
overflow: hidden;
}
#EXTERIOR .feat .pht img {
width: 100%;
aspect-ratio: 380 / 244;
object-fit: cover;
display: block;
}

#INTERIOR .mode-label {
margin: 0;
padding-top: 187px;
}
#INTERIOR .mode-label img {
width: 333px;
height: auto;
}
#INTERIOR .intro {
display: grid;
grid-template-columns: 380px 52px 564px;
margin-left: 113px;
align-items: start;
}
#INTERIOR .intro .mode-label {
grid-column: 1;
}
#INTERIOR .intro .b1 {
grid-column: 3;
}
#INTERIOR .block p {
width: 373px;
margin-top: 26px;
}
#INTERIOR .b2 p {
width: 400px;
margin-top: 24px;
}
#INTERIOR .b3 p {
width: 403px;
margin-top: 29px;
}
#INTERIOR .block .pht {
overflow: hidden;
}
#INTERIOR .b1 .pht img {
width: 564px;
aspect-ratio: 564 / 362;
object-fit: cover;
display: block;
}
#INTERIOR .pair {
display: grid;
grid-template-columns: 380px 131px 396px;
margin-left: 113px;
margin-top: 131px;
align-items: start;
}
#INTERIOR .b2 {
grid-column: 1;
}
#INTERIOR .b3 {
grid-column: 3;
margin-top: 385px;
}
#INTERIOR .b2 .pht.tall img {
width: 380px;
aspect-ratio: 380 / 499;
object-fit: cover;
display: block;
}
#INTERIOR .b3 .pht.chair img {
width: 396px;
aspect-ratio: 396 / 369;
object-fit: cover;
display: block;
}

#PLAN .plan-split {
display: flex;
flex-direction: column;
gap: 160px;
}
#PLAN .plan-floor {
display: grid;
grid-template-columns: 405px 1fr;
gap: 60px;
align-items: stretch;
}
#PLAN .points {
margin: 0;
padding: 0;
max-width: 405px;
}
#PLAN .points > li {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: 30px;
align-items: start;
padding-top: 30px;
margin-bottom: 40px;
border-top: 1px solid #000;
list-style: none;
}
#PLAN .points > li > div {
display: contents;
}
#PLAN .points .num {
grid-column: 1;
grid-row: 1;
align-self: center;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #303030;
border: 0;
border-radius: 50%;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 1;
}
#PLAN .points > li > p,
#PLAN .points > li > div > p:first-of-type {
grid-column: 2;
grid-row: 1;
}
#PLAN .points .pht,
#PLAN .points .cap {
grid-column: 2;
}
#PLAN .points .pht {
margin: 24px 0 24px -70px;
width: calc(100% + 70px);
overflow: hidden;
}
#PLAN .points .pht img {
width: 100%;
max-width: 290px;
aspect-ratio: 290 / 208;
object-fit: cover;
display: block;
}
#PLAN .points .cap {
display: flex;
flex-direction: column;
gap: 12px;
margin-left: -70px;
width: calc(100% + 70px);
color: inherit;
text-indent: 0;
padding-left: 0;
}
#PLAN .points .cap img {
width: 188px;
height: auto;
}
#PLAN .points .cap img.label-wood { width: 110px; }
#PLAN .points .cap img.label-tile { width: 60px; }

#PLAN .floor-pin {
position: relative;
min-height: 100%;
}
#PLAN .floor-pin .sticky-card {
position: sticky;
top: var(--sticky-top);
margin: 0;
padding: 24px 0;
}
#PLAN .floor-pin .sticky-card img {
display: block;
width: 100%;
max-width: 580px;
margin: 0 auto;
height: auto;
}
#PLAN .floor-pin .sticky-card figcaption {
margin-top: 12px;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 15px;
letter-spacing: .03em;
}

#PLAN .types {
width: 1280px;
margin: 80px auto 0;
padding: 0 80px 0;
box-sizing: border-box;
text-align: center;
}
#PLAN .type-panels-inner {
padding-top: 60px;
}
#PLAN .type-block {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
}
#PLAN .type-label {
display: block;
width: 100%;
margin-bottom: 20px;
text-align: left;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
color: #c00;
}
#PLAN .type-head {
display: flex;
justify-content: center;
align-items: center;
gap: 46px;
width: 100%;
margin-bottom: 40px;
text-align: left;
}
#PLAN .type-head .pht {
flex: none;
width: 370px;
height: 230px;
overflow: hidden;
}
#PLAN .type-head .pht img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
display: block;
}
#PLAN .type-head > div {
flex: none;
width: 380px;
}
#PLAN .type-head h3 {
margin-bottom: 0;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 30px;
font-weight: 600;
letter-spacing: .03em;
line-height: 28px;
}
#PLAN .type-head p {
max-width: 380px;
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid #000;
font-size: 14px;
line-height: 28px;
}
#PLAN .plan-imgs {
display: flex;
gap: 20px;
justify-content: center;
width: 100%;
}
#PLAN .plan-imgs figure {
margin: 0;
max-width: 388px;
}
#PLAN .plan-imgs picture {
display: block;
}
#PLAN .plan-imgs img {
width: 100%;
height: auto;
}
#PLAN .plan-imgs figcaption {
margin-top: 8px;
font-family: "Zalando Sans Expanded", "Oswald", sans-serif;
font-size: 15px;
letter-spacing: .03em;
}
#PLAN .plan-imgs.three figure {
max-width: 345px;
}
#PLAN .js-plan-zoom {
position: relative;
cursor: pointer;
}
#PLAN .floor-pin .js-plan-zoom picture {
position: relative;
display: block;
max-width: 580px;
margin: 0 auto;
}
#PLAN .floor-pin .js-plan-zoom picture::after,
#PLAN .plan-imgs .js-plan-zoom::after {
content: "";
display: block;
position: absolute;
right: -10px;
top: -10px;
z-index: 2;
width: 24px;
height: 24px;
background: url("../img/icn_zoom.svg") no-repeat center;
background-size: contain;
pointer-events: none;
}

body.zoom-open {
overflow: hidden;
}
#zoomSCT {
position: fixed;
inset: 0;
z-index: 1100;
visibility: hidden;
pointer-events: none;
transition: visibility 0s linear .4s;
}
#zoomSCT.is-open {
visibility: visible;
pointer-events: auto;
transition: visibility 0s linear 0s;
}
#zoomSCT .mask {
position: absolute;
inset: 0;
background-color: rgba(0,0,0,0.6);
z-index: 20;
cursor: pointer;
opacity: 0;
transition: opacity .4s ease;
}
#zoomSCT.is-open .mask {
opacity: 1;
}
#zoomSCT .modal {
transform: translateY(-50%);
position: fixed;
top: 50%;
right: 10px;
left: 10px;
z-index: 21;
text-align: left;
opacity: 0;
transition: opacity .4s ease;
}
#zoomSCT.is-open .modal {
opacity: 1;
}
#zoomSCT .close {
position: absolute;
right: 0;
top: -34px;
width: 24px;
height: 24px;
z-index: 12;
cursor: pointer;
}
#zoomSCT .close::after,
#zoomSCT .close::before {
content: "";
display: block;
position: absolute;
width: 32px;
height: 1px;
background-color: #fff;
}
#zoomSCT .close::after {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}
#zoomSCT .close::before {
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
#zoomSCT .modal .cont {
background-color: #fff;
padding: 0;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
#zoomSCT.has-slider .modal .cont {
overflow: hidden;
}
#zoomSCT .modal .typeb img,
#zoomSCT .zoom-slide img {
display: block;
width: auto;
max-width: 100%;
max-height: calc(100vh - 80px);
height: auto;
margin: 0 auto;
-webkit-user-drag: none;
user-select: none;
pointer-events: none;
}
#zoomSCT .zoom-view {
overflow: hidden;
touch-action: pan-x;
-webkit-user-select: none;
user-select: none;
}
#zoomSCT .zoom-track {
display: flex;
will-change: transform;
transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
#zoomSCT.is-instant .zoom-track {
transition: none;
}
#zoomSCT .zoom-slide {
flex: 0 0 auto;
box-sizing: border-box;
}
#zoomSCT .zoom-prev,
#zoomSCT .zoom-next {
position: absolute;
top: 50%;
z-index: 22;
width: 44px;
height: 44px;
margin-top: -22px;
padding: 0;
cursor: pointer;
}
#zoomSCT .zoom-prev { left: -8px; }
#zoomSCT .zoom-next { right: -8px; }
#zoomSCT:not(.has-slider) .zoom-prev,
#zoomSCT:not(.has-slider) .zoom-next {
display: none;
}
#zoomSCT .zoom-prev::before,
#zoomSCT .zoom-next::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#zoomSCT .zoom-prev::before {
transform: translate(-30%, -50%) rotate(-135deg);
}
#zoomSCT .zoom-next::before {
transform: translate(-70%, -50%) rotate(45deg);
}

@media screen and (max-width: 767px) {
#VISUAL {
--hero-w: calc(336 * var(--sp));
--hero-y: calc(96 * var(--sp));
--hero-h: calc(540 * var(--sp));
--hero-x: calc(33 * var(--sp));
--hero-stage-h: calc(var(--hero-y) + var(--hero-h) + 242 * var(--sp));
}
#VISUAL .hero-stage {
height: var(--hero-stage-h);
overflow: hidden;
}
#VISUAL .canvas {
width: 100%;
max-width: 100%;
height: 100%;
}
#VISUAL .hero-pht {
left: var(--hero-x);
top: var(--hero-y);
width: var(--hero-w);
height: var(--hero-h);
}
#VISUAL h1 {
position: absolute;
left: 0;
right: 0;
top: calc(var(--hero-y) + var(--hero-h) + 56px);
width: auto;
margin: 0;
padding: 0 calc(52 * var(--sp));
font-size: calc(36 * var(--sp));
line-height: 1.22;
text-align: center;
}
#VISUAL .lead {
position: absolute;
left: 0;
right: 0;
top: calc(var(--hero-y) + var(--hero-h) + 174px);
width: auto;
margin: 0 auto;
padding: 0;
font-size: calc(14 * var(--sp));
line-height: calc(28 * var(--sp));
text-align: center;
}
#VISUAL .scroll-hint {
display: flex;
left: auto;
right: calc(5 * var(--sp));
top: calc(var(--hero-y) + var(--hero-h) - 120px);
gap: calc(6 * var(--sp));
}
#VISUAL .scroll-hint span {
font-size: calc(17 * var(--sp));
}
#VISUAL .scroll-hint::after {
height: calc(55 * var(--sp));
}
.hero-dial {
top: calc(var(--hero-y) + var(--hero-h) + 12px);
gap: calc(10 * var(--sp));
width: var(--hero-w);
left: var(--hero-x);
}

.design-sec {
padding: calc(32 * var(--sp)) 0 calc(0 * var(--sp));
--sticky-top: auto;
overflow-x: clip;
}
.design-sec .bg-ttl-track {
position: relative;
left: auto;
top: auto;
bottom: auto;
margin: 0 0 calc(30 * var(--sp));
padding: 0 calc(8 * var(--sp));
max-width: 100%;
box-sizing: border-box;
}
.design-sec .bg-ttl {
position: static;
top: auto;
font-size: calc(50 * var(--sp));
max-width: 100%;
overflow: hidden;
}
.design-sec .cont {
width: 100%;
max-width: 100%;
padding: 0 calc(33 * var(--sp)) 0;
}

.sticky-split {
display: block;
}
#EXTERIOR .sticky-split {
display: flex;
flex-direction: column;
}
#EXTERIOR .col-sticky {
order: -1;
margin-bottom: 0;
}
.sticky-split .sticky-card,
#PLAN .floor-pin .sticky-card {
position: static;
top: auto;
}
#PLAN .plan-split {
gap: 0;
}
#PLAN .plan-floor {
display: flex;
flex-direction: column;
gap: 30px;
}
#PLAN .plan-floor .floor-pin {
order: -1;
min-height: 0;
margin: 0 0 0;
}
#EXTERIOR .feat .pht img {
width: 100%;
aspect-ratio: 336 / 244;
}
#INTERIOR .intro,
#INTERIOR .pair {
display: block;
margin-left: 0;
margin-top: 0;
}
#INTERIOR .mode-label {
padding-top: 0;
margin-bottom: calc(24 * var(--sp));
}
#INTERIOR .mode-label img {
width: 100%;
max-width: 308px;
}
#INTERIOR .block {
margin-bottom: 12vw;
}
#INTERIOR .b3 {
margin-top: 0;
}
#INTERIOR .block p,
#INTERIOR .b2 p,
#INTERIOR .b3 p {
width: auto;
margin-top: calc(16 * var(--sp));
}
#INTERIOR .b1 .pht img,
#INTERIOR .b2 .pht.tall img,
#INTERIOR .b3 .pht.chair img {
width: 100%;
max-width: 100%;
}
#INTERIOR .b1 .pht img {
aspect-ratio: 336 / 362;
}
#INTERIOR .b2 .pht.tall img {
aspect-ratio: 336 / 441;
}
#INTERIOR .b3 .pht.chair img {
aspect-ratio: 336 / 313;
}
#PLAN .points { max-width: none; }
#PLAN .points > li {
min-width: 0;
}
#PLAN .points > li > p {
min-width: 0;
}
#PLAN .points .pht {
margin: 24px 0 24px -70px;
width: calc(100% + 70px);
}
#PLAN .points .cap {
margin-left: -70px;
width: calc(100% + 70px);
}
#PLAN .points .pht img {
width: 100%;
max-width: none;
}
#PLAN .points .cap img {
max-width: 100%;
}
#PLAN .type-panels-inner {
padding-top: 0;
}
#PLAN .types {
width: 100%;
max-width: 100%;
padding: 0 calc(33 * var(--sp));
margin-top: 0;
}
#PLAN .type-block {
margin-bottom: 60px;
}
#PLAN .type-head {
flex-direction: column;
align-items: center;
gap: 24px;
}
#PLAN .type-head .pht,
#PLAN .type-head > div {
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
}
#PLAN .type-head .pht {
margin-left: calc(-16 * var(--sp));
margin-right: calc(-16 * var(--sp));
max-width: inherit;
min-width: 0;
width: auto;
height: auto;
}
#PLAN .plan-imgs,
#PLAN .plan-imgs.three {
flex-direction: column;
align-items: center;
gap: 60px;
}
#PLAN .plan-imgs figure,
#PLAN .plan-imgs.three figure {
max-width: 100%;
}
#PLAN .js-plan-zoom.is-fullbleed {
align-self: stretch;
margin-left: calc(-33 * var(--sp));
margin-right: calc(-33 * var(--sp));
width: auto;
max-width: none;
}
#PLAN .floor-pin .js-plan-zoom.is-fullbleed picture,
#PLAN .floor-pin .js-plan-zoom.is-fullbleed img {
max-width: none;
width: 100%;
margin: 0;
}
#PLAN .floor-pin .js-plan-zoom.is-fullbleed picture::after,
#PLAN .plan-imgs .js-plan-zoom.is-fullbleed::after {
right: calc(-10px + 33 * var(--sp));
}
#zoomSCT .zoom-prev::before,
#zoomSCT .zoom-next::before {
border-color: #000;
}
}

#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;
}
#PLAN .floor-pin .js-plan-zoom picture::after,
#PLAN .plan-imgs .js-plan-zoom::after {
width: 28px;
height: 28px;
right: 20px;
top: 20px;
}
#zoomSCT .modal {
transform: translate(-50%, -50%);
top: 50%;
right: auto;
bottom: auto;
left: 50%;
width: auto;
max-width: 90%;
max-height: 90%;
}
#zoomSCT .modal .cont {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
padding: 0;
overflow: auto;
}
#zoomSCT .modal .typeb {
margin: 0;
height: auto;
}
#zoomSCT .modal .typeb img,
#zoomSCT .zoom-slide img {
position: static;
transform: none;
max-width: 100%;
max-height: calc(90vh - 80px);
width: auto;
height: auto;
}
#zoomSCT .zoom-prev { left: -52px; }
#zoomSCT .zoom-next { right: -52px; }
}

/* hero intro (same sequence as GALLERY / 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) {
#VISUAL {
height: var(--hero-stage-h);
padding-bottom: 0;
}
#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-design .reveal,
.page-design .reveal-fade {
opacity: 1;
transform: none;
transition: none;
}
#VISUAL .scroll-hint::after,
#VISUAL.is-hero-copy .scroll-hint::after {
clip-path: none;
animation: none;
}
.hero-dial {
opacity: 1;
pointer-events: auto;
}
#zoomSCT .zoom-track {
transition: none;
}
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
#VISUAL {
height: var(--hero-stage-h);
padding-bottom: 0;
}
}