.div:where(.astro-5cwji4iw){display:grid;grid-template:"heading" max-content "." calc(var(--vw) * 28) "image-wrapper" max-content "." calc(var(--vw) * 32) "content" max-content / 1fr;justify-items:center;padding-inline:calc(var(--vw) * 16);--pad-x: calc(var(--vw) * 60);@media screen and (min-width: 768px){padding-inline:calc(var(--vw) * 144);grid-template:"heading . content" max-content ". . content" calc(var(--vw) * 22) "image-wrapper . content" max-content "image-wrapper . content" 1fr / max-content var(--pad-x) 1fr;justify-items:start}@media screen and (min-width: 1024px){--pad-x: calc(var(--vw) * 96)}}:where(.div):where(.astro-5cwji4iw){.heading {grid-area: heading; justify-self: flex-start;} .image-wrapper {grid-area: image-wrapper; width: 100%; height: auto; overflow: hidden; aspect-ratio: 1248 / 832; @media screen and (min-width: 768px) {width: calc(624 / var(--comp-w) * 100vw);}} .content { --pad-y-1: calc(var(--vw) * 20); --pad-y-2: calc(var(--vw) * 26); --pad-y-3: calc(var(--vw) * 14); --pad-y-4: calc(var(--vw) * 26); grid-area: content; display: grid; grid-template: "name" max-content "." var(--pad-y-1) "description-1" max-content "." var(--pad-y-2) "subheading" max-content "." var(--pad-y-3) "description-2" max-content "." var(--pad-y-4) "link" max-content / 1fr; width: 100%; max-width: 1248px; margin-inline: auto; font-size: calc(var(--vw) * 14); line-height: var(--leading-tight); @media screen and (min-width: 768px) { padding-block-start: calc(var(--vw) * 14.5); --pad-y-2: calc(var(--vw) * 24); --pad-y-3: calc(var(--vw) * 12); --pad-y-4: calc(var(--vw) * 32); } } :where(.content) {.name {grid-area: name; line-height: var(--leading-none); font-size: calc(var(--vw) * 20); font-weight: var(--font-bold); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24); line-height: var(--leading-snug);}} .subheading {grid-area: subheading; font-size: calc(var(--rem) * 16); line-height: var(--leading-relaxed); font-weight: var(--font-medium); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 18);}} .description-1 {grid-area: description-1;} .description-2 {grid-area: description-2;} .description-1,.description-2 {font-size: calc(var(--rem) * 12); line-height: var(--leading-extra-relaxed); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16); line-height: var(--leading-relaxed);}} a {grid-area: link; font-size: calc(var(--rem) * 16); text-decoration: underline; display: inline-block; width: max-content; @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 18);}}}}.modal:where(.astro-pkabmrrv){width:100%;height:100dvh;height:100vh;z-index:var(--z-modal);transition:opacity 0.3s ease,visibility 0.3s ease;position:fixed;top:50%;left:50%;translate:-50% -50%;&.is-shown{opacity:1;visibility:visible}&:not(.is-shown){opacity:0;visibility:hidden}&::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--surface-primary);opacity:0.8;z-index:-1}}:where(.modal):where(.astro-pkabmrrv){.inner { --w: calc((343 / var(--comp-w)) * 100%); --pad-y: min(calc(var(--vh) * 24), calc(var(--vw) * 24)); width: 100%; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; grid-template: "button" max-content "." var(--pad-y) "video" max-content / var(--w); justify-content: center; pointer-events: none; * { pointer-events: auto; } @media screen and (min-width: 768px) { --w: calc((1010 / var(--comp-w)) * 100%); --pad-y: 0; } } .close-button { --button-width: 30; grid-area: button; display: block; position: relative; width: calc(var(--vw) * var(--button-width)); height: auto; aspect-ratio: 1/1; justify-self: end; cursor: pointer; @media screen and (min-width: 768px) { --button-width: 60; position: absolute; top: 0; right: 0; translate: calc(var(--vw) * 30 + 100%); } .bar { display: block; width: calc((var(--vw) * var(--button-width)) * 1.414213562); height: 2px; transition: transform 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart); position: absolute; top: 50%; left: 50%; translate: -50% -50%; &:first-child { rotate: 45deg; } &:last-child { rotate: -45deg; } } } .video-wrapper {pointer-events: auto; grid-area: video; width: 100%; aspect-ratio: 16/9;}}.div:where(.astro-devosz2a){position:relative;width:100vw;@media screen and (min-width: 768px){aspect-ratio:1440 / 800;height:auto}}:where(.div):where(.astro-devosz2a){.picture {@media screen and (min-width: 768px) {aspect-ratio: 1440 / 680; width: 100%; height: auto; display: block;}} .over-layer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-over-layer); transition: transform 0.3s ease-in-out;} .slogan {position: absolute; display: flex; top: calc(var(--header-min-height-sp) + calc(var(--vh) * 8)); left: calc(var(--vw) * 24); width: calc((66 / var(--comp-w)) * 100vw); clip-path: rect(0 100% 0% 0); transition: clip-path 0.3s var(--ease-out-cubic); &::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--surface-primary); clip-path: rect(0 100% 100% 0); transition: clip-path 0.3s var(--ease-out-cubic); transition-delay: 0.4s;} &.is-shown {clip-path: rect(0 100% 100% 0); &::after {clip-path: rect(100% 100% 100% 0);}} @media screen and (min-width: 768px) {top: var(--header-min-height-pc); left: calc(var(--vw) * 193); width: calc(var(--vw) * 142);}} .list {margin-top: calc(var(--vh) * 160 * -1); top: calc(var(--header-min-height-sp) + calc(var(--vh) * 8)); left: calc(var(--vw) * 24); width: 100%; display: grid; grid-template-columns: repeat(4,max-content); @media screen and (min-width: 768px) {position: absolute; top: initial; bottom: calc(var(--vw) * 33); left: calc(var(--vw) * 48); margin-top: initial; width: initial;}} :where(.list) {.item {display: grid; grid-template-rows: repeat(2,max-content); justify-items: center; @media screen and (min-width: 768px) {justify-items: start;} .award {&.monoqlo-hall-of-fame {width: calc((50 / var(--comp-w)) * 100vw);} &.best-buy-men-cosme-1,&.best-buy-men-cosme-2 {width: calc((55 / var(--comp-w)) * 100vw);} &.monomax-body-soap {width: calc((55 / var(--comp-w)) * 100vw);} &.monomax-body-mist,&.monomax-all-in-one-shampoo {width: calc((60 / var(--comp-w)) * 100vw);} @media screen and (min-width: 768px) {transform: translateY(calc((24 / var(--comp-w)) * 100vw));}} .main-image {width: calc((136 / var(--comp-w)) * 100vw); @media screen and (min-width: 768px) {width: calc((180 / var(--comp-w)) * 100vw);}} --translate-x: 38%; --offset: 1.08; &:nth-child(2) {transform: translateX(calc(var(--translate-x) * -1));} &:nth-child(3) {transform: translateX(calc(var(--translate-x) * -2));} &:nth-child(4) {transform: translateX(calc(var(--translate-x) * -3 * var(--offset)));}}} .button-wrapper {padding-inline: calc(var(--vw) * 16); margin-top: min(calc(var(--vh) * 40),calc(var(--vw) * 40)); @media screen and (min-width: 768px) {position: absolute; bottom: calc(var(--vw) * 48); right: calc(var(--vw) * 48); width: calc(var(--vw) * 240); padding-inline: initial; margin-top: initial;}} .fixed-button-wrapper {position: fixed; bottom: calc(var(--vw) * 16); right: calc(var(--vw) * 16); width: calc(100vw - calc(var(--vw) * 32)); z-index: var(--z-fixed-button); @media screen and (min-width: 768px) {bottom: calc(var(--vw) * 48); right: calc(var(--vw) * 48); width: calc(var(--vw) * 240); padding-inline: initial; margin-top: initial;} transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; &:not(.is-shown) {opacity: 0; visibility: hidden;} &.is-shown {opacity: 1; visibility: visible;}} [data-cm-fixed-wrapper="sp"] {display: grid; grid-template-columns: 1fr 0.5fr 0.5fr; grid-template-rows: max-content; gap: calc(var(--vw) * 8); @media screen and (min-width: 768px) {display: none;} .button {border-width: 1px; border-style: solid; min-height: 46px; display: grid; place-items: center; width: 100%;} [data-modal-open-button="full"] {.text {font-size: calc(var(--rem) * 14); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium);}} [data-modal-open-button="30s"],[data-modal-open-button="15s"] {border-width: 1px; border-style: solid; padding-block: calc(var(--vw) * 13); .text {display: flex; align-items: center; justify-content: center; .number,.version {line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium);} .number {font-size: calc(var(--rem) * 16);} .version {font-size: calc(var(--rem) * 13); padding-inline-start: calc(var(--vw) * 1);} .unit {font-size: calc(var(--rem) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium);}}}} [data-cm-fixed-wrapper="pc"] {display: grid; grid-template: "full full" max-content "30s 15s" max-content / 1fr 1fr; gap: calc(var(--vw) * 12); &:not([data-cm-kv="button-wrapper"]) {@media screen and (max-width: 767px) {display: none;}} @media screen and (min-width: 768px) {gap: calc(var(--vw) * 7);} [data-modal-open-button="full"] {grid-area: full; display: flex; flex-direction: column; align-items: center; justify-content: center; .thumbnail {@media screen and (min-width: 768px) {aspect-ratio: 240 / 128; object-fit: cover;}} .text {font-size: calc(var(--rem) * 20); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); padding-bottom: calc(var(--vw) * 14); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 15); padding-top: calc(var(--vw) * 12); padding-bottom: calc(var(--vw) * 12);}}} [data-modal-open-button="30s"] {grid-area: 30s;} [data-modal-open-button="15s"] {grid-area: 15s;} [data-modal-open-button="30s"],[data-modal-open-button="15s"] {border-width: 1px; border-style: solid; padding-block: calc(var(--vw) * 13); @media screen and (min-width: 768px) {padding-block: calc(var(--vw) * 10);} .text {display: flex; align-items: center; justify-content: center; .number,.version {line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); @media screen and (min-width: 768px) {}} .number {font-size: calc(var(--rem) * 18); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16);}} .version {font-size: calc(var(--rem) * 14); padding-inline-start: calc(var(--vw) * 2); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16);}} .unit {font-size: calc(var(--rem) * 15); line-height: var(--leading-none); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); padding-inline-start: calc(var(--vw) * 1); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 14);}}}}}}.modal:where(.astro-knhr2cwg){width:100%;height:100dvh;height:100vh;z-index:var(--z-modal);transition:opacity 0.3s ease,visibility 0.3s ease;position:fixed!important;top:50%;left:50%;translate:-50% -50%;&.is-shown{opacity:1;visibility:visible}&:not(.is-shown){opacity:0;visibility:hidden}&::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--surface-primary);opacity:0.8;z-index:-1}}:where(.modal):where(.astro-knhr2cwg){.inner { --w: calc((343 / var(--comp-w)) * 100%); --pad-y: min(calc(var(--vh) * 24), calc(var(--vw) * 24)); width: 100%; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; grid-template: "button" max-content "." var(--pad-y) "content" max-content / var(--w); justify-content: center; pointer-events: none; * { pointer-events: auto; } @media screen and (min-width: 768px) { --w: calc((1010 / var(--comp-w)) * 100%); --pad-y: 0; } } .close-button { --button-width: 30; grid-area: button; display: block; position: relative; width: calc(var(--vw) * var(--button-width)); height: auto; aspect-ratio: 1/1; justify-self: end; cursor: pointer; @media screen and (min-width: 768px) { --button-width: 60; position: absolute; top: 0; right: 0; translate: calc(var(--vw) * 30 + 100%); } .bar { display: block; width: calc((var(--vw) * var(--button-width)) * 1.414213562); height: 2px; transition: transform 0.3s var(--ease-in-out-quart), background-color 0.3s var(--ease-in-out-quart); position: absolute; top: 50%; left: 50%; translate: -50% -50%; &:first-child { rotate: 45deg; } &:last-child { rotate: -45deg; } } } .content-wrapper {grid-area: content; width: 100%;}}.div:where(.astro-r7jbunxs){overflow:hidden;position:relative;padding-block-start:calc(var(--vw) * 83);padding-block-end:calc(var(--vw) * 110.5);--pad-x: calc(var(--vw) * 46);display:grid;grid-template:". container ." max-content ". . ." calc(var(--vw) * 44) ". button ." max-content / var(--pad-x) 1fr var(--pad-x);justify-items:center;&>:where(.astro-r7jbunxs):not(.background){position:relative}@media screen and (min-width: 768px){padding-block-start:calc(var(--vw) * 180);padding-block-end:calc(var(--vw) * 180);--pad-x: 1fr;grid-template:". container ." max-content ". . ." calc(var(--vw) * 32) ". button ." max-content / var(--pad-x) max-content var(--pad-x);justify-items:start}}:where(.div):where(.astro-r7jbunxs){.background {position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: auto !important; .img {aspect-ratio: 375 / 256;}} .container {grid-area: container; display: flex; flex-direction: column; gap: calc(var(--vw) * 28); .title {font-size: calc(var(--rem) * 20); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-widest); font-weight: var(--font-bold); justify-self: flex-start; @media screen and (min-width: 768px) {font-size: min(calc(var(--rem) * 30),calc(var(--vw) * 40)); line-height: 1.6; justify-self: center;}} .list {display: flex; flex-direction: column; gap: 0.1em; font-size: calc(var(--rem) * 12); line-height: var(--leading-extra-relaxed); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); @media screen and (min-width: 768px) {gap: 0em; font-size: calc(var(--rem) * 18);} .item {display: grid; grid-template-columns: max-content 1fr; gap: 2em; dt {display: flex; min-width: 5em;}}}} #lyrics {.item {gap: 0.4em; dt {min-width: initial;}}} .button {grid-area: button; display: flex; gap: calc(var(--vw) * 6); align-items: center; justify-content: center; width: fit-content; min-width: calc(var(--vw) * 194); margin-inline: auto; padding-block: calc(var(--vw) * 18); padding-inline: calc(var(--vw) * 24); font-size: calc(var(--rem) * 16); line-height: var(--leading-none); font-weight: var(--font-medium); @media screen and (min-width: 768px) { --pad-x: calc(var(--vw) * 8); font-size: calc(var(--rem) * 16); padding-block: calc(var(--vw) * 19); padding-inline: calc(var(--vw) * 32); justify-self: start; margin-inline: initial; } .icon {width: calc(var(--rem) * 12); display: inline-block; transform: translateY(-0.5px); @media screen and (min-width: 768px) {width: calc(var(--rem) * 14);}}} #lyrics {position: relative; width: 100%; height: calc(var(--vh) * 580); padding-block: calc(var(--vw) * 53); padding-inline: calc(var(--vw) * 53); --pad-y-1: calc(var(--vw) * 28); --pad-y-2: calc(var(--vw) * 30); --w: max-content; overflow-y: auto; overflow-x: hidden; display: grid; grid-template: ". heading ." max-content ". . ." var(--pad-y-1) ". container ." max-content ". . ." var(--pad-y-2) ". text ." max-content / 1fr var(--w) 1fr; justify-content: center; @media screen and (min-width: 768px) {grid-template: "heading" max-content "." var(--pad-y-1) "container" max-content "." var(--pad-y-2) "text" max-content / var(--w); --pad-y-1: calc(var(--vw) * 48); --pad-y-2: calc(var(--vw) * 40); padding-block: calc(var(--vw) * 80); --w: calc(var(--vw) * 447);} .heading {grid-area: heading; font-size: calc(var(--rem) * 30); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); justify-self: center; @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 46);}} .container {@media screen and (min-width: 768px) {gap: calc(var(--vw) * 48);} .title {font-size: calc(var(--rem) * 20); line-height: var(--leading-snug); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24);} @media screen and (min-width: 1024px) {width: max-content; transform: translateX(-12%);}} .list {@media screen and (min-width: 768px) {}}} .text {grid-area: text; font-size: calc(var(--rem) * 12); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 18);}}}}.div:where(.astro-vwo5u57o){--pad-b-s: calc(var(--vw) * 120);--pad-b-e: calc(var(--vw) * 120);display:grid;grid-template:"band-content" max-content "." calc(var(--vw) * 60) "vocalist" max-content / 1fr;justify-items:center;padding-inline:calc(var(--vw) * 16);padding-block-start:var(--pad-b-s);padding-block-end:var(--pad-b-e);@media screen and (min-width: 768px){--pad-b-s: calc(var(--vw) * 180);--pad-b-e: calc(var(--vw) * 210);padding-inline:calc(var(--vw) * 144);grid-template:"band-content" max-content "." calc(var(--vw) * 120) "vocalist" max-content / 1fr;justify-items:start}}:where(.div):where(.astro-vwo5u57o){.band-content {grid-area: band-content; display: grid; grid-template: "visual-block" max-content "." calc(var(--vw) * 32) "text-block" max-content / 1fr; @media screen and (min-width: 768px) {grid-template: "text-block . visual-block" max-content / 1fr calc(var(--vw) * 96) max-content;}} :where(.band-content) {.visual-block {grid-area: visual-block; display: flex; flex-direction: column; gap: calc(var(--vw) * 28); @media screen and (min-width: 768px) {position: sticky; top: var(--pad-b-s); gap: calc(var(--vw) * 32); height: max-content;} .heading {grid-area: heading; justify-self: flex-start;} .image-wrapper {grid-area: image-wrapper; width: 100%; height: auto; overflow: hidden; @media screen and (min-width: 768px) {width: calc(624 / var(--comp-w) * 100vw);}}}} .text-block { --pad-y-1: calc(var(--vw) * 24); --pad-y-2: calc(var(--vw) * 16); --pad-y-3: calc(var(--vw) * 14); grid-area: text-block; display: grid; grid-template: "name" max-content "." var(--pad-y-1) "description-1" max-content "." var(--pad-y-2) "subheading" max-content "." var(--pad-y-3) "description-2" max-content / 1fr; @media screen and (min-width: 768px) { --pad-y-1: calc(var(--vw) * 28); --pad-y-2: calc(var(--vw) * 26); --pad-y-3: calc(var(--vw) * 12); } } :where(.text-block) {.name {grid-area: name; line-height: var(--leading-none); font-size: calc(var(--vw) * 20); font-weight: var(--font-bold); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24); line-height: var(--leading-snug);}} .description-1 {grid-area: description-1;} .description-2 {grid-area: description-2;} .subheading {grid-area: subheading; font-size: calc(var(--rem) * 16); line-height: var(--leading-relaxed); font-weight: var(--font-medium); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 18);}} .description-1,.description-2 {font-size: calc(var(--rem) * 12); line-height: var(--leading-extra-relaxed); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16); line-height: var(--leading-relaxed);}}} .vocalist-content {grid-area: vocalist; display: grid; grid-template: "image-wrapper" max-content "." calc(var(--vw) * 32) "name" max-content "." calc(var(--vw) * 20) "description" max-content / 1fr; width: 100%; max-width: 1248px; margin-inline: auto; font-size: calc(var(--vw) * 14); line-height: var(--leading-tight); @media screen and (min-width: 768px) { --pad-x: calc(var(--vw) * 96); grid-template: "image-wrapper . name" max-content "image-wrapper . ." calc(var(--vw) * 32) "image-wrapper . description" max-content / max-content var(--pad-x) 1fr; }} :where(.vocalist-content) {.image-wrapper {grid-area: image-wrapper; width: 100%; height: auto; overflow: hidden; @media screen and (min-width: 768px) {width: calc(624 / var(--comp-w) * 100vw); aspect-ratio: 624 / 416;}} .name {grid-area: name; line-height: var(--leading-none); font-size: calc(var(--vw) * 20); font-weight: var(--font-bold); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24);}} .description {grid-area: description; font-size: calc(var(--rem) * 12); line-height: var(--leading-extra-relaxed); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16);}}}}.story:where(.astro-3pek47le){position:relative;padding-block-start:calc(var(--vw) * 138);padding-block-end:calc(var(--vw) * (185 + 125));@media screen and (min-width: 768px){padding-block-start:calc(var(--vw) * 216);padding-block-end:calc(var(--vw) * 47)}}:where(.story):where(.astro-3pek47le){--container-width: min(calc(100vw - calc(var(--vw) * 32)), 815px);@media screen and (min-width: 768px){--container-width: calc((815 / var(--comp-w)) * 100vw)}.main-container {display: flex; flex-direction: column; align-content: center; justify-content: center; margin-inline: auto; border-width: 1px; border-style: solid; width: var(--container-width); min-height: 518px; @media screen and (min-width: 768px) {padding-block: calc(var(--vw) * 60);} .list {position: relative;} :where(.list) {.item {min-height: 390px; --pad-y: calc(var(--vw) * 15); display: grid; grid-template: "heading" max-content "tagline" max-content "thumbnail-button" max-content "text" max-content "button" max-content / 1fr; justify-items: center; align-content: center; height: 100%; .heading {font-size: calc(var(--rem) * 30); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); padding-bottom: calc(var(--vw) * 23); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 46); padding-bottom: calc(var(--vw) * 28);}} .tagline {grid-area: tagline; font-size: calc(var(--rem) * 16); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); text-align: center; @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 26);}} .thumbnail-button {grid-area: thumbnail-button; position: relative; width: calc((244 / var(--comp-w)) * 100vw); height: auto; aspect-ratio: 338 / 190; margin-block-start: calc(var(--vw) * 24); display: flex; border-width: 1px; border-style: solid; padding: 4px; cursor: pointer; @media screen and (min-width: 768px) {width: calc((342 / var(--comp-w)) * 100vw);} .play-button {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: transparent; border: none; cursor: pointer; width: calc((48 / var(--comp-w)) * 100vw);}} .text {grid-area: text; font-size: calc(var(--rem) * 12); line-height: var(--leading-snug); letter-spacing: var(--tracking-widest); font-weight: var(--font-medium); padding-inline: calc((10 / var(--comp-w)) * 100vw); padding-bottom: calc(var(--vw) * 14); text-align: center; @media screen and (min-width: 768px) {padding-inline: calc((100 / var(--comp-w)) * 100vw); font-size: calc(var(--rem) * 16);} * {display: inline-block; text-align: center; &:not(:first-child) {margin-top: 0.8em;}}} .button {grid-area: button; font-size: calc(var(--rem) * 14); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); text-align: center; margin-top: calc(var(--vw) * 30); display: flex; align-items: center; justify-content: center; gap: calc(var(--vw) * 4); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24); margin-top: calc(var(--vw) * 43);} .caret {width: calc(var(--vw) * 12); transform: rotate(90deg); @media screen and (min-width: 768px) {width: calc(var(--vw) * 24);}}} &:not(:first-child) {position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden;} &[data-story-item="first-archive"] {.text {margin-block-start: calc(var(--vw) * 23);}} &[data-story-item="second-archive"],&[data-story-item="third"] {.text {margin-block-start: calc(var(--vw) * 16);}} @media screen and (min-width: 768px) {&[data-story-item="first-archive"] {.text {margin-block-start: calc(var(--vw) * 22);}} &[data-story-item="second-archive"],&[data-story-item="third"] {.text {margin-block-start: calc(var(--vw) * 34);}}}}}} .buttons {display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--vw) * 8.5); margin-block-start: calc(var(--vw) * 8); margin-inline: auto; border-width: 1px; border-style: solid; width: var(--container-width); @media screen and (min-width: 768px) {padding-inline: calc(var(--vw) * 107); gap: calc(var(--vw) * 14); margin-block-start: calc(var(--vw) * 38);} .button {font-size: calc(var(--rem) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-widest); font-weight: var(--font-bold); text-align: center; padding-block: calc(var(--vw) * 16); border-width: 1px; border-style: solid; @media screen and (min-width: 768px) {padding-block: calc(var(--vw) * 18); font-size: calc(var(--rem) * 16);}}} .scenes {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; .image-wrapper {width: 100%; height: 100%; position: absolute; &:first-child {z-index: 3;} &:nth-child(2) {z-index: 2;} &:nth-child(3) {z-index: 1;} .img {position: absolute; --scale: 1.2; &.scene-1 {top: calc(var(--vw) * (42)); right: 0; width: min(calc((199 / var(--comp-w)) * 100vw),(199px * var(--scale))); @media screen and (min-width: 768px) {top: calc(var(--vw) * (80)); width: calc((434 / var(--comp-w)) * 100vw);}} &.scene-2 {bottom: calc(var(--vw) * (40 + 125)); left: 0; width: min(calc((180 / var(--comp-w)) * 100vw),(180px * var(--scale))); @media screen and (min-width: 768px) {bottom: calc(var(--vw) * (47 + 281)); width: calc((384 / var(--comp-w)) * 100vw);}} &.scene-3 {bottom: 0; right: 0; width: calc((220 / var(--comp-w)) * 100vw); width: min(calc((220 / var(--comp-w)) * 100vw),(220px * var(--scale))); @media screen and (min-width: 768px) {width: calc((337 / var(--comp-w)) * 100vw);}}}}}}.div:where(.astro-4wr3m2tz){width:100%;position:relative;display:grid;grid-template:"heading-wrapper" max-content "." calc(var(--vw) * 28) "list" max-content / 1fr;padding-inline:calc(var(--vw) * 16);padding-block-start:calc(var(--vw) * 120);@media screen and (min-width: 768px){padding-inline:calc(var(--vw) * 144);grid-template:"heading-wrapper . list" max-content / max-content calc(var(--vw) * 150) 1fr;justify-items:start;padding-block-start:calc(var(--vw) * 210)}}:where(.div):where(.astro-4wr3m2tz){.bg-wrapper {position: fixed; top: 0; left: 0; width: 100vw; height: 100lvh; object-fit: cover; transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; &:not(.is-shown) {opacity: 0; visibility: hidden;} &.is-shown {opacity: 1; visibility: visible;} & ~ * {position: relative;}} .heading-wrapper {grid-area: heading-wrapper; .heading {grid-area: heading; transition: opacity 0.3s ease-in-out,filter 0.3s ease-in-out,visibility 0.3s ease-in-out; @media screen and (min-width: 768px) {height: max-content; position: sticky; top: calc(var(--vw) * 180); &:not(.is-shown) {opacity: 0; visibility: hidden;} &.is-shown {opacity: 1; visibility: visible;}}}} .list {grid-area: list; display: flex; flex-direction: column; gap: calc(var(--vw) * 64);} :where(.list) {.item {display: grid; grid-template: "image-wrapper" max-content "." calc(var(--vw) * 32) "content" max-content / 1fr; @media screen and (min-width: 768px) {grid-template: "image-wrapper . content" max-content / 1fr calc(var(--vw) * 45) max-content;} .image-wrapper {grid-area: image-wrapper; width: 100%; height: auto; overflow: hidden; aspect-ratio: 343 / 193; @media screen and (min-width: 768px) {aspect-ratio: 340 / 227;}} .content { --pad-y-1: calc(var(--vw) * 20); --pad-y-2: calc(var(--vw) * 26); --pad-y-3: calc(var(--vw) * 14); grid-area: content; display: grid; grid-template: "name" max-content "." var(--pad-y-1) "description-1" max-content "." var(--pad-y-2) "subheading" max-content "." var(--pad-y-3) "description-2" max-content / 1fr; @media screen and (min-width: 768px) { width: calc(447 / var(--comp-w) * 100vw); --pad-y-2: calc(var(--vw) * 12); --pad-y-3: calc(var(--vw) * 12); } } :where(.content) {.name {grid-area: name; line-height: var(--leading-comfortable); font-size: calc(var(--vw) * 20); font-weight: var(--font-bold); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 24); line-height: var(--leading-snug);}} .description-1 {grid-area: description-1;} .subheading {grid-area: subheading; font-size: calc(var(--rem) * 16); line-height: var(--leading-snug); font-weight: var(--font-medium); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 18);}} .description-2 {grid-area: description-2;} .description-1,.description-2 {font-size: calc(var(--rem) * 12); line-height: var(--leading-extra-relaxed); letter-spacing: var(--tracking-widest); @media screen and (min-width: 768px) {font-size: calc(var(--rem) * 16); line-height: var(--leading-relaxed);}}}}}}.page:where(.astro-2k4b3wck){display:grid;grid-template:"fv" max-content "story" max-content "lyrics" max-content "animation" max-content "music" max-content "decoration" max-content "voice" max-content "pick-up" max-content / 1fr;@media screen and (max-width: 767px){&>.decoration:where(.astro-2k4b3wck),.music:where(.astro-2k4b3wck){z-index:5}}}:where(.page):where(.astro-2k4b3wck){.fv {grid-area: fv; overflow: hidden;} .story {grid-area: story;} .lyrics {grid-area: lyrics;} .animation {grid-area: animation;} .music {grid-area: music;} .decoration {grid-area: decoration; width: 100%; @media screen and (min-width: 768px) {height: 600px;} .picture {@media screen and (min-width: 768px) {&:not(.is-shown) {opacity: 0; visibility: hidden;} &.is-shown {opacity: 1; visibility: visible;} position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}}} .voice {grid-area: voice;} .pick-up {grid-area: pick-up;}}