/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
body {line-height:1.5;}
* {margin:0; line-height:calc(1em + 0.5rem);}
*, *::before, *::after {box-sizing:border-box;}
img, picture, video, canvas, svg {display:block; max-width:100%;}
input, button, textarea, select {font:inherit;}
h1, h2, h3, h4, h5, h6, p {overflow-wrap:break-word;}
h1, h2, h3, h4, h5, h6 {text-wrap:balance;}
p {text-wrap:pretty;}
#root, #__next {isolation:isolate;}
@media (prefers-reduced-motion: no-preference) { html {interpolate-size:allow-keywords;} }


@font-face { font-family:"PixelMPlus10"; font-weight:normal; src:url("PixelMplus10-Regular.woff2") format("woff2"); }
@font-face { font-family:"PixelMPlus10"; font-weight:bold; src:url("PixelMplus10-Bold.woff2") format("woff2"); }
@font-face { font-family:"PixelMPlus12"; font-weight:normal; src:url("PixelMplus12-Regular.woff2") format("woff2"); }
@font-face { font-family:"PixelMPlus12"; font-weight:bold; src:url("PixelMplus12-Bold.woff2") format("woff2"); }

svg {display:block; position:absolute; bottom:0; right:0; width:0; height:0;}

.pixel {image-rendering:pixelated;}

.pixel-corners-noborder {clip-path:polygon(0px calc(100% - 15px), 3px calc(100% - 15px), 3px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 3px), 15px calc(100% - 3px), 15px 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 15px), 100% calc(100% - 15px), 100% 15px, calc(100% - 3px) 15px, calc(100% - 3px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 3px, calc(100% - 15px) 3px, calc(100% - 15px) 0px, 15px 0px, 15px 3px, 9px 3px, 9px 6px, 6px 6px, 6px 9px, 3px 9px, 3px 15px, 0px 15px);}
.pixel-corners,
.pixel-corners--wrapper {clip-path:polygon(0px calc(100% - 15px), 3px calc(100% - 15px), 3px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 3px), 15px calc(100% - 3px), 15px 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 15px), 100% calc(100% - 15px), 100% 15px, calc(100% - 3px) 15px, calc(100% - 3px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 3px, calc(100% - 15px) 3px, calc(100% - 15px) 0px, 15px 0px, 15px 3px, 9px 3px, 9px 6px, 6px 6px, 6px 9px, 3px 9px, 3px 15px, 0px 15px); position: relative;}
.pixel-corners {border: 3px solid transparent;}
.pixel-corners--wrapper {width:fit-content; height:fit-content;}
.pixel-corners--wrapper .pixel-corners {display:block; clip-path:polygon(3px 15px, 6px 15px, 6px 9px, 9px 9px, 9px 6px, 15px 6px, 15px 3px, calc(100% - 15px) 3px, calc(100% - 15px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 15px, calc(100% - 3px) 15px, calc(100% - 3px) calc(100% - 15px), calc(100% - 6px) calc(100% - 15px), calc(100% - 6px) calc(100% - 9px), calc(100% - 9px) calc(100% - 9px), calc(100% - 9px) calc(100% - 6px), calc(100% - 15px) calc(100% - 6px), calc(100% - 15px) calc(100% - 3px), 15px calc(100% - 3px), 15px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 15px), 3px calc(100% - 15px));}
.pixel-corners::after,
.pixel-corners--wrapper::after {content:""; pointer-events:none; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:linear-gradient(175deg,#EEE,#999); clip-path:polygon(0px calc(100% - 15px), 3px calc(100% - 15px), 3px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 3px), 15px calc(100% - 3px), 15px 100%, calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 15px), 100% calc(100% - 15px), 100% 15px, calc(100% - 3px) 15px, calc(100% - 3px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 3px, calc(100% - 15px) 3px, calc(100% - 15px) 0px, 15px 0px, 15px 3px, 9px 3px, 9px 6px, 6px 6px, 6px 9px, 3px 9px, 3px 15px, 0px 15px, 0px 50%, 3px 50%, 3px 15px, 6px 15px, 6px 9px, 9px 9px, 9px 6px, 15px 6px, 15px 3px, calc(100% - 15px) 3px, calc(100% - 15px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 9px, calc(100% - 6px) 9px, calc(100% - 6px) 15px, calc(100% - 3px) 15px, calc(100% - 3px) calc(100% - 15px), calc(100% - 6px) calc(100% - 15px), calc(100% - 6px) calc(100% - 9px), calc(100% - 9px) calc(100% - 9px), calc(100% - 9px) calc(100% - 6px), calc(100% - 15px) calc(100% - 6px), calc(100% - 15px) calc(100% - 3px), 15px calc(100% - 3px), 15px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 9px), 6px calc(100% - 9px), 6px calc(100% - 15px), 3px calc(100% - 15px), 3px 50%, 0px 50%);}
.pixel-corners::after {margin:-3px;}

#menu {display:block; position:fixed; top:2vw; right:2vw; z-index:3; background:linear-gradient(#03C,#001866); padding:1.25rem 0; font-size:1.875rem; line-height:1; text-align:right; transition:all 0.2s ease;}
/*#menu:hover {background:#254185;}*/
#menu * {cursor:pointer;}
#menu a {padding:0; text-decoration:none;}
#menu label {display:block; font-size:0; line-height:0; padding:0 1.25rem;}
#menu .menu-content {pointer-events:none; display:block; opacity:0; width:auto; height:auto; font-size:0; line-height:1.5; transition:all 0.2s ease;}
#menu #menu-status:checked ~ .menu-content {pointer-events:auto; opacity:1; font-size:inherit; margin-top:0.5rem;}
#menu a {display:block; color:#FFF; margin:0; padding:0 1.25rem; line-height:inherit; /*transition:all 0.2s ease;*/}
#menu a:hover {color:#000; background:#EEE; /*box-shadow:0 0 30px 0 #FFF;*/}
#menu a span {font-size:0.6em; margin-right:0.5em;}

#menu::selection, #menu *::selection {background:transparent!important;}
#menu #menu-status {display:none!important;}

#menu .menu-toggle::before {content:"Menu";}
#menu .menu-toggle {position:relative; cursor:pointer; margin-left:auto; width:40px; height:auto; aspect-ratio:1;}
#menu .menu-toggle span {pointer-events:none; position:absolute; left:0; width:100%; height:10%; background-color:#FFF; border-radius:5% / 50%;}
#menu .menu-toggle span:nth-of-type(1) {top:10%; transition:top 100ms 150ms ease, transform 100ms 50ms ease;}
#menu .menu-toggle span:nth-of-type(2) {top:45%; transition:background-color 50ms 100ms ease;}
#menu .menu-toggle span:nth-of-type(3) {top:80%; transition:top 100ms 150ms ease, transform 100ms 50ms ease;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(1),
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(3) {top:45%; transition:top 100ms 50ms ease, transform 100ms 150ms ease;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(1) {transform:rotate(45deg) scale(1.28);}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(2) {background:transparent;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(3) {transform:rotate(-45deg) scale(1.28);}


body {font-family:"PixelMPlus10",monospace; font-size:1.25rem; font-weight:normal; background-color:#000; color:#DDD; background-image:url("../images/bg2b.png"); background-attachment:fixed; background-position:right center; background-size:cover; background-repeat:no-repeat;}
.title-logo {display:block; position:fixed; z-index:1; inset:0; left:calc(100% - 10px); width:100vh; height:auto; max-width:none; transform:rotate(90deg); transform-origin:left top; pointer-events:none;}

p,li {font-family:"PixelMPlus10",monospace; font-size:1.25rem; font-weight:normal; filter:url(#anti-antialias);}
h1,h2,h3,h4,h5,h6 {color:#FFF; font-family:"PixelMPlus12",monospace; filter:url(#anti-antialias);}
h1 {font-size:3rem; font-weight:bold;}
h2 {font-size:3rem; font-weight:normal;}
h3 {font-size:2.25rem; font-weight:bold;}
h4 {font-size:2.25rem; font-weight:normal;}
h5 {font-size:1.5rem; font-weight:bold;}
h6 {font-size:1.5rem; font-weight:normal;}

section {display:block; position:relative; z-index:2; padding:4rem 0;}

.container {display:block; width:1280px; max-width:96%; margin:auto;}

.logo {position:relative}
.key-visual {position:relative; z-index:2; width:100%; mask-image:linear-gradient(#000F 82%,#000C 88%,#0008 93%,#0004 97%,#0000);}
/*
.catchcopy {margin:1em auto; text-align:center; color:transparent; background-image:linear-gradient(#03C,#FFF 37.5%,#FFF 50%,#F00 50%,#F40 75%,#FF0 87.5%,#FFF); background-clip:text;}
h2.catchcopy {position:absolute; z-index:5; top:8%; width:100%; text-align:center; font-size:3.75vw;}
h4.catchcopy {position:absolute; z-index:4; top:20%; width:100%; text-align:center; font-size:2.5vw;}
h2.catchcopy::after {content:"次元を超える旋律、紡がれる2つのＲ";}
h4.catchcopy::after {content:"発売日：2026.4.30 [THU]";}
h2.catchcopy::after,
h4.catchcopy::after {position:absolute; z-index:4; top:0; left:0; width:100%; -webkit-text-stroke:#FFF 4px;}
*/
.catchcopy-image,
.releasedate-image {display:block; position:absolute; z-index:4; left:50%; transform:translatex(-50%);}
.catchcopy-image {top:8%; width:100%; max-width:round(calc(2335vw / 48),1px);}
.releasedate-image {top:26%; width:100%; max-width:round(calc(2335vw / 96),1px);}

.button-row {display:flex; flex-direction:row; justify-content:center; gap:1rem;}
.button-row {position:absolute; z-index:4; bottom:16%; width:100%;}

.button {display:block; padding:0.25em 1em; width:20rem; max-width:100%; color:#FFF; font-family:"PixelMPlus12",monospace; font-size:2.25rem; font-weight:normal; text-transform:uppercase; text-decoration:none; text-align:center; background-image:linear-gradient(#03C,#001866); filter:url(#anti-antialias);}
.button:hover {background-image:linear-gradient(#04F,#028);}
.button:hover::after {background:#EEE;}

.button.greyout {background:linear-gradient(#444,#111); color:#BBB; pointer-events:none;}
.button.greyout::after {background:#444;}

ul {padding:0; list-style:none;}

li a {color:inherit;}

.video iframe {display:block; margin:auto;}
.screenshot {width:320px; height:auto; aspect-ratio:10 / 9;}

.text-block {background-color:#000; background-image:url("../images/bg-grid.png"); background-position:top center; background-size:auto auto; background-repeat:no-repeat; padding:2rem 15%; /*border:0.25rem solid #CCC; border-radius:1rem;*/}
.text-block img {margin:auto;}
.text-block h2, .text-block h4 {margin:1rem 0; letter-spacing:round(0.1em,1px);}
.text-block h6 {margin-top:1rem;}

.image-row {display:flex; flex-direction:row; flex-wrap:wrap; gap:1rem; margin:1rem auto;}
.image-row > * {max-width:calc(50% - 0.5rem);}
.image-row .screenshot {width:800px; aspect-ratio:16 / 9;}

#music .soundtrack {float:right; max-width:50%;}

.spec-chart li {display:flex; flex-direction:row; gap:0.5rem;}
.spec-chart span, .spec-chart div {background:#001866; padding:0.5rem 1rem; margin:0.25rem 0; filter:url(#anti-antialias);}
.spec-chart span {width:20%;}
.spec-chart div {width:80%;}

.buy-buttons {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem; margin:1rem auto;}
.buy-buttons .button {width:calc(50% - 0.5rem);}

footer {display:block; position:relative; z-index:2; background:#000822; margin-top:4rem; padding:2rem 0;}
.footer-logos {display:flex; flex-direction:row; justify-content:space-between; width:100%; margin:1rem auto;}
.footer-logos img {width:auto; height:60px; transition:opacity 0.2s ease;}
.footer-logos img:hover {opacity:0.8;}