.div:where(.astro-7ueikxgf){line-height:var(--leading-none);letter-spacing:var(--tracking-wide);font-weight:var(--font-medium);text-align:center;width:max-content;justify-self:center;margin-block-start:min(calc(var(--vw) * 40),calc(var(--vh) * 40));display:grid;grid-template:"bar . text" max-content / max-content 10px max-content;align-items:start;z-index:5;.text {grid-area: text; writing-mode: vertical-rl; font-size: calc(var(--rem) * 10); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium);} .bar {display: block; height: calc(var(--vw) * 60); grid-area: bar; &.first {background-color: var(--line-primary); width: 1px;} &:not(.first) {background-color: var(--line-tertiary); width: 1px;}} @media screen and (min-width: 768px) {grid-template: "text" max-content "." 22px "bar" max-content / max-content; justify-items: center; position: absolute; bottom: 0; right: calc(var(--vw) * 130); .text {font-size: calc(var(--vw) * 16);} .bar {height: min(calc(var(--vw) * 100),calc(var(--vh) * 100)); &:not(.first) {width: 2px;}}}}.article:where(.astro-46l4qx4b){display:block;width:100%;height:100%;position:relative}:where(.article):where(.astro-46l4qx4b){.content {pointer-events: none; --margin: calc(var(--vw) * 24); display: grid; grid-template: "subtitle" max-content "title" max-content "description" max-content "scroll-indicator" max-content / 1fr; font-size: 2rem; position: absolute; left: var(--margin); width: min(calc(100vw - var(--margin) * 2),540px); z-index: 5; &[data-index="0"] {bottom: 0;} &:not([data-index="0"]) {bottom: min(calc(var(--vw) * 35),calc(var(--vh) * 35));} @media screen and (min-width: 768px) {pointer-events: auto; --margin: calc(var(--vw) * 96); --offset-margin: 0; width: calc(var(--vw) * 640); &[data-index="0"],&:not([data-index="0"]) {bottom: min(calc(var(--vw) * (80 - var(--offset-margin))),calc(var(--vh) * (80 - var(--offset-margin))));}}} :where(.content) {> *:not(.scroll-indicator) {} .title {grid-area: title; margin-block-start: calc(var(--vw) * 10); line-height: var(--leading-none); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 36); margin-block-start: calc(var(--vw) * 18);} span.en {font-size: calc(var(--vw) * 32); font-family: var(--font-en); letter-spacing: var(--tracking-wide); line-height: var(--leading-none); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 60);}} span.ja {font-size: calc(var(--vw) * 20); font-family: var(--font-ja); letter-spacing: var(--tracking-wider); line-height: var(--leading-comfortable); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 34);}}} .subtitle {grid-area: subtitle; font-size: calc(var(--vw) * 12); line-height: var(--leading-snug); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 15);}} .description {grid-area: description; font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); span {display: block;} span.margin-top-regular {margin-block-start: calc(var(--vw) * 12);} span.margin-top-large {margin-block-start: calc(var(--vw) * 14);} @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 18); span.margin-top-regular {margin-block-start: calc(var(--vw) * 26);} span.margin-top-large {margin-block-start: calc(var(--vw) * 20);}} .annotation {@media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 20);}} small {display: block; font-size: calc(var(--vw) * 10); line-height: var(--leading-snug); margin-block-start: calc(var(--vw) * 18); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 12); margin-block-start: calc(var(--vw) * 40);}}}} .video,.img {object-fit: cover; position: absolute; top: 0; left: 0; height: 100%;}}.scroll-indicator:where(.astro-46l4qx4b){grid-area:scroll-indicator}