@charset "utf-8";
/*--------------------------
	created: 2023.04.26
	updated: 2025.3.21
---------------------------*/

#wrapper {
	widows: 100vw;
	height: 100vh;
	overflow: hidden;
}

footer {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400;
	color: lightgray;
	font-size: 16px;
	display: inline-block;
	position: absolute;
	bottom: 2vw;
	left: 50%;
	transform: translateX(-50%);
}

.vision-code-container {
	background: url("../images/background.png") no-repeat #333;
	background-size: cover;
	background-position: center bottom;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.vision-code {
	font-family: 'Quicksand', sans-serif;
	font-size: 6vw;
	font-weight: 400;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-align: center;
	margin: 2vw;
	animation-name: slide-up;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
}

.vision-code-message {
	font-family: 'Noto Serif JP', serif;
	font-size: 1vw;
	font-weight: 400;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.9);
	text-align: center;
	animation-name: slide-up;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
}

.vision-code-message span {
	display: inline-block;
}

.info {
    font-family: 'Noto SansJP', san-serif;
    color: white;
    font-size: 16px;
    padding: 20px 30px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    bottom: 25vh;
    position: absolute;
}

.info a {
    color: white;
    cursor: pointer;
}

.contact {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-align: center;
	margin: 2vw;
	animation-name: slide-up;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	padding: 20px 32px;
	border: 1px solid snow;
	position: absolute;
	bottom: 10vh;
}

.contact a {
	color: #fff;
	text-decoration: none;
	display: block;
	cursor: pointer;
}

.contact a:hover {
	opacity: 0.5;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-repeat: no-repeat; /*background-size: cover; background-position: 50% 50%;*/ } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
#stats {display: none;}


/* - desktop - */
@media screen and (min-width: 1401px) {

}

/* - laptop - */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
}

/* - tablet - */
@media screen and (min-width: 429px) and (max-width: 1024px) {
	.vision-code-message {
		font-size: 0.85rem;
		padding: 0 20px;
	}

}

/* - mobile - */
@media screen and (max-width: 428px) {
	.vision-code-message {
		font-size: 0.85rem;
		padding: 0 20px;
	}

}

@media screen and (max-height: 541px) {
	.info{
		bottom: auto;
        top: 15vh;
	}
}

@media screen and (max-height: 300px) {
	.contact {
		padding: 5px 32px;
	}
}