.royal-spa-page { background: #f6f2ea; color: #4b4033; font-family: "Yu Mincho", "YuMincho", serif; overflow: visible; }
.royal-spa-feature { --spa-pad: clamp(24px, 4.7vw, 90px); position: relative; min-height: 100svh; color: #f7edd7; background: #120d09; isolation: isolate; overflow: hidden; }
.royal-spa-feature__media, .royal-spa-feature__scrim { position: absolute; inset: 0; }
.royal-spa-feature__media { z-index: -2; background: #21160e; }
.royal-spa-feature__gl { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; }
.royal-spa-feature.is-webgl .royal-spa-feature__gl { opacity: 1; }
.royal-spa-feature.is-webgl .royal-spa-feature__media img { opacity: 0; }
.royal-spa-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.35s ease, transform 6.2s linear; }
.royal-spa-feature__media img.is-active { opacity: 1; transform: scale(1); }
.royal-spa-feature__scrim { z-index: -1; background: rgb(0 0 0 / 42%); }
.royal-spa-feature__content { position: absolute; inset: 47.7% 0 auto; padding: 0 clamp(18px, 1.1vw, 22px); pointer-events: none; }
.royal-spa-feature__rule { height: 1px; background: rgb(255 255 255 / 30%); overflow: hidden; }
.royal-spa-feature__rule span { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 5s linear; }
.royal-spa-feature.is-playing .royal-spa-feature__rule span { transform: scaleX(1); }
.royal-spa-feature__number { margin: clamp(14px, 1.15vw, 22px) 0 0; font-size: clamp(15px, 1.38vw, 22px); line-height: 1.1; font-family: var(--font-family02); }
.royal-spa-feature__copy { margin-left: var(--spa-pad); max-width:1100px; transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.royal-spa-feature__copy.is-out { opacity: 0; transform: translateY(16px); }
.royal-spa-feature h1, .royal-spa-feature h2 { margin: clamp(5px, .4vw, 8px) 0 0; font-size: clamp(22px, 2.2vw, 42px); font-weight: 400; letter-spacing: .05em; line-height: 1.45; }
.royal-spa-feature__lead { margin: clamp(34px, 5.4vw, 104px) 0 0; font-size: var(--font-size22); line-height: 1.5; letter-spacing: .04em; }
.royal-spa-feature__body { max-width: 400px; margin: clamp(16px, 1.35vw, 26px) 0 0; font-size: var(--font-size18); line-height: 1.8; letter-spacing: .04em; }
.royal-spa-feature h1, .royal-spa-feature h2, .royal-spa-feature p { color: var(--color-font-light) !important; }
.royal-spa-feature__nav { position: absolute; top: 0; bottom: 0; width: 14%; border: 0; background: none; opacity: 0; cursor: pointer; color: #fff; transition: opacity .25s; }
.royal-spa-feature:hover .royal-spa-feature__nav, .royal-spa-feature__nav:focus-visible { opacity: 1; }.royal-spa-feature__nav--prev { left: 0; }.royal-spa-feature__nav--next { right: 0; }
.royal-spa-feature__nav span { position: absolute; top: 40%; width: 36px; height: 1px; background: currentColor; }.royal-spa-feature__nav--prev span { left: 24px; }.royal-spa-feature__nav--next span { right: 24px; }
.royal-spa-feature__nav span::after { content: ''; position: absolute; top: -4px; width: 9px; height: 9px; border-top: 1px solid; border-left: 1px solid; }.royal-spa-feature__nav--prev span::after { left: 0; transform: rotate(-45deg); }.royal-spa-feature__nav--next span::after { right: 0; transform: rotate(135deg); }
.royal-spa-related { padding: clamp(62px, 4.55vw, 88px) 0 clamp(72px, 6.25vw, 120px); background: #23180f; color: #ffeec8; }.royal-spa-related__heading { margin-left: max(24px, calc((100vw - 1600px) / 2)); }.royal-spa-related__heading h2 { color: var(--color-font-light); font-family: var(--font-family02);margin: 0; font-size: var(--font-size58); font-weight: 400; line-height: 1.05; }.royal-spa-related__heading p {margin: .5em 0 0;color: var(--color-font-light);font-family: var(--font-family01);font-size: var(--font-size16);line-height: 1.5;letter-spacing: .03em; }.royal-spa-related__viewport { margin-top: clamp(45px, 4.1vw, 79px); overflow-x: auto; scrollbar-width: none; }.royal-spa-related__viewport::-webkit-scrollbar { display: none; }.royal-spa-related__grid { display: flex; gap: clamp(24px, 3.125vw, 60px); width: max-content; padding: 0 max(24px, calc((100vw - 1600px) / 2)); }.royal-spa-related__card { width: min(39.6vw, 760px); }.royal-spa-related__photo { display: block; aspect-ratio: 760 / 465.5; overflow: hidden; }.royal-spa-related__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }.royal-spa-related__photo:hover img { transform: scale(1.045); }.royal-spa-related__card h3 { margin: clamp(24px, 2.34vw, 45px) 0 0; font-size: clamp(28px, 2.1vw, 40px); font-weight: 400; }.royal-spa-related__name { margin: 8px 0 22px; font-size: 16px; }.royal-spa-related__card > p:last-child { margin: 0; font-size: clamp(13px, .94vw, 18px); line-height: 1.8; }
@media (max-width: 760px) { .royal-spa-feature__content { top: unset;bottom: 15%; }.royal-spa-feature__copy { margin-left: 20px; }.royal-spa-feature__nav { display: none; }.royal-spa-related__card { width: calc(100vw - 48px); }.royal-spa-related__grid { gap: 24px; }.royal-spa-related__card > p:last-child br { display: none; } }
@media (prefers-reduced-motion: reduce) { .royal-spa-feature__media img, .royal-spa-feature__copy, .royal-spa-feature__rule span, .royal-spa-related__photo img { transition: none; } }