body {font-family:Rajdhani,"Noto Sans JP",sans-serif; font-size:1rem; font-weight:400; line-height:1.25;}

body, #stage {overflow:visible;}
.img-bg-fz {position:sticky; z-index:-1; margin-top:-100%;}
.img-bg-fz4 {left:80%; top:4vw;}
.img-bg-fz3 {left:60%; top:5vw; filter:blur(4px);}
.img-bg-fz2 {left:37%; top:8vw; filter:blur(4px);}
.img-bg-fz1 {left:3%; top:5vh; max-height:90vh; width:auto;}

.c-box__frame_in {pointer-events:none; inset:0;}

.cta-button {flex:1 1 auto; position:relative; display:block; background:rgba(0,70,141,0.9); margin:0; padding:0.75em; text-align:center; color:#FFF; font-size:1.5rem; font-weight:700; line-height:1; box-shadow:0 0 0 0 rgba(0,127,255,0); transition:all ease 0.2s; cursor:pointer;}
.cta-button::before {content:""; position:absolute; inset:0; display:block; background:linear-gradient(120deg,rgba(0,127,255,0.3) 20%,rgba(0,127,255,0) calc(20% + 1px),rgba(0,127,255,0) calc(20% + 4px),rgba(0,127,255,0.3) calc(20% + 5px),rgba(0,127,255,0.3) calc(20% + 8px),rgba(0,127,255,0) calc(20% + 9px)); mix-blend-mode:screen;}
.cta-button:hover {background:rgba(0,127,255,0.9); box-shadow:0 0 30px 0 rgba(0,127,255,0.5);}

hr {margin:2rem auto;}

.ly-cont {padding-bottom:6rem;}

.p-mv__img {mask-image:linear-gradient(rgba(0,0,0,1)86%,rgba(0,0,0,0.75)91%,rgba(0,0,0,0.5)95%,rgba(0,0,0,0.25)98%,rgba(0,0,0,0));}
.p-mv__img picture * {width:100%;}
.p-mv__main {width:651px; max-width:50%; top:115vw; left:50%; transform:translateX(-50%);}
.p-mv__logo {width:auto;}
.p-mv__sale {color:#F60; font-size:4vw; margin-top:3vw; letter-spacing:0.25em;}
.p-mv__main .cta-button {max-width:23rem; margin:1rem auto;}

.p-catch {display:none;}
.p-catch, .p-catch * {transform:none!important;}
.title-container {position:relative; width:100%; height:auto;}
.title-bg {display:block; width:96%; height:auto; aspect-ratio:53 / 6; margin:auto; clip-path:url(#title-svg); background-image:url(../../dist/img/top/fz-kv-reverse.webp); background-attachment:fixed;}

section {display:block; width:1280px; min-width:50%; max-width:90%; margin:auto; padding:6rem 0;}
section > div {display:block; margin:auto; padding:4rem; font-size:1.375rem; background:rgba(0,13,26,0.9);}
section h2 {position:relative; font-family:"Black Ops One",Impact,Rajdhani,"Noto Sans JP",sans-serif; font-size:6rem; line-height:1; margin:0 auto -0.5em; text-shadow:0 2px 10px rgba(0,0,0,0.5);}
section h2 span {font-family:initial; font-size:2rem; font-weight:700;}
section h3 {font-size:1.625rem; color:#EEE;}
section h4 {font-size:1.5rem; color:#DDD;}
section p {color:#CCC;}

.news__box {position:relative;}
.news__box ul li {color:rgba(255,255,255,1); padding:0.75em 0; border-bottom:1px solid #F60; margin-top:-1px; border-top:1px solid #F60; background:linear-gradient(90deg,#F60,#FFF); background-clip:text; transition:all ease-out 0.2s;}
.news__box ul li:first-of-type {margin-top:0.75em;}
.news__box ul li .data {display:block; margin-bottom:0.25em;}
.news__box ul li:hover a :not(.data) {color:rgba(255,255,255,0);}

.about__gallery {display:flex; flex-direction:row; flex-wrap:wrap; gap:2rem; margin:2rem auto;}
.about__gallery-text p {margin-top:1em;}

.text-box h3, .text-box h4 {margin-bottom:0.5em;}
.image-box {display:flex; flex-direction:row; flex-wrap:wrap; gap:1.5rem; margin:2rem auto;}
.thumbnail {position:relative; flex:1 0 26%; max-width:calc(50% - 0.75rem); margin:auto;}
.thumbnail img {cursor:pointer; outline:8px solid rgba(0,127,255,0); transition:outline 0.2s ease;}
.thumbnail:hover img {outline:1px solid #08F;}

.vehicle-list {display:flex; flex-direction:row; flex-wrap:wrap; gap:2rem; margin:2rem auto;}
.vehicle-desc {flex:1 0 35%; position:relative; display:flex; flex-direction:column; flex-wrap:nowrap; min-width:33.3333%; max-width:50%; padding:1.25rem 1.5rem; font-size:1.25rem; font-weight:400; background:rgba(0,127,255,0.2);}
.vehicle-name {font-size:2rem;}
.vehicle-image {margin:1rem auto;}

.spec__box {position:relative;}
.spec__box dl {display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; width:100%;}
.spec__box dl dt,
.spec__box dl dd {width:50%; padding:0.5em 1em;}
.spec__box dl dt {color:#E0F0FF;}
.spec__box dl dd {color:#FFF0E0;}
.spec__box dl dt:nth-of-type(2n-1),
.spec__box dl dd:nth-of-type(2n-1) {background:rgba(0,127,255,0.2);}
.spec__box dl dt:nth-of-type(2n),
.spec__box dl dd:nth-of-type(2n) {background:rgba(0,127,255,0.05);}

.buy-download__box {display:flex; flex-direction:row; flex-wrap:wrap; gap:1rem;}
.package-box {flex:1 0 34%; max-width:calc(50% - 0.5rem);}
.limited-box {flex:1 0 100%; max-width:100%;}
.package-box, .limited-box, .store {position:relative; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; gap:1rem; padding:1.25rem; background:#024; transition:all ease 0.2s;}
.package-box:hover, .limited-box:hover, .store:hover {background:#002850;}
.package-box h3, .limited-box h3 {font-size:2rem; line-height:1;}
.package-name {margin:auto; text-align:center;}
.package-name span {font-size:0.8em;}
.package-image {display:block; margin:0.5rem auto 1rem; transition:transform 0.2s ease;}

.buy-first {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:2rem;}
.buy-first > * {flex:1 0 34%; max-width:calc(50% - 2rem); margin:auto 0;}
.package-box:hover .package-image {transform:scale(1.04) translateY(-2%);}
.limited-box .package-image {width:556px;}
.package-content h4:not(:first-of-type) {margin-top:1em;}
.store-buttons {display:flex; flex-direction:row; flex-wrap:nowrap; gap:0.5rem; width:100%;}
.download-links {display:flex; flex-direction:row; flex-wrap:wrap; gap:1rem; margin:1rem auto;}

.store-list {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:1.5rem;}
.store {flex:1 0 26%; max-width:calc(33.3334% - 1rem);}
.store-name {text-align:center;}
.store-item {flex:1 0 auto; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:start; gap:1rem;}
.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;}

.p-movie {position:fixed; top:0; bottom:auto; width:100%; height:100%; -webkit-mask-image:none; mask-image:none;}
.p-movie .bg-video {position:absolute; z-index:-1; width:100%; height:auto; aspect-ratio:16 / 9;}

footer .footer-bg {position:absolute; inset:0; z-index:-2; background-image:url(../../dist/img/top/fz-kv-bgonly.webp); background-size:contain; background-position:bottom center; background-repeat:no-repeat; mask-image:linear-gradient(to top,rgba(0,0,0,1)25vh,rgba(0,0,0,0)200vh);}


#menu::selection, #menu *::selection {background:transparent!important;}
#menu {display:block; position:fixed; top:2vw; right:2vw; z-index:2; background:rgba(0,47,95,0.9); padding:1.5rem 0; font-size:2.25rem; line-height:1; text-align:right; transition:all 0.2s ease;}
#menu:hover {background:#036;}
#menu * {cursor:pointer;}
#menu label, #menu a {padding:0 1.5rem;}
#menu label {display:block; font-size:0; line-height:0;}
#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; transition:all 0.2s ease;}
#menu a:hover {color:#000; background:#FFF; box-shadow:0 0 30px 0 #FFF;}
#menu a span {font-size:0.6em; margin-right:0.5em;}
#menu #menu-status {display:none!important;}

#menu .menu-toggle {position:relative; width:40px; height:auto; aspect-ratio:1; cursor:pointer;}
#menu .menu-toggle span {position:absolute; left:0; width:100%; height:10%; background-color:#FFF; border-radius:0.25rem;}
#menu .menu-toggle, #menu .menu-toggle span {display:inline-block; transition:all 0.2s ease; box-sizing:border-box;}

#menu label .menu-toggle span:nth-of-type(1) {top:0; animation:hamburger-top1 0.2s forwards; transform-origin:97% 100%;}
#menu label .menu-toggle span:nth-of-type(2) {top:45%; opacity:1; transition:all 0.2s ease;}
#menu label .menu-toggle span:nth-of-type(3) {bottom:0; animation:hamburger-bottom1 0.2s forwards; transform-origin:97% 0;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(1) {animation:hamburger-top2 0.2s forwards;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(2) {opacity:0;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(3) {animation:hamburger-bottom2 0.2s forwards;}

@keyframes hamburger-top1 { 0% {transform:rotate(-45deg) scaleX(1.309);} 50% {transform:rotate(0) scaleX(1);} 100% {transform:rotate(0) scaleX(1);} }
@keyframes hamburger-top2 { 0% {transform:rotate(0) scaleX(1);} 50% {transform:rotate(0) scaleX(1);} 100% {transform:rotate(-45deg) scaleX(1.309);} }
@keyframes hamburger-bottom1 { 0% {transform:rotate(45deg) scaleX(1.309);} 50% {transform:rotate(0) scaleX(1);} 100% {transform:rotate(0) scaleX(1);} }
@keyframes hamburger-bottom2 { 0% {transform:rotate(0) scaleX(1);} 50% {transform:rotate(0) scaleX(1);} 100% {transform:rotate(45deg) scaleX(1.309);} }


.modal {display:none; position:fixed; z-index:1000; inset:0; background-color:rgba(0,0,0,0.95); 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 rgba(0,127,255,0.5); width:100%; height:auto; max-width:min(90vw, 100vw - 40px); max-height:90vh;}
.modal .close {position:absolute; top:-15px; right:-15px; color:#fff; font-size:35px; font-weight:bold; cursor:pointer; transition:background-color 0.3s ease; background:rgba(0,127,255,0.9); width:50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content:center; 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); } }


@supports (paint-order:stroke fill) {
.p-mv__sale {-webkit-text-stroke:4px #000; paint-order:stroke fill;}
section h2 {-webkit-text-stroke:1px rgba(0,0,0,0.5); paint-order:stroke fill;}
section h2 span {-webkit-text-stroke:0;}
.title-text {paint-order:stroke fill;}
}


@media (max-width:820px) {
.p-mv__main {transform:none; position:relative; inset:0; margin:-40vw auto 10vw; width:410px; max-width:80%;}
.p-mv__trailer {margin:auto;}
.store {flex:1 0 34%; max-width:calc(50% - 1rem);}
}
@media (max-width:640px) {
#menu {font-size:2rem; padding:1.25rem 0;}
.menu-toggle {width:30px;}
#menu label, #menu a {padding:0 1.25rem;}

section {max-width:98%;}
section h2 {font-size:calc(0.25rem + 15vw); margin-bottom:-0.2em;}
section h2 span {display:block; font-size:0.4em;}
section h3, .store-item-name {font-size:calc(0.25rem + 3.4375vw);}
section h4 {font-size:calc(0.25rem + 3.125vw);}
section > div {padding:2rem 2vw; font-size:calc(0.25rem + 2.8125vw);}

.img-bg-fz {display:none;}
.cta-button {font-size:calc(0.5rem + 2.5vw);}

.vehicle-name, .limited-box h3, .package-box h3, .store-name {font-size:calc(0.25rem + 5vw);}
.image-box, .vehicle-list, .buy-first, .buy-download__box, .store-buttons, .download-links {flex-direction:column;}
.vehicle-desc, .package-box {flex:1 0 auto; max-width:100%; padding:3vw;}

.spec__inner .spec__box dl dt,
.spec__inner .spec__box dl dd {padding:2vw;}

.buy-first > * {flex:1 0 100%; max-width:100%;}
.buy-first .package-image,
.limited-box .package-image {width:100%;}

footer {padding:4rem 0; background:rgba(0,0,0,0.75);}
}
@media (max-width:500px) {
.store {flex:1 0 100%; max-width:100%;}
}

@media (min-width: 821px) {
body::before {background-size:auto;}

.p-mv__main {max-width:30%; top:50%; left:5%; transform:translateY(-50%);}
.p-mv__trailer {width:27vw; bottom:9vw; right:1vw;}

.p-catch {display:block; padding:0;}
.p-catch__bloc {height:auto;}
.p-catch__txt {font-size:12vw; line-height:1.5;}

section h2 {left:-0.5em;}

.p-tw__bloc {width:18vw; height:4vw;}
.p-tw__bloc .p-tw__txt::before,
.p-tw__bloc .p-tw__txt::after {width:1.5vw; height:1.5vw; left:-1.25em;}
.p-tw__bloc .p-tw__txt span::before,
.p-tw__bloc .p-tw__txt span::after {right:-1em;}

.footer {padding:8rem 4% 4rem;}
}