#banner_area {position: relative;width: 100%;height: 98vh;overflow: hidden;display: flex;align-items: center;z-index: 2;}
#banner_area .top-fv__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; will-change: transform; background: #020a1c; }
#banner_area:before { content: ""; width: 100%; height: 30%; position: absolute; top: 0; background: linear-gradient(0deg,rgb(0 0 0/0%),#0b3c6c 100%); z-index: 1; opacity: .75; }
#banner_area .top-fv__bg:before { content: ""; width: 100%; height: 70%; position: absolute; background: linear-gradient(180deg,#020a1c 0%,rgb(11 60 108/10%) 200%); z-index: 1; opacity: .95; top: 30%; }
#banner_area .top-fv__bg video { position: absolute; top: 35%; z-index: -1; opacity: .8; filter: hue-rotate(11deg) saturate(0.71) brightness(1); }
#banner_area #top-fv-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#banner_area .top-fv__borders { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#banner_area .top-fv__borders span { position: absolute; background-color: rgba(255,255,255,0.08); }
/* Vertical & Horizontal Lines */
#banner_area .top-fv__borders span:nth-child(1) { left: 13.5vw; top: 0; height: 100%; width: 1px; }
#banner_area .top-fv__borders span:nth-child(2) { left: 31.5vw; top: 0; height: 100%; width: 1px; }
#banner_area .top-fv__borders span:nth-child(3) { left: 50vw; top: 0; height: 100%; width: 1px; }
#banner_area .top-fv__borders span:nth-child(4) { left: 68.5vw; top: 0; height: 100%; width: 1px; }
#banner_area .top-fv__borders span:nth-child(5) { left: 86.5vw; top: 0; height: 100%; width: 1px; }
#banner_area .top-fv__borders span:nth-child(6) { top: 20%; left: 0; width: 100%; height: 1px; }
#banner_area .top-fv__borders span:nth-child(7) { top: 50%; left: 0; width: 100%; height: 1px; }
#banner_area .top-fv__borders span:nth-child(8) { top: 80%; left: 0; width: 100%; height: 1px; }
#banner_area .top-fv__borders span::after { content: ''; position: absolute; top: 0; left: 0; background-color: #4c90ce; opacity: 0.8; box-shadow: 0 0 10px #4c90ce; }
#banner_area .top-fv__borders span:nth-child(-n+5)::after { width: 100%; height: 30px; animation: borderDrop 4s linear infinite; }
#banner_area .top-fv__borders span:nth-child(2)::after { animation-delay: 1s; }
#banner_area .top-fv__borders span:nth-child(4)::after { animation-delay: 2.5s; }
#banner_area .top-fv__borders span:nth-child(n+6)::after { height: 100%; width: 100px; animation: borderSlide 6s linear infinite; }
@keyframes borderDrop {  0% { top: -100px; opacity: 0; }  50% { opacity: 1; }  100% { top: 100%; opacity: 0; }}
@keyframes borderSlide {  0% { left: -100px; opacity: 0; }  50% { opacity: 1; }  100% { left: 100%; opacity: 0; }}
#banner_area .top-fv__inner { position: relative; z-index: 20; text-align: left; width: min(90%,1270px); display: flex; align-items: center; height: 100%; margin: 0 auto; }
#banner_area .top-fv__title {color: #fff;line-height: 1.1;position: relative;z-index: 20;}
#banner_area .top-fv__title__en span { display: block; font-family: "Oswald",sans-serif; text-transform: uppercase; color: white; font-size: 54px; font-weight: 400; line-height: 1.6; }
#banner_area .top-fv__title__ja { display: block; font-weight: 300; font-size: 24px; color: white; word-spacing: 100vw; margin-top: 15px; }

/* 3D Spiral Stage */
#banner_area .fv3d__stage { position: absolute; top: 45%; right: 16%; width: 0; height: 0; z-index: 15; perspective: 2500px; transform-style: preserve-3d; animation: stageSpiral 30s linear infinite; }
@keyframes stageSpiral {  0% { transform: rotateX(-10deg) rotateY(0deg); }  100% { transform: rotateX(-10deg) rotateY(360deg); }}
#banner_area .bannercard { position: absolute; width: 220px; aspect-ratio: 3/4; overflow: hidden; left: 0; top: 0; margin-left: -110px; margin-top: -145px; transform-style: preserve-3d; backface-visibility: visible; opacity: 1; animation: bannercardOpacity 30s linear infinite; }
#banner_area .bannercard::after { display: none; }
#banner_area .bannercard img { width: 100%; height: 100%; object-fit: cover; display: block; animation: bannercardScale 30s linear infinite; animation-delay: inherit; }
@keyframes bannercardOpacity {  0% { opacity: 1; }  40% { opacity: 0.8; }  50% { opacity: 0.25; }  60% { opacity: 0.8; }  100% { opacity: 1; }}
@keyframes bannercardScale {  0% { transform: scale(1); }  40% { transform: scale(0.95); }  50% { transform: scale(0.9); }  60% { transform: scale(0.95); }  100% { transform: scale(1); }}
#banner_area .top-scroll-anime { position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; z-index: 5; background: linear-gradient(to top,#0f172a,transparent); }

/* 10 bannercards Spiral Distribution */
#banner_area .c1 { transform: rotateY(0deg)   translateZ(380px) translateY(-360px); animation-delay: 0s; }
#banner_area .c2 { transform: rotateY(36deg)  translateZ(380px) translateY(-280px); animation-delay: -3s; }
#banner_area .c3 { transform: rotateY(72deg)  translateZ(380px) translateY(-200px); animation-delay: -6s; }
#banner_area .c4 { transform: rotateY(108deg) translateZ(380px) translateY(-120px); animation-delay: -9s; }
#banner_area .c5 { transform: rotateY(144deg) translateZ(380px) translateY(-40px); animation-delay: -12s; }
#banner_area .c6 { transform: rotateY(180deg) translateZ(380px) translateY(40px); animation-delay: -15s; }
#banner_area .c7 { transform: rotateY(216deg) translateZ(380px) translateY(120px); animation-delay: -18s; }
#banner_area .c8 { transform: rotateY(252deg) translateZ(380px) translateY(200px); animation-delay: -21s; }
#banner_area .c9 { transform: rotateY(288deg) translateZ(380px) translateY(280px); animation-delay: -24s; }
#banner_area .c10 { transform: rotateY(324deg) translateZ(380px) translateY(360px); animation-delay: -27s; }

@media (max-width:1280px) {
    #banner_area .top-fv__title__ja{font-size:20px}
}
@media (max-width: 1024px) {
	#banner_area .fv3d__stage { right: 5%; top: 60%; transform: scale(0.6) rotateX(10deg); }
	#banner_area .top-fv__title {width: 100%;text-align: center;}
	#banner_area .top-fv__inner {justify-content: center;text-align: center;}
}
@media (max-width:980px) {
    #banner_area .top-fv__borders span:nth-child(4), #banner_area .top-fv__borders span:nth-child(5){display:none;}
    #banner_area .top-fv__borders span:nth-child(2){left:50vw}
    #banner_area .top-fv__borders span:nth-child(3){left: 83.5vw;}
    #banner_area .top-fv__title__ja{font-size: 16px;}
	#banner_area .fv3d__stage {right: 45%;}
    #banner_area .top-fv__title{width: 80%;}
    #banner_area .top-fv__title__en span{font-size: 35px;}
}
@media screen and (max-width: 550px) {
    #banner_area .top-fv__inner:before{content:'';background: linear-gradient(180deg, rgb(2 10 28 / 90%) 0%, rgb(11 60 108 / 10%) 200%);width: 130%;height: 100%;position: absolute;z-index: 16;opacity: .5;}
    #banner_area .top-fv__bg video{left: -140%;top: 30%;}
    #banner_area .top-fv__title{width: 90%;margin-top: -20%;}
    #banner_area{height: 90vh;}
    #banner_area .bannercard{width: 150px;margin-left: 0;margin-top: 0;}
    #banner_area .c1 {transform: rotateY(0deg)   translateZ(260px) translateY(-360px);animation-delay: 0s;}
    #banner_area .c2 { transform: rotateY(36deg)  translateZ(260px) translateY(-280px); animation-delay: -3s; }
    #banner_area .c3 { transform: rotateY(72deg)  translateZ(260px) translateY(-200px); animation-delay: -6s; }
    #banner_area .c4 { transform: rotateY(108deg) translateZ(260px) translateY(-120px); animation-delay: -9s; }
    #banner_area .c5 { transform: rotateY(144deg) translateZ(260px) translateY(-40px); animation-delay: -12s; }
    #banner_area .c6 { transform: rotateY(180deg) translateZ(260px) translateY(40px); animation-delay: -15s; }
    #banner_area .c7 { transform: rotateY(216deg) translateZ(260px) translateY(120px); animation-delay: -18s; }
    #banner_area .c8 { transform: rotateY(252deg) translateZ(260px) translateY(200px); animation-delay: -21s; }
    #banner_area .c9 { transform: rotateY(288deg) translateZ(260px) translateY(280px); animation-delay: -24s; }
    #banner_area .c10 { transform: rotateY(324deg) translateZ(260px) translateY(360px); animation-delay: -27s; }
}