.div:where(.astro-amtqrxtr){}:where(.div):where(.astro-amtqrxtr){.list {display: flex; flex-direction: column; gap: 4px; @media screen and (min-width: 768px) {flex-direction: row;}} :where(.list) {.item {height: 100vw !important; @media screen and (min-width: 768px) {width: 100%; height: initial !important;} .img {object-fit: cover !important; height: 100vw !important; @media screen and (min-width: 768px) {height: 100% !important;}}}}}.div:where(.astro-w3wmvsjb){--pad-b: calc(var(--vw) * 80);display:grid;grid-template:"mv" max-content "." calc(var(--vw) * 64) "text-box" max-content / 1fr;padding-block:var(--pad-b);@media screen and (min-width: 768px){--pad-b: calc(var(--vw) * 160);grid-template:"text-box . mv" max-content / max-content auto 1fr}}:where(.div):where(.astro-w3wmvsjb){.mv {grid-area: mv;} .text-box {grid-area: text-box; .text {font-size: calc(var(--vw) * 14); line-height: var(--leading-extra-super-relaxed); text-align: center;} * > span {display: block;} @media screen and (min-width: 768px) {width: calc((480 / var(--comp-w)) * 100vw); display: grid; place-items: center; .text {font-size: calc(var(--vw) * 15); text-align: left;}}}}.div:where(.astro-5nailetg){position:relative;width:100vw;--pad-i: calc(var(--vw) * 24);aspect-ratio:375 / 667;@media screen and (min-width: 768px){aspect-ratio:1440 / 800;height:auto}}:where(.div):where(.astro-5nailetg){&>.slogan:where(.astro-5nailetg),.text-wrapper:where(.astro-5nailetg){padding-inline:var(--pad-i)}&>.slogan:where(.astro-5nailetg){padding-block-start:calc(var(--vw) * 12);padding-block-end:calc(var(--vw) * 20);line-height:var(--leading-comfortable)}.slogan {letter-spacing: var(--tracking-extra-widest-2x); font-size: calc(var(--vw) * 24); font-feature-settings: "palt" on,"liga" off; @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 30); line-height: var(--leading-none); text-align: center; padding-inline-start: calc(var(--tracking-extra-widest-2x) + 1em);}} .inner {position: relative; height: 100%;} :where(.inner) {.text-wrapper {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template: "slogan" max-content "." calc(var(--vw) * 26) "text" max-content "." 1fr "scroll-indicator" max-content "." calc(var(--vw) * 26) / 1fr; @media screen and (min-width: 768px) {top: initial; left: 50%; transform: translateX(-50%); bottom: calc(var(--vw) * 80); width: max-content; height: auto; grid-template: "slogan" max-content "." calc(var(--vw) * 30) "text" max-content "." calc(var(--vw) * 60) "scroll-indicator" max-content / 1fr;}} :where(.text-wrapper) {.slogan {grid-area: slogan;} .text {grid-area: text; font-size: calc(var(--vw) * 14); line-height: var(--leading-relaxed); font-weight: var(--font-regular); letter-spacing: var(--tracking-extra-widest); @media screen and (min-width: 768px) {text-align: center;}} .scroll-indicator {grid-area: scroll-indicator; justify-self: center; font-size: calc(var(--vw) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 14);}}} .button-wrapper {height: 100%; width: 100%; .button {height: 100%; width: 100%;} .video {height: 100%; width: 100%;}}} .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) * 270); padding-inline: initial; margin-top: initial;} transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out; opacity: 0; visibility: hidden;} [data-cm-fixed-wrapper="sp"] {display: grid; grid-template-columns: 1fr 1fr; 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="15s"],[data-modal-open-button="30s"] {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"] {padding-block-start: calc(var(--vw) * 15); padding-block-end: calc(var(--vw) * 16); padding-inline: calc(var(--vw) * 16); display: grid; grid-template: "heading heading heading" ". . ." calc(var(--vw) * 14) "thirty . fifteen" max-content / 1fr calc(var(--vw) * 12) 1fr; @media screen and (max-width: 767px) {display: none;} .heading {grid-area: heading; font-size: calc(var(--vw) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); justify-self: center; font-weight: var(--font-medium);} [data-modal-open-button="15s"],[data-modal-open-button="30s"],[data-modal-open-button="full"] {border-width: 1px; border-style: solid;} [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="15s"] {grid-area: fifteen;} [data-modal-open-button="30s"] {grid-area: thirty;} [data-modal-open-button="15s"],[data-modal-open-button="30s"] {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);}}}}}}.div:where(.astro-z3tsifgq){--pad-b: calc(var(--vw) * 80);--pad-i: calc(var(--vw) * 37.5);display:grid;grid-template:"mv" max-content "." calc(var(--vw) * 64) "text-box" max-content / 1fr;padding-block:var(--pad-b);padding-inline:calc(var(--pad-i));@media screen and (min-width: 768px){--pad-b: calc(var(--vw) * 160);--pad-i: calc(var(--vw) * 192);grid-template:"mv . text-box" max-content / 1fr auto max-content;width:100%}}:where(.div):where(.astro-z3tsifgq){.mv {grid-area: mv;} .text-box {grid-area: text-box; .text {font-size: calc(var(--vw) * 14); line-height: var(--leading-extra-super-relaxed); text-align: center;} * > span {display: block;} @media screen and (min-width: 768px) {width: calc((480 / var(--comp-w)) * 100vw); display: grid; place-items: center; .text {font-size: calc(var(--vw) * 15); text-align: left;}}}}.div:where(.astro-nt54ilop){@media screen and (min-width: 1024px){}}:where(.div):where(.astro-nt54ilop){.list {display: grid; grid-template-rows: repeat(2,auto);} :where(.list) {.item {&:last-child {transform: translateY(-2px);} .link {aspect-ratio: 375 / 660; width: 100%; height: auto; display: block; @media screen and (min-width: 768px) {aspect-ratio: 1440 / 800;}}}}}.div:where(.astro-7ftyrdlb){--pad-b: calc(var(--vw) * 150);--pad-i: calc(var(--vw) * 24);--pad-y: calc(var(--vw) * 32);justify-items:center;display:grid;grid-template:"mv" max-content "." var(--pad-y) "profile-box" max-content "." var(--pad-y) "comment-box" max-content / 1fr;padding-block:var(--pad-b);padding-inline:calc(var(--pad-i));@media screen and (min-width: 768px){--pad-b: calc(var(--vw) * 280);--pad-y: calc(var(--vw) * 40);width:100%}}:where(.div):where(.astro-7ftyrdlb){.mv {grid-area: mv; width: calc(var(--vw) * 210); height: auto; overflow: hidden; aspect-ratio: 3 / 2; @media screen and (min-width: 768px) {width: calc(var(--vw) * 300);}} .profile-box,.comment-box {text-align: center; color: var(--text-secondary); display: flex; flex-direction: column; gap: calc(var(--vw) * 12); .text {font-size: calc(var(--vw) * 12); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-extra-widest);} @media screen and (min-width: 768px) {gap: calc(var(--vw) * 16); .text {font-size: calc(var(--vw) * 15);}}} .profile-box {grid-area: profile-box; .title {font-size: calc(var(--vw) * 18); line-height: var(--leading-none); letter-spacing: var(--tracking-widest);} @media screen and (min-width: 768px) {.title {font-size: calc(var(--vw) * 24);}}} .comment-box {grid-area: comment-box; .title {font-size: calc(var(--vw) * 16); line-height: var(--leading-none); letter-spacing: var(--tracking-widest);} @media screen and (min-width: 768px) {.title {font-size: calc(var(--vw) * 18);}}}}.div:where(.astro-a72tbcvp){--pad-b-s: calc(var(--vw) * 150);--pad-i: calc(var(--vw) * 24);--pad-y-1: calc(var(--vw) * 16);--pad-y-2: calc(var(--vw) * 48);justify-items:center;width:100%;position:relative;display:grid;grid-template:"heading" max-content "." var(--pad-y-1) "text" max-content "." var(--pad-y-2) "button-wrapper" max-content / 1fr;padding-inline:var(--pad-i);padding-block-start:var(--pad-b-s);@media screen and (min-width: 768px){--pad-b-s: calc(var(--vw) * 280);--pad-y-1: calc(var(--vw) * 24);--pad-y-2: calc(var(--vw) * 60)}}:where(.div):where(.astro-a72tbcvp){.heading {grid-area: heading; @media screen and (min-width: 768px) {}} .text {grid-area: text; text-align: center; font-size: calc(var(--vw) * 14); line-height: var(--leading-relaxed); letter-spacing: var(--tracking-extra-widest); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 15);}} .button-wrapper {grid-area: button-wrapper; position: relative; display: block; @media screen and (min-width: 768px) {width: calc(960 / var(--comp-w) * 100vw);} .play-button {position: absolute; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: calc(var(--vw) * 46); @media screen and (min-width: 768px) {width: calc(var(--vw) * 60);}}}}.page:where(.astro-kp4eej7t){margin-block-start:var(--header-min-height-sp);display:grid;grid-template:"fv" max-content "intro" max-content "product" max-content "poem" max-content "decoration" max-content "special-movie" max-content "profile" max-content / 1fr;@media screen and (min-width: 768px){margin-block-start:initial;&>.decoration:where(.astro-kp4eej7t),.music:where(.astro-kp4eej7t){z-index:5}}}:where(.page):where(.astro-kp4eej7t){.fv {grid-area: fv; overflow: hidden;} .intro {grid-area: intro;} .product {grid-area: product;} .poem {grid-area: poem;} .decoration {grid-area: decoration;} .special-movie {grid-area: special-movie;} .profile {grid-area: profile;}}