@charset "utf-8";
/* CSS Document */

body {
	background-color: #000000;
	width:auto;
	height: auto;
	overflow-x:hidden;
}

.sp-br {
	display: none;
}

/*abyssalimg*/

#abyssalimg {
    position: relative;
    overflow: hidden;
}

#underwater-bg {
	position: absolute;
	top: -5%;
	left: -5%;
    inset: -8vw;
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url("../img/abyssalimg01.jpg");
	background-size: cover;
    background-position: center;
    animation: underwater 12s ease-in-out infinite;
	width: 110%;
	height: 110%;
}

@keyframes underwater {
    0% {
        transform: translateY(0px) scale(1.03);
    }

    25% {
        transform: translate(-1vw, -1.2vw) scale(1.04);
    }

    50% {
        transform: translate(0.8vw, 0vw) scale(1.03);
    }

    75% {
        transform: translate(-0.8vw, 1.2vw) scale(1.04);
    }

    100% {
        transform: translateY(0vw) scale(1.03);
    }
}

#top {
	position: relative;
    z-index: 2;
	text-align: center;
	padding: 10vw 15vw;
}

#topcopy1 {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2vw;
	color: #53eafd;
	letter-spacing: 0.4vw;
}

#topcopy2 {
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-style: normal;
	font-size: 5vw;
	color: aliceblue;
}

h1 {
	margin-top: 2.5vw;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5vw;
	color: #5ee9b5;
}

#limited {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.2vw;
	margin-top: 1vw;
	color:#EC3300;
	letter-spacing: 0.2vw;
}

#price {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1vw;
	margin-top: 2vw;
	color: aliceblue;
	letter-spacing: 0.2vw;
}

.buy {
	color: aliceblue;
	margin-top: 2vw;
	padding: 1vw 2.5vw;
	background: linear-gradient(135deg, #0093B6, #009968);
}

#arrow-icon {
	width: 1vw;
    height: auto;
    color: #53eafd;
	display: block;
    margin: 3vw auto 0;
	animation: abyssal-float 2.5s infinite ease-in-out;
}

@keyframes abyssal-float {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(2vw);
        opacity: 1;
    }
}

.bubble {
    position: absolute;
    bottom: -100px;
    border-radius: 50%;

    background: rgba(0, 120, 255, 0.2);

    border: 1px solid rgba(80, 200, 255, 0.9);

    box-shadow:
        0 0 15px rgba(0, 120, 255, 0.9),
        0 0 30px rgba(0, 180, 255, 0.5),
        inset 0 0 10px rgba(120, 220, 255, 0.7);

    animation: bubbleRise linear infinite;
}

.bubble:nth-child(1) {
    left: 5%;
    width: 6px;
    height: 6px;
    animation-duration: 10s;
}

.bubble:nth-child(2) {
    left: 12%;
    width: 10px;
    height: 10px;
    animation-duration: 16s;
    animation-delay: 1s;
}

.bubble:nth-child(3) {
    left: 20%;
    width: 14px;
    height: 14px;
    animation-duration: 18s;
}

.bubble:nth-child(4) {
    left: 30%;
    width: 8px;
    height: 8px;
    animation-duration: 12s;
    animation-delay: 2s;
}

.bubble:nth-child(5) {
    left: 40%;
    width: 18px;
    height: 18px;
    animation-duration: 20s;
}

.bubble:nth-child(6) {
    left: 50%;
    width: 12px;
    height: 12px;
    animation-duration: 15s;
    animation-delay: 3s;
}

.bubble:nth-child(7) {
    left: 58%;
    width: 7px;
    height: 7px;
    animation-duration: 11s;
}

.bubble:nth-child(8) {
    left: 67%;
    width: 16px;
    height: 16px;
    animation-duration: 19s;
    animation-delay: 1.5s;
}

.bubble:nth-child(9) {
    left: 75%;
    width: 10px;
    height: 10px;
    animation-duration: 14s;
}

.bubble:nth-child(10) {
    left: 83%;
    width: 20px;
    height: 20px;
    animation-duration: 22s;
    animation-delay: 2.5s;
}

.bubble:nth-child(11) {
    left: 90%;
    width: 8px;
    height: 8px;
    animation-duration: 13s;
}

.bubble:nth-child(12) {
    left: 96%;
    width: 12px;
    height: 12px;
    animation-duration: 17s;
    animation-delay: 4s;
}

#bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

@keyframes bubbleRise {

    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: .7;
    }

    50% {
        transform: translateY(-30vh) translateX(15px);
    }

    100% {
        transform: translateY(-80vh) translateX(-15px);
        opacity: 0;
    }
}

.fade-abyss {
    opacity: 0;
    filter: blur(1vw);
    transform: translateY(2vw);
    animation: abyssFade 1.0s ease forwards;
	animation-fill-mode: forwards;
}

#topcopy1 {
    animation-delay: 0.2s;
}

#topcopy2 {
    animation-delay: 0.8s;
}

#top h1 {
    animation-delay: 1.4s;
}

#limited {
    animation-delay: 1.4s;
}

#price {
    animation-delay: 2.0s;
}

#top button {
    animation-delay: 2.4s;
}

@keyframes abyssFade {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}


/*description01*/

#description01 {
	width: 70vw;
	height: auto;
	padding:5vw 0 0vw 0vw;
	margin: 0 auto;
	
	position: relative;
    overflow: hidden;
} 

#descriptioncont01 {
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

#abyssaltext {
	width: 20vw;
	padding-top: 12vw;
}

#abyssaltext h2 {
	font-size: 4vw;
	color: aliceblue;
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	margin: 0 0vw 3vw 0;
}

#abyssaltext p {
	font-size: 1vw;
	color: aliceblue;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#abyssalimg02 {
	margin: 0 ;
}
	
#abyssalimg02 img {
	border-radius: 0.7vw;
	width: 40vw;
	height: auto;
}

/*description02*/
#description02 {
	width: 70vw;
	padding: 10vw 0;
	margin: 0 auto;
} 

#lighttitle h2 {
	text-align: center;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-style: normal;
	font-size: 3vw;
	color: aliceblue;
	margin-bottom: 2vw;
}

#lighttext {
	text-align: center;
	font-size: 1vw;
	color: aliceblue;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-bottom: 5vw;
}

#lightslider {
	position: relative;
	width: 70vw;
	margin: 0 auto;
	padding: 2vw 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}

.slider-container {
	width: 100%;
	margin: 0 auto;
	border-radius: 0.7vw;
}

.slider-track {
	display: flex;
	transition: transform 1s cubic-bezier(.22,.61,.36,1);
}

.slide {
	min-width: 100%;
	text-align: center;
}

.slide img {
	width: 30vw;
	height: auto;
	border-radius: 0.7vw;
	animation: auroraGlow 4s ease-in-out infinite;
}

.slide p {
	margin-top: 1vw;

	color: #eaf8ff;

	text-shadow:
		0 0 5px rgba(0,180,255,.6),
		0 0 15px rgba(0,180,255,.3);

	font-size: 1vw;
	letter-spacing: .15em;
}

@keyframes auroraGlow {

    0%,100% {
        box-shadow:
            0 0 10px rgba(0,150,255,.3);
    }

    50% {
        box-shadow:
            0 0 20px rgba(0,180,255,.8),
            0 0 40px rgba(120,0,255,.5),
            0 0 60px rgba(0,255,255,.4);
    }
}

.slider-arrow {
	position: absolute;
	top: 45%;

	transform: translateY(-50%);

	background: rgba(0,0,0,.4);
	border: 1px solid rgba(83,234,253,.4);

	color: #53eafd;

	width: 3vw;
	height: 3vw;

	border-radius: 50%;
	cursor: pointer;

	font-size: 1.5vw;

	z-index: 10;

	backdrop-filter: blur(4px);
}

.prev {
	left: -5vw;
}

.next {
	right: -5vw;
}

.slider-arrow:hover {
	box-shadow:
		0 0 10px rgba(83,234,253,.8);
}

.slider-dots {
	display: flex;
	justify-content: center;
	gap: 1vw;

	margin-top: 2vw;
}

.dot {
	width: .8vw;
	height: .8vw;

	border-radius: 50%;

	background: rgba(255,255,255,.3);

	cursor: pointer;

	transition: .3s;
}

.dot.active {
	background: #53eafd;

	box-shadow:
		0 0 10px #53eafd;
}


/*description03*/
#description03 {
	position: relative;
    overflow: hidden;
	width: 100vw;
	height: auto;
	background: #4A5358;
} 

#aurorawrap {
	width: 70vw;
	padding:10vw;
	margin: 0 auto;
}

#description03::before {
    content: "";

    position: absolute;
    inset: -30%;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(0,255,200,.35),
            transparent 25%
        ),

        radial-gradient(
            circle at 75% 25%,
            rgba(255,0,180,.25),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 70%,
            rgba(0,170,255,.30),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(180,0,255,.25),
            transparent 25%
        ),

        radial-gradient(
            circle at 35% 50%,
            rgba(0,255,120,.25),
            transparent 20%
        );

    filter: blur(80px);

    animation:
        auroraFlow 18s ease-in-out infinite alternate,
        auroraColorShift 20s linear infinite,
        auroraBrightness 8s ease-in-out infinite;

    z-index: 0;
}

#auroraimg {
	margin: 0 auto;
}
	
#auroraimg img {
	border-radius: 0.7vw;
	width: 30vw;
	height: auto;
}

#auroracontent,
#lightvideo {
    position: relative;
    z-index: 2;
}

#auroracontent {
	display: flex;
}

#auroratext {
	margin-left: 3vw;
	width:  20vw;
}

#auroratext h2 {
	font-size: 4vw;
	color: aliceblue;
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	margin-bottom: 2vw;
}

#auroratext p {
	font-size: 1vw;
	color: aliceblue;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@keyframes auroraFlow {

    0% {
        transform:
            translate(-3%, 0%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate(4%, -2%)
            rotate(2deg)
            scale(1.1);
    }

    100% {
        transform:
            translate(-2%, 2%)
            rotate(-2deg)
            scale(1.05);
    }
}


@keyframes auroraColorShift {

    0% {
        filter: blur(80px) hue-rotate(0deg);
    }

    25% {
        filter: blur(80px) hue-rotate(40deg);
    }

    50% {
        filter: blur(80px) hue-rotate(90deg);
    }

    75% {
        filter: blur(80px) hue-rotate(140deg);
    }

    100% {
        filter: blur(80px) hue-rotate(360deg);
    }
}

@keyframes auroraBrightness {

    0%,100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }
}

/*description04*/
#description04 {
	width: 70vw;
	height: auto;
	padding:10vw;
	margin: 0 auto;
} 

#detailtitle h2 {
	text-align: center;
	font-size: 4vw;
	color: aliceblue;
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	margin-bottom: 2vw;
}

#detailvideo {
	width: 100%;
	margin: 0 auto 5vw;
}

#detailvideo video {
	width: 100%;
	height: auto;
}

#detailimgwrap {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.detailimg  {
	position: relative;
    width: 30%;
    text-align: center;
	cursor: pointer;
}

.zoom-icon {
	position: absolute;
	top: 1vw;
	right: 1vw;

	width: 2.5vw;
	height: 2.5vw;

	border-radius: 50%;

	background: rgba(0,0,0,.6);
	z-index: 10; 
	color: white;
	font-size: 1.5vw;

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 1;
	transition: .3s;
}

.detailimg:hover .zoom-icon {
	opacity: 1;
}


.detailimg  img {
    width: 100%;
    height: auto;
    border-radius: 0.7vw;
	
	box-shadow:
		0 0 10px rgba(0,180,255,.3),
		0 0 30px rgba(0,180,255,.2);

	background: #000;
	
	transition: transform .3s ease;
}

.detailimg:hover img {
	transform: scale(1.03);
}

.detailimg  p {
    margin-top: 1vw;
    color: #eaf8ff;
    text-shadow:
        0 0 5px rgba(0,180,255,.6),
        0 0 15px rgba(0,180,255,.3);
    font-size: 1vw;
    letter-spacing: .15em;
}

/*modal*/
#imageModal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.9);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
	
	opacity: 0;
	visibility: hidden;
	transition: .4s ease;
}

#imageModal.active {
	display: flex;
	opacity: 1;
	visibility: visible;
}

#modalImage {
	max-width: 70vw;
	max-height: 70vh;
	border-radius: 1vw;
	box-shadow:
		0 0 20px rgba(0,180,255,.6),
		0 0 60px rgba(0,180,255,.3);
	
	transform: scale(.9);
	transition: .4s ease;
}

#imageModal.active #modalImage {
	transform: scale(1);
}

#closeModal {
	position: absolute;

	top: 2vw;
	right: 3vw;

	font-size: 3vw;
	color: white;

	cursor: pointer;
}


/*description05*/
#description05 {
	position: relative;
	overflow: hidden;
	width: 80vw;
	height: auto;
	margin: 0 auto;
	padding: 15vw 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

#limited-bg {
	position: absolute;
	top: 39%;
	left: 50%;

	transform: translate(-50%, -50%);
	
	background-image: url("../img/colorhalftone.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 0;
	pacity: 0.6;
	
	width: 60vw;
	height: 60vw;
	
	filter:
		drop-shadow(0 0 30px rgba(0,212,255,.4))
		drop-shadow(0 0 60px rgba(255,79,216,.3));
}

#limitedcont {
	position: relative;
	z-index: 1;
}

#limitedtitle h2 {
	text-align: center;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 28vw;
	letter-spacing: 1.5vw;
	line-height: 0.8;
	
	background: linear-gradient(
	90deg,
	#00d4ff 0%,
	#00ff99 25%,
	#7b68ee 50%,
	#ff4fd8 75%,
	#00d4ff 100%);
	
	background-clip: text;
	-webkit-background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;
	
	
	background-size: 300% 100%;
	
	animation: auroraText 8s linear infinite;
}

@keyframes auroraText {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 300% 50%;
	}
}

#limitedtext {
	text-align: center;
	font-size: 2vw;
	color: aliceblue;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-top: 5vw;
}

/*description06*/
#description06 {
	width: 100vw;
	height: auto;
	padding:10vw;
	margin: 0 auto;
	
	position: relative;


	background-image:
		linear-gradient(
			rgba(83, 234, 253, 0.15) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(83, 234, 253, 0.15) 1px,
			transparent 1px
		);

	background-size: 1vw 1vw;
	
	background-repeat: repeat;
}

#spectitle h2 {
	text-align: center;
	font-size: 4vw;
	color: aliceblue;
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	margin-bottom: 2vw;
}

#spectext table {
	margin: 0 auto;
	line-height: 3;
}

#spectext th {
	text-align: left;
	font-size: 1.2vw;
	color: #53eafd;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	vertical-align: top;
}

#spectext td {
	font-size: 1.2vw;
	color: aliceblue;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	vertical-align: top;
	padding-left: 2vw;
}

/*foot*/
#footer {
    position: relative;
    overflow: hidden;
	width: 100vw;
	height: auto;
}

#underwater-foot {
	position: absolute;
	inset: 0;
	background:  linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.85)),url("../img/foot.jpg");
	background-size: cover;
	background-position: center;
	z-index: 0;
	
	animation: footerUnderwater 15s ease-in-out infinite;
}

#underwater-foot::before {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			100deg,
			transparent 20%,
			rgba(0,255,255,.05) 40%,
			rgba(0,180,255,.08) 50%,
			transparent 70%
		);

	filter: blur(20px);

	animation: lightBeam 12s linear infinite;
	
}

#footcontent {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70vw;
	height: auto;
	padding:10vw;
	margin: 0 auto;
	z-index: 1;
	min-height: 50vw;
}

#footcontent h2 {
	text-align: center;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-style: normal;
	font-size: 5vw;
	color: aliceblue;
	width: 100%;
	height: auto;
}

#buy2 {
	width: 20vw;
	height: auto;
	color: aliceblue;
	padding: 1vw 2.5vw;
	background: linear-gradient(135deg, #0093B6, #009968);
	margin: 0 auto;
	margin-top: 2vw;
}

#official {
	width: 20vw;
	height: auto;
	color: aliceblue;
	margin: 0 auto;
	margin-top: 3vw;
	padding: 1vw 2.5vw;
	border: 1px solid #FFFFFF;
	border-radius: 3vw;
}

#copyright {
	margin-top: auto;
	padding-top: 5vw;
	font-size: 0.6vw;
	color: aliceblue;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

@keyframes footerUnderwater {

	0% {
		transform:
			scale(1.03)
			translate(0,0);
	}

	25% {
		transform:
			scale(1.05)
			translate(-0.5vw,-0.3vw);
	}

	50% {
		transform:
			scale(1.04)
			translate(0.5vw,0.2vw);
	}

	75% {
		transform:
			scale(1.05)
			translate(-0.3vw,0.4vw);
	}

	100% {
		transform:
			scale(1.03)
			translate(0,0);
	}
}

@keyframes lightBeam {

	from {
		transform:
			translateX(-50%)
			rotate(-5deg);
	}

	to {
		transform:
			translateX(50%)
			rotate(-5deg);
	}
}

.scroll-fade {
	opacity: 0;
	transform: translateY(4vw);
	filter: blur(0.5vw);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease,
		filter 1.2s ease;
}

.scroll-fade.show {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* =========================
   Fixed CTA
========================= */

#fixed-buy{
	position:fixed;
	left:50%;
	bottom:20px;
	transform:translateX(-50%);
	width:90vw;
	max-width:40vw;
	z-index:9999;
	padding:16px;
	background:rgba(10,20,30,.55);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	border:1px solid rgba(83,234,253,.2);
	border-radius:1vw;
	box-shadow:
		0 8px 30px rgba(0,0,0,.35),
		0 0 20px rgba(83,234,253,.12);
	opacity:0;
	pointer-events:none;
	transition:
		opacity .3s ease,
		transform .3s ease;
}

#fixed-buy.show{
	opacity:1;
	pointer-events:auto;
}

#fixed-buy-info{
	margin-bottom:12px;
	padding:0;
	background:none;
	border:none;
	box-shadow:none;
	text-align:center;
}

.fixed-limit{
	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:700;
	font-size:1.4vw;
	color:#53eafd;
	margin-bottom:6px;
	text-shadow:
		0 0 10px rgba(83,234,253,.5);
}

.fixed-name{

	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:700;
	font-size:1.5vw;
	line-height:1.6;
	color:#ffffff;
}

.fixed-price{
	margin-top:6px;
	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:700;
	font-size:1.4vw;
	color:#53eafd;
	text-shadow:
		0 0 12px rgba(83,234,253,.4);
}

.tax{
	margin-left: 0.5vw;
	font-size:0.8vw;
}

#fixed-buy a{
	display:block;
	width:100%;
	text-align:center;
	text-decoration:none;
	padding:16px 20px;
	color:#fff;
	font-family:"Zen Kaku Gothic New", sans-serif;
	font-weight:700;
	background:
	linear-gradient(
		135deg,
		#0093B6,
		#009968
	);
	border-radius:999px;
	box-shadow:
		0 0 15px rgba(0,180,255,.35);
}

#fixed-buy a:hover{
	transform:translateY(-2px);
	box-shadow:
		0 0 25px rgba(0,180,255,.7);
}