/*
  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;} }
/**/

body {position:relative; background:#FFF; color:#222; font-family:"M PLUS Rounded 1c",sans-serif; font-size:max(calc(5vw / 6), calc(5vw / 12 + 0.5rem)); font-weight:400; line-height:1.25; overflow-x:hidden;}
.bg-wrap {position:absolute; z-index:-1; inset:0; top:56.25vw; bottom:calc(10.5em + 80px); background:url(../img/poster-pair.webp); background-position:center; background-size:cover; background-repeat:no-repeat; mask-image:linear-gradient(#FFFF 44%,#FFF0 49.18%,#FFF0 50%,#FFFF 55%); opacity:0.2;}
h1,h2,h3,h4,h5,h6 {color:#634;}
h2 {font-weight:800;}
section {padding:round(2em,1px) 0;}
.container {display:block; position:relative; width:1280px; min-width:round(calc(200vw / 3),2px); max-width:96vw; margin:auto;}
.container .inner {background:#FEFC; margin:round(2em,1px) 0; padding:round(2em,1px); border-radius:0.5em;}
.container .inner p {font-size:1.5em;}
.container .inner-2 {background:#FCDE; padding:round(2em,1px); border-radius:0.75em;}

/*section h2 {font-size:3em; letter-spacing:0.2em; width:fit-content; margin-bottom:0.5em;}*/
section h2 {display:flex; flex:1; align-items:center; gap:0.5em; width:100%; font-size:3em; text-indent:0.2em; letter-spacing:0.2em; margin-bottom:0.5em;}
section h2::before, section h2::after {content:""; display:block; flex:1 0 0; border-bottom:2px solid #B68;}
section h3 {font-size:2em;}
a {text-decoration:none;}
a img {transition:opacity 0.15s ease;}
a img:hover, a:hover img {opacity:0.75;}
.cta-button {flex:0 1 auto; position:relative; display:block; background:#F37; margin:0; padding:0.75em; text-align:center; color:#FFF; font-size:1.5em; font-weight:700; line-height:1; white-space:nowrap; box-shadow:0 0 0 0 #08F0; transition:all 0.1s ease; cursor:pointer; border-radius:0.5em; border:1px solid #F37;}
.cta-button:hover, a:hover .cta-button {color:#F37; background:#FFF; box-shadow:0 0 1em 0 #FF8CB5;}
.cta-button.disabled {background:#CCCC; color:#777; border-color:#BBB; pointer-events:none;}


.key-visual {position:relative;}
.key-visual .key-visual-image {background:#CCECF8;}
.key-visual .key-visual-image img {width:100%; height:auto; mask-image:linear-gradient(#000 75%,#0008 90%,transparent);}
.key-visual .trailer {display:block; position:absolute; top:2vw; left:10.53vw; width:25vw; height:auto; aspect-ratio:16/9; background:#000; outline:0.2em solid #FF8CB5;}
.key-visual .trailer iframe {display:block; width:100%; height:auto; aspect-ratio:16/9;}
.key-visual .release-date {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:round(0.5em,1px); position:absolute; top:45vw; left:23.03vw; width:44vw; color:#000; text-align:center; transform:translateX(-50%);}
.key-visual .release-date h2 {font-size:2.5em; font-weight:bold; /*text-shadow:1px 1px 2px #FFF,1px -1px 2px #FFF;*/}
.key-visual .release-date div {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:round(0.5em,1px) round(1em,1px);}
.key-visual .release-date .cta-button {width:9.5em; padding:0.75em 0.25em;}
@media (max-width:1280px) {
.key-visual {padding-bottom:min(62vw,calc(360px + 8vw));} /*56.25% * 96%, + 8vw margin*/
.key-visual .trailer {top:61.25vw; left:50%; transform:translate(-50%,-0.1em); width:96%; max-width:640px;}
}
@media (max-width:768px) {
.key-visual {padding-bottom:min(calc(62vw + 12em),calc(360px + 8vw + 12em));}
.key-visual .trailer {top:calc(59.25vw + 12em);}
.key-visual .release-date {top:calc(56.25vw + 2em); left:50%; width:100%;}
}

.page-bg {opacity:0.1; position:absolute; inset:0;}

section dl {display:block; font-size:1.5em;}
section dl div {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:stretch; width:100%;}
section dl dt,
section dl dd {padding:0.5em 1em;}
section dl dt {color:#202; font-weight:bold;}
section dl dd {color:#101;}
section dl div:nth-of-type(2n-1) {background:#F372;}
section dl div:nth-of-type(2n) {background:#F371;}

section.news dl dt {flex:1 0 auto;}
section.news dl dd {flex:0 1 100%;}
section.spec dl dt,
section.spec dl dd {flex:0 1 50%;}

.about .games {display:flex; flex-direction:row; justify-content:space-between; gap:round(2em,1px);}
.about .inner-2 {flex:1 0 34%; display:flex; flex-direction:column; justify-content:space-between; gap:round(0.5em,1px); max-width:round(down,calc(50% - 1vw),2px);}
.about .inner-2 .game-screenshots {display:flex; flex-direction:row; gap:round(0.25em,1px); margin:2em auto;}
.about .inner-2 .game-screenshots img {cursor:pointer; width:100%; margin:auto; border:4px solid #FFF; transition:border 0.1s ease;}
.about .inner-2 .game-screenshots img:hover {border-color:#F37; opacity:inherit;}
/*.about .inner-2 .game-screenshots a:first-of-type img {}*/
.about .inner-2 .game-screenshots img,
.about .inner-2 .game-manuals img {object-position:center; object-fit:cover; aspect-ratio:3/4;}
@media (max-width:768px) {
.about .games {flex-direction:column;}
.about .inner-2 {max-width:none;}
}

.music h3 {margin-bottom:0.5em;}
.musician-list {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:round(1.5em,1px); margin:2em auto 0;}
.musician-list .musician {flex:0 1 calc(100% / 3); display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center;}
.musician-list .musician-name {display:flex; flex-direction:row; align-items:baseline; gap:round(0.3em,1px); color:#311; font-size:1.75em;}
.musician-list .musician-name img {display:inline-block; height:0.75em;}
.musician-list .musician-image {width:100%; max-width:200px; margin:0.5em 0;}
@media (max-width:768px) {
.musician-list .musician {flex:1 0 calc(50% - 3em);}
}
@media (max-width:480px) {
.musician-list {flex-direction:column;}
.musician-list .musician {width:100%;}
}

/*.buy .container {margin:0 auto 4em;}*/

.download-list {display:flex; flex-direction:row; flex-wrap:nowrap; gap:round(2em,1px);}
.download-list .inner-2 {display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:stretch; gap:round(1.5em,1px); flex:1 0 26%; max-width:calc((100% - 3em) / 3);}
.download-list .inner-2 div {display:flex; justify-content:center; align-items:center; flex:1 0 auto;}
.download-list .inner-2 img {width:auto; max-width:15vw; max-height:6.25vw; margin:auto;}
@media (max-width:640px) {
.download-list {flex-direction:column;}
.download-list .inner-2 {flex-direction:row; max-width:100%;}
.download-list .inner-2 div {flex:0 0 50%;}
.download-list .inner-2 img {max-width:80%; max-height:80px;}
.download-list .inner-2 span {flex:0 0 50%; align-self:center;}
}
@media (max-width:360px) {
.download-list .inner-2 {flex-direction:column;}
.download-list .inner-2 span {align-self:stretch;}
}

.stores p {margin-bottom:1em;}
.store-list {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:round(1.5em,1px);}
.store-list .inner-2 {flex:1 0 26%; display:flex; flex-direction:column; gap:round(1em,1px); max-width:calc((100% - 3em) / 3);}
.store-name {font-size:2em; text-align:center;}
.store-item {flex:1 0 auto; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:start; gap:round(1em,1px);}
.store-item-image {max-width:100%; margin:0;}
.store-item-name {text-align:center;}
.store-item-name span {font-size:0.8em;}
.store .cta-button {flex:0 1 auto;}
.packages .store-list .inner-2 {max-width:min(50%,384px);}
@media (max-width:768px) {
.store-list .inner-2 {flex:1 0 33.334%; max-width:50%;}
}
@media (max-width:640px) {
.packages .store-list {flex-direction:column;}
.packages .store-list .inner-2 {max-width:100%;}
}
@media (max-width:480px) {
.store-list {flex-direction:column;}
.store-list .inner-2 {max-width:100%;}
}


.footer {background:#A79; padding:4em 0;}
.footer .container {display:flex; flex-direction:column; gap:round(2em,1px);}
.footer .footer-logo-list {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:round(6vw,1px);}
.footer .footer-logo-list img {width:auto; height:80px; max-height:10vw}
.footer p {color:#111; font-size:1.25em; text-align:center;}
.footer .twitter-share-button {display:block; margin:auto;}

#menu {display:block; position:fixed; top:2vw; right:2vw; z-index:2; padding:0; font-size:1.75em; text-align:right; transition:all 0.2s ease; background:#A79A;}
#menu:hover {background:#A79E;}
#menu * {cursor:pointer; line-height:1.5;}
#menu label {display:block; padding:1rem; font-size:0; line-height:0;}
#menu .menu-content {pointer-events:none; display:block; opacity:0; width:auto; height:auto; font-size:0; transition:all 0.2s ease;}
#menu #menu-status:checked ~ .menu-content {pointer-events:auto; opacity:1; margin-top:-0.5rem; padding-bottom:0.5rem; font-size:inherit;}
#menu a {display:block; color:#FFF; margin:0; padding:0 1rem; transition:all 0.2s ease; text-transform:uppercase; text-decoration:none;}
#menu a:hover {color:#000; background:#FFF; box-shadow:0 0 1rem 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 {position:relative; cursor:pointer; margin-left:auto; min-width:20px; width:round(1.5vw,10px); 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);}

#page_top {display:block; position:fixed; z-index:2; bottom:2vw; right:2vw; mix-blend-mode:multiply;}
#page_top a {display:block; position:relative; box-sizing:content-box; min-width:20px; width:round(1.5vw,10px); height:auto; aspect-ratio:1; padding:1rem; background:#A79A; transition:opacity 0.4s ease;}
#page_top a:hover {opacity:0.6;}
#page_top a img {width:100%; height:auto; margin:auto;}

.modal {display:none; position:fixed; z-index:1000; inset:0; background-color:#101C; backdrop-filter:blur(5px);}
.modal.show {display:flex; align-items:center; justify-content:center; animation:modalFadeIn 0.3s ease; overflow-y:auto; padding:40px 20px;}
.modal-content {position:relative; max-width:min(90vw, 100vw - 40px); width:auto; animation:modalZoomIn 0.3s ease; margin:auto; display:inline-block;}
.modal-content img {display:block; border-radius:10px; box-shadow:0 0 50px #FBC; width:100%; height:auto; max-width:min(90vw, 100vw - 40px); max-height:90vh;}
.modal .close {display:flex; align-items:center; justify-content:center; position:absolute; top:-15px; right:-15px; color:#FFF; font-family:Arial,Helvetica,sans-serif; font-size:45px; line-height:1; font-weight:bold; cursor:pointer; transition:background-color 0.3s ease; background:#F37; width:49px; height:auto; aspect-ratio:1; border-radius:50%; backdrop-filter:blur(10px); z-index:1001; opacity:1; pointer-events:auto;}

@keyframes modalFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes modalZoomIn { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
@keyframes modalZoomOut { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(0.7); } }