@font-face {
font-family: "HannariMincho";
src: url("../fonts/Hannari.woff") format("woff");
font-display: swap;
font-style: normal;
font-weight: 400;
}

:root {
--sky-top: #2a85c7;
--sky-bottom: #5aa3d8;
--mountain-blue: #063954;
--works-top: #002c4c;
--works-bottom: #0f8985;
--works-gradient-start: min(64.71vw, 1242px);
--ink: #272727;
--white: #fff;
--font-display: "texas-hero", "Segoe Script", cursive;
--font-mincho: "HannariMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
--font-date: "din-2014", "Arial Narrow", sans-serif;
--font-body: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--font-round: "FOT-TsukuARdGothic Std", "Hiragino Maru Gothic ProN", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--shell: min(84vw, 1540px);
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
overflow-x: hidden;
}

body {
margin: 0;
min-width: 320px;
background: var(--white);
color: var(--ink);
font-family: var(--font-body);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}

.no-wrap {
white-space: nowrap;
}

body.is-modal-open {
overflow: hidden;
}

img,
video {
display: block;
max-width: 100%;
}

img {
height: auto;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

button {
font: inherit;
}

a {
color: inherit;
}

.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
padding: 10px 16px;
background: #fff;
color: #111;
font-size: 14px;
transform: translateY(-150%);
transition: transform .2s ease;
}

.skip-link:focus {
transform: translateY(0);
}

:focus-visible {
outline: 3px solid #fff;
outline-offset: 5px;
}

.skip-link:focus-visible,
.site-footer :focus-visible {
outline-color: #173e5a;
}

.section-shell {
width: var(--shell);
margin-inline: auto;
}

.hero {
position: relative;
height: min(100svh, 56.25vw);
min-height: 720px;
overflow: hidden;
isolation: isolate;
background: #8c9aa1 url("../images/hero-poster.webp") center / cover no-repeat;
color: #fff;
}

.hero__video,
.hero__shade {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.hero__video {
z-index: -3;
object-fit: cover;
transform: scale(1.035);
will-change: transform;
}

.hero__shade {
z-index: -2;
background: linear-gradient(180deg, rgba(0, 15, 22, .28), rgba(7, 25, 32, .38));
}

.hero__copy {
position: relative;
width: 100%;
height: 100%;
filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2));
}

.hero__title {
position: absolute;
top: 42%;
left: 50%;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: clamp(124px, 11.82vw, 227px);
width: min(88vw, 1690px);
margin: 0;
font-family: var(--font-display);
font-size: clamp(78px, 9.4vw, 180px);
font-weight: 400;
line-height: .66;
letter-spacing: -.015em;
white-space: nowrap;
transform: translate(-50%, -50%) rotate(-7deg);
}

.hero__title span:first-child { text-align: right; }
.hero__title span:last-child { text-align: left; }

.hero__theme {
position: absolute;
top: 30.2%;
left: 20%;
z-index: 3;
display: grid;
margin: 0;
font-family: var(--font-mincho);
font-size: clamp(31px, 2.6vw, 50px);
font-weight: 400;
line-height: 1.26;
letter-spacing: .14em;
text-align: center;
}

.hero__theme span:nth-child(2) {
transform: translateX(1em);
}

.hero__vase {
position: absolute;
top: 40.4%;
left: 49.5%;
z-index: 4;
width: clamp(92px, 7.65vw, 147px);
max-height: 27%;
object-fit: contain;
transform: translate(-50%, -50%);
}

.hero__flourish {
position: absolute;
top: 45.83%;
left: 11.66%;
z-index: 1;
width: min(75.19vw, 1444px);
height: auto;
pointer-events: none;
}

.hero__kana {
position: absolute;
top: 48.2%;
left: 73.5%;
z-index: 4;
margin: 0;
font-family: var(--font-mincho);
font-size: clamp(28px, 2.6vw, 50px);
letter-spacing: .15em;
transform: translateX(-50%);
white-space: nowrap;
}

.hero__date {
position: absolute;
top: 68.7%;
left: 50%;
z-index: 4;
margin: 0;
font-family: var(--font-date);
font-size: clamp(30px, 2.6vw, 50px);
font-weight: 400;
letter-spacing: .02em;
transform: translateX(-50%);
}

.scroll-cue {
position: absolute;
bottom: 0;
left: 50%;
z-index: 5;
display: grid;
justify-items: center;
gap: 10px;
text-decoration: none;
transform: translateX(-50%);
}

.scroll-cue__label {
font-family: var(--font-date);
font-size: 10px;
letter-spacing: .2em;
opacity: .78;
}

.scroll-cue__line {
position: relative;
display: block;
width: 1px;
height: 118px;
overflow: hidden;
background: rgba(255, 255, 255, .42);
}

.scroll-cue__line::after {
content: "";
position: absolute;
top: -45%;
left: 0;
width: 100%;
height: 45%;
background: #fff;
animation: flow-line 2.4s ease-in-out infinite;
}

@keyframes flow-line {
0% { transform: translateY(0); }
70%, 100% { transform: translateY(325%); }
}

.experience {
position: relative;
height: min(86.77vw, 1666px);
min-height: 1120px;
overflow: visible;
clip-path: none;
background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
color: #fff;
}

.experience::after {
content: "";
position: absolute;
right: 0;
bottom: -2px;
left: 0;
z-index: 1;
height: min(25vw, 480px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2) 36%, rgba(255, 255, 255, .86) 78%, #fff 100%);
pointer-events: none;
}

.experience__grid {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(400px, .9fr) minmax(0, 1.7fr);
gap: clamp(48px, 3.5vw, 67px);
align-items: start;
padding-top: min(8.44vw, 162px);
}

.experience__copy {
position: relative;
z-index: 5;
width: min(35.73vw, 686px);
padding-top: min(6.52vw, 125px);
}

.experience__copy h2 {
margin: 0 0 clamp(28px, 2.4vw, 48px);
font-size: clamp(30px, 2.08vw, 40px);
line-height: 1.65;
letter-spacing: .035em;
}

.experience__copy p {
margin: 0 0 .55em;
font-size: clamp(17px, 1.04vw, 20px);
font-weight: 600;
line-height: 2.2;
}

.experience__photo {
position: relative;
z-index: 2;
margin: 0 calc((100vw - var(--shell)) / -2) 0 clamp(-84px, -4.2vw, -48px);
overflow: hidden;
}

.experience__photo::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
z-index: 2;
width: 28%;
background: linear-gradient(90deg, rgba(42, 133, 199, .72), rgba(42, 133, 199, 0));
pointer-events: none;
}

.experience__photo img {
width: 100%;
height: min(37.45vw, 719px);
object-fit: cover;
object-position: 34.6% center;
}

.experience__invitation {
position: absolute;
top: 67.3%;
left: 50%;
z-index: 5;
width: 90%;
margin: 0;
font-size: clamp(27px, 2.08vw, 40px);
font-weight: 700;
letter-spacing: .04em;
text-align: center;
transform: translateX(-50%);
}

.cloud-stage {
position: absolute;
top: min(30.47vw, 585px);
right: auto;
bottom: auto;
left: max(-240.7px, -12.54vw);
z-index: 2;
width: min(158.42vw, 3041.72px);
height: min(86.41vw, 1659.12px);
pointer-events: none;
}

.cloud-stage__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(10deg);
transform-origin: 0 0;
}

.cloud-stage__clouds {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: fill;
transform: scaleX(-1);
}

.cloud-stage__eagle {
position: absolute;
top: 50%;
left: -1%;
z-index: 2;
width: clamp(160px, 15vw, 290px);
opacity: 0;
filter: blur(.1px);
will-change: transform;
}

.cloud-stage__eagle.is-flying {
animation: eagle-flight 2.5s linear forwards;
}

@keyframes eagle-flight {
0% { opacity: 0; transform: translate3d(-18vw, 10vw, 0) rotate(13deg) scale(.78); }
8% { opacity: .84; }
84% { opacity: .84; }
100% { opacity: 0; transform: translate3d(145vw, -2vw, 0) rotate(2deg) scale(1.08); }
}

.venue {
position: relative;
height: min(69.64vw, 1337px);
min-height: 0;
overflow: visible;
background: #fff;
}

.venue__grid {
position: relative;
z-index: 4;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: min(5.89vw, 113px);
align-items: center;
padding-top: min(21.82vw, 419px);
}

.venue__photo {
margin: 0 0 0 calc((100vw - var(--shell)) / -2);
}

.venue__photo img {
width: 100%;
height: min(33.59vw, 645px);
object-fit: cover;
object-position: 100% 65%;
}

.venue__text h2 {
margin: 0 0 48px;
font-size: clamp(28px, 2.08vw, 40px);
line-height: 1.5;
}

.venue__copy p {
margin: 0;
font-size: clamp(17px, 1.04vw, 20px);
font-weight: 600;
line-height: 2.2;
}

.mountain-stage {
position: absolute;
right: 0;
left: 0;
z-index: 2;
top: min(30.16vw, 579px);
height: min(104.19vw, 2000px);
overflow: hidden;
background: transparent;
pointer-events: none;
}

.mountain-stage::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 90%;
background: linear-gradient(180deg, rgba(0, 44, 76, 0) 0%, rgba(0, 44, 76, .2) 24%, rgba(0, 44, 76, .66) 56%, var(--works-top) 82%, var(--works-top) 100%);
}

.mountain-stage__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 53%;
}

.mountain-stage__mouse {
position: absolute;
top: 36%;
right: -13%;
z-index: 2;
width: clamp(190px, 18vw, 350px);
opacity: 0;
will-change: transform;
}

.mountain-stage__motion-trigger {
position: absolute;
top: 35%;
left: 50%;
width: 1px;
height: 1px;
pointer-events: none;
}

.mountain-stage__mouse.is-running {
animation: mouse-run 3.5s linear forwards;
}

@keyframes mouse-run {
0% { opacity: 0; transform: translate3d(12vw, -2vw, 0); }
7% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; transform: translate3d(-145vw, 15vw, 0); }
}

.works {
position: relative;
z-index: auto;
margin-top: -1px;
min-height: min(201.93vw, 3877px);
padding: min(33.91vw, 651px) 0 min(10vw, 192px);
background: linear-gradient(180deg, var(--works-top) 0, var(--works-top) var(--works-gradient-start), var(--works-bottom) 100%);
color: #fff;
}

.works__header,
.works__rows {
position: relative;
z-index: 3;
}

.works__header {
text-align: center;
}

.works__header h2 {
margin: 0 0 clamp(56px, 4.6vw, 88px);
font-size: clamp(30px, 2.08vw, 40px);
line-height: 1.5;
letter-spacing: .04em;
}

.works__lead {
margin: 0 auto;
font-size: clamp(17px, 1.04vw, 20px);
font-weight: 600;
line-height: 2.2;
}

.works__lead--sp {
display: none;
}

.works__prompt {
display: inline-flex;
align-items: center;
gap: clamp(20px, 1.82vw, 35px);
margin: clamp(82px, 7.2vw, 138px) 0 clamp(96px, 9.2vw, 177px);
font-family: var(--font-round);
font-size: clamp(30px, 2.08vw, 40px);
font-weight: 600;
letter-spacing: .05em;
}

.works__prompt-icon {
display: block;
width: clamp(72px, 6.4vw, 123px);
height: auto;
animation: prompt-bob 2.3s ease-in-out infinite;
}

@keyframes prompt-bob {
0%, 100% { transform: translateY(-3px); }
50% { transform: translateY(5px); }
}

.works__rows {
display: grid;
gap: clamp(80px, 5.2vw, 100px);
}

.works__row {
display: flex;
justify-content: center;
gap: clamp(78px, 7.5vw, 144px);
}

.work-card {
position: relative;
width: clamp(220px, 17.6vw, 338px);
padding: 0;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}

.work-card::before {
content: "";
position: absolute;
inset: 7% 3% 14%;
border-radius: 46%;
background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 68%);
opacity: 0;
transform: scale(.84);
transition: opacity .35s ease, transform .35s ease;
}

.work-card img {
position: relative;
z-index: 1;
width: 100%;
height: auto;
filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .16));
transform: translateY(0);
transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

.work-card span {
position: absolute;
top: 84.66%;
left: 50%;
z-index: 2;
display: block;
width: 125%;
margin: 0;
font-family: var(--font-round);
font-size: clamp(18px, 1.56vw, 30px);
font-weight: 600;
letter-spacing: .08em;
line-height: 1.5;
white-space: nowrap;
transform: translateX(-50%);
}

.work-card:hover::before,
.work-card:focus-visible::before {
opacity: 1;
transform: scale(1);
}

.work-card:hover img,
.work-card:focus-visible img {
filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .24));
transform: translateY(-12px);
}

.work-card.is-wiggling img {
animation: vase-wiggle 1.05s ease-in-out 2;
transform-origin: 50% 82%;
}

@keyframes vase-wiggle {
0%, 100% { transform: rotate(0deg); }
24% { transform: rotate(-1.2deg); }
48% { transform: rotate(1.15deg); }
72% { transform: rotate(-.65deg); }
}

.site-footer {
display: grid;
justify-items: center;
height: min(30.21vw, 580px);
min-height: 0;
padding: min(4.58vw, 88px) 24px min(3.23vw, 62px);
background: #fff;
color: #111;
text-align: center;
}

.museum-mark {
display: grid;
justify-items: center;
margin-bottom: 42px;
text-decoration: none;
}

.museum-mark__logo {
display: block;
width: clamp(180px, 13.49vw, 259px);
height: auto;
}

.site-footer p {
margin: 0 0 15px;
font-size: 13px;
font-weight: 600;
line-height: 1.8;
}

.site-footer__copyright {
font-family: var(--font-date);
font-size: 11px !important;
font-weight: 400 !important;
}

.movie-modal[hidden] {
display: none;
}

.movie-modal {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
padding: 36px;
}

.movie-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 19, 32, .9);
backdrop-filter: blur(8px);
animation: modal-dissolve .3s ease both;
}

.movie-modal__panel {
position: relative;
z-index: 1;
width: min(92vw, calc((100svh - 150px) * .6667), 585px);
color: #fff;
text-align: center;
animation: modal-panel-in .3s ease both;
}

@keyframes modal-dissolve {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes modal-panel-in {
from { opacity: 0; transform: scale(.985); }
to { opacity: 1; transform: scale(1); }
}

.movie-modal__media {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
background: #000;
box-shadow: 0 35px 90px rgba(0, 0, 0, .42);
}

.movie-modal__panel video {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
background: #000;
}

.movie-modal__play {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: grid;
place-items: center;
width: clamp(96px, 12.55vw, 241px);
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .398);
color: #fff;
cursor: pointer;
transform: translate(-50%, -50%);
transition: opacity .35s ease, transform .35s ease;
}

.movie-modal__play[hidden] {
display: none;
}

.movie-modal__play span {
display: block;
width: 0;
height: 0;
margin-left: 8%;
border-top: clamp(23px, 2.5vw, 48px) solid transparent;
border-bottom: clamp(23px, 2.5vw, 48px) solid transparent;
border-left: clamp(40px, 4.17vw, 80px) solid currentColor;
}

.movie-modal__panel p {
margin: 25px 0 0;
font-family: var(--font-round);
font-size: clamp(18px, 1.5vw, 28px);
font-weight: 600;
letter-spacing: .04em;
}

.movie-modal__close {
position: absolute;
top: -54px;
right: 0;
width: 38px;
height: 38px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}

.movie-modal__close::before,
.movie-modal__close::after {
content: "";
position: absolute;
top: 50%;
left: 4px;
width: 34px;
height: 1px;
background: currentColor;
}

.movie-modal__close::before { transform: rotate(45deg); }
.movie-modal__close::after { transform: rotate(-45deg); }

.js .reveal {
opacity: 0;
transition: opacity 1.8s cubic-bezier(.22, 1, .36, 1), transform 2s cubic-bezier(.22, 1, .36, 1);
transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal[data-reveal="left"] { transform: translateX(-54px); }
.js .reveal[data-reveal="right"] { transform: translateX(54px); }
.js .reveal[data-reveal="up"] { transform: translateY(50px); }

.js .reveal.is-visible {
opacity: 1;
transform: translate(0, 0);
}

.js .experience__invitation.reveal[data-reveal="up"] {
transform: translate(-50%, 50px);
}

.js .experience__invitation.reveal.is-visible {
transform: translate(-50%, 0);
}

@media (min-width: 1025px) {
.experience__grid {
width: min(84.58vw, 1624px);
}

.experience__photo {
margin-left: clamp(-150px, calc(-4.2vw - 64px), -112px);
}
}

@media (max-width: 1024px) {
:root {
--shell: min(88vw, 900px);
--works-gradient-start: max(0px, calc(134.35vw - 900px));
}

.hero {
height: 100svh;
min-height: 680px;
}

.hero__title {
width: 94vw;
column-gap: 124px;
font-size: clamp(70px, 10vw, 105px);
}

.experience {
height: 1000px;
min-height: 0;
}

.experience__grid {
grid-template-columns: .9fr 1.1fr;
gap: 42px;
padding-top: 100px;
}

.experience__copy p {
line-height: 2.15;
}

.experience__invitation {
top: 58%;
}

.cloud-stage {
top: max(min(30.47vw, 585px), calc(1000px - min(86.41vw, 1659.12px)));
}

.venue {
height: 900px;
}

.venue__grid {
gap: 48px;
padding-top: 180px;
}

.venue__photo img {
min-height: 420px;
}

.works {
min-height: 2150px;
}

.works__row {
gap: 7vw;
}

.work-card {
width: 24vw;
}

.site-footer {
height: auto;
min-height: 300px;
}
}

@media (max-width: 767px) {
:root {
--shell: calc(100% - 54px);
--works-gradient-start: 38.04vw;
}

.hero {
height: 100svh;
min-height: 720px;
max-height: none;
}

.hero__video {
object-position: 64.2% center;
transform: scale(1.02);
}

.hero__shade {
background: linear-gradient(180deg, rgba(0, 17, 25, .12), rgba(0, 20, 28, .32));
}

.hero__theme {
top: 10%;
left: 50%;
display: flex;
flex-direction: row-reverse;
gap: 2px;
font-size: 20px;
line-height: 1;
letter-spacing: .03em;
text-align: left;
transform: translateX(-50%);
}

.hero__theme span {
display: block;
width: 1.15em;
line-height: 1.25;
writing-mode: vertical-rl;
}

.hero__theme span:nth-child(2) {
transform: translateY(14.88vw);
}

.hero__vase {
top: 48.9%;
left: 50%;
width: 28.56vw;
max-height: 26%;
}

.hero__title {
top: 71.15%;
left: 50.9%;
display: block;
width: min(76.75vw, 330px);
font-size: 17.44vw;
line-height: .68;
text-align: center;
white-space: normal;
}

.hero__title span,
.hero__title span:first-child,
.hero__title span:last-child {
display: block;
text-align: center;
}

.hero__flourish {
top: 75.87%;
left: 11.91%;
width: 75.18vw;
}

.hero__kana {
top: 78.6%;
left: 50%;
font-size: 20px;
letter-spacing: .13em;
}

.hero__date {
top: 89.74%;
font-size: 6.98vw;
}

.scroll-cue {
bottom: 0;
display: grid;
gap: 0;
}

.scroll-cue__label {
display: none;
}

.scroll-cue__line {
height: clamp(32px, 9.3vw, 40px);
}

.experience {
height: 205.12vw;
min-height: 0;
overflow: visible;
}

.experience__grid {
position: relative;
display: block;
width: 100%;
height: 100%;
padding-top: 0;
}

.experience__copy {
position: absolute;
top: 74.3vw;
left: 15.12vw;
width: 69.77vw;
margin: 0;
padding: 0;
}

.experience__copy h2 {
margin-bottom: 10.23vw;
font-size: 4.65vw;
line-height: 1.5;
}

.experience__copy p {
margin: 0;
font-size: 3.49vw;
font-weight: 500;
line-height: 6.05vw;
}

.experience__photo {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 5;
margin: 0;
overflow: visible;
}

.experience__photo::after {
display: none;
}

.experience__photo img {
width: 100%;
height: 61.4vw;
aspect-ratio: auto;
object-fit: cover;
object-position: 34.6% center;
}

.experience__invitation {
top: 171.5vw;
bottom: auto;
width: 88.37vw;
font-size: 3.95vw;
line-height: 1.7;
}

.cloud-stage {
top: 154.89vw;
right: auto;
bottom: auto;
left: -12.76vw;
width: 158.28vw;
height: 86.33vw;
}

.cloud-stage__clouds {
max-width: none;
object-fit: fill;
}

.cloud-stage__eagle {
top: 18%;
left: -1%;
width: 25.24vw;
}

.cloud-stage__eagle.is-flying {
animation: eagle-flight 1.5s linear forwards;
}	
	
.venue {
height: 172.56vw;
min-height: 0;
padding-top: 0;
overflow: visible;
}

.venue__grid {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0;
}

.venue__photo {
position: absolute;
top: 37.45vw;
left: 0;
width: 100%;
margin: 0;
}

.venue__photo img {
width: 100%;
height: 61.6vw;
min-height: 0;
aspect-ratio: auto;
object-fit: cover;
object-position: 96% 66%;
}

.venue__text {
position: absolute;
inset: 0;
}

.venue__text h2 {
position: absolute;
top: 27.79vw;
left: 0;
width: 100%;
margin: 0;
font-size: 4.65vw;
line-height: 1.05;
text-align: center;
}

.venue__copy {
position: absolute;
top: 106.37vw;
left: 15.12vw;
width: 69.77vw;
margin: 0;
padding: 0;
background: transparent;
}

.venue__copy p {
font-size: 3.72vw;
font-weight: 500;
line-height: 6.05vw;
}

.mountain-stage__mouse.is-running {
animation: mouse-run 1.5s linear forwards;
}	
	
.mountain-stage {
top: 106.37vw;
height: 104.23vw;
overflow: hidden;
}

.mountain-stage::after {
height: 75%;
}

.mountain-stage__image {
object-position: center 66%;
}

.mountain-stage__mouse {
top: 35%;
right: -26%;
width: 28vw;
}

.works {
height: 252vw;
min-height: 0;
padding: 18.14vw 0 0;
}

.works__header h2 {
margin-bottom: 6.51vw;
font-size: 4.19vw;
}

.works__lead {
width: 69.77vw;
max-width: none;
font-size: 3.72vw;
font-weight: 500;
line-height: 6.05vw;
}

.works__lead--pc {
display: none;
}

.works__lead--sp {
display: block;
}

.works__prompt {
gap: 3.72vw;
margin: 11.86vw 0 0;
font-size: 4.65vw;
}

.works__prompt-icon {
width: 14.3vw;
height: auto;
}

.works__rows {
position: absolute;
top: 108vw;
left: 0;
width: 100%;
gap: 5.91vw;
}

.works__row {
gap: 7.5vw;
justify-content: center;
}

.work-card {
width: 17.62vw;
padding: 0;
}

.works__row--two {
padding-inline: 0;
}

.work-card span {
top: 83.1%;
margin: 0;
font-size: 2.79vw;
letter-spacing: .04em;
}

.site-footer {
align-content: start;
height: 51.16vw;
min-height: 0;
padding: 5.12vw 16px 3vw;
}

.museum-mark {
margin-bottom: 2.33vw;
}

.museum-mark__logo {
width: 20.93vw;
}

.site-footer p {
margin-bottom: 1.16vw;
font-size: 1.86vw;
line-height: 3.49vw;
}

.site-footer__copyright {
font-size: 1.86vw !important;
}

.movie-modal {
padding: 58px 16px 24px;
}

.movie-modal__panel {
width: min(calc(100vw - 32px), calc((100svh - 140px) * .6667), 398px);
}

.movie-modal__close {
top: -48px;
right: 0;
z-index: 5;
width: 44px;
height: 44px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.movie-modal__close::before,
.movie-modal__close::after {
left: 5px;
}

.movie-modal__play {
width: 56.05vw;
max-width: 241px;
}

.movie-modal__play span {
border-top-width: 11.16vw;
border-bottom-width: 11.16vw;
border-left-width: 18.6vw;
max-width: 111px;
}
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }

*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}

.js .reveal {
opacity: 1;
transform: none;
}

.hero__video {
display: none;
}

.cloud-stage__eagle,
.mountain-stage__mouse {
display: none;
}

.js .experience__invitation.reveal {
transform: translateX(-50%);
}
}